@block-kit/plugin 1.0.0 → 1.0.3

package/dist/es/shared/modules/selection.js

@@ -0,0 +1,32 @@
+import { _ as __decorate } from '../../tslib.es6-910e0469.js';
+import { EDITOR_EVENT } from '@block-kit/core';
+import { Bind } from '@block-kit/utils';
+
+class SelectionPlugin {
+    constructor(editor) {
+        this.editor = editor;
+        this.idToView = new Map();
+        editor.event.on(EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
+    }
+    destroy() {
+        this.idToView.clear();
+        this.editor.event.off(EDITOR_EVENT.SELECTION_CHANGE, this.onSelectionChange);
+    }
+    mountView(id, view) {
+        this.idToView.set(id, view);
+    }
+    unmountView(id) {
+        this.idToView.delete(id);
+    }
+    onSelectionChange(e) {
+        const current = e.current;
+        this.idToView.forEach(view => {
+            view.onSelectionChange(current);
+        });
+    }
+}
+__decorate([
+    Bind
+], SelectionPlugin.prototype, "onSelectionChange", null);
+
+export { SelectionPlugin };

package/dist/es/{dom-71a99400.js → shared/utils/dom.js}

@@ -42,4 +42,4 @@ const scrollIfNeeded = (container, child, buffer = 0) => {
     }
 };
 
-export { setMountDOM as a, getMountDOM as g, preventContextEvent as p, scrollIfNeeded as s };
+export { getMountDOM, preventContextEvent, scrollIfNeeded, setMountDOM };

package/dist/es/shared/utils/event.js

@@ -0,0 +1,5 @@
+const PLUGIN_EVENTS = {
+    SHORTCUT_MARKS_CHANGE: "SHORTCUT_MARKS_CHANGE",
+};
+
+export { PLUGIN_EVENTS };

package/dist/es/{is-3de778e2.js → shared/utils/is.js}

@@ -12,4 +12,4 @@ const isKeyCode = (event, code) => {
     return event.keyCode === code;
 };
 
-export { isKeyCode as a, isEmptyLine as i };
+export { isEmptyLine, isKeyCode };

package/dist/es/shortcut/index.js

@@ -1,29 +1,10 @@
-import { _ as __decorate } from '../tslib.es6-83956cc1.js';
+import { _ as __decorate } from '../tslib.es6-910e0469.js';
 import { CorePlugin, EDITOR_EVENT } from '@block-kit/core';
-import { CTRL_KEY, KEY_CODE, NIL, TRULY, Bind } from '@block-kit/utils';
-import { f as filterLineMarkMap, a as filterMarkMap, P as PLUGIN_EVENTS } from '../marks-ac0ec630.js';
-import { BOLD_KEY } from '../bold/types/index.js';
-import { ITALIC_KEY } from '../italic/types/index.js';
-import { a as isKeyCode } from '../is-3de778e2.js';
+import { Bind } from '@block-kit/utils';
+import { PLUGIN_EVENTS } from '../shared/utils/event.js';
+import { filterLineMarkMap, filterMarkMap } from '../toolbar/utils/marks.js';
+import { PRESET_SHORTCUT } from './modules/preset.js';
 import { SHORTCUT_KEY } from './types/index.js';
