@class-kit/vue 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -9,11 +9,56 @@ const rollingDigits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
 let tooltipIdSeed = 0;
 const defaultToastManager = /*#__PURE__*/ new core.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",
@@ -21,6 +66,22 @@ const classIconPaths = {
     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 getClassKitGlobal() {
@@ -386,6 +447,7 @@ const ClassForm = /*#__PURE__*/ vue.defineComponent({
     },
     setup(props, { slots }) {
         var _a;
+        const ownsController = !props.form;
         const controller = (_a = props.form) !== null && _a !== void 0 ? _a : new core.FormController({
             initialValues: props.initialValues,
             onSubmit: props.onSubmit,
@@ -396,7 +458,10 @@ const ClassForm = /*#__PURE__*/ vue.defineComponent({
             disabled: vue.computed(() => props.disabled),
             readOnly: vue.computed(() => props.readOnly || props.readonly),
         });
-        vue.onBeforeUnmount(() => controller.destroy());
+        vue.onBeforeUnmount(() => {
+            if (ownsController)
+                controller.destroy();
+        });
         return () => {
             var _a;
             return vue.h("form", {
@@ -638,22 +703,16 @@ const ClassPasswordInput = /*#__PURE__*/ vue.defineComponent({
                         viewBox: "0 0 24 24",
                     }, [
                         vue.h("path", {
-                            d: "M2.4 12s3.2-6.2 9.6-6.2S21.6 12 21.6 12s-3.2 6.2-9.6 6.2S2.4 12 2.4 12Z",
+                            d: "M3.2 12.1c1.9-3.35 4.75-5.05 8.8-5.05s6.9 1.7 8.8 5.05c-1.9 3.35-4.75 5.05-8.8 5.05s-6.9-1.7-8.8-5.05Z",
                         }),
                         vue.h("path", {
-                            d: "M12 8.8a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4Z",
+                            d: "M12 9.45a2.65 2.65 0 1 1 0 5.3 2.65 2.65 0 0 1 0-5.3Z",
                         }),
                         !state.visible
-                            ? [
-                                vue.h("path", {
-                                    class: "cc-password-field__eye-mask",
-                                    d: "M6.2 5.1 18.9 17.8",
-                                }),
-                                vue.h("path", {
-                                    class: "cc-password-field__eye-mask",
-                                    d: "M3.7 3.9 20.3 20.1",
-                                }),
-                            ]
+                            ? vue.h("path", {
+                                class: "cc-password-field__eye-mask",
+                                d: "M4.8 4.9 19.2 19.1",
+                            })
                             : null,
                     ]);
                 }
@@ -730,6 +789,746 @@ const ClassPasswordInput = /*#__PURE__*/ vue.defineComponent({
         };
     },
 });
+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__*/ vue.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 core.RichEditorController({ html: props.value });
+        const html = vue.ref(controller.getState().html);
+        const sourceMode = vue.ref(false);
+        const uploading = vue.ref(false);
+        const notice = vue.ref(null);
+        const wang = vue.shallowRef(null);
+        const editor = vue.shallowRef(null);
+        const fallbackEditor = vue.ref(null);
+        const fileInput = vue.ref(null);
+        const urlDialogInput = vue.ref(null);
+        const fallbackSelection = vue.shallowRef(null);
+        const urlDialog = vue.ref(null);
+        const toastManager = new core.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 = core.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 vue.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(core.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;
+        };
+        vue.watch(() => props.value, (nextValue) => {
+            const nextHtml = controller.setHtml(nextValue !== null && nextValue !== void 0 ? nextValue : "").html;
+            if (html.value !== nextHtml)
+                html.value = nextHtml;
+        });
+        vue.watch(html, () => void vue.nextTick(syncFallbackEditor), { flush: "post" });
+        vue.watch(() => { var _a; return [sourceMode.value, (_a = wang.value) === null || _a === void 0 ? void 0 : _a.Editor]; }, () => void vue.nextTick(syncFallbackEditor), { flush: "post" });
+        vue.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);
+        });
+        vue.onMounted(() => {
+            syncFallbackEditor();
+            dynamicImportModule("@wangeditor/editor-for-vue")
+                .then((module) => {
+                wang.value = module;
+            })
+                .catch(() => {
+                wang.value = null;
+            });
+        });
+        vue.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) => vue.h(ClassTooltip, { content, placement: "bottom" }, { default: () => child });
+        const toolIcon = (icon) => vue.h("span", { class: "cc-rich-editor__summary-icon" }, [
+            classIcon(icon),
+            classIcon("chevronDown", "cc-rich-editor__chevron"),
+        ]);
+        const toolGroup = (label, icon, children) => vue.h("div", {
+            class: "cc-rich-editor__tool-group",
+            "data-disabled": props.disabled ? "true" : "false",
+        }, [
+            toolTip(label, vue.h("button", {
+                "aria-haspopup": "menu",
+                "aria-label": label,
+                class: "cc-rich-editor__tool-trigger",
+                disabled: props.disabled,
+                type: "button",
+            }, [toolIcon(icon)])),
+            vue.h("div", { class: "cc-rich-editor__tool-menu", role: "menu" }, children),
+        ]);
+        return () => {
+            var _a, _b, _c;
+            const locale = core.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 vue.h("div", { class: rootClass }, [
+                    vue.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
+                ? vue.h(wang.value.Toolbar, {
+                    defaultConfig: toolbarConfig,
+                    editor: editor.value,
+                    mode: "default",
+                })
+                : vue.h("div", { class: "cc-rich-editor__fallback-toolbar" }, [
+                    toolTip("加粗", vue.h("button", {
+                        "aria-label": "加粗",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("bold"),
+                    }, [classIcon("bold")])),
+                    toolTip("斜体", vue.h("button", {
+                        "aria-label": "斜体",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("italic"),
+                    }, [classIcon("italic")])),
+                    toolTip("下划线", vue.h("button", {
+                        "aria-label": "下划线",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("underline"),
+                    }, [classIcon("underline")])),
+                    toolTip("删除线", vue.h("button", {
+                        "aria-label": "删除线",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("strikeThrough"),
+                    }, [classIcon("strikethrough")])),
+                    toolTip("文字色", vue.h("label", {
+                        "aria-label": "文字色",
+                        class: "cc-rich-editor__color-tool",
+                        "data-disabled": props.disabled ? "true" : "false",
+                    }, [
+                        classIcon("type"),
+                        vue.h("input", {
+                            disabled: props.disabled,
+                            type: "color",
+                            onChange: (event) => runFallbackCommand("foreColor", event.currentTarget.value),
+                        }),
+                    ])),
+                    toolTip("背景色", vue.h("label", {
+                        "aria-label": "背景色",
+                        class: "cc-rich-editor__color-tool cc-rich-editor__color-tool--background",
+                        "data-disabled": props.disabled ? "true" : "false",
+                    }, [
+                        classIcon("palette"),
+                        vue.h("input", {
+                            disabled: props.disabled,
+                            type: "color",
+                            onChange: (event) => runFallbackCommand("hiliteColor", event.currentTarget.value),
+                        }),
+                    ])),
+                    toolGroup("段落和字号", "type", [
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("formatBlock", "p"),
+                        }, [classIcon("paragraph"), vue.h("span", "正文")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("formatBlock", "h2"),
+                        }, [classIcon("heading"), vue.h("span", "标题")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("fontSize", "2"),
+                        }, [classIcon("type"), vue.h("span", "小字")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("fontSize", "4"),
+                        }, [classIcon("type"), vue.h("span", "大字")]),
+                    ]),
+                    toolGroup("对齐", "alignLeft", [
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("justifyLeft"),
+                        }, [classIcon("alignLeft"), vue.h("span", "左对齐")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("justifyCenter"),
+                        }, [classIcon("alignCenter"), vue.h("span", "居中")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("justifyRight"),
+                        }, [classIcon("alignRight"), vue.h("span", "右对齐")]),
+                    ]),
+                    toolGroup("段落功能", "list", [
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("insertOrderedList"),
+                        }, [classIcon("listOrdered"), vue.h("span", "有序列表")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("insertUnorderedList"),
+                        }, [classIcon("list"), vue.h("span", "无序列表")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("formatBlock", "blockquote"),
+                        }, [classIcon("quote"), vue.h("span", "引用")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => runFallbackCommand("formatBlock", "pre"),
+                        }, [classIcon("code"), vue.h("span", "代码块")]),
+                    ]),
+                    toolGroup("插入", "image", [
+                        vue.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"),
+                            vue.h("span", uploading.value ? "上传中" : "本地图片"),
+                        ]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => openFallbackUrlDialog("image"),
+                        }, [classIcon("image"), vue.h("span", "网络图片")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => openFallbackUrlDialog("video"),
+                        }, [classIcon("video"), vue.h("span", "视频链接")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => insertFallbackHtml(createRichEditorTableHtml()),
+                        }, [classIcon("table"), vue.h("span", "表格")]),
+                        vue.h("button", {
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => openFallbackUrlDialog("link"),
+                        }, [classIcon("link"), vue.h("span", "链接")]),
+                    ]),
+                    toolTip("清除格式", vue.h("button", {
+                        "aria-label": "清除格式",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("removeFormat"),
+                    }, [classIcon("eraser")])),
+                    toolTip("撤销", vue.h("button", {
+                        "aria-label": "撤销",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("undo"),
+                    }, [classIcon("undo")])),
+                    toolTip("恢复撤销", vue.h("button", {
+                        "aria-label": "恢复撤销",
+                        class: "cc-rich-editor__tool",
+                        disabled: props.disabled,
+                        type: "button",
+                        onClick: () => runFallbackCommand("redo"),
+                    }, [classIcon("redo")])),
+                    vue.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 vue.h("div", { class: rootClass }, [
+                vue.h("div", { class: "cc-rich-editor__toolbar-row" }, [
+                    toolbar,
+                    vue.h("div", { class: "cc-rich-editor__toolbar-actions" }, [
+                        toolTip("删除选中", vue.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 ? "预览" : "源码", vue.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("清空", vue.h("button", {
+                            "aria-label": "清空",
+                            class: "cc-rich-editor__source-toggle",
+                            disabled: props.disabled,
+                            type: "button",
+                            onClick: () => commitHtml(""),
+                        }, [classIcon("trash")])),
+                    ]),
+                ]),
+                notice.value
+                    ? vue.h("div", {
+                        class: "cc-rich-editor__notice",
+                        "data-type": notice.value.type,
+                        role: "status",
+                    }, notice.value.text)
+                    : null,
+                vue.h(ClassToastViewport, {
+                    className: "cc-toast-viewport cc-rich-editor__toast-viewport",
+                    manager: toastManager,
+                    maxVisible: 3,
+                    position: "top-right",
+                }),
+                urlDialog.value
+                    ? vue.h("div", {
+                        "aria-modal": "true",
+                        class: "cc-rich-editor__url-modal",
+                        role: "dialog",
+                    }, [
+                        vue.h("div", { class: "cc-rich-editor__url-panel" }, [
+                            vue.h("div", { class: "cc-rich-editor__url-header" }, [
+                                vue.h("span", { class: "cc-rich-editor__url-title" }, [
+                                    classIcon(urlDialog.value.icon),
+                                    urlDialog.value.title,
+                                ]),
+                                vue.h("button", {
+                                    "aria-label": "关闭",
+                                    class: "cc-rich-editor__url-close",
+                                    type: "button",
+                                    onClick: closeFallbackUrlDialog,
+                                }, [classIcon("x")]),
+                            ]),
+                            vue.h("label", { class: "cc-rich-editor__url-field" }, [
+                                vue.h("span", locale.richEditorUrlFieldLabel),
+                                vue.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();
+                                    },
+                                }),
+                            ]),
+                            vue.h("div", { class: "cc-rich-editor__url-actions" }, [
+                                vue.h("button", {
+                                    type: "button",
+                                    onClick: closeFallbackUrlDialog,
+                                }, locale.richEditorCancelText),
+                                vue.h("button", {
+                                    type: "button",
+                                    onClick: submitFallbackUrlDialog,
+                                }, locale.richEditorInsertText),
+                            ]),
+                        ]),
+                    ])
+                    : null,
+                sourceMode.value
+                    ? vue.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)
+                        ? vue.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" },
+                        })
+                        : vue.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 ClassField = ClassInput;
 const ClassColorPicker = /*#__PURE__*/ vue.defineComponent({
     name: "ClassColorPicker",
@@ -12519,6 +13318,10 @@ Object.defineProperty(exports, "ProgressController", {
     enumerable: true,
     get: function () { return core.ProgressController; }
 });
+Object.defineProperty(exports, "RichEditorController", {
+    enumerable: true,
+    get: function () { return core.RichEditorController; }
+});
 Object.defineProperty(exports, "SignatureController", {
     enumerable: true,
     get: function () { return core.SignatureController; }
@@ -12668,6 +13471,7 @@ exports.ClassProgressBar = ClassProgressBar;
 exports.ClassQRCode = ClassQRCode;
 exports.ClassRadioGroup = ClassRadioGroup;
 exports.ClassRating = ClassRating;
+exports.ClassRichEditor = ClassRichEditor;
 exports.ClassRollingNumber = ClassRollingNumber;
 exports.ClassSelect = ClassSelect;
 exports.ClassSignature = ClassSignature;