@block-kit/react 1.0.20 → 1.0.22

package/dist/es/model/block.js

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

package/dist/es/preset/editable.js

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

package/dist/lib/model/block.js

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

package/dist/lib/preset/editable.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@block-kit/react",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "",
   "main": "./dist/lib/index.js",
   "types": "./dist/es/index.d.ts",
@@ -39,9 +39,9 @@
     "react-dom": ">=17"
   },
   "dependencies": {
-    "@block-kit/core": "1.0.20",
-    "@block-kit/delta": "1.0.20",
-    "@block-kit/utils": "1.0.20"
+    "@block-kit/core": "1.0.22",
+    "@block-kit/delta": "1.0.22",
+    "@block-kit/utils": "1.0.22"
   },
   "devDependencies": {
     "@babel/core": "7.20.12",

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

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

package/dist/es/model/effect.js

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

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

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

package/dist/lib/model/effect.js

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