nam-rich-text-editor 9.1.0 → 9.1.2

package/README.md

@@ -48,9 +48,211 @@ const MyEditor = () => {
 
 ## Features
 
-- Bold, Italic, Underline formatting
-- Bullet and numbered lists
-- HTML content editing
+- **Text Formatting**: Bold, Italic, Underline, Strikethrough
+- **Lists**: Bullet and numbered lists
+- **Alignment**: Left, Center, Right, Justify
+- **Headings**: H1, H2, H3, H4
+- **Media**: Insert images and videos (including YouTube embeds)
+- **Links**: Create hyperlinks
+- **Quotes**: Insert formatted blockquotes
+- **Colors**: Text and background colors
+- **Fonts**: Multiple font families and sizes
+- **Undo/Redo**: Full history support
+- **Fullscreen Mode**: Focus writing mode
+- **HTML Content**: Content is stored as HTML
+
+## Multilingual Support
+
+The editor supports managing content for multiple languages. Here's how to preserve content when switching between language tabs:
+
+### Vanilla JavaScript Example
+
+```javascript
+import { RichTextEditor } from "rich-text-editor";
+
+// Create storage for different languages
+const contentStorage = {
+  vi: "",
+  en: "",
+  zh: "",
+};
+let currentLanguage = "vi";
+
+const editor = new RichTextEditor();
+document.body.appendChild(editor.getElement());
+
+// Function to switch language
+function switchLanguage(newLang) {
+  // Save current content before switching
+  contentStorage[currentLanguage] = editor.getHTML();
+
+  // Update current language
+  currentLanguage = newLang;
+
+  // Load content for new language
+  editor.setHTML(contentStorage[newLang] || "");
+}
+
+// Auto-save on input (optional)
+const editorDiv = editor.getElement().querySelector(".editor");
+editorDiv.addEventListener("input", () => {
+  contentStorage[currentLanguage] = editor.getHTML();
+});
+
+// Save to localStorage
+function saveAll() {
+  contentStorage[currentLanguage] = editor.getHTML();
+  localStorage.setItem("content-vi", contentStorage.vi);
+  localStorage.setItem("content-en", contentStorage.en);
+  localStorage.setItem("content-zh", contentStorage.zh);
+}
+
+// Load from localStorage
+function loadAll() {
+  contentStorage.vi = localStorage.getItem("content-vi") || "";
+  contentStorage.en = localStorage.getItem("content-en") || "";
+  contentStorage.zh = localStorage.getItem("content-zh") || "";
+  editor.setHTML(contentStorage[currentLanguage]);
+}
+```
+
+### React Example
+
+```jsx
+import React, { useState, useEffect, useRef } from "react";
+import { RichTextEditor } from "rich-text-editor";
+
+const MultilingualEditor = () => {
+  const [currentLang, setCurrentLang] = useState("vi");
+  const [content, setContent] = useState({
+    vi: "<p>Nội dung tiếng Việt...</p>",
+    en: "<p>English content...</p>",
+    zh: "<p>中文内容...</p>",
+  });
+
+  const editorRef = useRef(null);
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (!editorRef.current) {
+      editorRef.current = new RichTextEditor();
+      containerRef.current.appendChild(editorRef.current.getElement());
+      editorRef.current.setHTML(content[currentLang]);
+    }
+  }, []);
+
+  const switchLanguage = (newLang) => {
+    // Save current content
+    const currentContent = editorRef.current.getHTML();
+    setContent((prev) => ({ ...prev, [currentLang]: currentContent }));
+
+    // Switch language
+    setCurrentLang(newLang);
+
+    // Load new content
+    setTimeout(() => {
+      editorRef.current.setHTML(content[newLang] || "");
+    }, 0);
+  };
+
+  return (
+    <div>
+      <div>
+        <button onClick={() => switchLanguage("vi")}>🇻🇳 Tiếng Việt</button>
+        <button onClick={() => switchLanguage("en")}>🇬🇧 English</button>
+        <button onClick={() => switchLanguage("zh")}>🇨🇳 中文</button>
+      </div>
+      <div ref={containerRef} />
+    </div>
+  );
+};
+```
+
+### Important Notes for Multilingual Content
+
+1. **Always save before switching**: Call `editor.getHTML()` to save the current content before switching languages
+2. **Images and Videos**: All media (images, videos) are preserved in the HTML content
+3. **Storage Options**:
+   - **Memory**: Store in JavaScript object (lost on page refresh)
+   - **localStorage**: Persist data in browser (survives page refresh)
+   - **Backend**: Send to server for permanent storage
+4. **Auto-save**: Use input event listener for automatic saving
+5. **State Management**: In React, use `useState` or state management libraries (Redux, Zustand, etc.)
+
+For complete examples, see:
+
+- `/examples/multilingual-editor.html` - Vanilla JavaScript example with full UI
+- `/examples/react-multilingual-example.tsx` - React component with custom hook
+
+## API Reference
+
+### RichTextEditor Class
+
+#### Constructor
+
+```typescript
+new RichTextEditor();
+```
+
+Creates a new rich text editor instance.
+
+#### Methods
+
+##### `getElement(): HTMLElement`
+
+Returns the container element of the editor.
+
+```javascript
+const editor = new RichTextEditor();
+const element = editor.getElement();
+document.body.appendChild(element);
+```
+
+##### `getHTML(): string`
+
+Returns the current HTML content of the editor.
+
+```javascript
+const htmlContent = editor.getHTML();
+console.log(htmlContent);
+```
+
+##### `setHTML(html: string): void`
+
+Sets the HTML content of the editor.
+
+```javascript
+editor.setHTML("<h1>Hello World</h1><p>This is a paragraph.</p>");
+```
+
+### RichTextEditorComponent (React)
+
+#### Props
+
+| Prop           | Type                     | Default     | Description                         |
+| -------------- | ------------------------ | ----------- | ----------------------------------- |
+| `initialValue` | `string`                 | `''`        | Initial HTML content                |
+| `onChange`     | `(html: string) => void` | `undefined` | Callback fired when content changes |
+| `className`    | `string`                 | `undefined` | CSS class for the container         |
+| `style`        | `React.CSSProperties`    | `undefined` | Inline styles for the container     |
+
+#### Usage
+
+```jsx
+import { RichTextEditorComponent } from "rich-text-editor";
+
+function MyComponent() {
+  const [content, setContent] = useState("");
+
+  return (
+    <RichTextEditorComponent
+      initialValue="<p>Start typing...</p>"
+      onChange={(html) => setContent(html)}
+      className="my-editor"
+    />
+  );
+}
+```
 
 ## Development