@block-kit/react 1.0.22 → 1.0.23

package/dist/es/hooks/use-limit.d.ts

@@ -0,0 +1,4 @@
+import type { Func } from "@block-kit/utils";
+import { debounce, throttle } from "@block-kit/utils";
+export declare const useDebounceMemoFn: <T extends Func.Any>(fn: T, options: Func.Parameters<typeof debounce>[1]) => import("@block-kit/utils").DebouncedFn<T>;
+export declare const useThrottleMemoFn: <T extends Func.Any>(fn: T, options: Func.Parameters<typeof throttle>[1]) => import("@block-kit/utils").ThrottledFn<T>;

package/dist/es/hooks/use-limit.js

@@ -0,0 +1,17 @@
+import { debounce, throttle } from "@block-kit/utils";
+import { useMemoFn } from "@block-kit/utils/dist/es/hooks";
+import { useMemo } from "react";
+export const useDebounceMemoFn = (fn, options) => {
+    const memorized = useMemoFn(fn);
+    const debouncedFn = useMemo(() => {
+        return debounce(memorized, options);
+    }, [memorized]);
+    return debouncedFn;
+};
+export const useThrottleMemoFn = (fn, options) => {
+    const memorized = useMemoFn(fn);
+    const throttledFn = useMemo(() => {
+        return throttle(memorized, options);
+    }, [memorized]);
+    return throttledFn;
+};

package/dist/es/index.d.ts

@@ -1,5 +1,6 @@
 export { useComposing } from "./hooks/use-composing";
 export { BlockKitContext, useEditorStatic } from "./hooks/use-editor";
+export { useDebounceMemoFn, useThrottleMemoFn } from "./hooks/use-limit";
 export { ReadonlyContext, useReadonly } from "./hooks/use-readonly";
 export { BlockModel } from "./model/block";
 export { EOLModel } from "./model/eol";

package/dist/es/index.js

@@ -1,5 +1,6 @@
 export { useComposing } from "./hooks/use-composing";
 export { BlockKitContext, useEditorStatic } from "./hooks/use-editor";
+export { useDebounceMemoFn, useThrottleMemoFn } from "./hooks/use-limit";
 export { ReadonlyContext, useReadonly } from "./hooks/use-readonly";
 export { BlockModel } from "./model/block";
 export { EOLModel } from "./model/eol";

package/dist/es/model/block.js

@@ -14,13 +14,13 @@ const BlockView = props => {
     /**
      * 设置 Block DOM 节点
      */
-    const setModel = useMemoFn((ref) => {
+    const setModel = (ref) => {
         if (ref) {
             // ref 触发时机最早 ref -> layout effect -> effect
             editor.model.setBlockModel(ref, state);
             rewriteRemoveChild(ref);
         }
-    });
+    };
     /**
      * 数据同步变更, 异步批量绘制变更
      */
@@ -81,8 +81,8 @@ const BlockView = props => {
                 }
             }
         }