-import '@block-kit/delta';
-
-const PRESET_SHORTCUT = {
-    [BOLD_KEY]: (event, payload) => {
-        if (event[CTRL_KEY] && isKeyCode(event, KEY_CODE.B) && payload.sel) {
-            const { editor, keys, sel } = payload;
-            editor.perform.applyMarks(sel, { [BOLD_KEY]: keys[BOLD_KEY] ? NIL : TRULY });
-            return true;
-        }
-    },
-    [ITALIC_KEY]: (event, payload) => {
-        if (event[CTRL_KEY] && isKeyCode(event, KEY_CODE.I) && payload.sel) {
-            const { editor, keys, sel } = payload;
-            editor.perform.applyMarks(sel, { [ITALIC_KEY]: keys[ITALIC_KEY] ? NIL : TRULY });
-            return true;
-        }
-    },
-};
 
 class Shortcut extends CorePlugin {
     constructor(editor, config) {
@@ -48,15 +29,15 @@ class Shortcut extends CorePlugin {
         const { start, end } = current;
         const lineMarkMap = filterLineMarkMap(lines.slice(start.line, end.line + 1).map(line => line.attributes));
         if (current.isCollapsed) {
-            return Object.assign(Object.assign({}, this.editor.collect.marks), lineMarkMap);
+            return Object.assign(Object.assign({}, this.editor.lookup.marks), lineMarkMap);
         }
         const ops = [];
         if (current.isCollapsed) {
-            const op = this.editor.collect.getOpAtPoint(current.start);
+            const op = this.editor.lookup.getOpAtPoint(current.start);
             op && ops.push(op);
         }
         else {
-            const fragment = this.editor.collect.getFragment();
+            const fragment = this.editor.lookup.getFragment();
             fragment && ops.push(...fragment);
         }
         const markMap = filterMarkMap(ops);

package/dist/es/shortcut/modules/preset.js

@@ -0,0 +1,23 @@
+import { CTRL_KEY, KEY_CODE, NIL, TRULY } from '@block-kit/utils';
+import { BOLD_KEY } from '../../bold/types/index.js';
+import { ITALIC_KEY } from '../../italic/types/index.js';
+import { isKeyCode } from '../../shared/utils/is.js';
+
+const PRESET_SHORTCUT = {
+    [BOLD_KEY]: (event, payload) => {
+        if (event[CTRL_KEY] && isKeyCode(event, KEY_CODE.B) && payload.sel) {
+            const { editor, keys, sel } = payload;
+            editor.perform.applyMarks(sel, { [BOLD_KEY]: keys[BOLD_KEY] ? NIL : TRULY });
+            return true;
+        }
+    },
+    [ITALIC_KEY]: (event, payload) => {
+        if (event[CTRL_KEY] && isKeyCode(event, KEY_CODE.I) && payload.sel) {
+            const { editor, keys, sel } = payload;
+            editor.perform.applyMarks(sel, { [ITALIC_KEY]: keys[ITALIC_KEY] ? NIL : TRULY });
+            return true;
+        }
+    },
+};
+
+export { PRESET_SHORTCUT };

package/dist/es/toolbar/context/basic.js

@@ -0,0 +1,69 @@
+import { jsx } from 'react/jsx-runtime';
+import { EDITOR_EVENT } from '@block-kit/core';
+import { useEditorStatic } from '@block-kit/react';
+import { cs } from '@block-kit/utils';
+import { useMemoFn } from '@block-kit/utils/dist/es/hooks';
+import { forwardRef, useState, useEffect } from 'react';
+import { PLUGIN_EVENTS } from '../../shared/utils/event.js';
+import { filterLineMarkMap, filterMarkMap } from '../utils/marks.js';
+import { ToolbarContext } from './provider.js';
+
+const Toolbar = /*#__PURE__*/ forwardRef((props, ref) => {
+    const { editor } = useEditorStatic();
+    const [keys, setKeys] = useState({});
+    const refreshMarks = useMemoFn(() => {
+        const current = editor.selection.get();
+        if (!current) {
+            setKeys({});
+            return void 0;
+        }
+        const lines = editor.state.block.getLines();
+        const { start, end } = current;
+        const lineMarkMap = filterLineMarkMap(lines.slice(start.line, end.line + 1).map(line => line.attributes));
+        if (current.isCollapsed) {
+            setKeys(Object.assign(Object.assign({}, editor.lookup.marks), lineMarkMap));
+            return void 0;
+        }
+        const ops = [];
+        if (current.isCollapsed) {
+            const op = editor.lookup.getOpAtPoint(current.start);
+            op && ops.push(op);
+        }
+        else {
+            const fragment = editor.lookup.getFragment();
+            fragment && ops.push(...fragment);
+        }
+        const markMap = filterMarkMap(ops);
+        setKeys(Object.assign(Object.assign({}, markMap), lineMarkMap));
+    });
+    useEffect(() => {
+        editor.event.on(EDITOR_EVENT.SELECTION_CHANGE, refreshMarks);
+        editor.event.on(PLUGIN_EVENTS.SHORTCUT_MARKS_CHANGE, refreshMarks);
+        return () => {
+            editor.event.off(EDITOR_EVENT.SELECTION_CHANGE, refreshMarks);
+            editor.event.off(PLUGIN_EVENTS.SHORTCUT_MARKS_CHANGE, refreshMarks);
+        };
+    }, [editor.event, refreshMarks]);
+    // 浮动工具栏的情况下, 挂载时需要刷新 marks
+    useEffect(() => {
+        refreshMarks();
+    }, [refreshMarks]);
+    return (jsx("div", { ref: ref, style: props.styles, className: cs("block-kit-menu-toolbar", props.className), onMouseDown: e => {
+            const target = e.target;
+            // 避免 float 的情况下触发按下事件
+            e.stopPropagation();
+            // 存在需要抢夺焦点的情况, 例如超链接输入的弹出层
+            if (target instanceof HTMLElement && target.hasAttribute("data-no-prevent")) {
+                return void 0;
+            }
+            e.preventDefault();
+        }, children: jsx(ToolbarContext.Provider, { value: {
+                keys,
+                editor,
+                setKeys,
+                refreshMarks,
+                selection: editor.selection.get(),
+            }, children: props.children }) }));
+});
+
+export { Toolbar };

package/dist/es/toolbar/context/float.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { EDITOR_EVENT } from '@block-kit/core';
+import { useEditorStatic, useReadonly } from '@block-kit/react';
+import { cs } from '@block-kit/utils';
+import { useMemoFn } from '@block-kit/utils/dist/es/hooks';
+import { useRef, useState, useEffect, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import { getMountDOM } from '../../shared/utils/dom.js';
+import { Toolbar } from './basic.js';
+
+const FloatToolbar = props => {
+    const { editor } = useEditorStatic();
+    const { readonly } = useReadonly();
+    const ref = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const [isMouseDown, setIsMouseDown] = useState(false);
+    const onWeakUp = useMemoFn((wakeUp) => {
+        if (editor.state.isFocused() && wakeUp) {
+            setVisible(true);
+        }
+        else {
+            setVisible(false);
+        }
+    });
+    useEffect(() => {
+        if (readonly)
+            return void 0;
+        const onMouseUp = () => {
+            setIsMouseDown(false);
+        };
+        const onMouseDown = () => {
+            setIsMouseDown(true);
+        };
+        const onSelectionChange = (e) => {
+            const { current } = e;
+            const isWakeUp = current ? !current.isCollapsed : false;
+            onWeakUp(isWakeUp);
+        };
+        document.addEventListener(EDITOR_EVENT.MOUSE_UP, onMouseUp);
+        document.addEventListener(EDITOR_EVENT.MOUSE_DOWN, onMouseDown);
+        editor.event.on(EDITOR_EVENT.SELECTION_CHANGE, onSelectionChange);
+        return () => {
+            document.removeEventListener(EDITOR_EVENT.MOUSE_UP, onMouseUp);
+            document.removeEventListener(EDITOR_EVENT.MOUSE_DOWN, onMouseDown);
+            editor.event.off(EDITOR_EVENT.SELECTION_CHANGE, onSelectionChange);
+        };
+    }, [editor, onWeakUp, readonly]);
+    const { left, top } = useMemo(() => {
+        if (!readonly && visible && !isMouseDown) {
+            const rect = editor.rect.getSelectionRect();
+            if (rect) {
+                const topOffset = props.offsetTop || 0;
+                const leftOffset = props.offsetLeft || 0;
+                const t = rect.top + topOffset;
+                const l = rect.left + rect.width / 2 + leftOffset;
+                return { top: t, left: l };
+            }
+        }
+        return { top: -999999, left: -999999 };
+    }, [editor.rect, readonly, visible, isMouseDown, props.offsetLeft, props.offsetTop]);
+    // 只读状态 / 不可见 / 鼠标按下 时隐藏
+    return readonly || !visible || isMouseDown
+        ? null
+        : ReactDOM.createPortal(jsx(Toolbar, { ref: ref, className: cs("block-kit-float-toolbar", props.className), styles: { top: top, left: left }, children: props.children }), getMountDOM(editor));
+};
+
+export { FloatToolbar };

package/dist/es/toolbar/context/provider.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ToolbarContext = React.createContext({
+    keys: {},
+    setKeys: () => null,
+    refreshMarks: () => null,
+    editor: null,
+    selection: null,
+});
+const useToolbarContext = () => React.useContext(ToolbarContext);
+
+export { ToolbarContext, useToolbarContext };

package/dist/es/toolbar/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export { Toolbar } from "./context/basic";
 export { FloatToolbar } from "./context/float";
-export declare const Mixin: {
+export declare const ToolBarMixin: {
     Cut: import("react").FC;
     Bold: import("react").FC;
     Link: import("react").FC<{

package/dist/es/toolbar/index.js

@@ -1,34 +1,45 @@
-export { F as FloatToolbar, M as Mixin, T as Toolbar } from '../index-ddc2e5ac.js';
-import 'react/jsx-runtime';
-import '@arco-design/web-react';
-import '@arco-design/web-react/icon';
-import '@block-kit/utils';
-import '../align/types/index.js';
-import 'react';
-import '../bold/types/index.js';
-import '../bullet-list/types/index.js';
-import '../is-2b264ec8.js';
-import '../divider/types/index.js';
-import '@emoji-mart/react';
-import '../emoji/types/index.js';
-import '../background/types/index.js';
-import '../font-color/types/index.js';
-import '../font-size/types/index.js';
-import '../heading/types/index.js';
-import '@block-kit/core';
-import '@block-kit/utils/dist/es/hooks';
-import '../image/types/index.js';
-import '../inline-code/types/index.js';
-import '../italic/types/index.js';
-import '../line-height/types/index.js';
-import '@arco-design/web-react/es/Form/useForm';
-import '../link/types/index.js';
-import '../order-list/types/index.js';
-import '../is-7f3ae820.js';
-import '../quote/types/index.js';
-import '../strike/types/index.js';
-import '../underline/types/index.js';
-import '@block-kit/react';
-import '../marks-ac0ec630.js';
-import 'react-dom';
-import '../dom-71a99400.js';
+import { Align } from './modules/align.js';
+import { Bold } from './modules/bold.js';
+import { BulletList } from './modules/bullet-list.js';
+import { Cut } from './modules/cut.js';
+import { Divider } from './modules/divider.js';
+import { Emoji } from './modules/emoji.js';
+import { FontColor } from './modules/font-color.js';
+import { FontSize } from './modules/font-size.js';
+import { Heading } from './modules/heading.js';
+import { History } from './modules/history.js';
+import { Image } from './modules/image.js';
+import { InlineCode } from './modules/inline-code.js';
+import { Italic } from './modules/italic.js';
+import { LineHeight } from './modules/line-height.js';
+import { Link } from './modules/link.js';
+import { OrderList } from './modules/order-list.js';
+import { Quote } from './modules/quote.js';
+import { Strike } from './modules/strike.js';
+import { Underline } from './modules/underline.js';
+export { Toolbar } from './context/basic.js';
+export { FloatToolbar } from './context/float.js';
+
+const ToolBarMixin = {
+    Cut,
+    Bold,
+    Link,
+    Quote,
+    Image,
+    Align,
+    Emoji,
+    Italic,
+    Strike,
+    History,
+    Heading,
+    Divider,
+    FontSize,
+    FontColor,
+    OrderList,
+    Underline,
+    BulletList,
+    InlineCode,
+    LineHeight,
+};
+
+export { ToolBarMixin };

package/dist/es/toolbar/modules/align.js

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Trigger from '@arco-design/web-react/es/Trigger';
+import '@arco-design/web-react/es/Trigger/style';
+import IconAlignCenter from '@arco-design/web-react/icon/react-icon/IconAlignCenter';
+import IconAlignLeft from '@arco-design/web-react/icon/react-icon/IconAlignLeft';
+import IconAlignRight from '@arco-design/web-react/icon/react-icon/IconAlignRight';
+import IconDown from '@arco-design/web-react/icon/react-icon/IconDown';
+import { NIL } from '@block-kit/utils';
+import { ALIGN_KEY } from '../../align/types/index.js';
+import { JustifyIcon } from '../../shared/icons/justify.js';
+import { useToolbarContext } from '../context/provider.js';
+
+const MAP = {
+    left: jsx(IconAlignLeft, {}),
+    center: jsx(IconAlignCenter, {}),
+    right: jsx(IconAlignRight, {}),
+    justify: jsx(JustifyIcon, {}),
+};
+const Align = () => {
+    const { keys, refreshMarks, editor } = useToolbarContext();
+    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[keys[ALIGN_KEY]] || jsx(IconAlignLeft, {}), jsx(IconDown, { className: "menu-toolbar-icon-down" })] }) }));
+};
+
+export { Align };

package/dist/es/toolbar/modules/bold.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import IconBold from '@arco-design/web-react/icon/react-icon/IconBold';
+import { cs, NIL, TRULY } from '@block-kit/utils';
+import { BOLD_KEY } from '../../bold/types/index.js';
+import { useToolbarContext } from '../context/provider.js';
+
+const Bold = () => {
+    const { keys, refreshMarks, editor } = useToolbarContext();
+    const onExec = () => {
+        editor.command.exec(BOLD_KEY, { value: keys[BOLD_KEY] ? NIL : TRULY });
+        refreshMarks();
+    };
+    return (jsx("div", { className: cs("menu-toolbar-item", keys[BOLD_KEY] && "active"), onClick: onExec, children: jsx(IconBold, {}) }));
+};
+
+export { Bold };

package/dist/es/toolbar/modules/bullet-list.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import IconUnorderedList from '@arco-design/web-react/icon/react-icon/IconUnorderedList';
+import { cs, TRULY } from '@block-kit/utils';
+import { BULLET_LIST_KEY } from '../../bullet-list/types/index.js';
+import { isBulletList } from '../../bullet-list/utils/is.js';
+import { useToolbarContext } from '../context/provider.js';
+
+const BulletList = () => {
+    const { keys, refreshMarks, editor } = useToolbarContext();
+    const isBullet = isBulletList(keys);
+    return (jsx("div", { className: cs("menu-toolbar-item", isBullet && "active"), onClick: () => {
+            editor.command.exec(BULLET_LIST_KEY, { value: TRULY });
+            refreshMarks();
+        }, children: jsx(IconUnorderedList, {}) }));
+};
+
+export { BulletList };

package/dist/es/toolbar/modules/cut.js

@@ -0,0 +1,7 @@
+import { jsx } from 'react/jsx-runtime';
+
+const Cut = () => {
+    return jsx("div", { className: "menu-toolbar-cut" });
+};
+
+export { Cut };

package/dist/es/toolbar/modules/divider.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { cs, TRULY } from '@block-kit/utils';
+import { DIVIDER_KEY } from '../../divider/types/index.js';
+import { DividerIcon } from '../../shared/icons/divider.js';
+import { useToolbarContext } from '../context/provider.js';
+
+const Divider = () => {
+    const { refreshMarks, editor } = useToolbarContext();
+    return (jsx("div", { className: cs("menu-toolbar-item"), onClick: () => {
+            editor.command.exec(DIVIDER_KEY, { value: TRULY });
+            refreshMarks();
+        }, children: jsx(DividerIcon, {}) }));
+};
+
+export { Divider };

package/dist/es/toolbar/modules/emoji.js

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import Trigger from '@arco-design/web-react/es/Trigger';
+import '@arco-design/web-react/es/Trigger/style';
+import Picker from '@emoji-mart/react';
+import { cs } from '@block-kit/utils';
+import { EMOJI_KEY } from '../../emoji/types/index.js';
+import { EmojiIcon } from '../../shared/icons/emoji.js';
+import { useToolbarContext } from '../context/provider.js';
+
+const Emoji = () => {
+    const { editor } = useToolbarContext();
+    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: [
+                "frequent",
+                "people",
+                "nature",
+                "foods",
+                "activity",
+                "places",
+                "objects",
+                "symbols",
+            ], onEmojiSelect: (emoji) => {
+                editor.command.exec(EMOJI_KEY, { value: emoji.id });
+            }, maxFrequentRows: 2 })), trigger: "click", children: jsx("div", { className: cs("menu-toolbar-item"), children: jsx(EmojiIcon, {}) }) }));
+};
+
+export { Emoji };

