@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.
Files changed (137) hide show
  1. package/dist/es/bullet-list/index.js +6 -10
  2. package/dist/es/{is-2b264ec8.js → bullet-list/utils/is.js} +2 -2
  3. package/dist/es/bullet-list/view/list.js +9 -0
  4. package/dist/es/divider/index.js +4 -4
  5. package/dist/es/emoji/index.js +1 -1
  6. package/dist/es/image/index.js +11 -121
  7. package/dist/es/image/view/image.js +39 -0
  8. package/dist/es/image/view/wrapper.js +91 -0
  9. package/dist/es/indent/index.js +2 -2
  10. package/dist/es/index.css +1 -1
  11. package/dist/es/index.d.ts +1 -1
  12. package/dist/es/index.js +10 -24
  13. package/dist/es/inline-code/index.js +1 -1
  14. package/dist/es/link/index.js +5 -17
  15. package/dist/es/link/view/a.js +18 -0
  16. package/dist/es/mention/index.js +28 -13
  17. package/dist/es/mention/modules/suggest.js +98 -0
  18. package/dist/es/mention/utils/constant.js +24 -0
  19. package/dist/es/mention/view/suggest.js +72 -0
  20. package/dist/es/order-list/index.js +9 -148
  21. package/dist/es/order-list/utils/format.js +75 -0
  22. package/dist/es/order-list/utils/is.js +12 -0
  23. package/dist/es/order-list/utils/serial.js +68 -0
  24. package/dist/es/order-list/view/list.js +10 -0
  25. package/dist/es/quote/index.js +3 -3
  26. package/dist/es/{selection-badfb0bc.js → shared/components/selection.js} +3 -31
  27. package/dist/es/shared/icons/divider.js +5 -0
  28. package/dist/es/shared/icons/emoji.js +5 -0
  29. package/dist/es/shared/icons/font-color.js +5 -0
  30. package/dist/es/shared/icons/font-size.js +5 -0
  31. package/dist/es/shared/icons/justify.js +5 -0
  32. package/dist/es/shared/icons/line-height.js +5 -0
  33. package/dist/es/shared/icons/text.js +5 -0
  34. package/dist/es/shared/modules/selection.js +32 -0
  35. package/dist/es/{dom-71a99400.js → shared/utils/dom.js} +1 -1
  36. package/dist/es/shared/utils/event.js +5 -0
  37. package/dist/es/{is-3de778e2.js → shared/utils/is.js} +1 -1
  38. package/dist/es/shortcut/index.js +8 -27
  39. package/dist/es/shortcut/modules/preset.js +23 -0
  40. package/dist/es/toolbar/context/basic.js +69 -0
  41. package/dist/es/toolbar/context/float.js +67 -0
  42. package/dist/es/toolbar/context/provider.js +12 -0
  43. package/dist/es/toolbar/index.d.ts +1 -1
  44. package/dist/es/toolbar/index.js +45 -34
  45. package/dist/es/toolbar/modules/align.js +24 -0
  46. package/dist/es/toolbar/modules/bold.js +16 -0
  47. package/dist/es/toolbar/modules/bullet-list.js +17 -0
  48. package/dist/es/toolbar/modules/cut.js +7 -0
  49. package/dist/es/toolbar/modules/divider.js +15 -0
  50. package/dist/es/toolbar/modules/emoji.js +26 -0
  51. package/dist/es/toolbar/modules/font-color.js +50 -0
  52. package/dist/es/toolbar/modules/font-size.js +21 -0
  53. package/dist/es/toolbar/modules/heading.js +23 -0
  54. package/dist/es/toolbar/modules/history.js +35 -0
  55. package/dist/es/toolbar/modules/image.js +15 -0
  56. package/dist/es/toolbar/modules/inline-code.js +15 -0
  57. package/dist/es/toolbar/modules/italic.js +16 -0
  58. package/dist/es/toolbar/modules/line-height.js +17 -0
  59. package/dist/es/toolbar/modules/link.js +99 -0
  60. package/dist/es/toolbar/modules/order-list.js +17 -0
  61. package/dist/es/toolbar/modules/quote.js +15 -0
  62. package/dist/es/toolbar/modules/strike.js +15 -0
  63. package/dist/es/toolbar/modules/underline.js +15 -0
  64. package/dist/es/{marks-ac0ec630.js → toolbar/utils/marks.js} +1 -5
  65. package/dist/lib/bullet-list/index.js +21 -25
  66. package/dist/lib/{is-fa1755d0.js → bullet-list/utils/is.js} +3 -1
  67. package/dist/lib/bullet-list/view/list.js +13 -0
  68. package/dist/lib/divider/index.js +7 -7
  69. package/dist/lib/emoji/index.js +1 -1
  70. package/dist/lib/image/index.js +10 -120
  71. package/dist/lib/image/view/image.js +47 -0
  72. package/dist/lib/image/view/wrapper.js +99 -0
  73. package/dist/lib/indent/index.js +3 -3
  74. package/dist/lib/index.css +1 -1
  75. package/dist/lib/index.d.ts +1 -1
  76. package/dist/lib/index.js +24 -38
  77. package/dist/lib/inline-code/index.js +1 -1
  78. package/dist/lib/link/index.js +3 -15
  79. package/dist/lib/link/view/a.js +22 -0
  80. package/dist/lib/mention/index.js +26 -15
  81. package/dist/lib/mention/modules/suggest.js +106 -0
  82. package/dist/lib/mention/utils/constant.js +29 -0
  83. package/dist/lib/mention/view/suggest.js +76 -0
  84. package/dist/lib/order-list/index.js +34 -173
  85. package/dist/lib/order-list/utils/format.js +79 -0
  86. package/dist/lib/{is-18806678.js → order-list/utils/is.js} +4 -2
  87. package/dist/lib/order-list/utils/serial.js +72 -0
  88. package/dist/lib/order-list/view/list.js +14 -0
  89. package/dist/lib/quote/index.js +12 -12
  90. package/dist/lib/{selection-868f15c1.js → shared/components/selection.js} +2 -29
  91. package/dist/lib/shared/icons/divider.js +9 -0
  92. package/dist/lib/shared/icons/emoji.js +9 -0
  93. package/dist/lib/shared/icons/font-color.js +9 -0
  94. package/dist/lib/shared/icons/font-size.js +9 -0
  95. package/dist/lib/shared/icons/justify.js +9 -0
  96. package/dist/lib/shared/icons/line-height.js +9 -0
  97. package/dist/lib/shared/icons/text.js +9 -0
  98. package/dist/lib/shared/modules/selection.js +36 -0
  99. package/dist/lib/{dom-cb8b8e40.js → shared/utils/dom.js} +2 -0
  100. package/dist/lib/shared/utils/event.js +9 -0
  101. package/dist/lib/{is-473d664a.js → shared/utils/is.js} +2 -0
  102. package/dist/lib/shortcut/index.js +11 -30
  103. package/dist/lib/shortcut/modules/preset.js +27 -0
  104. package/dist/lib/toolbar/context/basic.js +73 -0
  105. package/dist/lib/toolbar/context/float.js +75 -0
  106. package/dist/lib/toolbar/context/provider.js +21 -0
  107. package/dist/lib/toolbar/index.d.ts +1 -1
  108. package/dist/lib/toolbar/index.js +45 -38
  109. package/dist/lib/toolbar/modules/align.js +36 -0
  110. package/dist/lib/toolbar/modules/bold.js +24 -0
  111. package/dist/lib/toolbar/modules/bullet-list.js +25 -0
  112. package/dist/lib/toolbar/modules/cut.js +11 -0
  113. package/dist/lib/toolbar/modules/divider.js +19 -0
  114. package/dist/lib/toolbar/modules/emoji.js +35 -0
  115. package/dist/lib/toolbar/modules/font-color.js +59 -0
  116. package/dist/lib/toolbar/modules/font-size.js +31 -0
  117. package/dist/lib/toolbar/modules/heading.js +35 -0
  118. package/dist/lib/toolbar/modules/history.js +44 -0
  119. package/dist/lib/toolbar/modules/image.js +23 -0
  120. package/dist/lib/toolbar/modules/inline-code.js +23 -0
  121. package/dist/lib/toolbar/modules/italic.js +24 -0
  122. package/dist/lib/toolbar/modules/line-height.js +27 -0
  123. package/dist/lib/toolbar/modules/link.js +114 -0
  124. package/dist/lib/toolbar/modules/order-list.js +25 -0
  125. package/dist/lib/toolbar/modules/quote.js +23 -0
  126. package/dist/lib/toolbar/modules/strike.js +23 -0
  127. package/dist/lib/toolbar/modules/underline.js +23 -0
  128. package/dist/lib/{marks-a30b8a0f.js → toolbar/utils/marks.js} +1 -4
  129. package/dist/styles/index.css +1 -0
  130. package/package.json +7 -6
  131. package/dist/es/index-1e46887d.js +0 -205
  132. package/dist/es/index-ddc2e5ac.js +0 -493
  133. package/dist/es/is-7f3ae820.js +0 -12
  134. package/dist/lib/index-f50053bf.js +0 -506
  135. package/dist/lib/index-ffc4bb34.js +0 -212
  136. /package/dist/es/{tslib.es6-83956cc1.js → tslib.es6-910e0469.js} +0 -0
  137. /package/dist/lib/{tslib.es6-d44c9a95.js → tslib.es6-9953fd0d.js} +0 -0