-        return lines.map((line, index) => {
-            const node = (_jsx(LineModel, { editor: editor, lineState: line, index: index }, line.key));
+        return lines.map(line => {
+            const node = _jsx(LineModel, { editor: editor, lineState: line }, line.key);
             JSX_TO_STATE.set(node, line);
             return node;
         });

package/dist/es/model/leaf.d.ts

@@ -3,6 +3,5 @@ import React from "react";
 /** Leaf Model */
 export declare const LeafModel: React.NamedExoticComponent<{
     editor: Editor;
-    index: number;
     leafState: LeafState;
 }>;

package/dist/es/model/leaf.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LEAF_KEY, PLUGIN_FUNC } from "@block-kit/core";
 import { SPACE } from "@block-kit/utils";
-import { useForceUpdate, useMemoFn } from "@block-kit/utils/dist/es/hooks";
+import { useForceUpdate } from "@block-kit/utils/dist/es/hooks";
 import React, { useMemo } from "react";
 import { Text } from "../preset/text";
 import { rewriteRemoveChild } from "../utils/dirty-dom";
@@ -12,13 +12,13 @@ const LeafView = props => {
     /**
      * 设置叶子 DOM 节点
      */
-    const setModel = useMemoFn((ref) => {
+    const setModel = (ref) => {
         if (ref) {
             rewriteRemoveChild(ref);
             editor.model.setLeafModel(ref, leafState);
         }
         LEAF_TO_REMOUNT.set(leafState, forceUpdate);
-    });
+    };
     /**
      * 处理叶子节点的渲染
      */

package/dist/es/model/line.d.ts

@@ -3,6 +3,5 @@ import React from "react";
 /** Line Model */
 export declare const LineModel: React.NamedExoticComponent<{
     editor: Editor;
-    index: number;
     lineState: LineState;
 }>;

package/dist/es/model/line.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { CALLER_TYPE, NODE_KEY, PLUGIN_FUNC } from "@block-kit/core";
 import { EOL, EOL_OP } from "@block-kit/delta";
 import { SPACE } from "@block-kit/utils";
-import { useMemoFn, useUpdateEffect, useUpdateLayoutEffect } from "@block-kit/utils/dist/es/hooks";
+import { useUpdateEffect, useUpdateLayoutEffect } from "@block-kit/utils/dist/es/hooks";
 import React, { useMemo } from "react";
 import { withWrapLeafNodes } from "../plugin/modules/wrap";
 import { rewriteRemoveChild, updateDirtyLeaf, updateDirtyText } from "../utils/dirty-dom";
@@ -14,12 +14,12 @@ const LineView = props => {
     /**
      * 设置行 DOM 节点
      */
-    const setModel = useMemoFn((ref) => {
+    const setModel = (ref) => {
         if (ref) {
             editor.model.setLineModel(ref, lineState);
             rewriteRemoveChild(ref);
         }
-    });
+    };
     /**
      * 编辑器行结构布局计算后同步调用
      * - 首次处理会将所有 DOM 渲染, 不需要执行脏数据检查
@@ -55,13 +55,15 @@ const LineView = props => {
             }
         }
         const leaves = lineState.getLeaves();
+        // 首先渲染所有非 EOL 的叶子节点
         const textLeaves = leaves.slice(0, -1);
-        const nodes = textLeaves.map((n, i) => {
-            const node = _jsx(LeafModel, { editor: editor, index: i, leafState: n }, n.key);
+        const nodes = textLeaves.map(n => {
+            const node = _jsx(LeafModel, { editor: editor, leafState: n }, n.key);
             JSX_TO_STATE.set(node, n);
             return node;
         });
-        // 空行则仅存在一个 Leaf, 此时需要渲染空的占位节点
+        // 存在内容时不渲染 EOL, 避免块级元素出现额外视觉上的换行
+        // 若是空行则仅存在一个 Leaf, 此时需要渲染空的占位节点
         if (!nodes.length && leaves[0]) {
             const leaf = leaves[0];
             const node = _jsx(EOLModel, { editor: editor, leafState: leaf }, EOL);

package/dist/es/preset/isolate.d.ts

@@ -3,6 +3,7 @@ import React from "react";
 export type IsolateProps = PropsWithChildren<{
     className?: string;
     style?: React.CSSProperties;
+    onRef?: (ref: HTMLSpanElement | null) => void;
 }>;
 /**
  * 独立节点嵌入 HOC

package/dist/es/preset/isolate.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { EDITOR_EVENT, ISOLATED_KEY } from "@block-kit/core";
 import { stopNativeEvent } from "@block-kit/utils";
+import { useMemoFn } from "@block-kit/utils/dist/es/hooks";
 import { useEffect, useState } from "react";
 /**
  * 独立节点嵌入 HOC
@@ -9,6 +10,10 @@ import { useEffect, useState } from "react";
  */
 export const Isolate = props => {
     const [ref, setRef] = useState(null);
+    const onRef = useMemoFn((dom) => {
+        setRef(dom);
+        props.onRef && props.onRef(dom);
+    });
     useEffect(() => {
         const el = ref;
         if (!el)
@@ -47,5 +52,5 @@ export const Isolate = props => {
             el.removeEventListener(COMPOSITION_END, stopNativeEvent);
         };
     }, [ref]);
-    return (_jsx("span", { ref: setRef, [ISOLATED_KEY]: true, className: props.className, style: props.style, contentEditable: false, children: props.children }));
+    return (_jsx("span", { ref: onRef, [ISOLATED_KEY]: true, className: props.className, style: props.style, contentEditable: false, children: props.children }));
 };

package/dist/es/preset/text.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LEAF_STRING } from "@block-kit/core";
-import { useMemoFn } from "@block-kit/utils/dist/es/hooks";
 /**
  * 文本节点
  * @param props
@@ -9,11 +8,13 @@ export const Text = props => {
     /**
      * 处理 ref 回调
      * - 节点执行时机为 ref -> layout effect -> effect
-     * - 需要保证引用不变, 否则会导致回调在 rerender 时被多次调用 null/span 状态
+     * - 若是不保持引用不变, 会导致回调在 rerender 时被多次调用 null/span 状态
      * - https://18.react.dev/reference/react-dom/components/common#ref-callback
+     * - 而若是保持引用不变, 会导致节点变化渲染时, 即使文本内容变化了, 也不会触发回调
+     * - 因为 LEAF 映射 TEXT 依赖于回调函数的执行, 就会导致叶子对象变化时, 不会重新映射
      */
-    const onRef = useMemoFn((dom) => {
+    const onRef = (dom) => {
         props.onRef && props.onRef(dom);
-    });
+    };
     return (_jsx("span", { ref: onRef, [LEAF_STRING]: true, children: props.children }));
 };

package/dist/lib/hooks/use-limit.d.ts

@@ -0,0 +1,4 @@
+import type { Func } from "@block-kit/utils";
+import { debounce, throttle } from "@block-kit/utils";
+export declare const useDebounceMemoFn: <T extends Func.Any>(fn: T, options: Func.Parameters<typeof debounce>[1]) => import("@block-kit/utils").DebouncedFn<T>;
+export declare const useThrottleMemoFn: <T extends Func.Any>(fn: T, options: Func.Parameters<typeof throttle>[1]) => import("@block-kit/utils").ThrottledFn<T>;

package/dist/lib/hooks/use-limit.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThrottleMemoFn = exports.useDebounceMemoFn = void 0;
+const utils_1 = require("@block-kit/utils");
+const hooks_1 = require("@block-kit/utils/dist/es/hooks");
+const react_1 = require("react");
+const useDebounceMemoFn = (fn, options) => {
+    const memorized = (0, hooks_1.useMemoFn)(fn);
+    const debouncedFn = (0, react_1.useMemo)(() => {
+        return (0, utils_1.debounce)(memorized, options);
+    }, [memorized]);
+    return debouncedFn;
+};
+exports.useDebounceMemoFn = useDebounceMemoFn;
+const useThrottleMemoFn = (fn, options) => {
+    const memorized = (0, hooks_1.useMemoFn)(fn);
+    const throttledFn = (0, react_1.useMemo)(() => {
+        return (0, utils_1.throttle)(memorized, options);
+    }, [memorized]);
+    return throttledFn;
+};
+exports.useThrottleMemoFn = useThrottleMemoFn;

package/dist/lib/index.d.ts

@@ -1,5 +1,6 @@
 export { useComposing } from "./hooks/use-composing";
 export { BlockKitContext, useEditorStatic } from "./hooks/use-editor";
+export { useDebounceMemoFn, useThrottleMemoFn } from "./hooks/use-limit";
 export { ReadonlyContext, useReadonly } from "./hooks/use-readonly";
 export { BlockModel } from "./model/block";
 export { EOLModel } from "./model/eol";

package/dist/lib/index.js

@@ -1,11 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LEAF_TO_ZERO_TEXT = exports.LEAF_TO_TEXT = exports.LEAF_TO_REMOUNT = exports.JSX_TO_STATE = exports.MountNode = exports.preventReactEvent = exports.preventNativeEvent = exports.rewriteRemoveChild = exports.NO_CURSOR = exports.ZeroSpace = exports.Void = exports.Text = exports.Isolate = exports.Embed = exports.Editable = exports.BlockKit = exports.InjectWrapKeys = exports.Priority = exports.EditorPlugin = exports.LineModel = exports.LeafModel = exports.EOLModel = exports.BlockModel = exports.useReadonly = exports.ReadonlyContext = exports.useEditorStatic = exports.BlockKitContext = exports.useComposing = void 0;
+exports.LEAF_TO_ZERO_TEXT = exports.LEAF_TO_TEXT = exports.LEAF_TO_REMOUNT = exports.JSX_TO_STATE = exports.MountNode = exports.preventReactEvent = exports.preventNativeEvent = exports.rewriteRemoveChild = exports.NO_CURSOR = exports.ZeroSpace = exports.Void = exports.Text = exports.Isolate = exports.Embed = exports.Editable = exports.BlockKit = exports.InjectWrapKeys = exports.Priority = exports.EditorPlugin = exports.LineModel = exports.LeafModel = exports.EOLModel = exports.BlockModel = exports.useReadonly = exports.ReadonlyContext = exports.useThrottleMemoFn = exports.useDebounceMemoFn = exports.useEditorStatic = exports.BlockKitContext = exports.useComposing = void 0;
 var use_composing_1 = require("./hooks/use-composing");
 Object.defineProperty(exports, "useComposing", { enumerable: true, get: function () { return use_composing_1.useComposing; } });
 var use_editor_1 = require("./hooks/use-editor");
 Object.defineProperty(exports, "BlockKitContext", { enumerable: true, get: function () { return use_editor_1.BlockKitContext; } });
 Object.defineProperty(exports, "useEditorStatic", { enumerable: true, get: function () { return use_editor_1.useEditorStatic; } });
+var use_limit_1 = require("./hooks/use-limit");
+Object.defineProperty(exports, "useDebounceMemoFn", { enumerable: true, get: function () { return use_limit_1.useDebounceMemoFn; } });
+Object.defineProperty(exports, "useThrottleMemoFn", { enumerable: true, get: function () { return use_limit_1.useThrottleMemoFn; } });
 var use_readonly_1 = require("./hooks/use-readonly");
 Object.defineProperty(exports, "ReadonlyContext", { enumerable: true, get: function () { return use_readonly_1.ReadonlyContext; } });
 Object.defineProperty(exports, "useReadonly", { enumerable: true, get: function () { return use_readonly_1.useReadonly; } });

package/dist/lib/model/block.js

@@ -40,13 +40,13 @@ const BlockView = props => {
     /**
      * 设置 Block DOM 节点
      */
-    const setModel = (0, hooks_1.useMemoFn)((ref) => {
+    const setModel = (ref) => {
         if (ref) {
             // ref 触发时机最早 ref -> layout effect -> effect
             editor.model.setBlockModel(ref, state);
             (0, dirty_dom_1.rewriteRemoveChild)(ref);
         }
-    });
+    };
     /**
      * 数据同步变更, 异步批量绘制变更
      */
@@ -107,8 +107,8 @@ const BlockView = props => {
                 }
             }
         }
