@block-kit/react 1.0.0

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

@@ -0,0 +1,21 @@
+import type { Editor } from "@block-kit/core";
+import React from "react";
+export declare const BlockKitContext: React.Context<Editor | null>;
+export declare const useEditorStatic: () => {
+    editor: Editor;
+    ref: import("@block-kit/core").Ref;
+    rect: import("@block-kit/core/dist/es/rect").Rect;
+    state: import("@block-kit/core").EditorState;
+    event: import("@block-kit/core").Event;
+    input: import("@block-kit/core").Input;
+    model: import("@block-kit/core").Model;
+    plugin: import("@block-kit/core").Plugin;
+    schema: import("@block-kit/core").Schema;
+    logger: import("@block-kit/core").Logger;
+    collect: import("@block-kit/core").Collect;
+    command: import("@block-kit/core").Command;
+    history: import("@block-kit/core").History;
+    perform: import("@block-kit/core").Perform;
+    clipboard: import("@block-kit/core").Clipboard;
+    selection: import("@block-kit/core").Selection;
+};

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

@@ -0,0 +1,26 @@
+import React, { createContext } from "react";
+export const BlockKitContext = createContext(null);
+export const useEditorStatic = () => {
+    const editor = React.useContext(BlockKitContext);
+    if (!editor) {
+        throw new Error("UseEditor must be used within a EditorContext");
+    }
+    return {
+        editor,
+        ref: editor.ref,
+        rect: editor.rect,
+        state: editor.state,
+        event: editor.event,
+        input: editor.input,
+        model: editor.model,
+        plugin: editor.plugin,
+        schema: editor.schema,
+        logger: editor.logger,
+        collect: editor.collect,
+        command: editor.command,
+        history: editor.history,
+        perform: editor.perform,
+        clipboard: editor.clipboard,
+        selection: editor.selection,
+    };
+};

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

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const ReadonlyContext: React.Context<boolean>;
+export declare const useReadonly: () => {
+    readonly: boolean;
+};

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

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

package/dist/es/index.d.ts

@@ -0,0 +1,18 @@
+export { BlockKitContext, useEditorStatic } from "./hooks/use-editor";
+export { ReadonlyContext, useReadonly } from "./hooks/use-readonly";
+export { BlockModel } from "./model/block";
+export { EOLModel } from "./model/eol";
+export { LeafModel } from "./model/leaf";
+export { LineModel } from "./model/line";
+export { EditorPlugin } from "./plugin/index";
+export { Priority } from "./plugin/modules/priority";
+export { InjectWrapKeys } from "./plugin/modules/wrap";
+export type { ReactLeafContext, ReactLineContext, ReactWrapLeafContext, ReactWrapLineContext, } from "./plugin/types";
+export { BlockKit } from "./preset/block-kit";
+export { Editable } from "./preset/editable";
+export { Embed } from "./preset/embed";
+export { Isolate } from "./preset/isolate";
+export { Text } from "./preset/text";
+export { Void } from "./preset/void";
+export { ZeroSpace } from "./preset/zero";
+export { preventNativeEvent, preventReactEvent } from "./utils/event";

package/dist/es/index.js

@@ -0,0 +1,17 @@
+export { BlockKitContext, useEditorStatic } from "./hooks/use-editor";
+export { ReadonlyContext, useReadonly } from "./hooks/use-readonly";
+export { BlockModel } from "./model/block";
+export { EOLModel } from "./model/eol";
+export { LeafModel } from "./model/leaf";
+export { LineModel } from "./model/line";
+export { EditorPlugin } from "./plugin/index";
+export { Priority } from "./plugin/modules/priority";
+export { InjectWrapKeys } from "./plugin/modules/wrap";
+export { BlockKit } from "./preset/block-kit";
+export { Editable } from "./preset/editable";
+export { Embed } from "./preset/embed";
+export { Isolate } from "./preset/isolate";
+export { Text } from "./preset/text";
+export { Void } from "./preset/void";
+export { ZeroSpace } from "./preset/zero";
+export { preventNativeEvent, preventReactEvent } from "./utils/event";

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

