@sparklink-pro/email-editor

How to use

To use the @sparklink-pro/email-editor in your project, you need to install it first. You can do this using npm or yarn:

npm install @sparklink-pro/email-editor

or

yarn add @sparklink-pro/email-editor

Basic Usage

You can use the EmailEditor component in your React application as follows:

import { EmailEditor } from '@sparklink-pro/email-editor';
export function MyComponent() {
  return (
    <EmailEditor
      key="my-email-editor"
      value="<p>Hello, world!</p>"
      onUploadImage={(file) => {
        // Handle image upload
        console.log('Image uploaded:', file);
        return Promise.resolve({ url: 'https://example.com/image.jpg' });
      }}
      onChange={(value) => {
        // Handle editor change
        console.log('Editor value changed:', value);
      }}
    />
  );
}

Translation (i18n)

In your project, you can use the EmailEditorProvider to set the locale for the email editor. This allows you to switch languages dynamically based on user preferences or application settings.

import { EmailEditor, EmailEditorProvider } from '@sparklink-pro/email-editor';
import {useTranslation} from 'react-i18next';

export function MyComponent() {
const { i18n } = useTranslation()

// ... other code
return (
 <EmailEditorProvider key={i18n.language} locale={i18n.language}>
    <EmailEditor 
      // ... other props
      />
  </EmailEditorProvider>
  );
}

Working locally with email-editor

Working locally with email-editor relies on yalc and yarn.

First, you neeed to compile the project.

cd email-editor
yarn
yarn build

Then, you'll need to publish the project with yalc.

$ yalc publish
@sparklink-pro/email-editor@xxx published in store.

The project is now in the yalc store and is available to use for other project.

Use the @sparklink-pro/email-editor in your project

To use the library in your local project, you need to link it with yalc.

cd myproject/
yalc link @sparklink-pro/email-editor

@sparklink-pro/email-editor is now linked to the project.