@block-kit/react 1.0.4 → 1.0.6

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

@@ -1,5 +1,6 @@
 import React, { createContext } from "react";
 export const BlockKitContext = createContext(null);
+BlockKitContext.displayName = "BlockKit";
 export const useEditorStatic = () => {
     const editor = React.useContext(BlockKitContext);
     if (!editor) {

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

@@ -1,5 +1,6 @@
 import React, { createContext } from "react";
 export const ReadonlyContext = createContext(false);
+ReadonlyContext.displayName = "Readonly";
 export const useReadonly = () => {
     const readonly = React.useContext(ReadonlyContext);
     return { readonly };

package/dist/es/index.d.ts

@@ -15,4 +15,5 @@ export { Isolate } from "./preset/isolate";
 export { Text } from "./preset/text";
 export { Void } from "./preset/void";
 export { ZeroSpace } from "./preset/zero";
+export { MountNode } from "./utils/dom";
 export { preventNativeEvent, preventReactEvent } from "./utils/event";

package/dist/es/index.js

@@ -14,4 +14,5 @@ export { Isolate } from "./preset/isolate";
 export { Text } from "./preset/text";
 export { Void } from "./preset/void";
 export { ZeroSpace } from "./preset/zero";
+export { MountNode } from "./utils/dom";
 export { preventNativeEvent, preventReactEvent } from "./utils/event";

package/dist/es/model/block.js

@@ -77,6 +77,14 @@ const BlockView = props => {
      * 处理行节点
      */
     const elements = useMemo(() => {
+        // 开发模式严格检查数据准确性
+        if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
+            for (const line of lines) {
+                if (line.length < 0 || line.size < 0 || line.index < 0 || line.start < 0 || !line.key) {
+                    throw new Error("LineState index, size, start or length is not set");
+                }
+            }
+        }
         return lines.map((line, index) => {
             const node = (_jsx(LineModel, { editor: editor, lineState: line, index: index }, line.key));
             JSX_TO_STATE.set(node, line);

package/dist/es/model/leaf.js

@@ -23,7 +23,7 @@ const LeafView = props => {
             leafState: leafState,
             attributes: leafState.op.attributes,
             style: {},
-            children: _jsx(Text, { ref: el => LT.set(leafState, el), children: text }),
+            children: _jsx(Text, { onRef: el => LT.set(leafState, el), children: text }),
         };
         const plugins = editor.plugin.getPriorityPlugins(PLUGIN_TYPE.RENDER_LEAF);
         for (const plugin of plugins) {

package/dist/es/model/line.js

@@ -52,10 +52,19 @@ const LineView = props => {
      * 处理行内的节点
      */
     const elements = useMemo(() => {
+        // 开发模式下严格检查数据准确性
+        if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
+            const leaves = lineState.getLeaves();
+            for (const leaf of leaves) {
+                if (leaf.index === -1 || leaf.offset === -1 || !leaf.key) {
+                    throw new Error("LeafState index or offset is not set");
+                }
+            }
+        }
         const leaves = lineState.getLeaves();
         const textLeaves = leaves.slice(0, -1);
         const nodes = textLeaves.map((n, i) => {
-            const node = _jsx(LeafModel, { editor: editor, index: i, leafState: n }, i);
+            const node = _jsx(LeafModel, { editor: editor, index: i, leafState: n }, n.key);
             JSX_TO_STATE.set(node, n);
             return node;
         });

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

@@ -0,0 +1,5 @@
+import type { Editor } from "@block-kit/core";
+import React from "react";
+export declare const PortalModel: React.NamedExoticComponent<{
+    editor: Editor;
+}>;

package/dist/es/model/portal.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Fragment, useState } from "react";
+import { EDITOR_TO_PORTAL } from "../utils/dom";
+const PortalView = props => {
+    const [portals, setPortals] = useState({});
+    EDITOR_TO_PORTAL.set(props.editor, setPortals);
+    return (_jsx(Fragment, { children: Object.entries(portals).map(([key, node]) => (_jsx(Fragment, { children: node }, key))) }));
+};
+export const PortalModel = React.memo(PortalView);

package/dist/es/preset/block-kit.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EDITOR_STATE } from "@block-kit/core";
 import { useMemo } from "react";
 import { BlockKitContext } from "../hooks/use-editor";
 import { ReadonlyContext } from "../hooks/use-readonly";
+import { PortalModel } from "../model/portal";
 import { initWrapPlugins } from "../plugin/modules/wrap";
 export const BlockKit = props => {
     const { editor, readonly, children } = props;
@@ -13,5 +14,5 @@ export const BlockKit = props => {
         // 希望在 Editor 初始化后立即执行一次
         initWrapPlugins(editor);
     }, [editor]);
-    return (_jsx(BlockKitContext.Provider, { value: editor, children: _jsx(ReadonlyContext.Provider, { value: !!readonly, children: children }) }));
+    return (_jsx(BlockKitContext.Provider, { value: editor, children: _jsxs(ReadonlyContext.Provider, { value: !!readonly, children: [_jsx(PortalModel, { editor: editor }), children] }) }));
 };

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

@@ -13,4 +13,10 @@ export declare const Editable: React.FC<{
      * - 节点会脱离文档流, 需要注意 CSS 布局
      */
     placeholder?: React.ReactNode;
+    /**
+     * 阻止编辑器主动销毁
+     * - 谨慎使用, 编辑器生命周期结束必须主动销毁
+     * - 注意保持值不可变, 否则会导致编辑器多次挂载
+     */
+    preventDestroy?: boolean;
 }>;

package/dist/es/preset/editable.js

@@ -10,7 +10,7 @@ import { BlockModel } from "../model/block";
  * @param props
  */
 export const Editable = props => {
-    const { className, autoFocus } = props;
+    const { className, autoFocus, preventDestroy } = props;
     const { editor } = useEditorStatic();
     const { readonly } = useReadonly();
     const ref = useRef(null);
@@ -18,9 +18,10 @@ export const Editable = props => {
         const el = ref.current;
         el && editor.onMount(el);
         return () => {
-            editor.destroy();
+            editor.onUnmount();
+            !preventDestroy && editor.destroy();
         };
-    }, [editor]);
+    }, [editor, preventDestroy]);
     useEffect(() => {
         // COMPAT: 这里有个奇怪的表现
         // 当自动聚焦时, 必须要先更新浏览器选区再聚焦

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

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import type { FC } from "react";
 export type TextProps = {
     children: string;
+    onRef?: (ref: HTMLSpanElement | null) => void;
 };
 /**
  * 文本节点
  * @param props
  */
-export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Text: FC<TextProps>;

package/dist/es/preset/text.js

@@ -1,20 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LEAF_STRING } from "@block-kit/core";
-import { isDOMText, isFunction } from "@block-kit/utils";
-import { forwardRef } from "react";
+import { isDOMText } from "@block-kit/utils";
 /**
  * 文本节点
  * @param props
  */
-export const Text = /*#__PURE__*/ forwardRef((props, ref) => {
+export const Text = props => {
     const onRef = (dom) => {
         // 处理外部引用的 ref
-        if (isFunction(ref)) {
-            ref(dom);
-        }
-        else if (ref) {
-            ref.current = dom;
-        }
+        props.onRef && props.onRef(dom);
         // COMPAT: 避免 React 非受控与 IME 造成的 DOM 内容问题
         if (!dom || props.children === dom.textContent)
             return void 0;
@@ -31,4 +25,4 @@ export const Text = /*#__PURE__*/ forwardRef((props, ref) => {
         }
     };
     return (_jsx("span", { ref: onRef, [LEAF_STRING]: true, children: props.children }));
-});
+};

package/dist/es/preset/void.js

@@ -13,11 +13,12 @@ export const Void = props => {
     const { context, tag: Tag = "span" } = props;
     const { editor } = useEditorStatic();
     const leaf = context.leafState;
-    const onMouseDown = () => {
+    const onMouseDown = (event) => {
         // FIX: 修复选区偏移量, leaf 的长度可能 > 1, 而 DOM 节点的长度仅为 1
         const point = new Point(leaf.parent.index, leaf.offset + 1);
         const range = new Range(point, point.clone());
         editor.selection.set(range, true);
+        event.preventDefault();
     };
     return (_jsxs(React.Fragment, { children: [_jsx(ZeroSpace, { void: true, hide: true, len: leaf.length > 1 ? leaf.length : void 0 }), _jsx(Tag, { className: props.className, style: Object.assign({ userSelect: "none" }, props.style), contentEditable: false, [VOID_KEY]: true, onMouseDown: onMouseDown, children: props.children })] }));
 };

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { FC } from "react";
 export type ZeroSpaceProps = {
     /** 隐藏光标 */
     hide?: boolean;
@@ -10,6 +10,8 @@ export type ZeroSpaceProps = {
     enter?: boolean;
     /** 空节点占位长度 */
     len?: number;
+    /** 获取 DOM 引用 */
+    onRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 /**
  * 零宽字符组件
@@ -18,6 +20,5 @@ export type ZeroSpaceProps = {
  * - enter => 行末尾占位, 保留于 EOLView
  * - len => 空节点占位长度, 配合 Void/Embed
  * @param props
- * @param ref
  */
-export declare const ZeroSpace: import("react").ForwardRefExoticComponent<ZeroSpaceProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const ZeroSpace: FC<ZeroSpaceProps>;

package/dist/es/preset/zero.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { VOID_LEN_KEY, ZERO_EMBED_KEY, ZERO_ENTER_KEY, ZERO_SPACE_KEY, ZERO_SYMBOL, ZERO_VOID_KEY, } from "@block-kit/core";
-import { forwardRef } from "react";
 import { NO_CURSOR } from "../utils/constant";
 /**
  * 零宽字符组件
@@ -9,12 +8,11 @@ import { NO_CURSOR } from "../utils/constant";
  * - enter => 行末尾占位, 保留于 EOLView
  * - len => 空节点占位长度, 配合 Void/Embed
  * @param props
- * @param ref
  */
-export const ZeroSpace = /*#__PURE__*/ forwardRef((props, ref) => {
-    return (_jsx("span", { ref: ref, [ZERO_SPACE_KEY]: true,
+export const ZeroSpace = props => {
+    return (_jsx("span", { ref: props.onRef, [ZERO_SPACE_KEY]: true,
         [ZERO_VOID_KEY]: props.void,
         [ZERO_ENTER_KEY]: props.enter,
         [ZERO_EMBED_KEY]: props.embed,
         [VOID_LEN_KEY]: props.len, style: props.hide ? NO_CURSOR : void 0, children: ZERO_SYMBOL }));
-});
+};

package/dist/es/utils/dom.d.ts

@@ -0,0 +1,36 @@
+import type { Editor } from "@block-kit/core";
+import type { O } from "@block-kit/utils/dist/es/types";
+import type { ReactPortal } from "react";
+export declare const EDITOR_TO_DOM: WeakMap<Editor, HTMLElement | null>;
+export declare const EDITOR_TO_PORTAL: WeakMap<Editor, import("react").Dispatch<import("react").SetStateAction<O.Map<ReactPortal>>> | null>;
+/**
+ * 共享的挂载节点
+ */
+export declare const MountNode: {
+    /**
+     * 设置挂载 DOM
+     * @param editor
+     * @param dom
+     */
+    set: (editor: Editor, dom: HTMLElement | null) => void;
+    /**
+     * 获取挂载 DOM
+     * @param editor
+     * @param dom
+     */
+    get: (editor: Editor) => HTMLElement;
+    /**
+     * 渲染节点
+     * @param editor
+     * @param key
+     * @param node
+     * @param dom [?=undef]
+     */
+    mount: (editor: Editor, key: string, node: JSX.Element, dom?: HTMLElement) => undefined;
+    /**
+     * 卸载节点
+     * @param editor
+     * @param key
+     */
+    unmount: (editor: Editor, key: string) => undefined;
+};

package/dist/es/utils/dom.js

@@ -0,0 +1,57 @@
+import { createPortal } from "react-dom";
+export const EDITOR_TO_DOM = new WeakMap();
+export const EDITOR_TO_PORTAL = new WeakMap();
+/**
+ * 共享的挂载节点
+ */
+export const MountNode = {
+    /**
+     * 设置挂载 DOM
+     * @param editor
+     * @param dom
+     */
+    set: (editor, dom) => {
+        EDITOR_TO_DOM.set(editor, dom);
+    },
+    /**
+     * 获取挂载 DOM
+     * @param editor
+     * @param dom
+     */
+    get: (editor) => {
+        return EDITOR_TO_DOM.get(editor) || document.body;
+    },
+    /**
+     * 渲染节点
+     * @param editor
+     * @param key
+     * @param node
+     * @param dom [?=undef]
+     */
+    mount: (editor, key, node, dom) => {
+        const setPortals = EDITOR_TO_PORTAL.get(editor);
+        if (!setPortals)
+            return void 0;
+        const portal = createPortal(node, dom || MountNode.get(editor));
+        setPortals(prev => {
+            const newNodes = Object.assign({}, prev);
+            newNodes[key] = portal;
+            return newNodes;
+        });
+    },
+    /**
+     * 卸载节点
+     * @param editor
+     * @param key
+     */
+    unmount: (editor, key) => {
+        const setPortals = EDITOR_TO_PORTAL.get(editor);
+        if (!setPortals)
+            return void 0;
+        setPortals(prev => {
+            const newNodes = Object.assign({}, prev);
+            delete newNodes[key];
+            return newNodes;
+        });
+    },
+};

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

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useEditorStatic = exports.BlockKitContext = void 0;
 const react_1 = __importStar(require("react"));
 exports.BlockKitContext = (0, react_1.createContext)(null);
+exports.BlockKitContext.displayName = "BlockKit";
 const useEditorStatic = () => {
     const editor = react_1.default.useContext(exports.BlockKitContext);
     if (!editor) {

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

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReadonly = exports.ReadonlyContext = void 0;
 const react_1 = __importStar(require("react"));
 exports.ReadonlyContext = (0, react_1.createContext)(false);
+exports.ReadonlyContext.displayName = "Readonly";
 const useReadonly = () => {
     const readonly = react_1.default.useContext(exports.ReadonlyContext);
     return { readonly };

package/dist/lib/index.d.ts

@@ -15,4 +15,5 @@ export { Isolate } from "./preset/isolate";
 export { Text } from "./preset/text";
 export { Void } from "./preset/void";
 export { ZeroSpace } from "./preset/zero";
+export { MountNode } from "./utils/dom";
 export { preventNativeEvent, preventReactEvent } from "./utils/event";

package/dist/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.preventReactEvent = exports.preventNativeEvent = 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 = void 0;
+exports.preventReactEvent = exports.preventNativeEvent = exports.MountNode = 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 = void 0;
 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; } });
@@ -35,6 +35,8 @@ var void_1 = require("./preset/void");
 Object.defineProperty(exports, "Void", { enumerable: true, get: function () { return void_1.Void; } });
 var zero_1 = require("./preset/zero");
 Object.defineProperty(exports, "ZeroSpace", { enumerable: true, get: function () { return zero_1.ZeroSpace; } });
+var dom_1 = require("./utils/dom");
+Object.defineProperty(exports, "MountNode", { enumerable: true, get: function () { return dom_1.MountNode; } });
 var event_1 = require("./utils/event");
 Object.defineProperty(exports, "preventNativeEvent", { enumerable: true, get: function () { return event_1.preventNativeEvent; } });
 Object.defineProperty(exports, "preventReactEvent", { enumerable: true, get: function () { return event_1.preventReactEvent; } });

package/dist/lib/model/block.js

@@ -103,6 +103,14 @@ const BlockView = props => {
      * 处理行节点
      */
     const elements = (0, react_1.useMemo)(() => {
+        // 开发模式严格检查数据准确性
+        if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
+            for (const line of lines) {
+                if (line.length < 0 || line.size < 0 || line.index < 0 || line.start < 0 || !line.key) {
+                    throw new Error("LineState index, size, start or length is not set");
+                }
+            }
+        }
         return lines.map((line, index) => {
             const node = ((0, jsx_runtime_1.jsx)(line_1.LineModel, { editor: editor, lineState: line, index: index }, line.key));
             weak_map_1.JSX_TO_STATE.set(node, line);

package/dist/lib/model/leaf.js

@@ -49,7 +49,7 @@ const LeafView = props => {
             leafState: leafState,
             attributes: leafState.op.attributes,
             style: {},
-            children: (0, jsx_runtime_1.jsx)(text_1.Text, { ref: el => weak_map_1.LEAF_TO_TEXT.set(leafState, el), children: text }),
+            children: (0, jsx_runtime_1.jsx)(text_1.Text, { onRef: el => weak_map_1.LEAF_TO_TEXT.set(leafState, el), children: text }),
         };
         const plugins = editor.plugin.getPriorityPlugins(core_1.PLUGIN_TYPE.RENDER_LEAF);
         for (const plugin of plugins) {

package/dist/lib/model/line.js

@@ -78,10 +78,19 @@ const LineView = props => {
      * 处理行内的节点
      */
     const elements = (0, react_1.useMemo)(() => {
+        // 开发模式下严格检查数据准确性
+        if (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") {
+            const leaves = lineState.getLeaves();
+            for (const leaf of leaves) {
+                if (leaf.index === -1 || leaf.offset === -1 || !leaf.key) {
+                    throw new Error("LeafState index or offset is not set");
+                }
+            }
+        }
         const leaves = lineState.getLeaves();
         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 }, i);
+            const node = (0, jsx_runtime_1.jsx)(leaf_1.LeafModel, { editor: editor, index: i, leafState: n }, n.key);
             weak_map_1.JSX_TO_STATE.set(node, n);
             return node;
         });

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

@@ -0,0 +1,5 @@
+import type { Editor } from "@block-kit/core";
+import React from "react";
+export declare const PortalModel: React.NamedExoticComponent<{
+    editor: Editor;
+}>;

package/dist/lib/model/portal.js

@@ -0,0 +1,35 @@
+"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.PortalModel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const dom_1 = require("../utils/dom");
+const PortalView = props => {
+    const [portals, setPortals] = (0, react_1.useState)({});
+    dom_1.EDITOR_TO_PORTAL.set(props.editor, setPortals);
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: Object.entries(portals).map(([key, node]) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: node }, key))) }));
+};
+exports.PortalModel = react_1.default.memo(PortalView);

package/dist/lib/preset/block-kit.js

@@ -6,6 +6,7 @@ const core_1 = require("@block-kit/core");
 const react_1 = require("react");
 const use_editor_1 = require("../hooks/use-editor");
 const use_readonly_1 = require("../hooks/use-readonly");
+const portal_1 = require("../model/portal");
 const wrap_1 = require("../plugin/modules/wrap");
 const BlockKit = props => {
     const { editor, readonly, children } = props;
@@ -16,6 +17,6 @@ const BlockKit = props => {
         // 希望在 Editor 初始化后立即执行一次
         (0, wrap_1.initWrapPlugins)(editor);
     }, [editor]);
-    return ((0, jsx_runtime_1.jsx)(use_editor_1.BlockKitContext.Provider, { value: editor, children: (0, jsx_runtime_1.jsx)(use_readonly_1.ReadonlyContext.Provider, { value: !!readonly, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(use_editor_1.BlockKitContext.Provider, { value: editor, children: (0, jsx_runtime_1.jsxs)(use_readonly_1.ReadonlyContext.Provider, { value: !!readonly, children: [(0, jsx_runtime_1.jsx)(portal_1.PortalModel, { editor: editor }), children] }) }));
 };
 exports.BlockKit = BlockKit;

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

@@ -13,4 +13,10 @@ export declare const Editable: React.FC<{
      * - 节点会脱离文档流, 需要注意 CSS 布局
      */
     placeholder?: React.ReactNode;
+    /**
+     * 阻止编辑器主动销毁
+     * - 谨慎使用, 编辑器生命周期结束必须主动销毁
+     * - 注意保持值不可变, 否则会导致编辑器多次挂载
+     */
+    preventDestroy?: boolean;
 }>;

package/dist/lib/preset/editable.js

@@ -13,7 +13,7 @@ const block_1 = require("../model/block");
  * @param props
  */
 const Editable = props => {
-    const { className, autoFocus } = props;
+    const { className, autoFocus, preventDestroy } = props;
     const { editor } = (0, use_editor_1.useEditorStatic)();
     const { readonly } = (0, use_readonly_1.useReadonly)();
     const ref = (0, react_1.useRef)(null);
@@ -21,9 +21,10 @@ const Editable = props => {
         const el = ref.current;
         el && editor.onMount(el);
         return () => {
-            editor.destroy();
+            editor.onUnmount();
+            !preventDestroy && editor.destroy();
         };
-    }, [editor]);
+    }, [editor, preventDestroy]);
     (0, react_1.useEffect)(() => {
         // COMPAT: 这里有个奇怪的表现
         // 当自动聚焦时, 必须要先更新浏览器选区再聚焦

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

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import type { FC } from "react";
 export type TextProps = {
     children: string;
+    onRef?: (ref: HTMLSpanElement | null) => void;
 };
 /**
  * 文本节点
  * @param props
  */
-export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Text: FC<TextProps>;

package/dist/lib/preset/text.js

@@ -4,20 +4,14 @@ exports.Text = 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 react_1 = require("react");
 /**
  * 文本节点
  * @param props
  */
-exports.Text = (0, react_1.forwardRef)((props, ref) => {
+const Text = props => {
     const onRef = (dom) => {
         // 处理外部引用的 ref
-        if ((0, utils_1.isFunction)(ref)) {
-            ref(dom);
-        }
-        else if (ref) {
-            ref.current = dom;
-        }
+        props.onRef && props.onRef(dom);
         // COMPAT: 避免 React 非受控与 IME 造成的 DOM 内容问题
         if (!dom || props.children === dom.textContent)
             return void 0;
@@ -34,4 +28,5 @@ exports.Text = (0, react_1.forwardRef)((props, ref) => {
         }
     };
     return ((0, jsx_runtime_1.jsx)("span", { ref: onRef, [core_1.LEAF_STRING]: true, children: props.children }));
-});
+};
+exports.Text = Text;

package/dist/lib/preset/void.js

@@ -19,11 +19,12 @@ const Void = props => {
     const { context, tag: Tag = "span" } = props;
     const { editor } = (0, use_editor_1.useEditorStatic)();
     const leaf = context.leafState;
-    const onMouseDown = () => {
+    const onMouseDown = (event) => {
         // FIX: 修复选区偏移量, leaf 的长度可能 > 1, 而 DOM 节点的长度仅为 1
         const point = new core_3.Point(leaf.parent.index, leaf.offset + 1);
         const range = new core_2.Range(point, point.clone());
         editor.selection.set(range, true);
+        event.preventDefault();
     };
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(zero_1.ZeroSpace, { void: true, hide: true, len: leaf.length > 1 ? leaf.length : void 0 }), (0, jsx_runtime_1.jsx)(Tag, { className: props.className, style: Object.assign({ userSelect: "none" }, props.style), contentEditable: false, [core_1.VOID_KEY]: true, onMouseDown: onMouseDown, children: props.children })] }));
 };

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import type { FC } from "react";
 export type ZeroSpaceProps = {
     /** 隐藏光标 */
     hide?: boolean;
@@ -10,6 +10,8 @@ export type ZeroSpaceProps = {
     enter?: boolean;
     /** 空节点占位长度 */
     len?: number;
+    /** 获取 DOM 引用 */
+    onRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 /**
  * 零宽字符组件
@@ -18,6 +20,5 @@ export type ZeroSpaceProps = {
  * - enter => 行末尾占位, 保留于 EOLView
  * - len => 空节点占位长度, 配合 Void/Embed
  * @param props
- * @param ref
  */
-export declare const ZeroSpace: import("react").ForwardRefExoticComponent<ZeroSpaceProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const ZeroSpace: FC<ZeroSpaceProps>;

package/dist/lib/preset/zero.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ZeroSpace = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const core_1 = require("@block-kit/core");
-const react_1 = require("react");
 const constant_1 = require("../utils/constant");
 /**
  * 零宽字符组件
@@ -12,12 +11,12 @@ const constant_1 = require("../utils/constant");
  * - enter => 行末尾占位, 保留于 EOLView
  * - len => 空节点占位长度, 配合 Void/Embed
  * @param props
- * @param ref
  */
-exports.ZeroSpace = (0, react_1.forwardRef)((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, [core_1.ZERO_SPACE_KEY]: true,
+const ZeroSpace = props => {
+    return ((0, jsx_runtime_1.jsx)("span", { ref: props.onRef, [core_1.ZERO_SPACE_KEY]: true,
         [core_1.ZERO_VOID_KEY]: props.void,
         [core_1.ZERO_ENTER_KEY]: props.enter,
         [core_1.ZERO_EMBED_KEY]: props.embed,
         [core_1.VOID_LEN_KEY]: props.len, style: props.hide ? constant_1.NO_CURSOR : void 0, children: core_1.ZERO_SYMBOL }));
-});
+};
+exports.ZeroSpace = ZeroSpace;

package/dist/lib/utils/dom.d.ts

@@ -0,0 +1,36 @@
+import type { Editor } from "@block-kit/core";
+import type { O } from "@block-kit/utils/dist/es/types";
+import type { ReactPortal } from "react";
+export declare const EDITOR_TO_DOM: WeakMap<Editor, HTMLElement | null>;
+export declare const EDITOR_TO_PORTAL: WeakMap<Editor, import("react").Dispatch<import("react").SetStateAction<O.Map<ReactPortal>>> | null>;
+/**
+ * 共享的挂载节点
+ */
+export declare const MountNode: {
+    /**
+     * 设置挂载 DOM
+     * @param editor
+     * @param dom
+     */
+    set: (editor: Editor, dom: HTMLElement | null) => void;
+    /**
+     * 获取挂载 DOM
+     * @param editor
+     * @param dom
+     */
+    get: (editor: Editor) => HTMLElement;
+    /**
+     * 渲染节点
+     * @param editor
+     * @param key
+     * @param node
+     * @param dom [?=undef]
+     */
+    mount: (editor: Editor, key: string, node: JSX.Element, dom?: HTMLElement) => undefined;
+    /**
+     * 卸载节点
+     * @param editor
+     * @param key
+     */
+    unmount: (editor: Editor, key: string) => undefined;
+};

package/dist/lib/utils/dom.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MountNode = exports.EDITOR_TO_PORTAL = exports.EDITOR_TO_DOM = void 0;
+const react_dom_1 = require("react-dom");
+exports.EDITOR_TO_DOM = new WeakMap();
+exports.EDITOR_TO_PORTAL = new WeakMap();
+/**
+ * 共享的挂载节点
+ */
+exports.MountNode = {
+    /**
+     * 设置挂载 DOM
+     * @param editor
+     * @param dom
+     */
+    set: (editor, dom) => {
+        exports.EDITOR_TO_DOM.set(editor, dom);
+    },
+    /**
+     * 获取挂载 DOM
+     * @param editor
+     * @param dom
+     */
+    get: (editor) => {
+        return exports.EDITOR_TO_DOM.get(editor) || document.body;
+    },
+    /**
+     * 渲染节点
+     * @param editor
+     * @param key
+     * @param node
+     * @param dom [?=undef]
+     */
+    mount: (editor, key, node, dom) => {
+        const setPortals = exports.EDITOR_TO_PORTAL.get(editor);
+        if (!setPortals)
+            return void 0;
+        const portal = (0, react_dom_1.createPortal)(node, dom || exports.MountNode.get(editor));
+        setPortals(prev => {
+            const newNodes = Object.assign({}, prev);
+            newNodes[key] = portal;
+            return newNodes;
+        });
+    },
+    /**
+     * 卸载节点
+     * @param editor
+     * @param key
+     */
+    unmount: (editor, key) => {
+        const setPortals = exports.EDITOR_TO_PORTAL.get(editor);
+        if (!setPortals)
+            return void 0;
+        setPortals(prev => {
+            const newNodes = Object.assign({}, prev);
+            delete newNodes[key];
+            return newNodes;
+        });
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@block-kit/react",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "",
   "main": "./dist/lib/index.js",
   "types": "./dist/es/index.d.ts",
@@ -19,17 +19,29 @@
     "lint:ts": "tsc -p tsconfig.build.json --noEmit",
     "lint:circular": "madge --extensions js --circular ./dist"
   },
-  "keywords": [],
-  "author": "",
+  "author": "WindRunnerMax",
   "license": "MIT",
+  "keywords": [
+    "editor",
+    "wysiwyg",
+    "rich-text"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WindrunnerMax/BlockKit.git"
+  },
+  "homepage": "https://github.com/WindrunnerMax/BlockKit",
+  "bugs": {
+    "url": "https://github.com/WindrunnerMax/BlockKit/issues"
+  },
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
   },
   "dependencies": {
-    "@block-kit/core": "1.0.4",
-    "@block-kit/delta": "1.0.4",
-    "@block-kit/utils": "1.0.4"
+    "@block-kit/core": "1.0.6",
+    "@block-kit/delta": "1.0.6",
+    "@block-kit/utils": "1.0.6"
   },
   "devDependencies": {
     "@types/react": "17.0.2",