@@ -0,0 +1,7 @@
+import type { BlockState, Editor } from "@block-kit/core";
+import React from "react";
+export declare const BlockModel: React.NamedExoticComponent<{
+    editor: Editor;
+    state: BlockState;
+    placeholder?: React.ReactNode;
+}>;

package/dist/es/model/block.js

@@ -0,0 +1,142 @@
+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 { 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 { LineModel } from "./line";
+/**
+ * Block Model
+ * @param props
+ */
+const BlockView = props => {
+    const { editor, state } = props;
+    const flushing = useRef(false);
+    const [lines, setLines] = useState(() => state.getLines());
+    /**
+     * 设置行 DOM 节点
+     */
+    const setModel = (ref) => {
+        if (ref) {
+            editor.model.setBlockModel(ref, state);
+        }
+    };
+    /**
+     * 数据同步变更, 异步批量绘制变更
+     */
+    const onContentChange = useMemoFn(() => {
+        // 举个例子: 同步等待刷新的队列 => ||||||||
+        // 进入更新行为后, 异步行为等待, 同步的队列由于 !flushing 全部被守卫
+        // 主线程执行完毕后, 异步队列开始执行, 此时拿到的是最新数据, 以此批量重新渲染
+        if (flushing.current)
+            return void 0;
+        flushing.current = true;
+        Promise.resolve().then(() => {
+            flushing.current = false;
+            setLines(state.getLines());
+            editor.state.set(EDITOR_STATE.PAINTING, true);
+        });
+    });
+    /**
+     * 监听内容变更事件, 更新当前块视图
+     */
+    useLayoutEffect(() => {
+        editor.event.on(EDITOR_EVENT.CONTENT_CHANGE, onContentChange);
+        return () => {
+            editor.event.off(EDITOR_EVENT.CONTENT_CHANGE, onContentChange);
+        };
+    }, [editor.event, onContentChange]);
+    /**
+     * 视图更新需要重新设置选区 无依赖数组
+     */
+    useLayoutEffect(() => {
+        const selection = editor.selection.get();
+        if (!editor.state.get(EDITOR_STATE.COMPOSING) &&
+            editor.state.get(EDITOR_STATE.FOCUS) &&
+            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, {});
+        });
+    });
+    /**
+     * 处理行节点
+     */
+    const elements = useMemo(() => {
+        return lines.map((line, index) => {
+            const node = (_jsx(LineModel, { editor: editor, lineState: line, index: index }, line.key));
+            JSX_TO_STATE.set(node, line);
+            return node;
+        });
+    }, [editor, lines]);
+    /**
+     * 将行包装组合 O(N)
+     */
+    const children = useMemo(() => {
+        const wrapped = [];
+        const keys = EDITOR_TO_WRAP_LINE_KEYS.get(editor);
+        const plugins = EDITOR_TO_WRAP_LINE_PLUGINS.get(editor);
+        if (!keys || !plugins)
+            return elements;
+        const len = elements.length;
+        for (let i = 0; i < len; ++i) {
+            const element = elements[i];
+            const symbol = getWrapSymbol(keys, element);
+            const line = JSX_TO_STATE.get(element);
+            if (!element || !line || !symbol) {
+                wrapped.push(element);
+                continue;
+            }
+            // 执行到此处说明需要包装相关节点(即使仅单个节点)
+            const nodes = [element];
+            for (let k = i + 1; k < len; ++k) {
+                const next = elements[k];
+                const nextSymbol = getWrapSymbol(keys, next);
+                if (!next || !nextSymbol || nextSymbol !== symbol) {
+                    // 回退到上一个值, 以便下次循环时重新检查
+                    i = k - 1;
+                    break;
+                }
+                nodes.push(next);
+                i = k;
+            }
+            // 通过插件渲染包装节点
+            let wrapper = nodes;
+            const op = line.op;
+            for (const plugin of plugins) {
+                // 这里的状态以首个节点为准
+                const context = {
+                    lineState: line,
+                    children: wrapper,
+                };
+                if (plugin.match(line.op.attributes || {}, op) && plugin.wrapLine) {
+                    wrapper = plugin.wrapLine(context);
+                }
+            }
+            const key = `${i - nodes.length + 1}-${i}`;
+            wrapped.push(_jsx(React.Fragment, { children: wrapper }, key));
+        }
+        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: {
+                    position: "absolute",
+                    opacity: "0.3",
+                    userSelect: "none",
+                    pointerEvents: "none",
+                }, children: props.placeholder })), children] }));
+};
+export const BlockModel = React.memo(BlockView);

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

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

