@quadrats/react 0.7.8 → 1.0.0

package/core/contexts/modal/CarouselModal/CarouselModal.js

@@ -0,0 +1,174 @@
+import { __awaiter } from 'tslib';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import clsx from 'clsx';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { DndProvider } from 'react-dnd';
+import { Plus, Upload } from '@quadrats/icons';
+import { usePreviousValue, readFileAsBase64, upload } from '@quadrats/react/utils';
+import { useSlateStatic } from 'slate-react';
+import { Modal, Hints, Button, Icon } from '@quadrats/react/components';
+import { useMessage } from '../../message/message.js';
+import FilesDropZone from './FilesDropZone.js';
+import CarouselItem from './CarouselItem.js';
+
+const CarouselModal = ({ isOpen, close, controller, initialValue = [], onConfirm }) => {
+    const editor = useSlateStatic();
+    const [uploading, setUploading] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const [items, setItems] = useState([]);
+    const { message } = useMessage();
+    const prevIsOpen = usePreviousValue(isOpen);
+    useEffect(() => {
+        if (!prevIsOpen && isOpen && initialValue.length > 0) {
+            setItems(initialValue);
+        }
+    }, [initialValue, isOpen, prevIsOpen]);
+    useEffect(() => {
+        if (items.some((i) => i.progress !== 100)) {
+            setUploading(true);
+        }
+        else {
+            setUploading(false);
+        }
+    }, [items]);
+    const acceptText = useMemo(() => {
+        if ((controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) &&
+            (controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/png'))) {
+            return 'JPG 或 PNG';
+        }
+        else if (controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/png')) {
+            return 'PNG';
+        }
+        else if (controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === 'image/jpeg' || a === 'image/jpg')) {
+            return 'JPG';
+        }
+        return '';
+    }, [controller === null || controller === void 0 ? void 0 : controller.accept]);
+    const isOverMaxLength = useMemo(() => {
+        if (controller === null || controller === void 0 ? void 0 : controller.maxLength) {
+            return items.length >= controller.maxLength;
+        }
+        return false;
+    }, [controller === null || controller === void 0 ? void 0 : controller.maxLength, items.length]);
+    const disabledConfirm = useMemo(() => {
+        return items.length === 0;
+    }, [items.length]);
+    const uploadFiles = useCallback((files) => __awaiter(void 0, void 0, void 0, function* () {
+        if (files && controller) {
+            const currentItems = [];
+            for (const file of files) {
+                const base64 = yield readFileAsBase64(file);
+                currentItems.push({ file, url: '', caption: '', preview: base64, progress: 0 });
+            }
+            setItems((prev) => [...prev, ...currentItems]);
+            for (const item of currentItems) {
+                const onProgress = (p) => {
+                    setItems((prev) => prev.map((u) => (u.file === item.file ? Object.assign(Object.assign({}, u), { progress: p }) : u)));
+                };
+                try {
+                    const url = yield upload({
+                        file: item.file,
+                        getBody: controller === null || controller === void 0 ? void 0 : controller.getBody,
+                        getHeaders: controller === null || controller === void 0 ? void 0 : controller.getHeaders,
+                        getUrl: controller === null || controller === void 0 ? void 0 : controller.getUrl,
+                        uploader: controller === null || controller === void 0 ? void 0 : controller.uploader,
+                        onProgress,
+                    });
+                    setItems((prev) => {
+                        if (prev.filter((p) => !!p.url).length >= controller.maxLength) {
+                            message({ type: 'error', content: '超過數量上限，剩下圖片無法上傳' });
+                            return prev.filter((p) => !!p.url);
+                        }
+                        return prev.map((u) => (u.file === item.file ? Object.assign(Object.assign({}, u), { preview: url, url }) : u));
+                    });
+                }
+                catch (error) {
+                    setItems((prev) => prev.map((u) => (u.file === item.file ? Object.assign(Object.assign({}, u), { preview: '', url: '', isError: true }) : u)));
+                }
+            }
+        }
+    }), [controller, message]);
+    const change = useCallback((index, image) => {
+        setItems((prev) => {
+            const updated = [...prev];
+            updated[index] = Object.assign(Object.assign({}, updated[index]), image);
+            return updated;
+        });
+    }, []);
+    const remove = useCallback((index) => {
+        setItems((prev) => prev.filter((_, i) => i !== index));
+    }, []);
+    const swap = useCallback((from, to) => {
+        setItems((prev) => {
+            const updated = [...prev];
+            const temp = updated[from];
+            updated[from] = updated[to];
+            updated[to] = temp;
+            return updated;
+        });
+    }, []);
+    // TODO: i18n
+    return (React.createElement(Modal, { isOpen: isOpen, title: "\u5EFA\u7ACB\u8F2A\u64AD", size: "extraLarge", closable: !uploading, maskClosable: !uploading, haveCloseButton: false, confirmText: "\u5EFA\u7ACB\u8F2A\u64AD", mainAreaClassName: "qdr-carousel-modal__main", sideChildren: React.createElement("div", { className: "qdr-carousel-modal__side" },
+            React.createElement("div", { className: "qdr-carousel-modal__side__hints-wrapper" },
+                React.createElement("div", { className: "qdr-carousel-modal__side__hints-title" }, "\u4E0A\u50B3\u5EFA\u8B70"),
+                React.createElement(Hints, { hints: [
+                        {
+                            text: `數量限制：至少 1 張，至多 ${controller === null || controller === void 0 ? void 0 : controller.maxLength} 張。`,
+                        },
+                        {
+                            text: `檔案格式：限 ${acceptText}。`,
+                        },
+                        (controller === null || controller === void 0 ? void 0 : controller.ratio) && {
+                            text: `檔案尺寸：最佳比例為 ${controller.ratio[0]}:${controller.ratio[1]}。建議圖片寬度達 2000px 以上，高度不限。`,
+                        },
+                        {
+                            text: `檔案大小：不可大於 ${controller === null || controller === void 0 ? void 0 : controller.limitSize} MB。`,
+                        },
+                    ].filter((h) => !!h) })),
+            React.createElement(Button, { className: "qdr-carousel-modal__side__upload", variant: "outlined", size: "large", disabled: isOverMaxLength, prefix: React.createElement(Icon, { icon: Plus, width: 24, height: 24 }), onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                    const files = yield (controller === null || controller === void 0 ? void 0 : controller.selectFiles(editor));
+                    if (files) {
+                        const correctFiles = files.filter((f) => (controller === null || controller === void 0 ? void 0 : controller.limitSize) && f.size <= controller.limitSize * 1024 * 1024);
+                        if (correctFiles.length !== files.length) {
+                            message({ type: 'error', content: `圖片檔案過大，檔案需小於 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB` });
+                        }
+                        if (correctFiles.length > 0) {
+                            yield uploadFiles(correctFiles);
+                        }
+                    }
+                }) }, "\u52A0\u5165\u5716\u7247")), customizedFooterElement: React.createElement("div", { className: "qdr-carousel-modal__counter" }, `已上傳 ${items.filter((i) => i.progress === 100).length}/${controller === null || controller === void 0 ? void 0 : controller.maxLength}`), disabledConfirmButton: disabledConfirm, onClose: () => {
+            close();
+            setItems([]);
+        }, onConfirm: () => {
+            if (uploading) {
+                message({ type: 'error', content: '檔案上傳中，無法建立' });
+            }
+            else if ((controller === null || controller === void 0 ? void 0 : controller.maxLength) && items.length > controller.maxLength) {
+                message({ type: 'error', content: '超過數量上限，請刪除已存在圖片' });
+            }
+            else {
+                close();
+                setItems([]);
+                setTimeout(() => {
+                    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(items);
+                }, 0);
+            }
+        } },
+        React.createElement(DndProvider, { backend: HTML5Backend },
+            React.createElement(FilesDropZone, { isDragging: isDragging, setIsDragging: setIsDragging, isOverMaxLength: isOverMaxLength, controller: controller, uploadFiles: uploadFiles }, items.length > 0 ? (React.createElement("div", { className: clsx('qdr-carousel-modal__grid', {
+                    'qdr-carousel-modal__grid--isDragging': isDragging,
+                }) }, items.map((item, index) => (React.createElement(CarouselItem, { key: `${item.url}-${item.caption || ''}-${index}`, url: item.url, preview: item.preview, progress: item.progress, caption: item.caption, index: index, ratio: controller === null || controller === void 0 ? void 0 : controller.ratio, isError: item.isError, onChange: (value) => {
+                    change(index, { url: item.url, caption: value });
+                }, onRemove: () => {
+                    remove(index);
+                }, swap: swap }))))) : (React.createElement("div", { className: "qdr-carousel-modal__placeholder" },
+                React.createElement("div", { className: "qdr-carousel-modal__placeholder__block" },
+                    React.createElement("div", { className: "qdr-carousel-modal__placeholder__icon" },
+                        React.createElement(Icon, { icon: Upload, width: 32, height: 32 })),
+                    React.createElement("div", { className: "qdr-carousel-modal__placeholder__title" }, "\u62D6\u66F3\u6A94\u6848\u5230\u6B64\u4E0A\u50B3"),
+                    React.createElement("div", { className: "qdr-carousel-modal__placeholder__hint" }, (controller === null || controller === void 0 ? void 0 : controller.ratio)
+                        ? `僅能上傳 ${acceptText}；建議比例為 ${controller.ratio[0]}:${controller.ratio[1]} 且寬度至少達 2000px 以上；檔案大小不可超過 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB`
+                        : `僅能上傳 ${acceptText}；檔案大小不可超過 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB`))))))));
+};
+
+export { CarouselModal };

