@akinon/ui-editor 1.0.0

package/dist/esm/tiptap/components/menu-bar/heading-selector.js

@@ -0,0 +1,70 @@
+import '@tiptap/extension-heading';
+import '@tiptap/extension-paragraph';
+import { Button } from '@akinon/ui-button';
+import { Dropdown } from '@akinon/ui-dropdown';
+import React from 'react';
+import { i18n } from '../../../i18n';
+import { HEADING_OPTIONS, HTML_ELEMENTS, TOOLBAR_BUTTON_IDS } from '../../constants';
+export const HeadingSelector = ({ editor, editorState, disabled = false, baseCls, hashId, hiddenButtons = [] }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const getLabel = (key) => {
+        return i18n.t(`editor.heading.${key}`);
+    };
+    const activeHeadingLabel = React.useMemo(() => {
+        var _a;
+        const headings = [
+            {
+                isActive: editorState.isHeading1,
+                label: getLabel(HTML_ELEMENTS.H1),
+                isHidden: hiddenButtons.includes(TOOLBAR_BUTTON_IDS.H1)
+            },
+            {
+                isActive: editorState.isHeading2,
+                label: getLabel(HTML_ELEMENTS.H2),
+                isHidden: hiddenButtons.includes(TOOLBAR_BUTTON_IDS.H2)
+            },
+            {
+                isActive: editorState.isHeading3,
+                label: getLabel(HTML_ELEMENTS.H3),
+                isHidden: hiddenButtons.includes(TOOLBAR_BUTTON_IDS.H3)
+            },
+            {
+                isActive: editorState.isHeading4,
+                label: getLabel(HTML_ELEMENTS.H4),
+                isHidden: hiddenButtons.includes(TOOLBAR_BUTTON_IDS.H4)
+            }
+        ];
+        return (((_a = headings.find(h => h.isActive && !h.isHidden)) === null || _a === void 0 ? void 0 : _a.label) ||
+            getLabel('paragraph'));
+    }, [
+        editorState.isHeading1,
+        editorState.isHeading2,
+        editorState.isHeading3,
+        editorState.isHeading4,
+        hiddenButtons
+    ]);
+    const menuItems = Object.values(HEADING_OPTIONS)
+        .filter(option => !hiddenButtons.includes(option.key))
+        .map(option => ({
+        key: option.key,
+        label: getLabel(option.key),
+        onClick: () => {
+            if (option.level === null) {
+                editor.chain().focus().setParagraph().run();
+            }
+            else {
+                editor.chain().focus().toggleHeading({ level: option.level }).run();
+            }
+        },
+        className: `${baseCls}__heading-item ${baseCls}__heading-item--${option.key}`
+    }));
+    const selectedKeys = [
+        editorState.isParagraph ? 'paragraph' : '',
+        editorState.isHeading1 ? HTML_ELEMENTS.H1 : '',
+        editorState.isHeading2 ? HTML_ELEMENTS.H2 : '',
+        editorState.isHeading3 ? HTML_ELEMENTS.H3 : '',
+        editorState.isHeading4 ? HTML_ELEMENTS.H4 : ''
+    ].filter(Boolean);
+    return (React.createElement(Dropdown, { menu: { items: menuItems, selectedKeys }, trigger: ['click'], onOpenChange: setIsOpen, overlayClassName: `${baseCls}__heading-dropdown ${hashId}` },
+        React.createElement(Button, { className: `${baseCls}__heading-button`, type: "icon", size: "small", disabled: disabled, tooltip: i18n.t('editor.heading.tooltip'), icon: isOpen ? 'chevron_up' : 'chevron_down', iconPosition: "end" }, activeHeadingLabel)));
+};

package/dist/esm/tiptap/components/menu-bar/index.d.ts