package/dist/es/model/eol.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LEAF_KEY } from "@block-kit/core";
+import React from "react";
+import { ZeroSpace } from "../preset/zero";
+/**
+ * EOL Model
+ * @param props
+ */
+const EOLView = props => {
+    const { editor, leafState } = props;
+    const setModel = (ref) => {
+        if (ref) {
+            editor.model.setLeafModel(ref, leafState);
+        }
+    };
+    return (_jsx("span", { [LEAF_KEY]: true, ref: setModel, children: _jsx(ZeroSpace, { enter: true }) }));
+};
+export const EOLModel = React.memo(EOLView);

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

@@ -0,0 +1,7 @@
+import type { Editor, LeafState } from "@block-kit/core";
+import React from "react";
+export declare const LeafModel: React.NamedExoticComponent<{
+    editor: Editor;
+    index: number;
+    leafState: LeafState;
+}>;

package/dist/es/model/leaf.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LEAF_KEY, PLUGIN_TYPE } from "@block-kit/core";
+import React, { useMemo } from "react";
+import { Text } from "../preset/text";
+import { LEAF_TO_TEXT as LT } from "../utils/weak-map";
+/**
+ * Leaf Model
+ * @param props
+ */
+const LeafView = props => {
+    const { editor, leafState } = props;
+    const setModel = (ref) => {
+        if (ref) {
+            editor.model.setLeafModel(ref, leafState);
+        }
+    };
+    const runtime = useMemo(() => {
+        const text = leafState.getText();
+        const context = {
+            op: leafState.op,
+            classList: [],
+            lineState: leafState.parent,
+            leafState: leafState,
+            attributes: leafState.op.attributes,
+            style: {},
+            children: _jsx(Text, { ref: el => LT.set(leafState, el), children: text }),
+        };
+        const plugins = editor.plugin.getPriorityPlugins(PLUGIN_TYPE.RENDER_LEAF);
+        for (const plugin of plugins) {
+            if (plugin.match(context.attributes || {}, context.op)) {
+                context.children = plugin.renderLeaf(context);
+            }
+        }
+        return context;
+    }, [editor, leafState]);
+    return (_jsx("span", { [LEAF_KEY]: true, ref: setModel, className: runtime.classList.join(" "), style: runtime.style, children: runtime.children }));
+};
+export const LeafModel = React.memo(LeafView);

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

@@ -0,0 +1,7 @@
+import type { Editor, LineState } from "@block-kit/core";
+import React from "react";
+export declare const LineModel: React.NamedExoticComponent<{
+    editor: Editor;
+    index: number;
+    lineState: LineState;
+}>;

package/dist/es/model/line.js

