@kaitify/react 0.0.1-beta.2 → 0.0.1-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/docs/changelog.md CHANGED
@@ -5,6 +5,11 @@ title: 更新日志
5
5
 
6
6
  # 更新日志
7
7
 
8
- ## v0.0.1-beta.2 <Badge type="tip" text='2025.10.30' />
8
+ ## v0.0.1-beta.4 <Badge type="tip" text='2026.02.04' />
9
+
10
+ - 更新 `@kaitify/core` 的依赖版本
11
+ - 升级依赖的less版本
12
+
13
+ ## v0.0.1-beta.3 <Badge type="tip" text='2025.10.30' />
9
14
 
10
15
  - kaitify-react 的第一个发布版本
@@ -6,7 +6,7 @@ title: 安装
6
6
 
7
7
  ## 下载 kaitify-react 本地到使用
8
8
 
9
- - 下载地址:[kaitify-react](https://registry.npmmirror.com/@kaitify/react/download/@kaitify/react-0.0.1-beta.2.tgz)
9
+ - 下载地址:[kaitify-react](https://registry.npmmirror.com/@kaitify/react/download/@kaitify/react-0.0.1-beta.4.tgz)
10
10
  - 下载完成后最终解压得到一个 package 文件夹,进入 package 文件夹后,将 package 目录下的整个 lib 目录拷贝到你的项目下
11
11
  - 在 html 页面中引入 js
12
12
 
@@ -28,7 +28,7 @@ title: 安装
28
28
 
29
29
  ```html
30
30
  <!-- 引入固定版本的kaitify -->
31
- <script src="https://unpkg.com/@kaitify/react@0.0.1-beta.2/lib/kaitify-react.umd.js"></script>
31
+ <script src="https://unpkg.com/@kaitify/react@0.0.1-beta.4/lib/kaitify-react.umd.js"></script>
32
32
  <!-- 始终引入最新的kaitify -->
33
33
  <script src="https://unpkg.com/@kaitify/react/lib/kaitify-react.umd.js"></script>
34
34
  ```
@@ -50,21 +50,21 @@ title: 安装
50
50
  npm install @kaitify/react
51
51
 
52
52
  # 安装指定版本
53
- npm install @kaitify/react@0.0.1-beta.2
53
+ npm install @kaitify/react@0.0.1-beta.4
54
54
  ```
55
55
 
56
56
  ```bash [yarn]
57
57
  yarn install @kaitify/react
58
58
 
59
59
  # 安装指定版本
60
- yarn install @kaitify/react@0.0.1-beta.2
60
+ yarn install @kaitify/react@0.0.1-beta.4
61
61
  ```
62
62
 
63
63
  ```bash [pnpm]
64
64
  pnpm install @kaitify/react
65
65
 
66
66
  # 安装指定版本
67
- pnpm install @kaitify/react@0.0.1-beta.2
67
+ pnpm install @kaitify/react@0.0.1-beta.4
68
68
  ```
69
69
 
70
70
  :::
package/examples/App.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { useMemo, useState } from 'react'
2
- 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'
2
+ 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'
3
3
  import './style.less'
4
4
 
5
5
  export default function App() {
@@ -38,15 +38,7 @@ export default function App() {
38
38
  <>
39
39
  <div style={{ padding: 10 }}>
40
40
  <div style={{ padding: 5 }}>
41
- <button onClick={() => setDark(!dark)}>深色/浅色主题</button>
42
41
  <button onClick={() => setShow(!show)}>显示/隐藏编辑器</button>
43
- <button
44
- onClick={() => {
45
- console.log(state?.editor.value?.getHTML())
46
- }}
47
- >
48
- 获取HTML
49
- </button>
50
42
  </div>
51
43
  <div id='area'>
52
44
  <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() {
64
56
  onChange={setContent}
65
57
  onCreated={onCreated}
66
58
  appendBeforeTo={'#before'}
67
- before={
59
+ before={state => (
68
60
  <>
61
+ <Menu
62
+ onOperate={() => {
63
+ console.log(state?.editor.value?.getHTML())
64
+ }}
65
+ >
66
+ 获取HTML
67
+ </Menu>
68
+ <Menu onOperate={() => setDark(!dark)} active={state.editor.value?.isDark()}>
69
+ 深色主题
70
+ </Menu>
69
71
  <UndoMenu />
70
72
  <RedoMenu />
71
73
  <Divider />
@@ -109,7 +111,7 @@ export default function App() {
109
111
  <TableMenu />
110
112
  <FullScreenMenu target='#area' zIndex={2} />
111
113
  </>
112
- }
114
+ )}
113
115
  after={<>总字数:{state?.editor.value?.getContent().length ?? 0}</>}
114
116
  >
115
117
  <Bubble visible={shouldBubble.visible} match={shouldBubble.match} style={{ padding: 5 }}>
@@ -37088,7 +37088,7 @@ class Editor {
37088
37088
  config2.children = [];
37089
37089
  }
37090
37090
  let node = KNode.create(config2);
37091
- if (!closed) {
37091
+ if (!node.isClosed()) {
37092
37092
  Array.from(dom.childNodes).forEach((child) => {
37093
37093
  if (child.nodeType == 1 || child.nodeType == 3) {
37094
37094
  const childNode = this.domParseNode(child);
@@ -37103,6 +37103,7 @@ class Editor {
37103
37103
  }
37104
37104
  if (typeof this.onDomParseNode == "function") {
37105
37105
  node = this.onDomParseNode.apply(this, [node]);
37106
+ console.log("node", node);
37106
37107
  }
37107
37108
  return node;
37108
37109
  }
@@ -42767,6 +42768,7 @@ const Popover = forwardRef(({ placement = "bottom", trigger = "hover", delay: de
42767
42768
  const arrowRef = useRef(null);
42768
42769
  const popoverRef = useRef(null);
42769
42770
  const popperInstance = useRef();
42771
+ const timeoutRef = useRef();
42770
42772
  const popoverRemainingPlacements = useMemo(() => {
42771
42773
  if (placement.startsWith("top")) {
42772
42774
  return ["top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "left", "left-start", "left-end", "right", "right-start", "right-end"].filter((item) => item != placement);
@@ -42844,7 +42846,8 @@ const Popover = forwardRef(({ placement = "bottom", trigger = "hover", delay: de
42844
42846
  return;
42845
42847
  }
42846
42848
  if (delay2 > 0) {
42847
- setTimeout(() => {
42849
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
42850
+ timeoutRef.current = setTimeout(() => {
42848
42851
  setVisible(true);
42849
42852
  }, delay2);
42850
42853
  return;
@@ -42852,9 +42855,6 @@ const Popover = forwardRef(({ placement = "bottom", trigger = "hover", delay: de
42852
42855
  setVisible(true);
42853
42856
  };
42854
42857
  const hidePopover = () => {
42855
- if (props.disabled) {
42856
- return;
42857
- }
42858
42858
  setVisible(false);
42859
42859
  };
42860
42860
  const onShow = () => {