@block-kit/react 1.0.0

package/dist/lib/plugin/types/index.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import type { LeafContext, LeafState, LineContext, LineState } from "@block-kit/core";
+/**
+ * 包装行状态
+ */
+export type ReactWrapLineContext = {
+    lineState: LineState;
+    children?: React.ReactNode;
+};
+/**
+ * 包装叶子状态
+ */
+export type ReactWrapLeafContext = {
+    leafState: LeafState;
+    children?: React.ReactNode;
+};
+/**
+ * 行状态
+ */
+export interface ReactLineContext extends LineContext {
+    children?: React.ReactNode;
+}
+/**
+ * 叶子状态
+ */
+export interface ReactLeafContext extends LeafContext {
+    children?: React.ReactNode;
+}
+/**
+ * 包装类型
+ */
+export declare const WRAP_TYPE: {
+    readonly LINE: "wrapLine";
+    readonly LEAF: "wrapLeaf";
+};

package/dist/lib/plugin/types/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WRAP_TYPE = void 0;
+/**
+ * 包装类型
+ */
+exports.WRAP_TYPE = {
+    LINE: "wrapLine",
+    LEAF: "wrapLeaf",
+};

package/dist/lib/preset/block-kit.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { Editor } from "@block-kit/core";
+export declare const BlockKit: React.FC<{
+    editor: Editor;
+    readonly?: boolean;
+}>;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockKit = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 wrap_1 = require("../plugin/modules/wrap");
+const BlockKit = props => {
+    const { editor, readonly, children } = props;
+    if (editor.state.get(core_1.EDITOR_STATE.READONLY) !== readonly) {
+        editor.state.set(core_1.EDITOR_STATE.READONLY, readonly || false);
+    }
+    (0, react_1.useMemo)(() => {
+        // 希望在 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 }) }));
+};
+exports.BlockKit = BlockKit;

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

@@ -0,0 +1,16 @@
+import React from "react";
+/**
+ * 编辑节点
+ * @param props
+ */
+export declare const Editable: React.FC<{
+    /** 节点类名 */
+    className?: string;
+    /** 自动聚焦 */
+    autoFocus?: boolean;
+    /**
+     * 占位节点
+     * - 节点会脱离文档流, 需要注意 CSS 布局
+     */
+    placeholder?: React.ReactNode;
+}>;

package/dist/lib/preset/editable.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 react_1 = require("react");
+const use_editor_1 = require("../hooks/use-editor");
+const use_readonly_1 = require("../hooks/use-readonly");
+const block_1 = require("../model/block");
+/**
+ * 编辑节点
+ * @param props
+ */
+const Editable = props => {
+    const { className, autoFocus } = props;
+    const { editor } = (0, use_editor_1.useEditorStatic)();
+    const { readonly } = (0, use_readonly_1.useReadonly)();
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const el = ref.current;
+        el && editor.onMount(el);
+        return () => {
+            editor.destroy();
+        };
+    }, [editor]);
+    (0, react_1.useEffect)(() => {
+        // COMPAT: 这里有个奇怪的表现
+        // 当自动聚焦时, 必须要先更新浏览器选区再聚焦
+        // 否则会造成立即按下回车时, 光标不会跟随选区移动
+        // 无论是 Model 选区还是浏览器选区, 都已经更新但是却不移动
+        if (autoFocus) {
+            const start = new core_1.Point(0, 0);
+            editor.selection.set(new core_1.Range(start, start), true);
+            editor.selection.focus();
+        }
+    }, [autoFocus, editor.selection]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, utils_1.cs)(className, "notranslate"), [core_1.EDITOR_KEY]: true, contentEditable: !readonly, suppressContentEditableWarning: true, style: {
+            outline: "none",
+            position: "relative",
+            whiteSpace: "pre-wrap",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+        }, children: (0, jsx_runtime_1.jsx)(block_1.BlockModel, { editor: editor, state: editor.state.block, placeholder: props.placeholder }) }));
+};
+exports.Editable = Editable;

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

@@ -0,0 +1,14 @@
+import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import type { ReactLeafContext } from "../plugin/types";
+export type EmbedProps = PropsWithChildren<{
+    className?: string;
+    style?: React.CSSProperties;
+    context: ReactLeafContext;
+}>;
+/**
+ * Embed 嵌入节点 HOC
+ * - Inline Block HOC
+ * @param props
+ */
+export declare const Embed: FC<EmbedProps>;