package/core/contexts/modal/CarouselModal/FilesDropZone.d.ts

@@ -0,0 +1,13 @@
+import React, { Dispatch, SetStateAction, ReactNode } from 'react';
+import { Editor } from '@quadrats/core';
+import { Carousel } from '@quadrats/common/carousel';
+interface FilesDropZoneProps {
+    isDragging: boolean;
+    setIsDragging: Dispatch<SetStateAction<boolean>>;
+    children: ReactNode;
+    isOverMaxLength: boolean;
+    controller?: Carousel<Editor>;
+    uploadFiles: (files: File[]) => Promise<void>;
+}
+declare const FilesDropZone: ({ isDragging, setIsDragging, children, isOverMaxLength, controller, uploadFiles, }: FilesDropZoneProps) => React.JSX.Element;
+export default FilesDropZone;

package/core/contexts/modal/CarouselModal/FilesDropZone.js

@@ -0,0 +1,64 @@
+import { __awaiter } from 'tslib';
+import React, { useCallback } from 'react';
+import clsx from 'clsx';
+import { Upload } from '@quadrats/icons';
+import { Icon } from '@quadrats/react/components';
+import { useMessage } from '../../message/message.js';
+
+const FilesDropZone = ({ isDragging, setIsDragging, children, isOverMaxLength, controller, uploadFiles, }) => {
+    const { message } = useMessage();
+    const validateFile = useCallback((file) => {
+        if (!(controller === null || controller === void 0 ? void 0 : controller.accept.find((a) => a === file.type))) {
+            return false;
+        }
+        return true;
+    }, [controller === null || controller === void 0 ? void 0 : controller.accept]);
+    const validateFiles = useCallback((event) => {
+        const files = Array.from(event.dataTransfer.files);
+        if (!files || isOverMaxLength) {
+            if (isOverMaxLength) {
+                message({ type: 'error', content: '超過數量上限，請刪除已存在圖片' });
+            }
+            return false;
+        }
+        return true;
+    }, [isOverMaxLength, message]);
+    const handleDrop = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        if ((_b = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes('Files')) {
+            event.preventDefault();
+            setIsDragging(false);
+            const files = Array.from(event.dataTransfer.files);
+            if (!validateFiles(event)) {
+                return;
+            }
+            const correctFiles = files.filter((f) => validateFile(f) && (controller === null || controller === void 0 ? void 0 : controller.limitSize) && f.size <= controller.limitSize * 1024 * 1024);
+            if (files.find((f) => !validateFile(f))) {
+                message({ type: 'error', content: '檔案類型錯誤。' });
+            }
+            if (files.find((f) => (controller === null || controller === void 0 ? void 0 : controller.limitSize) && f.size > controller.limitSize * 1024 * 1024)) {
+                message({ type: 'error', content: `圖片檔案過大，檔案需小於 ${controller === null || controller === void 0 ? void 0 : controller.limitSize}MB` });
+            }
+            if (correctFiles.length > 0) {
+                yield uploadFiles(correctFiles);
+            }
+        }
+    }), [setIsDragging, validateFiles, validateFile, controller === null || controller === void 0 ? void 0 : controller.limitSize, message, uploadFiles]);
+    // TODO: i18n
+    return (React.createElement("div", { className: clsx('qdr-carousel-modal__zone'), onDragOver: (e) => {
+            var _a, _b;
+            e.preventDefault();
+            if ((_b = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.types) === null || _b === void 0 ? void 0 : _b.includes('Files')) {
+                setIsDragging(true);
+            }
+        }, onDragLeave: () => {
+            setIsDragging(false);
+        }, onDrop: handleDrop },
+        isDragging && (React.createElement("div", { className: "qdr-carousel-modal__zone__wrapper" },
+            React.createElement("div", { className: "qdr-carousel-modal__zone__block" },
+                React.createElement(Icon, { icon: Upload, width: 24, height: 24 }),
+                "\u5C07\u6A94\u6848\u62D6\u66F3\u5230\u9019\u88E1\u5373\u53EF\u4E0A\u50B3"))),
+        children));
+};
+
+export { FilesDropZone as default };

