tetrons 2.4.0 → 2.4.1

package/dist/components/Editor/TetronsEditor.d.ts

@@ -5,6 +5,10 @@ interface TetronsEditorProps {
     config?: TetronsConfig;
     onError?: (msg: string) => void;
     onSuccess?: (details: ValidationResponse) => void;
+    onChange?: (payload: {
+        html: string;
+        json: unknown;
+    }) => void;
 }
-export default function TetronsEditor({ apiKey, config, onError, onSuccess, }: TetronsEditorProps): import("react/jsx-runtime").JSX.Element | null;
+export default function TetronsEditor({ apiKey, config, onError, onSuccess, onChange, }: TetronsEditorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Editor/types/TetronsEditorProps.d.ts

@@ -86,6 +86,10 @@ export interface EditorRuntimeProps {
     showParagraphDropdown?: boolean;
     showFontDropdown?: boolean;
     showFontSizeDropdown?: boolean;
+    onChange?: (payload: {
+        html: string;
+        json: unknown;
+    }) => void;
 }
 interface BaseProps {
     apiKey: string;

package/dist/index.css

@@ -4886,3 +4886,69 @@ textarea#email-body {
   z-index: 9999999999 !important;
   position: relative;
 }
+.ProseMirror table {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  max-width: 100%;
+  margin: 0.75em 0;
+  background: #fff;
+}
+.ProseMirror th,
+.ProseMirror td {
+  border: 1px solid #d0d0d0;
+  padding: 6px 8px;
+  vertical-align: top;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+}
+.ProseMirror th {
+  background-color: #f5f5f5;
+  font-weight: 600;
+  text-align: left;
+}
+.ProseMirror .selectedCell {
+  background: rgba(200, 200, 255, 0.4);
+}
+.ProseMirror table p {
+  margin: 0;
+}
+.ProseMirror {
+  overflow-x: auto;
+}
+@media (max-width: 768px) {
+  .ProseMirror table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+  }
+  .ProseMirror th,
+  .ProseMirror td {
+    min-width: 120px;
+  }
+}
+@media (max-width: 480px) {
+  .ProseMirror th,
+  .ProseMirror td {
+    min-width: 100px;
+    padding: 6px;
+    font-size: 13px;
+  }
+}
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  right: -2px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+}
+.ProseMirror th:hover .column-resize-handle,
+.ProseMirror td:hover .column-resize-handle {
+  pointer-events: auto;
+}
+.ProseMirror table:focus-within {
+  outline: 2px solid rgba(100, 150, 255, 0.35);
+  outline-offset: 2px;
+}

package/dist/index.mjs