@@ -0,0 +1,152 @@
+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 { 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 { JSX_TO_STATE, LEAF_TO_TEXT } from "../utils/weak-map";
+import { getWrapSymbol } from "../utils/wrapper";
+import { EOLModel } from "./eol";
+import { LeafModel } from "./leaf";
+/**
+ * Line Model
+ * @param props
+ */
+const LineView = props => {
+    const { editor, lineState } = props;
+    /**
+     * 设置行 DOM 节点
+     */
+    const setModel = (ref) => {
+        if (ref) {
+            editor.model.setLineModel(ref, lineState);
+        }
+    };
+    /**
+     * 首次处理会将所有 DOM 渲染, 不需要执行脏数据检查
+     * 需要 LayoutEffect 以保证 DOM -> Sel 的执行顺序
+     */
+    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;
+            }
+        }
+    }, [lineState]);
+    /**
+     * 处理行内的节点
+     */
+    const elements = useMemo(() => {
+        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);
+            JSX_TO_STATE.set(node, n);
+            return node;
+        });
+        // 空行则仅存在一个 Leaf, 此时需要渲染空的占位节点
+        if (!nodes.length && leaves[0]) {
+            const leaf = leaves[0];
+            const node = _jsx(EOLModel, { editor: editor, leafState: leaf }, EOL);
+            JSX_TO_STATE.set(node, leaf);
+            nodes.push(node);
+            return nodes;
+        }
+        // inline-void(embed) 在行未时需要预设零宽字符来放置光标
+        const eolLeaf = leaves[leaves.length - 1];
+        const lastLeaf = textLeaves[textLeaves.length - 1];
+        if (lastLeaf && eolLeaf && lastLeaf.embed) {
+            const node = _jsx(EOLModel, { editor: editor, leafState: eolLeaf }, EOL);
+            JSX_TO_STATE.set(node, eolLeaf);
+            nodes.push(node);
+            return nodes;
+        }
+        return nodes;
+    }, [editor, lineState]);
+    /**
+     * 将行内节点包装组合 O(N)
+     */
+    const children = useMemo(() => {
+        const wrapped = [];
+        const keys = EDITOR_TO_WRAP_LEAF_KEYS.get(editor);
+        const plugins = EDITOR_TO_WRAP_LEAF_PLUGINS.get(editor);
+        if (!keys || !plugins)
+            return elements;
+        const len = elements.length;
+        for (let i = 0; i < len; ++i) {
+            const element = elements[i];
+            const symbol = getWrapSymbol(keys, element);
+            const leaf = JSX_TO_STATE.get(element);
+            if (!element || !leaf || !symbol) {
+                wrapped.push(element);
+                continue;
+            }
+            // 执行到此处说明需要包装相关节点(即使仅单个节点)
+            const nodes = [element];
+            for (let k = i + 1; k < len; ++k) {
+                const next = elements[k];
+                const nextSymbol = getWrapSymbol(keys, next);
+                if (!next || !nextSymbol || nextSymbol !== symbol) {
+                    // 回退到上一个值, 以便下次循环时重新检查
+                    i = k - 1;
+                    break;
+                }
+                nodes.push(next);
+                i = k;
+            }
+            // 通过插件渲染包装节点
+            let wrapper = nodes;
+            const op = leaf.op;
+            for (const plugin of plugins) {
+                // 这里的状态以首个节点为准
+                const context = {
+                    leafState: leaf,
+                    children: wrapper,
+                };
+                if (plugin.match(leaf.op.attributes || {}, op) && plugin.wrapLeaf) {
+                    wrapper = plugin.wrapLeaf(context);
+                }
+            }
+            const key = `${i - nodes.length + 1}-${i}`;
+            wrapped.push(_jsx(React.Fragment, { children: wrapper }, key));
+        }
+        return wrapped;
+    }, [editor, elements]);
+    /**
+     * 处理行级节点的渲染
+     */
+    const runtime = useMemo(() => {
+        const context = {
+            classList: [],
+            lineState: lineState,
+            attributes: lineState.attributes,
+            style: {},
+            children,
+        };
+        const plugins = editor.plugin.getPriorityPlugins(PLUGIN_TYPE.RENDER_LINE);
+        for (const plugin of plugins) {
+            const op = Object.assign(Object.assign({}, EOL_OP), { attributes: context.attributes });
+            if (plugin.match(context.attributes, op)) {
+                context.children = plugin.renderLine(context);
+            }
+        }
+        return context;
+    }, [children, editor.plugin, lineState]);
+    return (_jsx("div", { [NODE_KEY]: true, ref: setModel, dir: "auto", className: cs(runtime.classList), style: runtime.style, children: runtime.children }));
+};
+export const LineModel = React.memo(LineView);

