npm - smartrte-react - Versions diffs - 0.2.4 → 0.2.6 - Mend

smartrte-react 0.2.4 → 0.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/components/ClassicEditor.js +202 -2
package/dist/components/MediaManager.js +8 -3
package/package.json +1 -1

package/dist/components/ClassicEditor.js CHANGED Viewed

@@ -52,6 +52,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const [showSpecialChars, setShowSpecialChars] = useState(false);
     const [colorPickerType, setColorPickerType] = useState('text');
     const savedRangeRef = useRef(null);
+    const historyRef = useRef({
+        undo: [],
+        redo: [],
+    });
     const [currentFontSize, setCurrentFontSize] = useState("");
     const [currentFont, setCurrentFont] = useState("");
     const [activeState, setActiveState] = useState({
@@ -139,6 +143,10 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     }, []);
     const exec = (command, valueArg) => {
         try {
+            if (command === "undo" && restoreEditorHistory("undo"))
+                return;
+            if (command === "redo" && restoreEditorHistory("redo"))
+                return;
             if (!restoreSavedSelection()) {
                 safeSelectRange(getSelectionRangeInEditor());
             }
@@ -176,6 +184,63 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             onChange(html);
         }
     };
+    const pushEditorHistory = () => {
+        const editor = editableRef.current;
+        if (!editor)
+            return;
+        const selectionCells = selectionRef.current
+            ? getCellsInGridRect(selectionRef.current.tbody, selectionRef.current.sr, selectionRef.current.sc, selectionRef.current.er, selectionRef.current.ec)
+            : [];
+        const decor = selectionCells.map((cell) => ({
+            cell,
+            background: cell.style.background,
+            outline: cell.style.outline,
+            outlineOffset: cell.style.outlineOffset,
+            previousBackground: cell.__rtePrevBg,
+        }));
+        decor.forEach(({ cell, previousBackground }) => {
+            if (previousBackground != null)
+                cell.style.background = previousBackground || "";
+            cell.style.outline = "";
+            cell.style.outlineOffset = "";
+        });
+        const html = editor.innerHTML;
+        decor.forEach(({ cell, background, outline, outlineOffset }) => {
+            cell.style.background = background;
+            cell.style.outline = outline;
+            cell.style.outlineOffset = outlineOffset;
+        });
+        const undo = historyRef.current.undo;
+        if (undo[undo.length - 1] !== html) {
+            undo.push(html);
+            if (undo.length > 100)
+                undo.shift();
+        }
+        historyRef.current.redo = [];
+    };
+    const restoreEditorHistory = (dir) => {
+        const editor = editableRef.current;
+        if (!editor)
+            return false;
+        const history = historyRef.current;
+        const from = dir === "undo" ? history.undo : history.redo;
+        const to = dir === "undo" ? history.redo : history.undo;
+        const html = from.pop();
+        if (html == null)
+            return false;
+        to.push(editor.innerHTML);
+        editor.innerHTML = html;
+        fixNegativeMargins(editor);
+        ensureTableWrappers(editor);
+        addTableResizeHandles();
+        clearSelectionDecor();
+        setTableMenu(null);
+        if (html !== lastEmittedRef.current) {
+            lastEmittedRef.current = html;
+            onChange?.(html);
+        }
+        return true;
+    };
     const restoreSavedSelection = () => {
         const editor = editableRef.current;
         if (!editor)
@@ -1788,9 +1853,123 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         link.remove();
         URL.revokeObjectURL(url);
     };