@@ -0,0 +1,18 @@
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import type { ToolbarConfig } from '../../types';
+interface MenuBarProps {
+    editor: Editor;
+    isSourceMode: boolean;
+    toggleSource: () => void;
+    onSave?: () => void;
+    className?: string;
+    toolbar?: ToolbarConfig;
+    readOnly?: boolean;
+}
+export declare const MenuBar: {
+    ({ editor, isSourceMode, toggleSource, className, toolbar, readOnly }: MenuBarProps): React.JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/tiptap/components/menu-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAI5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,aAAa,CAAC;AAS9D,UAAU,YAAY;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,OAAO;2EAOjB,YAAY;;CAqMd,CAAC"}

package/dist/esm/tiptap/components/menu-bar/index.js

@@ -0,0 +1,131 @@
+import { getSafeCustomTokens, useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { useEditorState } from '@tiptap/react';
+import { ConfigProvider } from 'antd';
+import clsx from 'clsx';
+import React from 'react';
+import { ALIGNMENT_OPTIONS, FONT_SIZES, TOOLBAR_BUTTON_IDS, TOOLBAR_GROUP_IDS } from '../../constants';
+import { ActionToolbar } from './action-toolbar';
+import { AlignmentToolbar } from './alignment-toolbar';
+import { HeadingSelector } from './heading-selector';
+import { LinkPopover } from './link-popover';
+import { ListAndBlockToolbar } from './list-and-block-toolbar';
+import { MediaToolbar } from './media-toolbar';
+import { TextFormattingToolbar } from './text-formatting-toolbar';
+export const MenuBar = ({ editor, isSourceMode, toggleSource, className, toolbar, readOnly = false }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const customTokens = getSafeCustomTokens(theme);
+    const colors = (theme === null || theme === void 0 ? void 0 : theme.colors) || {};
+    const baseCls = getPrefixCls('tiptap-editor__menu-bar');
+    const isDisabled = isSourceMode || readOnly;
+    const editorState = useEditorState({
+        editor,
+        selector: (ctx) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+            const e = ctx.editor;
+            const { BOLD, ITALIC, STRIKE, CODE, UNDERLINE, HIGHLIGHT, PARAGRAPH, HEADING, BULLET_LIST, ORDERED_LIST, TASK_LIST, CODE_BLOCK, BLOCKQUOTE, LINK, TABLE } = TOOLBAR_BUTTON_IDS;
+            return {
+                isBold: (_a = e.isActive(BOLD)) !== null && _a !== void 0 ? _a : false,
+                canBold: (_b = e.can().chain().toggleMark(BOLD).run()) !== null && _b !== void 0 ? _b : false,
+                isItalic: (_c = e.isActive(ITALIC)) !== null && _c !== void 0 ? _c : false,
+                canItalic: (_d = e.can().chain().toggleMark(ITALIC).run()) !== null && _d !== void 0 ? _d : false,
+                isStrike: (_e = e.isActive(STRIKE)) !== null && _e !== void 0 ? _e : false,
+                canStrike: (_f = e.can().chain().toggleMark(STRIKE).run()) !== null && _f !== void 0 ? _f : false,
+                isCode: (_g = e.isActive(CODE)) !== null && _g !== void 0 ? _g : false,
+                canCode: (_h = e.can().chain().toggleMark(CODE).run()) !== null && _h !== void 0 ? _h : false,
+                isUnderline: (_j = e.isActive(UNDERLINE)) !== null && _j !== void 0 ? _j : false,
+                canUnderline: (_k = e.can().chain().toggleMark(UNDERLINE).run()) !== null && _k !== void 0 ? _k : false,
+                isHighlight: (_l = e.isActive(HIGHLIGHT)) !== null && _l !== void 0 ? _l : false,
+                canClearMarks: (_m = e.can().chain().unsetAllMarks().run()) !== null && _m !== void 0 ? _m : false,
+                isParagraph: (_o = e.isActive(PARAGRAPH)) !== null && _o !== void 0 ? _o : false,
+                isHeading1: (_p = e.isActive(HEADING, { level: 1 })) !== null && _p !== void 0 ? _p : false,
+                isHeading2: (_q = e.isActive(HEADING, { level: 2 })) !== null && _q !== void 0 ? _q : false,
+                isHeading3: (_r = e.isActive(HEADING, { level: 3 })) !== null && _r !== void 0 ? _r : false,
+                isHeading4: (_s = e.isActive(HEADING, { level: 4 })) !== null && _s !== void 0 ? _s : false,
+                isBulletList: (_t = e.isActive(BULLET_LIST)) !== null && _t !== void 0 ? _t : false,
+                isOrderedList: (_u = e.isActive(ORDERED_LIST)) !== null && _u !== void 0 ? _u : false,
+                isTaskList: (_v = e.isActive(TASK_LIST)) !== null && _v !== void 0 ? _v : false,
+                isCodeBlock: (_w = e.isActive(CODE_BLOCK)) !== null && _w !== void 0 ? _w : false,
+                isBlockquote: (_x = e.isActive(BLOCKQUOTE)) !== null && _x !== void 0 ? _x : false,
+                isLink: (_y = e.isActive(LINK)) !== null && _y !== void 0 ? _y : false,
+                isTable: (_z = e.isActive(TABLE)) !== null && _z !== void 0 ? _z : false,
+                isLeftAlign: (_0 = e.isActive({ textAlign: ALIGNMENT_OPTIONS.LEFT })) !== null && _0 !== void 0 ? _0 : false,
+                isCenterAlign: (_1 = e.isActive({ textAlign: ALIGNMENT_OPTIONS.CENTER })) !== null && _1 !== void 0 ? _1 : false,
+                isRightAlign: (_2 = e.isActive({ textAlign: ALIGNMENT_OPTIONS.RIGHT })) !== null && _2 !== void 0 ? _2 : false,
+                isJustifyAlign: (_3 = e.isActive({ textAlign: ALIGNMENT_OPTIONS.JUSTIFY })) !== null && _3 !== void 0 ? _3 : false,
+                canUndo: (_4 = e.can().chain().undo().run()) !== null && _4 !== void 0 ? _4 : false,
+                canRedo: (_5 = e.can().chain().redo().run()) !== null && _5 !== void 0 ? _5 : false
+            };
+        }
+    });
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['EditorMenuBar'],
+        theme: theme
+    }, () => {
+        var _a, _b;
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [`${prefixCls}`]: {
+                background: (_a = colors.ebonyClay) === null || _a === void 0 ? void 0 : _a['500'],
+                padding: '10px',
+                border: `${customTokens.border.borderWidthThick} ${customTokens.border.borderSolid} ${(_b = colors.ebonyClay) === null || _b === void 0 ? void 0 : _b['550']}`,
+                borderTopLeftRadius: '5px',
+                borderTopRightRadius: '5px'
+            },
+            [`${prefixCls} .${baseCls}__buttons`]: {
+                display: customTokens.layout.displayFlex,
+                gap: '5px',
+                alignItems: customTokens.layout.flexCenter,
+                flexWrap: 'wrap'
+            },
+            [`${prefixCls} .${baseCls}__link-input-container`]: {
+                display: customTokens.layout.displayFlex,
+                gap: '4px',
+                alignItems: customTokens.layout.flexCenter
+            },
+            [`${prefixCls} .active svg`]: {
+                color: token.colorPrimary
+            },
+            [`.${baseCls}__heading-dropdown`]: {
+                [`&.${hashId}`]: {
+                    [` .${baseCls}__heading-item`]: {
+                        fontWeight: 700
+                    },
+                    [` .${baseCls}__heading-item--paragraph`]: {
+                        fontSize: `${FONT_SIZES.paragraph}px`,
+                        fontWeight: 400
+                    },
+                    [` .${baseCls}__heading-item--h1`]: {
+                        fontSize: `${FONT_SIZES.h1}px`
+                    },
+                    [` .${baseCls}__heading-item--h2`]: {
+                        fontSize: `${FONT_SIZES.h2}px`
+                    },
+                    [` .${baseCls}__heading-item--h3`]: {
+                        fontSize: `${FONT_SIZES.h3}px`
+                    },
+                    [` .${baseCls}__heading-item--h4`]: {
+                        fontSize: `${FONT_SIZES.h4}px`
+                    }
+                }
+            },
+            [`${prefixCls} .${baseCls}__heading-button`]: {
+                padding: 0,
+                width: '90px'
+            }
+        };
+    });
+    return useStyle(React.createElement("div", { className: clsx(baseCls, hashId, className) },
+        React.createElement("div", { className: `${baseCls}__buttons` },
+            !((_a = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _a === void 0 ? void 0 : _a.includes(TOOLBAR_GROUP_IDS.HEADING)) && (React.createElement(HeadingSelector, { editor: editor, editorState: editorState, disabled: isDisabled, baseCls: baseCls, hashId: hashId, hiddenButtons: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons })),
+            !((_b = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _b === void 0 ? void 0 : _b.includes(TOOLBAR_GROUP_IDS.FORMATTING)) && (React.createElement(TextFormattingToolbar, { editor: editor, editorState: editorState, disabled: isDisabled, hiddenButtons: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons })),
+            !((_c = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _c === void 0 ? void 0 : _c.includes(TOOLBAR_GROUP_IDS.LIST)) && (React.createElement(ListAndBlockToolbar, { editor: editor, editorState: editorState, disabled: isDisabled, hiddenButtons: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons })),
+            !((_d = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _d === void 0 ? void 0 : _d.includes(TOOLBAR_GROUP_IDS.LINK)) && (React.createElement(LinkPopover, { editor: editor, editorState: editorState, disabled: isDisabled })),
+            !((_e = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _e === void 0 ? void 0 : _e.includes(TOOLBAR_GROUP_IDS.MEDIA)) && (React.createElement(MediaToolbar, { editor: editor, editorState: editorState, disabled: isDisabled, hiddenButtons: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons })),
+            !((_f = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _f === void 0 ? void 0 : _f.includes(TOOLBAR_GROUP_IDS.ALIGNMENT)) && (React.createElement(AlignmentToolbar, { editor: editor, editorState: editorState, disabled: isDisabled })),
+            !((_g = toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenGroups) === null || _g === void 0 ? void 0 : _g.includes(TOOLBAR_GROUP_IDS.HISTORY)) && (React.createElement(ActionToolbar, { editor: editor, editorState: editorState, isSourceMode: isSourceMode, toggleSource: toggleSource, disabled: readOnly, hiddenButtons: toolbar === null || toolbar === void 0 ? void 0 : toolbar.hiddenButtons })))));
+};
+MenuBar.displayName = 'MenuBar';

package/dist/esm/tiptap/components/menu-bar/link-popover.d.ts

@@ -0,0 +1,12 @@
+import '@tiptap/extension-link';
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import type { EditorState } from '../../types';
+interface LinkPopoverProps {
+    editor: Editor;
+    editorState: EditorState;
+    disabled?: boolean;
+}
+export declare const LinkPopover: ({ editor, editorState, disabled }: LinkPopoverProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=link-popover.d.ts.map

package/dist/esm/tiptap/components/menu-bar/link-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-popover.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/link-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAehC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,UAAU,gBAAgB;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,GAAI,mCAIzB,gBAAgB,sBA+JlB,CAAC"}

package/dist/esm/tiptap/components/menu-bar/link-popover.js

@@ -0,0 +1,108 @@
+import '@tiptap/extension-link';
+import { Button } from '@akinon/ui-button';
+import { Input } from '@akinon/ui-input';
+import { Popover } from '@akinon/ui-popover';
+import { getSafeCustomTokens, useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { i18n } from '../../../i18n';
+export const LinkPopover = ({ editor, editorState, disabled }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [url, setUrl] = useState('');
+    const [text, setText] = useState('');
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const customTokens = getSafeCustomTokens(theme);
+    const baseCls = getPrefixCls('tiptap-link-popover');
+    const activeCls = 'active';
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['LinkPopover'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [prefixCls]: {
+                padding: '8px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
+                width: '300px'
+            },
+            [`${prefixCls} .${baseCls}__actions`]: {
+                display: customTokens.layout.displayFlex,
+                gap: '4px',
+                alignItems: customTokens.layout.flexCenter,
+                justifyContent: 'flex-end',
+                marginTop: '4px'
+            },
+            [`${prefixCls} .${baseCls}__row`]: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '4px'
+            }
+        };
+    });
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const { from, to, empty } = editor.state.selection;
+        const selectedText = editor.state.doc.textBetween(from, to, ' ');
+        const isLink = editor.isActive('link');
+        if (isLink) {
+            let href = editor.getAttributes('link').href;
+            if (!href) {
+                const { $from } = editor.state.selection;
+                const linkMark = $from.marks().find(m => m.type.name === 'link');
+                if (linkMark) {
+                    href = linkMark.attrs.href;
+                }
+            }
+            setUrl(href || '');
+        }
+        else {
+            setUrl('');
+        }
+        setText(selectedText);
+        if (empty && isLink) {
+            editor.chain().extendMarkRange('link').run();
+        }
+    }, [isOpen, editor.state.selection, editor]);
+    const handleApplyLink = () => {
+        if (editorState.isLink) {
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange('link')
+                .setLink({ href: url })
+                .insertContent(text)
+                .run();
+        }
+        else {
+            editor.chain().focus().setLink({ href: url }).insertContent(text).run();
+        }
+        setIsOpen(false);
+    };
+    const handleRemoveLink = () => {
+        editor.chain().focus().unsetLink().run();
+        setIsOpen(false);
+    };
+    const content = (React.createElement("div", { className: `${baseCls} ${hashId}` },
+        React.createElement("div", { className: `${baseCls}__row` },
+            React.createElement(Input, { value: text, onChange: e => setText(e.target.value), placeholder: i18n.t('editor.link.text_placeholder'), size: "small" })),
+        React.createElement("div", { className: `${baseCls}__row` },
+            React.createElement(Input, { value: url, onChange: e => setUrl(e.target.value), placeholder: i18n.t('editor.link.url_placeholder'), size: "small", onKeyDown: e => {
+                    if (e.key === 'Enter') {
+                        handleApplyLink();
+                    }
+                } })),
+        React.createElement("div", { className: `${baseCls}__actions` },
+            React.createElement(Button, { size: "small", type: "success", icon: "katalogkontrol", onClick: handleApplyLink, disabled: !text || !url }),
+            React.createElement(Button, { size: "small", type: "default", danger: true, icon: "bin", onClick: handleRemoveLink, disabled: !editorState.isLink }))));
+    return useStyle(React.createElement(Popover, { content: content, trigger: "click", 
+        // @ts-expect-error - IPopoverProps definition is missing 'open' but underlying AntD component supports it
+        open: isOpen, onOpenChange: setIsOpen, placement: "bottom" },
+        React.createElement(Button, { type: "icon", size: "small", disabled: disabled, tooltip: i18n.t('editor.link.tooltip'), icon: "linked", className: editorState.isLink || isOpen ? activeCls : '' })));
+};

package/dist/esm/tiptap/components/menu-bar/list-and-block-toolbar.d.ts

@@ -0,0 +1,18 @@
+import '@tiptap/extension-list';
+import '@tiptap/extension-code';
+import '@tiptap/extension-code-block';
+import '@tiptap/extension-blockquote';
+import '@tiptap/extension-horizontal-rule';
+import '@tiptap/extension-table';
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import type { EditorState, ToolbarButtonId } from '../../types';
+interface ListAndBlockToolbarProps {
+    editor: Editor;
+    editorState: EditorState;
+    disabled?: boolean;
+    hiddenButtons?: ToolbarButtonId[];
+}
+export declare const ListAndBlockToolbar: ({ editor, editorState, disabled, hiddenButtons }: ListAndBlockToolbarProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=list-and-block-toolbar.d.ts.map

package/dist/esm/tiptap/components/menu-bar/list-and-block-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-and-block-toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/list-and-block-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGhE,UAAU,wBAAwB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;CACnC;AAED,eAAO,MAAM,mBAAmB,GAAI,kDAKjC,wBAAwB,sBA8E1B,CAAC"}

package/dist/esm/tiptap/components/menu-bar/list-and-block-toolbar.js

@@ -0,0 +1,69 @@
+import '@tiptap/extension-list';
+import '@tiptap/extension-code';
+import '@tiptap/extension-code-block';
+import '@tiptap/extension-blockquote';
+import '@tiptap/extension-horizontal-rule';
+import '@tiptap/extension-table';
+import { Button } from '@akinon/ui-button';
+import React from 'react';
+import { i18n } from '../../../i18n';
+import { TOOLBAR_BUTTON_IDS } from '../../constants';
+import { TablePopover } from '../table-popover';
+export const ListAndBlockToolbar = ({ editor, editorState, disabled = false, hiddenButtons = [] }) => {
+    const activeCls = 'active';
+    const buttonGroup = [
+        {
+            id: TOOLBAR_BUTTON_IDS.BULLET_LIST,
+            key: 1,
+            tooltip: i18n.t('editor.toolbar.bullet_list'),
+            icon: 'format-bullet-list',
+            onClick: () => editor.chain().focus().toggleBulletList().run(),
+            active: editorState.isBulletList
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.ORDERED_LIST,
+            key: 2,
+            tooltip: i18n.t('editor.toolbar.ordered_list'),
+            icon: 'format-number',
+            onClick: () => editor.chain().focus().toggleOrderedList().run(),
+            active: editorState.isOrderedList
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.CODE,
+            key: 3,
+            icon: 'format-code',
+            tooltip: i18n.t('editor.toolbar.code'),
+            onClick: () => editor.chain().focus().toggleCode().run(),
+            active: editorState.isCode
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.CODE_BLOCK,
+            key: 4,
+            tooltip: i18n.t('editor.toolbar.code_block'),
+            icon: 'format-codeblock',
+            onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+            active: editorState.isCodeBlock
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.BLOCKQUOTE,
+            key: 5,
+            tooltip: i18n.t('editor.toolbar.blockquote'),
+            icon: 'format-quote-open',
+            onClick: () => editor.chain().focus().toggleBlockquote().run(),
+            active: editorState.isBlockquote
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.HORIZONTAL_RULE,
+            key: 6,
+            tooltip: i18n.t('editor.toolbar.horizontal_rule'),
+            icon: 'format-line',
+            onClick: () => editor.chain().focus().setHorizontalRule().run(),
+            active: false
+        }
+    ];
+    return (React.createElement(React.Fragment, null,
+        buttonGroup
+            .filter(btn => !hiddenButtons.includes(btn.id))
+            .map(button => (React.createElement(Button, { key: button.key, type: "icon", size: "small", onClick: button.onClick, disabled: disabled, tooltip: button.tooltip, icon: button.icon, className: button.active ? activeCls : '' }))),
+        React.createElement(TablePopover, { editor: editor, disabled: disabled })));
+};

package/dist/esm/tiptap/components/menu-bar/media-toolbar.d.ts

@@ -0,0 +1,13 @@
+import '@tiptap/extension-image';
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import type { EditorState, ToolbarButtonId } from '../../types';
+interface MediaToolbarProps {
+    editor: Editor;
+    editorState: EditorState;
+    disabled?: boolean;
+    hiddenButtons?: ToolbarButtonId[];
+}
+export declare const MediaToolbar: ({ editor, editorState, disabled, hiddenButtons }: MediaToolbarProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=media-toolbar.d.ts.map

package/dist/esm/tiptap/components/menu-bar/media-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/media-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAC;AAGjC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGhE,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;CACnC;AAED,eAAO,MAAM,YAAY,GAAI,kDAK1B,iBAAiB,sBA6BnB,CAAC"}

package/dist/esm/tiptap/components/menu-bar/media-toolbar.js

@@ -0,0 +1,15 @@
+import '@tiptap/extension-image';
+import { Button } from '@akinon/ui-button';
+import React from 'react';
+import { i18n } from '../../../i18n';
+import { TOOLBAR_BUTTON_IDS } from '../../constants';
+import { YouTubePopover } from './youtube-popover';
+export const MediaToolbar = ({ editor, editorState, disabled = false, hiddenButtons = [] }) => {
+    return (React.createElement(React.Fragment, null,
+        !hiddenButtons.includes(TOOLBAR_BUTTON_IDS.IMAGE) && (React.createElement(Button, { key: "image-btn", type: "icon", size: "small", onClick: () => editor
+                .chain()
+                .focus()
+                .insertContent('<div data-type="image-upload"></div>')
+                .run(), disabled: disabled, tooltip: i18n.t('editor.toolbar.insert_image'), icon: "add_picture" })),
+        !hiddenButtons.includes(TOOLBAR_BUTTON_IDS.YOUTUBE) && (React.createElement(YouTubePopover, { editor: editor, editorState: editorState, disabled: disabled }))));
+};

package/dist/esm/tiptap/components/menu-bar/text-formatting-toolbar.d.ts

@@ -0,0 +1,18 @@
+import '@tiptap/extension-bold';
+import '@tiptap/extension-italic';
+import '@tiptap/extension-strike';
+import '@tiptap/extension-underline';
+import '@tiptap/extension-text-style';
+import '@tiptap/extension-highlight';
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import type { EditorState, ToolbarButtonId } from '../../types';
+interface TextFormattingToolbarProps {
+    editor: Editor;
+    editorState: EditorState;
+    disabled?: boolean;
+    hiddenButtons?: ToolbarButtonId[];
+}
+export declare const TextFormattingToolbar: ({ editor, editorState, disabled, hiddenButtons }: TextFormattingToolbarProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=text-formatting-toolbar.d.ts.map

package/dist/esm/tiptap/components/menu-bar/text-formatting-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-formatting-toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/text-formatting-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,6BAA6B,CAAC;AACrC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AAIrC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAc,WAAW,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE5E,UAAU,0BAA0B;IAClC,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,eAAe,EAAE,CAAC;CACnC;AAED,eAAO,MAAM,qBAAqB,GAAI,kDAKnC,0BAA0B,sBA+H5B,CAAC"}

package/dist/esm/tiptap/components/menu-bar/text-formatting-toolbar.js

@@ -0,0 +1,87 @@
+import '@tiptap/extension-bold';
+import '@tiptap/extension-italic';
+import '@tiptap/extension-strike';
+import '@tiptap/extension-underline';
+import '@tiptap/extension-text-style';
+import '@tiptap/extension-highlight';
+import { Button } from '@akinon/ui-button';
+import { ColorPicker } from '@akinon/ui-color-picker';
+import React from 'react';
+import { i18n } from '../../../i18n';
+import { PRESET_COLORS, TOOLBAR_BUTTON_IDS } from '../../constants';
+export const TextFormattingToolbar = ({ editor, editorState, disabled = false, hiddenButtons = [] }) => {
+    const activeCls = 'active';
+    const formattingButtons = [
+        {
+            id: TOOLBAR_BUTTON_IDS.BOLD,
+            key: 1,
+            icon: 'format-bold',
+            tooltip: i18n.t('editor.toolbar.bold'),
+            onClick: () => editor.chain().focus().toggleBold().run(),
+            active: editorState.isBold,
+            disabled: disabled || !editorState.canBold
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.ITALIC,
+            key: 2,
+            icon: 'format-italic',
+            tooltip: i18n.t('editor.toolbar.italic'),
+            onClick: () => editor.chain().focus().toggleItalic().run(),
+            active: editorState.isItalic,
+            disabled: disabled || !editorState.canItalic
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.STRIKE,
+            key: 3,
+            icon: 'format-strikethrough',
+            tooltip: i18n.t('editor.toolbar.strike'),
+            onClick: () => editor.chain().focus().toggleStrike().run(),
+            active: editorState.isStrike,
+            disabled: disabled || !editorState.canStrike
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.UNDERLINE,
+            key: 4,
+            icon: 'format-underline',
+            tooltip: i18n.t('editor.toolbar.underline'),
+            onClick: () => editor.chain().focus().toggleUnderline().run(),
+            active: editorState.isUnderline,
+            disabled: disabled || !editorState.canUnderline
+        },
+        {
+            id: TOOLBAR_BUTTON_IDS.CLEAR,
+            key: 5,
+            icon: 'format-eraser',
+            tooltip: i18n.t('editor.toolbar.clear_formatting'),
+            onClick: () => editor.chain().focus().unsetAllMarks().run(),
+            active: false,
+            disabled: disabled || !editorState.canClearMarks
+        }
+    ];
+    return (React.createElement(React.Fragment, null,
+        formattingButtons
+            .filter(btn => !hiddenButtons.includes(btn.id))
+            .map(button => (React.createElement(Button, { key: button.key, type: "icon", size: "small", onClick: button.onClick, disabled: button.disabled, tooltip: button.tooltip, icon: button.icon, className: button.active ? activeCls : '' }))),
+        React.createElement(ColorPicker, { disabled: disabled, presets: [
+                {
+                    label: i18n.t('editor.color_picker.recommended'),
+                    colors: PRESET_COLORS
+                }
+            ], value: editor.getAttributes('textStyle').color, onChange: (color) => {
+                editor.chain().focus().setColor(color.toHexString()).run();
+            } },
+            React.createElement(Button, { type: "icon", size: "small", disabled: disabled, tooltip: i18n.t('editor.toolbar.text_color'), icon: "format-paint-bucket", className: editor.getAttributes('textStyle').color ? activeCls : '' })),
+        !hiddenButtons.includes(TOOLBAR_BUTTON_IDS.HIGHLIGHT) && (React.createElement(ColorPicker, { disabled: disabled, presets: [
+                {
+                    label: i18n.t('editor.color_picker.recommended'),
+                    colors: PRESET_COLORS
+                }
+            ], value: editor.getAttributes('highlight').color, onChange: (color) => {
+                editor
+                    .chain()
+                    .focus()
+                    .toggleHighlight({ color: color.toHexString() })
+                    .run();
+            } },
+            React.createElement(Button, { type: "icon", size: "small", disabled: disabled, tooltip: i18n.t('editor.toolbar.highlight_color'), icon: "format-highlighter", className: editorState.isHighlight ? activeCls : '' })))));
+};

package/dist/esm/tiptap/components/menu-bar/youtube-popover.d.ts

@@ -0,0 +1,12 @@
+import '@tiptap/extension-youtube';
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import type { EditorState } from '../../types';
+interface YouTubePopoverProps {
+    editor: Editor;
+    editorState: EditorState;
+    disabled?: boolean;
+}
+export declare const YouTubePopover: ({ editor, disabled }: YouTubePopoverProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=youtube-popover.d.ts.map

package/dist/esm/tiptap/components/menu-bar/youtube-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtube-popover.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/menu-bar/youtube-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAenC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,WAAW,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,cAAc,GAAI,sBAAsB,mBAAmB,sBA8GvE,CAAC"}