package/core/contexts/modal/ConfirmModal/ConfirmModal.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface ConfirmModalProps {
+    isOpen: boolean;
+    close: VoidFunction;
+    title: string;
+    content: string;
+    confirmText: string;
+    onConfirm?: () => void;
+    haveFooter?: boolean;
+    mask?: boolean;
+    maskClosable?: boolean;
+    escToExit?: boolean;
+}
+export declare const ConfirmModal: ({ isOpen, title, content, confirmText, close, onConfirm, haveFooter, mask, maskClosable, escToExit, }: ConfirmModalProps) => React.JSX.Element;

package/core/contexts/modal/ConfirmModal/ConfirmModal.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { useLocale } from '@quadrats/react/configs';
+import { Modal, Icon, Button } from '@quadrats/react/components';
+import { Warning } from '@quadrats/icons';
+
+const ConfirmModal = ({ isOpen, title, content, confirmText, close, onConfirm, haveFooter = true, mask, maskClosable, escToExit, }) => {
+    const locale = useLocale();
+    return (React.createElement(Modal, { isOpen: isOpen, className: "qdr-confirm-modal", size: "small", mask: mask, maskClosable: maskClosable, escToExit: escToExit, onClose: () => {
+            close();
+        }, haveFooter: false },
+        React.createElement("div", { className: "qdr-confirm-modal__container" },
+            React.createElement(Icon, { icon: Warning, width: 28, height: 28, className: "qdr-confirm-modal__icon" }),
+            React.createElement("div", { className: "qdr-confirm-modal__body" },
+                React.createElement("div", { className: "qdr-confirm-modal__title" }, title),
+                React.createElement("div", { className: "qdr-confirm-modal__content" }, content))),
+        haveFooter && (React.createElement("div", { className: "qdr-confirm-modal__footer" },
+            React.createElement(Button, { variant: "secondary", onClick: close }, locale.editor.cancel),
+            React.createElement(Button, { variant: "primary", danger: true, onClick: onConfirm }, confirmText || locale.editor.confirm)))));
+};
+
+export { ConfirmModal };