+    const buildStandaloneHtmlDocument = (html) => `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Smart RTE Export</title>
+  <style>
+    :root {
+      --srte-bg: #ffffff;
+      --srte-text: #111111;
+      --srte-text-muted: #4b5563;
+      --srte-border: #d1d5db;
+      --srte-border-light: #e5e7eb;
+      --srte-accent: #1e90ff;
+      --srte-accent-bg: rgba(30, 144, 255, 0.15);
+      --srte-surface-subtle: #f3f4f6;
+    }
+    html, body {
+      margin: 0;
+      background: var(--srte-bg);
+      color: var(--srte-text);
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      line-height: 1.6;
+    }
+    body {
+      padding: 32px;
+    }
+    .srte-export {
+      max-width: 960px;
+      margin: 0 auto;
+    }
+    .srte-export h1,
+    .srte-export h2,
+    .srte-export h3,
+    .srte-export h4,
+    .srte-export h5,
+    .srte-export h6 {
+      line-height: 1.3;
+      margin: 1.25em 0 0.5em;
+      font-weight: 700;
+      color: var(--srte-text);
+    }
+    .srte-export p {
+      margin: 0 0 0.85em;
+    }
+    .srte-export blockquote {
+      border-left: 4px solid var(--srte-accent);
+      margin: 0.75em 0;
+      padding: 0.5em 1em;
+      background: var(--srte-surface-subtle);
+      color: var(--srte-text);
+    }
+    .srte-export ul,
+    .srte-export ol {
+      margin: 0.75em 0;
+      padding-left: 1.75em;
+      list-style-position: outside;
+    }
+    .srte-export ul {
+      list-style-type: disc;
+    }
+    .srte-export ol {
+      list-style-type: decimal;
+    }
+    .srte-export li {
+      display: list-item;
+      margin: 0.25em 0;
+      padding-left: 0.25em;
+    }
+    .srte-export table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 12px 0;
+    }
+    .srte-export td,
+    .srte-export th {
+      border: 1px solid var(--srte-border);
+      padding: 8px;
+      vertical-align: top;
+      text-align: left;
+    }
+    .srte-export th {
+      background: var(--srte-surface-subtle);
+      font-weight: 700;
+    }
+    .srte-export img {
+      max-width: 100%;
+      height: auto;
+    }
+    .srte-export pre,
+    .srte-export code {
+      background: var(--srte-surface-subtle);
+      color: var(--srte-text);
+      border-radius: 4px;
+    }
+    .srte-export pre {
+      padding: 12px;
+      overflow-x: auto;
+      white-space: pre-wrap;
+    }
+    @media print {
+      body {
+        padding: 0;
+      }
+      .srte-export {
+        max-width: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main class="srte-export">${html || "<p></p>"}</main>
+</body>
+</html>`;
     const exportHtml = () => {
         const html = editableRef.current?.innerHTML || "";
-        downloadText("smart-rte-export.html", html, "text/html");
+        downloadText("smart-rte-export.html", buildStandaloneHtmlDocument(html), "text/html;charset=utf-8");
     };
     const exportMarkdown = () => {
         const html = editableRef.current?.innerHTML || "";
@@ -2339,6 +2518,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const anchor = grid[sr]?.[sc];
         if (!anchor)
             return;
+        pushEditorHistory();
         // Collect content and remove other cells
         const contents = [];
         const cellsToMerge = getCellsInGridRect(tbody, sr, sc, er, ec);
@@ -2528,11 +2708,14 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
     const applyBgToSelection = (hex, fallbackCell) => {
         const sel = shouldUseTableSelection(fallbackCell) ? selectionRef.current : null;
         if (sel) {
-            getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec).forEach((cell) => {
+            const cells = getCellsInGridRect(sel.tbody, sel.sr, sel.sc, sel.er, sel.ec);
+            clearSelectionDecor();
+            cells.forEach((cell) => {
                 cell.style.background = hex;
             });
         }
         else if (fallbackCell) {
+            clearSelectionDecor();
             fallbackCell.style.background = hex;
         }
     };
@@ -2551,6 +2734,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         }
     };
     const runTableCellAction = (cell, action) => {
+        pushEditorHistory();
         action(cell);
         handleInput();
         setTableMenu(null);
@@ -2574,6 +2758,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
         const cells = getColumnCells(table, colIndex);
         if (cells.length === 0)
             return;
+        pushEditorHistory();
         const firstCell = cells[0];
         const currentWidth = firstCell.offsetWidth;
         // Unlock table width so it can grow
@@ -2600,6 +2785,7 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
             return;
         const cells = cellsOfRow(row);
         const currentHeight = row.offsetHeight;
+        pushEditorHistory();
         tableResizeRef.current = {
             type: 'row',
             table,
@@ -3503,6 +3689,20 @@ export function ClassicEditor({ value, onChange, placeholder = "Type here…", m
                             }
                             updateActiveState();
                         }, onKeyDown: (e) => {
+                            if ((e.metaKey || e.ctrlKey) && String(e.key).toLowerCase() === "z") {
+                                const restored = restoreEditorHistory(e.shiftKey ? "redo" : "undo");
+                                if (restored) {
+                                    e.preventDefault();
+                                    return;
+                                }
+                            }
+                            if ((e.metaKey || e.ctrlKey) && String(e.key).toLowerCase() === "y") {
+                                const restored = restoreEditorHistory("redo");
+                                if (restored) {
+                                    e.preventDefault();
+                                    return;
+                                }
+                            }
                             if (formula &&
                                 (e.metaKey || e.ctrlKey) &&
                                 String(e.key).toLowerCase() === "m") {

package/dist/components/MediaManager.js CHANGED Viewed

@@ -13,10 +13,15 @@ export function MediaManager(props) {
         if (!open)
             return;
         setError(null);
-        if (activeTab === "library") {
+    }, [open]);
+    useEffect(() => {
+        if (!open || activeTab !== "library")
+            return;
+        const timer = window.setTimeout(() => {
             performSearch();
-        }
-    }, [open, activeTab]);
+        }, 300);
+        return () => window.clearTimeout(timer);
+    }, [open, activeTab, query]);
     const performSearch = async () => {
         try {
             const items = await adapter.search({ q: query, mimePrefix: "image/" });

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "smartrte-react",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "A powerful, feature-rich Rich Text Editor for React with support for tables, mathematical formulas (LaTeX/KaTeX), and media management",
   "type": "module",
   "main": "dist/index.js",