@quadrats/react 1.0.0 → 1.1.0

package/card/components/Card.js

@@ -3,93 +3,101 @@ import clsx from 'clsx';
 import { Transforms } from '@quadrats/core';
 import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
 import { InlineToolbar } from '@quadrats/react/toolbar';
-import { Edit, Trash, BlockLeft, BlockRight } from '@quadrats/icons';
+import { BlockLeft, BlockRight, Edit, Trash } from '@quadrats/icons';
 
 function Card({ attributes, children, element, controller, }) {
     const { setCardModalConfig, setConfirmModalConfig } = useModal();
     const editor = useSlateStatic();
     const path = ReactEditor.findPath(editor, element);
     return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: clsx('qdr-card', `qdr-card--${element.alignment}`) }),
-        React.createElement(InlineToolbar, { className: "qdr-card__inline-toolbar", leftIcons: element.alignment === 'noImage'
-                ? []
-                : [
-                    {
-                        icon: BlockLeft,
-                        onClick: () => {
-                            controller.updateCardAlignment({
-                                editor,
-                                alignment: 'leftImageRightText',
-                                path,
-                            });
-                        },
-                        active: element.alignment === 'leftImageRightText',
-                    },
-                    {
-                        icon: BlockRight,
-                        onClick: () => {
-                            controller.updateCardAlignment({
-                                editor,
-                                alignment: 'rightImageLeftText',
-                                path,
-                            });
-                        },
-                        active: element.alignment === 'rightImageLeftText',
-                    },
-                ], rightIcons: [
-                {
-                    icon: Edit,
-                    onClick: () => {
-                        setCardModalConfig({
-                            controller,
-                            initialValue: {
-                                values: {
-                                    alignment: element.alignment,
-                                    title: element.title,
-                                    description: element.description,
-                                    remark: element.remark,
-                                    linkText: element.linkText,
-                                    linkUrl: element.linkUrl,
+        React.createElement(InlineToolbar, { className: "qdr-card__inline-toolbar", iconGroups: [
+                element.alignment === 'noImage'
+                    ? { icons: [] }
+                    : {
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: BlockLeft,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'leftImageRightText',
+                                        path,
+                                    });
                                 },
-                                imageItem: element.imageItem,
-                                haveLink: element.haveLink,
+                                active: element.alignment === 'leftImageRightText',
                             },
-                            onConfirm: ({ values, imageItem, haveLink }) => {
-                                controller.updateCardElement({
-                                    editor,
-                                    cardValues: {
-                                        alignment: values.alignment,
-                                        imageItem,
-                                        title: values.title,
-                                        description: values.description,
-                                        remark: values.remark,
-                                        haveLink,
-                                        linkText: values.linkText,
-                                        linkUrl: values.linkUrl,
-                                    },
-                                    path,
-                                });
+                            {
+                                icon: BlockRight,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'rightImageLeftText',
+                                        path,
+                                    });
+                                },
+                                active: element.alignment === 'rightImageLeftText',
                             },
-                        });
+                        ],
                     },
-                },
                 {
-                    icon: Trash,
-                    onClick: () => {
-                        if (controller.confirmModal) {
-                            // TODO: i18n
-                            setConfirmModalConfig({
-                                title: '刪除卡片',
-                                content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
-                                confirmText: '刪除卡片',
-                                onConfirm: () => {
+                    icons: [
+                        {
+                            icon: Edit,
+                            onClick: () => {
+                                setCardModalConfig({
+                                    controller,
+                                    initialValue: {
+                                        values: {
+                                            alignment: element.alignment,
+                                            title: element.title,
+                                            description: element.description,
+                                            remark: element.remark,
+                                            linkText: element.linkText,
+                                            linkUrl: element.linkUrl,
+                                        },
+                                        imageItem: element.imageItem,
+                                        haveLink: element.haveLink,
+                                    },
+                                    onConfirm: ({ values, imageItem, haveLink }) => {
+                                        controller.updateCardElement({
+                                            editor,
+                                            cardValues: {
+                                                alignment: values.alignment,
+                                                imageItem,
+                                                title: values.title,
+                                                description: values.description,
+                                                remark: values.remark,
+                                                haveLink,
+                                                linkText: values.linkText,
+                                                linkUrl: values.linkUrl,
+                                            },
+                                            path,
+                                        });
+                                    },
+                                });
+                            },
+                        },
+                        {
+                            icon: Trash,
+                            onClick: () => {
+                                if (controller.confirmModal) {
+                                    // TODO: i18n
+                                    setConfirmModalConfig({
+                                        title: '刪除卡片',
+                                        content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
+                                        confirmText: '刪除卡片',
+                                        onConfirm: () => {
+                                            Transforms.removeNodes(editor, { at: path });
+                                        },
+                                    });
+                                }
+                                else {
                                     Transforms.removeNodes(editor, { at: path });
-                                },
-                            });
-                        }
-                        else {
-                            Transforms.removeNodes(editor, { at: path });
-                        }
-                    },
+                                }
+                            },
+                        },
+                    ],
                 },
             ] }),
         children));

