@class-kit/vue 0.1.3 → 0.1.4

package/dist/components/rich-editor.js

@@ -0,0 +1,1339 @@
+import { defineComponent, ref, watch, onBeforeUnmount, h, shallowRef, nextTick, onMounted, Teleport } from 'vue';
+import { RichEditorController, ToastManager, getClassComponentsLocale, configureClassComponents, TooltipController, getSafeTooltipPlacement } from '@class-kit/core';
+
+let tooltipIdSeed = 0;
+const defaultToastManager = /*#__PURE__*/ new ToastManager();
+const classIconPaths = {
+    alignCenter: ["M6 6h12", "M4 12h16", "M7 18h10"],
+    alignLeft: ["M4 6h16", "M4 12h12", "M4 18h16"],
+    alignRight: ["M4 6h16", "M8 12h12", "M4 18h16"],
+    bold: ["M7 5h6a3.5 3.5 0 0 1 0 7H7z", "M7 12h7a3.5 3.5 0 0 1 0 7H7z"],
+    chevronDown: ["M6 9l6 6 6-6"],
+    chevronLeft: ["M15 18l-6-6 6-6"],
+    chevronRight: ["M9 18l6-6-6-6"],
+    chevronUp: ["M18 15l-6-6-6 6"],
+    check: ["M20 6 9 17l-5-5"],
+    code: ["M9 18 3 12l6-6", "M15 6l6 6-6 6"],
+    eraser: ["M7 21h10", "M17 3 4 16l5 5 13-13z", "M14 6l4 4"],
+    fileCode: [
+        "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z",
+        "M14 2v6h6",
+        "M10 13l-2 2 2 2",
+        "M14 17l2-2-2-2",
+    ],
+    heading: ["M6 5v14", "M18 5v14", "M6 12h12"],
+    image: ["M5 5h14v14H5z", "M8 15l3-3 2 2 3-4 3 5", "M9 9h.01"],
+    italic: ["M10 5h8", "M6 19h8", "M14 5l-4 14"],
+    link: [
+        "M10 13a5 5 0 0 0 7.07 0l2-2a5 5 0 0 0-7.07-7.07l-1.1 1.1",
+        "M14 11a5 5 0 0 0-7.07 0l-2 2A5 5 0 0 0 12 20.07l1.1-1.1",
+    ],
+    list: [
+        "M8 6h13",
+        "M8 12h13",
+        "M8 18h13",
+        "M3 6h.01",
+        "M3 12h.01",
+        "M3 18h.01",
+    ],
+    listOrdered: [
+        "M10 6h11",
+        "M10 12h11",
+        "M10 18h11",
+        "M4 6h1v4",
+        "M4 10h2",
+        "M4 14a2 2 0 0 1 2 2c0 1-2 2-2 4h3",
+    ],
+    palette: [
+        "M12 3a9 9 0 0 0 0 18h1.5a1.8 1.8 0 0 0 1.2-3.1 1.8 1.8 0 0 1 1.2-3.1H18a6 6 0 0 0 0-12z",
+        "M7.5 10h.01",
+        "M10 6.5h.01",
+        "M14 6.5h.01",
+        "M16.5 10h.01",
+    ],
+    paragraph: ["M13 5v14", "M17 5v14", "M7 5h8a4 4 0 0 1 0 8H7z"],
+    quote: ["M8 11H5a3 3 0 0 1 3-3v8", "M19 11h-3a3 3 0 0 1 3-3v8"],
+    redo: ["M21 7v6h-6", "M21 13a8 8 0 1 1-2.34-5.66"],
+    settings: [
+        "M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z",
+        "M19.4 15a1.8 1.8 0 0 0 .36 1.98l.04.04a2.18 2.18 0 0 1-3.08 3.08l-.04-.04a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1 1.62V21a2.2 2.2 0 0 1-4.4 0v-.06a1.8 1.8 0 0 0-1-1.62 1.8 1.8 0 0 0-1.98.36l-.04.04A2.18 2.18 0 0 1 3.2 16.64l.04-.04A1.8 1.8 0 0 0 3.6 14.6a1.8 1.8 0 0 0-1.62-1H2a2.2 2.2 0 0 1 0-4.4h.06a1.8 1.8 0 0 0 1.62-1 1.8 1.8 0 0 0-.36-1.98l-.04-.04A2.18 2.18 0 0 1 6.36 3.1l.04.04a1.8 1.8 0 0 0 1.98.36h.08A1.8 1.8 0 0 0 9.4 1.88V1.8a2.2 2.2 0 0 1 4.4 0v.06a1.8 1.8 0 0 0 1 1.62 1.8 1.8 0 0 0 1.98-.36l.04-.04A2.18 2.18 0 0 1 19.9 6.16l-.04.04a1.8 1.8 0 0 0-.36 1.98v.08a1.8 1.8 0 0 0 1.62.94h.08a2.2 2.2 0 0 1 0 4.4h-.06A1.8 1.8 0 0 0 19.4 15Z",
+    ],
+    star: [
+        "M12 2l3.09 6.26 6.91 1-5 4.87 1.18 6.87L12 17.77 5.82 21 7 14.13l-5-4.87 6.91-1L12 2Z",
+    ],
+    strikethrough: [
+        "M5 12h14",
+        "M16 6.5A4 4 0 0 0 12.5 5H11a3 3 0 0 0-.7 5.9",
+        "M8 17.5A4.2 4.2 0 0 0 11.5 19H13a3 3 0 0 0 .7-5.9",
+    ],
+    table: ["M4 5h16v14H4z", "M4 11h16", "M10 5v14"],
+    trash: ["M3 6h18", "M8 6V4h8v2", "M6 6l1 15h10l1-15", "M10 11v6", "M14 11v6"],
+    type: ["M4 7V5h16v2", "M12 5v14", "M8 19h8"],
+    underline: ["M7 5v6a5 5 0 0 0 10 0V5", "M5 21h14"],
+    undo: ["M3 7v6h6", "M3 13a8 8 0 1 0 2.34-5.66"],
+    uploadCloud: [
+        "M16 16l-4-4-4 4",
+        "M12 12v9",
+        "M20 16.6A5 5 0 0 0 18 7h-1.26A8 8 0 1 0 4 15.25",
+    ],
+    video: ["M4 6h11v12H4z", "M15 10l5-3v10l-5-3z"],
+    x: ["M18 6 6 18", "M6 6l12 12"],
+};
+function classIcon(name, className = "cc-icon") {
+    return h("svg", {
+        "aria-hidden": "true",
+        class: className,
+        fill: name === "star" ? "currentColor" : "none",
+        focusable: "false",
+        viewBox: "0 0 24 24",
+    }, classIconPaths[name].map((d) => h("path", {
+        d,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": name === "star" ? 0 : 2,
+        stroke: "currentColor",
+    })));
+}
+function resolveClassKitThemeName(theme) {
+    var _a;
+    if (typeof theme === "string")
+        return theme;
+    return (_a = theme === null || theme === void 0 ? void 0 : theme.name) !== null && _a !== void 0 ? _a : "minimal";
+}
+function applyDocumentTheme(themeName) {
+    if (typeof document === "undefined")
+        return undefined;
+    const root = document.documentElement;
+    const previousTheme = root.getAttribute("data-cc-theme");
+    const previousPage = root.getAttribute("data-cc-theme-page");
+    root.setAttribute("data-cc-theme", themeName);
+    root.setAttribute("data-cc-theme-page", "true");
+    return () => {
+        if (previousTheme === null)
+            root.removeAttribute("data-cc-theme");
+        else
+            root.setAttribute("data-cc-theme", previousTheme);
+        if (previousPage === null)
+            root.removeAttribute("data-cc-theme-page");
+        else
+            root.setAttribute("data-cc-theme-page", previousPage);
+    };
+}
+defineComponent({
+    name: "ClassConfigProvider",
+    props: {
+        applyGlobalTheme: {
+            type: Boolean,
+            default: true,
+        },
+        class: {
+            type: String,
+            default: "",
+        },
+        locale: {
+            type: Object,
+            default: undefined,
+        },
+        style: {
+            type: [String, Object, Array],
+            default: undefined,
+        },
+        theme: {
+            type: [String, Object],
+            default: "minimal",
+        },
+    },
+    setup(props, { slots }) {
+        const version = ref(0);
+        let restoreDocumentTheme;
+        const applyConfig = () => {
+            configureClassComponents({
+                locale: props.locale,
+                theme: props.theme,
+            });
+            version.value += 1;
+        };
+        const applyGlobalTheme = () => {
+            restoreDocumentTheme === null || restoreDocumentTheme === void 0 ? void 0 : restoreDocumentTheme();
+            restoreDocumentTheme = props.applyGlobalTheme
+                ? applyDocumentTheme(resolveClassKitThemeName(props.theme))
+                : undefined;
+        };
+        watch(() => [props.locale, props.theme], applyConfig, {
+            deep: true,
+            immediate: true,
+        });
+        watch(() => [props.applyGlobalTheme, props.theme], applyGlobalTheme, {
+            deep: true,
+            immediate: true,
+        });
+        onBeforeUnmount(() => {
+            restoreDocumentTheme === null || restoreDocumentTheme === void 0 ? void 0 : restoreDocumentTheme();
+        });
+        return () => {
+            var _a;
+            return h("div", {
+                class: ["cc-config-provider", props.class].filter(Boolean),
+                "data-cc-theme": resolveClassKitThemeName(props.theme),
+                style: props.style,
+            }, [
+                h("div", { key: version.value, class: "cc-config-provider__content" }, (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots)),
+            ]);
+        };
+    },
+});
+function resolveAnimation(animation, fallbackName) {
+    var _a, _b, _c, _d;
+    if (animation === false) {
+        return {
+            duration: 0,
+            easing: "ease",
+            enabled: false,
+            name: "none",
+        };
+    }
+    return {
+        duration: (_a = animation === null || animation === void 0 ? void 0 : animation.duration) !== null && _a !== void 0 ? _a : 180,
+        easing: (_b = animation === null || animation === void 0 ? void 0 : animation.easing) !== null && _b !== void 0 ? _b : "cubic-bezier(0.22, 0.8, 0.28, 1)",
+        enabled: (_c = animation === null || animation === void 0 ? void 0 : animation.enabled) !== null && _c !== void 0 ? _c : true,
+        name: (_d = animation === null || animation === void 0 ? void 0 : animation.name) !== null && _d !== void 0 ? _d : fallbackName,
+    };
+}
+function animationStyle(animation) {
+    return {
+        "--cc-animation-duration": `${animation.enabled ? animation.duration : 0}ms`,
+        "--cc-animation-easing": animation.easing,
+    };
+}
+function normalizeToastMaxVisible(maxVisible) {
+    if (typeof maxVisible !== "number" || !Number.isFinite(maxVisible))
+        return 3;
+    return Math.max(1, Math.min(6, Math.floor(maxVisible)));
+}
+function isToastTopPosition(position) {
+    return (position === "top" || position === "top-left" || position === "top-right");
+}
+const dynamicImportModule = (name) => new Function("name", "return import(name)")(name);
+function normalizeRichEditorUrl(value) {
+    var _a;
+    const url = (_a = value === null || value === void 0 ? void 0 : value.trim()) !== null && _a !== void 0 ? _a : "";
+    if (!url)
+        return "";
+    try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== "http:" && parsed.protocol !== "https:")
+            return "";
+        return parsed.toString();
+    }
+    catch (_b) {
+        return "";
+    }
+}
+function createRichEditorTableHtml() {
+    return [
+        '<table style="width: 100%; border-collapse: collapse;">',
+        "<tbody>",
+        "<tr><td>标题</td><td>内容</td></tr>",
+        "<tr><td>示例</td><td>可继续编辑</td></tr>",
+        "</tbody>",
+        "</table><p><br></p>",
+    ].join("");
+}
+function getRichEditorImageFiles(files) {
+    return Array.from(files !== null && files !== void 0 ? files : []).filter((file) => file.type.startsWith("image/"));
+}
+function resolveRichEditorUploadUrl(payload) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (typeof payload === "string")
+        return payload;
+    if (!payload || typeof payload !== "object")
+        return "";
+    const record = payload;
+    const data = record.data;
+    return String((_h = (_g = (_f = (_e = (_d = (_c = (_b = (_a = record.url) !== null && _a !== void 0 ? _a : record.href) !== null && _b !== void 0 ? _b : record.src) !== null && _c !== void 0 ? _c : record.path) !== null && _d !== void 0 ? _d : data === null || data === void 0 ? void 0 : data.url) !== null && _e !== void 0 ? _e : data === null || data === void 0 ? void 0 : data.href) !== null && _f !== void 0 ? _f : data === null || data === void 0 ? void 0 : data.src) !== null && _g !== void 0 ? _g : data === null || data === void 0 ? void 0 : data.path) !== null && _h !== void 0 ? _h : "");
+}
+async function postRichEditorImage(file, uploadUrl, uploadHeaders) {
+    const formData = new FormData();
+    formData.append("file", file);
+    const response = await fetch(uploadUrl, {
+        body: formData,
+        credentials: "include",
+        headers: uploadHeaders,
+        method: "POST",
+    });
+    if (!response.ok) {
+        throw new Error("图片上传失败，请重试");
+    }
+    const payload = await response.json().catch(() => undefined);
+    const url = resolveRichEditorUploadUrl(payload);
+    if (!url) {
+        throw new Error("图片上传失败，请重试");
+    }
+    return { url };
+}
+const ClassRichEditor = /*#__PURE__*/ defineComponent({
+    name: "ClassRichEditor",
+    props: {
+        className: String,
+        disabled: Boolean,
+        height: {
+            type: Number,
+            default: 400,
+        },
+        onError: Function,
+        placeholder: {
+            type: String,
+            default: "请输入内容",
+        },
+        readOnly: Boolean,
+        uploadHeaders: Object,
+        uploadImage: Function,
+        uploadUrl: String,
+        value: {
+            type: String,
+            default: "",
+        },
+    },
+    emits: ["update:value", "change", "error"],
+    setup(props, { emit }) {
+        const controller = new RichEditorController({ html: props.value });
+        const html = ref(controller.getState().html);
+        const sourceMode = ref(false);
+        const uploading = ref(false);
+        const notice = ref(null);
+        const wang = shallowRef(null);
+        const editor = shallowRef(null);
+        const fallbackEditor = ref(null);
+        const fileInput = ref(null);
+        const urlDialogInput = ref(null);
+        const fallbackSelection = shallowRef(null);
+        const urlDialog = ref(null);
+        const toastManager = new ToastManager();
+        const syncFallbackEditor = () => {
+            var _a;
+            const element = fallbackEditor.value;
+            if (!element || sourceMode.value || ((_a = wang.value) === null || _a === void 0 ? void 0 : _a.Editor))
+                return;
+            if (document.activeElement === element)
+                return;
+            if (element.innerHTML !== html.value)
+                element.innerHTML = html.value;
+        };
+        const emitError = (message) => {
+            var _a;
+            toastManager.show({ message, tone: "danger" });
+            (_a = props.onError) === null || _a === void 0 ? void 0 : _a.call(props, message);
+            emit("error", message);
+        };
+        const commitHtml = (nextHtml) => {
+            const state = controller.setHtml(nextHtml);
+            html.value = state.html;
+            emit("update:value", state.html);
+            emit("change", state.html);
+            return state.html;
+        };
+        const uploadHandler = async (file) => {
+            if (props.uploadImage)
+                return props.uploadImage(file);
+            if (props.uploadUrl) {
+                return postRichEditorImage(file, props.uploadUrl, props.uploadHeaders);
+            }
+            throw new Error("请配置图片上传接口");
+        };
+        const saveFallbackSelection = () => {
+            const element = fallbackEditor.value;
+            const selection = window.getSelection();
+            if (!element || !selection || selection.rangeCount === 0)
+                return;
+            const range = selection.getRangeAt(0);
+            if (!element.contains(range.commonAncestorContainer))
+                return;
+            fallbackSelection.value = range.cloneRange();
+        };
+        const restoreFallbackSelection = () => {
+            if (!fallbackSelection.value)
+                return;
+            const selection = window.getSelection();
+            selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
+            selection === null || selection === void 0 ? void 0 : selection.addRange(fallbackSelection.value);
+        };
+        const insertFallbackHtml = (nextHtml) => {
+            var _a;
+            (_a = fallbackEditor.value) === null || _a === void 0 ? void 0 : _a.focus();
+            restoreFallbackSelection();
+            document.execCommand("insertHTML", false, nextHtml);
+            if (fallbackEditor.value)
+                commitHtml(fallbackEditor.value.innerHTML);
+        };
+        const runFallbackCommand = (command, value) => {
+            var _a;
+            (_a = fallbackEditor.value) === null || _a === void 0 ? void 0 : _a.focus();
+            restoreFallbackSelection();
+            document.execCommand(command, false, value);
+            if (fallbackEditor.value)
+                commitHtml(fallbackEditor.value.innerHTML);
+        };
+        const deleteSelectedContent = () => {
+            var _a, _b, _c;
+            if (props.disabled)
+                return;
+            const currentEditor = editor.value;
+            if (currentEditor === null || currentEditor === void 0 ? void 0 : currentEditor.deleteFragment) {
+                (_a = currentEditor.focus) === null || _a === void 0 ? void 0 : _a.call(currentEditor);
+                currentEditor.deleteFragment();
+                const nextHtml = (_b = currentEditor.getHtml) === null || _b === void 0 ? void 0 : _b.call(currentEditor);
+                if (typeof nextHtml === "string")
+                    commitHtml(nextHtml);
+                return;
+            }
+            (_c = fallbackEditor.value) === null || _c === void 0 ? void 0 : _c.focus();
+            restoreFallbackSelection();
+            document.execCommand("delete");
+            if (fallbackEditor.value)
+                commitHtml(fallbackEditor.value.innerHTML);
+        };
+        const handleFallbackUpload = async (files) => {
+            const images = getRichEditorImageFiles(files);
+            if (images.length === 0)
+                return;
+            uploading.value = true;
+            notice.value = { text: "图片上传中...", type: "loading" };
+            try {
+                for (const file of images) {
+                    const result = await controller.uploadImage(file, uploadHandler);
+                    insertFallbackHtml(`<p><img src="${result.url}" alt="${file.name}" /></p>`);
+                }
+                notice.value = { text: "图片上传完成", type: "success" };
+            }
+            catch (error) {
+                emitError(error instanceof Error ? error.message : "图片上传失败，请重试");
+            }
+            finally {
+                uploading.value = false;
+                if (fileInput.value)
+                    fileInput.value.value = "";
+            }
+        };
+        const openFallbackUrlDialog = (kind) => {
+            saveFallbackSelection();
+            const locale = getClassComponentsLocale();
+            const dialogMap = {
+                image: {
+                    icon: "image",
+                    placeholder: locale.richEditorInsertImagePlaceholder,
+                    title: locale.richEditorInsertImageTitle,
+                },
+                link: {
+                    icon: "link",
+                    placeholder: locale.richEditorInsertLinkPlaceholder,
+                    title: locale.richEditorInsertLinkTitle,
+                },
+                video: {
+                    icon: "video",
+                    placeholder: locale.richEditorInsertVideoPlaceholder,
+                    title: locale.richEditorInsertVideoTitle,
+                },
+            };
+            urlDialog.value = { ...dialogMap[kind], kind, value: "" };
+            void nextTick(() => { var _a; return (_a = urlDialogInput.value) === null || _a === void 0 ? void 0 : _a.focus(); });
+        };
+        const closeFallbackUrlDialog = () => {
+            urlDialog.value = null;
+        };
+        const submitFallbackUrlDialog = () => {
+            var _a;
+            if (!urlDialog.value)
+                return;
+            const dialog = urlDialog.value;
+            const url = normalizeRichEditorUrl(dialog.value);
+            if (!url) {
+                emitError(getClassComponentsLocale().richEditorInvalidUrlText);
+                return;
+            }
+            if (dialog.kind === "image") {
+                insertFallbackHtml(`<p><img src="${url}" alt="" /></p>`);
+            }
+            else if (dialog.kind === "video") {
+                insertFallbackHtml(`<p><video controls src="${url}"></video></p>`);
+            }
+            else {
+                restoreFallbackSelection();
+                const text = ((_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) || url;
+                insertFallbackHtml(`<a href="${url}" target="_blank" rel="noopener noreferrer">${text}</a>`);
+            }
+            urlDialog.value = null;
+        };
+        watch(() => props.value, (nextValue) => {
+            const nextHtml = controller.setHtml(nextValue !== null && nextValue !== void 0 ? nextValue : "").html;
+            if (html.value !== nextHtml)
+                html.value = nextHtml;
+        });
+        watch(html, () => void nextTick(syncFallbackEditor), { flush: "post" });
+        watch(() => { var _a; return [sourceMode.value, (_a = wang.value) === null || _a === void 0 ? void 0 : _a.Editor]; }, () => void nextTick(syncFallbackEditor), { flush: "post" });
+        watch(() => [props.disabled, props.readOnly], () => {
+            var _a, _b, _c, _d;
+            if (props.disabled || props.readOnly)
+                (_b = (_a = editor.value) === null || _a === void 0 ? void 0 : _a.disable) === null || _b === void 0 ? void 0 : _b.call(_a);
+            else
+                (_d = (_c = editor.value) === null || _c === void 0 ? void 0 : _c.enable) === null || _d === void 0 ? void 0 : _d.call(_c);
+        });
+        onMounted(() => {
+            syncFallbackEditor();
+            dynamicImportModule("@wangeditor/editor-for-vue")
+                .then((module) => {
+                wang.value = module;
+            })
+                .catch(() => {
+                wang.value = null;
+            });
+        });
+        onBeforeUnmount(() => {
+            var _a, _b;
+            (_b = (_a = editor.value) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a);
+            editor.value = null;
+        });
+        const toolbarConfig = {
+            toolbarKeys: [
+                "bold",
+                "italic",
+                "underline",
+                "through",
+                "color",
+                "bgColor",
+                "fontSize",
+                "justifyLeft",
+                "justifyCenter",
+                "justifyRight",
+                "justifyJustify",
+                "numberedList",
+                "bulletedList",
+                "lineHeight",
+                "indent",
+                "delIndent",
+                "blockquote",
+                "codeBlock",
+                "uploadImage",
+                "insertImage",
+                "insertVideo",
+                "insertTable",
+                "insertLink",
+                "unLink",
+                "undo",
+                "redo",
+                "clearStyle",
+            ],
+        };
+        const editorConfig = {
+            MENU_CONF: {
+                uploadImage: {
+                    allowedFileTypes: [
+                        "image/jpeg",
+                        "image/jpg",
+                        "image/png",
+                        "image/gif",
+                        "image/webp",
+                    ],
+                    customUpload: async (file, insertFn) => {
+                        uploading.value = true;
+                        notice.value = { text: "图片上传中...", type: "loading" };
+                        try {
+                            const result = await controller.uploadImage(file, uploadHandler);
+                            insertFn(result.url, file.name, result.url);
+                            notice.value = { text: "图片上传完成", type: "success" };
+                        }
+                        catch (error) {
+                            emitError(error instanceof Error ? error.message : "图片上传失败，请重试");
+                        }
+                        finally {
+                            uploading.value = false;
+                        }
+                    },
+                },
+            },
+            autoFocus: false,
+            placeholder: props.placeholder,
+            readOnly: props.disabled,
+            customPaste: (_editor, event) => {
+                var _a;
+                const pastedHtml = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("text/html");
+                if (!pastedHtml)
+                    return true;
+                event.preventDefault();
+                _editor.dangerouslyInsertHtml(controller.sanitize(pastedHtml));
+                return false;
+            },
+        };
+        const toolTip = (content, child) => h(ClassTooltip, { content, placement: "bottom" }, { default: () => child });
+        const toolIcon = (icon) => h("span", { class: "cc-rich-editor__summary-icon" }, [
+            classIcon(icon),
+            classIcon("chevronDown", "cc-rich-editor__chevron"),
+        ]);
+        const toolGroup = (label, icon, children) => h("div", {
+            class: "cc-rich-editor__tool-group",
+            "data-disabled": props.disabled ? "true" : "false",
+        }, [
+            toolTip(label, h("button", {
+                "aria-haspopup": "menu",
+                "aria-label": label,
+                class: "cc-rich-editor__tool-trigger",
+                disabled: props.disabled,
+                type: "button",
+            }, [toolIcon(icon)])),
+            h("div", { class: "cc-rich-editor__tool-menu", role: "menu" }, children),
+        ]);
+        return () => {
+            var _a, _b, _c;
+            const locale = getClassComponentsLocale();
+            const rootClass = [
+                "cc-rich-editor",
+                props.readOnly ? "cc-rich-editor--readonly" : "",
+                props.disabled ? "cc-rich-editor--disabled" : "",
+                (_a = props.className) !== null && _a !== void 0 ? _a : "",
+            ]
+                .filter(Boolean)
+                .join(" ");
+            if (props.readOnly) {
+                return h("div", { class: rootClass }, [
+                    h("div", {
+                        class: "cc-rich-editor__preview",
+                        innerHTML: html.value,
+                        style: { minHeight: `${props.height}px` },
+                    }),
+                ]);
+            }
+            const toolbar = ((_b = wang.value) === null || _b === void 0 ? void 0 : _b.Toolbar) && editor.value
+                ? h(wang.value.Toolbar, {
+                    defaultConfig: toolbarConfig,
+                    editor: editor.value,
+                    mode: "default",
+                })
+                : h("div", { class: "cc-rich-editor__fallback-toolbar" }, [
+                    toolTip("加粗", h("button", {
+                        "aria-label": "加粗",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("bold"),
+                    }, [classIcon("bold")])),
+                    toolTip("斜体", h("button", {
+                        "aria-label": "斜体",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("italic"),
+                    }, [classIcon("italic")])),
+                    toolTip("下划线", h("button", {
+                        "aria-label": "下划线",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("underline"),
+                    }, [classIcon("underline")])),
+                    toolTip("删除线", h("button", {
+                        "aria-label": "删除线",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("strikeThrough"),
+                    }, [classIcon("strikethrough")])),
+                    toolTip("文字色", h("label", {
+                        "aria-label": "文字色",
+                        class: "cc-rich-editor__color-tool",
+                        "data-disabled": props.disabled ? "true" : "false",
+                    }, [
+                        classIcon("type"),
+                        h("input", {
+                            disabled: props.disabled,
+                            type: "color",
+                            onChange: (event) => runFallbackCommand("foreColor", event.currentTarget.value),
+                        }),
+                    ])),
+                    toolTip("背景色", h("label", {
+                        "aria-label": "背景色",
+                        class: "cc-rich-editor__color-tool cc-rich-editor__color-tool--background",
+                        "data-disabled": props.disabled ? "true" : "false",
+                    }, [
+                        classIcon("palette"),
+                        h("input", {
+                            disabled: props.disabled,
+                            type: "color",
+                            onChange: (event) => runFallbackCommand("hiliteColor", event.currentTarget.value),
+                        }),
+                    ])),
+                    toolGroup("段落和字号", "type", [
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("formatBlock", "p"),
+                        }, [classIcon("paragraph"), h("span", "正文")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("formatBlock", "h2"),
+                        }, [classIcon("heading"), h("span", "标题")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("fontSize", "2"),
+                        }, [classIcon("type"), h("span", "小字")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("fontSize", "4"),
+                        }, [classIcon("type"), h("span", "大字")]),
+                    ]),
+                    toolGroup("对齐", "alignLeft", [
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("justifyLeft"),
+                        }, [classIcon("alignLeft"), h("span", "左对齐")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("justifyCenter"),
+                        }, [classIcon("alignCenter"), h("span", "居中")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("justifyRight"),
+                        }, [classIcon("alignRight"), h("span", "右对齐")]),
+                    ]),
+                    toolGroup("段落功能", "list", [
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("insertOrderedList"),
+                        }, [classIcon("listOrdered"), h("span", "有序列表")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("insertUnorderedList"),
+                        }, [classIcon("list"), h("span", "无序列表")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("formatBlock", "blockquote"),
+                        }, [classIcon("quote"), h("span", "引用")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("formatBlock", "pre"),
+                        }, [classIcon("code"), h("span", "代码块")]),
+                    ]),
+                    toolGroup("插入", "image", [
+                        h("button", {
+                            disabled: props.disabled || uploading.value,
+                            type: "button",
+                            onClick: () => { var _a; return (_a = fileInput.value) === null || _a === void 0 ? void 0 : _a.click(); },
+                        }, [
+                            classIcon("uploadCloud"),
+                            h("span", uploading.value ? "上传中" : "本地图片"),
+                        ]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => openFallbackUrlDialog("image"),
+                        }, [classIcon("image"), h("span", "网络图片")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => openFallbackUrlDialog("video"),
+                        }, [classIcon("video"), h("span", "视频链接")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => insertFallbackHtml(createRichEditorTableHtml()),
+                        }, [classIcon("table"), h("span", "表格")]),
+                        h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => openFallbackUrlDialog("link"),
+                        }, [classIcon("link"), h("span", "链接")]),
+                    ]),
+                    toolTip("清除格式", h("button", {
+                        "aria-label": "清除格式",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("removeFormat"),
+                    }, [classIcon("eraser")])),
+                    toolTip("撤销", h("button", {
+                        "aria-label": "撤销",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("undo"),
+                    }, [classIcon("undo")])),
+                    toolTip("恢复撤销", h("button", {
+                        "aria-label": "恢复撤销",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("redo"),
+                    }, [classIcon("redo")])),
+                    h("input", {
+                        accept: "image/jpeg,image/jpg,image/png,image/gif,image/webp",
+                        hidden: true,
+                        multiple: true,
+                        ref: fileInput,
+                        type: "file",
+                        onChange: (event) => void handleFallbackUpload(event.currentTarget.files),
+                    }),
+                ]);
+            return h("div", { class: rootClass }, [
+                h("div", { class: "cc-rich-editor__toolbar-row" }, [
+                    toolbar,
+                    h("div", { class: "cc-rich-editor__toolbar-actions" }, [
+                        toolTip("删除选中", h("button", {
+                            "aria-label": "删除选中",
+                            class: "cc-rich-editor__source-toggle",
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: deleteSelectedContent,
+                            onMousedown: (event) => event.preventDefault(),
+                        }, [classIcon("x")])),
+                        toolTip(sourceMode.value ? "预览" : "源码", h("button", {
+                            "aria-label": sourceMode.value ? "预览" : "源码",
+                            class: "cc-rich-editor__source-toggle",
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => {
+                                sourceMode.value = !sourceMode.value;
+                            },
+                        }, [classIcon(sourceMode.value ? "image" : "fileCode")])),
+                        toolTip("清空", h("button", {
+                            "aria-label": "清空",
+                            class: "cc-rich-editor__source-toggle",
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => commitHtml(""),
+                        }, [classIcon("trash")])),
+                    ]),
+                ]),
+                notice.value
+                    ? h("div", {
+                        class: "cc-rich-editor__notice",
+                        "data-type": notice.value.type,
+                        role: "status",
+                    }, notice.value.text)
+                    : null,
+                h(ClassToastViewport, {
+                    className: "cc-toast-viewport cc-rich-editor__toast-viewport",
+                    manager: toastManager,
+                    maxVisible: 3,
+                    position: "top-right",
+                }),
+                urlDialog.value
+                    ? h("div", {
+                        "aria-modal": "true",
+                        class: "cc-rich-editor__url-modal",
+                        role: "dialog",
+                    }, [
+                        h("div", { class: "cc-rich-editor__url-panel" }, [
+                            h("div", { class: "cc-rich-editor__url-header" }, [
+                                h("span", { class: "cc-rich-editor__url-title" }, [
+                                    classIcon(urlDialog.value.icon),
+                                    urlDialog.value.title,
+                                ]),
+                                h("button", {
+                                    "aria-label": "关闭",
+                                    class: "cc-rich-editor__url-close",
+                                    type: "button",
+                                    onClick: closeFallbackUrlDialog,
+                                }, [classIcon("x")]),
+                            ]),
+                            h("label", { class: "cc-rich-editor__url-field" }, [
+                                h("span", locale.richEditorUrlFieldLabel),
+                                h("input", {
+                                    ref: urlDialogInput,
+                                    placeholder: urlDialog.value.placeholder,
+                                    type: "url",
+                                    value: urlDialog.value.value,
+                                    onInput: (event) => {
+                                        if (!urlDialog.value)
+                                            return;
+                                        urlDialog.value = {
+                                            ...urlDialog.value,
+                                            value: event.currentTarget
+                                                .value,
+                                        };
+                                    },
+                                    onKeydown: (event) => {
+                                        if (event.key === "Enter")
+                                            submitFallbackUrlDialog();
+                                        if (event.key === "Escape")
+                                            closeFallbackUrlDialog();
+                                    },
+                                }),
+                            ]),
+                            h("div", { class: "cc-rich-editor__url-actions" }, [
+                                h("button", {
+                                    type: "button",
+                                    onClick: closeFallbackUrlDialog,
+                                }, locale.richEditorCancelText),
+                                h("button", {
+                                    type: "button",
+                                    onClick: submitFallbackUrlDialog,
+                                }, locale.richEditorInsertText),
+                            ]),
+                        ]),
+                    ])
+                    : null,
+                sourceMode.value
+                    ? h("textarea", {
+                        class: "cc-rich-editor__source",
+                        disabled: props.disabled,
+                        onInput: (event) => commitHtml(event.target.value),
+                        placeholder: props.placeholder,
+                        style: { height: `${props.height}px` },
+                        value: html.value,
+                    })
+                    : ((_c = wang.value) === null || _c === void 0 ? void 0 : _c.Editor)
+                        ? h(wang.value.Editor, {
+                            defaultConfig: editorConfig,
+                            mode: "default",
+                            onChange: (nextEditor) => commitHtml(nextEditor.getHtml()),
+                            onCreated: (nextEditor) => {
+                                var _a;
+                                editor.value = nextEditor;
+                                if (props.disabled)
+                                    (_a = nextEditor.disable) === null || _a === void 0 ? void 0 : _a.call(nextEditor);
+                            },
+                            "onUpdate:modelValue": (nextHtml) => commitHtml(nextHtml),
+                            modelValue: html.value,
+                            style: { height: `${props.height}px`, overflowY: "auto" },
+                        })
+                        : h("div", {
+                            class: "cc-rich-editor__fallback-editor",
+                            contenteditable: !props.disabled,
+                            "data-placeholder": props.placeholder,
+                            onBlur: (event) => commitHtml(event.currentTarget.innerHTML),
+                            onKeyup: saveFallbackSelection,
+                            onMouseup: saveFallbackSelection,
+                            onDragover: (event) => {
+                                var _a;
+                                if (props.disabled ||
+                                    getRichEditorImageFiles((_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files)
+                                        .length === 0)
+                                    return;
+                                event.preventDefault();
+                            },
+                            onDrop: (event) => {
+                                var _a;
+                                const files = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+                                if (props.disabled ||
+                                    getRichEditorImageFiles(files).length === 0)
+                                    return;
+                                event.preventDefault();
+                                void handleFallbackUpload(files !== null && files !== void 0 ? files : null);
+                            },
+                            onInput: (event) => commitHtml(event.currentTarget.innerHTML),
+                            onPaste: (event) => {
+                                var _a, _b, _c, _d;
+                                const imageFiles = getRichEditorImageFiles((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.files);
+                                if (imageFiles.length > 0) {
+                                    event.preventDefault();
+                                    void handleFallbackUpload((_c = (_b = event.clipboardData) === null || _b === void 0 ? void 0 : _b.files) !== null && _c !== void 0 ? _c : null);
+                                    return;
+                                }
+                                const pastedHtml = (_d = event.clipboardData) === null || _d === void 0 ? void 0 : _d.getData("text/html");
+                                if (!pastedHtml)
+                                    return;
+                                event.preventDefault();
+                                document.execCommand("insertHTML", false, controller.sanitize(pastedHtml));
+                                if (fallbackEditor.value)
+                                    commitHtml(fallbackEditor.value.innerHTML);
+                            },
+                            ref: fallbackEditor,
+                            role: "textbox",
+                            style: { minHeight: `${props.height}px` },
+                        }),
+            ]);
+        };
+    },
+});
+const ClassTooltip = /*#__PURE__*/ defineComponent({
+    name: "ClassTooltip",
+    inheritAttrs: false,
+    props: {
+        content: {
+            type: String,
+            required: true,
+        },
+        animation: {
+            type: [Object, Boolean],
+            default: undefined,
+        },
+        placement: {
+            type: String,
+            default: "top",
+        },
+        trigger: {
+            type: String,
+            default: "hover",
+        },
+        autoAdjust: {
+            type: Boolean,
+            default: true,
+        },
+        closeOnEsc: {
+            type: Boolean,
+            default: true,
+        },
+        closeOnOutsideClick: {
+            type: Boolean,
+            default: true,
+        },
+        portal: {
+            type: Boolean,
+            default: true,
+        },
+        className: String,
+    },
+    setup(props, { attrs, slots }) {
+        const rootRef = ref(null);
+        const contentRef = ref(null);
+        const contentId = `cc-tooltip-${++tooltipIdSeed}`;
+        const controller = new TooltipController();
+        const open = ref(controller.isOpen());
+        const safePlacement = ref(props.placement);
+        const anchorStyle = ref({
+            height: 0,
+            left: -9999,
+            top: -9999,
+            width: 0,
+        });
+        const updatePlacement = () => {
+            if (rootRef.value) {
+                const rect = rootRef.value.getBoundingClientRect();
+                anchorStyle.value = {
+                    height: rect.height,
+                    left: rect.left,
+                    top: rect.top,
+                    width: rect.width,
+                };
+            }
+            if (!props.autoAdjust || !rootRef.value || !contentRef.value) {
+                safePlacement.value = props.placement;
+                return;
+            }
+            safePlacement.value = getSafeTooltipPlacement(rootRef.value.getBoundingClientRect(), contentRef.value.getBoundingClientRect(), props.placement);
+        };
+        watch(open, (nextOpen) => {
+            if (nextOpen)
+                requestAnimationFrame(updatePlacement);
+        });
+        watch(open, (nextOpen, _previous, onCleanup) => {
+            if (!nextOpen ||
+                props.trigger !== "click" ||
+                typeof document === "undefined")
+                return;
+            const handlePointerDown = (event) => {
+                var _a, _b;
+                if (!props.closeOnOutsideClick ||
+                    ((_a = rootRef.value) === null || _a === void 0 ? void 0 : _a.contains(event.target)) ||
+                    ((_b = contentRef.value) === null || _b === void 0 ? void 0 : _b.contains(event.target)))
+                    return;
+                controller.close();
+            };
+            const handleKeydown = (event) => {
+                if (!props.closeOnEsc || event.key !== "Escape")
+                    return;
+                event.preventDefault();
+                controller.close();
+            };
+            document.addEventListener("pointerdown", handlePointerDown, true);
+            document.addEventListener("keydown", handleKeydown, true);
+            onCleanup(() => {
+                document.removeEventListener("pointerdown", handlePointerDown, true);
+                document.removeEventListener("keydown", handleKeydown, true);
+            });
+        });
+        const unsubscribe = controller.subscribe((state) => {
+            open.value = state.open;
+        });
+        onBeforeUnmount(() => {
+            unsubscribe();
+            controller.destroy();
+        });
+        watch(() => props.placement, () => updatePlacement());
+        return () => {
+            var _a;
+            const openEvents = props.trigger === "click"
+                ? {
+                    onClick: () => {
+                        controller.toggle();
+                    },
+                }
+                : {
+                    onBlur: () => {
+                        controller.close();
+                    },
+                    onFocus: () => {
+                        controller.open();
+                    },
+                    onMouseenter: () => {
+                        controller.open();
+                    },
+                    onMouseleave: () => {
+                        controller.close();
+                    },
+                };
+            const motion = resolveAnimation(props.animation, "fade");
+            const tooltipClass = [
+                "cc-tooltip",
+                `cc-tooltip--${safePlacement.value}`,
+                props.className,
+            ];
+            const tooltipContent = h("span", {
+                class: "cc-tooltip__content",
+                id: contentId,
+                ref: contentRef,
+                role: "tooltip",
+            }, props.content);
+            const rootNode = h("span", {
+                ...attrs,
+                ...openEvents,
+                "aria-describedby": open.value ? contentId : undefined,
+                class: tooltipClass,
+                "data-animation": motion.name,
+                "data-open": open.value,
+                ref: rootRef,
+                style: animationStyle(motion),
+                tabindex: props.trigger === "click" ? 0 : undefined,
+            }, [(_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots), props.portal ? null : tooltipContent]);
+            if (!props.portal)
+                return rootNode;
+            const portalNode = open.value || anchorStyle.value.left > -9999
+                ? h("span", {
+                    class: [...tooltipClass, "cc-tooltip--portal"],
+                    "data-animation": motion.name,
+                    "data-open": open.value,
+                    style: {
+                        ...animationStyle(motion),
+                        height: `${anchorStyle.value.height}px`,
+                        left: `${anchorStyle.value.left}px`,
+                        top: `${anchorStyle.value.top}px`,
+                        width: `${anchorStyle.value.width}px`,
+                    },
+                }, [tooltipContent])
+                : null;
+            return [
+                rootNode,
+                portalNode ? h(Teleport, { to: "body" }, portalNode) : null,
+            ];
+        };
+    },
+});
+const ClassToastViewport = /*#__PURE__*/ defineComponent({
+    name: "ClassToastViewport",
+    inheritAttrs: false,
+    props: {
+        animation: {
+            type: [Object, Boolean],
+            default: undefined,
+        },
+        manager: Object,
+        maxVisible: {
+            type: Number,
+            default: undefined,
+        },
+        position: {
+            type: String,
+            default: "top-right",
+        },
+        className: {
+            type: String,
+            default: "cc-toast-viewport",
+        },
+    },
+    setup(props, { attrs, slots }) {
+        var _a;
+        const activeManager = shallowRef((_a = props.manager) !== null && _a !== void 0 ? _a : defaultToastManager);
+        const items = shallowRef(activeManager.value.getToasts());
+        const getVisibleItems = (source) => {
+            const positionItems = source.filter((item) => item.position === props.position);
+            const visible = positionItems.slice(Math.max(0, positionItems.length - normalizeToastMaxVisible(props.maxVisible)));
+            return isToastTopPosition(props.position)
+                ? [...visible].reverse()
+                : visible;
+        };
+        const renderedItems = shallowRef(getVisibleItems(items.value).map((item) => ({
+            item,
+            motion: false,
+            state: "enter",
+        })));
+        const toastNodes = new Map();
+        let rects = new Map();
+        let timer;
+        let frame = 0;
+        let flipFrame = 0;
+        const setToastNode = (id, node) => {
+            if (node instanceof HTMLElement)
+                toastNodes.set(id, node);
+            else
+                toastNodes.delete(id);
+        };
+        const runFlip = async (motion) => {
+            if (flipFrame)
+                cancelAnimationFrame(flipFrame);
+            await nextTick();
+            const previousRects = rects;
+            const nextRects = new Map();
+            const activeIds = new Set(renderedItems.value
+                .filter((entry) => entry.motion && entry.state !== "exit")
+                .map(({ item }) => item.id));
+            toastNodes.forEach((node, id) => {
+                if (!activeIds.has(id))
+                    return;
+                const rect = node.getBoundingClientRect();
+                nextRects.set(id, rect);
+                const previous = previousRects.get(id);
+                if (!previous)
+                    return;
+                const deltaY = previous.top - rect.top;
+                if (Math.abs(deltaY) < 1)
+                    return;
+                node.style.transition = "none";
+                node.style.setProperty("--cc-toast-stack-offset", `${deltaY}px`);
+                node.style.willChange = "transform, opacity";
+            });
+            flipFrame = requestAnimationFrame(() => {
+                toastNodes.forEach((node, id) => {
+                    if (!nextRects.has(id))
+                        return;
+                    node.style.transition = `transform ${motion.duration}ms ${motion.easing}, opacity ${motion.duration}ms ${motion.easing}, margin ${motion.duration}ms ${motion.easing}`;
+                    node.style.removeProperty("--cc-toast-stack-offset");
+                    window.setTimeout(() => {
+                        node.style.transition = "";
+                        node.style.willChange = "";
+                    }, motion.duration);
+                });
+                flipFrame = 0;
+            });
+            rects = nextRects;
+        };
+        const syncRenderedItems = (nextItems) => {
+            if (frame)
+                cancelAnimationFrame(frame);
+            const motion = resolveAnimation(props.animation, "slide");
+            const currentIds = new Set(renderedItems.value.map(({ item }) => item.id));
+            const incomingIds = new Set(nextItems.map((item) => item.id));
+            const incomingById = new Map(nextItems.map((item) => [item.id, item]));
+            const enteringIds = nextItems
+                .filter((item) => !currentIds.has(item.id))
+                .map((item) => item.id);
+            const retainedOrExiting = renderedItems.value.map(({ item }) => {
+                var _a;
+                return ({
+                    item: (_a = incomingById.get(item.id)) !== null && _a !== void 0 ? _a : item,
+                    motion: !incomingIds.has(item.id),
+                    state: incomingIds.has(item.id)
+                        ? "enter"
+                        : "exit",
+                });
+            });
+            const entering = nextItems
+                .filter((item) => !currentIds.has(item.id))
+                .map((item) => ({ item, motion: true, state: "prepare" }));
+            renderedItems.value = [...retainedOrExiting, ...entering];
+            void runFlip(motion);
+            if (enteringIds.length) {
+                frame = requestAnimationFrame(() => {
+                    renderedItems.value = renderedItems.value.map((entry) => enteringIds.includes(entry.item.id)
+                        ? { ...entry, state: "enter" }
+                        : entry);
+                });
+                const clearMotion = () => {
+                    renderedItems.value = renderedItems.value.map((entry) => enteringIds.includes(entry.item.id) && entry.state === "enter"
+                        ? { ...entry, motion: false }
+                        : entry);
+                };
+                if (!motion.enabled || motion.duration <= 0)
+                    clearMotion();
+                else
+                    setTimeout(clearMotion, motion.duration);
+            }
+            if (!retainedOrExiting.some((entry) => entry.state === "exit"))
+                return;
+            if (timer)
+                clearTimeout(timer);
+            if (!motion.enabled || motion.duration <= 0) {
+                renderedItems.value = renderedItems.value.filter((entry) => entry.state !== "exit");
+                return;
+            }
+            timer = setTimeout(() => {
+                renderedItems.value = renderedItems.value.filter((entry) => entry.state !== "exit");
+            }, motion.duration);
+        };
+        let unsubscribe = () => { };
+        const subscribeManager = (nextManager) => {
+            unsubscribe();
+            activeManager.value = nextManager;
+            items.value = nextManager.getToasts();
+            syncRenderedItems(getVisibleItems(items.value));
+            unsubscribe = nextManager.subscribe((nextItems) => {
+                items.value = nextItems;
+                syncRenderedItems(getVisibleItems(nextItems));
+            });
+        };
+        subscribeManager(activeManager.value);
+        watch(() => props.manager, (nextManager) => {
+            subscribeManager(nextManager !== null && nextManager !== void 0 ? nextManager : defaultToastManager);
+        });
+        watch(() => [props.position, props.maxVisible], () => syncRenderedItems(getVisibleItems(items.value)));
+        onBeforeUnmount(() => {
+            if (timer)
+                clearTimeout(timer);
+            if (frame)
+                cancelAnimationFrame(frame);
+            if (flipFrame)
+                cancelAnimationFrame(flipFrame);
+            unsubscribe();
+        });
+        return () => {
+            const motion = resolveAnimation(props.animation, "slide");
+            const viewportNode = h("div", {
+                ...attrs,
+                "aria-live": "polite",
+                class: [props.className, `cc-toast-viewport--${props.position}`],
+                role: "status",
+                style: animationStyle(motion),
+            }, renderedItems.value.map(({ item, motion: isMotionActive, state }, index) => slots.default
+                ? slots.default({
+                    item,
+                    dismiss: () => activeManager.value.dismiss(item.id),
+                    state,
+                })
+                : h("article", {
+                    class: `cc-toast cc-toast--${item.tone}`,
+                    "data-animation": motion.name,
+                    "data-motion": isMotionActive ? "true" : "false",
+                    "data-state": state,
+                    key: item.id,
+                    style: {
+                        "--cc-toast-stack-index": index,
+                    },
+                    ref: (node) => {
+                        setToastNode(item.id, node instanceof Element ? node : null);
+                    },
+                }, [
+                    item.title
+                        ? h("strong", { class: "cc-toast__title" }, item.title)
+                        : null,
+                    h("span", { class: "cc-toast__message" }, item.message),
+                    h("button", {
+                        "aria-label": "Dismiss toast",
+                        class: "cc-toast__close",
+                        type: "button",
+                        onClick: () => activeManager.value.dismiss(item.id),
+                    }, classIcon("x")),
+                ])));
+            return h(Teleport, { to: "body" }, viewportNode);
+        };
+    },
+});
+
+export { ClassRichEditor };
+//# sourceMappingURL=rich-editor.js.map