@cyberbiz-corp/grapesjs-editor
Install
yarn add @cyberbiz-corp/grapesjs-editor
Usage
import '@cyberbiz-corp/pitaya-ui/dist/style.css'
import '@cyberbiz-corp/grapesjs-editor/dist/style.css'
Both CSS files must be imported manually or the editor won't render correctly.
import { useTranslation } from 'react-i18next'
import { EmailEditorProvider, EmailLayout } from '@cyberbiz-corp/grapesjs-editor'
const EdmEditPage = () => {
const { i18n } = useTranslation()
return (
<EmailEditorProvider
context={{ edmId: 1, shopDomain: 'example.com', title: 'My EDM' }}
provider={storageProvider}
i18n={i18n}
onLoad={(result) => {}}
onDirtyChange={(dirty) => {}}
onSaved={() => {}}
onError={(error) => {}}
components={{ LinkPicker, ImageUpload }}
>
<EmailLayout toolbar={<YourToolbar />} />
</EmailEditorProvider>
)
}
Peer Dependencies
This package uses the host app's existing dependencies rather than bundling them.
| Package | Version | Description |
|---|---|---|
| react | ^17.0.1 | React runtime |
| react-dom | ^16.13.1 | React runtime |
| styled-components | ^5.2.1 | required by @cyberbiz-corp/pitaya-ui |
| react-i18next | ^14.1.2 | editor UI translations |
| i18next | ^23.11.5 | editor UI translations |
| react-select | ^3.2.0 | select/dropdown fields in style panels |
| react-colorful | ^5.6.1 | color picker in style panels |
| lodash-es | ^4.18.1 | utility functions |
| uuid | ^9.0.1 | unique ID generation for form inputs |
| @cyberbiz-corp/pitaya-ui | ^0.44.0 | internal UI component library |
| @fortawesome/fontawesome-svg-core | ^1.2.25 | icons in editor UI |
| @fortawesome/free-solid-svg-icons | ^5.11.2 | icons in editor UI |
| @fortawesome/react-fontawesome | ^0.2.2 | icons in editor UI |
EmailEditorProvider Props
| Prop | Required | Description |
|---|---|---|
context.edmId | ✅ | EDM record ID |
context.shopDomain | ✅ | Shop domain |
context.title | ✅ | EDM title |
provider | ✅ | Storage adapter for loading/saving EDM data |
i18n | ✅ | i18next instance from the host app |
onLoad | ✅ | Called after the editor loads, with the load result |
onDirtyChange | ✅ | Called when unsaved change state changes |
onSaved | ✅ | Called after a successful save |
onError | — | Called on internal editor errors (e.g. image delete failure) |
components.LinkPicker | — | Custom link picker component, falls back to default |
components.ImageUpload | — | Custom image upload component, falls back to default |
Acknowledgements
Built on GrapesJS (BSD 3-Clause © Artur Arseniev).