@windoc/react 0.3.23 → 0.3.24

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/Editor.tsx
-import { useEffect as useEffect5, useRef as useRef19, useState as useState13 } from "react";
+import { startTransition, useEffect as useEffect5, useRef as useRef19, useState as useState13 } from "react";
 
 // src/EditorContext.tsx
 import { createContext, useContext, useEffect, useState } from "react";
@@ -2350,6 +2350,49 @@ function EditorFooter() {
 
 // src/Editor.tsx
 import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+var CONTENT_SYNC_TIMEOUT = 300;
+function scheduleDeferredTask(callback) {
+  const deferredWindow = window;
+  if (deferredWindow.requestIdleCallback) {
+    return deferredWindow.requestIdleCallback(
+      () => {
+        callback();
+      },
+      { timeout: CONTENT_SYNC_TIMEOUT }
+    );
+  }
+  return window.setTimeout(callback, 0);
+}
+function cancelDeferredTask(handle) {
+  if (handle === null) return;
+  const deferredWindow = window;
+  if (deferredWindow.cancelIdleCallback) {
+    deferredWindow.cancelIdleCallback(handle);
+    return;
+  }
+  window.clearTimeout(handle);
+}
+function isSameNumberArray(left, right) {
+  if (left === right) return true;
+  if (!left || !right || left.length !== right.length) return false;
+  for (let i = 0; i < left.length; i++) {
+    if (left[i] !== right[i]) return false;
+  }
+  return true;
+}
+function isSameStringArray(left, right) {
+  if (left === right) return true;
+  if (!left || !right || left.length !== right.length) return false;
+  for (let i = 0; i < left.length; i++) {
+    if (left[i] !== right[i]) return false;
+  }
+  return true;
+}
+function isSameRangeStyle(left, right) {
+  if (left === right) return true;
+  if (!left || !right) return false;
+  return left.type === right.type && left.font === right.font && left.size === right.size && left.bold === right.bold && left.italic === right.italic && left.underline === right.underline && left.strikeout === right.strikeout && left.color === right.color && left.highlight === right.highlight && left.rowFlex === right.rowFlex && left.rowMargin === right.rowMargin && left.undo === right.undo && left.redo === right.redo && left.painter === right.painter && left.level === right.level && left.listType === right.listType && isSameNumberArray(left.dashArray, right.dashArray) && isSameStringArray(left.groupIds, right.groupIds);
+}
 function Editor({
   defaultValue,
   options: userOptions,
@@ -2403,6 +2446,9 @@ function EditorInner({
   const editorRef = useRef19(null);
   const [rangeStyle, setRangeStyle] = useState13(null);
   const [isInTable, setIsInTable] = useState13(false);
+  const lastRangeStyleRef = useRef19(null);
+  const deferredContentSyncRef = useRef19(null);
+  const contentSyncVersionRef = useRef19(0);
   const {
     setPageNoList,
     setPageNo,
@@ -2432,11 +2478,10 @@ function EditorInner({
       } = await import("@windoc/core");
       if (cancelled) return;
       const data = defaultValue ?? { main: [] };
-      instance = new EditorClass(
-        containerRef.current,
-        data,
-        { maskMargin: [24, 0, 24, 0], ...userOptions }
-      );
+      instance = new EditorClass(containerRef.current, data, {
+        maskMargin: [24, 0, 24, 0],
+        ...userOptions
+      });
       editorRef.current = instance;
       const opts = instance.command.getOptions();
       setPageScale(Math.round(opts.scale * 100));
@@ -2444,40 +2489,67 @@ function EditorInner({
       setPaperWidth(opts.width);
       setPaperHeight(opts.height);
       instance.listener.rangeStyleChange = (payload) => {
-        setRangeStyle(payload);
+        if (!isSameRangeStyle(lastRangeStyleRef.current, payload)) {
+          lastRangeStyleRef.current = payload;
+          startTransition(() => {
+            setRangeStyle(payload);
+          });
+        }
         onRangeStyleChange?.(payload);
         const rangeContext = instance?.command.getRangeContext();
-        setIsInTable(rangeContext?.isTable === true);
-        if (rangeContext) {
-          setRowNo(rangeContext.startRowNo + 1);
-          setColNo(rangeContext.startColNo + 1);
-        }
+        startTransition(() => {
+          setIsInTable(rangeContext?.isTable === true);
+          if (rangeContext) {
+            setRowNo(rangeContext.startRowNo + 1);
+            setColNo(rangeContext.startColNo + 1);
+          }
+        });
       };
       instance.listener.visiblePageNoListChange = (payload) => {
-        setPageNoList(payload.map((i) => i + 1).join(", "));
+        startTransition(() => {
+          setPageNoList(payload.map((i) => i + 1).join(", "));
+        });
       };
       instance.listener.pageSizeChange = (payload) => {
-        setPageSize(payload);
+        startTransition(() => {
+          setPageSize(payload);
+        });
       };
       instance.listener.intersectionPageNoChange = (payload) => {
-        setPageNo(payload + 1);
+        startTransition(() => {
+          setPageNo(payload + 1);
+        });
       };
       instance.listener.pageScaleChange = (payload) => {
-        setPageScale(Math.floor(payload * 10 * 10));
+        startTransition(() => {
+          setPageScale(Math.floor(payload * 10 * 10));
+        });
       };
       instance.listener.optionsChange = (payload) => {
-        setPageScale(Math.round(payload.scale * 100));
-        setPaperDirection(payload.paperDirection);
-        setPaperWidth(payload.width);
-        setPaperHeight(payload.height);
+        startTransition(() => {
+          setPageScale(Math.round(payload.scale * 100));
+          setPaperDirection(payload.paperDirection);
+          setPaperWidth(payload.width);
+          setPaperHeight(payload.height);
+        });
       };
-      instance.listener.contentChange = async () => {
-        const count2 = await instance?.command.getWordCount();
-        setWordCount(count2 || 0);
-        if (onChange) {
-          const value = instance?.command.getValue();
-          if (value) onChange(value);
+      instance.listener.contentChange = () => {
+        const currentVersion = ++contentSyncVersionRef.current;
+        cancelDeferredTask(deferredContentSyncRef.current);
+        if (onChange && instance) {
+          onChange(instance.command.getValue());
         }
+        deferredContentSyncRef.current = scheduleDeferredTask(async () => {
+          if (cancelled || !instance) return;
+          const count2 = await instance.command.getWordCount();
+          if (cancelled || contentSyncVersionRef.current !== currentVersion) {
+            return;
+          }
+          startTransition(() => {
+            setWordCount(count2 || 0);
+          });
+          deferredContentSyncRef.current = null;
+        });
       };
       instance.register.shortcutList([
         {
@@ -2551,12 +2623,16 @@ function EditorInner({
       };
       window.addEventListener("click", closeDropdowns, { capture: true });
       const count = await instance.command.getWordCount();
-      setWordCount(count || 0);
+      startTransition(() => {
+        setWordCount(count || 0);
+      });
       onReady?.(instance);
     };
     initEditor();
     return () => {
       cancelled = true;
+      cancelDeferredTask(deferredContentSyncRef.current);
+      deferredContentSyncRef.current = null;
       instance?.destroy();
       editorRef.current = null;
       if (closeDropdowns) {
@@ -2575,23 +2651,31 @@ function EditorInner({
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
   };
-  return /* @__PURE__ */ jsxs25(EditorProvider, { editorRef, rangeStyle, isInTable, children: [
-    toolbar && !renderToolbar && /* @__PURE__ */ jsx42(EditorToolbar, {}),
-    renderToolbar,
-    children,
-    /* @__PURE__ */ jsx42(
-      "div",
-      {
-        className: className ?? "editor",
-        style: style ?? { flex: 1, minHeight: 0, overflow: "auto" },
-        ref: containerRef,
-        onDrop: handleDrop,
-        onDragOver: handleDragOver
-      }
-    ),
-    footer && !renderFooter && /* @__PURE__ */ jsx42(EditorFooter, {}),
-    renderFooter
-  ] });
+  return /* @__PURE__ */ jsxs25(
+    EditorProvider,
+    {
+      editorRef,
+      rangeStyle,
+      isInTable,
+      children: [
+        toolbar && !renderToolbar && /* @__PURE__ */ jsx42(EditorToolbar, {}),
+        renderToolbar,
+        children,
+        /* @__PURE__ */ jsx42(
+          "div",
+          {
+            className: className ?? "editor",
+            style: style ?? { flex: 1, minHeight: 0, overflow: "auto" },
+            ref: containerRef,
+            onDrop: handleDrop,
+            onDragOver: handleDragOver
+          }
+        ),
+        footer && !renderFooter && /* @__PURE__ */ jsx42(EditorFooter, {}),
+        renderFooter
+      ]
+    }
+  );
 }
 export {
   BoldTool,