package/core/contexts/modal/EmbedModal/EmbedModal.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface EmbedModalProps {
+    isOpen: boolean;
+    close: VoidFunction;
+    placeholder: string;
+    confirmText: string;
+    hint: string;
+    type: 'input' | 'textarea';
+    onConfirm: (value: string) => void;
+}
+export declare const EmbedModal: ({ isOpen, close, placeholder, confirmText, hint, type, onConfirm }: EmbedModalProps) => React.JSX.Element;

package/core/contexts/modal/EmbedModal/EmbedModal.js

@@ -0,0 +1,25 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Modal, Textarea, Input } from '@quadrats/react/components';
+import { useLocale } from '@quadrats/react/configs';
+
+const EmbedModal = ({ isOpen, close, placeholder, confirmText, hint, type, onConfirm }) => {
+    const [value, setValue] = useState('');
+    const locale = useLocale();
+    const textareaRef = useRef(null);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        var _a, _b;
+        if (isOpen) {
+            (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }, [isOpen]);
+    return (React.createElement(Modal, { isOpen: isOpen, title: locale.editor.embedTitle, confirmText: confirmText, onClose: () => {
+            close();
+            setValue('');
+        }, onConfirm: () => {
+            onConfirm(value);
+        } }, type === 'textarea' ? (React.createElement(Textarea, { textareaRef: textareaRef, value: value, onChange: setValue, placeholder: placeholder, hint: hint, height: 86 })) : (React.createElement(Input, { inputRef: inputRef, value: value, onChange: setValue, placeholder: placeholder, hint: hint }))));
+};
+
+export { EmbedModal };

