@creaditor/texteditor

@creaditor/texteditor is a lightweight, customizable, and user-friendly text editor package designed to meet the needs of developers creating newsletters, email editors, or any application requiring rich text editing. It provides a variety of features and integrations with a focus on flexibility and usability.

Features

• Rich Text Editing: Supports bold, italic, underline, strikethrough, and more.
• Direction Control: Handles both left-to-right (LTR) and right-to-left (RTL) text directions.
• Customizable Toolbars: Add or remove tools as needed to suit your requirements.
• Font and Style Management: Allows font family and size customization, text alignment, and color changes.
• LocalStorage Integration: Automatically saves the content to the browser's localStorage.
• Plugin Support: Easily extend functionality with custom plugins.
• Table Support: Add and customize tables directly in the editor.
• Emoji Picker: Built-in emoji selector for enhanced content creation.

Installation

Install the package via npm:

npm install @creaditor/texteditor

Usage

Here’s a quick example to get started:

import textEditor from "@creaditor/texteditor";

const root = document.createElement("div");
root.style.width = "500px";
root.style.marginTop = "300px";
const content = localStorage.getItem("cdtr-text-editor-demo");


const fontFamilies = [
  {
    id: "Arial",
    cssRule: "Arial, Helvetica, sans-serif",
    name: "Arial",
    language: ["en", "he"],
    url: null,
  },
  {
    id: "Times New Roman",
    cssRule: "Times New Roman, Times, Beskerville, Georgia, serif",
    name: "Times New Roman",
    language: ["en", "he"],
    url: null,
  },
  {
    id: "ArialV2",
    cssRule: "Arial, Times, Beskerville, Georgia, serif",
    name: "Arial test",
    language: ["en", "he"],
    url: null,
  },
];



textEditor({
  element: root,
  editorWidth: "473px",
  container: document.body,
  editable: true,
  content: content ? content : "<p>Hello</p>",
  defaultDirection: "rtl",
  onBlur: () => {},
  onFocus: () => {},
  onUpdate: ({ editor, transaction }) => {
    if (transaction.steps.length === 0) {
      return;
    }
    const html = editor.getHTML();
    localStorage.setItem("cdtr-text-editor-demo", html);
  },
  ignoresBlurByQuerySelectors: [".test"],
  builder: [
    { type: "fontFamily", fonts: fontFamilies },
    {
      type: "fontSize",
      sizes: [
        8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42,
        44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78,
        80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100, 102, 104, 106, 108, 110,
        112, 114, 116, 118, 120, 122, 124, 126, 128, 130, 132, 134, 136, 138,
        140, 142, 144, 146, 148, 150, 152, 154, 156, 158, 160, 162, 164, 166,
        168, 170, 172, 174,
      ],
    },
    { type: "horizonRule" },
    { type: "quotes" },
    { type: "clearFormat" },
    { type: "bold" },
    { type: "strike" },
    { type: "italic" },
    { type: "underline" },
    { type: "table" },
    { type: "emoji" },
    { type: "unLink" },
    { type: "link" },
    { type: "customList" },
    { type: "numbered" },
    { type: "bullet" },
    { type: "backcolor" },
    { type: "fontColor" },
    { type: "direction" },
    { type: "justify" },
    { type: "right" },
    { type: "center" },
    { type: "left" },
  ],
});

Key Integrations

This editor is built using:

• TipTap for ProseMirror-based rich text editing.

• Babel and Webpack for modern JavaScript development.

• PostCSS for managing CSS styles.

License

This package is licensed under the ISC License.