package/card/index.cjs.js

@@ -15,86 +15,94 @@ function Card({ attributes, children, element, controller, }) {
     const editor = react.useSlateStatic();
     const path = react.ReactEditor.findPath(editor, element);
     return (React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: clsx('qdr-card', `qdr-card--${element.alignment}`) }),
-        React.createElement(toolbar.InlineToolbar, { className: "qdr-card__inline-toolbar", leftIcons: element.alignment === 'noImage'
-                ? []
-                : [
-                    {
-                        icon: icons.BlockLeft,
-                        onClick: () => {
-                            controller.updateCardAlignment({
-                                editor,
-                                alignment: 'leftImageRightText',
-                                path,
-                            });
-                        },
-                        active: element.alignment === 'leftImageRightText',
-                    },
-                    {
-                        icon: icons.BlockRight,
-                        onClick: () => {
-                            controller.updateCardAlignment({
-                                editor,
-                                alignment: 'rightImageLeftText',
-                                path,
-                            });
-                        },
-                        active: element.alignment === 'rightImageLeftText',
-                    },
-                ], rightIcons: [
-                {
-                    icon: icons.Edit,
-                    onClick: () => {
-                        setCardModalConfig({
-                            controller,
-                            initialValue: {
-                                values: {
-                                    alignment: element.alignment,
-                                    title: element.title,
-                                    description: element.description,
-                                    remark: element.remark,
-                                    linkText: element.linkText,
-                                    linkUrl: element.linkUrl,
+        React.createElement(toolbar.InlineToolbar, { className: "qdr-card__inline-toolbar", iconGroups: [
+                element.alignment === 'noImage'
+                    ? { icons: [] }
+                    : {
+                        enabledBgColor: true,
+                        icons: [
+                            {
+                                icon: icons.BlockLeft,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'leftImageRightText',
+                                        path,
+                                    });
                                 },
-                                imageItem: element.imageItem,
-                                haveLink: element.haveLink,
+                                active: element.alignment === 'leftImageRightText',
                             },
-                            onConfirm: ({ values, imageItem, haveLink }) => {
-                                controller.updateCardElement({
-                                    editor,
-                                    cardValues: {
-                                        alignment: values.alignment,
-                                        imageItem,
-                                        title: values.title,
-                                        description: values.description,
-                                        remark: values.remark,
-                                        haveLink,
-                                        linkText: values.linkText,
-                                        linkUrl: values.linkUrl,
-                                    },
-                                    path,
-                                });
+                            {
+                                icon: icons.BlockRight,
+                                onClick: () => {
+                                    controller.updateCardAlignment({
+                                        editor,
+                                        alignment: 'rightImageLeftText',
+                                        path,
+                                    });
+                                },
+                                active: element.alignment === 'rightImageLeftText',
                             },
-                        });
+                        ],
                     },
-                },
                 {
-                    icon: icons.Trash,
-                    onClick: () => {
-                        if (controller.confirmModal) {
-                            // TODO: i18n
-                            setConfirmModalConfig({
-                                title: '刪除卡片',
-                                content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
-                                confirmText: '刪除卡片',
-                                onConfirm: () => {
+                    icons: [
+                        {
+                            icon: icons.Edit,
+                            onClick: () => {
+                                setCardModalConfig({
+                                    controller,
+                                    initialValue: {
+                                        values: {
+                                            alignment: element.alignment,
+                                            title: element.title,
+                                            description: element.description,
+                                            remark: element.remark,
+                                            linkText: element.linkText,
+                                            linkUrl: element.linkUrl,
+                                        },
+                                        imageItem: element.imageItem,
+                                        haveLink: element.haveLink,
+                                    },
+                                    onConfirm: ({ values, imageItem, haveLink }) => {
+                                        controller.updateCardElement({
+                                            editor,
+                                            cardValues: {
+                                                alignment: values.alignment,
+                                                imageItem,
+                                                title: values.title,
+                                                description: values.description,
+                                                remark: values.remark,
+                                                haveLink,
+                                                linkText: values.linkText,
+                                                linkUrl: values.linkUrl,
+                                            },
+                                            path,
+                                        });
+                                    },
+                                });
+                            },
+                        },
+                        {
+                            icon: icons.Trash,
+                            onClick: () => {
+                                if (controller.confirmModal) {
+                                    // TODO: i18n
+                                    setConfirmModalConfig({
+                                        title: '刪除卡片',
+                                        content: '是否確認刪除此卡片？刪除後將立即移除，且此操作無法復原。',
+                                        confirmText: '刪除卡片',
+                                        onConfirm: () => {
+                                            core.Transforms.removeNodes(editor, { at: path });
+                                        },
+                                    });
+                                }
+                                else {
                                     core.Transforms.removeNodes(editor, { at: path });
-                                },
-                            });
-                        }
-                        else {
-                            core.Transforms.removeNodes(editor, { at: path });
-                        }
-                    },
+                                }
+                            },
+                        },
+                    ],
                 },
             ] }),
         children));

package/carousel/components/Carousel.js

@@ -15,37 +15,41 @@ function Carousel({ attributes, children, element, controller, }) {
             setActiveIndex,
         } },
         React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel qdr-carousel--with-inline-toolbar" }),
-            React.createElement(InlineToolbar, { className: "qdr-carousel__inline-toolbar", leftIcons: [], rightIcons: [
+            React.createElement(InlineToolbar, { className: "qdr-carousel__inline-toolbar", iconGroups: [
                     {
-                        icon: Edit,
-                        onClick: () => {
-                            setCarouselModalConfig({
-                                controller,
-                                initialValue: element.items,
-                                onConfirm: (items) => {
-                                    controller.updateCarouselElement({ editor, items, path });
+                        icons: [
+                            {
+                                icon: Edit,
+                                onClick: () => {
+                                    setCarouselModalConfig({
+                                        controller,
+                                        initialValue: element.items,
+                                        onConfirm: (items) => {
+                                            controller.updateCarouselElement({ editor, items, path });
+                                        },
+                                    });
                                 },
-                            });
-                        },
-                    },
-                    {
-                        icon: Trash,
-                        onClick: () => {
-                            if (controller.confirmModal) {
-                                // TODO: i18n
-                                setConfirmModalConfig({
-                                    title: '刪除輪播',
-                                    content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
-                                    confirmText: '刪除輪播',
-                                    onConfirm: () => {
+                            },
+                            {
+                                icon: Trash,
+                                onClick: () => {
+                                    if (controller.confirmModal) {
+                                        // TODO: i18n
+                                        setConfirmModalConfig({
+                                            title: '刪除輪播',
+                                            content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
+                                            confirmText: '刪除輪播',
+                                            onConfirm: () => {
+                                                Transforms.removeNodes(editor, { at: path });
+                                            },
+                                        });
+                                    }
+                                    else {
                                         Transforms.removeNodes(editor, { at: path });
-                                    },
-                                });
-                            }
-                            else {
-                                Transforms.removeNodes(editor, { at: path });
-                            }
-                        },
+                                    }
+                                },
+                            },
+                        ],
                     },
                 ] }),
             children)));

package/carousel/index.cjs.js

@@ -26,37 +26,41 @@ function Carousel({ attributes, children, element, controller, }) {
             setActiveIndex,
         } },
         React.createElement("div", Object.assign({}, attributes, { contentEditable: false, className: "qdr-carousel qdr-carousel--with-inline-toolbar" }),
-            React.createElement(toolbar.InlineToolbar, { className: "qdr-carousel__inline-toolbar", leftIcons: [], rightIcons: [
+            React.createElement(toolbar.InlineToolbar, { className: "qdr-carousel__inline-toolbar", iconGroups: [
                     {
-                        icon: icons.Edit,
-                        onClick: () => {
-                            setCarouselModalConfig({
-                                controller,
-                                initialValue: element.items,
-                                onConfirm: (items) => {
-                                    controller.updateCarouselElement({ editor, items, path });
+                        icons: [
+                            {
+                                icon: icons.Edit,
+                                onClick: () => {
+                                    setCarouselModalConfig({
+                                        controller,
+                                        initialValue: element.items,
+                                        onConfirm: (items) => {
+                                            controller.updateCarouselElement({ editor, items, path });
+                                        },
+                                    });
                                 },
-                            });
-                        },
-                    },
-                    {
-                        icon: icons.Trash,
-                        onClick: () => {
-                            if (controller.confirmModal) {
-                                // TODO: i18n
-                                setConfirmModalConfig({
-                                    title: '刪除輪播',
-                                    content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
-                                    confirmText: '刪除輪播',
-                                    onConfirm: () => {
+                            },
+                            {
+                                icon: icons.Trash,
+                                onClick: () => {
+                                    if (controller.confirmModal) {
+                                        // TODO: i18n
+                                        setConfirmModalConfig({
+                                            title: '刪除輪播',
+                                            content: '是否確認刪除此輪播？刪除後將立即移除，且此操作無法復原。',
+                                            confirmText: '刪除輪播',
+                                            onConfirm: () => {
+                                                core.Transforms.removeNodes(editor, { at: path });
+                                            },
+                                        });
+                                    }
+                                    else {
                                         core.Transforms.removeNodes(editor, { at: path });
-                                    },
-                                });
-                            }
-                            else {
-                                core.Transforms.removeNodes(editor, { at: path });
-                            }
-                        },
+                                    }
+                                },
+                            },
+                        ],
                     },
                 ] }),
             children)));

package/components/Tooltip/index.js

@@ -52,7 +52,7 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
     if (triggers.includes('click')) {
         triggerProps.onClick = (event) => {
             var _a, _b;
-            delaySetVisible(prevVisible => !prevVisible, 0);
+            delaySetVisible((prevVisible) => !prevVisible, 0);
             (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         };
     }
@@ -83,7 +83,10 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
             return;
         }
         const { top, left } = calculatePosition({
-            placement, getContainer, horizontalOffset, verticalOffset,
+            placement,
+            getContainer,
+            horizontalOffset,
+            verticalOffset,
         }, triggerEl, popupEl);
         popupEl.style.top = `${top}px`;
         popupEl.style.left = `${left}px`;

package/components/index.cjs.js

@@ -780,7 +780,7 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
     if (triggers.includes('click')) {
         triggerProps.onClick = (event) => {
             var _a, _b;
-            delaySetVisible(prevVisible => !prevVisible, 0);
+            delaySetVisible((prevVisible) => !prevVisible, 0);
             (_b = (_a = child.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         };
     }
@@ -811,7 +811,10 @@ function Tooltip({ children, triggers = defaultTriggers, popup, getContainer = d
             return;
         }
         const { top, left } = calculatePosition({
-            placement, getContainer, horizontalOffset, verticalOffset,
+            placement,
+            getContainer,
+            horizontalOffset,
+            verticalOffset,
         }, triggerEl, popupEl);
         popupEl.style.top = `${top}px`;
         popupEl.style.left = `${left}px`;

package/embed/renderers/base/components/BaseEmbedElement.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Transforms } from '@quadrats/core';
-import { Edit, Trash, AlignLeft, AlignCenter, AlignRight } from '@quadrats/icons';
+import { AlignLeft, AlignCenter, AlignRight, Edit, Trash } from '@quadrats/icons';
 import { useModal, useSlateStatic, ReactEditor } from '@quadrats/react';
 import { InlineToolbar } from '@quadrats/react/toolbar';
 
@@ -11,50 +11,58 @@ const BaseEmbedElement = ({ element, haveAlignConfig = true, type = 'input', pla
     const { setEmbedModalConfig } = useModal();
     const editor = useSlateStatic();
     const path = ReactEditor.findPath(editor, element);
-    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(InlineToolbar, { className: "qdr-embed__inline-toolbar", leftIcons: haveAlignConfig
-            ? [
-                {
-                    icon: AlignLeft,
-                    onClick: () => {
-                        Transforms.setNodes(editor, { align: 'left' }, { at: path });
-                    },
-                    active: element.align === 'left' || !element.align,
-                },
-                {
-                    icon: AlignCenter,
-                    onClick: () => {
-                        Transforms.setNodes(editor, { align: 'center' }, { at: path });
-                    },
-                    active: element.align === 'center',
-                },
-                {
-                    icon: AlignRight,
-                    onClick: () => {
-                        Transforms.setNodes(editor, { align: 'right' }, { at: path });
-                    },
-                    active: element.align === 'right',
-                },
-            ]
-            : [], rightIcons: [
-            {
-                icon: Edit,
-                onClick: () => {
-                    setEmbedModalConfig({
-                        placeholder: placeholder || '',
-                        confirmText: confirmText || '',
-                        hint: hint || '',
-                        type,
-                        onConfirm: (value) => {
-                            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+    return (React.createElement("div", { className: "qdr-embed" }, children(React.createElement(InlineToolbar, { className: "qdr-embed__inline-toolbar", iconGroups: [
+            haveAlignConfig
+                ? {
+                    enabledBgColor: true,
+                    icons: [
+                        {
+                            icon: AlignLeft,
+                            onClick: () => {
+                                Transforms.setNodes(editor, { align: 'left' }, { at: path });
+                            },
+                            active: element.align === 'left' || !element.align,
                         },
-                    });
-                },
-            },
+                        {
+                            icon: AlignCenter,
+                            onClick: () => {
+                                Transforms.setNodes(editor, { align: 'center' }, { at: path });
+                            },
+                            active: element.align === 'center',
+                        },
+                        {
+                            icon: AlignRight,
+                            onClick: () => {
+                                Transforms.setNodes(editor, { align: 'right' }, { at: path });
+                            },
+                            active: element.align === 'right',
+                        },
+                    ],
+                }
+                : { icons: [] },
             {
-                icon: Trash,
-                onClick: () => {
-                    Transforms.removeNodes(editor, { at: path });
-                },
+                icons: [
+                    {
+                        icon: Edit,
+                        onClick: () => {
+                            setEmbedModalConfig({
+                                placeholder: placeholder || '',
+                                confirmText: confirmText || '',
+                                hint: hint || '',
+                                type,
+                                onConfirm: (value) => {
+                                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(editor, path, value);
+                                },
+                            });
+                        },
+                    },
+                    {
+                        icon: Trash,
+                        onClick: () => {
+                            Transforms.removeNodes(editor, { at: path });
+                        },
+                    },
+                ],
             },
         ] }))));
 };