@quadrats/react 1.0.0 → 1.1.1

package/toolbar/components/InlineToolbar.d.ts

@@ -2,17 +2,18 @@ import React from 'react';
 import { IconDefinition } from '@quadrats/icons';
 export interface InlineToolbarProps {
     className?: string;
-    leftIcons: {
-        icon: IconDefinition;
-        onClick: VoidFunction;
-        active: boolean;
-        disabled?: boolean;
-    }[];
-    rightIcons: {
-        icon: IconDefinition;
-        onClick: VoidFunction;
-        disabled?: boolean;
+    iconGroups: {
+        enabledBgColor?: boolean;
+        icons: ({
+            icon: IconDefinition;
+            onClick: VoidFunction;
+            active?: boolean;
+            disabled?: boolean;
+            className?: string;
+        } | React.JSX.Element)[];
     }[];
+    style?: React.CSSProperties;
+    onClickAway?: VoidFunction;
 }
-declare function InlineToolbar({ className, leftIcons, rightIcons }: InlineToolbarProps): React.JSX.Element;
+declare function InlineToolbar({ className, iconGroups, style, onClickAway }: InlineToolbarProps): React.JSX.Element;
 export default InlineToolbar;

package/toolbar/components/InlineToolbar.js

@@ -1,27 +1,31 @@
-import React from 'react';
+import React, { useRef, Fragment } from 'react';
 import clsx from 'clsx';
 import { Icon } from '@quadrats/react/components';
+import { useClickAway } from '@quadrats/react/utils';
 
-function InlineToolbar({ className, leftIcons, rightIcons }) {
-    return (React.createElement("div", { contentEditable: false, className: clsx('qdr-inline-toolbar', className) },
-        leftIcons.length > 0 && (React.createElement("div", { className: "qdr-inline-toolbar__wrapper" }, leftIcons.map((icon) => (React.createElement(Icon, { key: icon.icon.name, className: clsx('qdr-inline-toolbar__icon', {
-                'qdr-inline-toolbar__icon--active': icon.active,
-                'qdr-inline-toolbar__icon--disabled': icon.disabled,
-            }), icon: icon.icon, width: 24, height: 24, onClick: (e) => {
-                if (!icon.disabled) {
+function InlineToolbar({ className, iconGroups, style, onClickAway }) {
+    const validIconsGroup = iconGroups.filter((group) => group.icons.length);
+    const ref = useRef(null);
+    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(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(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();
-                    icon.onClick();
+                    child.onClick();
                 }
-            } }))))),
-        leftIcons.length > 0 && rightIcons.length > 0 && React.createElement("div", { className: "qdr-inline-toolbar__divider" }),
-        rightIcons.map((icon) => (React.createElement(Icon, { key: icon.icon.name, className: clsx('qdr-inline-toolbar__icon', {
-                'qdr-inline-toolbar__icon--disabled': icon.disabled,
-            }), icon: icon.icon, width: 24, height: 24, onClick: (e) => {
-                if (!icon.disabled) {
-                    e.preventDefault();
-                    icon.onClick();
-                }
-            } })))));
+            } })) : (child))),
+        index < validIconsGroup.length - 1 && React.createElement("div", { className: "qdr-inline-toolbar__divider" }))))));
 }
 
 export { InlineToolbar as default };

package/toolbar/components/Toolbar.js

@@ -39,7 +39,7 @@ function Toolbar(props) {
     const focused = ReactEditor.isFocused(editor);
     const { selection } = editor;
     const [toolInput, setToolInput] = useState();
-    const startToolInput = useCallback(inputConfig => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
+    const startToolInput = useCallback((inputConfig) => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
     let renderExpandedStatus;
     if (toolInput) {
         const { currentSelection } = toolInput;
@@ -97,7 +97,7 @@ function Toolbar(props) {
     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: More, withArrow: false }, groupElements))) : tools),
