@block-kit/react 1.0.9 → 1.0.11

package/dist/es/index.d.ts

@@ -15,5 +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";
+export { MountNode } from "./utils/mount-dom";

package/dist/es/index.js

@@ -14,5 +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";
+export { MountNode } from "./utils/mount-dom";

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, PLACEHOLDER_KEY, } from "@block-kit/core";
+import { BLOCK_ID_KEY, BLOCK_KEY, EDITOR_EVENT, EDITOR_STATE, isEmptyLine, PLACEHOLDER_KEY, } from "@block-kit/core";
 import { useMemoFn } from "@block-kit/utils/dist/es/hooks";
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { EDITOR_TO_WRAP_LINE_KEYS, EDITOR_TO_WRAP_LINE_PLUGINS } from "../plugin/modules/wrap";
-import { isStrictEmptyLine } from "../utils/is";
 import { JSX_TO_STATE } from "../utils/weak-map";
-import { getWrapSymbol } from "../utils/wrapper";
+import { getWrapSymbol } from "../utils/wrapper-node";
 import { LineModel } from "./line";
 /**
  * Block Model
@@ -92,7 +91,7 @@ const BlockView = props => {
         });
     }, [editor, lines]);
     /**
-     * 将行包装组合 O(N)
+     * 将行节点包装组合 O(N)
      */
     const children = useMemo(() => {
         const wrapped = [];
@@ -140,7 +139,7 @@ const BlockView = props => {
         }
         return wrapped;
     }, [editor, elements]);
