@block-kit/react 1.0.21 → 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

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BLOCK_ID_KEY, BLOCK_KEY, EDITOR_EVENT, EDITOR_STATE } from "@block-kit/core";
 import { useMemoFn } from "@block-kit/utils/dist/es/hooks";
-import React, { useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { withWrapLineNodes } from "../plugin/modules/wrap";
 import { rewriteRemoveChild } from "../utils/dirty-dom";
 import { JSX_TO_STATE } from "../utils/weak-map";
-import { PaintEffectModel } from "./effect";
 import { LineModel } from "./line";
 import { Placeholder } from "./ph";
 const BlockView = props => {
@@ -15,14 +14,13 @@ const BlockView = props => {
     /**
      * 设置 Block DOM 节点
      */
-    const setModel = useMemoFn((ref) => {
+    const setModel = (ref) => {
         if (ref) {
             // ref 触发时机最早 ref -> layout effect -> effect
-            // 需要保证 editor 稳定, 重渲染并不会触发执行, 导致 DOM 映射关系失效
             editor.model.setBlockModel(ref, state);
             rewriteRemoveChild(ref);
         }
-    });
+    };
     /**
      * 数据同步变更, 异步批量绘制变更
      */
@@ -48,6 +46,29 @@ const BlockView = props => {
             editor.event.off(EDITOR_EVENT.CONTENT_CHANGE, onContentChange);
         };
     }, [editor.event, onContentChange]);
+    /**
+     * 视图更新需要重新设置选区, 依赖于行状态变更
+     */
+    useLayoutEffect(() => {
+        const selection = editor.selection.get();
+        // 同步计算完成后更新浏览器选区, 等待 Paint
+        if (editor.state.isFocused() && selection) {
+            editor.logger.debug("UpdateDOMSelection");
+            editor.selection.updateDOMSelection(true);
+        }
+    }, [editor, lines]);
+    /**
+     * 视图更新需要触发视图绘制完成事件, 依赖于行状态变更
+     */
+    useEffect(() => {
+        // state  -> parent -> node -> child ->|
+        // effect <- parent <- node <- child <-|
+        editor.logger.debug("OnPaint");
+        editor.state.set(EDITOR_STATE.PAINTING, false);
+        Promise.resolve().then(() => {
+            editor.event.trigger(EDITOR_EVENT.PAINT, {});
+        });
+    }, [editor, lines]);
     /**
      * 处理行节点
      */
@@ -60,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;
         });
@@ -72,7 +93,7 @@ const BlockView = props => {
     const children = useMemo(() => {
         return withWrapLineNodes(editor, elements);
     }, [editor, elements]);
-    return (_jsxs("div", { [BLOCK_KEY]: true, [BLOCK_ID_KEY]: state.key, ref: setModel, children: [_jsx(PaintEffectModel, { editor: editor, lines: lines }), _jsx(Placeholder, { editor: editor, lines: lines, placeholder: props.placeholder }), children] }));
+    return (_jsxs("div", { [BLOCK_KEY]: true, [BLOCK_ID_KEY]: state.key, ref: setModel, children: [_jsx(Placeholder, { editor: editor, lines: lines, placeholder: props.placeholder }), children] }));
 };
 /** Block Model */
 export const BlockModel = React.memo(BlockView);

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/editable.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { EDITOR_KEY, Point, Range } from "@block-kit/core";
 import { cs } from "@block-kit/utils";
+import { useUpdateEffect } from "@block-kit/utils/dist/es/hooks";
 import { useEffect, useLayoutEffect, useRef } from "react";
 import { useEditorStatic } from "../hooks/use-editor";
 import { useReadonly } from "../hooks/use-readonly";
@@ -22,6 +23,10 @@ export const Editable = props => {
             !preventDestroy && editor.destroy();
         };
     }, [editor, preventDestroy]);
