@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:

``bash
npm install @creaditor/texteditor
`

Usage

#### Here’s a quick example to get started:


`js
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 : "

Hello

",
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.