+            React.createElement(ToolbarGroupIcon, { icon: More, withArrow: false }, groupElements))) : (tools)),
         toolInput && (React.createElement(ToolbarInput, { exit: () => {
                 const { currentSelection } = toolInput;
                 if (currentSelection) {

package/toolbar/index.cjs.js

@@ -3,37 +3,40 @@
 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');
-var utils = require('@quadrats/react/utils');
 
 /**
  * A react element constant of toolbar divider.
  */
 const TOOLBAR_DIVIDER = React.createElement("span", { className: "qdr-toolbar__divider" });
 
-function InlineToolbar({ className, leftIcons, rightIcons }) {
-    return (React.createElement("div", { contentEditable: false, className: clsx('qdr-inline-toolbar', className) },
-        leftIcons.length > 0 && (React.createElement("div", { className: "qdr-inline-toolbar__wrapper" }, leftIcons.map((icon) => (React.createElement(components.Icon, { key: icon.icon.name, className: clsx('qdr-inline-toolbar__icon', {
-                'qdr-inline-toolbar__icon--active': icon.active,
-                'qdr-inline-toolbar__icon--disabled': icon.disabled,
-            }), icon: icon.icon, width: 24, height: 24, onClick: (e) => {
-                if (!icon.disabled) {
-                    e.preventDefault();
-                    icon.onClick();
-                }
-            } }))))),
-        leftIcons.length > 0 && rightIcons.length > 0 && React.createElement("div", { className: "qdr-inline-toolbar__divider" }),
-        rightIcons.map((icon) => (React.createElement(components.Icon, { key: icon.icon.name, className: clsx('qdr-inline-toolbar__icon', {
-                'qdr-inline-toolbar__icon--disabled': icon.disabled,
-            }), icon: icon.icon, width: 24, height: 24, onClick: (e) => {
-                if (!icon.disabled) {
+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();
-                    icon.onClick();
+                    child.onClick();
                 }
-            } })))));
+            } })) : (child))),
+        index < validIconsGroup.length - 1 && React.createElement("div", { className: "qdr-inline-toolbar__divider" }))))));
 }
 
 const ToolbarContext = React.createContext({
@@ -251,7 +254,7 @@ function Toolbar(props) {
     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]);
+    const startToolInput = React.useCallback((inputConfig) => setToolInput(Object.assign(Object.assign({}, inputConfig), { currentSelection: selection })), [selection]);
     let renderExpandedStatus;
     if (toolInput) {
         const { currentSelection } = toolInput;
@@ -309,7 +312,7 @@ function Toolbar(props) {
     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),
+            React.createElement(ToolbarGroupIcon, { icon: icons.More, withArrow: false }, groupElements))) : (tools)),
         toolInput && (React.createElement(ToolbarInput, { exit: () => {
                 const { currentSelection } = toolInput;
                 if (currentSelection) {

package/toolbar/toolbar.css

@@ -1 +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);background-color:var(--qdr-divider);border-radius:var(--qdr-radius-1)}.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}
+.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/toolbar.scss

@@ -232,8 +232,11 @@ $qdr-toolbar-input-cross-size: --qdr-spacing-7;
     justify-content: flex-start;
     gap: var(--qdr-spacing-1);
     padding: var(--qdr-spacing-1);
-    background-color: var(--qdr-divider);
     border-radius: var(--qdr-radius-1);
+
+    &--enabledBgColor {
+      background-color: var(--qdr-divider);
+    }
   }
 
   &__divider {

package/utils/index.cjs.js

@@ -48,7 +48,13 @@ function removePreviousElement({ event, editor, type, confirmModal, doConfirm, }
                 //   at: currentPath,
                 //   match: (n) => Element.isElement(n) && (n as QuadratsElement).type === type,
                 // });
-                const prevPath = core.Path.previous(currentPath);
+                let prevPath = currentPath;
+                try {
+                    prevPath = core.Path.previous(currentPath);
+                }
+                catch (ex) {
+                    // error
+                }
                 const prevNode = core.Node.get(editor, prevPath);
                 if (core.Element.isElement(prevNode) && prevNode.type === type) {
                     event.preventDefault();

package/utils/removePreviousElement.js

@@ -13,7 +13,13 @@ function removePreviousElement({ event, editor, type, confirmModal, doConfirm, }
                 //   at: currentPath,
                 //   match: (n) => Element.isElement(n) && (n as QuadratsElement).type === type,
                 // });
-                const prevPath = Path.previous(currentPath);
+                let prevPath = currentPath;
+                try {
+                    prevPath = Path.previous(currentPath);
+                }
+                catch (ex) {
+                    // error
+                }
                 const prevNode = Node.get(editor, prevPath);
                 if (Element.isElement(prevNode) && prevNode.type === type) {
                     event.preventDefault();