Easy Email Pro Plugins

The easy-email-pro-plugins package provides extension plugins that enhance the email editor's functionality. Currently, it includes the EmojiPlugin for adding emoji support to text editing.

Overview

Plugins in Easy Email Pro extend the editor's capabilities by adding new features or modifying existing behavior. The plugins package provides ready-to-use plugins that can be easily integrated into your editor.

Installation

pnpm install easy-email-pro-plugins

Exports

export { EmojiPlugin } from "easy-email-pro-plugins";

EmojiPlugin

The EmojiPlugin adds emoji picker functionality to the rich text editor, allowing users to insert emojis into text content.

Usage

import { EmojiPlugin } from "easy-email-pro-plugins";
import { RichTextBar } from "easy-email-pro-theme";

function MyEditor() {
  return (
    <RichTextBar>
      <EmojiPlugin />
      {/* Other toolbar buttons */}
    </RichTextBar>
  );
}

Props

The EmojiPlugin accepts props that are passed to the underlying emoji picker component:

<EmojiPlugin
  locale="en"
  theme="light"
  // ... other emoji picker props
/>

Features

• Click to open emoji picker
• Search and browse emojis
• Insert emoji into text at cursor position
• Integrated with Slate editor

Example Integration

import React from "react";
import { EmailEditorProvider } from "easy-email-pro-editor";
import { Retro, RichTextBar } from "easy-email-pro-theme";
import { EmojiPlugin } from "easy-email-pro-plugins";

function MyEditor() {
  const config = Retro.useCreateConfig({
    // ... editor config
  });

  return (
    <EmailEditorProvider {...config}>
      <Retro.Layout>
        <RichTextBar>
          <EmojiPlugin />
        </RichTextBar>
      </Retro.Layout>
    </EmailEditorProvider>
  );
}

Creating Custom Plugins

While the plugins package currently provides EmojiPlugin, you can create your own plugins by following similar patterns. Plugins are React components that integrate with the Slate editor and the theme system.

Plugin Structure

A plugin typically:

1. Uses Slate hooks (useSlate, useSlateStatic) to interact with the editor
2. Provides UI elements (buttons, popovers, etc.)
3. Modifies editor content or behavior when activated

Example: Custom Plugin Template

import React from "react";
import { useSlate } from "slate-react";
import { Transforms } from "slate";
import { Button, Tooltip } from "@arco-design/web-react";
import { t } from "easy-email-pro-core";

export function MyCustomPlugin() {
  const editor = useSlate();

  const handleClick = () => {
    // Plugin logic here
    Transforms.insertText(editor, "Custom content");
  };

  return (
    <Tooltip content={t("Custom Plugin")}>
      <Button onClick={handleClick}>
        Custom Action
      </Button>
    </Tooltip>
  );
}

Notes

• Plugins are designed to work within the RichTextBar component
• The EmojiPlugin uses the @emoji-mart/react library internally
• Plugins should respect the editor's state and selection
• Consider accessibility when creating custom plugins