-    return (_jsxs("div", { [BLOCK_KEY]: true, [BLOCK_ID_KEY]: state.key, ref: setModel, children: [props.placeholder && lines.length === 1 && isStrictEmptyLine(lines[0]) && (_jsx("div", { [PLACEHOLDER_KEY]: true, style: {
+    return (_jsxs("div", { [BLOCK_KEY]: true, [BLOCK_ID_KEY]: state.key, ref: setModel, children: [props.placeholder && lines.length === 1 && isEmptyLine(lines[0], true) && (_jsx("div", { [PLACEHOLDER_KEY]: true, style: {
                     position: "absolute",
                     opacity: "0.3",
                     userSelect: "none",

package/dist/es/model/leaf.js

@@ -9,11 +9,17 @@ import { LEAF_TO_TEXT as LT } from "../utils/weak-map";
  */
 const LeafView = props => {
     const { editor, leafState } = props;
+    /**
+     * 设置叶子 DOM 节点
+     */
     const setModel = (ref) => {
         if (ref) {
             editor.model.setLeafModel(ref, leafState);
         }
     };
+    /**
+     * 处理叶子节点的渲染
+     */
     const runtime = useMemo(() => {
         const text = leafState.getText();
         const context = {

package/dist/es/model/line.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { NODE_KEY, PLUGIN_TYPE } from "@block-kit/core";
 import { EOL, EOL_OP } from "@block-kit/delta";
-import { cs, isDOMText } from "@block-kit/utils";
+import { cs } from "@block-kit/utils";
 import { useUpdateLayoutEffect } from "@block-kit/utils/dist/es/hooks";
 import React, { useMemo } from "react";
 import { EDITOR_TO_WRAP_LEAF_KEYS, EDITOR_TO_WRAP_LEAF_PLUGINS } from "../plugin/modules/wrap";
+import { updateDirtyLeaf, updateDirtyText } from "../utils/dirty-dom";
 import { JSX_TO_STATE, LEAF_TO_TEXT } from "../utils/weak-map";
-import { getWrapSymbol } from "../utils/wrapper";
+import { getWrapSymbol } from "../utils/wrapper-node";
 import { EOLModel } from "./eol";
 import { LeafModel } from "./leaf";
 /**
@@ -30,22 +31,10 @@ const LineView = props => {
     useUpdateLayoutEffect(() => {
         const leaves = lineState.getLeaves();
         for (const leaf of leaves) {
-            const dom = LEAF_TO_TEXT.get(leaf);
-            if (!dom)
-                continue;
-            const text = leaf.getText();
             // 避免 React 非受控与 IME 造成的 DOM 内容问题
-            if (text === dom.textContent)
-                continue;
-            editor.logger.debug("Correct Text Node", dom);
-            const nodes = dom.childNodes;
-            for (let i = 1; i < nodes.length; ++i) {
-                const node = nodes[i];
-                node && node.remove();
-            }
-            if (isDOMText(dom.firstChild)) {
-                dom.firstChild.nodeValue = text;
-            }
+            updateDirtyLeaf(editor, leaf);
+            const dom = LEAF_TO_TEXT.get(leaf);
+            dom && updateDirtyText(dom, leaf.getText());
         }
     }, [lineState]);
     /**
@@ -88,7 +77,7 @@ const LineView = props => {
         return nodes;
     }, [editor, lineState]);
     /**
-     * 将行内节点包装组合 O(N)
+     * 将行内叶子节点包装组合 O(N)
      */
     const children = useMemo(() => {
         const wrapped = [];

package/dist/es/model/portal.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { Fragment, useState } from "react";
-import { EDITOR_TO_PORTAL } from "../utils/dom";
+import { EDITOR_TO_PORTAL } from "../utils/mount-dom";
 const PortalView = props => {
     const [portals, setPortals] = useState({});
     EDITOR_TO_PORTAL.set(props.editor, setPortals);

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

@@ -6,7 +6,7 @@ export type IsolateProps = PropsWithChildren<{
 }>;
 /**
  * 独立节点嵌入 HOC
- * - 独立区域 完全隔离所有事件
+ * - 独立区域 完全隔离相关事件
  * @param props
  */
 export declare const Isolate: FC<IsolateProps>;

package/dist/es/preset/isolate.js

@@ -1,10 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { preventReactEvent } from "../utils/event";
+import { EDITOR_EVENT, ISOLATED_KEY } from "@block-kit/core";
+import { stopNativeEvent } from "@block-kit/utils";
+import { useEffect, useState } from "react";
 /**
  * 独立节点嵌入 HOC
- * - 独立区域 完全隔离所有事件
+ * - 独立区域 完全隔离相关事件
  * @param props
  */
 export const Isolate = props => {
-    return (_jsx("span", { className: props.className, style: Object.assign({ userSelect: "none" }, props.style), contentEditable: false, onMouseDown: preventReactEvent, onCopy: preventReactEvent, children: props.children }));
+    const [ref, setRef] = useState(null);
+    useEffect(() => {
+        const el = ref;
+        if (!el)
+            return void 0;
+        const { BEFORE_INPUT, MOUSE_DOWN, COPY, KEY_DOWN, PASTE, CUT, INPUT, FOCUS, BLUR, CLICK, COMPOSITION_END, COMPOSITION_START, COMPOSITION_UPDATE, } = EDITOR_EVENT;
+        el.addEventListener(CLICK, stopNativeEvent);
+        el.addEventListener(MOUSE_DOWN, stopNativeEvent);
+        el.addEventListener(CUT, stopNativeEvent);
+        el.addEventListener(COPY, stopNativeEvent);
+        el.addEventListener(PASTE, stopNativeEvent);
+        el.addEventListener(FOCUS, stopNativeEvent);
+        el.addEventListener(BLUR, stopNativeEvent);
+        el.addEventListener(KEY_DOWN, stopNativeEvent);
+        el.addEventListener(INPUT, stopNativeEvent);
+        el.addEventListener(BEFORE_INPUT, stopNativeEvent);
+        el.addEventListener(COMPOSITION_START, stopNativeEvent);
+        el.addEventListener(COMPOSITION_UPDATE, stopNativeEvent);
+        el.addEventListener(COMPOSITION_END, stopNativeEvent);
+        return () => {
+            el.removeEventListener(CLICK, stopNativeEvent);
+            el.removeEventListener(MOUSE_DOWN, stopNativeEvent);
+            el.removeEventListener(CUT, stopNativeEvent);
+            el.removeEventListener(COPY, stopNativeEvent);
+            el.removeEventListener(PASTE, stopNativeEvent);
+            el.removeEventListener(FOCUS, stopNativeEvent);
+            el.removeEventListener(BLUR, stopNativeEvent);
+            el.removeEventListener(KEY_DOWN, stopNativeEvent);
+            el.removeEventListener(INPUT, stopNativeEvent);
+            el.removeEventListener(BEFORE_INPUT, stopNativeEvent);
+            el.removeEventListener(COMPOSITION_START, stopNativeEvent);
+            el.removeEventListener(COMPOSITION_UPDATE, stopNativeEvent);
+            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 }));
 };

package/dist/es/preset/text.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { LEAF_STRING } from "@block-kit/core";
-import { isDOMText } from "@block-kit/utils";
+import { updateDirtyText } from "../utils/dirty-dom";
 /**
  * 文本节点
  * @param props
@@ -10,19 +10,7 @@ export const Text = props => {
         // 处理外部引用的 ref
         props.onRef && props.onRef(dom);
         // COMPAT: 避免 React 非受控与 IME 造成的 DOM 内容问题
-        if (!dom || props.children === dom.textContent)
-            return void 0;
-        const nodes = dom.childNodes;
-        // If the text content is inconsistent due to the modification of the input
-        // it needs to be corrected
-        for (let i = 1; i < nodes.length; ++i) {
-            const node = nodes[i];
-            node && node.remove();
-        }
-        // Guaranteed to have only one text child
-        if (isDOMText(dom.firstChild)) {
-            dom.firstChild.nodeValue = props.children;
-        }
+        dom && updateDirtyText(dom, props.children);
     };
     return (_jsx("span", { ref: onRef, [LEAF_STRING]: true, children: props.children }));
 };

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

@@ -0,0 +1,14 @@
+import type { LeafState } from "@block-kit/core";
+import type { Editor } from "@block-kit/core";
+/**
+ * 纯文本节点的检查更新
+ * @param dom DOM 节点
+ * @param text 目标文本
+ */
+export declare const updateDirtyText: (dom: HTMLElement, text: string) => boolean;
+/**
+ * Leaf 节点的检查更新
+ * @param editor
+ * @param leaf
+ */
+export declare const updateDirtyLeaf: (editor: Editor, leaf: LeafState) => boolean;

package/dist/es/utils/dirty-dom.js

@@ -0,0 +1,46 @@
+import { isDOMText } from "@block-kit/utils";
+/**
+ * 纯文本节点的检查更新
+ * @param dom DOM 节点
+ * @param text 目标文本
+ */
+export const updateDirtyText = (dom, text) => {
+    if (text === dom.textContent)
+        return false;
+    const nodes = dom.childNodes;
+    // 文本节点内部仅应该存在一个文本节点, 需要移除额外节点
+    for (let i = 1; i < nodes.length; ++i) {
+        const node = nodes[i];
+        node && node.remove();
+    }
+    // 如果文本内容不一致, 则是由于输入的脏 DOM, 需要纠正内容
+    // Case1: [inline-code][caret][text] IME 会导致模型/文本差异
+    if (isDOMText(dom.firstChild)) {
+        dom.firstChild.nodeValue = text;
+    }
+    if (process.env.NODE_ENV === "development") {
+        console.log("Correct Text Node", dom);
+    }
+    return true;
+};
+/**
+ * Leaf 节点的检查更新
+ * @param editor
+ * @param leaf
+ */
+export const updateDirtyLeaf = (editor, leaf) => {
+    const dom = editor.model.getLeafNode(leaf);
+    const nodes = dom && dom.childNodes;
+    if (!nodes || nodes.length <= 1)
+        return false;
+    // data-leaf 节点内部仅应该存在非文本节点, 文本类型单节点, 嵌入类型双节点
+    // Case1: a 标签内的 IME 输入会导致同级的额外文本节点类型插入
+    for (let i = 0; i < nodes.length; ++i) {
+        const node = nodes[i];
+        isDOMText(node) && node.remove();
+        if (process.env.NODE_ENV === "development" && isDOMText(node)) {
+            console.log("Remove Leaf Child", dom, node);
+        }
+    }
+    return true;
+};

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

@@ -1,2 +1,6 @@
-export declare const preventNativeEvent: (e: Event) => void;
-export declare const preventReactEvent: (e: React.SyntheticEvent) => void;
+export declare const preventNativeEvent: (event: {
+    preventDefault: Event["preventDefault"];
+    stopPropagation: Event["stopPropagation"];
+    stopImmediatePropagation?: Event["stopImmediatePropagation"];
+}) => void;
+export declare const preventReactEvent: (event: React.SyntheticEvent) => void;

package/dist/es/utils/event.js

@@ -1,7 +1,9 @@
-export const preventNativeEvent = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
+export const preventNativeEvent = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation && event.stopImmediatePropagation();
 };
-export const preventReactEvent = (e) => {
-    preventNativeEvent(e.nativeEvent);
+export const preventReactEvent = (event) => {
+    preventNativeEvent(event);
+    preventNativeEvent(event.nativeEvent);
 };

package/dist/lib/index.d.ts

@@ -15,5 +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";
+export { MountNode } from "./utils/mount-dom";

package/dist/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+exports.MountNode = 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;
 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,8 +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; } });
+var mount_dom_1 = require("./utils/mount-dom");
+Object.defineProperty(exports, "MountNode", { enumerable: true, get: function () { return mount_dom_1.MountNode; } });

package/dist/lib/model/block.js

@@ -29,9 +29,8 @@ const core_1 = require("@block-kit/core");
 const hooks_1 = require("@block-kit/utils/dist/es/hooks");
 const react_1 = __importStar(require("react"));
 const wrap_1 = require("../plugin/modules/wrap");
-const is_1 = require("../utils/is");
 const weak_map_1 = require("../utils/weak-map");
-const wrapper_1 = require("../utils/wrapper");
+const wrapper_node_1 = require("../utils/wrapper-node");
 const line_1 = require("./line");
 /**
  * Block Model
@@ -118,7 +117,7 @@ const BlockView = props => {
         });
     }, [editor, lines]);
     /**
-     * 将行包装组合 O(N)
+     * 将行节点包装组合 O(N)
      */
     const children = (0, react_1.useMemo)(() => {
         const wrapped = [];
@@ -129,7 +128,7 @@ const BlockView = props => {
         const len = elements.length;
         for (let i = 0; i < len; ++i) {
             const element = elements[i];
-            const symbol = (0, wrapper_1.getWrapSymbol)(keys, element);
+            const symbol = (0, wrapper_node_1.getWrapSymbol)(keys, element);
             const line = weak_map_1.JSX_TO_STATE.get(element);
             if (!element || !line || !symbol) {
                 wrapped.push(element);
@@ -139,7 +138,7 @@ const BlockView = props => {
             const nodes = [element];
             for (let k = i + 1; k < len; ++k) {
                 const next = elements[k];
-                const nextSymbol = (0, wrapper_1.getWrapSymbol)(keys, next);
+                const nextSymbol = (0, wrapper_node_1.getWrapSymbol)(keys, next);
                 if (!next || !nextSymbol || nextSymbol !== symbol) {
                     // 回退到上一个值, 以便下次循环时重新检查
                     i = k - 1;
@@ -166,7 +165,7 @@ const BlockView = props => {
         }
         return wrapped;
     }, [editor, elements]);
-    return ((0, jsx_runtime_1.jsxs)("div", { [core_1.BLOCK_KEY]: true, [core_1.BLOCK_ID_KEY]: state.key, ref: setModel, children: [props.placeholder && lines.length === 1 && (0, is_1.isStrictEmptyLine)(lines[0]) && ((0, jsx_runtime_1.jsx)("div", { [core_1.PLACEHOLDER_KEY]: true, style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { [core_1.BLOCK_KEY]: true, [core_1.BLOCK_ID_KEY]: state.key, ref: setModel, children: [props.placeholder && lines.length === 1 && (0, core_1.isEmptyLine)(lines[0], true) && ((0, jsx_runtime_1.jsx)("div", { [core_1.PLACEHOLDER_KEY]: true, style: {
                     position: "absolute",
                     opacity: "0.3",
                     userSelect: "none",

package/dist/lib/model/leaf.js

@@ -35,11 +35,17 @@ const weak_map_1 = require("../utils/weak-map");
  */
 const LeafView = props => {
     const { editor, leafState } = props;
+    /**
+     * 设置叶子 DOM 节点
+     */
     const setModel = (ref) => {
         if (ref) {
             editor.model.setLeafModel(ref, leafState);
         }
     };
+    /**
+     * 处理叶子节点的渲染
+     */
     const runtime = (0, react_1.useMemo)(() => {
         const text = leafState.getText();
         const context = {

package/dist/lib/model/line.js

@@ -31,8 +31,9 @@ const utils_1 = require("@block-kit/utils");
 const hooks_1 = require("@block-kit/utils/dist/es/hooks");
 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 wrapper_1 = require("../utils/wrapper");
+const wrapper_node_1 = require("../utils/wrapper-node");
 const eol_1 = require("./eol");
 const leaf_1 = require("./leaf");
 /**
@@ -56,22 +57,10 @@ const LineView = props => {
     (0, hooks_1.useUpdateLayoutEffect)(() => {
         const leaves = lineState.getLeaves();
         for (const leaf of leaves) {
-            const dom = weak_map_1.LEAF_TO_TEXT.get(leaf);
-            if (!dom)
-                continue;
-            const text = leaf.getText();
             // 避免 React 非受控与 IME 造成的 DOM 内容问题
-            if (text === dom.textContent)
-                continue;
-            editor.logger.debug("Correct Text Node", dom);
-            const nodes = dom.childNodes;
-            for (let i = 1; i < nodes.length; ++i) {
-                const node = nodes[i];
-                node && node.remove();
-            }
-            if ((0, utils_1.isDOMText)(dom.firstChild)) {
-                dom.firstChild.nodeValue = text;
-            }
+            (0, dirty_dom_1.updateDirtyLeaf)(editor, leaf);
+            const dom = weak_map_1.LEAF_TO_TEXT.get(leaf);
+            dom && (0, dirty_dom_1.updateDirtyText)(dom, leaf.getText());
         }
     }, [lineState]);
     /**
@@ -114,7 +103,7 @@ const LineView = props => {
         return nodes;
     }, [editor, lineState]);
     /**
-     * 将行内节点包装组合 O(N)
+     * 将行内叶子节点包装组合 O(N)
      */
     const children = (0, react_1.useMemo)(() => {
         const wrapped = [];
@@ -125,7 +114,7 @@ const LineView = props => {
         const len = elements.length;
         for (let i = 0; i < len; ++i) {
             const element = elements[i];
-            const symbol = (0, wrapper_1.getWrapSymbol)(keys, element);
+            const symbol = (0, wrapper_node_1.getWrapSymbol)(keys, element);
             const leaf = weak_map_1.JSX_TO_STATE.get(element);
             if (!element || !leaf || !symbol) {
                 wrapped.push(element);
@@ -135,7 +124,7 @@ const LineView = props => {
             const nodes = [element];
             for (let k = i + 1; k < len; ++k) {
                 const next = elements[k];
-                const nextSymbol = (0, wrapper_1.getWrapSymbol)(keys, next);
+                const nextSymbol = (0, wrapper_node_1.getWrapSymbol)(keys, next);
                 if (!next || !nextSymbol || nextSymbol !== symbol) {
                     // 回退到上一个值, 以便下次循环时重新检查
                     i = k - 1;

package/dist/lib/model/portal.js

@@ -26,10 +26,10 @@ 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 mount_dom_1 = require("../utils/mount-dom");
 const PortalView = props => {
     const [portals, setPortals] = (0, react_1.useState)({});
-    dom_1.EDITOR_TO_PORTAL.set(props.editor, setPortals);
+    mount_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/isolate.d.ts

@@ -6,7 +6,7 @@ export type IsolateProps = PropsWithChildren<{
 }>;
 /**
  * 独立节点嵌入 HOC
- * - 独立区域 完全隔离所有事件
+ * - 独立区域 完全隔离相关事件
  * @param props
  */
 export declare const Isolate: FC<IsolateProps>;

package/dist/lib/preset/isolate.js

@@ -2,13 +2,50 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Isolate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const event_1 = require("../utils/event");
+const core_1 = require("@block-kit/core");
+const utils_1 = require("@block-kit/utils");
+const react_1 = require("react");
 /**
  * 独立节点嵌入 HOC
- * - 独立区域 完全隔离所有事件
+ * - 独立区域 完全隔离相关事件
  * @param props
  */
 const Isolate = props => {
-    return ((0, jsx_runtime_1.jsx)("span", { className: props.className, style: Object.assign({ userSelect: "none" }, props.style), contentEditable: false, onMouseDown: event_1.preventReactEvent, onCopy: event_1.preventReactEvent, children: props.children }));
+    const [ref, setRef] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const el = ref;
+        if (!el)
+            return void 0;
+        const { BEFORE_INPUT, MOUSE_DOWN, COPY, KEY_DOWN, PASTE, CUT, INPUT, FOCUS, BLUR, CLICK, COMPOSITION_END, COMPOSITION_START, COMPOSITION_UPDATE, } = core_1.EDITOR_EVENT;
+        el.addEventListener(CLICK, utils_1.stopNativeEvent);
+        el.addEventListener(MOUSE_DOWN, utils_1.stopNativeEvent);
+        el.addEventListener(CUT, utils_1.stopNativeEvent);
+        el.addEventListener(COPY, utils_1.stopNativeEvent);
+        el.addEventListener(PASTE, utils_1.stopNativeEvent);
+        el.addEventListener(FOCUS, utils_1.stopNativeEvent);
+        el.addEventListener(BLUR, utils_1.stopNativeEvent);
+        el.addEventListener(KEY_DOWN, utils_1.stopNativeEvent);
+        el.addEventListener(INPUT, utils_1.stopNativeEvent);
+        el.addEventListener(BEFORE_INPUT, utils_1.stopNativeEvent);
+        el.addEventListener(COMPOSITION_START, utils_1.stopNativeEvent);
+        el.addEventListener(COMPOSITION_UPDATE, utils_1.stopNativeEvent);
+        el.addEventListener(COMPOSITION_END, utils_1.stopNativeEvent);
+        return () => {
+            el.removeEventListener(CLICK, utils_1.stopNativeEvent);
+            el.removeEventListener(MOUSE_DOWN, utils_1.stopNativeEvent);
+            el.removeEventListener(CUT, utils_1.stopNativeEvent);
+            el.removeEventListener(COPY, utils_1.stopNativeEvent);
+            el.removeEventListener(PASTE, utils_1.stopNativeEvent);
+            el.removeEventListener(FOCUS, utils_1.stopNativeEvent);
+            el.removeEventListener(BLUR, utils_1.stopNativeEvent);
+            el.removeEventListener(KEY_DOWN, utils_1.stopNativeEvent);
+            el.removeEventListener(INPUT, utils_1.stopNativeEvent);
+            el.removeEventListener(BEFORE_INPUT, utils_1.stopNativeEvent);
+            el.removeEventListener(COMPOSITION_START, utils_1.stopNativeEvent);
+            el.removeEventListener(COMPOSITION_UPDATE, utils_1.stopNativeEvent);
+            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 }));
 };
 exports.Isolate = Isolate;

package/dist/lib/preset/text.js

@@ -3,7 +3,7 @@ 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 utils_1 = require("@block-kit/utils");
+const dirty_dom_1 = require("../utils/dirty-dom");
 /**
  * 文本节点
  * @param props
@@ -13,19 +13,7 @@ const Text = props => {
         // 处理外部引用的 ref
         props.onRef && props.onRef(dom);
         // COMPAT: 避免 React 非受控与 IME 造成的 DOM 内容问题
-        if (!dom || props.children === dom.textContent)
-            return void 0;
-        const nodes = dom.childNodes;
-        // If the text content is inconsistent due to the modification of the input
-        // it needs to be corrected
-        for (let i = 1; i < nodes.length; ++i) {
-            const node = nodes[i];
-            node && node.remove();
-        }
-        // Guaranteed to have only one text child
-        if ((0, utils_1.isDOMText)(dom.firstChild)) {
-            dom.firstChild.nodeValue = props.children;
-        }
+        dom && (0, dirty_dom_1.updateDirtyText)(dom, props.children);
     };
     return ((0, jsx_runtime_1.jsx)("span", { ref: onRef, [core_1.LEAF_STRING]: true, children: props.children }));
 };

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

@@ -0,0 +1,14 @@
+import type { LeafState } from "@block-kit/core";
+import type { Editor } from "@block-kit/core";
+/**
+ * 纯文本节点的检查更新
+ * @param dom DOM 节点
+ * @param text 目标文本
+ */
+export declare const updateDirtyText: (dom: HTMLElement, text: string) => boolean;
+/**
+ * Leaf 节点的检查更新
+ * @param editor
+ * @param leaf
+ */
+export declare const updateDirtyLeaf: (editor: Editor, leaf: LeafState) => boolean;

package/dist/lib/utils/dirty-dom.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateDirtyLeaf = exports.updateDirtyText = void 0;
+const utils_1 = require("@block-kit/utils");
+/**
+ * 纯文本节点的检查更新
+ * @param dom DOM 节点
+ * @param text 目标文本
+ */
+const updateDirtyText = (dom, text) => {
+    if (text === dom.textContent)
+        return false;
+    const nodes = dom.childNodes;
+    // 文本节点内部仅应该存在一个文本节点, 需要移除额外节点
+    for (let i = 1; i < nodes.length; ++i) {
+        const node = nodes[i];
+        node && node.remove();
+    }
+    // 如果文本内容不一致, 则是由于输入的脏 DOM, 需要纠正内容
+    // Case1: [inline-code][caret][text] IME 会导致模型/文本差异
+    if ((0, utils_1.isDOMText)(dom.firstChild)) {
+        dom.firstChild.nodeValue = text;
+    }
+    if (process.env.NODE_ENV === "development") {
+        console.log("Correct Text Node", dom);
+    }
+    return true;
+};
+exports.updateDirtyText = updateDirtyText;
+/**
+ * Leaf 节点的检查更新
+ * @param editor
+ * @param leaf
+ */
+const updateDirtyLeaf = (editor, leaf) => {
+    const dom = editor.model.getLeafNode(leaf);
+    const nodes = dom && dom.childNodes;
+    if (!nodes || nodes.length <= 1)
+        return false;
+    // data-leaf 节点内部仅应该存在非文本节点, 文本类型单节点, 嵌入类型双节点
+    // Case1: a 标签内的 IME 输入会导致同级的额外文本节点类型插入
+    for (let i = 0; i < nodes.length; ++i) {
+        const node = nodes[i];
+        (0, utils_1.isDOMText)(node) && node.remove();
+        if (process.env.NODE_ENV === "development" && (0, utils_1.isDOMText)(node)) {
+            console.log("Remove Leaf Child", dom, node);
+        }
+    }
+    return true;
+};
+exports.updateDirtyLeaf = updateDirtyLeaf;

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

@@ -1,2 +1,6 @@
-export declare const preventNativeEvent: (e: Event) => void;
-export declare const preventReactEvent: (e: React.SyntheticEvent) => void;
+export declare const preventNativeEvent: (event: {
+    preventDefault: Event["preventDefault"];
+    stopPropagation: Event["stopPropagation"];
+    stopImmediatePropagation?: Event["stopImmediatePropagation"];
+}) => void;
+export declare const preventReactEvent: (event: React.SyntheticEvent) => void;

package/dist/lib/utils/event.js

@@ -1,12 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.preventReactEvent = exports.preventNativeEvent = void 0;
-const preventNativeEvent = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
+const preventNativeEvent = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation && event.stopImmediatePropagation();
 };
 exports.preventNativeEvent = preventNativeEvent;
-const preventReactEvent = (e) => {
-    (0, exports.preventNativeEvent)(e.nativeEvent);
+const preventReactEvent = (event) => {
+    (0, exports.preventNativeEvent)(event);
+    (0, exports.preventNativeEvent)(event.nativeEvent);
 };
 exports.preventReactEvent = preventReactEvent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@block-kit/react",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "",
   "main": "./dist/lib/index.js",
   "types": "./dist/es/index.d.ts",
@@ -28,20 +28,20 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/WindrunnerMax/BlockKit.git"
+    "url": "git+https://github.com/WindRunnerMax/BlockKit.git"
   },
-  "homepage": "https://github.com/WindrunnerMax/BlockKit",
+  "homepage": "https://github.com/WindRunnerMax/BlockKit",
   "bugs": {
-    "url": "https://github.com/WindrunnerMax/BlockKit/issues"
+    "url": "https://github.com/WindRunnerMax/BlockKit/issues"
   },
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
   },
   "dependencies": {
-    "@block-kit/core": "1.0.9",
-    "@block-kit/delta": "1.0.9",
-    "@block-kit/utils": "1.0.9"
+    "@block-kit/core": "1.0.11",
+    "@block-kit/delta": "1.0.11",
+    "@block-kit/utils": "1.0.11"
   },
   "devDependencies": {
     "@types/react": "17.0.2",

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

@@ -1,2 +0,0 @@
-import type { LineState } from "@block-kit/core";
-export declare const isStrictEmptyLine: (line: LineState) => boolean;

package/dist/es/utils/is.js

@@ -1,12 +0,0 @@
-export const isStrictEmptyLine = (line) => {
-    const leaves = line.getLeaves();
-    if (!leaves.length) {
-        return true;
-    }
-    if (leaves.length === 1 &&
-        leaves[0].eol &&
-        (!leaves[0].op.attributes || !Object.keys(leaves[0].op.attributes).length)) {
-        return true;
-    }
-    return false;
-};

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

@@ -1,2 +0,0 @@
-import type { LineState } from "@block-kit/core";
-export declare const isStrictEmptyLine: (line: LineState) => boolean;

package/dist/lib/utils/is.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isStrictEmptyLine = void 0;
-const isStrictEmptyLine = (line) => {
-    const leaves = line.getLeaves();
-    if (!leaves.length) {
-        return true;
-    }
-    if (leaves.length === 1 &&
-        leaves[0].eol &&
-        (!leaves[0].op.attributes || !Object.keys(leaves[0].op.attributes).length)) {
-        return true;
-    }
-    return false;
-};
-exports.isStrictEmptyLine = isStrictEmptyLine;