package/dist/lib/preset/embed.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Embed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@block-kit/core");
+const core_2 = require("@block-kit/core");
+const core_3 = require("@block-kit/core");
+const react_1 = __importDefault(require("react"));
+const use_editor_1 = require("../hooks/use-editor");
+const zero_1 = require("./zero");
+/**
+ * Embed 嵌入节点 HOC
+ * - Inline Block HOC
+ * @param props
+ */
+const Embed = props => {
+    const { context } = props;
+    const { editor } = (0, use_editor_1.useEditorStatic)();
+    const leaf = context.leafState;
+    const onMouseDown = () => {
+        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);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(zero_1.ZeroSpace, { embed: true, len: leaf.length > 1 ? leaf.length : void 0 }), (0, jsx_runtime_1.jsx)("span", { className: props.className, style: Object.assign({ margin: "0 0.1px" }, props.style), contentEditable: false, [core_1.VOID_KEY]: true, onMouseDown: onMouseDown, children: props.children })] }));
+};
+exports.Embed = Embed;

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

@@ -0,0 +1,12 @@
+import type { FC, PropsWithChildren } from "react";
+import React from "react";
+export type IsolateProps = PropsWithChildren<{
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+/**
+ * 独立节点嵌入 HOC
+ * - 独立区域 完全隔离所有事件
+ * @param props
+ */
+export declare const Isolate: FC<IsolateProps>;

package/dist/lib/preset/isolate.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Isolate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const event_1 = require("../utils/event");
+/**
+ * 独立节点嵌入 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 }));
+};
+exports.Isolate = Isolate;

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

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

package/dist/lib/preset/text.js

@@ -0,0 +1,37 @@
+"use strict";
+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 react_1 = require("react");
+/**
+ * 文本节点
+ * @param props
+ */
+exports.Text = (0, react_1.forwardRef)((props, ref) => {
+    const onRef = (dom) => {
+        // 处理外部引用的 ref
+        if ((0, utils_1.isFunction)(ref)) {
+            ref(dom);
+        }
+        else if (ref) {
+            ref.current = 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;
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)("span", { ref: onRef, [core_1.LEAF_STRING]: true, children: props.children }));
+});

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

@@ -0,0 +1,14 @@
+import type { FC, PropsWithChildren } from "react";
+import React from "react";
+import type { ReactLeafContext } from "../plugin/types";
+export type VoidProps = PropsWithChildren<{
+    className?: string;
+    style?: React.CSSProperties;
+    context: ReactLeafContext;
+    tag?: "span" | "div";
+}>;
+/**
+ * 空嵌入节点 HOC
+ * @param props
+ */
+export declare const Void: FC<VoidProps>;

package/dist/lib/preset/void.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Void = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@block-kit/core");
+const core_2 = require("@block-kit/core");
+const core_3 = require("@block-kit/core");
+const react_1 = __importDefault(require("react"));
+const use_editor_1 = require("../hooks/use-editor");
+const zero_1 = require("./zero");
+/**
+ * 空嵌入节点 HOC
+ * @param props
+ */
+const Void = props => {
+    const { context, tag: Tag = "span" } = props;
+    const { editor } = (0, use_editor_1.useEditorStatic)();
+    const leaf = context.leafState;
+    const onMouseDown = () => {
+        // 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);
+    };
+    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 })] }));
+};
+exports.Void = Void;

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export type ZeroSpaceProps = {
+    /** 隐藏光标 */
+    hide?: boolean;
+    /** void-block 空节点 */
+    void?: boolean;
+    /** embed(inline-block) 嵌入节点 */
+    embed?: boolean;
+    /** 行末尾占位 */
+    enter?: boolean;
+    /** 空节点占位长度 */
+    len?: number;
+};
+/**
+ * 零宽字符组件
+ * - void hide => 独占一行的空节点, 例如 Image
+ * - embed => 嵌入节点, 例如 Mention
+ * - enter => 行末尾占位, 保留于 EOLView
+ * - len => 空节点占位长度, 配合 Void/Embed
+ * @param props
+ * @param ref
+ */
+export declare const ZeroSpace: import("react").ForwardRefExoticComponent<ZeroSpaceProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/lib/preset/zero.js

