realmail-extensions v0.17.2
realmail-extensions
Introduction
Provide default UI components, when they don’t meet your needs, you can refer to it and write your own
usage
$ npm install --save realmail-extensions
or
$ yarn add realmail-extensions
import React from 'react';
import { BlockManager, BasicType } from 'realmail-core';
import { EmailEditor, EmailEditorProvider } from 'realmail-editor';
import { SimpleLayout } from 'realmail-extensions';
import 'realmail-editor/lib/style.css';
import 'realmail-extensions/lib/style.css';
const initialValues = {
subject: 'Welcome to realmail',
subTitle: 'Nice to meet you!',
content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),
};
export function App() {
return (
<EmailEditorProvider
data={initialValues}
height={'calc(100vh - 72px)'}
autoComplete
dashed={false}
>
{({ values }) => {
return (
<SimpleLayout>
<EmailEditor />
</SimpleLayout>
);
}}
</EmailEditorProvider>
);
}
Extensions
AttributePanel
Basic block configuration panel
You can add or overwrite
import { BlockAttributeConfigurationManager } from "realmail-extensions"; BlockAttributeConfigurationManager.add({ [BasicType.TEXT]: () => <div>will be overwrite `Text`</div>, });
InteractivePrompt
block hover and focus style
No configuration items
BlockLayer
- No configuration items
ShortcutToolbar
You can add or overwrite popover's preset blocks
import { BasicType } from "realmail-core"; import { BlockMarketManager, BlockMaskWrapper } from "realmail-extensions"; BlockMarketManager.addCategories([ { title: "Custom", name: "custom", blocks: [ { type: BasicType.TEXT, title: "Text", description: "This block allows you to display text in your email.", component: () => { return ( <BlockMaskWrapper type={BasicType.TEXT} payload={{ attributes: { "font-size": "20px", align: "center", padding: "0px 0px 0px 0px", color: "#4A90E2", }, data: { value: { content: "20px", }, }, }} > <div style={{ fontSize: 20, width: "100%", paddingLeft: 20 }}> 20px </div> </BlockMaskWrapper> ); }, }, ], }, ]);
SimpleLayout
- All in one extension, provide basic and complete layout example. Refer to the above extension for configuration items.
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago