@kaitify/react 0.0.1-beta.3 → 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 +5 -0
- package/docs/guide/install.md +5 -5
- package/examples/App.tsx +13 -11
- package/lib/kaitify-react.es.js +2 -1
- package/lib/kaitify-react.umd.js +1 -1
- package/package.json +3 -4
package/docs/changelog.md
CHANGED
package/docs/guide/install.md
CHANGED
|
@@ -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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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 }}>
|
package/lib/kaitify-react.es.js
CHANGED
|
@@ -37088,7 +37088,7 @@ class Editor {
|
|
|
37088
37088
|
config2.children = [];
|
|
37089
37089
|
}
|
|
37090
37090
|
let node = KNode.create(config2);
|
|
37091
|
-
if (!
|
|
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
|
}
|