package/dist/es/toolbar/modules/font-color.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Trigger from '@arco-design/web-react/es/Trigger';
+import '@arco-design/web-react/es/Trigger/style';
+import IconDown from '@arco-design/web-react/icon/react-icon/IconDown';
+import { cs } from '@block-kit/utils';
+import { BACKGROUND_KEY } from '../../background/types/index.js';
+import { FONT_COLOR_KEY } from '../../font-color/types/index.js';
+import { FontColorIcon } from '../../shared/icons/font-color.js';
+import { useToolbarContext } from '../context/provider.js';
+
+const COLOR = [
+    "",
+    "rgb(143, 149, 158)",
+    "rgb(216, 57, 49)",
+    "rgb(222, 120, 2)",
+    "rgb(220, 155, 4)",
+    "rgb(46, 161, 33)",
+    "rgb(36, 91, 219)",
+    "rgb(100, 37, 208)",
+];
+const BACKGROUND = [
+    "",
+    "rgb(242, 243, 245)",
+    "rgb(251, 191, 188)",
+    "rgba(254, 212, 164, 0.8)",
+    "rgba(255, 246, 122, 0.8)",
+    "rgba(183, 237, 177, 0.8)",
+    "rgba(186, 206, 253, 0.7)",
+    "rgba(205, 178, 250, 0.7)",
+    "rgba(222, 224, 227, 0.8)",
+    "rgb(187, 191, 196)",
+    "rgb(247, 105, 100)",
+    "rgb(255, 165, 61)",
+    "rgb(255, 233, 40)",
+    "rgb(98, 210, 86)",
+    "rgba(78, 131, 253, 0.55)",
+    "rgba(147, 90, 246, 0.55)",
+];
+const FontColor = () => {
+    const { keys, refreshMarks, editor } = useToolbarContext();
+    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: () => {
+                            editor.command.exec(FONT_COLOR_KEY, { value: it });
+                            refreshMarks();
+                        }, 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: () => {
+                            editor.command.exec(BACKGROUND_KEY, { value: it });
+                            refreshMarks();
+                        }, 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" })] }) }));
+};
+
+export { FontColor };

