@apple-pie/slice 0.0.3 → 0.0.5

package/dist/esm/chunks/EditorButtonBar-FnMa8Zv2.js

@@ -1,242 +0,0 @@
-import { _ as __rest } from './tslib.es6-0pkUdtrF.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { useTheme } from '../hooks/useTheme.js';
-import '../theme/colors.js';
-import '../hooks/useWindow.js';
-import { useObserveResize } from '../hooks/useObserveResize.js';
-import { D as DropDown } from './DropDown-D4t6EhKL.js';
-import { I as IconButton } from './IconButton-CguHGkBM.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-
-var css_248z = ".flexBox-module_row__PWxbe {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowBetween__27lKK {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowStart__nJZnW {\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_rowEnd__dHcOU {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_column__MP2Xd {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStart__Kg8cV {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: flex-start;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnStartCenter__zcmtk {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnBetween__157yI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}.flexBox-module_columnEnd__u2nwI {\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tbox-sizing: border-box;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.EditorButtonBar-module_wrapper__mfv-c {\n\twidth: 100%;\n}\n\n.EditorButtonBar-module_right__G2tBZ {\n}\n\n.EditorButtonBar-module_left__9omfV {\n\tflex: 1;\n}\n\n.EditorButtonBar-module_buttonGroup__p0aEd {\n\tgap: 4px;\n\tdiv.EditorButtonBar-module_divider__T5y5c {\n\t\theight: 20px;\n\t\tmin-height: 100%;\n\t\twidth: 1px;\n\t\tmin-width: 1px;\n\t\tmax-width: 1px;\n\t\tbackground: var(--core-surface-secondary);\n\t\tmargin: 0 8px;\n\t}\n}\n";
-var css = {"wrapper":"EditorButtonBar-module_wrapper__mfv-c flexBox-module_rowStart__nJZnW","right":"EditorButtonBar-module_right__G2tBZ flexBox-module_rowStart__nJZnW","left":"EditorButtonBar-module_left__9omfV flexBox-module_rowStart__nJZnW","buttonGroup":"EditorButtonBar-module_buttonGroup__p0aEd flexBox-module_rowStart__nJZnW"};
-styleInject(css_248z);
-
-var FormattingOption;
-(function (FormattingOption) {
-    FormattingOption["hilight"] = "hilight";
-    FormattingOption["bold"] = "bold";
-    FormattingOption["italic"] = "italic";
-    FormattingOption["underline"] = "underline";
-    FormattingOption["strikethrough"] = "strikethrough";
-    FormattingOption["list"] = "list";
-    FormattingOption["orderedList"] = "ordered list";
-    FormattingOption["taskList"] = "task list";
-    FormattingOption["sinkList"] = "sink list";
-    FormattingOption["raiseList"] = "raise list";
-    FormattingOption["undo"] = "undo";
-    FormattingOption["redo"] = "redo";
-    FormattingOption["download"] = "download";
-    FormattingOption["more"] = "more";
-    FormattingOption["copy"] = "copy";
-    FormattingOption["link"] = "link";
-})(FormattingOption || (FormattingOption = {}));
-
-const coreButtons = {
-    link: {
-        icon: 'link',
-        toolTip: 'Link',
-        command: 'link',
-        id: FormattingOption.link,
-    },
-    hilight: {
-        icon: 'hilight',
-        toolTip: 'Highlight',
-        command: 'hilight',
-        id: FormattingOption.hilight,
-    },
-    bold: {
-        icon: 'bold',
-        toolTip: 'Bold',
-        command: 'bold',
-        id: FormattingOption.bold,
-        shortcut: { modifier: 'meta', key: 'b' },
-    },
-    italic: {
-        icon: 'italic',
-        toolTip: 'Italic',
-        command: 'italic',
-        id: FormattingOption.italic,
-        shortcut: { modifier: 'meta', key: 'i' },
-    },
-    underline: {
-        icon: 'underline',
-        toolTip: 'Underline',
-        command: 'underline',
-        id: FormattingOption.underline,
-        shortcut: { modifier: 'meta', key: 'u' },
-    },
-    strikethrough: {
-        icon: 'strike',
-        toolTip: 'Strikethrough',
-        command: 'strike',
-        id: FormattingOption.strikethrough,
-        shortcut: { modifier: 'meta', key: 's' },
-    },
-    list: {
-        icon: 'bullet list',
-        toolTip: 'List',
-        command: 'ulist',
-        id: FormattingOption.list,
-    },
-    orderedList: {
-        icon: 'numbered list',
-        toolTip: 'Ordered list',
-        command: 'olist',
-        id: FormattingOption.orderedList,
-    },
-    taskList: {
-        icon: 'task list',
-        toolTip: 'Task list',
-        command: 'task',
-        id: FormattingOption.taskList,
-    },
-    sinkList: {
-        icon: 'sink',
-        toolTip: 'Sink list item',
-        command: 'sink',
-        id: FormattingOption.sinkList,
-    },
-    raiseList: {
-        icon: 'lift',
-        toolTip: 'Raise list item',
-        command: 'raise',
-        id: FormattingOption.raiseList,
-    },
-    undo: {
-        icon: 'undo',
-        toolTip: 'Undo',
-        command: 'undo',
-        id: FormattingOption.undo,
-    },
-    redo: {
-        icon: 'redo',
-        toolTip: 'Redo',
-        command: 'redo',
-        id: FormattingOption.redo,
-    },
-    copy: {
-        icon: 'copy',
-        toolTip: 'Copy',
-        command: 'copy',
-        id: FormattingOption.copy,
-    },
-    download: {
-        icon: 'download',
-        toolTip: 'Download',
-        command: 'download',
-        id: FormattingOption.download,
-    },
-    more: {
-        icon: 'more',
-        toolTip: 'More Options',
-        command: 'more',
-        id: FormattingOption.more,
-    },
-};
-const styles = [
-    { label: 'Heading 1', value: 'h1', alt: 'h1' },
-    { label: 'Heading 2', value: 'h2', alt: 'h2' },
-    { label: 'Heading 3', value: 'h3', alt: 'h3' },
-    { label: 'Body', value: 'p', alt: 'p' },
-];
-const buttonGroups = {
-    format: {
-        buttons: [
-            coreButtons.hilight,
-            coreButtons.bold,
-            coreButtons.italic,
-            coreButtons.underline,
-            coreButtons.strikethrough,
-            coreButtons.link,
-        ],
-    },
-    lists: {
-        buttons: [coreButtons.list, coreButtons.orderedList, coreButtons.taskList],
-    },
-    listEdit: {
-        buttons: [coreButtons.sinkList, coreButtons.raiseList],
-    },
-    undo: {
-        buttons: [coreButtons.undo, coreButtons.redo],
-    },
-    more: {
-        buttons: [coreButtons.more],
-    },
-};
-const editControls = {
-    regular: {
-        styles,
-        buttons: [
-            buttonGroups.format,
-            buttonGroups.lists,
-            buttonGroups.listEdit,
-            buttonGroups.undo,
-        ],
-        download: coreButtons.download,
-    },
-    small: {
-        buttons: [buttonGroups.format, buttonGroups.more],
-        download: coreButtons.download,
-    },
-    medium: {
-        styles,
-        buttons: [buttonGroups.format, buttonGroups.lists],
-        download: coreButtons.download,
-    },
-};
-
-const EditorButtonBar = React.memo((props) => {
-    var _a;
-    const { onCommand = () => null, onToolTip = () => null, shortSize = 500, mediumSize = 664, state = 'auto', activeStyle = 'p', disabledFormats = [], activeFormats } = props, divAttributes = __rest(props, ["onCommand", "onToolTip", "shortSize", "mediumSize", "state", "activeStyle", "disabledFormats", "activeFormats"]);
-    const { id: divId, className, style } = divAttributes, rest = __rest(divAttributes, ["id", "className", "style"]);
-    const divStyle = style !== null && style !== void 0 ? style : {};
-    const divClass = className ? ` ${className}` : '';
-    const [barState, setBarState] = useState('regular');
-    const ref = useRef(null);
-    const size = useObserveResize(ref);
-    useEffect(() => {
-        if (state !== 'auto')
-            setBarState(state);
-        else if (size.width < shortSize)
-            setBarState('small');
-        else if (size.width < mediumSize)
-            setBarState('medium');
-        else
-            setBarState('regular');
-    }, [size, shortSize, mediumSize, state]);
-    const handleStyleChange = useCallback((option) => {
-        switch (option.value) {
-            case 'h1':
-                onCommand('h1', undefined);
-                break;
-            case 'h2':
-                onCommand('h2', undefined);
-                break;
-            case 'h3':
-                onCommand('h3', undefined);
-                break;
-            case 'p':
-                onCommand('p', undefined);
-                break;
-        }
-    }, [onCommand]);
-    return (jsxs("div", Object.assign({ id: divId, className: `${css.wrapper}${divClass}`, style: divStyle, ref: ref }, rest, { children: [jsxs("div", { className: css.left, children: [(editControls === null || editControls === void 0 ? void 0 : editControls[barState].styles) && (jsx(DropDown, { options: editControls === null || editControls === void 0 ? void 0 : editControls[barState].styles, placeholder: false, unframed: true, width: '100px', selectedValue: activeStyle, onChange: (_index, option) => handleStyleChange(option) })), (_a = editControls === null || editControls === void 0 ? void 0 : editControls[barState].buttons) === null || _a === void 0 ? void 0 : _a.map((group, index) => {
-                        return (jsx(RenderGroup, { onCommand: onCommand, onToolTip: onToolTip, buttonGroup: group, activeFormats: activeFormats, disabledFormats: disabledFormats, state: barState }, `button-group-${group.name}${index}`));
-                    })] }), (editControls === null || editControls === void 0 ? void 0 : editControls[barState].download) && (jsxs("div", { className: css.right, children: [jsx(IconButton, { icon: coreButtons.copy.icon, tooltip: coreButtons.copy.toolTip, hover: disabledFormats.includes('download'), toggle: false, onToolTip: onToolTip, disabled: disabledFormats.includes('copy'), onClick: (e) => onCommand(coreButtons.copy.command, e) }), jsx(IconButton, { icon: coreButtons.download.icon, tooltip: coreButtons.download.toolTip, hover: !disabledFormats.includes('download'), toggle: false, onToolTip: onToolTip, disabled: disabledFormats.includes('download'), onClick: (e) => onCommand(coreButtons.download.command, e) })] }))] })));
-});
-const RenderGroup = React.memo((props) => {
-    var _a;
-    const { onCommand = () => null, onToolTip = () => null, buttonGroup, activeFormats, state = 'default', disabledFormats = [], } = props;
-    const theme = useTheme();
-    return (jsxs("div", { className: css.buttonGroup, children: [state !== 'small' && jsx("div", { className: "divider" }), (_a = buttonGroup === null || buttonGroup === void 0 ? void 0 : buttonGroup.buttons) === null || _a === void 0 ? void 0 : _a.map((button, index) => {
-                const active = (button === null || button === void 0 ? void 0 : button.id) ? activeFormats === null || activeFormats === void 0 ? void 0 : activeFormats.includes(button.id) : false;
-                const bgColor = active
-                    ? theme.current.colors['core-surface-secondary']
-                    : 'transparent';
-                return (jsx(IconButton, { icon: button === null || button === void 0 ? void 0 : button.icon, tooltip: button === null || button === void 0 ? void 0 : button.toolTip, onToolTip: onToolTip, hover: !disabledFormats.includes(button.id || 'none'), toggle: false, bgColor: bgColor, onClick: (e) => onCommand(button === null || button === void 0 ? void 0 : button.command, e), disabled: disabledFormats.includes(button.id || 'none'), frameSize: 30, iconSize: 20 }, `button-${button === null || button === void 0 ? void 0 : button.icon}-${index}`));
-            })] }));
-});
-
-export { EditorButtonBar as E };