@@ -1,506 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var webReact = require('@arco-design/web-react');
5
- var icon = require('@arco-design/web-react/icon');
6
- var utils = require('@block-kit/utils');
7
- var align_types_index = require('./align/types/index.js');
8
- var React = require('react');
9
- var bold_types_index = require('./bold/types/index.js');
10
- var bulletList_types_index = require('./bullet-list/types/index.js');
11
- var is = require('./is-fa1755d0.js');
12
- var divider_types_index = require('./divider/types/index.js');
13
- var Picker = require('@emoji-mart/react');
14
- var emoji_types_index = require('./emoji/types/index.js');
15
- var background_types_index = require('./background/types/index.js');
16
- var fontColor_types_index = require('./font-color/types/index.js');
17
- var fontSize_types_index = require('./font-size/types/index.js');
18
- var heading_types_index = require('./heading/types/index.js');
19
- var core = require('@block-kit/core');
20
- var hooks = require('@block-kit/utils/dist/es/hooks');
21
- var image_types_index = require('./image/types/index.js');
22
- var inlineCode_types_index = require('./inline-code/types/index.js');
23
- var italic_types_index = require('./italic/types/index.js');
24
- var lineHeight_types_index = require('./line-height/types/index.js');
25
- var useForm = require('@arco-design/web-react/es/Form/useForm');
26
- var link_types_index = require('./link/types/index.js');
27
- var orderList_types_index = require('./order-list/types/index.js');
28
- var is$1 = require('./is-18806678.js');
29
- var quote_types_index = require('./quote/types/index.js');
30
- var strike_types_index = require('./strike/types/index.js');
31
- var underline_types_index = require('./underline/types/index.js');
32
- var react = require('@block-kit/react');
33
- var marks = require('./marks-a30b8a0f.js');
34
- var ReactDOM = require('react-dom');
35
- var dom = require('./dom-cb8b8e40.js');
36
-
37
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
38
-
39
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
40
- var Picker__default = /*#__PURE__*/_interopDefaultLegacy(Picker);
41
- var useForm__default = /*#__PURE__*/_interopDefaultLegacy(useForm);
42
- var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
43
-
44
- const JustifyIcon = () => (jsxRuntime.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: jsxRuntime.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" }) }));
45
-
46
- const ToolbarContext = React__default["default"].createContext({
47
- keys: {},
48
- setKeys: () => null,
49
- refreshMarks: () => null,
50
- editor: null,
51
- selection: null,
52
- });
53
- const useToolbarContext = () => React__default["default"].useContext(ToolbarContext);
54
-
55
- const MAP$1 = {
56
- left: jsxRuntime.jsx(icon.IconAlignLeft, {}),
57
- center: jsxRuntime.jsx(icon.IconAlignCenter, {}),
58
- right: jsxRuntime.jsx(icon.IconAlignRight, {}),
59
- justify: jsxRuntime.jsx(JustifyIcon, {}),
60
- };
61
- const Align = () => {
62
- const { keys, refreshMarks, editor } = useToolbarContext();
63
- return (jsxRuntime.jsx(webReact.Trigger, { trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxRuntime.jsxs("div", { className: "block-kit-toolbar-dropdown", onClick: refreshMarks, children: [jsxRuntime.jsx("div", { className: "kit-toolbar-node", onClick: () => editor.command.exec(align_types_index.ALIGN_KEY, { value: utils.NIL }), children: jsxRuntime.jsx(icon.IconAlignLeft, {}) }), jsxRuntime.jsx("div", { className: "kit-toolbar-node", onClick: () => editor.command.exec(align_types_index.ALIGN_KEY, { value: "center" }), children: jsxRuntime.jsx(icon.IconAlignCenter, {}) }), jsxRuntime.jsx("div", { className: "kit-toolbar-node", onClick: () => editor.command.exec(align_types_index.ALIGN_KEY, { value: "right" }), children: jsxRuntime.jsx(icon.IconAlignRight, {}) }), jsxRuntime.jsx("div", { className: "kit-toolbar-node", onClick: () => editor.command.exec(align_types_index.ALIGN_KEY, { value: "justify" }), children: jsxRuntime.jsx(JustifyIcon, {}) })] })), children: jsxRuntime.jsxs("div", { className: "menu-toolbar-item", children: [MAP$1[keys[align_types_index.ALIGN_KEY]] || jsxRuntime.jsx(icon.IconAlignLeft, {}), jsxRuntime.jsx(icon.IconDown, { className: "menu-toolbar-icon-down" })] }) }));
64
- };
65
-
66
- const Bold = () => {
67
- const { keys, refreshMarks, editor } = useToolbarContext();
68
- const onExec = () => {
69
- editor.command.exec(bold_types_index.BOLD_KEY, { value: keys[bold_types_index.BOLD_KEY] ? utils.NIL : utils.TRULY });
70
- refreshMarks();
71
- };
72
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", keys[bold_types_index.BOLD_KEY] && "active"), onClick: onExec, children: jsxRuntime.jsx(icon.IconBold, {}) }));
73
- };
74
-
75
- const BulletList = () => {
76
- const { keys, refreshMarks, editor } = useToolbarContext();
77
- const isBullet = is.isBulletList(keys);
78
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", isBullet && "active"), onClick: () => {
79
- editor.command.exec(bulletList_types_index.BULLET_LIST_KEY, { value: utils.TRULY });
80
- refreshMarks();
81
- }, children: jsxRuntime.jsx(icon.IconUnorderedList, {}) }));
82
- };
83
-
84
- const Cut = () => {
85
- return jsxRuntime.jsx("div", { className: "menu-toolbar-cut" });
86
- };
87
-
88
- const DividerIcon = () => (jsxRuntime.jsx("svg", { className: "arco-icon", viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor", children: jsxRuntime.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" }) }));
89
-
90
- const Divider = () => {
91
- const { refreshMarks, editor } = useToolbarContext();
92
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item"), onClick: () => {
93
- editor.command.exec(divider_types_index.DIVIDER_KEY, { value: utils.TRULY });
94
- refreshMarks();
95
- }, children: jsxRuntime.jsx(DividerIcon, {}) }));
96
- };
97
-
98
- const EmojiIcon = () => (jsxRuntime.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: [jsxRuntime.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" }), jsxRuntime.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" })] }));
99
-
100
- const Emoji = () => {
101
- const { editor } = useToolbarContext();
102
- return (jsxRuntime.jsx(webReact.Trigger, { className: "menu-toolbar-emoji-trigger", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxRuntime.jsx(Picker__default["default"], { theme: document.body.getAttribute("arco-theme") === "dark" ? "dark" : "light", searchPosition: "none", previewPosition: "none", categories: [
103
- "frequent",
104
- "people",
105
- "nature",
106
- "foods",
107
- "activity",
108
- "places",
109
- "objects",
110
- "symbols",
111
- ], onEmojiSelect: (emoji) => {
112
- editor.command.exec(emoji_types_index.EMOJI_KEY, { value: emoji.id });
113
- }, maxFrequentRows: 2 })), trigger: "click", children: jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item"), children: jsxRuntime.jsx(EmojiIcon, {}) }) }));
114
- };
115
-
116
- const FontColorIcon = () => (jsxRuntime.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: jsxRuntime.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" }) }));
117
-
118
- const COLOR = [
119
- "",
120
- "rgb(143, 149, 158)",
121
- "rgb(216, 57, 49)",
122
- "rgb(222, 120, 2)",
123
- "rgb(220, 155, 4)",
124
- "rgb(46, 161, 33)",
125
- "rgb(36, 91, 219)",
126
- "rgb(100, 37, 208)",
127
- ];
128
- const BACKGROUND = [
129
- "",
130
- "rgb(242, 243, 245)",
131
- "rgb(251, 191, 188)",
132
- "rgba(254, 212, 164, 0.8)",
133
- "rgba(255, 246, 122, 0.8)",
134
- "rgba(183, 237, 177, 0.8)",
135
- "rgba(186, 206, 253, 0.7)",
136
- "rgba(205, 178, 250, 0.7)",
137
- "rgba(222, 224, 227, 0.8)",
138
- "rgb(187, 191, 196)",
139
- "rgb(247, 105, 100)",
140
- "rgb(255, 165, 61)",
141
- "rgb(255, 233, 40)",
142
- "rgb(98, 210, 86)",
143
- "rgba(78, 131, 253, 0.55)",
144
- "rgba(147, 90, 246, 0.55)",
145
- ];
146
- const FontColor = () => {
147
- const { keys, refreshMarks, editor } = useToolbarContext();
148
- return (jsxRuntime.jsx(webReact.Trigger, { trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxRuntime.jsxs("div", { className: "block-kit-toolbar-dropdown block-kit-color-picker", onClick: refreshMarks, children: [jsxRuntime.jsx("div", { className: "kit-color-picker-label", children: "\u5B57\u4F53\u989C\u8272" }), jsxRuntime.jsx("div", { className: "kit-picker-group", children: COLOR.map(it => (jsxRuntime.jsx("div", { className: utils.cs("kit-picker-item-wrapper", keys[fontColor_types_index.FONT_COLOR_KEY] === it && "active", !keys[fontColor_types_index.FONT_COLOR_KEY] && !it && "active"), style: { color: it ? it : void 0 }, onClick: () => {
149
- editor.command.exec(fontColor_types_index.FONT_COLOR_KEY, { value: it });
150
- refreshMarks();
151
- }, children: jsxRuntime.jsx("div", { className: "kit-picker-item", children: jsxRuntime.jsx(FontColorIcon, {}) }) }, it))) }), jsxRuntime.jsx("div", { className: "kit-color-picker-label", children: "\u80CC\u666F\u989C\u8272" }), jsxRuntime.jsx("div", { className: "kit-picker-group kit-picker-background-case", children: BACKGROUND.map(it => (jsxRuntime.jsx("div", { className: utils.cs("kit-picker-item-wrapper", keys[background_types_index.BACKGROUND_KEY] === it && "active", !keys[background_types_index.BACKGROUND_KEY] && !it && "active"), onClick: () => {
152
- editor.command.exec(background_types_index.BACKGROUND_KEY, { value: it });
153
- refreshMarks();
154
- }, children: jsxRuntime.jsx("div", { style: { background: it ? it : void 0 }, className: utils.cs("kit-picker-item", !it && "kit-picker-item-empty-background") }) }, it))) })] })), children: jsxRuntime.jsxs("div", { className: "menu-toolbar-item kit-color-case", children: [jsxRuntime.jsx("div", { className: "kit-color-block", style: { color: keys[fontColor_types_index.FONT_COLOR_KEY], background: keys[background_types_index.BACKGROUND_KEY] }, children: jsxRuntime.jsx(FontColorIcon, {}) }), jsxRuntime.jsx(icon.IconDown, { className: "menu-toolbar-icon-down" })] }) }));
155
- };
156
-
157
- const FontSizeIcon = () => (jsxRuntime.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: [jsxRuntime.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" }), jsxRuntime.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" })] }));
158
-
159
- const STEP$1 = Array(10)
160
- .fill(null)
161
- .map((_, i) => String(i + 12));
162
- const FontSize = () => {
163
- const triggerRef = React.useRef(null);
164
- const { keys, refreshMarks, editor } = useToolbarContext();
165
- return (jsxRuntime.jsx(webReact.Trigger, { ref: triggerRef, popupAlign: { bottom: 10 }, trigger: "click", getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxRuntime.jsxs("div", { className: "block-kit-toolbar-dropdown", onClick: refreshMarks, children: [jsxRuntime.jsxs("div", { className: "block-kit-toolbar-height-item kit-toolbar-node", onClick: () => editor.command.exec(fontSize_types_index.FONT_SIZE_KEY, { value: utils.NIL }), children: [!keys[fontSize_types_index.FONT_SIZE_KEY] && jsxRuntime.jsx(icon.IconCheck, {}), "\u9ED8\u8BA4"] }), STEP$1.map(item => (jsxRuntime.jsxs("div", { className: "block-kit-toolbar-height-item kit-toolbar-node", onClick: () => editor.command.exec(fontSize_types_index.FONT_SIZE_KEY, { value: item }), children: [keys[fontSize_types_index.FONT_SIZE_KEY] === item && jsxRuntime.jsx(icon.IconCheck, {}), item, "px"] }, item)))] })), children: jsxRuntime.jsxs("div", { className: "menu-toolbar-item", children: [jsxRuntime.jsx(FontSizeIcon, {}), jsxRuntime.jsx(icon.IconDown, { className: "menu-toolbar-icon-down" })] }) }));
166
- };
167
-
168
- const TextIcon = () => (jsxRuntime.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: jsxRuntime.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" }) }));
169
-
170
- const MAP = {
171
- h1: jsxRuntime.jsx(icon.IconH1, {}),
172
- h2: jsxRuntime.jsx(icon.IconH2, {}),
173
- h3: jsxRuntime.jsx(icon.IconH3, {}),
174
- };
175
- const Heading = () => {
176
- const { keys, refreshMarks, editor: { command }, } = useToolbarContext();
177
- return (jsxRuntime.jsx(webReact.Trigger, { trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxRuntime.jsxs("div", { className: "block-kit-toolbar-dropdown", onClick: refreshMarks, children: [jsxRuntime.jsx("div", { className: "kit-toolbar-node", onClick: () => command.exec(heading_types_index.HEADING_KEY, { value: utils.NIL }), children: jsxRuntime.jsx(TextIcon, {}) }), jsxRuntime.jsx("div", { className: "kit-toolbar-node", onClick: () => command.exec(heading_types_index.HEADING_KEY, { value: "h1" }), children: jsxRuntime.jsx(icon.IconH1, {}) }), jsxRuntime.jsx("div", { className: "kit-toolbar-node", onClick: () => command.exec(heading_types_index.HEADING_KEY, { value: "h2" }), children: jsxRuntime.jsx(icon.IconH2, {}) }), jsxRuntime.jsx("div", { className: "kit-toolbar-node", onClick: () => command.exec(heading_types_index.HEADING_KEY, { value: "h3" }), children: jsxRuntime.jsx(icon.IconH3, {}) })] })), children: jsxRuntime.jsxs("div", { className: "menu-toolbar-item", children: [MAP[keys[heading_types_index.HEADING_KEY]] || jsxRuntime.jsx(TextIcon, {}), jsxRuntime.jsx(icon.IconDown, { className: "menu-toolbar-icon-down" })] }) }));
178
- };
179
-
180
- const History = () => {
181
- const { editor, refreshMarks } = useToolbarContext();
182
- const [undoable, setUndoable] = React.useState(false);
183
- const [redoable, setRedoable] = React.useState(false);
184
- const refresh = hooks.useMemoFn(() => {
185
- setUndoable(editor.history.isUndoAble());
186
- setRedoable(editor.history.isRedoAble());
187
- });
188
- React.useEffect(() => {
189
- editor.event.on(core.EDITOR_EVENT.CONTENT_CHANGE, refresh, 1000);
190
- return () => {
191
- editor.event.off(core.EDITOR_EVENT.CONTENT_CHANGE, refresh);
192
- };
193
- }, [editor, refresh]);
194
- const undo = () => {
195
- editor.history.undo();
196
- refreshMarks();
197
- };
198
- const redo = () => {
199
- editor.history.redo();
200
- refreshMarks();
201
- };
202
- return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", !undoable && "disable"), onClick: undo, children: jsxRuntime.jsx(icon.IconUndo, {}) }), jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", !redoable && "disable"), onClick: redo, children: jsxRuntime.jsx(icon.IconRedo, {}) })] }));
203
- };
204
-
205
- const Image = () => {
206
- const { refreshMarks, editor } = useToolbarContext();
207
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item"), onClick: () => {
208
- editor.command.exec(image_types_index.IMAGE_KEY, { value: utils.TRULY });
209
- refreshMarks();
210
- }, children: jsxRuntime.jsx(icon.IconImage, {}) }));
211
- };
212
-
213
- const InlineCode = () => {
214
- const { keys, refreshMarks, editor } = useToolbarContext();
215
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", keys[inlineCode_types_index.INLINE_CODE] && "active"), onClick: () => {
216
- editor.command.exec(inlineCode_types_index.INLINE_CODE, { value: keys[inlineCode_types_index.INLINE_CODE] ? utils.NIL : utils.TRULY });
217
- refreshMarks();
218
- }, children: jsxRuntime.jsx(icon.IconCode, {}) }));
219
- };
220
-
221
- const Italic = () => {
222
- const { keys, refreshMarks, editor } = useToolbarContext();
223
- const onExec = () => {
224
- editor.command.exec(italic_types_index.ITALIC_KEY, { value: keys[italic_types_index.ITALIC_KEY] ? utils.NIL : utils.TRULY });
225
- refreshMarks();
226
- };
227
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", keys[italic_types_index.ITALIC_KEY] && "active"), onClick: onExec, children: jsxRuntime.jsx(icon.IconItalic, {}) }));
228
- };
229
-
230
- const LineHeightIcon = () => (jsxRuntime.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: jsxRuntime.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" }) }));
231
-
232
- const STEP = [...Array.from({ length: 11 }, (_, i) => i * 0.1 + 1.5), 3].map(v => v.toFixed(1).toString());
233
- const LineHeight = () => {
234
- const { keys, refreshMarks, editor } = useToolbarContext();
235
- return (jsxRuntime.jsx(webReact.Trigger, { trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => (jsxRuntime.jsxs("div", { className: "block-kit-toolbar-dropdown", onClick: refreshMarks, children: [jsxRuntime.jsxs("div", { className: "block-kit-toolbar-height-item kit-toolbar-node", onClick: () => editor.command.exec(lineHeight_types_index.LINE_HEIGHT_KEY, { value: utils.NIL }), children: [!keys[lineHeight_types_index.LINE_HEIGHT_KEY] && jsxRuntime.jsx(icon.IconCheck, {}), "\u9ED8\u8BA4"] }), STEP.map(item => (jsxRuntime.jsxs("div", { className: "block-kit-toolbar-height-item kit-toolbar-node", onClick: () => editor.command.exec(lineHeight_types_index.LINE_HEIGHT_KEY, { value: item }), children: [keys[lineHeight_types_index.LINE_HEIGHT_KEY] === item && jsxRuntime.jsx(icon.IconCheck, {}), item] }, item)))] })), children: jsxRuntime.jsxs("div", { className: "menu-toolbar-item", children: [jsxRuntime.jsx(LineHeightIcon, {}), jsxRuntime.jsx(icon.IconDown, { className: "menu-toolbar-icon-down" })] }) }));
236
- };
237
-
238
- const Link = props => {
239
- const [form] = useForm__default["default"]();
240
- const [visible, setVisible] = React.useState(false);
241
- const [collapsed, setCollapsed] = React.useState(true);
242
- const { keys, refreshMarks, editor, selection } = useToolbarContext();
243
- const onConfirm = () => {
244
- const sel = editor.selection.get();
245
- if (!sel)
246
- return void 0;
247
- const insert = form.getFieldValue("link-insert");
248
- const href = form.getFieldValue(link_types_index.LINK_KEY);
249
- const blank = form.getFieldValue(link_types_index.LINK_BLANK_KEY);
250
- if (!href)
251
- return void 0;
252
- const filteredHref = props.filterXSS ? props.filterXSS(href) : href;
253
- if (sel.isCollapsed) {
254
- // 折叠选区的情况下则插入文本
255
- if (!insert)
256
- return void 0;
257
- editor.collect.marks = Object.assign(Object.assign({}, editor.collect.marks), { [link_types_index.LINK_KEY]: filteredHref });
258
- if (blank) {
259
- editor.collect.marks[link_types_index.LINK_BLANK_KEY] = utils.TRULY;
260
- }
261
- editor.perform.insertText(sel, insert);
262
- }
263
- else {
264
- // 非折叠选区则应用链接
265
- editor.perform.applyMarks(sel, {
266
- [link_types_index.LINK_KEY]: filteredHref,
267
- [link_types_index.LINK_BLANK_KEY]: blank ? utils.TRULY : utils.NIL,
268
- [link_types_index.LINK_TEMP_KEY]: utils.NIL,
269
- }, { autoCaret: false });
270
- }
271
- setVisible(false);
272
- refreshMarks();
273
- };
274
- const onDelete = () => {
275
- const sel = editor.selection.get();
276
- if (!sel || sel.isCollapsed) {
277
- setVisible(false);
278
- return void 0;
279
- }
280
- editor.perform.applyMarks(sel, { [link_types_index.LINK_TEMP_KEY]: utils.NIL, [link_types_index.LINK_BLANK_KEY]: utils.NIL, [link_types_index.LINK_KEY]: utils.NIL }, { autoCaret: false });
281
- setVisible(false);
282
- refreshMarks();
283
- };
284
- React.useEffect(() => {
285
- if (visible) {
286
- form.resetFields();
287
- const sel = editor.selection.get();
288
- const state = sel && sel.isCollapsed;
289
- setCollapsed(!!state);
290
- }
291
- }, [editor.selection, form, visible]);
292
- const onFocus = () => {
293
- const sel = editor.selection.get();
294
- if (sel && !sel.isCollapsed) {
295
- // 由于焦点转移, 因此需要将临时标记应用到选区
296
- editor.perform.applyMarks(sel, { [link_types_index.LINK_TEMP_KEY]: utils.TRULY }, { autoCaret: false, source: core.APPLY_SOURCE.NO_UNDO });
297
- editor.event.once(core.EDITOR_EVENT.SELECTION_CHANGE, () => {
298
- // 这里是需要等待渲染后再执行, 否则会导致选区校正无法获取 LineNode
299
- Promise.resolve().then(() => {
300
- editor.perform.applyMarks(sel, { [link_types_index.LINK_TEMP_KEY]: utils.NIL }, { autoCaret: false, source: core.APPLY_SOURCE.NO_UNDO });
301
- });
302
- });
303
- }
304
- };
305
- const go = () => {
306
- const href = form.getFieldValue(link_types_index.LINK_KEY);
307
- if (!href)
308
- return void 0;
309
- window.open(href, "_blank");
310
- };
311
- return (jsxRuntime.jsx(webReact.Trigger, { popupVisible: visible, onVisibleChange: setVisible, trigger: "click", popupAlign: { bottom: 10 }, getPopupContainer: e => e.parentElement || document.body, popup: () => {
312
- return (jsxRuntime.jsxs("div", { className: "block-kit-link-popup", children: [jsxRuntime.jsxs(webReact.Form, { initialValues: keys, form: form, size: "small", labelCol: { span: 6, offset: 0 }, wrapperCol: { span: 18, offset: 0 }, labelAlign: "left", onSubmit: onConfirm, children: [collapsed && (jsxRuntime.jsx(webReact.Form.Item, { label: "\u6587\u672C\u5185\u5BB9", field: "link-insert", children: jsxRuntime.jsx(webReact.Input, { "data-no-prevent": true, autoComplete: "off", size: "mini", placeholder: "\u8F93\u5165\u6587\u672C" }) })), jsxRuntime.jsx(webReact.Form.Item, { label: "\u94FE\u63A5\u5730\u5740", field: link_types_index.LINK_KEY, children: jsxRuntime.jsx(webReact.Input, { "data-no-prevent": true, autoComplete: "off", size: "mini", placeholder: "\u8F93\u5165\u94FE\u63A5", onFocus: onFocus, addAfter: jsxRuntime.jsx(icon.IconRight, { onClick: go, className: "block-kit-link-popup-go" }) }) }), jsxRuntime.jsx(webReact.Form.Item, { label: "\u65B0\u9875\u9762\u6253\u5F00", field: link_types_index.LINK_BLANK_KEY, triggerPropName: "checked", children: jsxRuntime.jsx(webReact.Switch, {}) })] }), jsxRuntime.jsxs("div", { className: "block-kit-link-popup-button", children: [jsxRuntime.jsx(webReact.Button, { size: "mini", htmlType: "submit", type: "primary", onClick: onConfirm, children: "\u786E\u5B9A" }), jsxRuntime.jsx(webReact.Button, { size: "mini", type: "primary", status: "danger", onClick: onDelete, children: "\u5220\u9664" })] })] }));
313
- }, children: jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", keys[link_types_index.LINK_KEY] && selection && !selection.isCollapsed && "active"), children: jsxRuntime.jsx(icon.IconLink, {}) }) }));
314
- };
315
-
316
- const OrderList = () => {
317
- const { keys, refreshMarks, editor } = useToolbarContext();
318
- const isOrder = is$1.isOrderList(keys);
319
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", isOrder && "active"), onClick: () => {
320
- editor.command.exec(orderList_types_index.ORDER_LIST_KEY, { value: utils.TRULY });
321
- refreshMarks();
322
- }, children: jsxRuntime.jsx(icon.IconOrderedList, {}) }));
323
- };
324
-
325
- const Quote = () => {
326
- const { keys, refreshMarks, editor } = useToolbarContext();
327
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", keys[quote_types_index.QUOTE_KEY] && "active"), onClick: () => {
328
- editor.command.exec(quote_types_index.QUOTE_KEY, { value: utils.TRULY });
329
- refreshMarks();
330
- }, children: jsxRuntime.jsx(icon.IconQuote, {}) }));
331
- };
332
-
333
- const Strike = () => {
334
- const { keys, refreshMarks, editor } = useToolbarContext();
335
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", keys[strike_types_index.STRIKE_KEY] && "active"), onClick: () => {
336
- editor.command.exec(strike_types_index.STRIKE_KEY, { value: keys[strike_types_index.STRIKE_KEY] ? utils.NIL : utils.TRULY });
337
- refreshMarks();
338
- }, children: jsxRuntime.jsx(icon.IconStrikethrough, {}) }));
339
- };
340
-
341
- const Underline = () => {
342
- const { keys, refreshMarks, editor } = useToolbarContext();
343
- return (jsxRuntime.jsx("div", { className: utils.cs("menu-toolbar-item", keys[underline_types_index.UNDERLINE_KEY] && "active"), onClick: () => {
344
- editor.command.exec(underline_types_index.UNDERLINE_KEY, { value: keys[underline_types_index.UNDERLINE_KEY] ? utils.NIL : utils.TRULY });
345
- refreshMarks();
346
- }, children: jsxRuntime.jsx(icon.IconUnderline, {}) }));
347
- };
348
-
349
- const Toolbar = React.forwardRef((props, ref) => {
350
- const { editor } = react.useEditorStatic();
351
- const [keys, setKeys] = React.useState({});
352
- const refreshMarks = hooks.useMemoFn(() => {
353
- const current = editor.selection.get();
354
- if (!current) {
355
- setKeys({});
356
- return void 0;
357
- }
358
- const lines = editor.state.block.getLines();
359
- const { start, end } = current;
360
- const lineMarkMap = marks.filterLineMarkMap(lines.slice(start.line, end.line + 1).map(line => line.attributes));
361
- if (current.isCollapsed) {
362
- setKeys(Object.assign(Object.assign({}, editor.collect.marks), lineMarkMap));
363
- return void 0;
364
- }
365
- const ops = [];
366
- if (current.isCollapsed) {
367
- const op = editor.collect.getOpAtPoint(current.start);
368
- op && ops.push(op);
369
- }
370
- else {
371
- const fragment = editor.collect.getFragment();
372
- fragment && ops.push(...fragment);
373
- }
374
- const markMap = marks.filterMarkMap(ops);
375
- setKeys(Object.assign(Object.assign({}, markMap), lineMarkMap));
376
- });
377
- React.useEffect(() => {
378
- editor.event.on(core.EDITOR_EVENT.SELECTION_CHANGE, refreshMarks);
379
- editor.event.on(marks.PLUGIN_EVENTS.SHORTCUT_MARKS_CHANGE, refreshMarks);
380
- return () => {
381
- editor.event.off(core.EDITOR_EVENT.SELECTION_CHANGE, refreshMarks);
382
- editor.event.off(marks.PLUGIN_EVENTS.SHORTCUT_MARKS_CHANGE, refreshMarks);
383
- };
384
- }, [editor.event, refreshMarks]);
385
- // 浮动工具栏的情况下, 挂载时需要刷新 marks
386
- React.useEffect(() => {
387
- refreshMarks();
388
- }, [refreshMarks]);
389
- return (jsxRuntime.jsx("div", { ref: ref, style: props.styles, className: utils.cs("block-kit-menu-toolbar", props.className), onMouseDown: e => {
390
- const target = e.target;
391
- // 避免 float 的情况下触发按下事件
392
- e.stopPropagation();
393
- // 存在需要抢夺焦点的情况, 例如超链接输入的弹出层
394
- if (target instanceof HTMLElement && target.hasAttribute("data-no-prevent")) {
395
- return void 0;
396
- }
397
- e.preventDefault();
398
- }, children: jsxRuntime.jsx(ToolbarContext.Provider, { value: {
399
- keys,
400
- editor,
401
- setKeys,
402
- refreshMarks,
403
- selection: editor.selection.get(),
404
- }, children: props.children }) }));
405
- });
406
-
407
- const FloatToolbar = props => {
408
- const { editor } = react.useEditorStatic();
409
- const { readonly } = react.useReadonly();
410
- const [top, setTop] = React.useState(0);
411
- const [left, setLeft] = React.useState(0);
412
- const [visible, setVisible] = React.useState(false);
413
- const [isInterim, setIsInterim] = React.useState(true);
414
- const [isMouseDown, setIsMouseDown] = React.useState(false);
415
- const ref = React.useRef(null);
416
- const onWeakUp = hooks.useMemoFn((wakeUp) => {
417
- if (editor.state.isFocused() && wakeUp) {
418
- setVisible(true);
419
- }
420
- else {
421
- setVisible(false);
422
- }
423
- });
424
- React.useEffect(() => {
425
- if (readonly)
426
- return void 0;
427
- const onMouseUp = () => {
428
- setIsMouseDown(false);
429
- };
430
- const onMouseDown = () => {
431
- setIsMouseDown(true);
432
- };
433
- const onSelectionChange = (e) => {
434
- const { current } = e;
435
- const isWakeUp = current ? !current.isCollapsed : false;
436
- onWeakUp(isWakeUp);
437
- };
438
- document.addEventListener(core.EDITOR_EVENT.MOUSE_UP, onMouseUp);
439
- document.addEventListener(core.EDITOR_EVENT.MOUSE_DOWN, onMouseDown);
440
- editor.event.on(core.EDITOR_EVENT.SELECTION_CHANGE, onSelectionChange);
441
- return () => {
442
- document.removeEventListener(core.EDITOR_EVENT.MOUSE_UP, onMouseUp);
443
- document.removeEventListener(core.EDITOR_EVENT.MOUSE_DOWN, onMouseDown);
444
- editor.event.off(core.EDITOR_EVENT.SELECTION_CHANGE, onSelectionChange);
445
- };
446
- }, [editor, onWeakUp, readonly]);
447
- React.useEffect(() => {
448
- const el = ref.current;
449
- if (!readonly && visible && !isMouseDown) {
450
- const rect = editor.rect.getSelectionRect();
451
- if (rect && el) {
452
- const topOffset = props.offsetTop || 0;
453
- const leftOffset = props.offsetLeft || 0;
454
- const t = rect.top - el.offsetHeight + topOffset;
455
- const l = rect.left - el.offsetWidth / 2 + rect.width / 2 + leftOffset;
456
- setTop(t);
457
- setLeft(l);
458
- }
459
- setIsInterim(false);
460
- }
461
- else {
462
- setTop(-999999);
463
- setLeft(-999999);
464
- setIsInterim(true);
465
- }
466
- }, [readonly, visible, isMouseDown, editor.rect, props.offsetLeft, props.offsetTop]);
467
- // 只读状态 / 不可见 / 鼠标按下 时隐藏
468
- return readonly || !visible || isMouseDown
469
- ? null
470
- : ReactDOM__default["default"].createPortal(jsxRuntime.jsx(Toolbar, { ref: ref, className: utils.cs("block-kit-float-toolbar", props.className), styles: {
471
- top: top,
472
- left: left,
473
- opacity: isInterim ? 0 : void 0,
474
- zIndex: isInterim ? -99999 : void 0,
475
- visibility: isInterim ? "hidden" : void 0,
476
- pointerEvents: isInterim ? "none" : void 0,
477
- }, children: props.children }), dom.getMountDOM(editor));
478
- };
479
-
480
- const Mixin = {
481
- Cut,
482
- Bold,
483
- Link,
484
- Quote,
485
- Image,
486
- Align,
487
- Emoji,
488
- Italic,
489
- Strike,
490
- History,
491
- Heading,
492
- Divider,
493
- FontSize,
494
- FontColor,
495
- OrderList,
496
- Underline,
497
- BulletList,
498
- InlineCode,
499
- LineHeight,
500
- };
501
-
502
- exports.FloatToolbar = FloatToolbar;
503
- exports.Mixin = Mixin;
504
- exports.Toolbar = Toolbar;
505
- exports.ToolbarContext = ToolbarContext;
506
- exports.useToolbarContext = useToolbarContext;