@block-kit/plugin 1.0.0 → 1.0.3
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/bullet-list/index.js +6 -10
- package/dist/es/{is-2b264ec8.js → bullet-list/utils/is.js} +2 -2
- package/dist/es/bullet-list/view/list.js +9 -0
- package/dist/es/divider/index.js +4 -4
- package/dist/es/emoji/index.js +1 -1
- package/dist/es/image/index.js +11 -121
- package/dist/es/image/view/image.js +39 -0
- package/dist/es/image/view/wrapper.js +91 -0
- package/dist/es/indent/index.js +2 -2
- package/dist/es/index.css +1 -1
- package/dist/es/index.d.ts +1 -1
- package/dist/es/index.js +10 -24
- package/dist/es/inline-code/index.js +1 -1
- package/dist/es/link/index.js +5 -17
- package/dist/es/link/view/a.js +18 -0
- package/dist/es/mention/index.js +28 -13
- package/dist/es/mention/modules/suggest.js +98 -0
- package/dist/es/mention/utils/constant.js +24 -0
- package/dist/es/mention/view/suggest.js +72 -0
- package/dist/es/order-list/index.js +9 -148
- package/dist/es/order-list/utils/format.js +75 -0
- package/dist/es/order-list/utils/is.js +12 -0
- package/dist/es/order-list/utils/serial.js +68 -0
- package/dist/es/order-list/view/list.js +10 -0
- package/dist/es/quote/index.js +3 -3
- package/dist/es/{selection-badfb0bc.js → shared/components/selection.js} +3 -31
- package/dist/es/shared/icons/divider.js +5 -0
- package/dist/es/shared/icons/emoji.js +5 -0
- package/dist/es/shared/icons/font-color.js +5 -0
- package/dist/es/shared/icons/font-size.js +5 -0
- package/dist/es/shared/icons/justify.js +5 -0
- package/dist/es/shared/icons/line-height.js +5 -0
- package/dist/es/shared/icons/text.js +5 -0
- package/dist/es/shared/modules/selection.js +32 -0
- package/dist/es/{dom-71a99400.js → shared/utils/dom.js} +1 -1
- package/dist/es/shared/utils/event.js +5 -0
- package/dist/es/{is-3de778e2.js → shared/utils/is.js} +1 -1
- package/dist/es/shortcut/index.js +8 -27
- package/dist/es/shortcut/modules/preset.js +23 -0
- package/dist/es/toolbar/context/basic.js +69 -0
- package/dist/es/toolbar/context/float.js +67 -0
- package/dist/es/toolbar/context/provider.js +12 -0
- package/dist/es/toolbar/index.d.ts +1 -1
- package/dist/es/toolbar/index.js +45 -34
- package/dist/es/toolbar/modules/align.js +24 -0
- package/dist/es/toolbar/modules/bold.js +16 -0
- package/dist/es/toolbar/modules/bullet-list.js +17 -0
- package/dist/es/toolbar/modules/cut.js +7 -0
- package/dist/es/toolbar/modules/divider.js +15 -0
- package/dist/es/toolbar/modules/emoji.js +26 -0
- package/dist/es/toolbar/modules/font-color.js +50 -0
- package/dist/es/toolbar/modules/font-size.js +21 -0
- package/dist/es/toolbar/modules/heading.js +23 -0
- package/dist/es/toolbar/modules/history.js +35 -0
- package/dist/es/toolbar/modules/image.js +15 -0
- package/dist/es/toolbar/modules/inline-code.js +15 -0
- package/dist/es/toolbar/modules/italic.js +16 -0
- package/dist/es/toolbar/modules/line-height.js +17 -0
- package/dist/es/toolbar/modules/link.js +99 -0
- package/dist/es/toolbar/modules/order-list.js +17 -0
- package/dist/es/toolbar/modules/quote.js +15 -0
- package/dist/es/toolbar/modules/strike.js +15 -0
- package/dist/es/toolbar/modules/underline.js +15 -0
- package/dist/es/{marks-ac0ec630.js → toolbar/utils/marks.js} +1 -5
- 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 +10 -120
- package/dist/lib/image/view/image.js +47 -0
- package/dist/lib/image/view/wrapper.js +99 -0
- package/dist/lib/indent/index.js +3 -3
- package/dist/lib/index.css +1 -1
- package/dist/lib/index.d.ts +1 -1
- package/dist/lib/index.js +24 -38
- 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 +11 -30
- 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.d.ts +1 -1
- package/dist/lib/toolbar/index.js +45 -38
- package/dist/lib/toolbar/modules/align.js +36 -0
- package/dist/lib/toolbar/modules/bold.js +24 -0
- package/dist/lib/toolbar/modules/bullet-list.js +25 -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 +35 -0
- package/dist/lib/toolbar/modules/font-color.js +59 -0
- package/dist/lib/toolbar/modules/font-size.js +31 -0
- package/dist/lib/toolbar/modules/heading.js +35 -0
- package/dist/lib/toolbar/modules/history.js +44 -0
- package/dist/lib/toolbar/modules/image.js +23 -0
- package/dist/lib/toolbar/modules/inline-code.js +23 -0
- package/dist/lib/toolbar/modules/italic.js +24 -0
- package/dist/lib/toolbar/modules/line-height.js +27 -0
- package/dist/lib/toolbar/modules/link.js +114 -0
- package/dist/lib/toolbar/modules/order-list.js +25 -0
- package/dist/lib/toolbar/modules/quote.js +23 -0
- package/dist/lib/toolbar/modules/strike.js +23 -0
- package/dist/lib/toolbar/modules/underline.js +23 -0
- package/dist/lib/{marks-a30b8a0f.js → toolbar/utils/marks.js} +1 -4
- package/dist/styles/index.css +1 -0
- package/package.json +7 -6
- 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/lib/index-f50053bf.js +0 -506
- package/dist/lib/index-ffc4bb34.js +0 -212
- /package/dist/es/{tslib.es6-83956cc1.js → tslib.es6-910e0469.js} +0 -0
- /package/dist/lib/{tslib.es6-d44c9a95.js → tslib.es6-9953fd0d.js} +0 -0
|
@@ -1,493 +0,0 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { Trigger, Form, Input, Switch, Button } from '@arco-design/web-react';
|
|
3
|
-
import { IconAlignLeft, IconAlignCenter, IconAlignRight, IconDown, IconBold, IconUnorderedList, IconCheck, IconH1, IconH2, IconH3, IconUndo, IconRedo, IconImage, IconCode, IconItalic, IconRight, IconLink, IconOrderedList, IconQuote, IconStrikethrough, IconUnderline } from '@arco-design/web-react/icon';
|
|
4
|
-
import { NIL, cs, TRULY } from '@block-kit/utils';
|
|
5
|
-
import { ALIGN_KEY } from './align/types/index.js';
|
|
6
|
-
import React, { useRef, useState, useEffect, Fragment, forwardRef } from 'react';
|
|
7
|
-
import { BOLD_KEY } from './bold/types/index.js';
|
|
8
|
-
import { BULLET_LIST_KEY } from './bullet-list/types/index.js';
|
|
9
|
-
import { i as isBulletList } from './is-2b264ec8.js';
|
|
10
|
-
import { DIVIDER_KEY } from './divider/types/index.js';
|
|
11
|
-
import Picker from '@emoji-mart/react';
|
|
12
|
-
import { EMOJI_KEY } from './emoji/types/index.js';
|
|
13
|
-
import { BACKGROUND_KEY } from './background/types/index.js';
|
|
14
|
-
import { FONT_COLOR_KEY } from './font-color/types/index.js';
|
|
15
|
-
import { FONT_SIZE_KEY } from './font-size/types/index.js';
|
|
16
|
-
import { HEADING_KEY } from './heading/types/index.js';
|
|
17
|
-
import { EDITOR_EVENT, APPLY_SOURCE } from '@block-kit/core';
|
|
18
|
-
import { useMemoFn } from '@block-kit/utils/dist/es/hooks';
|
|
19
|
-
import { IMAGE_KEY } from './image/types/index.js';
|
|
20
|
-
import { INLINE_CODE } from './inline-code/types/index.js';
|
|
21
|
-
import { ITALIC_KEY } from './italic/types/index.js';
|
|
22
|
-
import { LINE_HEIGHT_KEY } from './line-height/types/index.js';
|
|
23
|
-
import useForm from '@arco-design/web-react/es/Form/useForm';
|
|
24
|
-
import { LINK_KEY, LINK_BLANK_KEY, LINK_TEMP_KEY } from './link/types/index.js';
|
|
25
|
-
import { ORDER_LIST_KEY } from './order-list/types/index.js';
|
|
26
|
-
import { i as isOrderList } from './is-7f3ae820.js';
|
|
27
|
-
import { QUOTE_KEY } from './quote/types/index.js';
|
|
28
|
-
import { STRIKE_KEY } from './strike/types/index.js';
|
|
29
|
-
import { UNDERLINE_KEY } from './underline/types/index.js';
|
|
30
|
-
import { useEditorStatic, useReadonly } from '@block-kit/react';
|
|
31
|
-
import { f as filterLineMarkMap, a as filterMarkMap, P as PLUGIN_EVENTS } from './marks-ac0ec630.js';
|
|
32
|
-
import ReactDOM from 'react-dom';
|
|
33
|
-
import { g as getMountDOM } from './dom-71a99400.js';
|
|
34
|
-
|
|
35
|
-
const JustifyIcon = () => (jsx("svg", { className: "arco-icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor", children: jsx("path", { d: "M875.975111 823.978667a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 1 1 0-72.021333h727.950222z m0-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 1 1 0-72.021333h727.950222z m0-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 0 1 0-72.021333h727.950222z m0-231.992889a36.010667 36.010667 0 1 1 0 72.021333H148.024889a36.010667 36.010667 0 0 1 0-72.021333h727.950222z", fill: "currentColor" }) }));
|
|
36
|
-
|
|
37
|
-
const ToolbarContext = React.createContext({
|
|
38
|
-
keys: {},
|
|
39
|
-
setKeys: () => null,
|
|
40
|
-
refreshMarks: () => null,
|
|
41
|
-
editor: null,
|
|
42
|
-
selection: null,
|
|
43
|
-
});
|
|
44
|
-
const useToolbarContext = () => React.useContext(ToolbarContext);
|
|
45
|
-
|
|
46
|
-
const MAP$1 = {
|
|
47
|
-
left: jsx(IconAlignLeft, {}),
|
|
48
|
-
center: jsx(IconAlignCenter, {}),
|
|
49
|
-
right: jsx(IconAlignRight, {}),
|
|
50
|
-
justify: jsx(JustifyIcon, {}),
|
|
51
|
-
};
|
|
52
|
-
const Align = () => {
|
|
53
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
54
|
-
return (jsx(Trigger, { trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxs("div", { className: "block-kit-toolbar-dropdown", onClick: refreshMarks, children: [jsx("div", { className: "kit-toolbar-node", onClick: () => editor.command.exec(ALIGN_KEY, { value: NIL }), children: jsx(IconAlignLeft, {}) }), jsx("div", { className: "kit-toolbar-node", onClick: () => editor.command.exec(ALIGN_KEY, { value: "center" }), children: jsx(IconAlignCenter, {}) }), jsx("div", { className: "kit-toolbar-node", onClick: () => editor.command.exec(ALIGN_KEY, { value: "right" }), children: jsx(IconAlignRight, {}) }), jsx("div", { className: "kit-toolbar-node", onClick: () => editor.command.exec(ALIGN_KEY, { value: "justify" }), children: jsx(JustifyIcon, {}) })] })), children: jsxs("div", { className: "menu-toolbar-item", children: [MAP$1[keys[ALIGN_KEY]] || jsx(IconAlignLeft, {}), jsx(IconDown, { className: "menu-toolbar-icon-down" })] }) }));
|
|
55
|
-
};
|
|
56
|
-
|
|
57
|
-
const Bold = () => {
|
|
58
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
59
|
-
const onExec = () => {
|
|
60
|
-
editor.command.exec(BOLD_KEY, { value: keys[BOLD_KEY] ? NIL : TRULY });
|
|
61
|
-
refreshMarks();
|
|
62
|
-
};
|
|
63
|
-
return (jsx("div", { className: cs("menu-toolbar-item", keys[BOLD_KEY] && "active"), onClick: onExec, children: jsx(IconBold, {}) }));
|
|
64
|
-
};
|
|
65
|
-
|
|
66
|
-
const BulletList = () => {
|
|
67
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
68
|
-
const isBullet = isBulletList(keys);
|
|
69
|
-
return (jsx("div", { className: cs("menu-toolbar-item", isBullet && "active"), onClick: () => {
|
|
70
|
-
editor.command.exec(BULLET_LIST_KEY, { value: TRULY });
|
|
71
|
-
refreshMarks();
|
|
72
|
-
}, children: jsx(IconUnorderedList, {}) }));
|
|
73
|
-
};
|
|
74
|
-
|
|
75
|
-
const Cut = () => {
|
|
76
|
-
return jsx("div", { className: "menu-toolbar-cut" });
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
const DividerIcon = () => (jsx("svg", { className: "arco-icon", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor", children: jsx("path", { d: "M64.128 810.666667h128a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-128a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333z m384 0h128a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-128a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333z m384 0h128a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-128a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333z m-768-682.666667h128a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-128a21.333333 21.333333 0 0 1-21.333333-21.333333V149.333333a21.333333 21.333333 0 0 1 21.333333-21.333333z m384 0h128a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-128a21.333333 21.333333 0 0 1-21.333333-21.333333V149.333333a21.333333 21.333333 0 0 1 21.333333-21.333333z m384 0h128a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-128a21.333333 21.333333 0 0 1-21.333333-21.333333V149.333333a21.333333 21.333333 0 0 1 21.333333-21.333333zM64 469.333333h896a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H64a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334z" }) }));
|
|
80
|
-
|
|
81
|
-
const Divider = () => {
|
|
82
|
-
const { refreshMarks, editor } = useToolbarContext();
|
|
83
|
-
return (jsx("div", { className: cs("menu-toolbar-item"), onClick: () => {
|
|
84
|
-
editor.command.exec(DIVIDER_KEY, { value: TRULY });
|
|
85
|
-
refreshMarks();
|
|
86
|
-
}, children: jsx(DividerIcon, {}) }));
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
const EmojiIcon = () => (jsxs("svg", { className: "arco-icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", "p-id": "5996", width: "1em", height: "1em", fill: "currentColor", children: [jsx("path", { d: "M512 128a384 384 0 1 0 0 768 384 384 0 0 0 0-768zM42.666667 512C42.666667 252.8 252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512z m533.333333-64a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 1 1 0 85.333334h-85.333333a42.666667 42.666667 0 0 1-42.666667-42.666667z m-254.165333 193.834667a42.666667 42.666667 0 0 1 60.330666 0 183.594667 183.594667 0 0 0 259.669334 0 42.666667 42.666667 0 0 1 60.330666 60.330666 268.928 268.928 0 0 1-380.330666 0 42.666667 42.666667 0 0 1 0-60.330666z" }), jsx("path", { d: "M362.666667 362.666667a42.666667 42.666667 0 0 1 42.666666 42.666666v80a42.666667 42.666667 0 0 1-85.333333 0V405.333333a42.666667 42.666667 0 0 1 42.666667-42.666666z" })] }));
|
|
90
|
-
|
|
91
|
-
const Emoji = () => {
|
|
92
|
-
const { editor } = useToolbarContext();
|
|
93
|
-
return (jsx(Trigger, { className: "menu-toolbar-emoji-trigger", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsx(Picker, { theme: document.body.getAttribute("arco-theme") === "dark" ? "dark" : "light", searchPosition: "none", previewPosition: "none", categories: [
|
|
94
|
-
"frequent",
|
|
95
|
-
"people",
|
|
96
|
-
"nature",
|
|
97
|
-
"foods",
|
|
98
|
-
"activity",
|
|
99
|
-
"places",
|
|
100
|
-
"objects",
|
|
101
|
-
"symbols",
|
|
102
|
-
], onEmojiSelect: (emoji) => {
|
|
103
|
-
editor.command.exec(EMOJI_KEY, { value: emoji.id });
|
|
104
|
-
}, maxFrequentRows: 2 })), trigger: "click", children: jsx("div", { className: cs("menu-toolbar-item"), children: jsx(EmojiIcon, {}) }) }));
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
const FontColorIcon = () => (jsx("svg", { className: "arco-icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor", children: jsx("path", { d: "M594.9 842.3h-94.3l-67.4-180.9H158L94.4 842.3H0.1l251.7-660.9h91.3l251.8 660.9zM406.7 586.7l-99.8-274.8c-3.1-8.8-6.5-24.2-10.2-46.1h-2.1c-3.1 19.9-6.7 35.3-10.7 46.1l-99 274.8h221.8z m284.2-183.4c46.9-29.3 101.1-43.9 162.6-43.9 113.8 0 170.7 59.7 170.7 179.2v303.8h-82.8v-73h-2.1c-32.7 56-80.9 84.1-144.6 84.1-45.8 0-82.2-12.4-109.2-37.1-27-24.7-40.5-58.2-40.5-100.3 0-88.2 52.2-139.5 156.6-154l139.9-19.6c0-77.1-31.9-115.6-95.6-115.6-56.6 0-108.2 19.1-154.9 57.2v-80.8z m139.9 217.1c-38.7 5.1-65.4 14.8-80 29-14.7 14.2-22 34.1-22 59.7 0 22.5 8 40.8 23.9 55 15.9 14.2 37 21.3 63.1 21.3 36.4 0 66.4-12.8 90-38.4 23.6-25.6 35.4-57.7 35.4-96.4v-45.2l-110.4 15z" }) }));
|
|
108
|
-
|
|
109
|
-
const COLOR = [
|
|
110
|
-
"",
|
|
111
|
-
"rgb(143, 149, 158)",
|
|
112
|
-
"rgb(216, 57, 49)",
|
|
113
|
-
"rgb(222, 120, 2)",
|
|
114
|
-
"rgb(220, 155, 4)",
|
|
115
|
-
"rgb(46, 161, 33)",
|
|
116
|
-
"rgb(36, 91, 219)",
|
|
117
|
-
"rgb(100, 37, 208)",
|
|
118
|
-
];
|
|
119
|
-
const BACKGROUND = [
|
|
120
|
-
"",
|
|
121
|
-
"rgb(242, 243, 245)",
|
|
122
|
-
"rgb(251, 191, 188)",
|
|
123
|
-
"rgba(254, 212, 164, 0.8)",
|
|
124
|
-
"rgba(255, 246, 122, 0.8)",
|
|
125
|
-
"rgba(183, 237, 177, 0.8)",
|
|
126
|
-
"rgba(186, 206, 253, 0.7)",
|
|
127
|
-
"rgba(205, 178, 250, 0.7)",
|
|
128
|
-
"rgba(222, 224, 227, 0.8)",
|
|
129
|
-
"rgb(187, 191, 196)",
|
|
130
|
-
"rgb(247, 105, 100)",
|
|
131
|
-
"rgb(255, 165, 61)",
|
|
132
|
-
"rgb(255, 233, 40)",
|
|
133
|
-
"rgb(98, 210, 86)",
|
|
134
|
-
"rgba(78, 131, 253, 0.55)",
|
|
135
|
-
"rgba(147, 90, 246, 0.55)",
|
|
136
|
-
];
|
|
137
|
-
const FontColor = () => {
|
|
138
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
139
|
-
return (jsx(Trigger, { trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxs("div", { className: "block-kit-toolbar-dropdown block-kit-color-picker", onClick: refreshMarks, children: [jsx("div", { className: "kit-color-picker-label", children: "\u5B57\u4F53\u989C\u8272" }), jsx("div", { className: "kit-picker-group", children: COLOR.map(it => (jsx("div", { className: cs("kit-picker-item-wrapper", keys[FONT_COLOR_KEY] === it && "active", !keys[FONT_COLOR_KEY] && !it && "active"), style: { color: it ? it : void 0 }, onClick: () => {
|
|
140
|
-
editor.command.exec(FONT_COLOR_KEY, { value: it });
|
|
141
|
-
refreshMarks();
|
|
142
|
-
}, children: jsx("div", { className: "kit-picker-item", children: jsx(FontColorIcon, {}) }) }, it))) }), jsx("div", { className: "kit-color-picker-label", children: "\u80CC\u666F\u989C\u8272" }), jsx("div", { className: "kit-picker-group kit-picker-background-case", children: BACKGROUND.map(it => (jsx("div", { className: cs("kit-picker-item-wrapper", keys[BACKGROUND_KEY] === it && "active", !keys[BACKGROUND_KEY] && !it && "active"), onClick: () => {
|
|
143
|
-
editor.command.exec(BACKGROUND_KEY, { value: it });
|
|
144
|
-
refreshMarks();
|
|
145
|
-
}, children: jsx("div", { style: { background: it ? it : void 0 }, className: cs("kit-picker-item", !it && "kit-picker-item-empty-background") }) }, it))) })] })), children: jsxs("div", { className: "menu-toolbar-item kit-color-case", children: [jsx("div", { className: "kit-color-block", style: { color: keys[FONT_COLOR_KEY], background: keys[BACKGROUND_KEY] }, children: jsx(FontColorIcon, {}) }), jsx(IconDown, { className: "menu-toolbar-icon-down" })] }) }));
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
const FontSizeIcon = () => (jsxs("svg", { className: "arco-icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor", children: [jsx("path", { d: "M597.333333 853.333333h85.333334L426.666667 170.666667H341.333333L85.333333 853.333333h85.333334l80-213.333333h266.666666z m-314.666666-298.666666L384 284.458667 485.333333 554.666667z" }), jsx("path", { d: "M918.784 331.178667V257.450667L832 170.666667l-86.784 86.784v73.728L810.666667 265.685333v492.629334l-65.450667-65.493334v73.728L832 853.333333l86.784-86.784v-73.728L853.333333 758.314667V265.685333l65.450667 65.493334z" })] }));
|
|
149
|
-
|
|
150
|
-
const STEP$1 = Array(10)
|
|
151
|
-
.fill(null)
|
|
152
|
-
.map((_, i) => String(i + 12));
|
|
153
|
-
const FontSize = () => {
|
|
154
|
-
const triggerRef = useRef(null);
|
|
155
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
156
|
-
return (jsx(Trigger, { ref: triggerRef, popupAlign: { bottom: 10 }, trigger: "click", getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxs("div", { className: "block-kit-toolbar-dropdown", onClick: refreshMarks, children: [jsxs("div", { className: "block-kit-toolbar-height-item kit-toolbar-node", onClick: () => editor.command.exec(FONT_SIZE_KEY, { value: NIL }), children: [!keys[FONT_SIZE_KEY] && jsx(IconCheck, {}), "\u9ED8\u8BA4"] }), STEP$1.map(item => (jsxs("div", { className: "block-kit-toolbar-height-item kit-toolbar-node", onClick: () => editor.command.exec(FONT_SIZE_KEY, { value: item }), children: [keys[FONT_SIZE_KEY] === item && jsx(IconCheck, {}), item, "px"] }, item)))] })), children: jsxs("div", { className: "menu-toolbar-item", children: [jsx(FontSizeIcon, {}), jsx(IconDown, { className: "menu-toolbar-icon-down" })] }) }));
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
const TextIcon = () => (jsx("svg", { className: "arco-icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor", children: jsx("path", { d: "M853.333333 138.666667H170.666667c-17.066667 0-32 14.933333-32 32v128c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V202.666667h277.333333v618.666666H384c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h256c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32h-96v-618.666666h277.333333V298.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V170.666667c0-17.066667-14.933333-32-32-32z" }) }));
|
|
160
|
-
|
|
161
|
-
const MAP = {
|
|
162
|
-
h1: jsx(IconH1, {}),
|
|
163
|
-
h2: jsx(IconH2, {}),
|
|
164
|
-
h3: jsx(IconH3, {}),
|
|
165
|
-
};
|
|
166
|
-
const Heading = () => {
|
|
167
|
-
const { keys, refreshMarks, editor: { command }, } = useToolbarContext();
|
|
168
|
-
return (jsx(Trigger, { trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxs("div", { className: "block-kit-toolbar-dropdown", onClick: refreshMarks, children: [jsx("div", { className: "kit-toolbar-node", onClick: () => command.exec(HEADING_KEY, { value: NIL }), children: jsx(TextIcon, {}) }), jsx("div", { className: "kit-toolbar-node", onClick: () => command.exec(HEADING_KEY, { value: "h1" }), children: jsx(IconH1, {}) }), jsx("div", { className: "kit-toolbar-node", onClick: () => command.exec(HEADING_KEY, { value: "h2" }), children: jsx(IconH2, {}) }), jsx("div", { className: "kit-toolbar-node", onClick: () => command.exec(HEADING_KEY, { value: "h3" }), children: jsx(IconH3, {}) })] })), children: jsxs("div", { className: "menu-toolbar-item", children: [MAP[keys[HEADING_KEY]] || jsx(TextIcon, {}), jsx(IconDown, { className: "menu-toolbar-icon-down" })] }) }));
|
|
169
|
-
};
|
|
170
|
-
|
|
171
|
-
const History = () => {
|
|
172
|
-
const { editor, refreshMarks } = useToolbarContext();
|
|
173
|
-
const [undoable, setUndoable] = useState(false);
|
|
174
|
-
const [redoable, setRedoable] = useState(false);
|
|
175
|
-
const refresh = useMemoFn(() => {
|
|
176
|
-
setUndoable(editor.history.isUndoAble());
|
|
177
|
-
setRedoable(editor.history.isRedoAble());
|
|
178
|
-
});
|
|
179
|
-
useEffect(() => {
|
|
180
|
-
editor.event.on(EDITOR_EVENT.CONTENT_CHANGE, refresh, 1000);
|
|
181
|
-
return () => {
|
|
182
|
-
editor.event.off(EDITOR_EVENT.CONTENT_CHANGE, refresh);
|
|
183
|
-
};
|
|
184
|
-
}, [editor, refresh]);
|
|
185
|
-
const undo = () => {
|
|
186
|
-
editor.history.undo();
|
|
187
|
-
refreshMarks();
|
|
188
|
-
};
|
|
189
|
-
const redo = () => {
|
|
190
|
-
editor.history.redo();
|
|
191
|
-
refreshMarks();
|
|
192
|
-
};
|
|
193
|
-
return (jsxs(Fragment, { children: [jsx("div", { className: cs("menu-toolbar-item", !undoable && "disable"), onClick: undo, children: jsx(IconUndo, {}) }), jsx("div", { className: cs("menu-toolbar-item", !redoable && "disable"), onClick: redo, children: jsx(IconRedo, {}) })] }));
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
const Image = () => {
|
|
197
|
-
const { refreshMarks, editor } = useToolbarContext();
|
|
198
|
-
return (jsx("div", { className: cs("menu-toolbar-item"), onClick: () => {
|
|
199
|
-
editor.command.exec(IMAGE_KEY, { value: TRULY });
|
|
200
|
-
refreshMarks();
|
|
201
|
-
}, children: jsx(IconImage, {}) }));
|
|
202
|
-
};
|
|
203
|
-
|
|
204
|
-
const InlineCode = () => {
|
|
205
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
206
|
-
return (jsx("div", { className: cs("menu-toolbar-item", keys[INLINE_CODE] && "active"), onClick: () => {
|
|
207
|
-
editor.command.exec(INLINE_CODE, { value: keys[INLINE_CODE] ? NIL : TRULY });
|
|
208
|
-
refreshMarks();
|
|
209
|
-
}, children: jsx(IconCode, {}) }));
|
|
210
|
-
};
|
|
211
|
-
|
|
212
|
-
const Italic = () => {
|
|
213
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
214
|
-
const onExec = () => {
|
|
215
|
-
editor.command.exec(ITALIC_KEY, { value: keys[ITALIC_KEY] ? NIL : TRULY });
|
|
216
|
-
refreshMarks();
|
|
217
|
-
};
|
|
218
|
-
return (jsx("div", { className: cs("menu-toolbar-item", keys[ITALIC_KEY] && "active"), onClick: onExec, children: jsx(IconItalic, {}) }));
|
|
219
|
-
};
|
|
220
|
-
|
|
221
|
-
const LineHeightIcon = () => (jsx("svg", { className: "arco-icon", viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor", children: jsx("path", { d: "M469.333333 170.666667h426.666667v85.333333H469.333333V170.666667zM256 298.666667v170.666666H170.666667V298.666667H42.666667l170.666666-170.666667 170.666667 170.666667H256z m0 426.666666h128l-170.666667 170.666667-170.666666-170.666667h128v-170.666666h85.333333v170.666666z m213.333333 42.666667h426.666667v85.333333H469.333333v-85.333333z m-85.333333-298.666667h512v85.333334H384v-85.333334z" }) }));
|
|
222
|
-
|
|
223
|
-
const STEP = [...Array.from({ length: 11 }, (_, i) => i * 0.1 + 1.5), 3].map(v => v.toFixed(1).toString());
|
|
224
|
-
const LineHeight = () => {
|
|
225
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
226
|
-
return (jsx(Trigger, { trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxs("div", { className: "block-kit-toolbar-dropdown", onClick: refreshMarks, children: [jsxs("div", { className: "block-kit-toolbar-height-item kit-toolbar-node", onClick: () => editor.command.exec(LINE_HEIGHT_KEY, { value: NIL }), children: [!keys[LINE_HEIGHT_KEY] && jsx(IconCheck, {}), "\u9ED8\u8BA4"] }), STEP.map(item => (jsxs("div", { className: "block-kit-toolbar-height-item kit-toolbar-node", onClick: () => editor.command.exec(LINE_HEIGHT_KEY, { value: item }), children: [keys[LINE_HEIGHT_KEY] === item && jsx(IconCheck, {}), item] }, item)))] })), children: jsxs("div", { className: "menu-toolbar-item", children: [jsx(LineHeightIcon, {}), jsx(IconDown, { className: "menu-toolbar-icon-down" })] }) }));
|
|
227
|
-
};
|
|
228
|
-
|
|
229
|
-
const Link = props => {
|
|
230
|
-
const [form] = useForm();
|
|
231
|
-
const [visible, setVisible] = useState(false);
|
|
232
|
-
const [collapsed, setCollapsed] = useState(true);
|
|
233
|
-
const { keys, refreshMarks, editor, selection } = useToolbarContext();
|
|
234
|
-
const onConfirm = () => {
|
|
235
|
-
const sel = editor.selection.get();
|
|
236
|
-
if (!sel)
|
|
237
|
-
return void 0;
|
|
238
|
-
const insert = form.getFieldValue("link-insert");
|
|
239
|
-
const href = form.getFieldValue(LINK_KEY);
|
|
240
|
-
const blank = form.getFieldValue(LINK_BLANK_KEY);
|
|
241
|
-
if (!href)
|
|
242
|
-
return void 0;
|
|
243
|
-
const filteredHref = props.filterXSS ? props.filterXSS(href) : href;
|
|
244
|
-
if (sel.isCollapsed) {
|
|
245
|
-
// 折叠选区的情况下则插入文本
|
|
246
|
-
if (!insert)
|
|
247
|
-
return void 0;
|
|
248
|
-
editor.collect.marks = Object.assign(Object.assign({}, editor.collect.marks), { [LINK_KEY]: filteredHref });
|
|
249
|
-
if (blank) {
|
|
250
|
-
editor.collect.marks[LINK_BLANK_KEY] = TRULY;
|
|
251
|
-
}
|
|
252
|
-
editor.perform.insertText(sel, insert);
|
|
253
|
-
}
|
|
254
|
-
else {
|
|
255
|
-
// 非折叠选区则应用链接
|
|
256
|
-
editor.perform.applyMarks(sel, {
|
|
257
|
-
[LINK_KEY]: filteredHref,
|
|
258
|
-
[LINK_BLANK_KEY]: blank ? TRULY : NIL,
|
|
259
|
-
[LINK_TEMP_KEY]: NIL,
|
|
260
|
-
}, { autoCaret: false });
|
|
261
|
-
}
|
|
262
|
-
setVisible(false);
|
|
263
|
-
refreshMarks();
|
|
264
|
-
};
|
|
265
|
-
const onDelete = () => {
|
|
266
|
-
const sel = editor.selection.get();
|
|
267
|
-
if (!sel || sel.isCollapsed) {
|
|
268
|
-
setVisible(false);
|
|
269
|
-
return void 0;
|
|
270
|
-
}
|
|
271
|
-
editor.perform.applyMarks(sel, { [LINK_TEMP_KEY]: NIL, [LINK_BLANK_KEY]: NIL, [LINK_KEY]: NIL }, { autoCaret: false });
|
|
272
|
-
setVisible(false);
|
|
273
|
-
refreshMarks();
|
|
274
|
-
};
|
|
275
|
-
useEffect(() => {
|
|
276
|
-
if (visible) {
|
|
277
|
-
form.resetFields();
|
|
278
|
-
const sel = editor.selection.get();
|
|
279
|
-
const state = sel && sel.isCollapsed;
|
|
280
|
-
setCollapsed(!!state);
|
|
281
|
-
}
|
|
282
|
-
}, [editor.selection, form, visible]);
|
|
283
|
-
const onFocus = () => {
|
|
284
|
-
const sel = editor.selection.get();
|
|
285
|
-
if (sel && !sel.isCollapsed) {
|
|
286
|
-
// 由于焦点转移, 因此需要将临时标记应用到选区
|
|
287
|
-
editor.perform.applyMarks(sel, { [LINK_TEMP_KEY]: TRULY }, { autoCaret: false, source: APPLY_SOURCE.NO_UNDO });
|
|
288
|
-
editor.event.once(EDITOR_EVENT.SELECTION_CHANGE, () => {
|
|
289
|
-
// 这里是需要等待渲染后再执行, 否则会导致选区校正无法获取 LineNode
|
|
290
|
-
Promise.resolve().then(() => {
|
|
291
|
-
editor.perform.applyMarks(sel, { [LINK_TEMP_KEY]: NIL }, { autoCaret: false, source: APPLY_SOURCE.NO_UNDO });
|
|
292
|
-
});
|
|
293
|
-
});
|
|
294
|
-
}
|
|
295
|
-
};
|
|
296
|
-
const go = () => {
|
|
297
|
-
const href = form.getFieldValue(LINK_KEY);
|
|
298
|
-
if (!href)
|
|
299
|
-
return void 0;
|
|
300
|
-
window.open(href, "_blank");
|
|
301
|
-
};
|
|
302
|
-
return (jsx(Trigger, { popupVisible: visible, onVisibleChange: setVisible, trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => {
|
|
303
|
-
return (jsxs("div", { className: "block-kit-link-popup", children: [jsxs(Form, { initialValues: keys, form: form, size: "small", labelCol: { span: 6, offset: 0 }, wrapperCol: { span: 18, offset: 0 }, labelAlign: "left", onSubmit: onConfirm, children: [collapsed && (jsx(Form.Item, { label: "\u6587\u672C\u5185\u5BB9", field: "link-insert", children: jsx(Input, { "data-no-prevent": true, autoComplete: "off", size: "mini", placeholder: "\u8F93\u5165\u6587\u672C" }) })), jsx(Form.Item, { label: "\u94FE\u63A5\u5730\u5740", field: LINK_KEY, children: jsx(Input, { "data-no-prevent": true, autoComplete: "off", size: "mini", placeholder: "\u8F93\u5165\u94FE\u63A5", onFocus: onFocus, addAfter: jsx(IconRight, { onClick: go, className: "block-kit-link-popup-go" }) }) }), jsx(Form.Item, { label: "\u65B0\u9875\u9762\u6253\u5F00", field: LINK_BLANK_KEY, triggerPropName: "checked", children: jsx(Switch, {}) })] }), jsxs("div", { className: "block-kit-link-popup-button", children: [jsx(Button, { size: "mini", htmlType: "submit", type: "primary", onClick: onConfirm, children: "\u786E\u5B9A" }), jsx(Button, { size: "mini", type: "primary", status: "danger", onClick: onDelete, children: "\u5220\u9664" })] })] }));
|
|
304
|
-
}, children: jsx("div", { className: cs("menu-toolbar-item", keys[LINK_KEY] && selection && !selection.isCollapsed && "active"), children: jsx(IconLink, {}) }) }));
|
|
305
|
-
};
|
|
306
|
-
|
|
307
|
-
const OrderList = () => {
|
|
308
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
309
|
-
const isOrder = isOrderList(keys);
|
|
310
|
-
return (jsx("div", { className: cs("menu-toolbar-item", isOrder && "active"), onClick: () => {
|
|
311
|
-
editor.command.exec(ORDER_LIST_KEY, { value: TRULY });
|
|
312
|
-
refreshMarks();
|
|
313
|
-
}, children: jsx(IconOrderedList, {}) }));
|
|
314
|
-
};
|
|
315
|
-
|
|
316
|
-
const Quote = () => {
|
|
317
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
318
|
-
return (jsx("div", { className: cs("menu-toolbar-item", keys[QUOTE_KEY] && "active"), onClick: () => {
|
|
319
|
-
editor.command.exec(QUOTE_KEY, { value: TRULY });
|
|
320
|
-
refreshMarks();
|
|
321
|
-
}, children: jsx(IconQuote, {}) }));
|
|
322
|
-
};
|
|
323
|
-
|
|
324
|
-
const Strike = () => {
|
|
325
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
326
|
-
return (jsx("div", { className: cs("menu-toolbar-item", keys[STRIKE_KEY] && "active"), onClick: () => {
|
|
327
|
-
editor.command.exec(STRIKE_KEY, { value: keys[STRIKE_KEY] ? NIL : TRULY });
|
|
328
|
-
refreshMarks();
|
|
329
|
-
}, children: jsx(IconStrikethrough, {}) }));
|
|
330
|
-
};
|
|
331
|
-
|
|
332
|
-
const Underline = () => {
|
|
333
|
-
const { keys, refreshMarks, editor } = useToolbarContext();
|
|
334
|
-
return (jsx("div", { className: cs("menu-toolbar-item", keys[UNDERLINE_KEY] && "active"), onClick: () => {
|
|
335
|
-
editor.command.exec(UNDERLINE_KEY, { value: keys[UNDERLINE_KEY] ? NIL : TRULY });
|
|
336
|
-
refreshMarks();
|
|
337
|
-
}, children: jsx(IconUnderline, {}) }));
|
|
338
|
-
};
|
|
339
|
-
|
|
340
|
-
const Toolbar = forwardRef((props, ref) => {
|
|
341
|
-
const { editor } = useEditorStatic();
|
|
342
|
-
const [keys, setKeys] = useState({});
|
|
343
|
-
const refreshMarks = useMemoFn(() => {
|
|
344
|
-
const current = editor.selection.get();
|
|
345
|
-
if (!current) {
|
|
346
|
-
setKeys({});
|
|
347
|
-
return void 0;
|
|
348
|
-
}
|
|
349
|
-
const lines = editor.state.block.getLines();
|
|
350
|
-
const { start, end } = current;
|
|
351
|
-
const lineMarkMap = filterLineMarkMap(lines.slice(start.line, end.line + 1).map(line => line.attributes));
|
|
352
|
-
if (current.isCollapsed) {
|
|
353
|
-
setKeys(Object.assign(Object.assign({}, editor.collect.marks), lineMarkMap));
|
|
354
|
-
return void 0;
|
|
355
|
-
}
|
|
356
|
-
const ops = [];
|
|
357
|
-
if (current.isCollapsed) {
|
|
358
|
-
const op = editor.collect.getOpAtPoint(current.start);
|
|
359
|
-
op && ops.push(op);
|
|
360
|
-
}
|
|
361
|
-
else {
|
|
362
|
-
const fragment = editor.collect.getFragment();
|
|
363
|
-
fragment && ops.push(...fragment);
|
|
364
|
-
}
|
|
365
|
-
const markMap = filterMarkMap(ops);
|
|
366
|
-
setKeys(Object.assign(Object.assign({}, markMap), lineMarkMap));
|
|
367
|
-
});
|
|
368
|
-
useEffect(() => {
|
|
369
|
-
editor.event.on(EDITOR_EVENT.SELECTION_CHANGE, refreshMarks);
|
|
370
|
-
editor.event.on(PLUGIN_EVENTS.SHORTCUT_MARKS_CHANGE, refreshMarks);
|
|
371
|
-
return () => {
|
|
372
|
-
editor.event.off(EDITOR_EVENT.SELECTION_CHANGE, refreshMarks);
|
|
373
|
-
editor.event.off(PLUGIN_EVENTS.SHORTCUT_MARKS_CHANGE, refreshMarks);
|
|
374
|
-
};
|
|
375
|
-
}, [editor.event, refreshMarks]);
|
|
376
|
-
// 浮动工具栏的情况下, 挂载时需要刷新 marks
|
|
377
|
-
useEffect(() => {
|
|
378
|
-
refreshMarks();
|
|
379
|
-
}, [refreshMarks]);
|
|
380
|
-
return (jsx("div", { ref: ref, style: props.styles, className: cs("block-kit-menu-toolbar", props.className), onMouseDown: e => {
|
|
381
|
-
const target = e.target;
|
|
382
|
-
// 避免 float 的情况下触发按下事件
|
|
383
|
-
e.stopPropagation();
|
|
384
|
-
// 存在需要抢夺焦点的情况, 例如超链接输入的弹出层
|
|
385
|
-
if (target instanceof HTMLElement && target.hasAttribute("data-no-prevent")) {
|
|
386
|
-
return void 0;
|
|
387
|
-
}
|
|
388
|
-
e.preventDefault();
|
|
389
|
-
}, children: jsx(ToolbarContext.Provider, { value: {
|
|
390
|
-
keys,
|
|
391
|
-
editor,
|
|
392
|
-
setKeys,
|
|
393
|
-
refreshMarks,
|
|
394
|
-
selection: editor.selection.get(),
|
|
395
|
-
}, children: props.children }) }));
|
|
396
|
-
});
|
|
397
|
-
|
|
398
|
-
const FloatToolbar = props => {
|
|
399
|
-
const { editor } = useEditorStatic();
|
|
400
|
-
const { readonly } = useReadonly();
|
|
401
|
-
const [top, setTop] = useState(0);
|
|
402
|
-
const [left, setLeft] = useState(0);
|
|
403
|
-
const [visible, setVisible] = useState(false);
|
|
404
|
-
const [isInterim, setIsInterim] = useState(true);
|
|
405
|
-
const [isMouseDown, setIsMouseDown] = useState(false);
|
|
406
|
-
const ref = useRef(null);
|
|
407
|
-
const onWeakUp = useMemoFn((wakeUp) => {
|
|
408
|
-
if (editor.state.isFocused() && wakeUp) {
|
|
409
|
-
setVisible(true);
|
|
410
|
-
}
|
|
411
|
-
else {
|
|
412
|
-
setVisible(false);
|
|
413
|
-
}
|
|
414
|
-
});
|
|
415
|
-
useEffect(() => {
|
|
416
|
-
if (readonly)
|
|
417
|
-
return void 0;
|
|
418
|
-
const onMouseUp = () => {
|
|
419
|
-
setIsMouseDown(false);
|
|
420
|
-
};
|
|
421
|
-
const onMouseDown = () => {
|
|
422
|
-
setIsMouseDown(true);
|
|
423
|
-
};
|
|
424
|
-
const onSelectionChange = (e) => {
|
|
425
|
-
const { current } = e;
|
|
426
|
-
const isWakeUp = current ? !current.isCollapsed : false;
|
|
427
|
-
onWeakUp(isWakeUp);
|
|
428
|
-
};
|
|
429
|
-
document.addEventListener(EDITOR_EVENT.MOUSE_UP, onMouseUp);
|
|
430
|
-
document.addEventListener(EDITOR_EVENT.MOUSE_DOWN, onMouseDown);
|
|
431
|
-
editor.event.on(EDITOR_EVENT.SELECTION_CHANGE, onSelectionChange);
|
|
432
|
-
return () => {
|
|
433
|
-
document.removeEventListener(EDITOR_EVENT.MOUSE_UP, onMouseUp);
|
|
434
|
-
document.removeEventListener(EDITOR_EVENT.MOUSE_DOWN, onMouseDown);
|
|
435
|
-
editor.event.off(EDITOR_EVENT.SELECTION_CHANGE, onSelectionChange);
|
|
436
|
-
};
|
|
437
|
-
}, [editor, onWeakUp, readonly]);
|
|
438
|
-
useEffect(() => {
|
|
439
|
-
const el = ref.current;
|
|
440
|
-
if (!readonly && visible && !isMouseDown) {
|
|
441
|
-
const rect = editor.rect.getSelectionRect();
|
|
442
|
-
if (rect && el) {
|
|
443
|
-
const topOffset = props.offsetTop || 0;
|
|
444
|
-
const leftOffset = props.offsetLeft || 0;
|
|
445
|
-
const t = rect.top - el.offsetHeight + topOffset;
|
|
446
|
-
const l = rect.left - el.offsetWidth / 2 + rect.width / 2 + leftOffset;
|
|
447
|
-
setTop(t);
|
|
448
|
-
setLeft(l);
|
|
449
|
-
}
|
|
450
|
-
setIsInterim(false);
|
|
451
|
-
}
|
|
452
|
-
else {
|
|
453
|
-
setTop(-999999);
|
|
454
|
-
setLeft(-999999);
|
|
455
|
-
setIsInterim(true);
|
|
456
|
-
}
|
|
457
|
-
}, [readonly, visible, isMouseDown, editor.rect, props.offsetLeft, props.offsetTop]);
|
|
458
|
-
// 只读状态 / 不可见 / 鼠标按下 时隐藏
|
|
459
|
-
return readonly || !visible || isMouseDown
|
|
460
|
-
? null
|
|
461
|
-
: ReactDOM.createPortal(jsx(Toolbar, { ref: ref, className: cs("block-kit-float-toolbar", props.className), styles: {
|
|
462
|
-
top: top,
|
|
463
|
-
left: left,
|
|
464
|
-
opacity: isInterim ? 0 : void 0,
|
|
465
|
-
zIndex: isInterim ? -99999 : void 0,
|
|
466
|
-
visibility: isInterim ? "hidden" : void 0,
|
|
467
|
-
pointerEvents: isInterim ? "none" : void 0,
|
|
468
|
-
}, children: props.children }), getMountDOM(editor));
|
|
469
|
-
};
|
|
470
|
-
|
|
471
|
-
const Mixin = {
|
|
472
|
-
Cut,
|
|
473
|
-
Bold,
|
|
474
|
-
Link,
|
|
475
|
-
Quote,
|
|
476
|
-
Image,
|
|
477
|
-
Align,
|
|
478
|
-
Emoji,
|
|
479
|
-
Italic,
|
|
480
|
-
Strike,
|
|
481
|
-
History,
|
|
482
|
-
Heading,
|
|
483
|
-
Divider,
|
|
484
|
-
FontSize,
|
|
485
|
-
FontColor,
|
|
486
|
-
OrderList,
|
|
487
|
-
Underline,
|
|
488
|
-
BulletList,
|
|
489
|
-
InlineCode,
|
|
490
|
-
LineHeight,
|
|
491
|
-
};
|
|
492
|
-
|
|
493
|
-
export { FloatToolbar as F, Mixin as M, Toolbar as T, ToolbarContext as a, useToolbarContext as u };
|
package/dist/es/is-7f3ae820.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { LIST_TYPE_KEY } from './bullet-list/types/index.js';
|
|
2
|
-
import { ORDER_LIST_TYPE } from './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 as i };
|