-        return lines.map((line, index) => {
-            const node = ((0, jsx_runtime_1.jsx)(line_1.LineModel, { editor: editor, lineState: line, index: index }, line.key));
+        return lines.map(line => {
+            const node = (0, jsx_runtime_1.jsx)(line_1.LineModel, { editor: editor, lineState: line }, line.key);
             weak_map_1.JSX_TO_STATE.set(node, line);
             return node;
         });

package/dist/lib/model/leaf.d.ts

@@ -3,6 +3,5 @@ import React from "react";
 /** Leaf Model */
 export declare const LeafModel: React.NamedExoticComponent<{
     editor: Editor;
-    index: number;
     leafState: LeafState;
 }>;

package/dist/lib/model/leaf.js

@@ -38,13 +38,13 @@ const LeafView = props => {
     /**
      * 设置叶子 DOM 节点
      */
-    const setModel = (0, hooks_1.useMemoFn)((ref) => {
+    const setModel = (ref) => {
         if (ref) {
             (0, dirty_dom_1.rewriteRemoveChild)(ref);
             editor.model.setLeafModel(ref, leafState);
         }
         weak_map_1.LEAF_TO_REMOUNT.set(leafState, forceUpdate);
-    });
+    };
     /**
      * 处理叶子节点的渲染
      */

package/dist/lib/model/line.d.ts

@@ -3,6 +3,5 @@ import React from "react";
 /** Line Model */
 export declare const LineModel: React.NamedExoticComponent<{
     editor: Editor;
-    index: number;
     lineState: LineState;
 }>;

package/dist/lib/model/line.js

@@ -40,12 +40,12 @@ const LineView = props => {
     /**
      * 设置行 DOM 节点
      */
-    const setModel = (0, hooks_1.useMemoFn)((ref) => {
+    const setModel = (ref) => {
         if (ref) {
             editor.model.setLineModel(ref, lineState);
             (0, dirty_dom_1.rewriteRemoveChild)(ref);
         }
-    });
+    };
     /**
      * 编辑器行结构布局计算后同步调用
      * - 首次处理会将所有 DOM 渲染, 不需要执行脏数据检查
@@ -81,13 +81,15 @@ const LineView = props => {
             }
         }
         const leaves = lineState.getLeaves();
+        // 首先渲染所有非 EOL 的叶子节点
         const textLeaves = leaves.slice(0, -1);
-        const nodes = textLeaves.map((n, i) => {
-            const node = (0, jsx_runtime_1.jsx)(leaf_1.LeafModel, { editor: editor, index: i, leafState: n }, n.key);
+        const nodes = textLeaves.map(n => {
+            const node = (0, jsx_runtime_1.jsx)(leaf_1.LeafModel, { editor: editor, leafState: n }, n.key);
             weak_map_1.JSX_TO_STATE.set(node, n);
             return node;
         });
-        // 空行则仅存在一个 Leaf, 此时需要渲染空的占位节点
+        // 存在内容时不渲染 EOL, 避免块级元素出现额外视觉上的换行
+        // 若是空行则仅存在一个 Leaf, 此时需要渲染空的占位节点
         if (!nodes.length && leaves[0]) {
             const leaf = leaves[0];
             const node = (0, jsx_runtime_1.jsx)(eol_1.EOLModel, { editor: editor, leafState: leaf }, delta_1.EOL);

package/dist/lib/preset/isolate.d.ts

@@ -3,6 +3,7 @@ import React from "react";
 export type IsolateProps = PropsWithChildren<{
     className?: string;
     style?: React.CSSProperties;
+    onRef?: (ref: HTMLSpanElement | null) => void;
 }>;
 /**
  * 独立节点嵌入 HOC

package/dist/lib/preset/isolate.js

@@ -4,6 +4,7 @@ exports.Isolate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("@block-kit/core");
 const utils_1 = require("@block-kit/utils");
+const hooks_1 = require("@block-kit/utils/dist/es/hooks");
 const react_1 = require("react");
 /**
  * 独立节点嵌入 HOC
@@ -12,6 +13,10 @@ const react_1 = require("react");
  */
 const Isolate = props => {
     const [ref, setRef] = (0, react_1.useState)(null);
+    const onRef = (0, hooks_1.useMemoFn)((dom) => {
+        setRef(dom);
+        props.onRef && props.onRef(dom);
+    });
     (0, react_1.useEffect)(() => {
         const el = ref;
         if (!el)
@@ -50,6 +55,6 @@ const Isolate = props => {
             el.removeEventListener(COMPOSITION_END, utils_1.stopNativeEvent);
         };
     }, [ref]);
-    return ((0, jsx_runtime_1.jsx)("span", { ref: setRef, [core_1.ISOLATED_KEY]: true, className: props.className, style: props.style, contentEditable: false, children: props.children }));
+    return ((0, jsx_runtime_1.jsx)("span", { ref: onRef, [core_1.ISOLATED_KEY]: true, className: props.className, style: props.style, contentEditable: false, children: props.children }));
 };
 exports.Isolate = Isolate;

package/dist/lib/preset/text.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Text = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("@block-kit/core");
-const hooks_1 = require("@block-kit/utils/dist/es/hooks");
 /**
  * 文本节点
  * @param props
@@ -12,12 +11,14 @@ const Text = props => {
     /**
      * 处理 ref 回调
      * - 节点执行时机为 ref -> layout effect -> effect
-     * - 需要保证引用不变, 否则会导致回调在 rerender 时被多次调用 null/span 状态
+     * - 若是不保持引用不变, 会导致回调在 rerender 时被多次调用 null/span 状态
      * - https://18.react.dev/reference/react-dom/components/common#ref-callback
+     * - 而若是保持引用不变, 会导致节点变化渲染时, 即使文本内容变化了, 也不会触发回调
+     * - 因为 LEAF 映射 TEXT 依赖于回调函数的执行, 就会导致叶子对象变化时, 不会重新映射
      */
-    const onRef = (0, hooks_1.useMemoFn)((dom) => {
+    const onRef = (dom) => {
         props.onRef && props.onRef(dom);
-    });
+    };
     return ((0, jsx_runtime_1.jsx)("span", { ref: onRef, [core_1.LEAF_STRING]: true, children: props.children }));
 };
 exports.Text = Text;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@block-kit/react",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "description": "",
   "main": "./dist/lib/index.js",
   "types": "./dist/es/index.d.ts",
@@ -39,9 +39,9 @@
     "react-dom": ">=17"
   },
   "dependencies": {
-    "@block-kit/core": "1.0.22",
-    "@block-kit/delta": "1.0.22",
-    "@block-kit/utils": "1.0.22"
+    "@block-kit/core": "1.0.23",
+    "@block-kit/delta": "1.0.23",
+    "@block-kit/utils": "1.0.23"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",