package/dist/es/toolbar/modules/font-size.js

@@ -0,0 +1,21 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Trigger from '@arco-design/web-react/es/Trigger';
+import '@arco-design/web-react/es/Trigger/style';
+import IconCheck from '@arco-design/web-react/icon/react-icon/IconCheck';
+import IconDown from '@arco-design/web-react/icon/react-icon/IconDown';
+import { NIL } from '@block-kit/utils';
+import { useRef } from 'react';
+import { FONT_SIZE_KEY } from '../../font-size/types/index.js';
+import { FontSizeIcon } from '../../shared/icons/font-size.js';
+import { useToolbarContext } from '../context/provider.js';
+
+const STEP = Array(10)
+    .fill(null)
+    .map((_, i) => String(i + 12));
+const FontSize = () => {
+    const triggerRef = useRef(null);
+    const { keys, refreshMarks, editor } = useToolbarContext();
+    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.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" })] }) }));
+};
+
+export { FontSize };

package/dist/es/toolbar/modules/heading.js

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Trigger from '@arco-design/web-react/es/Trigger';
+import '@arco-design/web-react/es/Trigger/style';
+import IconDown from '@arco-design/web-react/icon/react-icon/IconDown';
+import IconH1 from '@arco-design/web-react/icon/react-icon/IconH1';
+import IconH2 from '@arco-design/web-react/icon/react-icon/IconH2';
+import IconH3 from '@arco-design/web-react/icon/react-icon/IconH3';
+import { NIL } from '@block-kit/utils';
+import { HEADING_KEY } from '../../heading/types/index.js';
+import { TextIcon } from '../../shared/icons/text.js';
+import { useToolbarContext } from '../context/provider.js';
+
+const MAP = {
+    h1: jsx(IconH1, {}),
+    h2: jsx(IconH2, {}),
+    h3: jsx(IconH3, {}),
+};
+const Heading = () => {
+    const { keys, refreshMarks, editor: { command }, } = useToolbarContext();
+    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" })] }) }));
+};
+
+export { Heading };