package/core/contexts/modal/ModalProvider.d.ts

@@ -0,0 +1,8 @@
+import React, { Dispatch, SetStateAction, ReactNode } from 'react';
+import { ConfirmModalConfig } from './modal';
+export interface ModalProviderProps {
+    children: ReactNode;
+    needConfirmModal?: ConfirmModalConfig | null;
+    setNeedConfirmModal?: Dispatch<SetStateAction<ConfirmModalConfig | null>>;
+}
+export declare const ModalProvider: ({ children, needConfirmModal, setNeedConfirmModal }: ModalProviderProps) => React.JSX.Element;

package/core/contexts/modal/ModalProvider.js

@@ -0,0 +1,66 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { EmbedModal } from './EmbedModal/EmbedModal.js';
+import { CarouselModal } from './CarouselModal/CarouselModal.js';
+import { CardModal } from './CardModal/CardModal.js';
+import { ConfirmModal } from './ConfirmModal/ConfirmModal.js';
+import { ModalContext } from './modal.js';
+
+const ModalProvider = ({ children, needConfirmModal, setNeedConfirmModal }) => {
+    var _a, _b, _c;
+    const [modalName, setModalName] = useState('');
+    const [isModalClosed, setIsModalClosed] = useState(false);
+    const [embedModalConfig, setEmbedModalConfig] = useState(null);
+    const [carouselModalConfig, setCarouselModalConfig] = useState(null);
+    const [cardModalConfig, setCardModalConfig] = useState(null);
+    const [confirmModalConfig, setConfirmModalConfig] = useState(null);
+    const close = useCallback(() => {
+        setModalName('');
+        setIsModalClosed(true);
+        if (needConfirmModal) {
+            setNeedConfirmModal === null || setNeedConfirmModal === void 0 ? void 0 : setNeedConfirmModal(null);
+        }
+    }, [needConfirmModal, setNeedConfirmModal]);
+    useEffect(() => {
+        if (needConfirmModal) {
+            setModalName('confirm-modal');
+            setConfirmModalConfig(needConfirmModal);
+        }
+    }, [needConfirmModal]);
+    return (React.createElement(ModalContext.Provider, { value: {
+            isModalClosed,
+            setIsModalClosed,
+            setEmbedModalConfig: (config) => {
+                setModalName('embed-modal');
+                setEmbedModalConfig(config);
+            },
+            setCarouselModalConfig: (config) => {
+                setModalName('carousel-modal');
+                setCarouselModalConfig(config);
+            },
+            setCardModalConfig: (config) => {
+                setModalName('card-modal');
+                setCardModalConfig(config);
+            },
+            setConfirmModalConfig: (config) => {
+                setModalName('confirm-modal');
+                setConfirmModalConfig(config);
+            },
+        } },
+        children,
+        React.createElement(EmbedModal, { isOpen: modalName === 'embed-modal', close: close, placeholder: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.placeholder) || '', confirmText: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.confirmText) || '', hint: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.hint) || '', type: (embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.type) || 'input', onConfirm: (value) => {
+                var _a;
+                (_a = embedModalConfig === null || embedModalConfig === void 0 ? void 0 : embedModalConfig.onConfirm) === null || _a === void 0 ? void 0 : _a.call(embedModalConfig, value);
+            } }),
+        React.createElement(CarouselModal, { isOpen: modalName === 'carousel-modal', close: close, controller: carouselModalConfig === null || carouselModalConfig === void 0 ? void 0 : carouselModalConfig.controller, initialValue: carouselModalConfig === null || carouselModalConfig === void 0 ? void 0 : carouselModalConfig.initialValue, onConfirm: carouselModalConfig === null || carouselModalConfig === void 0 ? void 0 : carouselModalConfig.onConfirm }),
+        React.createElement(CardModal, { isOpen: modalName === 'card-modal', close: close, controller: cardModalConfig === null || cardModalConfig === void 0 ? void 0 : cardModalConfig.controller, initialValue: cardModalConfig === null || cardModalConfig === void 0 ? void 0 : cardModalConfig.initialValue, onConfirm: ({ values, imageItem, haveLink }) => {
+                var _a;
+                (_a = cardModalConfig === null || cardModalConfig === void 0 ? void 0 : cardModalConfig.onConfirm) === null || _a === void 0 ? void 0 : _a.call(cardModalConfig, {
+                    values,
+                    imageItem,
+                    haveLink,
+                });
+            } }),
+        React.createElement(ConfirmModal, { isOpen: modalName === 'confirm-modal', close: close, title: (_a = confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.title) !== null && _a !== void 0 ? _a : '', content: (_b = confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.content) !== null && _b !== void 0 ? _b : '', confirmText: (_c = confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.confirmText) !== null && _c !== void 0 ? _c : '', onConfirm: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.onConfirm, haveFooter: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.haveFooter, mask: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.mask, maskClosable: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.maskClosable, escToExit: confirmModalConfig === null || confirmModalConfig === void 0 ? void 0 : confirmModalConfig.escToExit })));
+};
+
+export { ModalProvider };

