@quadrats/react 1.1.8 → 1.1.9

package/toolbar/index.cjs.js

@@ -0,0 +1,468 @@
+'use strict';
+
+var React = require('react');
+var clsx = require('clsx');
+var components = require('@quadrats/react/components');
+var utils = require('@quadrats/react/utils');
+var core = require('@quadrats/core');
+var icons = require('@quadrats/icons');
+var react = require('@quadrats/react');
+var tslib = require('tslib');
+
+/**
+ * A react element constant of toolbar divider.
+ */
+const TOOLBAR_DIVIDER = React.createElement("span", { className: "qdr-toolbar__divider" });
+
+function InlineToolbar({ className, iconGroups, style, onClickAway }) {
+    const validIconsGroup = iconGroups.filter((group) => group.icons.length);
+    const ref = React.useRef(null);
+    utils.useClickAway(() => {
+        return onClickAway
+            ? () => {
+                onClickAway();
+            }
+            : undefined;
+    }, ref, [onClickAway]);
+    return (React.createElement("div", { ref: ref, contentEditable: false, className: clsx('qdr-inline-toolbar', className), style: style }, validIconsGroup.map((group, index) => (React.createElement(React.Fragment, { key: index },
+        React.createElement("div", { className: clsx('qdr-inline-toolbar__wrapper', {
+                'qdr-inline-toolbar__wrapper--enabledBgColor': group.enabledBgColor,
+            }) }, group.icons.map((child) => 'icon' in child ? (React.createElement(components.Icon, { key: child.icon.name, className: clsx('qdr-inline-toolbar__icon', child.className, {
+                'qdr-inline-toolbar__icon--active': child.active,
+                'qdr-inline-toolbar__icon--disabled': child.disabled,
+            }), icon: child.icon, width: 24, height: 24, onClick: (e) => {
+                if (!child.disabled) {
+                    e.preventDefault();
+                    child.onClick();
+                }
+            } })) : (child))),
+        index < validIconsGroup.length - 1 && React.createElement("div", { className: "qdr-inline-toolbar__divider" }))))));
+}
+
+const ToolbarContext = React.createContext({
+    fixed: false,
+});
+function useToolbar() {
+    return React.useContext(ToolbarContext);
+}
+
+const ToolbarMenuContext = React.createContext({
+    isInGroup: false,
+    menuExpanded: false,
+});
+function useToolbarMenu() {
+    return React.useContext(ToolbarMenuContext);
+}
+
+function ToolbarGroupIcon(props) {
+    const { className, children, withArrow = true } = props, rest = tslib.__rest(props, ["className", "children", "withArrow"]);
+    const wrapperRef = React.useRef(null);
+    const iconRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const { toolbarRef } = useToolbar();
+    const [placement, setPlacement] = React.useState('bottom');
+    const [menuExpanded, setMenuExpanded] = React.useState(false);
+    utils.useClickAway(() => {
+        if (!menuExpanded) {
+            return;
+        }
+        return () => {
+            setMenuExpanded(false);
+        };
+    }, wrapperRef, [menuExpanded, wrapperRef]);
+    React.useLayoutEffect(() => {
+        function handler() {
+            const icon = iconRef.current;
+            const menu = menuRef.current;
+            const toolbar = toolbarRef === null || toolbarRef === void 0 ? void 0 : toolbarRef.current;
+            if (icon && menu) {
+                const rect = icon.getBoundingClientRect();
+                const toolbarRect = toolbar === null || toolbar === void 0 ? void 0 : toolbar.getBoundingClientRect();
+                const menuWidth = menu.clientWidth;
+                const menuHeight = menu.clientHeight;
+                if (rect.left + menuWidth > window.innerWidth) {
+                    if (rect.left + (menuWidth + rect.width) / 2 > window.innerWidth) {
+                        menu.style.right = '0';
+                        menu.style.left = 'unset';
+                    }
+                    else {
+                        menu.style.right = 'unset';
+                        menu.style.left = `-${(menuWidth - rect.width) / 2}px`;
+                    }
+                }
+                else {
+                    menu.style.right = 'unset';
+                    menu.style.left = '0';
+                }
+                if (toolbarRect && toolbarRect.top + toolbarRect.height + menuHeight > window.innerHeight) {
+                    setPlacement('top');
+                }
+                else {
+                    setPlacement('bottom');
+                }
+            }
+        }
+        handler();
+        window.addEventListener('resize', handler);
+        window.addEventListener('scroll', handler);
+        return () => {
+            window.removeEventListener('resize', handler);
+            window.removeEventListener('scroll', handler);
+        };
+    }, [toolbarRef]);
+    const onClick = React.useCallback(() => {
+        setMenuExpanded(expanded => !expanded);
+    }, []);
+    return (React.createElement(ToolbarMenuContext.Provider, { value: {
+            isInGroup: true,
+            menuExpanded,
+        } },
+        React.createElement("div", { ref: wrapperRef, className: "qdr-toolbar__icon__wrapper" },
+            React.createElement("div", { ref: iconRef, className: clsx('qdr-toolbar__icon', { 'qdr-toolbar__icon--expanded': menuExpanded }, className), onClick: onClick },
+                React.createElement(components.Icon, Object.assign({}, rest)),
+                withArrow && (React.createElement(components.Icon, { icon: icons.ArrowDown, className: "qdr-toolbar__icon__arrow", width: 12, height: 12 }))),
+            React.createElement("div", { ref: menuRef, className: clsx('qdr-toolbar__icon__menu', { 'qdr-toolbar__icon__menu--expanded': menuExpanded }, { 'qdr-toolbar__icon__menu--top': placement === 'top' }, { 'qdr-toolbar__icon__menu--bottom': placement === 'bottom' }) }, children))));
+}
+
+const StartToolInputContext = React.createContext(() => { });
+
+function usePreviousValue(value) {
+    const ref = React.useRef(value);
+    React.useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+function useAutoGroupIcons(tools, renderExpandedStatus) {
+    const preRenderExpandedStatus = usePreviousValue(renderExpandedStatus);
+    const fakeToolbarId = React.useMemo(() => (renderExpandedStatus ? 'fake-expanded-tools-wrapper' : 'fake-tools-wrapper'), [renderExpandedStatus]);
+    const fakeTools = React.useMemo(() => (React.createElement("div", { id: fakeToolbarId, className: "qdr-toolbar", style: { position: 'absolute', top: 0, left: 0, visibility: 'hidden', pointerEvents: 'none' } }, tools)), [fakeToolbarId, tools]);
+    const [takeCount, setTakeCount] = React.useState(0);
+    const toolsElements = React.useMemo(() => {
+        var _a, _b;
+        return (_b = (_a = tools === null || tools === void 0 ? void 0 : tools.props.children) === null || _a === void 0 ? void 0 : _a.filter(c => !!c).map((c, index) => (Object.assign(Object.assign({}, c), { id: index })))) !== null && _b !== void 0 ? _b : [];
+    }, [tools]);
+    const calcGroupIcons = React.useCallback(() => {
+        const fakeToolsWrapper = document.getElementById(fakeToolbarId);
+        if (fakeToolsWrapper) {
+            const toolbarRect = fakeToolsWrapper.getBoundingClientRect();
+            if (toolbarRect.right - window.innerWidth > 0) {
+                const iconWrappers = fakeToolsWrapper.getElementsByClassName('qdr-toolbar__icon__wrapper');
+                const targetIndex = Array.from(iconWrappers).findIndex((wrapper) => {
+                    const rect = wrapper.getBoundingClientRect();
+                    return rect.right > window.innerWidth;
+                });
+                const groupIcons = Array.from(iconWrappers).slice(targetIndex - 1, iconWrappers.length);
+                setTakeCount(groupIcons.length);
+            }
+            else {
+                setTakeCount(0);
+            }
+        }
+    }, [fakeToolbarId]);
+    React.useLayoutEffect(() => {
+        calcGroupIcons();
+        window.addEventListener('resize', calcGroupIcons);
+        return () => {
+            window.removeEventListener('resize', calcGroupIcons);
+        };
+    }, [calcGroupIcons]);
+    React.useEffect(() => {
+        if (renderExpandedStatus !== preRenderExpandedStatus) {
+            calcGroupIcons();
+        }
+    }, [renderExpandedStatus, preRenderExpandedStatus, calcGroupIcons]);
+    const takeIndex = React.useMemo(() => toolsElements.findIndex(el => el.id === toolsElements.filter(e => e.type !== 'span').slice(-takeCount)[0].id), [toolsElements, takeCount]);
+    const shownElements = React.useMemo(() => toolsElements.slice(0, takeIndex), [toolsElements, takeIndex]);
+    const groupElements = React.useMemo(() => toolsElements.slice(takeIndex).filter(g => g.type !== 'span').map((g) => {
+        var _a, _b;
+        if (((_b = (_a = g.props) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            return g.props.children;
+        }
+        return g;
+    }).reduce((acc, val) => {
+        return acc.concat(val);
+    }, []), [toolsElements, takeIndex]);
+    return {
+        fakeTools,
+        takeCount,
+        shownElements,
+        groupElements,
+    };
+}
+
+function ToolbarInput({ exit, toolInput }) {
+    const { confirm, getPlaceholder } = toolInput;
+    const onExit = (event) => {
+        event.preventDefault();
+        exit();
+    };
+    let composing = false;
+    const onKeyDown = (event) => {
+        if (composing)
+            return;
+        const isEnter = event.key === 'Enter';
+        if (isEnter || event.key === 'Escape') {
+            onExit(event);
+            if (isEnter) {
+                confirm(event.target.value);
+            }
+        }
+    };
+    const locale = react.useLocale();
+    const placeholder = getPlaceholder(locale);
+    const onCompositionStart = () => {
+        composing = true;
+    };
+    const onCompositionEnd = () => {
+        composing = false;
+    };
+    return (React.createElement("div", { className: "qdr-toolbar__input__wrapper" },
+        React.createElement("input", { defaultValue: toolInput.defaultValue, autoFocus: true, onCompositionStart: onCompositionStart, onCompositionEnd: onCompositionEnd, className: "qdr-toolbar__input", placeholder: placeholder, onKeyDown: onKeyDown, onBlur: exit }),
+        React.createElement("svg", { className: "qdr-toolbar__input__cross", viewBox: "0 0 320 512", onMouseDown: onExit },
+            React.createElement("path", { 
+                // eslint-disable-next-line max-len
+                d: "M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z" }))));
+}
+
+function roundNumber(value, min, max) {
+    if (value < min) {
+        return min;
+    }
+    if (value > max) {
+        return max;
+    }
+    return value;
+}
+/**
+ * @todo
+ * Also round top.
+ */
+function setPosition(el, range) {
+    const rect = range.getBoundingClientRect();
+    const top = rect.top + window.pageYOffset - el.offsetHeight;
+    const left = roundNumber(rect.left + window.pageXOffset - (el.offsetWidth - rect.width) / 2, 0, window.innerWidth - el.offsetWidth);
+    el.style.top = `${top}px`;
+    el.style.left = `${left}px`;
+}
+function Toolbar(props) {
+    const { children, disabledElementTypes, onlyRenderExpanded = false, fixed = false } = props;
+    const { props: themeProps } = React.useContext(react.ThemeContext);
+    const editor = react.useQuadrats();
+    const toolbarRef = React.useRef(null);
+    const lastNativeRangeRef = React.useRef(undefined);
+    const focused = react.ReactEditor.isFocused(editor);
+    const { selection } = editor;
+    const [toolInput, setToolInput] = React.useState();
+    const startToolInput = React.useCallback((inputConfig) => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
+    let renderExpandedStatus;
+    if (toolInput) {
+        const { currentSelection } = toolInput;
+        if (currentSelection) {
+            if (core.Range.isExpanded(currentSelection)) {
+                renderExpandedStatus = true;
+            }
+            else {
+                renderExpandedStatus = false;
+            }
+        }
+    }
+    else if (focused) {
+        if (selection && core.Range.isCollapsed(selection)) {
+            renderExpandedStatus = false;
+        }
+        else if (core.getSelectionText(editor) !== '') {
+            renderExpandedStatus = true;
+        }
+    }
+    const shouldRender = typeof renderExpandedStatus === 'boolean';
+    React.useLayoutEffect(() => {
+        /**
+         * The native selection is not yet synchronized while effect invoked.
+         * Thus invoke handler on next frame to avoid from this issue.
+         */
+        window.requestAnimationFrame(() => {
+            /**
+             * Editor will be blurred after getting into input process.
+             * Thus cache the last range of selection to recalculate position of toolbar.
+             */
+            if (!toolInput) {
+                const nativeSelection = window.getSelection();
+                if (nativeSelection && nativeSelection.rangeCount > 0) {
+                    lastNativeRangeRef.current = nativeSelection.getRangeAt(0);
+                }
+            }
+            const el = toolbarRef.current;
+            const range = lastNativeRangeRef.current;
+            if (shouldRender && el && range && !fixed) {
+                setPosition(el, range);
+            }
+        });
+    });
+    const getPortalContainer = React.useCallback(() => {
+        var _a;
+        if ((_a = props.containerRef) === null || _a === void 0 ? void 0 : _a.current) {
+            return props.containerRef.current;
+        }
+        return document.body;
+    }, [props.containerRef]);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const tools = children(renderExpandedStatus && !fixed);
+    const { fakeTools, takeCount, shownElements, groupElements } = useAutoGroupIcons(tools, renderExpandedStatus && !fixed);
+    const toolbarBody = (React.createElement(React.Fragment, null,
+        React.createElement(StartToolInputContext.Provider, { value: startToolInput }, takeCount > 0 ? (React.createElement(React.Fragment, null,
+            shownElements,
+            React.createElement(ToolbarGroupIcon, { icon: icons.More, withArrow: false }, groupElements))) : (tools)),
+        toolInput && (React.createElement(ToolbarInput, { exit: () => {
+                const { currentSelection } = toolInput;
+                if (currentSelection) {
+                    core.Transforms.select(editor, currentSelection);
+                }
+                react.ReactEditor.focus(editor);
+                setToolInput(undefined);
+            }, toolInput: toolInput }))));
+    if (fixed) {
+        return (React.createElement(ToolbarContext.Provider, { value: {
+                fixed: true,
+                toolbarRef: toolbarRef,
+            } },
+            React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--fixed', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
+                React.createElement("div", { className: "qdr-toolbar" }, toolbarBody),
+                fakeTools)));
+    }
+    if (!shouldRender || (disabledElementTypes && core.isNodesTypeIn(editor, disabledElementTypes, { mode: 'all' }))) {
+        return null;
+    }
+    if (onlyRenderExpanded && !renderExpandedStatus) {
+        return null;
+    }
+    if (!tools) {
+        return null;
+    }
+    return (React.createElement(components.Portal, { getContainer: getPortalContainer },
+        React.createElement(ToolbarContext.Provider, { value: {
+                fixed: false,
+                toolbarRef: toolbarRef,
+            } },
+            React.createElement("div", { ref: toolbarRef, className: clsx('qdr-toolbar__wrapper', 'qdr-toolbar__wrapper--float', { 'qdr-toolbar__wrapper--inputting': toolInput }, themeProps.className), style: themeProps.style },
+                React.createElement("div", { className: "qdr-toolbar qdr-toolbar--radius qdr-toolbar--shadow" }, toolbarBody),
+                fakeTools))));
+}
+
+function getIconNameInGroup(iconOriginName, locale) {
+    switch (iconOriginName) {
+        case 'accordion':
+            return locale.editor.toolbar.accordion;
+        case 'align-center':
+            return locale.editor.toolbar.alignCenter;
+        case 'align-left':
+            return locale.editor.toolbar.alignLeft;
+        case 'align-right':
+            return locale.editor.toolbar.alignRight;
+        case 'blockquote':
+            return locale.editor.toolbar.quote;
+        case 'bold':
+            return locale.editor.toolbar.bold;
+        case 'card':
+            return locale.editor.toolbar.card;
+        case 'carousel':
+            return locale.editor.toolbar.carousel;
+        case 'dance':
+            return locale.editor.toolbar.dance;
+        case 'divider':
+            return locale.editor.toolbar.divider;
+        case 'drama':
+            return locale.editor.toolbar.drama;
+        case 'erase':
+            return locale.editor.toolbar.erase;
+        case 'facebook':
+            return locale.editor.toolbar.facebook;
+        case 'fn':
+            return locale.editor.toolbar.footnote;
+        case 'heading1':
+            return locale.editor.toolbar.heading1;
+        case 'heading2':
+            return locale.editor.toolbar.heading2;
+        case 'heading3':
+            return locale.editor.toolbar.heading3;
+        case 'heading4':
+            return locale.editor.toolbar.heading4;
+        case 'heading5':
+            return locale.editor.toolbar.heading5;
+        case 'heading6':
+            return locale.editor.toolbar.heading6;
+        case 'highlight':
+            return locale.editor.toolbar.highlight;
+        case 'image':
+            return locale.editor.toolbar.image;
+        case 'instagram':
+            return locale.editor.toolbar.instagram;
+        case 'italic':
+            return locale.editor.toolbar.italic;
+        case 'link':
+            return locale.editor.toolbar.link;
+        case 'ordered list':
+            return locale.editor.toolbar.orderedList;
+        case 'paragraph':
+            return locale.editor.toolbar.paragraph;
+        case 'podcast-apple':
+            return locale.editor.toolbar.podcastApple;
+        case 'read-more':
+            return locale.editor.toolbar.readMore;
+        case 'sheet-music':
+            return locale.editor.toolbar.sheetMusic;
+        case 'spotify':
+            return locale.editor.toolbar.spotify;
+        case 'strikethrough':
+            return locale.editor.toolbar.strikethrough;
+        case 'twitter':
+            return locale.editor.toolbar.twitter;
+        case 'underline':
+            return locale.editor.toolbar.underline;
+        case 'unlink':
+            return locale.editor.toolbar.unlink;
+        case 'unordered list':
+            return locale.editor.toolbar.unorderedList;
+        case 'video':
+            return locale.editor.toolbar.video;
+        case 'vimeo':
+            return locale.editor.toolbar.vimeo;
+        case 'youtube':
+            return locale.editor.toolbar.youtube;
+        default:
+            return '';
+    }
+}
+
+function ToolbarIcon(props) {
+    const { active, className, icon, onClick: onClickProps, onMouseDown: onMouseDownProps } = props, rest = tslib.__rest(props, ["active", "className", "icon", "onClick", "onMouseDown"]);
+    const locale = react.useLocale();
+    const { isInGroup } = useToolbarMenu();
+    const onClick = React.useCallback((event) => {
+        onClickProps === null || onClickProps === void 0 ? void 0 : onClickProps(event);
+    }, [onClickProps]);
+    const onMouseDown = React.useCallback((event) => {
+        event.preventDefault();
+        onMouseDownProps === null || onMouseDownProps === void 0 ? void 0 : onMouseDownProps(event);
+    }, [onMouseDownProps]);
+    if (isInGroup) {
+        return (React.createElement("div", { className: clsx('qdr-toolbar__icon', 'qdr-toolbar__icon--with-name', { 'qdr-toolbar__icon--with-name--active': active }, className), onClick: onClick, onMouseDown: onMouseDown },
+            React.createElement(components.Icon, Object.assign({}, rest, { icon: icon, width: 20, height: 20 })),
+            React.createElement("p", { className: "qdr-toolbar__icon__name" }, getIconNameInGroup(icon.name, locale)),
+            active && (React.createElement(components.Icon, { className: "qdr-toolbar__icon__check", icon: icons.Check, width: 20, height: 20 }))));
+    }
+    return (React.createElement("div", { className: "qdr-toolbar__icon__wrapper" },
+        React.createElement("div", { className: clsx('qdr-toolbar__icon', { 'qdr-toolbar__icon--active': active }, className), onClick: onClick, onMouseDown: onMouseDown },
+            React.createElement(components.Icon, Object.assign({}, rest, { icon: icon })))));
+}
+
+function useStartToolInput() {
+    return React.useContext(StartToolInputContext);
+}
+
+exports.InlineToolbar = InlineToolbar;
+exports.TOOLBAR_DIVIDER = TOOLBAR_DIVIDER;
+exports.Toolbar = Toolbar;
+exports.ToolbarGroupIcon = ToolbarGroupIcon;
+exports.ToolbarIcon = ToolbarIcon;
+exports.useStartToolInput = useStartToolInput;

package/toolbar/index.d.ts

@@ -0,0 +1,7 @@
+export { TOOLBAR_DIVIDER } from './constants';
+export * from './typings';
+export { InlineToolbarProps, default as InlineToolbar } from './components/InlineToolbar';
+export { ToolbarProps, default as Toolbar } from './components/Toolbar';
+export { ToolbarIconProps, default as ToolbarIcon } from './components/ToolbarIcon';
+export { ToolbarGroupIconProps, default as ToolbarGroupIcon } from './components/ToolbarGroupIcon';
+export { useStartToolInput } from './hooks/useStartToolInput';

package/toolbar/index.js

@@ -0,0 +1,6 @@
+export { TOOLBAR_DIVIDER } from './constants.js';
+export { default as InlineToolbar } from './components/InlineToolbar.js';
+export { default as Toolbar } from './components/Toolbar.js';
+export { default as ToolbarIcon } from './components/ToolbarIcon.js';
+export { default as ToolbarGroupIcon } from './components/ToolbarGroupIcon.js';
+export { useStartToolInput } from './hooks/useStartToolInput.js';

package/toolbar/package.json

@@ -4,13 +4,7 @@
     "**/*.css",
     "**/*.scss"
   ],
-  "quadratsConfig": {
-    "deps": [
-      "__ROOT__",
-      "components"
-    ],
-    "styles": {
-      "components/toolbar": "toolbar"
-    }
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/toolbar/toolbar.css

@@ -0,0 +1 @@
+.qdr-toolbar{display:flex;align-items:center;gap:var(--qdr-spacing-4);height:var(--qdr-spacing-14);padding:var(--qdr-spacing-4) var(--qdr-spacing-4);background-color:var(--qdr-surface);border:1px solid var(--qdr-border);box-sizing:border-box}.qdr-toolbar--radius{border-radius:var(--qdr-radius-3)}.qdr-toolbar--shadow{box-shadow:var(--qdr-shadow-s)}.qdr-toolbar__input{font-size:.8125rem;background:var(--qdr-block);color:var(--qdr-text-secondary);width:calc(100% - var(--qdr-spacing-7));height:100%;border:none;padding:0;outline:none}.qdr-toolbar__input__wrapper{display:flex;align-items:center;position:absolute;top:var(--qdr-spacing-4);left:var(--qdr-spacing-4);width:calc(100% - var(--qdr-spacing-4)*2);height:calc(100% - (var(--qdr-spacing-4)*2 + var(--qdr-spacing-4)));background:var(--qdr-block);box-sizing:border-box}.qdr-toolbar__input__cross{fill:var(--qdr-text-secondary);font-size:var(--qdr-spacing-7);width:var(--qdr-spacing-7);height:var(--qdr-spacing-7);cursor:pointer}.qdr-toolbar__wrapper{box-sizing:content-box;height:var(--qdr-spacing-14)}.qdr-toolbar__wrapper--fixed{position:sticky;top:0;z-index:1}.qdr-toolbar__wrapper--fixed .qdr-toolbar__input__wrapper{height:calc(100% - var(--qdr-spacing-4)*2)}.qdr-toolbar__wrapper--float{position:absolute;z-index:1;padding-bottom:var(--qdr-spacing-4)}.qdr-toolbar__wrapper--float .qdr-toolbar{background-color:var(--qdr-block)}.qdr-toolbar__wrapper--inputting{min-width:250px}.qdr-toolbar__arrow{position:absolute;top:calc(100% - var(--qdr-spacing-4));left:50%;content:"";width:var(--qdr-spacing-4);height:var(--qdr-spacing-4);background:var(--qdr-surface);border:1px solid var(--qdr-border);border-top:none;border-left:none;transform:translateX(-50%) translateY(-50%) rotate(45deg)}.qdr-toolbar__divider{width:1px;height:var(--qdr-spacing-8);background-color:var(--qdr-divider)}.qdr-toolbar__icon{position:relative;color:var(--qdr-action-inactive);font-size:24px;display:inline-flex;justify-content:center;align-items:center;gap:var(--qdr-spacing-1);border:0;background-color:rgba(0,0,0,0);padding:var(--qdr-spacing-2);outline:none;box-shadow:none;border-radius:var(--qdr-radius-1);transition:color var(--qdr-duration-short) var(--qdr-easing-standard),background var(--qdr-duration-short) var(--qdr-easing-standard);cursor:pointer}.qdr-toolbar__icon:hover,.qdr-toolbar__icon--expanded{color:var(--qdr-action-active);background:var(--qdr-secondary-hover-bg)}.qdr-toolbar__icon--active{color:var(--qdr-primary)}.qdr-toolbar__icon--with-name{display:flex;align-items:center;justify-content:flex-start;border-radius:0;gap:var(--qdr-spacing-4);padding:0 var(--qdr-spacing-6)}.qdr-toolbar__icon--with-name:hover{color:var(--qdr-action-inactive);background:var(--qdr-primary-hover-bg)}.qdr-toolbar__icon--with-name--active{color:var(--qdr-action-inactive);background:var(--qdr-primary-active-bg)}.qdr-toolbar__icon__wrapper{display:flex;align-items:center;justify-content:center;position:relative}.qdr-toolbar__icon__arrow{color:var(--qdr-action-disabled)}.qdr-toolbar__icon__name{flex:1;margin:0;font-size:var(--qdr-typography-basic-input1-font-size);line-height:var(--qdr-typography-basic-input1-line-height);letter-spacing:var(--qdr-typography-basic-input1-letter-spacing);font-weight:var(--qdr-typography-basic-input1-font-weight);color:var(--qdr-text-primary)}.qdr-toolbar__icon__check{color:var(--qdr-primary)}.qdr-toolbar__icon__menu{opacity:0;position:absolute;background:var(--qdr-surface);border:1px solid var(--qdr-border);padding:var(--qdr-spacing-2) 0;width:200px;max-height:240px;box-shadow:var(--qdr-shadow-xl);pointer-events:none;overflow-y:auto;transition:opacity var(--qdr-duration-short) var(--qdr-easing-standard)}.qdr-toolbar__icon__menu--expanded{pointer-events:auto;opacity:1}.qdr-toolbar__icon__menu--top{bottom:var(--qdr-spacing-14)}.qdr-toolbar__icon__menu--bottom{top:var(--qdr-spacing-14)}.qdr-inline-toolbar{position:absolute;top:var(--qdr-spacing-4);right:var(--qdr-spacing-4);display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-3);background-color:var(--qdr-bg);padding:var(--qdr-spacing-3);border:1px solid var(--qdr-border);border-radius:var(--qdr-radius-3);pointer-events:none;opacity:0;transition:opacity var(--qdr-duration-short) var(--qdr-easing-standard);z-index:1}.qdr-inline-toolbar__wrapper{display:flex;align-items:center;justify-content:flex-start;gap:var(--qdr-spacing-1);padding:var(--qdr-spacing-1);border-radius:var(--qdr-radius-1)}.qdr-inline-toolbar__wrapper--enabledBgColor{background-color:var(--qdr-divider)}.qdr-inline-toolbar__divider{width:1px;height:16px;background-color:var(--qdr-divider)}.qdr-inline-toolbar__icon{color:var(--qdr-action-inactive);border-radius:var(--qdr-radius-1);transition:color var(--qdr-duration-short) var(--qdr-easing-standard),background-color var(--qdr-duration-short) var(--qdr-easing-standard);cursor:pointer}.qdr-inline-toolbar__icon:hover{color:var(--qdr-primary-light)}.qdr-inline-toolbar__icon--active{color:var(--qdr-primary-light);background-color:var(--qdr-block)}.qdr-inline-toolbar__icon--disabled:hover{color:var(--qdr-action-inactive);cursor:not-allowed}

package/toolbar/typings.d.ts

@@ -0,0 +1,6 @@
+import { Range } from '@quadrats/core';
+import { InputWidgetConfig } from '@quadrats/common/input-widget';
+export interface ToolInputConfig extends InputWidgetConfig {
+    currentSelection: Range | null;
+}
+export type StartToolInput = (config: InputWidgetConfig) => void;

package/underline/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Default hotkey for toggling underline.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+export declare const UNDERLINE_HOTKEY = "mod+u";

package/underline/constants.js

@@ -0,0 +1,8 @@
+/**
+ * Default hotkey for toggling underline.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const UNDERLINE_HOTKEY = 'mod+u';
+
+export { UNDERLINE_HOTKEY };

package/underline/createReactUnderline.d.ts

@@ -0,0 +1 @@
+export declare const createReactUnderline: (variant?: string) => import("@quadrats/react/toggle-mark").ReactToggleMark;

package/underline/createReactUnderline.js

@@ -0,0 +1,11 @@
+import { createUnderline } from '@quadrats/common/underline';
+import { createReactToggleMarkCreator } from '@quadrats/react/toggle-mark';
+import { defaultRenderUnderline } from './defaultRenderUnderline.js';
+import { UNDERLINE_HOTKEY } from './constants.js';
+
+const createReactUnderline = (variant) => createReactToggleMarkCreator(createUnderline(variant), {
+    hotkey: UNDERLINE_HOTKEY,
+    render: defaultRenderUnderline,
+})();
+
+export { createReactUnderline };

package/underline/defaultRenderUnderline.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RenderMarkPropsBase } from '@quadrats/react/_internal';
+export declare const defaultRenderUnderline: ({ children, leaf }: RenderMarkPropsBase<boolean>) => React.JSX.Element;

package/underline/defaultRenderUnderline.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import { UNDERLINE_TYPE } from '@quadrats/common/underline';
+
+const defaultRenderUnderline = ({ children, leaf }) => (React.createElement("u", { className: leaf.underlineVariant
+        ? `${UNDERLINE_TYPE}.${leaf.underlineVariant}` : `${UNDERLINE_TYPE}` }, children));
+
+export { defaultRenderUnderline };

package/underline/index.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var underline = require('@quadrats/common/underline');
+var toggleMark = require('@quadrats/react/toggle-mark');
+
+/**
+ * Default hotkey for toggling underline.
+ *
+ * @see [is-hotkey]{@link https://www.npmjs.com/package/is-hotkey}
+ */
+const UNDERLINE_HOTKEY = 'mod+u';
+
+const defaultRenderUnderline = ({ children, leaf }) => (React.createElement("u", { className: leaf.underlineVariant
+        ? `${underline.UNDERLINE_TYPE}.${leaf.underlineVariant}` : `${underline.UNDERLINE_TYPE}` }, children));
+
+const createReactUnderline = (variant) => toggleMark.createReactToggleMarkCreator(underline.createUnderline(variant), {
+    hotkey: UNDERLINE_HOTKEY,
+    render: defaultRenderUnderline,
+})();
+
+exports.UNDERLINE_HOTKEY = UNDERLINE_HOTKEY;
+exports.createReactUnderline = createReactUnderline;
+exports.defaultRenderUnderline = defaultRenderUnderline;

package/underline/index.js

@@ -0,0 +1,3 @@
+export { UNDERLINE_HOTKEY } from './constants.js';
+export { defaultRenderUnderline } from './defaultRenderUnderline.js';
+export { createReactUnderline } from './createReactUnderline.js';

package/underline/jsx-serializer/createJsxSerializeUnderline.d.ts

@@ -0,0 +1 @@
+export declare const createJsxSerializeUnderline: (options?: import("@quadrats/react/toggle-mark/jsx-serializer").CreateJsxSerializeToggleMarkOptions) => (props: Omit<import("@quadrats/react/jsx-serializer").JsxSerializeMarkProps<boolean>, "mark">) => import("react").JSX.Element;

package/underline/jsx-serializer/createJsxSerializeUnderline.js

@@ -0,0 +1,10 @@
+import { UNDERLINE_TYPE } from '@quadrats/common/underline';
+import { createJsxSerializeToggleMarkCreator } from '@quadrats/react/toggle-mark/jsx-serializer';
+import { defaultRenderUnderline } from '@quadrats/react/underline';
+
+const createJsxSerializeUnderline = createJsxSerializeToggleMarkCreator({
+    type: UNDERLINE_TYPE,
+    render: defaultRenderUnderline,
+});
+
+export { createJsxSerializeUnderline };

package/underline/jsx-serializer/index.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var underline = require('@quadrats/react/underline');
+var underline$1 = require('@quadrats/common/underline');
+var jsxSerializer = require('@quadrats/react/toggle-mark/jsx-serializer');
+
+const createJsxSerializeUnderline = jsxSerializer.createJsxSerializeToggleMarkCreator({
+    type: underline$1.UNDERLINE_TYPE,
+    render: underline.defaultRenderUnderline,
+});
+
+exports.defaultRenderUnderline = underline.defaultRenderUnderline;
+exports.createJsxSerializeUnderline = createJsxSerializeUnderline;

package/underline/jsx-serializer/index.js

@@ -0,0 +1,2 @@
+export { defaultRenderUnderline } from '@quadrats/react/underline';
+export { createJsxSerializeUnderline } from './createJsxSerializeUnderline.js';

package/underline/jsx-serializer/package.json

@@ -1,10 +1,7 @@
 {
   "name": "@quadrats/react/underline/jsx-serializer",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "toggle-mark/jsx-serializer",
-      "underline"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }

package/underline/package.json

@@ -1,9 +1,7 @@
 {
   "name": "@quadrats/react/underline",
   "sideEffects": false,
-  "quadratsConfig": {
-    "deps": [
-      "toggle-mark"
-    ]
-  }
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "typings": "./index.d.ts"
 }