@@ -10940,85 +10940,6 @@ function InsertGroup({
   };
   const handleTableInsert = (rows, cols) => {
     editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
-    setTimeout(() => {
-      var _a, _b;
-      const table = editor.view.dom.querySelector("table");
-      if (table && !((_a = table.parentElement) == null ? void 0 : _a.classList.contains("resizable-table-wrapper"))) {
-        const wrapper = document.createElement("div");
-        wrapper.className = "resizable-table-wrapper";
-        wrapper.style.position = "relative";
-        wrapper.style.display = "inline-block";
-        wrapper.style.width = "600px";
-        wrapper.style.maxWidth = "100%";
-        (_b = table.parentNode) == null ? void 0 : _b.insertBefore(wrapper, table);
-        wrapper.appendChild(table);
-        const resizeHandle = document.createElement("div");
-        resizeHandle.className = "resize-handle";
-        resizeHandle.style.position = "absolute";
-        resizeHandle.style.right = "0";
-        resizeHandle.style.bottom = "0";
-        resizeHandle.style.width = "12px";
-        resizeHandle.style.height = "12px";
-        resizeHandle.style.cursor = "se-resize";
-        resizeHandle.style.background = "transparent";
-        wrapper.appendChild(resizeHandle);
-        const dragHandle = document.createElement("div");
-        dragHandle.className = "drag-handle";
-        dragHandle.style.position = "absolute";
-        dragHandle.style.left = "0";
-        dragHandle.style.top = "0";
-        dragHandle.style.width = "16px";
-        dragHandle.style.height = "16px";
-        dragHandle.style.cursor = "move";
-        dragHandle.style.background = "transparent";
-        dragHandle.style.display = "flex";
-        dragHandle.style.justifyContent = "center";
-        dragHandle.style.alignItems = "center";
-        dragHandle.innerHTML = "\u2630";
-        dragHandle.style.color = "#fff";
-        dragHandle.style.fontSize = "12px";
-        wrapper.appendChild(dragHandle);
-        let startWidth = 0;
-        let startHeight = 0;
-        let startX = 0;
-        let startY = 0;
-        resizeHandle.addEventListener("mousedown", (e) => {
-          e.preventDefault();
-          startX = e.clientX;
-          startY = e.clientY;
-          startWidth = wrapper.offsetWidth;
-          startHeight = wrapper.offsetHeight;
-          const onMouseMove = (e2) => {
-            const dx = e2.clientX - startX;
-            const dy = e2.clientY - startY;
-            wrapper.style.width = Math.max(100, startWidth + dx) + "px";
-            wrapper.style.height = Math.max(50, startHeight + dy) + "px";
-          };
-          const onMouseUp = () => {
-            document.removeEventListener("mousemove", onMouseMove);
-            document.removeEventListener("mouseup", onMouseUp);
-          };
-          document.addEventListener("mousemove", onMouseMove);
-          document.addEventListener("mouseup", onMouseUp);
-        });
-        dragHandle.addEventListener("mousedown", (e) => {
-          e.preventDefault();
-          startX = e.clientX;
-          startY = e.clientY;
-          const onMouseMove = (e2) => {
-            const dx = e2.clientX - startX;
-            const dy = e2.clientY - startY;
-            wrapper.style.transform = `translate(${dx}px, ${dy}px)`;
-          };
-          const onMouseUp = () => {
-            document.removeEventListener("mousemove", onMouseMove);
-            document.removeEventListener("mouseup", onMouseUp);
-          };
-          document.addEventListener("mousemove", onMouseMove);
-          document.addEventListener("mouseup", onMouseUp);
-        });
-      }
-    }, 0);
     setShowTableGrid(false);
     setSelectedRows(1);
     setSelectedCols(1);
@@ -12142,6 +12063,7 @@ var SpellCheck = Extension.create({
     let spell = null;
     let activePopup = null;
     let lastHoveredWord = null;
+    const key = new PluginKey("spellcheck");
     function closePopup() {
       if (activePopup) {
         activePopup.remove();
@@ -12150,25 +12072,22 @@ var SpellCheck = Extension.create({
     }
     return [
       new Plugin({
-        key: new PluginKey("spellcheck"),
-        view: (editorView) => {
-          fetch("https://tetrons.com/api/dictionary").then((r) => r.json()).then((dict) => spell = nspell(dict)).catch(
-            (e) => console.error("Spellcheck dictionary load failed:", e)
-          );
-          const handleMouseMove2 = (event) => {
-            if (!spell) return;
-            if (activePopup) {
-              const rect = activePopup.getBoundingClientRect();
-              if (event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom) {
-                return;
-              }
+        key,
+        view(view) {
+          let destroyed = false;
+          fetch("https://tetrons.com/api/dictionary").then((r) => r.json()).then((dict) => {
+            if (!destroyed) {
+              spell = nspell(dict);
             }
-            const pos = editorView.posAtCoords({
-              left: event.clientX,
-              top: event.clientY
+          }).catch(console.error);
+          const onMouseMove = (e) => {
+            if (!spell) return;
+            const coords = view.posAtCoords({
+              left: e.clientX,
+              top: e.clientY
             });
-            if (!pos) return;
-            const word = getWordAtPosition(editorView, pos.pos);
+            if (!coords) return;
+            const word = getWordAtPosition(view, coords.pos);
             if (!word) return;
             if (!spell.correct(word.text)) {
               if (lastHoveredWord && lastHoveredWord.start === word.start && lastHoveredWord.end === word.end) {
@@ -12176,57 +12095,54 @@ var SpellCheck = Extension.create({
               }
               lastHoveredWord = word;
               closePopup();
-              const suggestions = spell.suggest(word.text);
               activePopup = showSuggestionsPopup(
-                editorView,
-                pos.pos,
+                view,
+                coords.pos,
                 word,
-                suggestions,
+                spell.suggest(word.text),
                 closePopup
               );
-            }
-          };
-          const handleOutsideClick = (event) => {
-            if (activePopup && !activePopup.contains(event.target)) {
+            } else {
               closePopup();
             }
           };
-          document.addEventListener("mousemove", handleMouseMove2);
-          document.addEventListener("mousedown", handleOutsideClick);
+          document.addEventListener("mousemove", onMouseMove);
+          document.addEventListener("mousedown", closePopup);
           return {
             destroy() {
-              document.removeEventListener("mousemove", handleMouseMove2);
-              document.removeEventListener("mousedown", handleOutsideClick);
+              destroyed = true;
+              closePopup();
+              document.removeEventListener("mousemove", onMouseMove);
+              document.removeEventListener("mousedown", closePopup);
             }
           };
         },
-        state: {
-          init() {
-            return DecorationSet.empty;
-          },
-          apply(tr, old) {
-            if (!spell) return old;
-            const text = tr.doc.textBetween(0, tr.doc.content.size, " ");
-            const words = text.split(/\s+/);
-            const decorations = [];
-            let pos = 0;
-            for (const word of words) {
-              const clean = word.replace(/[.,!?;:()"\']/g, "");
-              if (clean.length > 0 && !spell.correct(clean)) {
-                decorations.push(
-                  Decoration.inline(pos, pos + word.length, {
-                    class: "spell-wrong"
-                  })
-                );
-              }
-              pos += word.length + 1;
-            }
-            return DecorationSet.create(tr.doc, decorations);
-          }
-        },
         props: {
           decorations(state) {
-            return this.getState(state);
+            const sp = spell;
+            if (!sp) return DecorationSet.empty;
+            const decorations = [];
+            state.doc.descendants((node, pos) => {
+              if (!node.isText || !node.text) return;
+              const text = node.text;
+              const wordRegex = /\b[^\s.,!?;:()"'`]+\b/g;
+              let match;
+              while (match = wordRegex.exec(text)) {
+                const word = match[0];
+                const from = pos + match.index;
+                const to = from + word.length;
+                if (from < 0) continue;
+                if (to > state.doc.content.size) continue;
+                if (!sp.correct(word)) {
+                  decorations.push(
+                    Decoration.inline(from, to, {
+                      class: "spell-wrong"
+                    })
+                  );
+                }
+              }
+            });
+            return DecorationSet.create(state.doc, decorations);
           }
         }
       })
@@ -12235,41 +12151,39 @@ var SpellCheck = Extension.create({
 });
 function getWordAtPosition(view, pos) {
   const $pos = view.state.doc.resolve(pos);
-  const parent = $pos.parent;
-  const offset = $pos.parentOffset;
-  const text = parent.textContent;
-  let start = offset;
-  let end = offset;
-  while (start > 0 && !/\s/.test(text[start - 1])) {
-    start--;
-  }
-  while (end < text.length && !/\s/.test(text[end])) {
-    end++;
-  }
+  if (!$pos.parent.isTextblock) return null;
+  const text = $pos.parent.textContent;
+  let start = $pos.parentOffset;
+  let end = start;
+  while (start > 0 && !/\s/.test(text[start - 1])) start--;
+  while (end < text.length && !/\s/.test(text[end])) end++;
   const word = text.slice(start, end);
   if (!word.trim()) return null;
-  const absStart = $pos.start() + start;
-  const absEnd = $pos.start() + end;
-  return { text: word, start: absStart, end: absEnd };
+  return {
+    text: word,
+    start: $pos.start() + start,
+    end: $pos.start() + end
+  };
 }
-function showSuggestionsPopup(view, pos, word, suggestions, closePopup) {
-  const dom = document.createElement("div");
-  dom.className = "spell-suggestions-popup";
+function showSuggestionsPopup(view, pos, word, suggestions, close2) {
+  const el = document.createElement("div");
+  el.className = "spell-suggestions-popup";
+  el.style.position = "absolute";
   suggestions.forEach((s) => {
     const item = document.createElement("div");
     item.className = "suggestion-item";
     item.textContent = s;
     item.onclick = () => {
       view.dispatch(view.state.tr.insertText(s, word.start, word.end));
-      closePopup();
+      close2();
     };
-    dom.appendChild(item);
+    el.appendChild(item);
   });
-  document.body.appendChild(dom);
+  document.body.appendChild(el);
   const coords = view.coordsAtPos(pos);
-  dom.style.left = coords.left + "px";
-  dom.style.top = coords.bottom + "px";
-  return dom;
+  el.style.left = `${coords.left}px`;
+  el.style.top = `${coords.bottom}px`;
+  return el;
 }
 function AIModal({
   open,
@@ -16588,9 +16502,8 @@ function Editor2(props) {
   }, [versions]);
   useEffect(() => {
     if (!editor) return;
-    const current = editor.getHTML();
-    editor.commands.setContent(current);
-  }, [editor, spellCheckEnabled]);
+    editor.view.dispatch(editor.state.tr);
+  }, [spellCheckEnabled]);
   const showThirdRow = props.showParagraphDropdown || props.showFontDropdown || props.showFontSizeDropdown;
   const handleAISubmit = async (prompt) => {
     try {
@@ -16820,16 +16733,6 @@ function Editor2(props) {
     if (!editor || !editorRight) return;
     editorRight.commands.setContent(editor.getJSON());
   }, [editor, editorRight]);
-  useEffect(() => {
-    if (!editor || !editorRight) return;
-    const handler = () => {
-      editorRight.commands.setContent(editor.getJSON());
-    };
-    editor.on("update", handler);
-    return () => {
-      editor.off("update", handler);
-    };
-  }, [editor, editorRight]);
   function dispatchTetronsEvent2(name, detail) {
     if (typeof window !== "undefined") {
       window.dispatchEvent(new CustomEvent(name, { detail }));
@@ -16979,6 +16882,20 @@ function Editor2(props) {
       onHelpOpen
     );
   }, []);
+  useEffect(() => {
+    if (!editor || !props.onChange) return;
+    const handler = () => {
+      var _a2;
+      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, {
+        html: editor.getHTML(),
+        json: editor.getJSON()
+      });
+    };
+    editor.on("update", handler);
+    return () => {
+      editor.off("update", handler);
+    };
+  }, [editor, props.onChange]);
   if (!editor) return null;
   return /* @__PURE__ */ jsxs("div", { className: "tetrons-editor__container", children: [
     props.topMenu && /* @__PURE__ */ jsx(
@@ -17322,7 +17239,8 @@ function TetronsEditor({
   apiKey,
   config,
   onError,
-  onSuccess
+  onSuccess,
+  onChange
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const [loading, setLoading] = useState(true);
@@ -17410,7 +17328,8 @@ function TetronsEditor({
       topMenu: (_d = (_c = config == null ? void 0 : config.ui) == null ? void 0 : _c.topMenu) != null ? _d : true,
       showParagraphDropdown: (_f = (_e = config == null ? void 0 : config.ui) == null ? void 0 : _e.paragraphDropdown) != null ? _f : true,
       showFontDropdown: (_h = (_g = config == null ? void 0 : config.ui) == null ? void 0 : _g.fontDropdown) != null ? _h : true,
-      showFontSizeDropdown: (_j = (_i = config == null ? void 0 : config.ui) == null ? void 0 : _i.fontSizeDropdown) != null ? _j : true
+      showFontSizeDropdown: (_j = (_i = config == null ? void 0 : config.ui) == null ? void 0 : _i.fontSizeDropdown) != null ? _j : true,
+      onChange
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tetrons",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Tetrons is a fully-featured, modern WYSIWYG rich text editor built on TipTap.",
   "license": "MIT",
   "main": "dist/index.mjs",
@@ -68,7 +68,7 @@
     "nspell": "^2.1.5",
     "re-resizable": "^6.11.2",
     "react-icons": "^5.5.0",
-    "tesseract.js": "^6.0.1"
+    "tesseract.js": "^7.0.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -93,7 +93,7 @@
   "optionalDependencies": {
     "mongoose": "^9.0.1",
     "nodemailer": "^7.0.11",
-    "openai": "^6.10.0"
+    "openai": "^6.13.0"
   },
   "exports": {
     ".": {