package/core/contexts/modal/modal.d.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from 'react';
+import { EmbedModalProps } from './EmbedModal/EmbedModal';
+import { CarouselModalProps } from './CarouselModal/CarouselModal';
+import { CardModalProps } from './CardModal/CardModal';
+import { ConfirmModalProps } from './ConfirmModal/ConfirmModal';
+export type ModalName = 'embed-modal' | 'carousel-modal' | 'card-modal' | 'confirm-modal' | '';
+export interface EmbedModalConfig extends Omit<EmbedModalProps, 'isOpen' | 'close'> {
+}
+export interface CarouselModalConfig extends Omit<CarouselModalProps, 'isOpen' | 'close'> {
+}
+export interface CardModalConfig extends Omit<CardModalProps, 'isOpen' | 'close'> {
+}
+export interface ConfirmModalConfig extends Omit<ConfirmModalProps, 'isOpen' | 'close'> {
+}
+export interface ModalContextValue {
+    isModalClosed: boolean;
+    setIsModalClosed: Dispatch<SetStateAction<boolean>>;
+    setEmbedModalConfig: (config: EmbedModalConfig) => void;
+    setCarouselModalConfig: (config: CarouselModalConfig) => void;
+    setCardModalConfig: (config: CardModalConfig) => void;
+    setConfirmModalConfig: (config: ConfirmModalConfig) => void;
+}
+export declare const ModalContext: import("react").Context<ModalContextValue>;
+export declare function useModal(): ModalContextValue;

package/core/contexts/modal/modal.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+const ModalContext = createContext({
+    isModalClosed: false,
+    setIsModalClosed: () => { },
+    setEmbedModalConfig: () => { },
+    setCarouselModalConfig: () => { },
+    setCardModalConfig: () => { },
+    setConfirmModalConfig: () => { },
+});
+function useModal() {
+    return useContext(ModalContext);
+}
+
+export { ModalContext, useModal };

package/core/index.d.ts

@@ -1,5 +1,6 @@
 import { QuadratsEditor, QuadratsElement, QuadratsText } from '@quadrats/core';
 import { ReactEditor } from 'slate-react';
+import { PLACEHOLDER_KEY } from './constants';
 export { useSlateStatic, useFocused, useReadOnly, useSelected, useSlate as useQuadrats, ReactEditor, } from 'slate-react';
 export * from './typings/handler';
 export * from './typings/renderer';
@@ -10,6 +11,12 @@ export { default as Editable, EditableProps } from './components/Editable';
 export { default as DefaultElement } from './components/DefaultElement';
 export { default as DefaultLeaf } from './components/DefaultLeaf';
 export { default as Quadrats, QuadratsProps } from './components/Quadrats';
