4.12.0-alpha.0 • Published 1 year ago
@hsuehpe/easy-email-editor v4.12.0-alpha.0
Easy-email-editor
Introduction
Email render and preview container.
usage
$ npm install --save easy-email-editor
or
$ yarn add easy-email-editor
import React from "react";
import { BlockManager } from "easy-email-core";
import { EmailEditor, EmailEditorProvider } from "easy-email-editor";
import "easy-email-editor/lib/style.css";
const initialValues = {
subject: "Welcome to Easy-email",
subTitle: "Nice to meet you!",
content: BlockManager.getBlockByType(BasicType.PAGE).create({}),
};
export function App() {
return (
<EmailEditorProvider data={initialValues} height={"calc(100vh - 72px)"}>
{({ values }) => {
return <EmailEditor />;
}}
</EmailEditorProvider>
);
}
customize
If you customize the UI yourself,maybe you need to know
hooks
- useActiveTab // current tab is edit or preview
- useBlock // includes addBlock、moveBlock、removeBlock、undo, redo, etc.
- useHoverIdx // hover block related, dragging status related, dragging direction related
- useEditorProps // get props from EmailEditorProvider
- useEditorContext // get form state and initialized status
- useFocusIdx // focus block related
utils (These are some very simple methods, it is best to look at the implementation)
- getBlockNodeByIdx
- getBlockNodes
- getShadowRoot
- scrollBlockEleIntoView
components
- BlockAvatarWrapper // allow drag and drop to editor
4.12.0-alpha.0
1 year ago
4.11.9-alpha.0
1 year ago
4.11.7-alpha.0
1 year ago
4.11.6-alpha.0
1 year ago
4.11.5-alpha.0
1 year ago
4.11.4-alpha.0
1 year ago
4.11.3-alpha.0
1 year ago
4.11.2-alpha.0
1 year ago
4.12.8-alpha.0
1 year ago
4.12.5-alpha.0
1 year ago
4.12.4-alpha.0
1 year ago
4.12.2-alpha.0
1 year ago
4.12.1-alpha.0
1 year ago
4.11.5
1 year ago
4.11.4
1 year ago
4.11.3
1 year ago
4.11.2
1 year ago
4.11.1
1 year ago
4.11.0
1 year ago