package/dist/es/plugin/index.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { CorePlugin } from "@block-kit/core";
+import type { ReactLeafContext, ReactLineContext, ReactWrapLeafContext, ReactWrapLineContext } from "./types";
+export declare abstract class EditorPlugin extends CorePlugin {
+    /**
+     * 渲染包装行节点
+     * - 调度优先级值越大 DOM 结构在越外层
+     */
+    wrapLine?(children: ReactWrapLineContext): React.ReactNode;
+    /**
+     * 渲染包装叶子节点
+     * - 调度优先级值越大 DOM 结构在越外层
+     */
+    wrapLeaf?(context: ReactWrapLeafContext): React.ReactNode;
+    /**
+     * 渲染行节点
+     * - 调度优先级值越大 DOM 结构在越外层
+     */
+    renderLine?(context: ReactLineContext): React.ReactNode;
+    /**
+     * 渲染块级子节点
+     * - 调度优先级值越大 DOM 结构在越外层
+     */
+    renderLeaf?(context: ReactLeafContext): React.ReactNode;
+}

package/dist/es/plugin/index.js

@@ -0,0 +1,3 @@
+import { CorePlugin } from "@block-kit/core";
+export class EditorPlugin extends CorePlugin {
+}

package/dist/es/plugin/modules/priority.d.ts

@@ -0,0 +1,13 @@
+import type { CorePlugin } from "@block-kit/core";
+/**
+ * 获取插件的优先级
+ * @param key
+ * @param plugin
+ */
+export declare const getPluginPriority: (key: string, plugin: CorePlugin) => number;
+/**
+ * 优先级定义装饰器
+ * - 兼容性实现, 非强制类型检查
+ * @param priority
+ */
+export declare function Priority<T>(priority: number): (target: T, key: string, descriptor: PropertyDescriptor) => PropertyDescriptor;

package/dist/es/plugin/modules/priority.js

@@ -0,0 +1,26 @@
+import { PRIORITY_KEY } from "@block-kit/core";
+import { DEFAULT_PRIORITY, isNumber } from "@block-kit/utils";
+/**
+ * 获取插件的优先级
+ * @param key
+ * @param plugin
+ */
+export const getPluginPriority = (key, plugin) => {
+    const priorityKey = `${PRIORITY_KEY}${key}`;
+    const priorityPlugin = plugin;
+    const priority = priorityPlugin[priorityKey];
+    return isNumber(priority) ? priority : DEFAULT_PRIORITY;
+};
+/**
+ * 优先级定义装饰器
+ * - 兼容性实现, 非强制类型检查
+ * @param priority
+ */
+export function Priority(priority) {
+    return function (target, key, descriptor) {
+        const priorityKey = `${PRIORITY_KEY}${key}`;
+        const plugin = target;
+        plugin[priorityKey] = priority;
+        return descriptor;
+    };
+}

package/dist/es/plugin/modules/wrap.d.ts

@@ -0,0 +1,26 @@
+import type { CorePlugin, Editor } from "@block-kit/core";
+import type { O, P } from "@block-kit/utils/dist/es/types";
+import type { EditorPlugin } from "../index";
+import { WRAP_TYPE } from "../types";
+export declare const EDITOR_TO_WRAP_LINE_KEYS: WeakMap<Editor, string[]>;
+export declare const EDITOR_TO_WRAP_LEAF_KEYS: WeakMap<Editor, string[]>;
+export declare const EDITOR_TO_WRAP_LINE_PLUGINS: WeakMap<Editor, EditorPlugin[]>;
+export declare const EDITOR_TO_WRAP_LEAF_PLUGINS: WeakMap<Editor, EditorPlugin[]>;
+/**
+ * 为 WrapNode 定义 Key
+ * @param ...keys
+ */
+export declare function InjectWrapKeys<T>(...keys: string[]): (target: T, key: O.Values<typeof WRAP_TYPE>, descriptor: PropertyDescriptor) => PropertyDescriptor;
+/**
+ * 获取插件的 WrapKeys
+ * @param key
+ * @param plugin
+ */
+export declare const getWrapKeys: (key: string, plugin: CorePlugin) => string[] | P.Undef;
+/**
+ * 初始化 Wrap 模式的插件
+ * - Wrap 模式的插件化在 React 层面渲染时实现
+ * - 其是渲染时调度且不存在 WrapState 的概念
+ * @param editor
+ */
+export declare const initWrapPlugins: (editor: Editor) => void;

