@kaitify/react 0.0.1-beta.3 → 0.0.1-beta.5

package/docs/changelog.md

@@ -5,6 +5,16 @@ title: 更新日志
 
 # 更新日志
 
+## v0.0.1-beta.5 <Badge type="tip" text='2026.02.09' />
+
+- 更新 `@kaitify/core` 的依赖版本
+- `Wrapper` 组件新增 `onRedressSelection` 属性
+
+## v0.0.1-beta.4 <Badge type="tip" text='2026.02.04' />
+
+- 更新 `@kaitify/core` 的依赖版本
+- 升级依赖的less版本
+
 ## v0.0.1-beta.3 <Badge type="tip" text='2025.10.30' />
 
 - kaitify-react 的第一个发布版本

package/docs/guide/install.md

@@ -6,7 +6,7 @@ title: 安装
 
 ## 下载 kaitify-react 本地到使用
 
-- 下载地址：[kaitify-react](https://registry.npmmirror.com/@kaitify/react/download/@kaitify/react-0.0.1-beta.3.tgz)
+- 下载地址：[kaitify-react](https://registry.npmmirror.com/@kaitify/react/download/@kaitify/react-0.0.1-beta.5.tgz)
 - 下载完成后最终解压得到一个 package 文件夹，进入 package 文件夹后，将 package 目录下的整个 lib 目录拷贝到你的项目下
 - 在 html 页面中引入 js
 
@@ -28,7 +28,7 @@ title: 安装
 
 ```html
 <!-- 引入固定版本的kaitify -->
-<script src="https://unpkg.com/@kaitify/react@0.0.1-beta.3/lib/kaitify-react.umd.js"></script>
+<script src="https://unpkg.com/@kaitify/react@0.0.1-beta.5/lib/kaitify-react.umd.js"></script>
 <!-- 始终引入最新的kaitify -->
 <script src="https://unpkg.com/@kaitify/react/lib/kaitify-react.umd.js"></script>
 ```
@@ -50,21 +50,21 @@ title: 安装
 npm install @kaitify/react
 
 # 安装指定版本
-npm install @kaitify/react@0.0.1-beta.3
+npm install @kaitify/react@0.0.1-beta.5
 ```
 
 ```bash [yarn]
 yarn install @kaitify/react
 
 # 安装指定版本
-yarn install @kaitify/react@0.0.1-beta.3
+yarn install @kaitify/react@0.0.1-beta.5
 ```
 
 ```bash [pnpm]
 pnpm install @kaitify/react
 
 # 安装指定版本
-pnpm install @kaitify/react@0.0.1-beta.3
+pnpm install @kaitify/react@0.0.1-beta.5
 ```
 
 :::

package/docs/guide/wrapper.md

@@ -216,6 +216,10 @@ export default function App() {
 
 编辑器 `updateView` 执行时，通过比对新旧节点数组获取需要格式化的节点，在这些节点被格式化前，触发此方法，回调参数即当前需要被格式化的节点，该方法返回一个节点，返回的节点将会被格式化，如果你不需要任何特殊处理，返回入参提供的节点即可
 
+##### onRedressSelection <Badge type="danger" text="(this: Editor) => void" />
+
+编辑器进行光标纠正时触发，在这里可以修改虚拟光标的位置
+
 ##### onSelectionUpdate <Badge type="danger" text="(this: Editor, selection: Selection) => void" />
 
 编辑器光标发生变化触发的事件，回调参数为编辑器的 `Selection` 对象实例

package/examples/App.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react'
-import { Wrapper as EditorWrapper, BoldMenu, AlignLeftMenu, AlignCenterMenu, AlignRightMenu, AlignJustifyMenu, AttachmentMenu, BackColorMenu, BlockquoteMenu, CodeMenu, CodeBlockMenu, ColorMenu, FontFamilyMenu, FontSizeMenu, HeadingMenu, RedoMenu, UndoMenu, HorizontalMenu, ImageMenu, IncreaseIndentMenu, DecreaseIndentMenu, ItalicMenu, LineHeightMenu, LinkMenu, OrderedListMenu, UnorderedListMenu, MathMenu, StrikethroughMenu, SubscriptMenu, SuperscriptMenu, TableMenu, UnderlineMenu, VideoMenu, TaskMenu, ClearFormatMenu, Divider, FullScreenMenu, EmojiMenu, Editor, StateType, KNodeMatchOptionType, Bubble, VideoControlsMenu, VideoMutedMenu, VideoLoopMenu, WrapUpMenu, CodeBlockLanguagesMenu, WrapDownMenu, LinkUnsetMenu, TableAddRowMenu, TableDeleteRowMenu, TableAddColumnMenu, TableDeleteColumnMenu, TableMergeCellMenu, TableUnsetMenu } from '../src/index'
+import { Wrapper as EditorWrapper, BoldMenu, AlignLeftMenu, AlignCenterMenu, AlignRightMenu, AlignJustifyMenu, AttachmentMenu, BackColorMenu, BlockquoteMenu, CodeMenu, CodeBlockMenu, ColorMenu, FontFamilyMenu, FontSizeMenu, HeadingMenu, RedoMenu, UndoMenu, HorizontalMenu, ImageMenu, IncreaseIndentMenu, DecreaseIndentMenu, ItalicMenu, LineHeightMenu, LinkMenu, OrderedListMenu, UnorderedListMenu, MathMenu, StrikethroughMenu, SubscriptMenu, SuperscriptMenu, TableMenu, UnderlineMenu, VideoMenu, TaskMenu, ClearFormatMenu, Divider, FullScreenMenu, EmojiMenu, Editor, StateType, KNodeMatchOptionType, Bubble, VideoControlsMenu, VideoMutedMenu, VideoLoopMenu, WrapUpMenu, CodeBlockLanguagesMenu, WrapDownMenu, LinkUnsetMenu, TableAddRowMenu, TableDeleteRowMenu, TableAddColumnMenu, TableDeleteColumnMenu, TableMergeCellMenu, TableUnsetMenu, Menu } from '../src/index'
 import './style.less'
 
 export default function App() {
@@ -38,15 +38,7 @@ export default function App() {
     <>
       <div style={{ padding: 10 }}>
         <div style={{ padding: 5 }}>
-          <button onClick={() => setDark(!dark)}>深色/浅色主题</button>
           <button onClick={() => setShow(!show)}>显示/隐藏编辑器</button>
-          <button
-            onClick={() => {
-              console.log(state?.editor.value?.getHTML())
-            }}
-          >
-            获取HTML
-          </button>
         </div>
         <div id='area'>
           <div id='before' style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'wrap', height: 100, background: dark ? '#1b1b1f' : '#fff' }}></div>
@@ -64,8 +56,18 @@ export default function App() {
               onChange={setContent}
               onCreated={onCreated}
               appendBeforeTo={'#before'}
-              before={
+              before={state => (
                 <>
+                  <Menu
+                    onOperate={() => {
+                      console.log(state?.editor.value?.getHTML())
+                    }}
+                  >
+                    获取HTML
+                  </Menu>
+                  <Menu onOperate={() => setDark(!dark)} active={state.editor.value?.isDark()}>
+                    深色主题
+                  </Menu>
                   <UndoMenu />
                   <RedoMenu />
                   <Divider />
@@ -109,7 +111,7 @@ export default function App() {
                   <TableMenu />
                   <FullScreenMenu target='#area' zIndex={2} />
                 </>
-              }
+              )}
               after={<>总字数：{state?.editor.value?.getContent().length ?? 0}</>}
             >
               <Bubble visible={shouldBubble.visible} match={shouldBubble.match} style={{ padding: 5 }}>

package/lib/editor/wrapper/props.d.ts

@@ -149,6 +149,10 @@ export type WrapperPropsType = {
      * 编辑器updateView执行时，通过比对新旧节点数组获取需要格式化的节点，在这些节点被格式化前，触发此方法，回调参数即当前需要被格式化的节点，该方法返回一个节点，返回的节点将会被格式化，如果你不需要任何特殊处理，返回入参提供的节点即可
      */
     onBeforePatchNodeToFormat?: EditorConfigureOptionType['onBeforePatchNodeToFormat'];
+    /**
+     * 编辑器进行光标纠正时触发，在这里可以修改虚拟光标的位置
+     */
+    onRedressSelection?: EditorConfigureOptionType['onRedressSelection'];
     /**
      * 编辑器光标发生变化触发的事件
      */

package/lib/kaitify-react.es.js

@@ -2530,6 +2530,13 @@ const registerExtension = function(extension) {
       return node;
     };
   }
+  if (extension.onRedressSelection) {
+    const fn2 = this.onRedressSelection;
+    this.onRedressSelection = () => {
+      extension.onRedressSelection.apply(this);
+      if (fn2) fn2.apply(this);
+    };
+  }
   if (extension.addCommands) {
     const commands = extension.addCommands.apply(this);
     this.commands = { ...this.commands, ...commands };
@@ -2606,21 +2613,20 @@ const updateSelection$1 = function() {
 };
 const redressSelection = function() {
   if (!this.selection.focused()) {
-    return false;
+    return;
   }
-  let startNode = this.selection.start.node;
-  let endNode = this.selection.end.node;
-  let startOffset = this.selection.start.offset;
-  let endOffset = this.selection.end.offset;
+  const startNode = this.selection.start.node;
+  const endNode = this.selection.end.node;
+  const startOffset = this.selection.start.offset;
+  const endOffset = this.selection.end.offset;
   const startNextNode = this.getNextSelectionNode(startNode);
   if (startNextNode && startNextNode.isEqual(endNode) && startOffset == (startNode.isText() ? startNode.textContent.length : 1) && endOffset == 0) {
-    endNode = startNode;
-    endOffset = startOffset;
-    this.selection.end.node = endNode;
-    this.selection.end.offset = endOffset;
-    return true;
+    this.selection.end.node = startNode;
+    this.selection.end.offset = startOffset;
+  }
+  if (this.onRedressSelection) {
+    this.onRedressSelection.apply(this);
   }
-  return false;
 };
 const checkNodes = function() {
   const nodes = this.stackNodes.filter((item) => {
@@ -3155,11 +3161,7 @@ const onSelectionChange = async function() {
   if (!hasUpdate) {
     return;
   }
-  const hasRedress = redressSelection.apply(this);
-  if (hasRedress) {
-    await this.updateRealSelection();
-    return;
-  }
+  redressSelection.apply(this);
   this.history.updateSelection(this.selection);
   if (typeof this.onSelectionUpdate == "function") {
     this.onSelectionUpdate.apply(this, [this.selection]);
@@ -3307,6 +3309,7 @@ class Extension {
     __publicField(this, "onAfterUpdateView");
     __publicField(this, "onDetachMentBlockFromParent");
     __publicField(this, "onBeforePatchNodeToFormat");
+    __publicField(this, "onRedressSelection");
     __publicField(this, "addCommands");
     this.name = name;
   }
@@ -3332,6 +3335,7 @@ class Extension {
     if (options.onAfterUpdateView) extension.onAfterUpdateView = options.onAfterUpdateView;
     if (options.onDetachMentBlockFromParent) extension.onDetachMentBlockFromParent = options.onDetachMentBlockFromParent;
     if (options.onBeforePatchNodeToFormat) extension.onBeforePatchNodeToFormat = options.onBeforePatchNodeToFormat;
+    if (options.onRedressSelection) extension.onRedressSelection = options.onRedressSelection;
     if (options.addCommands) extension.addCommands = options.addCommands;
     return extension;
   }
@@ -36115,6 +36119,20 @@ const TableExtension = () => Extension.create({
       }
     }
   },
+  onRedressSelection() {
+    if (this.selection.focused()) {
+      const startNode = this.selection.start.node;
+      const endNode = this.selection.end.node;
+      if (!!startNode.getMatchNode({ tag: "td" }) && !!endNode.getMatchNode({ tag: "td" })) {
+        const startOffset = this.selection.start.offset;
+        const startNextNode = this.getNextSelectionNode(startNode);
+        if (startNextNode && startNextNode.isEqual(endNode) && startOffset == (startNode.isText() ? startNode.textContent.length : 1)) {
+          this.selection.start.node = endNode;
+          this.selection.start.offset = 0;
+        }
+      }
+    }
+  },
   addCommands() {
     const getTable = () => {
       return this.getMatchNodeBySelection({
@@ -36867,6 +36885,7 @@ class Editor {
     __publicField(this, "onAfterUpdateView");
     __publicField(this, "onDetachMentBlockFromParent");
     __publicField(this, "onBeforePatchNodeToFormat");
+    __publicField(this, "onRedressSelection");
     __publicField(this, "guid", createGuid());
     __publicField(this, "selection", new Selection());
     __publicField(this, "history", new History());
@@ -37088,7 +37107,7 @@ class Editor {
       config2.children = [];
     }
     let node = KNode.create(config2);
-    if (!closed) {
+    if (!node.isClosed()) {
       Array.from(dom.childNodes).forEach((child) => {
         if (child.nodeType == 1 || child.nodeType == 3) {
           const childNode = this.domParseNode(child);
@@ -38354,6 +38373,7 @@ class Editor {
     if (options.onAfterUpdateView) editor.onAfterUpdateView = options.onAfterUpdateView;
     if (options.onDetachMentBlockFromParent) editor.onDetachMentBlockFromParent = options.onDetachMentBlockFromParent;
     if (options.onBeforePatchNodeToFormat) editor.onBeforePatchNodeToFormat = options.onBeforePatchNodeToFormat;
+    if (options.onRedressSelection) editor.onRedressSelection = options.onRedressSelection;
     editor.extensions.forEach((item) => registerExtension.apply(editor, [item]));
     editor.setEditable(typeof options.editable == "boolean" ? options.editable : true);
     await editor.review(options.value || "");
@@ -40211,6 +40231,7 @@ const Wrapper = forwardRef((props, ref) => {
       onPasteFile: props.onPasteFile,
       onDetachMentBlockFromParent: props.onDetachMentBlockFromParent,
       onBeforePatchNodeToFormat: props.onBeforePatchNodeToFormat,
+      onRedressSelection: props.onRedressSelection,
       onInsertParagraph: props.onInsertParagraph,
       onDeleteComplete: props.onDeleteComplete,
       onKeydown: props.onKeydown,