package/dist/es/toolbar/modules/history.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import IconRedo from '@arco-design/web-react/icon/react-icon/IconRedo';
+import IconUndo from '@arco-design/web-react/icon/react-icon/IconUndo';
+import { EDITOR_EVENT } from '@block-kit/core';
+import { cs } from '@block-kit/utils';
+import { useMemoFn } from '@block-kit/utils/dist/es/hooks';
+import { useState, useEffect, Fragment } from 'react';
+import { useToolbarContext } from '../context/provider.js';
+
+const History = () => {
+    const { editor, refreshMarks } = useToolbarContext();
+    const [undoable, setUndoable] = useState(false);
+    const [redoable, setRedoable] = useState(false);
+    const refresh = useMemoFn(() => {
+        setUndoable(editor.history.isUndoAble());
+        setRedoable(editor.history.isRedoAble());
+    });
+    useEffect(() => {
+        editor.event.on(EDITOR_EVENT.CONTENT_CHANGE, refresh, 1000);
+        return () => {
+            editor.event.off(EDITOR_EVENT.CONTENT_CHANGE, refresh);
+        };
+    }, [editor, refresh]);
+    const undo = () => {
+        editor.history.undo();
+        refreshMarks();
+    };
+    const redo = () => {
+        editor.history.redo();
+        refreshMarks();
+    };
+    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, {}) })] }));
+};
+
+export { History };

package/dist/es/toolbar/modules/image.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import IconImage from '@arco-design/web-react/icon/react-icon/IconImage';
+import { cs, TRULY } from '@block-kit/utils';
+import { IMAGE_KEY } from '../../image/types/index.js';
+import { useToolbarContext } from '../context/provider.js';
+
+const Image = () => {
+    const { refreshMarks, editor } = useToolbarContext();
+    return (jsx("div", { className: cs("menu-toolbar-item"), onClick: () => {
+            editor.command.exec(IMAGE_KEY, { value: TRULY });
+            refreshMarks();
+        }, children: jsx(IconImage, {}) }));
+};
+
+export { Image };