package/dist/es/plugin/modules/wrap.js

@@ -0,0 +1,72 @@
+import { WRAP_TYPE } from "../types";
+import { getPluginPriority } from "./priority";
+export const EDITOR_TO_WRAP_LINE_KEYS = new WeakMap();
+export const EDITOR_TO_WRAP_LEAF_KEYS = new WeakMap();
+export const EDITOR_TO_WRAP_LINE_PLUGINS = new WeakMap();
+export const EDITOR_TO_WRAP_LEAF_PLUGINS = new WeakMap();
+/**
+ * 为 WrapNode 定义 Key
+ * @param ...keys
+ */
+export function InjectWrapKeys(...keys) {
+    return function (target, key, descriptor) {
+        const wrapPluginKey = `${key}Keys`;
+        const plugin = target;
+        plugin[wrapPluginKey] = keys;
+        return descriptor;
+    };
+}
+/**
+ * 获取插件的 WrapKeys
+ * @param key
+ * @param plugin
+ */
+export const getWrapKeys = (key, plugin) => {
+    const wrapPluginKey = `${key}Keys`;
+    const wrapPlugin = plugin;
+    const keys = wrapPlugin[wrapPluginKey];
+    return keys;
+};
+/**
+ * 初始化 Wrap 模式的插件
+ * - Wrap 模式的插件化在 React 层面渲染时实现
+ * - 其是渲染时调度且不存在 WrapState 的概念
+ * @param editor
+ */
+export const initWrapPlugins = (editor) => {
+    const plugins = editor.plugin.current;
+    const wrapLineKeys = [];
+    const wrapLeafKeys = [];
+    const wrapLinePlugins = [];
+    const wrapLeafPlugins = [];
+    for (const plugin of plugins) {
+        const lineKeys = getWrapKeys(WRAP_TYPE.LINE, plugin);
+        if (lineKeys) {
+            wrapLineKeys.push(...lineKeys);
+        }
+        const leafKeys = getWrapKeys(WRAP_TYPE.LEAF, plugin);
+        if (leafKeys) {
+            wrapLeafKeys.push(...leafKeys);
+        }
+        if (plugin.wrapLine) {
+            wrapLinePlugins.push(plugin);
+        }
+        if (plugin.wrapLeaf) {
+            wrapLeafPlugins.push(plugin);
+        }
+    }
+    wrapLinePlugins.sort((a, b) => {
+        const priorityA = getPluginPriority(WRAP_TYPE.LINE, a);
+        const priorityB = getPluginPriority(WRAP_TYPE.LINE, b);
+        return priorityA - priorityB;
+    });
+    wrapLeafPlugins.sort((a, b) => {
+        const priorityA = getPluginPriority(WRAP_TYPE.LEAF, a);
+        const priorityB = getPluginPriority(WRAP_TYPE.LEAF, b);
+        return priorityA - priorityB;
+    });
+    wrapLineKeys.length && EDITOR_TO_WRAP_LINE_KEYS.set(editor, wrapLineKeys);
+    wrapLeafKeys.length && EDITOR_TO_WRAP_LEAF_KEYS.set(editor, wrapLeafKeys);
+    wrapLinePlugins.length && EDITOR_TO_WRAP_LINE_PLUGINS.set(editor, wrapLinePlugins);
+    wrapLeafPlugins.length && EDITOR_TO_WRAP_LEAF_PLUGINS.set(editor, wrapLeafPlugins);
+};