+export * from './contexts/modal/modal';
+export * from './contexts/modal/ModalProvider';
+export * from './contexts/message/message';
+export * from './contexts/message/MessageProvider';
+export * from './contexts/composition/composition';
+export * from './contexts/composition/CompositionProvider';
 export { composeHandlers } from './composeHandlers';
 export { composeRenderElements } from './composeRenderElements';
 export { composeRenderLeafs } from './composeRenderLeafs';
@@ -17,8 +24,8 @@ export { createReactEditor } from './createReactEditor';
 export { createRenderElement } from './createRenderElement';
 export { createRenderElements } from './createRenderElements';
 export { createRenderMark } from './createRenderMark';
+export { PLACEHOLDER_KEY };
 export type QuadratsReactEditor = QuadratsEditor & ReactEditor;
-export declare const PLACEHOLDER_KEY = "__quadrats-placeholder__";
 declare module '@quadrats/core' {
     interface CustomTypes {
         Editor: QuadratsReactEditor;

package/divider/defaultRenderDividerElement.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { RenderDividerElementProps } from './typings';
-export declare const defaultRenderDividerElement: ({ attributes, children }: RenderDividerElementProps) => React.JSX.Element;
+export declare const defaultRenderDividerElement: ({ attributes }: RenderDividerElementProps) => React.JSX.Element;

package/divider/defaultRenderDividerElement.js

@@ -1,7 +1,6 @@
 import React from 'react';
 
-const defaultRenderDividerElement = ({ attributes, children }) => (React.createElement("div", Object.assign({}, attributes, { className: "qdr-divider", contentEditable: false }),
-    React.createElement("hr", null),
-    children));
+const defaultRenderDividerElement = ({ attributes }) => (React.createElement("div", Object.assign({}, attributes, { className: "qdr-divider", contentEditable: false }),
+    React.createElement("hr", null)));
 
 export { defaultRenderDividerElement };

package/divider/divider.css

@@ -0,0 +1 @@
+.qdr-divider{width:100%;margin:var(--qdr-spacing-14) 0 !important}.qdr-divider hr{border-color:var(--qdr-divider);margin:0}

package/divider/divider.scss

@@ -0,0 +1,9 @@
+.qdr-divider {
+  width: 100%;
+  margin: var(--qdr-spacing-14) 0 !important;
+
+  hr {
+    border-color: var(--qdr-divider);
+    margin: 0;
+  }
+}

package/divider/index.cjs.js

@@ -4,9 +4,8 @@ var React = require('react');
 var divider = require('@quadrats/common/divider');
 var react = require('@quadrats/react');
 
-const defaultRenderDividerElement = ({ attributes, children }) => (React.createElement("div", Object.assign({}, attributes, { className: "qdr-divider", contentEditable: false }),
-    React.createElement("hr", null),
-    children));
+const defaultRenderDividerElement = ({ attributes }) => (React.createElement("div", Object.assign({}, attributes, { className: "qdr-divider", contentEditable: false }),
+    React.createElement("hr", null)));
 
 function createReactDivider(options = {}) {
     const core = divider.createDivider(options);

package/divider/jsx-serializer/defaultRenderDividerElement.js

@@ -1,5 +1,6 @@
 import React from 'react';
 
-const defaultRenderDividerElement = () => React.createElement("hr", null);
+const defaultRenderDividerElement = () => React.createElement("div", { className: "qdr-divider", contentEditable: false },
+    React.createElement("hr", null));
 
 export { defaultRenderDividerElement };

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

@@ -4,7 +4,8 @@ var React = require('react');
 var divider = require('@quadrats/common/divider');
 var jsxSerializer = require('@quadrats/react/jsx-serializer');
 
-const defaultRenderDividerElement = () => React.createElement("hr", null);
+const defaultRenderDividerElement = () => React.createElement("div", { className: "qdr-divider", contentEditable: false },
+    React.createElement("hr", null));
 
 function createJsxSerializeDivider(options = {}) {
     const { type = divider.DIVIDER_TYPE, render = defaultRenderDividerElement } = options;

package/divider/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@quadrats/react/divider",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
   "main": "./index.cjs.js",
   "module": "./index.js",
   "typings": "./index.d.ts"

package/editable.css

@@ -1 +1 @@
-.qdr-editable{background-color:var(--qdr-background);border:solid 1px var(--qdr-border);color:var(--qdr-text);caret-color:var(--qdr-primary);transition:background-color 300ms ease-in-out,border-color 300ms ease-in-out,color 300ms ease-in-out;will-change:background-color,border-color,color}.qdr-editable ::selection{background-color:var(--qdr-primary-light)}.qdr-editable__placeholder{display:inline-block;top:0;left:0;color:var(--qdr-placeholder);font:inherit;padding:inherit;width:0;max-width:100%;opacity:.333;white-space:nowrap;text-decoration:none;pointer-events:none;user-select:none}
+.qdr-editable{background-color:var(--qdr-surface);border:solid 1px var(--qdr-border);color:var(--qdr-text-primary);caret-color:var(--qdr-primary);transition:background-color var(--qdr-duration-short) var(--qdr-easing-standard),border-color var(--qdr-duration-short) var(--qdr-easing-standard),color var(--qdr-duration-short) var(--qdr-easing-standard);will-change:background-color,border-color,color}.qdr-editable ::selection{background-color:var(--qdr-primary-active-bg)}.qdr-editable__placeholder{display:inline-block;top:0;left:0;color:var(--qdr-text-secondary);font:inherit;padding:inherit;width:0;max-width:100%;white-space:nowrap;text-decoration:none;pointer-events:none;user-select:none}

package/editable.scss

@@ -1,25 +1,24 @@
 .qdr-editable {
-  background-color: var(--qdr-background);
+  background-color: var(--qdr-surface);
   border: solid 1px var(--qdr-border);
-  color: var(--qdr-text);
+  color: var(--qdr-text-primary);
   caret-color: var(--qdr-primary);
-  transition: background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out;
+  transition: background-color var(--qdr-duration-short) var(--qdr-easing-standard), border-color var(--qdr-duration-short) var(--qdr-easing-standard), color var(--qdr-duration-short) var(--qdr-easing-standard);
   will-change: background-color, border-color, color;
 
   ::selection {
-    background-color: var(--qdr-primary-light);
+    background-color: var(--qdr-primary-active-bg);
   }
 
   &__placeholder {
     display: inline-block;
     top: 0;
     left: 0;
-    color: var(--qdr-placeholder);
+    color: var(--qdr-text-secondary);
     font: inherit;
     padding: inherit;
     width: 0;
     max-width: 100%;
-    opacity: 0.333;
     white-space: nowrap;
     text-decoration: none;
     pointer-events: none;

package/embed/components/VideoIframe.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { EmbedElement } from '@quadrats/common/embed';
 import { RenderElementProps } from '@quadrats/react';
 export interface VideoIframeProps<E extends EmbedElement> {
@@ -6,6 +6,7 @@ export interface VideoIframeProps<E extends EmbedElement> {
     children?: any;
     data: string;
     element: E;
+    toolbarElement: ReactNode;
 }
-declare function VideoIframe<E extends EmbedElement>({ attributes, children, data: src, }: VideoIframeProps<E>): React.JSX.Element;
+declare function VideoIframe<E extends EmbedElement>({ attributes, children, data: src, toolbarElement, }: VideoIframeProps<E>): React.JSX.Element;
 export default VideoIframe;

package/embed/components/VideoIframe.js

@@ -2,11 +2,12 @@ import React from 'react';
 import { composeRefs } from '@quadrats/react/utils';
 import { useVideoIframeSize } from '../hooks/useVideoIframeSize.js';
 
-function VideoIframe({ attributes, children, data: src, }) {
+function VideoIframe({ attributes, children, data: src, toolbarElement, }) {
     const { ref } = attributes || {};
     const { ref: containerRef, size } = useVideoIframeSize();
     const composedRef = ref ? composeRefs([ref, containerRef]) : containerRef;
     return (React.createElement("div", Object.assign({}, attributes, { ref: composedRef, className: "qdr-embed-video", contentEditable: false }),
+        toolbarElement,
         React.createElement("div", { style: size },
             React.createElement("iframe", { title: src, src: src, frameBorder: "0", width: "100%", height: "100%" })),
         attributes ? children : undefined));