@trafica/editor 1.0.54 → 1.0.55

package/dist/index.js

@@ -896,6 +896,21 @@ function renderDocument(doc, container) {
     container.appendChild(blockEl);
   }
 }
+function patchDocument(prevDoc, nextDoc, container) {
+  const prev = prevDoc.children;
+  const next = nextDoc.children;
+  if (prev.length !== next.length) {
+    renderDocument(nextDoc, container);
+    return;
+  }
+  const domChildren = container.children;
+  for (let i = 0; i < next.length; i++) {
+    if (next[i] !== prev[i]) {
+      const newEl = renderBlock(next[i], [i]);
+      container.replaceChild(newEl, domChildren[i]);
+    }
+  }
+}
 function renderBlock(node, path) {
   switch (node.type) {
     case "paragraph":
@@ -8009,6 +8024,9 @@ function EditorCore({
 }) {
   const containerRef = react.useRef(null);
   const isRenderingRef = react.useRef(false);
+  const prevDocRef = react.useRef(null);
+  const htmlDebounceRef = react.useRef(null);
+  const jsonDebounceRef = react.useRef(null);
   const skipRestoreSelectionRef = react.useRef(false);
   const scrollCaretIntoView = react.useCallback(() => {
     var _a, _b;
@@ -8104,7 +8122,13 @@ function EditorCore({
     const container = containerRef.current;
     if (!container) return;
     isRenderingRef.current = true;
-    renderDocument(state.doc, container);
+    const prevDoc = prevDocRef.current;
+    if (prevDoc) {
+      patchDocument(prevDoc, state.doc, container);
+    } else {
+      renderDocument(state.doc, container);
+    }
+    prevDocRef.current = state.doc;
     if (!container.contains(document.activeElement)) {
       container.focus({ preventScroll: true });
     }
@@ -8114,10 +8138,16 @@ function EditorCore({
     }
     isRenderingRef.current = false;
     if (onHTMLChange) {
-      onHTMLChange(htmlSerializer.serialize(state.doc));
+      if (htmlDebounceRef.current) clearTimeout(htmlDebounceRef.current);
+      htmlDebounceRef.current = setTimeout(() => {
+        onHTMLChange(htmlSerializer.serialize(engine.getState().doc));
+      }, 300);
     }
     if (onJSONChange) {
-      onJSONChange(jsonSerializer.serialize(state.doc));
+      if (jsonDebounceRef.current) clearTimeout(jsonDebounceRef.current);
+      jsonDebounceRef.current = setTimeout(() => {
+        onJSONChange(jsonSerializer.serialize(engine.getState().doc));
+      }, 300);
     }
   }, [state.doc]);
   react.useLayoutEffect(() => {
@@ -8192,7 +8222,7 @@ function EditorCore({
       const captured = captureSelection(container);
       if (!captured) return;
       const currentSelection = engine.getState().selection;
-      if (currentSelection && JSON.stringify(currentSelection.anchor) === JSON.stringify(captured.anchor) && JSON.stringify(currentSelection.focus) === JSON.stringify(captured.focus)) {
+      if (currentSelection && selectionEqual(currentSelection.anchor, captured.anchor) && selectionEqual(currentSelection.focus, captured.focus)) {
         return;
       }
       skipRestoreSelectionRef.current = true;
@@ -8899,6 +8929,14 @@ var BLOCK_TAGS = "p|h[1-6]|ul|ol|li|blockquote|pre|figure|table|thead|tbody|tr|t
 var _OPEN_ONLY_RE = new RegExp(`^<(${BLOCK_TAGS})(?:\\s[^>]*)?>$`, "i");
 var _CLOSE_ONLY_RE = new RegExp(`^<\\/(${BLOCK_TAGS})>$`, "i");
 var _HR_RE = /^<hr(\s[^>]*)?\/?>$/i;
+function selectionEqual(a, b) {
+  if (a.offset !== b.offset) return false;
+  if (a.path.length !== b.path.length) return false;
+  for (let i = 0; i < a.path.length; i++) {
+    if (a.path[i] !== b.path[i]) return false;
+  }
+  return true;
+}
 function leafTextNode(el, end) {
   let node = el;
   while (node.hasChildNodes()) {