@@ -0,0 +1,23 @@
+"use strict";
+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");
+/**
+ * 零宽字符组件
+ * - void hide => 独占一行的空节点, 例如 Image
+ * - embed => 嵌入节点, 例如 Mention
+ * - 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,
+        [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 }));
+});

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NO_CURSOR: React.CSSProperties;

package/dist/lib/utils/constant.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NO_CURSOR = void 0;
+exports.NO_CURSOR = {
+    width: 0,
+    height: 0,
+    color: "transparent",
+    position: "absolute",
+};

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

@@ -0,0 +1,2 @@
+export declare const preventNativeEvent: (e: Event) => void;
+export declare const preventReactEvent: (e: React.SyntheticEvent) => void;

package/dist/lib/utils/event.js

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

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

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

package/dist/lib/utils/is.js

@@ -0,0 +1,16 @@
+"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;

package/dist/lib/utils/weak-map.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { LeafState, LineState } from "@block-kit/core";
+/**
+ * LeafState 与 Text 节点的映射
+ * - 仅处理文本节点, 零宽字符节点暂不处理
+ */
+export declare const LEAF_TO_TEXT: WeakMap<LeafState, HTMLElement | null>;
+/**
+ * JSX.Element 与 State 的映射
+ * - 渲染时即刻加入映射, wrap 时即刻消费映射
+ */
+export declare const JSX_TO_STATE: WeakMap<JSX.Element, LineState | LeafState>;
+/**
+ * State 与 Wrapper Symbol 的映射
+ * - 主要是取得已经处理过的节点, 避免重复处理
+ */
+export declare const STATE_TO_SYMBOL: WeakMap<LineState | LeafState, string>;

package/dist/lib/utils/weak-map.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STATE_TO_SYMBOL = exports.JSX_TO_STATE = exports.LEAF_TO_TEXT = void 0;
+/**
+ * LeafState 与 Text 节点的映射
+ * - 仅处理文本节点, 零宽字符节点暂不处理
+ */
+exports.LEAF_TO_TEXT = new WeakMap();
+/**
+ * JSX.Element 与 State 的映射
+ * - 渲染时即刻加入映射, wrap 时即刻消费映射
+ */
+exports.JSX_TO_STATE = new WeakMap();
+/**
+ * State 与 Wrapper Symbol 的映射
+ * - 主要是取得已经处理过的节点, 避免重复处理
+ */
+exports.STATE_TO_SYMBOL = new WeakMap();

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * 根据属性获取唯一标识值
+ * @param keys
+ * @param element
+ */
+export declare const getWrapSymbol: (keys: string[], el: JSX.Element | undefined) => string | null;

package/dist/lib/utils/wrapper.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getWrapSymbol = void 0;
+const weak_map_1 = require("./weak-map");
+/**
+ * 根据属性获取唯一标识值
+ * @param keys
+ * @param element
+ */
+const getWrapSymbol = (keys, el) => {
+    if (!el)
+        return null;
+    const state = weak_map_1.JSX_TO_STATE.get(el);
+    const cache = state && weak_map_1.STATE_TO_SYMBOL.get(state);
+    if (cache || !state)
+        return cache || null;
+    const attrs = state.op.attributes;
+    if (!attrs || !Object.keys(attrs).length || !keys.length) {
+        return null;
+    }
+    const suite = [];
+    for (const key of keys) {
+        attrs[key] && suite.push(`${key}${attrs[key]}`);
+    }
+    const symbol = suite.join("");
+    weak_map_1.STATE_TO_SYMBOL.set(state, symbol);
+    return symbol;
+};
+exports.getWrapSymbol = getWrapSymbol;

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@block-kit/react",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./dist/lib/index.js",
+  "types": "./dist/es/index.d.ts",
+  "module": "./dist/es/index.js",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.less"
+  ],
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && tsc -p tsconfig.lib.json",
+    "test": "",
+    "lint:ts": "tsc -p tsconfig.build.json --noEmit",
+    "lint:circular": "madge --extensions js --circular ./dist"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16"
+  },
+  "dependencies": {
+    "@block-kit/core": "1.0.0",
+    "@block-kit/delta": "1.0.0",
+    "@block-kit/utils": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "17.0.2",
+    "@types/react-dom": "17.0.2"
+  }
+}