+    useUpdateEffect(() => {
+        // 需要保证 editor 实例稳定, 重渲染并不会触发 ref 执行, 导致 DOM 映射关系失效
+        editor.logger.warning("Confirm the uniqueness of the editor instance.", editor);
+    }, [editor]);
     useEffect(() => {
         // COMPAT: 这里有个奇怪的表现
         // 当自动聚焦时, 必须要先更新浏览器选区再聚焦

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

@@ -31,7 +31,6 @@ const react_1 = __importStar(require("react"));
 const wrap_1 = require("../plugin/modules/wrap");
 const dirty_dom_1 = require("../utils/dirty-dom");
 const weak_map_1 = require("../utils/weak-map");
-const effect_1 = require("./effect");
 const line_1 = require("./line");
 const ph_1 = require("./ph");
 const BlockView = props => {
@@ -41,14 +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 稳定, 重渲染并不会触发执行, 导致 DOM 映射关系失效
             editor.model.setBlockModel(ref, state);
             (0, dirty_dom_1.rewriteRemoveChild)(ref);
         }
-    });
+    };
     /**
      * 数据同步变更, 异步批量绘制变更
      */
@@ -74,6 +72,29 @@ const BlockView = props => {
             editor.event.off(core_1.EDITOR_EVENT.CONTENT_CHANGE, onContentChange);
         };
     }, [editor.event, onContentChange]);
+    /**
+     * 视图更新需要重新设置选区, 依赖于行状态变更
+     */
+    (0, react_1.useLayoutEffect)(() => {
+        const selection = editor.selection.get();
+        // 同步计算完成后更新浏览器选区, 等待 Paint
+        if (editor.state.isFocused() && selection) {
+            editor.logger.debug("UpdateDOMSelection");
+            editor.selection.updateDOMSelection(true);
+        }
+    }, [editor, lines]);
+    /**
+     * 视图更新需要触发视图绘制完成事件, 依赖于行状态变更
+     */
+    (0, react_1.useEffect)(() => {
+        // state  -> parent -> node -> child ->|
+        // effect <- parent <- node <- child <-|
+        editor.logger.debug("OnPaint");
+        editor.state.set(core_1.EDITOR_STATE.PAINTING, false);
+        Promise.resolve().then(() => {
+            editor.event.trigger(core_1.EDITOR_EVENT.PAINT, {});
+        });
+    }, [editor, lines]);
     /**
      * 处理行节点
      */
@@ -86,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;
         });
@@ -98,7 +119,7 @@ const BlockView = props => {
     const children = (0, react_1.useMemo)(() => {
         return (0, wrap_1.withWrapLineNodes)(editor, elements);
     }, [editor, elements]);
-    return ((0, jsx_runtime_1.jsxs)("div", { [core_1.BLOCK_KEY]: true, [core_1.BLOCK_ID_KEY]: state.key, ref: setModel, children: [(0, jsx_runtime_1.jsx)(effect_1.PaintEffectModel, { editor: editor, lines: lines }), (0, jsx_runtime_1.jsx)(ph_1.Placeholder, { editor: editor, lines: lines, placeholder: props.placeholder }), children] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { [core_1.BLOCK_KEY]: true, [core_1.BLOCK_ID_KEY]: state.key, ref: setModel, children: [(0, jsx_runtime_1.jsx)(ph_1.Placeholder, { editor: editor, lines: lines, placeholder: props.placeholder }), children] }));
 };
 /** Block Model */
 exports.BlockModel = react_1.default.memo(BlockView);

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/editable.js

@@ -4,6 +4,7 @@ exports.Editable = 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");
 const use_editor_1 = require("../hooks/use-editor");
 const use_readonly_1 = require("../hooks/use-readonly");
@@ -25,6 +26,10 @@ const Editable = props => {
             !preventDestroy && editor.destroy();
         };
     }, [editor, preventDestroy]);
