@block-kit/plugin 1.0.0 → 1.0.1
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/dist/es/align/{index.js → align/index.js} +1 -1
- package/dist/es/background/{index.js → background/index.js} +1 -1
- package/dist/es/bold/{index.js → bold/index.js} +1 -1
- package/dist/es/bullet-list/{index.js → bullet-list/index.js} +8 -12
- package/dist/es/{is-2b264ec8.js → bullet-list/utils/bullet-list/utils/is.js} +2 -2
- package/dist/es/bullet-list/view/bullet-list/view/list.js +9 -0
- package/dist/es/divider/{index.js → divider/index.js} +5 -5
- package/dist/es/emoji/{index.js → emoji/index.js} +2 -2
- package/dist/es/font-color/{index.js → font-color/index.js} +1 -1
- package/dist/es/font-size/{index.js → font-size/index.js} +1 -1
- package/dist/es/heading/{index.js → heading/index.js} +1 -1
- package/dist/es/image/image/index.js +135 -0
- package/dist/es/image/view/image/view/image.js +39 -0
- package/dist/es/image/view/image/view/wrapper.js +90 -0
- package/dist/es/indent/{index.js → indent/index.js} +3 -3
- package/dist/es/index.css +1 -1
- package/dist/es/index.js +50 -64
- package/dist/es/inline-code/{index.js → inline-code/index.js} +2 -2
- package/dist/es/italic/{index.js → italic/index.js} +1 -1
- package/dist/es/line-height/{index.js → line-height/index.js} +1 -1
- package/dist/es/link/{index.js → link/index.js} +5 -17
- package/dist/es/link/view/link/view/a.js +18 -0
- package/dist/es/mention/mention/index.js +28 -0
- package/dist/es/mention/modules/mention/modules/suggest.js +98 -0
- package/dist/es/mention/utils/mention/utils/constant.js +24 -0
- package/dist/es/mention/view/mention/view/suggest.js +72 -0
- package/dist/es/{tslib.es6-83956cc1.js → node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs.js} +1 -1
- package/dist/es/order-list/{index.js → order-list/index.js} +11 -150
- package/dist/es/order-list/utils/order-list/utils/format.js +75 -0
- package/dist/es/order-list/utils/order-list/utils/is.js +12 -0
- package/dist/es/order-list/utils/order-list/utils/serial.js +68 -0
- package/dist/es/order-list/view/order-list/view/list.js +10 -0
- package/dist/es/quote/{index.js → quote/index.js} +4 -4
- package/dist/es/{selection-badfb0bc.js → shared/components/shared/components/selection.js} +3 -31
- package/dist/es/shared/icons/shared/icons/divider.js +5 -0
- package/dist/es/shared/icons/shared/icons/emoji.js +5 -0
- package/dist/es/shared/icons/shared/icons/font-color.js +5 -0
- package/dist/es/shared/icons/shared/icons/font-size.js +5 -0
- package/dist/es/shared/icons/shared/icons/justify.js +5 -0
- package/dist/es/shared/icons/shared/icons/line-height.js +5 -0
- package/dist/es/shared/icons/shared/icons/text.js +5 -0
- package/dist/es/shared/modules/shared/modules/selection.js +32 -0
- package/dist/es/{dom-71a99400.js → shared/utils/shared/utils/dom.js} +1 -1
- package/dist/es/shared/utils/shared/utils/event.js +5 -0
- package/dist/es/{is-3de778e2.js → shared/utils/shared/utils/is.js} +1 -1
- package/dist/es/shortcut/modules/shortcut/modules/preset.js +23 -0
- package/dist/es/shortcut/{index.js → shortcut/index.js} +6 -25
- package/dist/es/strike/{index.js → strike/index.js} +1 -1
- package/dist/es/toolbar/context/toolbar/context/basic.js +69 -0
- package/dist/es/toolbar/context/toolbar/context/float.js +67 -0
- package/dist/es/toolbar/context/toolbar/context/provider.js +12 -0
- package/dist/es/toolbar/modules/toolbar/modules/align.js +20 -0
- package/dist/es/toolbar/modules/toolbar/modules/bold.js +16 -0
- package/dist/es/toolbar/modules/toolbar/modules/bullet-list.js +17 -0
- package/dist/es/toolbar/modules/toolbar/modules/cut.js +7 -0
- package/dist/es/toolbar/modules/toolbar/modules/divider.js +15 -0
- package/dist/es/toolbar/modules/toolbar/modules/emoji.js +25 -0
- package/dist/es/toolbar/modules/toolbar/modules/font-color.js +49 -0
- package/dist/es/toolbar/modules/toolbar/modules/font-size.js +19 -0
- package/dist/es/toolbar/modules/toolbar/modules/heading.js +19 -0
- package/dist/es/toolbar/modules/toolbar/modules/history.js +34 -0
- package/dist/es/toolbar/modules/toolbar/modules/image.js +15 -0
- package/dist/es/toolbar/modules/toolbar/modules/inline-code.js +15 -0
- package/dist/es/toolbar/modules/toolbar/modules/italic.js +16 -0
- package/dist/es/toolbar/modules/toolbar/modules/line-height.js +15 -0
- package/dist/es/toolbar/modules/toolbar/modules/link.js +89 -0
- package/dist/es/toolbar/modules/toolbar/modules/order-list.js +17 -0
- package/dist/es/toolbar/modules/toolbar/modules/quote.js +15 -0
- package/dist/es/toolbar/modules/toolbar/modules/strike.js +15 -0
- package/dist/es/toolbar/modules/toolbar/modules/underline.js +15 -0
- package/dist/es/toolbar/toolbar/index.js +45 -0
- package/dist/es/toolbar/types/toolbar/types/index.js +7 -0
- package/dist/es/{marks-ac0ec630.js → toolbar/utils/toolbar/utils/marks.js} +1 -5
- package/dist/es/underline/{index.js → underline/index.js} +1 -1
- package/dist/lib/bullet-list/index.js +21 -25
- package/dist/lib/{is-fa1755d0.js → bullet-list/utils/is.js} +3 -1
- package/dist/lib/bullet-list/view/list.js +13 -0
- package/dist/lib/divider/index.js +7 -7
- package/dist/lib/emoji/index.js +1 -1
- package/dist/lib/image/index.js +9 -119
- package/dist/lib/image/view/image.js +43 -0
- package/dist/lib/image/view/wrapper.js +94 -0
- package/dist/lib/indent/index.js +3 -3
- package/dist/lib/index.css +1 -1
- package/dist/lib/index.js +23 -37
- package/dist/lib/inline-code/index.js +1 -1
- package/dist/lib/link/index.js +3 -15
- package/dist/lib/link/view/a.js +22 -0
- package/dist/lib/mention/index.js +26 -15
- package/dist/lib/mention/modules/suggest.js +106 -0
- package/dist/lib/mention/utils/constant.js +29 -0
- package/dist/lib/mention/view/suggest.js +76 -0
- package/dist/lib/order-list/index.js +34 -173
- package/dist/lib/order-list/utils/format.js +79 -0
- package/dist/lib/{is-18806678.js → order-list/utils/is.js} +4 -2
- package/dist/lib/order-list/utils/serial.js +72 -0
- package/dist/lib/order-list/view/list.js +14 -0
- package/dist/lib/quote/index.js +12 -12
- package/dist/lib/{selection-868f15c1.js → shared/components/selection.js} +2 -29
- package/dist/lib/shared/icons/divider.js +9 -0
- package/dist/lib/shared/icons/emoji.js +9 -0
- package/dist/lib/shared/icons/font-color.js +9 -0
- package/dist/lib/shared/icons/font-size.js +9 -0
- package/dist/lib/shared/icons/justify.js +9 -0
- package/dist/lib/shared/icons/line-height.js +9 -0
- package/dist/lib/shared/icons/text.js +9 -0
- package/dist/lib/shared/modules/selection.js +36 -0
- package/dist/lib/{dom-cb8b8e40.js → shared/utils/dom.js} +2 -0
- package/dist/lib/shared/utils/event.js +9 -0
- package/dist/lib/{is-473d664a.js → shared/utils/is.js} +2 -0
- package/dist/lib/shortcut/index.js +8 -27
- package/dist/lib/shortcut/modules/preset.js +27 -0
- package/dist/lib/toolbar/context/basic.js +73 -0
- package/dist/lib/toolbar/context/float.js +75 -0
- package/dist/lib/toolbar/context/provider.js +21 -0
- package/dist/lib/toolbar/index.js +45 -38
- package/dist/lib/toolbar/modules/align.js +24 -0
- package/dist/lib/toolbar/modules/bold.js +20 -0
- package/dist/lib/toolbar/modules/bullet-list.js +21 -0
- package/dist/lib/toolbar/modules/cut.js +11 -0
- package/dist/lib/toolbar/modules/divider.js +19 -0
- package/dist/lib/toolbar/modules/emoji.js +33 -0
- package/dist/lib/toolbar/modules/font-color.js +53 -0
- package/dist/lib/toolbar/modules/font-size.js +23 -0
- package/dist/lib/toolbar/modules/heading.js +23 -0
- package/dist/lib/toolbar/modules/history.js +38 -0
- package/dist/lib/toolbar/modules/image.js +19 -0
- package/dist/lib/toolbar/modules/inline-code.js +19 -0
- package/dist/lib/toolbar/modules/italic.js +20 -0
- package/dist/lib/toolbar/modules/line-height.js +19 -0
- package/dist/lib/toolbar/modules/link.js +97 -0
- package/dist/lib/toolbar/modules/order-list.js +21 -0
- package/dist/lib/toolbar/modules/quote.js +19 -0
- package/dist/lib/toolbar/modules/strike.js +19 -0
- package/dist/lib/toolbar/modules/underline.js +19 -0
- package/dist/lib/{marks-a30b8a0f.js → toolbar/utils/marks.js} +1 -4
- package/dist/styles/index.css +1 -0
- package/package.json +6 -6
- package/dist/es/image/index.js +0 -245
- package/dist/es/index-1e46887d.js +0 -205
- package/dist/es/index-ddc2e5ac.js +0 -493
- package/dist/es/is-7f3ae820.js +0 -12
- package/dist/es/mention/index.js +0 -13
- package/dist/es/toolbar/index.js +0 -34
- package/dist/es/toolbar/types/index.js +0 -7
- package/dist/lib/index-f50053bf.js +0 -506
- package/dist/lib/index-ffc4bb34.js +0 -212
- /package/dist/es/align/types/{index.js → align/types/index.js} +0 -0
- /package/dist/es/background/types/{index.js → background/types/index.js} +0 -0
- /package/dist/es/bold/types/{index.js → bold/types/index.js} +0 -0
- /package/dist/es/bullet-list/types/{index.js → bullet-list/types/index.js} +0 -0
- /package/dist/es/divider/types/{index.js → divider/types/index.js} +0 -0
- /package/dist/es/emoji/types/{index.js → emoji/types/index.js} +0 -0
- /package/dist/es/font-color/types/{index.js → font-color/types/index.js} +0 -0
- /package/dist/es/font-size/types/{index.js → font-size/types/index.js} +0 -0
- /package/dist/es/heading/types/{index.js → heading/types/index.js} +0 -0
- /package/dist/es/image/types/{index.js → image/types/index.js} +0 -0
- /package/dist/es/indent/types/{index.js → indent/types/index.js} +0 -0
- /package/dist/es/inline-code/types/{index.js → inline-code/types/index.js} +0 -0
- /package/dist/es/italic/types/{index.js → italic/types/index.js} +0 -0
- /package/dist/es/line-height/types/{index.js → line-height/types/index.js} +0 -0
- /package/dist/es/link/types/{index.js → link/types/index.js} +0 -0
- /package/dist/es/mention/types/{index.js → mention/types/index.js} +0 -0
- /package/dist/es/order-list/types/{index.js → order-list/types/index.js} +0 -0
- /package/dist/es/quote/types/{index.js → quote/types/index.js} +0 -0
- /package/dist/es/shortcut/types/{index.js → shortcut/types/index.js} +0 -0
- /package/dist/es/strike/types/{index.js → strike/types/index.js} +0 -0
- /package/dist/es/underline/types/{index.js → underline/types/index.js} +0 -0
- /package/dist/lib/{tslib.es6-d44c9a95.js → tslib.es6-82029525.js} +0 -0
|
@@ -1,21 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __decorate } from '../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs.js';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import { LINK_KEY,
|
|
6
|
-
import '
|
|
7
|
-
|
|
8
|
-
const A = props => {
|
|
9
|
-
const { attrs } = props;
|
|
10
|
-
const { readonly } = useReadonly();
|
|
11
|
-
const href = attrs[LINK_KEY];
|
|
12
|
-
const target = attrs[LINK_BLANK_KEY] ? "_blank" : "_self";
|
|
13
|
-
const onClick = (e) => {
|
|
14
|
-
e[CTRL_KEY] && window.open(href, "_blank");
|
|
15
|
-
e.preventDefault();
|
|
16
|
-
};
|
|
17
|
-
return (jsx("a", { href: href, target: target, rel: "noreferrer", className: "block-kit-hyper-link", onClick: readonly ? void 0 : onClick, children: props.children }));
|
|
18
|
-
};
|
|
3
|
+
import { InjectWrapKeys, EditorPlugin } from '@block-kit/react';
|
|
4
|
+
import { Bind } from '@block-kit/utils';
|
|
5
|
+
import { LINK_KEY, LINK_TEMP_KEY } from '../types/link/types/index.js';
|
|
6
|
+
import { A } from '../view/link/view/a.js';
|
|
19
7
|
|
|
20
8
|
class LinkPlugin extends EditorPlugin {
|
|
21
9
|
constructor(editor) {
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useReadonly } from '@block-kit/react';
|
|
3
|
+
import { CTRL_KEY } from '@block-kit/utils';
|
|
4
|
+
import { LINK_KEY, LINK_BLANK_KEY } from '../../../types/link/types/index.js';
|
|
5
|
+
|
|
6
|
+
const A = props => {
|
|
7
|
+
const { attrs } = props;
|
|
8
|
+
const { readonly } = useReadonly();
|
|
9
|
+
const href = attrs[LINK_KEY];
|
|
10
|
+
const target = attrs[LINK_BLANK_KEY] ? "_blank" : "_self";
|
|
11
|
+
const onClick = (e) => {
|
|
12
|
+
e[CTRL_KEY] && window.open(href, "_blank");
|
|
13
|
+
e.preventDefault();
|
|
14
|
+
};
|
|
15
|
+
return (jsx("a", { href: href, target: target, rel: "noreferrer", className: "block-kit-hyper-link", onClick: readonly ? void 0 : onClick, children: props.children }));
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export { A };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { EditorPlugin, Embed } from '@block-kit/react';
|
|
3
|
+
import { SuggestModule } from '../modules/mention/modules/suggest.js';
|
|
4
|
+
import { MENTION_KEY, MENTION_NAME } from '../types/mention/types/index.js';
|
|
5
|
+
|
|
6
|
+
class MentionPlugin extends EditorPlugin {
|
|
7
|
+
constructor(editor) {
|
|
8
|
+
super();
|
|
9
|
+
this.editor = editor;
|
|
10
|
+
this.key = MENTION_KEY;
|
|
11
|
+
this.suggest = new SuggestModule(editor);
|
|
12
|
+
}
|
|
13
|
+
destroy() {
|
|
14
|
+
this.suggest.destroy();
|
|
15
|
+
}
|
|
16
|
+
match(attrs) {
|
|
17
|
+
return !!attrs[MENTION_KEY];
|
|
18
|
+
}
|
|
19
|
+
renderLeaf(context) {
|
|
20
|
+
const attrs = context.attributes || {};
|
|
21
|
+
const name = attrs[MENTION_NAME];
|
|
22
|
+
if (!name || !attrs[MENTION_KEY])
|
|
23
|
+
return context.children;
|
|
24
|
+
return (jsx(Embed, { className: "block-kit-mention-embed", context: context, children: jsxs("span", { className: "block-kit-mention-name", children: ["@", name] }) }));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { MentionPlugin };
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { __decorate } from '../../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import { Point, EDITOR_EVENT, relativeTo, Range } from '@block-kit/core';
|
|
4
|
+
import { deltaToText, Delta } from '@block-kit/delta';
|
|
5
|
+
import { Bind, KEY_CODE } from '@block-kit/utils';
|
|
6
|
+
import ReactDOM from 'react-dom';
|
|
7
|
+
import { getMountDOM } from '../../../../shared/utils/shared/utils/dom.js';
|
|
8
|
+
import { isKeyCode } from '../../../../shared/utils/shared/utils/is.js';
|
|
9
|
+
import { SUGGEST_OFFSET } from '../../../utils/mention/utils/constant.js';
|
|
10
|
+
import { Suggest } from '../../../view/mention/view/suggest.js';
|
|
11
|
+
|
|
12
|
+
class SuggestModule {
|
|
13
|
+
constructor(editor) {
|
|
14
|
+
this.editor = editor;
|
|
15
|
+
this.rect = null;
|
|
16
|
+
this.isMountSuggest = false;
|
|
17
|
+
this.mountSuggestNode = null;
|
|
18
|
+
this.point = new Point(0, 0);
|
|
19
|
+
editor.event.on(EDITOR_EVENT.KEY_DOWN, this.onKeydown, 101);
|
|
20
|
+
}
|
|
21
|
+
destroy() {
|
|
22
|
+
this.unmountSuggestPanel();
|
|
23
|
+
this.editor.event.off(EDITOR_EVENT.KEY_DOWN, this.onKeydown);
|
|
24
|
+
this.editor.event.off(EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
|
|
25
|
+
}
|
|
26
|
+
onKeydown(event) {
|
|
27
|
+
if (isKeyCode(event, KEY_CODE.D2) && event.shiftKey) {
|
|
28
|
+
const sel = this.editor.selection.get();
|
|
29
|
+
const caretRect = this.editor.rect.getRawCaretRect();
|
|
30
|
+
if (!caretRect || !sel)
|
|
31
|
+
return void 0;
|
|
32
|
+
const editorRect = this.editor.rect.getEditorRect();
|
|
33
|
+
const rect = relativeTo(caretRect, editorRect);
|
|
34
|
+
// 这里是 CSS 预设的面板高度
|
|
35
|
+
const PANEL_HEIGHT = 150;
|
|
36
|
+
if (caretRect.bottom + PANEL_HEIGHT <= window.innerHeight) {
|
|
37
|
+
// 放置于下方
|
|
38
|
+
rect.top = rect.bottom + SUGGEST_OFFSET;
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
// 放置于上方
|
|
42
|
+
rect.top = rect.top - PANEL_HEIGHT - SUGGEST_OFFSET;
|
|
43
|
+
}
|
|
44
|
+
this.rect = { top: rect.top, left: rect.left };
|
|
45
|
+
this.point = sel.start.clone();
|
|
46
|
+
this.editor.event.on(EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
|
|
47
|
+
}
|
|
48
|
+
if (this.isMountSuggest && isKeyCode(event, KEY_CODE.ESC)) {
|
|
49
|
+
this.unmountSuggestPanel();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
onSelectionChange(event) {
|
|
53
|
+
const { current } = event;
|
|
54
|
+
if (!current ||
|
|
55
|
+
!current.isCollapsed ||
|
|
56
|
+
current.start.line !== this.point.line ||
|
|
57
|
+
current.start.offset <= this.point.offset) {
|
|
58
|
+
this.unmountSuggestPanel();
|
|
59
|
+
return void 0;
|
|
60
|
+
}
|
|
61
|
+
const ops = this.editor.collect.getFragment(new Range(this.point, current.end));
|
|
62
|
+
if (!ops)
|
|
63
|
+
return void 0;
|
|
64
|
+
const text = deltaToText(new Delta(ops));
|
|
65
|
+
this.mountSuggestPanel(text.slice(1));
|
|
66
|
+
}
|
|
67
|
+
mountSuggestPanel(text = "") {
|
|
68
|
+
if (!this.rect)
|
|
69
|
+
return void 0;
|
|
70
|
+
if (!this.mountSuggestNode) {
|
|
71
|
+
this.mountSuggestNode = document.createElement("div");
|
|
72
|
+
this.mountSuggestNode.dataset.type = "mention";
|
|
73
|
+
getMountDOM(this.editor).appendChild(this.mountSuggestNode);
|
|
74
|
+
}
|
|
75
|
+
const top = this.rect.top;
|
|
76
|
+
const left = this.rect.left;
|
|
77
|
+
const dom = this.mountSuggestNode;
|
|
78
|
+
this.isMountSuggest = true;
|
|
79
|
+
ReactDOM.render(jsx(Suggest, { controller: this, top: top, left: left, text: text }), dom);
|
|
80
|
+
}
|
|
81
|
+
unmountSuggestPanel() {
|
|
82
|
+
if (this.isMountSuggest && this.mountSuggestNode) {
|
|
83
|
+
ReactDOM.unmountComponentAtNode(this.mountSuggestNode);
|
|
84
|
+
}
|
|
85
|
+
this.mountSuggestNode && this.mountSuggestNode.remove();
|
|
86
|
+
this.editor.event.off(EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
|
|
87
|
+
this.mountSuggestNode = null;
|
|
88
|
+
this.isMountSuggest = false;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
__decorate([
|
|
92
|
+
Bind
|
|
93
|
+
], SuggestModule.prototype, "onKeydown", null);
|
|
94
|
+
__decorate([
|
|
95
|
+
Bind
|
|
96
|
+
], SuggestModule.prototype, "onSelectionChange", null);
|
|
97
|
+
|
|
98
|
+
export { SuggestModule };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
const SUGGEST_OFFSET = 5;
|
|
2
|
+
const DATA = [
|
|
3
|
+
"Alice",
|
|
4
|
+
"Bob",
|
|
5
|
+
"Charlie",
|
|
6
|
+
"David",
|
|
7
|
+
"Eve",
|
|
8
|
+
"Frank",
|
|
9
|
+
"Grace",
|
|
10
|
+
"Heidi",
|
|
11
|
+
"Ivan",
|
|
12
|
+
"Judy",
|
|
13
|
+
"Mallory",
|
|
14
|
+
"Oscar",
|
|
15
|
+
"Peggy",
|
|
16
|
+
"Romeo",
|
|
17
|
+
"Sybil",
|
|
18
|
+
"Trudy",
|
|
19
|
+
"Victor",
|
|
20
|
+
"Walter",
|
|
21
|
+
"Zoe",
|
|
22
|
+
];
|
|
23
|
+
|
|
24
|
+
export { DATA, SUGGEST_OFFSET };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Range, RawRange, EDITOR_EVENT } from '@block-kit/core';
|
|
3
|
+
import { Delta } from '@block-kit/delta';
|
|
4
|
+
import { KEY_CODE, TRULY, preventNativeEvent, cs } from '@block-kit/utils';
|
|
5
|
+
import { useMemoFn } from '@block-kit/utils/dist/es/hooks';
|
|
6
|
+
import { useRef, useState, useMemo, useEffect } from 'react';
|
|
7
|
+
import { scrollIfNeeded, preventContextEvent } from '../../../../shared/utils/shared/utils/dom.js';
|
|
8
|
+
import { isKeyCode } from '../../../../shared/utils/shared/utils/is.js';
|
|
9
|
+
import { MENTION_KEY, MENTION_NAME } from '../../../types/mention/types/index.js';
|
|
10
|
+
import { DATA } from '../../../utils/mention/utils/constant.js';
|
|
11
|
+
|
|
12
|
+
const Suggest = props => {
|
|
13
|
+
const { controller } = props;
|
|
14
|
+
const editor = controller.editor;
|
|
15
|
+
const ref = useRef(null);
|
|
16
|
+
const [activeIndex, setActiveIndex] = useState(0);
|
|
17
|
+
const list = useMemo(() => {
|
|
18
|
+
setActiveIndex(0);
|
|
19
|
+
if (!props.text)
|
|
20
|
+
return DATA;
|
|
21
|
+
return DATA.filter(it => {
|
|
22
|
+
return it.toUpperCase().includes(props.text.toUpperCase());
|
|
23
|
+
});
|
|
24
|
+
}, [props.text]);
|
|
25
|
+
const onKeydown = useMemoFn((event, context) => {
|
|
26
|
+
if (isKeyCode(event, KEY_CODE.DOWN)) {
|
|
27
|
+
const nextIndex = (activeIndex + 1) % list.length;
|
|
28
|
+
setActiveIndex(nextIndex);
|
|
29
|
+
const container = ref.current;
|
|
30
|
+
const child = container && container.children[nextIndex];
|
|
31
|
+
container && child && scrollIfNeeded(container, child, 5);
|
|
32
|
+
preventContextEvent(event, context);
|
|
33
|
+
}
|
|
34
|
+
if (isKeyCode(event, KEY_CODE.UP)) {
|
|
35
|
+
const prevIndex = (activeIndex - 1 + list.length) % list.length;
|
|
36
|
+
setActiveIndex(prevIndex);
|
|
37
|
+
const container = ref.current;
|
|
38
|
+
const child = container && container.children[prevIndex];
|
|
39
|
+
container && child && scrollIfNeeded(container, child, 5);
|
|
40
|
+
preventContextEvent(event, context);
|
|
41
|
+
}
|
|
42
|
+
if (isKeyCode(event, KEY_CODE.ENTER)) {
|
|
43
|
+
const item = list[activeIndex];
|
|
44
|
+
preventContextEvent(event, context);
|
|
45
|
+
const sel = editor.selection.get();
|
|
46
|
+
if (!item || !sel)
|
|
47
|
+
return void 0;
|
|
48
|
+
const range = new Range(controller.point, sel.end);
|
|
49
|
+
const raw = RawRange.fromRange(editor, range);
|
|
50
|
+
if (!raw)
|
|
51
|
+
return void 0;
|
|
52
|
+
const delta = new Delta()
|
|
53
|
+
.retain(raw.start)
|
|
54
|
+
.delete(raw.len)
|
|
55
|
+
.insert(" ", {
|
|
56
|
+
[MENTION_KEY]: TRULY,
|
|
57
|
+
[MENTION_NAME]: item,
|
|
58
|
+
});
|
|
59
|
+
editor.state.apply(delta);
|
|
60
|
+
controller.unmountSuggestPanel();
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
useEffect(() => {
|
|
64
|
+
editor.event.on(EDITOR_EVENT.KEY_DOWN, onKeydown, 80);
|
|
65
|
+
return () => {
|
|
66
|
+
editor.event.off(EDITOR_EVENT.KEY_DOWN, onKeydown);
|
|
67
|
+
};
|
|
68
|
+
}, [onKeydown, editor.event]);
|
|
69
|
+
return (jsxs("div", { ref: ref, className: "block-kit-suggest-panel", style: { top: props.top, left: props.left }, onMouseDown: preventNativeEvent, children: [list.map((it, index) => (jsx("div", { className: cs("block-kit-suggest-item", index === activeIndex && "active"), children: it }, index))), !list.length && jsx("div", { className: "block-kit-suggest-empty", children: "No result" })] }));
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
export { Suggest };
|
|
@@ -1,156 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { __decorate } from '../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs.js';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { EDITOR_EVENT, RawPoint, Point } from '@block-kit/core';
|
|
4
4
|
import { Delta } from '@block-kit/delta';
|
|
5
5
|
import { EditorPlugin } from '@block-kit/react';
|
|
6
|
-
import {
|
|
7
|
-
import { LIST_TYPE_KEY } from '
|
|
8
|
-
import { INDENT_LEVEL_KEY } from '
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* 批量刷新选区的列表序号 [批量刷新简单方便]
|
|
16
|
-
* - 从选区开始的第一个列表项开始,逐个刷新序号
|
|
17
|
-
* - 全量刷新序号数据, 最后需要在渲染时批量刷新
|
|
18
|
-
* @param editor
|
|
19
|
-
* @param sel
|
|
20
|
-
*/
|
|
21
|
-
const applyNewOrderList = (editor, range) => {
|
|
22
|
-
const sel = range || editor.selection.get();
|
|
23
|
-
if (!sel)
|
|
24
|
-
return void 0;
|
|
25
|
-
const startPoint = sel.start;
|
|
26
|
-
const block = editor.state.block;
|
|
27
|
-
let start = startPoint.line;
|
|
28
|
-
const selStartLine = block.getLine(sel.start.line);
|
|
29
|
-
const selEndLine = block.getLine(sel.end.line);
|
|
30
|
-
const selEndNextLine = selEndLine && selEndLine.next();
|
|
31
|
-
// 如果当前行不是列表项,且选区结尾下一行是列表项,则从下一行开始探查
|
|
32
|
-
if (selStartLine &&
|
|
33
|
-
!isOrderList(selStartLine.attributes) &&
|
|
34
|
-
selEndNextLine &&
|
|
35
|
-
isOrderList(selEndNextLine.attributes)) {
|
|
36
|
-
start++;
|
|
37
|
-
}
|
|
38
|
-
// 如果 start 的行属性不存在列表项, 则无需刷新
|
|
39
|
-
const currentLine = block.getLine(start);
|
|
40
|
-
if (!currentLine || !isOrderList(currentLine.attributes)) {
|
|
41
|
-
return void 0;
|
|
42
|
-
}
|
|
43
|
-
// 向前查找到第一个列表项
|
|
44
|
-
while (--start >= 0) {
|
|
45
|
-
const line = block.getLine(start);
|
|
46
|
-
if (!line || !isOrderList(line.attributes)) {
|
|
47
|
-
start++;
|
|
48
|
-
break;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
const delta = new Delta();
|
|
52
|
-
const startLine = block.getLine(start);
|
|
53
|
-
if (!startLine)
|
|
54
|
-
return void 0;
|
|
55
|
-
delta.retain(startLine.start);
|
|
56
|
-
// 逐行刷新序号
|
|
57
|
-
const levelToIndex = {};
|
|
58
|
-
for (let i = start; i < block.size; i++) {
|
|
59
|
-
const line = block.getLine(i);
|
|
60
|
-
const attrs = line && line.attributes;
|
|
61
|
-
if (!line || !attrs || !isOrderList(attrs))
|
|
62
|
-
break;
|
|
63
|
-
const level = attrs[INDENT_LEVEL_KEY];
|
|
64
|
-
// 重置序号
|
|
65
|
-
if (attrs[LIST_RESTART_KEY]) {
|
|
66
|
-
levelToIndex[level] = 1;
|
|
67
|
-
}
|
|
68
|
-
const index = levelToIndex[level] || 1;
|
|
69
|
-
levelToIndex[level] = index + 1;
|
|
70
|
-
delta.retain(line.length - 1);
|
|
71
|
-
delta.retain(1, { [LIST_START_KEY]: String(index) });
|
|
72
|
-
}
|
|
73
|
-
editor.state.apply(delta, { autoCaret: false });
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
const latinCache = {};
|
|
77
|
-
const romanCache = {};
|
|
78
|
-
const startToLatin = (start) => {
|
|
79
|
-
if (start < 1)
|
|
80
|
-
return "";
|
|
81
|
-
const cache = latinCache[start];
|
|
82
|
-
if (cache)
|
|
83
|
-
return cache;
|
|
84
|
-
// 1 -> a, 27 -> aa
|
|
85
|
-
let res = "";
|
|
86
|
-
let n = start - 1;
|
|
87
|
-
while (n >= 0) {
|
|
88
|
-
res = String.fromCharCode((n % 26) + 97) + res;
|
|
89
|
-
n = Math.floor(n / 26) - 1;
|
|
90
|
-
}
|
|
91
|
-
latinCache[start] = res;
|
|
92
|
-
return res;
|
|
93
|
-
};
|
|
94
|
-
const startToRoman = (start) => {
|
|
95
|
-
if (start < 1 || start > 5000)
|
|
96
|
-
return "";
|
|
97
|
-
const cache = romanCache[start];
|
|
98
|
-
if (cache)
|
|
99
|
-
return cache;
|
|
100
|
-
// https://github.com/bpampuch/pdfmake/blob/7af85/src/DocMeasure.js#L315
|
|
101
|
-
const lookup = {
|
|
102
|
-
m: 1000,
|
|
103
|
-
cm: 900,
|
|
104
|
-
d: 500,
|
|
105
|
-
cd: 400,
|
|
106
|
-
c: 100,
|
|
107
|
-
xc: 90,
|
|
108
|
-
l: 50,
|
|
109
|
-
xl: 40,
|
|
110
|
-
x: 10,
|
|
111
|
-
ix: 9,
|
|
112
|
-
v: 5,
|
|
113
|
-
iv: 4,
|
|
114
|
-
i: 1,
|
|
115
|
-
};
|
|
116
|
-
let res = "";
|
|
117
|
-
let n = start;
|
|
118
|
-
for (const i of Object.keys(lookup)) {
|
|
119
|
-
while (n >= lookup[i]) {
|
|
120
|
-
res = res + i;
|
|
121
|
-
n = n - lookup[i];
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
romanCache[start] = res;
|
|
125
|
-
return res;
|
|
126
|
-
};
|
|
127
|
-
/**
|
|
128
|
-
* 序列化有序列表前缀值
|
|
129
|
-
* @param start
|
|
130
|
-
* @param level
|
|
131
|
-
*/
|
|
132
|
-
const formatListLevel = (start, level) => {
|
|
133
|
-
let serial = "";
|
|
134
|
-
const value = level % 3;
|
|
135
|
-
if (value === 0) {
|
|
136
|
-
// 1 -> 1
|
|
137
|
-
serial = start.toString();
|
|
138
|
-
}
|
|
139
|
-
else if (value === 1) {
|
|
140
|
-
// 1 -> a
|
|
141
|
-
serial = startToLatin(start);
|
|
142
|
-
}
|
|
143
|
-
else if (value === 2) {
|
|
144
|
-
// 1 -> i
|
|
145
|
-
serial = startToRoman(start);
|
|
146
|
-
}
|
|
147
|
-
return serial + ".";
|
|
148
|
-
};
|
|
149
|
-
|
|
150
|
-
const OrderListView = props => {
|
|
151
|
-
const { level, start, children } = props;
|
|
152
|
-
return (jsxs("ol", { className: "block-kit-order-list", children: [jsx("div", { contentEditable: false, className: "block-kit-order-indicator", onMouseDown: preventNativeEvent, children: formatListLevel(start, level) }), jsx("li", { value: start, className: cs("block-kit-order-item", `block-kit-li-level-${level % 3}`), children: children })] }));
|
|
153
|
-
};
|
|
6
|
+
import { Bind, KEY_CODE, NIL } from '@block-kit/utils';
|
|
7
|
+
import { LIST_TYPE_KEY } from '../../bullet-list/types/bullet-list/types/index.js';
|
|
8
|
+
import { INDENT_LEVEL_KEY } from '../../indent/types/indent/types/index.js';
|
|
9
|
+
import { preventContextEvent } from '../../shared/utils/shared/utils/dom.js';
|
|
10
|
+
import { isKeyCode, isEmptyLine } from '../../shared/utils/shared/utils/is.js';
|
|
11
|
+
import { ORDER_LIST_KEY, LIST_START_KEY, LIST_RESTART_KEY, ORDER_LIST_TYPE } from '../types/order-list/types/index.js';
|
|
12
|
+
import { isOrderList } from '../utils/order-list/utils/is.js';
|
|
13
|
+
import { applyNewOrderList } from '../utils/order-list/utils/serial.js';
|
|
14
|
+
import { OrderListView } from '../view/order-list/view/list.js';
|
|
154
15
|
|
|
155
16
|
class OrderListPlugin extends EditorPlugin {
|
|
156
17
|
constructor(editor) {
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
const latinCache = {};
|
|
2
|
+
const romanCache = {};
|
|
3
|
+
const startToLatin = (start) => {
|
|
4
|
+
if (start < 1)
|
|
5
|
+
return "";
|
|
6
|
+
const cache = latinCache[start];
|
|
7
|
+
if (cache)
|
|
8
|
+
return cache;
|
|
9
|
+
// 1 -> a, 27 -> aa
|
|
10
|
+
let res = "";
|
|
11
|
+
let n = start - 1;
|
|
12
|
+
while (n >= 0) {
|
|
13
|
+
res = String.fromCharCode((n % 26) + 97) + res;
|
|
14
|
+
n = Math.floor(n / 26) - 1;
|
|
15
|
+
}
|
|
16
|
+
latinCache[start] = res;
|
|
17
|
+
return res;
|
|
18
|
+
};
|
|
19
|
+
const startToRoman = (start) => {
|
|
20
|
+
if (start < 1 || start > 5000)
|
|
21
|
+
return "";
|
|
22
|
+
const cache = romanCache[start];
|
|
23
|
+
if (cache)
|
|
24
|
+
return cache;
|
|
25
|
+
// https://github.com/bpampuch/pdfmake/blob/7af85/src/DocMeasure.js#L315
|
|
26
|
+
const lookup = {
|
|
27
|
+
m: 1000,
|
|
28
|
+
cm: 900,
|
|
29
|
+
d: 500,
|
|
30
|
+
cd: 400,
|
|
31
|
+
c: 100,
|
|
32
|
+
xc: 90,
|
|
33
|
+
l: 50,
|
|
34
|
+
xl: 40,
|
|
35
|
+
x: 10,
|
|
36
|
+
ix: 9,
|
|
37
|
+
v: 5,
|
|
38
|
+
iv: 4,
|
|
39
|
+
i: 1,
|
|
40
|
+
};
|
|
41
|
+
let res = "";
|
|
42
|
+
let n = start;
|
|
43
|
+
for (const i of Object.keys(lookup)) {
|
|
44
|
+
while (n >= lookup[i]) {
|
|
45
|
+
res = res + i;
|
|
46
|
+
n = n - lookup[i];
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
romanCache[start] = res;
|
|
50
|
+
return res;
|
|
51
|
+
};
|
|
52
|
+
/**
|
|
53
|
+
* 序列化有序列表前缀值
|
|
54
|
+
* @param start
|
|
55
|
+
* @param level
|
|
56
|
+
*/
|
|
57
|
+
const formatListLevel = (start, level) => {
|
|
58
|
+
let serial = "";
|
|
59
|
+
const value = level % 3;
|
|
60
|
+
if (value === 0) {
|
|
61
|
+
// 1 -> 1
|
|
62
|
+
serial = start.toString();
|
|
63
|
+
}
|
|
64
|
+
else if (value === 1) {
|
|
65
|
+
// 1 -> a
|
|
66
|
+
serial = startToLatin(start);
|
|
67
|
+
}
|
|
68
|
+
else if (value === 2) {
|
|
69
|
+
// 1 -> i
|
|
70
|
+
serial = startToRoman(start);
|
|
71
|
+
}
|
|
72
|
+
return serial + ".";
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
export { formatListLevel };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { LIST_TYPE_KEY } from '../../../../bullet-list/types/bullet-list/types/index.js';
|
|
2
|
+
import { ORDER_LIST_TYPE } from '../../../types/order-list/types/index.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* 检查有序列表
|
|
6
|
+
* @param attrs
|
|
7
|
+
*/
|
|
8
|
+
const isOrderList = (attrs) => {
|
|
9
|
+
return attrs[LIST_TYPE_KEY] === ORDER_LIST_TYPE;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { isOrderList };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { Delta } from '@block-kit/delta';
|
|
2
|
+
import { INDENT_LEVEL_KEY } from '../../../../indent/types/indent/types/index.js';
|
|
3
|
+
import { LIST_RESTART_KEY, LIST_START_KEY } from '../../../types/order-list/types/index.js';
|
|
4
|
+
import { isOrderList } from './is.js';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* 批量刷新选区的列表序号 [批量刷新简单方便]
|
|
8
|
+
* - 从选区开始的第一个列表项开始,逐个刷新序号
|
|
9
|
+
* - 全量刷新序号数据, 最后需要在渲染时批量刷新
|
|
10
|
+
* @param editor
|
|
11
|
+
* @param sel
|
|
12
|
+
*/
|
|
13
|
+
const applyNewOrderList = (editor, range) => {
|
|
14
|
+
const sel = range || editor.selection.get();
|
|
15
|
+
if (!sel)
|
|
16
|
+
return void 0;
|
|
17
|
+
const startPoint = sel.start;
|
|
18
|
+
const block = editor.state.block;
|
|
19
|
+
let start = startPoint.line;
|
|
20
|
+
const selStartLine = block.getLine(sel.start.line);
|
|
21
|
+
const selEndLine = block.getLine(sel.end.line);
|
|
22
|
+
const selEndNextLine = selEndLine && selEndLine.next();
|
|
23
|
+
// 如果当前行不是列表项,且选区结尾下一行是列表项,则从下一行开始探查
|
|
24
|
+
if (selStartLine &&
|
|
25
|
+
!isOrderList(selStartLine.attributes) &&
|
|
26
|
+
selEndNextLine &&
|
|
27
|
+
isOrderList(selEndNextLine.attributes)) {
|
|
28
|
+
start++;
|
|
29
|
+
}
|
|
30
|
+
// 如果 start 的行属性不存在列表项, 则无需刷新
|
|
31
|
+
const currentLine = block.getLine(start);
|
|
32
|
+
if (!currentLine || !isOrderList(currentLine.attributes)) {
|
|
33
|
+
return void 0;
|
|
34
|
+
}
|
|
35
|
+
// 向前查找到第一个列表项
|
|
36
|
+
while (--start >= 0) {
|
|
37
|
+
const line = block.getLine(start);
|
|
38
|
+
if (!line || !isOrderList(line.attributes)) {
|
|
39
|
+
start++;
|
|
40
|
+
break;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
const delta = new Delta();
|
|
44
|
+
const startLine = block.getLine(start);
|
|
45
|
+
if (!startLine)
|
|
46
|
+
return void 0;
|
|
47
|
+
delta.retain(startLine.start);
|
|
48
|
+
// 逐行刷新序号
|
|
49
|
+
const levelToIndex = {};
|
|
50
|
+
for (let i = start; i < block.size; i++) {
|
|
51
|
+
const line = block.getLine(i);
|
|
52
|
+
const attrs = line && line.attributes;
|
|
53
|
+
if (!line || !attrs || !isOrderList(attrs))
|
|
54
|
+
break;
|
|
55
|
+
const level = attrs[INDENT_LEVEL_KEY];
|
|
56
|
+
// 重置序号
|
|
57
|
+
if (attrs[LIST_RESTART_KEY]) {
|
|
58
|
+
levelToIndex[level] = 1;
|
|
59
|
+
}
|
|
60
|
+
const index = levelToIndex[level] || 1;
|
|
61
|
+
levelToIndex[level] = index + 1;
|
|
62
|
+
delta.retain(line.length - 1);
|
|
63
|
+
delta.retain(1, { [LIST_START_KEY]: String(index) });
|
|
64
|
+
}
|
|
65
|
+
editor.state.apply(delta, { autoCaret: false });
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
export { applyNewOrderList };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { preventNativeEvent, cs } from '@block-kit/utils';
|
|
3
|
+
import { formatListLevel } from '../../../utils/order-list/utils/format.js';
|
|
4
|
+
|
|
5
|
+
const OrderListView = props => {
|
|
6
|
+
const { level, start, children } = props;
|
|
7
|
+
return (jsxs("ol", { className: "block-kit-order-list", children: [jsx("div", { contentEditable: false, className: "block-kit-order-indicator", onMouseDown: preventNativeEvent, children: formatListLevel(start, level) }), jsx("li", { value: start, className: cs("block-kit-order-item", `block-kit-li-level-${level % 3}`), children: children })] }));
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export { OrderListView };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { __decorate } from '../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs.js';
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { EDITOR_EVENT, RawPoint, Point } from '@block-kit/core';
|
|
4
4
|
import { Delta } from '@block-kit/delta';
|
|
5
5
|
import { InjectWrapKeys, EditorPlugin } from '@block-kit/react';
|
|
6
6
|
import { Bind, KEY_CODE, NIL, TRULY } from '@block-kit/utils';
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import { QUOTE_KEY } from '
|
|
7
|
+
import { preventContextEvent } from '../../shared/utils/shared/utils/dom.js';
|
|
8
|
+
import { isKeyCode, isEmptyLine } from '../../shared/utils/shared/utils/is.js';
|
|
9
|
+
import { QUOTE_KEY } from '../types/quote/types/index.js';
|
|
10
10
|
|
|
11
11
|
class QuotePlugin extends EditorPlugin {
|
|
12
12
|
constructor(editor) {
|