+    (0, hooks_1.useUpdateEffect)(() => {
+        // 需要保证 editor 实例稳定, 重渲染并不会触发 ref 执行, 导致 DOM 映射关系失效
+        editor.logger.warning("Confirm the uniqueness of the editor instance.", editor);
+    }, [editor]);
     (0, react_1.useEffect)(() => {
         // COMPAT: 这里有个奇怪的表现
         // 当自动聚焦时, 必须要先更新浏览器选区再聚焦

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.21",
+  "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.21",
-    "@block-kit/delta": "1.0.21",
-    "@block-kit/utils": "1.0.21"
+    "@block-kit/core": "1.0.23",
+    "@block-kit/delta": "1.0.23",
+    "@block-kit/utils": "1.0.23"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",

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

@@ -1,12 +0,0 @@
-import type { Editor, LineState } from "@block-kit/core";
-import React from "react";
-/**
- * 副作用依赖视图
- * - 父组件渲染会引发子组件渲染问题, memo 并未严格控制对比, 例如 ph 变更会导致重渲染
- * - 避免 memo 的渲染穿透问题, 参考 packages/react/test/render/effect.test.tsx
- * - 同样也可以直接将依赖即 [lines] 作为以来放置于 effect 中, 但抽离出独立组件能够更清晰
- */
-export declare const PaintEffectModel: React.NamedExoticComponent<{
-    editor: Editor;
-    lines: LineState[];
-}>;

package/dist/es/model/effect.js

@@ -1,36 +0,0 @@
-import { EDITOR_EVENT, EDITOR_STATE } from "@block-kit/core";
-import React, { useEffect, useLayoutEffect } from "react";
-const PaintEffectView = props => {
-    const editor = props.editor;
-    /**
-     * 视图更新需要重新设置选区 无依赖数组
-     */
-    useLayoutEffect(() => {
-        const selection = editor.selection.get();
-        // 同步计算完成后更新浏览器选区, 等待 Paint
-        if (editor.state.isFocused() && selection) {
-            editor.logger.debug("UpdateDOMSelection");
-            editor.selection.updateDOMSelection(true);
-        }
-    });
-    /**
-     * 视图更新需要触发视图绘制完成事件 无依赖数组
-     * state  -> parent -> node -> child ->|
-     * effect <- parent <- node <- child <-|
-     */
-    useEffect(() => {
-        editor.logger.debug("OnPaint");
-        editor.state.set(EDITOR_STATE.PAINTING, false);
-        Promise.resolve().then(() => {
-            editor.event.trigger(EDITOR_EVENT.PAINT, {});
-        });
-    });
-    return null;
-};
-/**
- * 副作用依赖视图
- * - 父组件渲染会引发子组件渲染问题, memo 并未严格控制对比, 例如 ph 变更会导致重渲染
- * - 避免 memo 的渲染穿透问题, 参考 packages/react/test/render/effect.test.tsx
- * - 同样也可以直接将依赖即 [lines] 作为以来放置于 effect 中, 但抽离出独立组件能够更清晰
- */
-export const PaintEffectModel = React.memo(PaintEffectView);

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

@@ -1,12 +0,0 @@
-import type { Editor, LineState } from "@block-kit/core";
-import React from "react";
-/**
- * 副作用依赖视图
- * - 父组件渲染会引发子组件渲染问题, memo 并未严格控制对比, 例如 ph 变更会导致重渲染
- * - 避免 memo 的渲染穿透问题, 参考 packages/react/test/render/effect.test.tsx
- * - 同样也可以直接将依赖即 [lines] 作为以来放置于 effect 中, 但抽离出独立组件能够更清晰
- */
-export declare const PaintEffectModel: React.NamedExoticComponent<{
-    editor: Editor;
-    lines: LineState[];
-}>;

package/dist/lib/model/effect.js

@@ -1,62 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PaintEffectModel = void 0;
-const core_1 = require("@block-kit/core");
-const react_1 = __importStar(require("react"));
-const PaintEffectView = props => {
-    const editor = props.editor;
-    /**
-     * 视图更新需要重新设置选区 无依赖数组
-     */
-    (0, react_1.useLayoutEffect)(() => {
-        const selection = editor.selection.get();
-        // 同步计算完成后更新浏览器选区, 等待 Paint
-        if (editor.state.isFocused() && selection) {
-            editor.logger.debug("UpdateDOMSelection");
-            editor.selection.updateDOMSelection(true);
-        }
-    });
-    /**
-     * 视图更新需要触发视图绘制完成事件 无依赖数组
-     * state  -> parent -> node -> child ->|
-     * effect <- parent <- node <- child <-|
-     */
-    (0, react_1.useEffect)(() => {
-        editor.logger.debug("OnPaint");
-        editor.state.set(core_1.EDITOR_STATE.PAINTING, false);
-        Promise.resolve().then(() => {
-            editor.event.trigger(core_1.EDITOR_EVENT.PAINT, {});
-        });
-    });
-    return null;
-};
-/**
- * 副作用依赖视图
- * - 父组件渲染会引发子组件渲染问题, memo 并未严格控制对比, 例如 ph 变更会导致重渲染
- * - 避免 memo 的渲染穿透问题, 参考 packages/react/test/render/effect.test.tsx
- * - 同样也可以直接将依赖即 [lines] 作为以来放置于 effect 中, 但抽离出独立组件能够更清晰
- */
-exports.PaintEffectModel = react_1.default.memo(PaintEffectView);