djm-ui 0.67.4 → 0.72.0

package/dist/djm-ui.umd.js

@@ -1,4 +1,4 @@
-/*! DJM UI v0.67.4 · MIT · 2026-10-26 */
+/*! DJM UI v0.72.0 · MIT · 2026-10-26 */
 "use strict";
 var DjmUI = (() => {
   var __defProp = Object.defineProperty;
@@ -1119,7 +1119,19 @@ Minimum version required to store current data is: ` + i + `.
     activity: "M22 12h-4l-3 9L9 3l-3 9H2",
     database: "M12 8c4.42 0 8-1.34 8-3s-3.58-3-8-3-8 1.34-8 3 3.58 3 8 3zM4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3",
     sun: "M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42",
-    moon: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"
+    moon: "M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z",
+    undo: "M3 10h11a5 5 0 1 1 0 10H8M3 10l4-4M3 10l4 4",
+    redo: "M21 10H10a5 5 0 1 0 0 10h6M21 10l-4-4M21 10l-4 4",
+    "align-left": "M4 6h16M4 12h10M4 18h13",
+    "align-center": "M4 6h16M7 12h10M6 18h12",
+    "align-right": "M4 6h16M10 12h10M7 18h13",
+    "align-justify": "M4 6h16M4 12h16M4 18h16",
+    list: "M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01",
+    "list-ordered": "M10 6h10M10 12h10M10 18h10M4 6h1v4M4 12h2M4 16h2v2H4",
+    outdent: "M4 6h16M10 12h10M10 18h10M8 9l-3 3 3 3",
+    indent: "M4 6h16M10 12h10M10 18h10M5 9l3 3-3 3",
+    unlink: "M10 13a5 5 0 0 0 7.5.5M14 11a5 5 0 0 0-7.5-.5M2 2l20 20",
+    images: "M8 3h12v12M4 7h12v12H4zM7 15l3-3 3 3"
   };
   var icon_default = {
     name: "DjmIcon",
@@ -1458,7 +1470,6 @@ Minimum version required to store current data is: ` + i + `.
     "richEditor.italic": "\u659C\u4F53",
     "richEditor.underline": "\u4E0B\u5212\u7EBF",
     "richEditor.strike": "\u5220\u9664\u7EBF",
-    "richEditor.heading": "\u4E8C\u7EA7\u6807\u9898",
     "richEditor.paragraph": "\u6B63\u6587",
     "richEditor.bulletList": "\u65E0\u5E8F\u5217\u8868",
     "richEditor.numberList": "\u6709\u5E8F\u5217\u8868",
@@ -1469,6 +1480,39 @@ Minimum version required to store current data is: ` + i + `.
     "richEditor.redo": "\u91CD\u505A",
     "richEditor.source": "\u6E90\u7801",
     "richEditor.visual": "\u53EF\u89C6\u5316",
+    "richEditor.toolbar": "\u7F16\u8F91\u5DE5\u5177\u680F",
+    "richEditor.block": "\u6BB5\u843D\u683C\u5F0F",
+    "richEditor.heading1": "\u6807\u9898 1",
+    "richEditor.heading2": "\u6807\u9898 2",
+    "richEditor.heading3": "\u6807\u9898 3",
+    "richEditor.quote": "\u5F15\u7528",
+    "richEditor.codeBlock": "\u4EE3\u7801\u5757",
+    "richEditor.fontSize": "\u5B57\u53F7",
+    "richEditor.defaultSize": "\u9ED8\u8BA4",
+    "richEditor.inlineCode": "\u884C\u5185\u4EE3\u7801",
+    "richEditor.textColor": "\u6587\u5B57\u989C\u8272",
+    "richEditor.bgColor": "\u80CC\u666F\u8272",
+    "richEditor.alignLeft": "\u5DE6\u5BF9\u9F50",
+    "richEditor.alignCenter": "\u5C45\u4E2D",
+    "richEditor.alignRight": "\u53F3\u5BF9\u9F50",
+    "richEditor.alignJustify": "\u4E24\u7AEF\u5BF9\u9F50",
+    "richEditor.outdent": "\u51CF\u5C11\u7F29\u8FDB",
+    "richEditor.indent": "\u589E\u52A0\u7F29\u8FDB",
+    "richEditor.unlink": "\u53D6\u6D88\u94FE\u63A5",
+    "richEditor.image": "\u63D2\u5165\u56FE\u7247",
+    "richEditor.singleImage": "\u63D2\u5165\u5355\u56FE",
+    "richEditor.multiImage": "\u63D2\u5165\u591A\u56FE",
+    "richEditor.mediaLibrary": "\u4ECE\u7D20\u6750\u5E93\u9009\u62E9",
+    "richEditor.hr": "\u5206\u5272\u7EBF",
+    "richEditor.fullscreen": "\u5168\u5C4F",
+    "richEditor.exitFullscreen": "\u9000\u51FA\u5168\u5C4F",
+    "richEditor.wordCount": "\u5171 {count} \u5B57",
+    "richEditor.uploading": "\u6B63\u5728\u4E0A\u4F20 {count} \u5F20\u56FE\u7247\u2026",
+    "richEditor.uploadFailed": "\u56FE\u7247\u4E0A\u4F20\u5931\u8D25",
+    "richEditor.imageTypeError": "\u53EA\u80FD\u4E0A\u4F20\u56FE\u7247\u6587\u4EF6",
+    "richEditor.imageSizeError": "\u56FE\u7247\u4E0D\u80FD\u8D85\u8FC7 {size}MB",
+    "richEditor.imageUrlInvalid": "\u56FE\u7247\u5730\u5740\u4E0D\u5408\u6CD5\uFF0C\u5DF2\u62D2\u7EDD\u63D2\u5165",
+    "richEditor.linkInvalid": "\u94FE\u63A5\u53EA\u652F\u6301 http(s)\u3001mailto\u3001tel \u6216\u7AD9\u5185\u76F8\u5BF9\u5730\u5740",
     "approval.start": "\u53D1\u8D77",
     "approval.cc": "\u6284\u9001",
     "approval.approved": "\u5DF2\u901A\u8FC7",
@@ -1677,7 +1721,6 @@ Minimum version required to store current data is: ` + i + `.
     "richEditor.italic": "Italic",
     "richEditor.underline": "Underline",
     "richEditor.strike": "Strikethrough",
-    "richEditor.heading": "Heading 2",
     "richEditor.paragraph": "Paragraph",
     "richEditor.bulletList": "Bullet list",
     "richEditor.numberList": "Numbered list",
@@ -1688,6 +1731,39 @@ Minimum version required to store current data is: ` + i + `.
     "richEditor.redo": "Redo",
     "richEditor.source": "Source",
     "richEditor.visual": "Visual",
+    "richEditor.toolbar": "Formatting toolbar",
+    "richEditor.block": "Paragraph style",
+    "richEditor.heading1": "Heading 1",
+    "richEditor.heading2": "Heading 2",
+    "richEditor.heading3": "Heading 3",
+    "richEditor.quote": "Quote",
+    "richEditor.codeBlock": "Code block",
+    "richEditor.fontSize": "Font size",
+    "richEditor.defaultSize": "Default",
+    "richEditor.inlineCode": "Inline code",
+    "richEditor.textColor": "Text color",
+    "richEditor.bgColor": "Background color",
+    "richEditor.alignLeft": "Align left",
+    "richEditor.alignCenter": "Align center",
+    "richEditor.alignRight": "Align right",
+    "richEditor.alignJustify": "Justify",
+    "richEditor.outdent": "Decrease indent",
+    "richEditor.indent": "Increase indent",
+    "richEditor.unlink": "Remove link",
+    "richEditor.image": "Insert image",
+    "richEditor.singleImage": "Insert single image",
+    "richEditor.multiImage": "Insert multiple images",
+    "richEditor.mediaLibrary": "Choose from media library",
+    "richEditor.hr": "Divider",
+    "richEditor.fullscreen": "Fullscreen",
+    "richEditor.exitFullscreen": "Exit fullscreen",
+    "richEditor.wordCount": "{count} characters",
+    "richEditor.uploading": "Uploading {count} image(s)\u2026",
+    "richEditor.uploadFailed": "Image upload failed",
+    "richEditor.imageTypeError": "Only image files are allowed",
+    "richEditor.imageSizeError": "Image must be smaller than {size}MB",
+    "richEditor.imageUrlInvalid": "Invalid image URL, insertion rejected",
+    "richEditor.linkInvalid": "Only http(s), mailto, tel or relative URLs are allowed",
     "approval.start": "Started",
     "approval.cc": "CC",
     "approval.approved": "Approved",
@@ -9470,6 +9546,197 @@ Minimum version required to store current data is: ` + i + `.
   `
   };
 
+  // src/components/media-picker/index.js
+  var media_picker_default = {
+    name: "DjmMediaPicker",
+    components: { DjmModal: modal_default, DjmPagination: pagination_default, DjmIcon: icon_default },
+    props: {
+      modelValue: { type: [Array, String, Number], default: "" },
+      items: { type: Array, default: () => [] },
+      multiple: { type: Boolean, default: false },
+      // 最多选几个，0 表示不限
+      limit: { type: Number, default: 0 },
+      // image 只显示图片，file 只显示非图片，空串不过滤
+      accept: { type: String, default: "" },
+      title: { type: String, default: "" },
+      triggerText: { type: String, default: "" },
+      pageSize: { type: Number, default: 12 },
+      disabled: { type: Boolean, default: false }
+    },
+    emits: ["update:modelValue", "change"],
+    setup(props, { emit }) {
+      const open = ref(false);
+      const keyword = ref("");
+      const page = ref(1);
+      const temp = ref([]);
+      const selectedIds = computed(() => {
+        if (props.multiple) return Array.isArray(props.modelValue) ? props.modelValue : [];
+        if (props.modelValue === "" || props.modelValue === null || props.modelValue === void 0) return [];
+        return [props.modelValue];
+      });
+      function isImage(item) {
+        if (item.type) return item.type === "image";
+        return /\.(png|jpe?g|gif|webp|svg|avif)$/i.test(item.url || "");
+      }
+      const filtered = computed(() => {
+        const key = keyword.value.trim().toLowerCase();
+        return props.items.filter((item) => {
+          if (props.accept === "image" && !isImage(item)) return false;
+          if (props.accept === "file" && isImage(item)) return false;
+          if (key && !String(item.name || "").toLowerCase().includes(key)) return false;
+          return true;
+        });
+      });
+      const paged = computed(() => {
+        const start = (page.value - 1) * props.pageSize;
+        return filtered.value.slice(start, start + props.pageSize);
+      });
+      watch(keyword, () => {
+        page.value = 1;
+      });
+      watch(
+        () => filtered.value.length,
+        () => {
+          const max = Math.max(1, Math.ceil(filtered.value.length / props.pageSize));
+          if (page.value > max) page.value = max;
+        }
+      );
+      function isChecked(id) {
+        return temp.value.includes(id);
+      }
+      function atLimit() {
+        return props.limit > 0 && temp.value.length >= props.limit;
+      }
+      function toggle(item) {
+        if (props.multiple) {
+          if (isChecked(item.id)) {
+            temp.value = temp.value.filter((id) => id !== item.id);
+            return;
+          }
+          if (atLimit()) return;
+          temp.value = [...temp.value, item.id];
+          return;
+        }
+        temp.value = [item.id];
+      }
+      function openPanel() {
+        if (props.disabled) return;
+        temp.value = [...selectedIds.value];
+        keyword.value = "";
+        page.value = 1;
+        open.value = true;
+      }
+      function commit() {
+        const next = props.multiple ? [...temp.value] : temp.value[0] !== void 0 ? temp.value[0] : "";
+        emit("update:modelValue", next);
+        emit("change", next);
+        open.value = false;
+      }
+      function cancel() {
+        temp.value = [...selectedIds.value];
+        open.value = false;
+      }
+      return {
+        open,
+        keyword,
+        page,
+        temp,
+        selectedIds,
+        filtered,
+        paged,
+        isImage,
+        isChecked,
+        atLimit,
+        toggle,
+        openPanel,
+        commit,
+        cancel,
+        t
+      };
+    },
+    template: `
+    <span class="djm-media-picker">
+      <slot name="trigger" :open="openPanel" :count="selectedIds.length">
+        <button
+          class="djm-btn"
+          type="button"
+          :disabled="disabled"
+          @click="openPanel"
+        >{{ triggerText || t('mediaPicker.select') }}<span v-if="selectedIds.length" class="djm-media-picker-count">{{ selectedIds.length }}</span></button>
+      </slot>
+
+      <DjmModal
+        :model-value="open"
+        :title="title || t('mediaPicker.title')"
+        width="760px"
+        @update:model-value="cancel"
+      >
+        <div class="djm-media-toolbar">
+          <label class="djm-media-search">
+            <DjmIcon name="search" :size="13" />
+            <input
+              v-model="keyword"
+              class="djm-media-search-input"
+              type="text"
+              :placeholder="t('mediaPicker.search')"
+              :aria-label="t('mediaPicker.search')"
+            />
+          </label>
+          <span class="djm-media-toolbar-slot">
+            <slot name="toolbar"></slot>
+          </span>
+        </div>
+
+        <div class="djm-media-grid" role="listbox" :aria-multiselectable="multiple ? 'true' : 'false'">
+          <div
+            v-for="item in paged"
+            :key="item.id"
+            class="djm-media-item"
+            :class="{
+              'djm-is-checked': isChecked(item.id),
+              'djm-is-disabled': multiple && atLimit() && !isChecked(item.id)
+            }"
+            role="option"
+            tabindex="0"
+            :aria-selected="String(isChecked(item.id))"
+            @click="toggle(item)"
+            @keydown.enter.prevent="toggle(item)"
+            @keydown.space.prevent="toggle(item)"
+          >
+            <div class="djm-media-thumb">
+              <img v-if="isImage(item)" :src="item.url" :alt="item.name" loading="lazy" />
+              <DjmIcon v-else name="folder" :size="26" />
+              <span v-if="isChecked(item.id)" class="djm-media-check">
+                <DjmIcon name="check" :size="11" />
+              </span>
+            </div>
+            <div class="djm-media-name" :title="item.name">{{ item.name }}</div>
+          </div>
+          <div v-if="!paged.length" class="djm-media-empty">{{ t('mediaPicker.empty') }}</div>
+        </div>
+
+        <div class="djm-media-foot">
+          <span class="djm-media-total">
+            {{ t('mediaPicker.total', { total: filtered.length }) }}
+            <em v-if="multiple && limit > 0">{{ t('mediaPicker.limit', { limit }) }}</em>
+          </span>
+          <DjmPagination
+            v-if="filtered.length > pageSize"
+            v-model:page="page"
+            :page-size="pageSize"
+            :total="filtered.length"
+          />
+        </div>
+
+        <template #footer>
+          <button class="djm-btn" type="button" @click="cancel">{{ t('common.cancel') }}</button>
+          <button class="djm-btn djm-btn-primary" type="button" @click="commit">{{ t('common.confirm') }}</button>
+        </template>
+      </DjmModal>
+    </span>
+  `
+  };
+
   // src/utils/sanitize-html.js
   var TAGS = /* @__PURE__ */ new Set([
     "p",
@@ -9508,7 +9775,18 @@ Minimum version required to store current data is: ` + i + `.
     "th",
     "td"
   ]);
-  var GLOBAL_ATTRS = /* @__PURE__ */ new Set(["class", "title"]);
+  var GLOBAL_ATTRS = /* @__PURE__ */ new Set(["class", "title", "style"]);
+  var STYLE_PROPS = /* @__PURE__ */ new Set([
+    "color",
+    "background-color",
+    "font-size",
+    "font-weight",
+    "font-style",
+    "text-decoration",
+    "text-align",
+    "text-indent",
+    "line-height"
+  ]);
   var TAG_ATTRS = {
     a: /* @__PURE__ */ new Set(["href", "target", "rel"]),
     img: /* @__PURE__ */ new Set(["src", "alt", "width", "height"]),
@@ -9516,11 +9794,29 @@ Minimum version required to store current data is: ` + i + `.
     th: /* @__PURE__ */ new Set(["colspan", "rowspan", "scope"]),
     td: /* @__PURE__ */ new Set(["colspan", "rowspan"])
   };
+  function cleanStyle(value) {
+    return String(value || "").split(";").map((item) => {
+      const index = item.indexOf(":");
+      if (index === -1) return "";
+      const name = item.slice(0, index).trim().toLowerCase();
+      const val = item.slice(index + 1).trim();
+      if (!STYLE_PROPS.has(name)) return "";
+      if (/url\s*\(|expression\s*\(|javascript:/i.test(val)) return "";
+      return name + ": " + val;
+    }).filter(Boolean).join("; ");
+  }
+  var SAFE_SCHEMES = /* @__PURE__ */ new Set(["http", "https", "mailto", "tel"]);
   function safeUrl(value, tag) {
-    const url = String(value || "").replace(/[\u0000-\u0020]+/g, "").toLowerCase();
-    if (url.startsWith("javascript:") || url.startsWith("vbscript:")) return false;
-    if (url.startsWith("data:")) return tag === "img" && url.startsWith("data:image/");
-    return true;
+    const url = String(value || "").replace(/[\u0000-\u0020]+/g, "");
+    const scheme = url.match(/^([a-z][a-z0-9+.-]*):/i);
+    if (!scheme) return true;
+    const name = scheme[1].toLowerCase();
+    if (SAFE_SCHEMES.has(name)) return true;
+    if (tag === "img") {
+      if (name === "blob") return true;
+      if (name === "data" && /^data:image\//i.test(url)) return true;
+    }
+    return false;
   }
   function cleanNode(node) {
     const children = [...node.childNodes];
@@ -9543,6 +9839,12 @@ Minimum version required to store current data is: ` + i + `.
           child.removeAttribute(attr.name);
           return;
         }
+        if (name === "style") {
+          const style = cleanStyle(attr.value);
+          if (style) child.setAttribute("style", style);
+          else child.removeAttribute("style");
+          return;
+        }
         if ((name === "href" || name === "src") && !safeUrl(attr.value, tag)) {
           child.removeAttribute(attr.name);
         }
@@ -9563,78 +9865,474 @@ Minimum version required to store current data is: ` + i + `.
   }
 
   // src/components/rich-editor/index.js
+  var BLOCKS = [
+    { value: "p", label: "paragraph" },
+    { value: "h1", label: "heading1" },
+    { value: "h2", label: "heading2" },
+    { value: "h3", label: "heading3" },
+    { value: "blockquote", label: "quote" },
+    { value: "pre", label: "codeBlock" }
+  ];
+  var SIZES = [
+    { value: "", label: "defaultSize" },
+    { value: "12px", label: "12px" },
+    { value: "14px", label: "14px" },
+    { value: "16px", label: "16px" },
+    { value: "18px", label: "18px" },
+    { value: "24px", label: "24px" }
+  ];
+  var COLORS = ["#1f2d3d", "#5a6b7d", "#2b86d9", "#2fa36b", "#d97706", "#dc2626", "#7c3aed", "#ffffff"];
+  var TOOLBAR_PRESETS = {
+    simple: ["history", "inline", "list", "insert"],
+    basic: ["history", "format", "inline", "align", "list", "insert", "view"],
+    full: ["history", "format", "inline", "color", "align", "list", "insert", "view"]
+  };
+  function isSafeImageUrl(url) {
+    const value = String(url || "").replace(/[\u0000-\u0020]+/g, "");
+    if (!value) return false;
+    const scheme = value.match(/^([a-z][a-z0-9+.-]*):/i);
+    if (!scheme) return true;
+    const name = scheme[1].toLowerCase();
+    if (name === "http" || name === "https" || name === "blob") return true;
+    return name === "data" && /^data:image\//i.test(value);
+  }
+  function isSafeLink(url) {
+    const value = String(url || "").trim();
+    if (!value) return false;
+    const scheme = value.replace(/[\u0000-\u0020]+/g, "").match(/^([a-z][a-z0-9+.-]*):/i);
+    if (!scheme) return true;
+    return ["http", "https", "mailto", "tel"].indexOf(scheme[1].toLowerCase()) > -1;
+  }
   var rich_editor_default = {
     name: "DjmRichEditor",
-    components: { Icon: icon_default },
+    components: { Icon: icon_default, MediaPicker: media_picker_default },
     props: {
       modelValue: { type: String, default: "" },
       placeholder: { type: String, default: "" },
       minHeight: { type: Number, default: 200 },
-      // 开启后对外输出的 HTML 会走白名单清洗
-      sanitize: { type: Boolean, default: false },
-      disabled: { type: Boolean, default: false }
+      // 默认开启：对外输出的 HTML 走白名单清洗，内容里不会带出脚本
+      sanitize: { type: Boolean, default: true },
+      disabled: { type: Boolean, default: false },
+      // 工具条：simple / basic / full，或传分组数组（history / format / inline / color / align / list / insert / view）
+      toolbar: { type: [String, Array], default: "full" },
+      // 自定义上传：接收 File，返回图片地址（或 { url }），不传则转成 dataURL 本地预览
+      uploadImage: { type: Function, default: null },
+      // 已上传图片，提供后工具栏出现「从素材库选择」：字符串或 { url, name }
+      media: { type: Array, default: () => [] },
+      accept: { type: String, default: "image/*" },
+      // 单张图片大小上限（MB）
+      maxImageSize: { type: Number, default: 5 },
+      // 是否允许一次选多张
+      multiple: { type: Boolean, default: true },
+      showCount: { type: Boolean, default: true }
     },
-    emits: ["update:modelValue"],
+    emits: ["update:modelValue", "upload-error"],
     setup(props, { emit }) {
       const editor = ref(null);
+      const fileInput = ref(null);
       const sourceMode = ref(false);
       const source = ref(props.modelValue);
-      const formats = ref({ bold: false, italic: false, underline: false, strike: false });
+      const fullscreen = ref(false);
+      const panel = ref("");
+      const uploadCount = ref(0);
+      const textColor = ref(COLORS[0]);
+      const bgColor = ref("#fdf3c4");
+      const fontSize = ref("");
+      const count2 = ref(0);
+      const formats = ref({
+        bold: false,
+        italic: false,
+        underline: false,
+        strike: false,
+        code: false,
+        block: "p",
+        align: "",
+        list: ""
+      });
+      let savedRange = null;
+      const ready = computed(() => !props.disabled && !sourceMode.value);
+      const toolbarGroups = computed(() => {
+        const list = Array.isArray(props.toolbar) ? props.toolbar : TOOLBAR_PRESETS[props.toolbar] || TOOLBAR_PRESETS.full;
+        return new Set(list);
+      });
+      function has(group) {
+        return toolbarGroups.value.has(group);
+      }
+      const mediaLibrary = computed(
+        () => (props.media || []).map((item, index) => {
+          if (typeof item === "string") {
+            return { id: "media-" + index, url: item, name: "", type: "image" };
+          }
+          return {
+            id: item && item.id !== void 0 ? String(item.id) : "media-" + index,
+            url: item && (item.url || item.src) || "",
+            name: item && (item.name || item.alt) || "",
+            type: "image"
+          };
+        }).filter((item) => !!item.url)
+      );
       function clean(html) {
         return props.sanitize ? sanitizeHtml(html) : html;
       }
+      function plainText(html) {
+        return String(html || "").replace(/<[^>]*>/g, "").replace(/&nbsp;/g, " ").replace(/&[a-z]+;/gi, " ");
+      }
       function syncFromDom() {
         if (!editor.value) return;
-        emit("update:modelValue", clean(editor.value.innerHTML));
+        const html = clean(editor.value.innerHTML);
+        count2.value = plainText(html).trim().length;
+        emit("update:modelValue", html);
       }
-      function onPaste(event) {
-        const data = event.clipboardData;
-        const html = data && data.getData("text/html");
-        if (!html) return;
-        event.preventDefault();
-        document.execCommand("insertHTML", false, sanitizeHtml(html));
+      function currentRange() {
+        const selection = window.getSelection();
+        if (!selection || !selection.rangeCount || !editor.value) return null;
+        const range = selection.getRangeAt(0);
+        return editor.value.contains(range.commonAncestorContainer) ? range : null;
+      }
+      function rememberRange() {
+        const range = currentRange();
+        savedRange = range ? range.cloneRange() : null;
+      }
+      function focusAt(range) {
+        if (!editor.value) return;
+        editor.value.focus();
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        if (range) {
+          selection.addRange(range);
+          return;
+        }
+        const end = document.createRange();
+        end.selectNodeContents(editor.value);
+        end.collapse(false);
+        selection.addRange(end);
+      }
+      function insertNodeAt(range, node) {
+        if (!editor.value) return;
+        focusAt(range);
+        const selection = window.getSelection();
+        if (selection.rangeCount) selection.getRangeAt(0).insertNode(node);
+        else editor.value.appendChild(node);
         syncFromDom();
+        syncFormats();
+      }
+      function ensureRange() {
+        const range = currentRange();
+        if (range) return range;
+        if (!savedRange) return null;
+        focusAt(savedRange);
+        return currentRange();
       }
       function exec(command, value = null) {
-        if (props.disabled || sourceMode.value) return;
+        if (!ready.value) return;
+        if (typeof document.execCommand !== "function") return;
+        ensureRange();
+        document.execCommand("styleWithCSS", false, true);
         document.execCommand(command, false, value);
         if (editor.value) editor.value.focus();
         syncFromDom();
         syncFormats();
       }
-      function formatBlock(tag) {
-        exec("formatBlock", tag);
+      function setBlock(value) {
+        panel.value = "";
+        exec("formatBlock", "<" + value + ">");
+      }
+      function setFontSize(size) {
+        panel.value = "";
+        if (!ready.value || !editor.value) return;
+        fontSize.value = size;
+        const range = ensureRange();
+        if (!range || range.collapsed) return;
+        if (!size) {
+          const walker = document.createTreeWalker(editor.value, NodeFilter.SHOW_ELEMENT);
+          const targets = [];
+          while (walker.nextNode()) {
+            const el = walker.currentNode;
+            if (el.style && el.style.fontSize && range.intersectsNode(el)) targets.push(el);
+          }
+          targets.forEach((el) => {
+            el.style.fontSize = "";
+          });
+          syncFromDom();
+          return;
+        }
+        const span = document.createElement("span");
+        span.style.fontSize = size;
+        span.appendChild(range.extractContents());
+        range.insertNode(span);
+        const selection = window.getSelection();
+        const after = document.createRange();
+        after.setStartAfter(span);
+        after.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(after);
+        syncFromDom();
+        syncFormats();
+      }
+      function applyColor(kind, color) {
+        panel.value = "";
+        if (kind === "text") textColor.value = color;
+        else bgColor.value = color;
+        if (!ready.value) return;
+        if (typeof document.execCommand !== "function") return;
+        document.execCommand("styleWithCSS", false, true);
+        const command = kind === "text" ? "foreColor" : "hiliteColor";
+        if (!document.execCommand(command, false, color) && kind === "bg") {
+          document.execCommand("backColor", false, color);
+        }
+        if (editor.value) editor.value.focus();
+        syncFromDom();
+        syncFormats();
+      }
+      function togglePanel(name) {
+        if (!ready.value) return;
+        panel.value = panel.value === name ? "" : name;
+      }
+      function toggleInlineCode() {
+        if (!ready.value || !editor.value) return;
+        const range = currentRange();
+        if (!range) return;
+        const anchor = range.commonAncestorContainer;
+        const node = anchor.nodeType === 1 ? anchor : anchor.parentElement;
+        const code = node && node.closest ? node.closest("code") : null;
+        if (code && editor.value.contains(code)) {
+          const parent = code.parentNode;
+          while (code.firstChild) parent.insertBefore(code.firstChild, code);
+          parent.removeChild(code);
+          syncFromDom();
+          return;
+        }
+        if (range.collapsed) return;
+        const wrapper = document.createElement("code");
+        wrapper.appendChild(range.extractContents());
+        range.insertNode(wrapper);
+        const selection = window.getSelection();
+        const after = document.createRange();
+        after.setStartAfter(wrapper);
+        after.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(after);
+        syncFromDom();
+        syncFormats();
       }
       function addLink() {
+        if (!ready.value) return;
         const url = window.prompt(t("richEditor.linkPrompt"), "https://");
-        if (url) exec("createLink", url);
+        if (!url) return;
+        if (!isSafeLink(url)) {
+          window.alert(t("richEditor.linkInvalid"));
+          return;
+        }
+        const range = currentRange();
+        if (range && range.collapsed) {
+          const link = document.createElement("a");
+          link.href = url;
+          link.target = "_blank";
+          link.rel = "noopener noreferrer";
+          link.textContent = url;
+          insertNodeAt(range, link);
+          return;
+        }
+        exec("createLink", url);
+        if (editor.value) {
+          editor.value.querySelectorAll("a[href]").forEach((link) => {
+            if (!link.getAttribute("target")) link.setAttribute("target", "_blank");
+            link.setAttribute("rel", "noopener noreferrer");
+          });
+        }
+        syncFromDom();
+      }
+      function readAsDataUrl(file) {
+        return new Promise((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onload = () => resolve(reader.result);
+          reader.onerror = () => reject(reader.error || new Error("read failed"));
+          reader.readAsDataURL(file);
+        });
+      }
+      async function uploadOne(file) {
+        if (props.uploadImage) {
+          const result = await props.uploadImage(file);
+          const url = typeof result === "string" ? result : result && result.url;
+          if (!url) throw new Error(t("richEditor.imageUrlInvalid"));
+          if (!isSafeImageUrl(url)) throw new Error(t("richEditor.imageUrlInvalid"));
+          return String(url).trim();
+        }
+        return readAsDataUrl(file);
+      }
+      function isImage(file) {
+        return file && /^image\//.test(file.type);
+      }
+      function pickImage(allowMultiple) {
+        if (!ready.value || !fileInput.value) return;
+        rememberRange();
+        fileInput.value.multiple = !!allowMultiple && props.multiple;
+        fileInput.value.click();
+      }
+      function insertMedia(ids) {
+        if (!ready.value) return;
+        const picked = (Array.isArray(ids) ? ids : [ids]).map((id) => mediaLibrary.value.find((item) => item.id === String(id))).filter(Boolean);
+        const safe = picked.filter((item) => {
+          if (isSafeImageUrl(item.url)) return true;
+          emit("upload-error", { file: null, message: t("richEditor.imageUrlInvalid") });
+          return false;
+        });
+        if (!safe.length) return;
+        focusAt(savedRange);
+        const fragment = document.createDocumentFragment();
+        safe.forEach((item) => {
+          const img = document.createElement("img");
+          img.src = item.url;
+          img.alt = item.name || "image";
+          img.className = "djm-rich-editor-img";
+          fragment.appendChild(img);
+        });
+        const selection = window.getSelection();
+        if (selection.rangeCount) selection.getRangeAt(0).insertNode(fragment);
+        else editor.value.appendChild(fragment);
+        syncFromDom();
+        syncFormats();
+      }
+      function insertImages(files) {
+        if (!files.length || !editor.value) return;
+        uploadCount.value = files.length;
+        const holder = document.createElement("span");
+        holder.className = "djm-rich-editor-uploading";
+        holder.textContent = t("richEditor.uploading", { count: files.length });
+        const anchor = savedRange && editor.value.contains(savedRange.commonAncestorContainer) ? savedRange : null;
+        focusAt(anchor);
+        const selection = window.getSelection();
+        if (selection.rangeCount) selection.getRangeAt(0).insertNode(holder);
+        else editor.value.appendChild(holder);
+        Promise.all(files.map(async (file) => {
+          if (!isImage(file)) return { file, error: t("richEditor.imageTypeError") };
+          if (props.maxImageSize > 0 && file.size > props.maxImageSize * 1024 * 1024) {
+            return { file, error: t("richEditor.imageSizeError", { size: props.maxImageSize }) };
+          }
+          try {
+            return { file, url: await uploadOne(file) };
+          } catch (error) {
+            return { file, error: error && error.message || t("richEditor.uploadFailed") };
+          }
+        })).then((results) => {
+          uploadCount.value = 0;
+          const done = results.filter((item) => item.url);
+          const failed = results.filter((item) => item.error);
+          const alive = editor.value && editor.value.contains(holder);
+          if (done.length && editor.value) {
+            done.forEach((item) => {
+              const img = document.createElement("img");
+              img.src = item.url;
+              img.alt = item.file.name || "image";
+              img.className = "djm-rich-editor-img";
+              if (alive) holder.parentNode.insertBefore(img, holder);
+              else editor.value.appendChild(img);
+            });
+          }
+          if (alive) holder.remove();
+          failed.forEach((item) => emit("upload-error", { file: item.file, message: item.error }));
+          syncFromDom();
+        });
+      }
+      function onFilesChange(event) {
+        const files = Array.from(event.target.files || []);
+        event.target.value = "";
+        insertImages(files);
+      }
+      function onPaste(event) {
+        const data = event.clipboardData;
+        if (!data) return;
+        const images = Array.from(data.files || []).filter(isImage);
+        if (images.length) {
+          event.preventDefault();
+          insertImages(images);
+          return;
+        }
+        const html = data.getData("text/html");
+        if (!html) return;
+        event.preventDefault();
+        document.execCommand("insertHTML", false, sanitizeHtml(html));
+        syncFromDom();
+      }
+      function onDragOver(event) {
+        if (!ready.value) return;
+        if (event.dataTransfer && Array.from(event.dataTransfer.types || []).includes("Files")) {
+          event.preventDefault();
+        }
+      }
+      function onDrop(event) {
+        if (!ready.value) return;
+        const files = Array.from(event.dataTransfer && event.dataTransfer.files || []).filter(isImage);
+        if (!files.length) return;
+        event.preventDefault();
+        rememberRange();
+        insertImages(files);
+      }
+      function closestTag(node, tag) {
+        const el = node && (node.nodeType === 1 ? node : node.parentElement);
+        return el && el.closest ? el.closest(tag) : null;
+      }
+      function detectBlock() {
+        const selection = window.getSelection();
+        if (!selection || !selection.anchorNode) return "p";
+        let node = selection.anchorNode;
+        if (node.nodeType !== 1) node = node.parentElement;
+        while (node && node !== editor.value) {
+          const tag = node.tagName.toLowerCase();
+          if (["p", "h1", "h2", "h3", "blockquote", "pre"].includes(tag)) return tag;
+          node = node.parentElement;
+        }
+        return "p";
       }
       function syncFormats() {
-        if (props.disabled || sourceMode.value) return;
-        if (!editor.value || !editor.value.contains(document.activeElement)) return;
+        if (props.disabled || sourceMode.value || !editor.value) return;
+        if (!editor.value.contains(document.activeElement)) return;
+        const selection = window.getSelection();
         formats.value = {
           bold: document.queryCommandState("bold"),
           italic: document.queryCommandState("italic"),
           underline: document.queryCommandState("underline"),
-          strike: document.queryCommandState("strikeThrough")
+          strike: document.queryCommandState("strikeThrough"),
+          code: !!closestTag(selection.anchorNode, "code"),
+          block: detectBlock(),
+          align: document.queryCommandState("justifyCenter") ? "center" : document.queryCommandState("justifyRight") ? "right" : document.queryCommandState("justifyFull") ? "justify" : "left",
+          list: document.queryCommandState("insertOrderedList") ? "ol" : document.queryCommandState("insertUnorderedList") ? "ul" : ""
         };
       }
       function onSourceInput() {
+        count2.value = plainText(source.value).trim().length;
         emit("update:modelValue", clean(source.value));
       }
       function toggleSource() {
         if (props.disabled) return;
+        panel.value = "";
         if (sourceMode.value) {
           emit("update:modelValue", clean(source.value));
           sourceMode.value = false;
           requestAnimationFrame(() => {
             if (editor.value) editor.value.innerHTML = clean(source.value);
+            syncFromDom();
           });
         } else {
           source.value = editor.value ? editor.value.innerHTML : props.modelValue;
           sourceMode.value = true;
         }
       }
+      function toggleFullscreen() {
+        if (props.disabled) return;
+        fullscreen.value = !fullscreen.value;
+        panel.value = "";
+      }
+      function onDocumentClick(event) {
+        if (!panel.value) return;
+        if (!(event.target.closest && event.target.closest(".djm-rich-editor-color"))) panel.value = "";
+      }
+      function onKeydown(event) {
+        if (event.key === "Escape" && fullscreen.value) {
+          fullscreen.value = false;
+          panel.value = "";
+        }
+      }
       watch(
         () => props.modelValue,
         (value) => {
@@ -9644,40 +10342,117 @@ Minimum version required to store current data is: ` + i + `.
           }
           const next = clean(value);
           if (editor.value && editor.value.innerHTML !== next) editor.value.innerHTML = next;
+          count2.value = plainText(next).trim().length;
         }
       );
       onMounted(() => {
         if (editor.value) editor.value.innerHTML = clean(props.modelValue);
+        count2.value = plainText(props.modelValue).trim().length;
         document.addEventListener("selectionchange", syncFormats);
+        document.addEventListener("click", onDocumentClick);
+        document.addEventListener("keydown", onKeydown);
+      });
+      onBeforeUnmount(() => {
+        document.removeEventListener("selectionchange", syncFormats);
+        document.removeEventListener("click", onDocumentClick);
+        document.removeEventListener("keydown", onKeydown);
       });
-      onBeforeUnmount(() => document.removeEventListener("selectionchange", syncFormats));
       return {
         editor,
+        fileInput,
         sourceMode,
         source,
+        fullscreen,
+        panel,
+        uploadCount,
+        textColor,
+        bgColor,
+        fontSize,
+        count: count2,
         formats,
+        blocks: BLOCKS,
+        sizes: SIZES,
+        colors: COLORS,
+        mediaLibrary,
+        has,
         exec,
-        formatBlock,
+        setBlock,
+        setFontSize,
+        applyColor,
+        togglePanel,
+        toggleInlineCode,
         addLink,
-        onSourceInput,
+        pickImage,
+        insertMedia,
+        onFilesChange,
         onPaste,
+        onDragOver,
+        onDrop,
+        rememberRange,
+        onSourceInput,
         toggleSource,
+        toggleFullscreen,
         syncFromDom,
         syncFormats,
         t
       };
     },
     template: `
-    <div class="djm-rich-editor" :class="{ 'djm-is-disabled': disabled }">
-      <div class="djm-rich-editor-toolbar">
-        <div class="djm-rich-editor-group">
+    <div
+      class="djm-rich-editor"
+      :class="{ 'djm-is-disabled': disabled, 'djm-is-fullscreen': fullscreen }"
+    >
+      <div class="djm-rich-editor-toolbar" role="toolbar" :aria-label="t('richEditor.toolbar')" @mousedown="rememberRange">
+        <div class="djm-rich-editor-group" v-if="has('history')">
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.undo')"
+            :aria-label="t('richEditor.undo')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="exec('undo')"
+          ><Icon name="undo" :size="13" /></button>
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.redo')"
+            :aria-label="t('richEditor.redo')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="exec('redo')"
+          ><Icon name="redo" :size="13" /></button>
+        </div>
+
+        <div class="djm-rich-editor-group" v-if="has('format')">
+          <select
+            class="djm-rich-editor-select"
+            :value="formats.block"
+            :aria-label="t('richEditor.block')"
+            :disabled="disabled || sourceMode"
+            @change="setBlock($event.target.value)"
+          >
+            <option v-for="item in blocks" :key="item.value" :value="item.value">{{ t('richEditor.' + item.label) }}</option>
+          </select>
+          <select
+            class="djm-rich-editor-select djm-rich-editor-select-size"
+            :value="fontSize"
+            :aria-label="t('richEditor.fontSize')"
+            :disabled="disabled || sourceMode"
+            @change="setFontSize($event.target.value)"
+          >
+            <option v-for="item in sizes" :key="item.value" :value="item.value">{{ t('richEditor.' + item.label) }}</option>
+          </select>
+        </div>
+
+        <div class="djm-rich-editor-group" v-if="has('inline')">
           <button
             class="djm-rich-editor-btn djm-rich-editor-btn-bold"
             type="button"
             :title="t('richEditor.bold')"
             :aria-label="t('richEditor.bold')"
             :aria-pressed="String(formats.bold)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('bold')"
           >B</button>
@@ -9687,7 +10462,7 @@ Minimum version required to store current data is: ` + i + `.
             :title="t('richEditor.italic')"
             :aria-label="t('richEditor.italic')"
             :aria-pressed="String(formats.italic)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('italic')"
           >I</button>
@@ -9697,7 +10472,7 @@ Minimum version required to store current data is: ` + i + `.
             :title="t('richEditor.underline')"
             :aria-label="t('richEditor.underline')"
             :aria-pressed="String(formats.underline)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('underline')"
           >U</button>
@@ -9707,46 +10482,130 @@ Minimum version required to store current data is: ` + i + `.
             :title="t('richEditor.strike')"
             :aria-label="t('richEditor.strike')"
             :aria-pressed="String(formats.strike)"
-            :disabled="disabled"
+            :disabled="disabled || sourceMode"
             @mousedown.prevent
             @click="exec('strikeThrough')"
           >S</button>
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.inlineCode')"
+            :aria-label="t('richEditor.inlineCode')"
+            :aria-pressed="String(formats.code)"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click="toggleInlineCode"
+          ><Icon name="code" :size="13" /></button>
         </div>
 
-        <div class="djm-rich-editor-group">
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.heading')" :disabled="disabled" @mousedown.prevent @click="formatBlock('h2')">H2</button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.paragraph')" :disabled="disabled" @mousedown.prevent @click="formatBlock('p')">{{ t('richEditor.paragraph') }}</button>
-        </div>
-
-        <div class="djm-rich-editor-group">
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.bulletList')" :disabled="disabled" @mousedown.prevent @click="exec('insertUnorderedList')">
-            <span class="djm-rich-editor-glyph">\u2022 \u2261</span>
-          </button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.numberList')" :disabled="disabled" @mousedown.prevent @click="exec('insertOrderedList')">
-            <span class="djm-rich-editor-glyph">1. \u2261</span>
+        <div class="djm-rich-editor-group djm-rich-editor-color" v-if="has('color')">
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.textColor')"
+            :aria-label="t('richEditor.textColor')"
+            :aria-expanded="String(panel === 'text')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click.stop="togglePanel('text')"
+          >
+            <span class="djm-rich-editor-letter" :style="{ borderBottomColor: textColor }">A</span>
           </button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.link')" :aria-label="t('richEditor.link')" :disabled="disabled" @mousedown.prevent @click="addLink">
-            <Icon name="link" :size="13" />
+          <button
+            class="djm-rich-editor-btn"
+            type="button"
+            :title="t('richEditor.bgColor')"
+            :aria-label="t('richEditor.bgColor')"
+            :aria-expanded="String(panel === 'bg')"
+            :disabled="disabled || sourceMode"
+            @mousedown.prevent
+            @click.stop="togglePanel('bg')"
+          >
+            <span class="djm-rich-editor-letter djm-rich-editor-letter-bg" :style="{ background: bgColor }">A</span>
           </button>
+          <div v-if="panel === 'text' || panel === 'bg'" class="djm-rich-editor-panel" role="group" :aria-label="t('richEditor.textColor')">
+            <button
+              v-for="color in colors"
+              :key="color"
+              class="djm-rich-editor-swatch"
+              type="button"
+              :title="color"
+              :aria-label="color"
+              :style="{ background: color }"
+              @mousedown.prevent
+              @click="applyColor(panel, color)"
+            ></button>
+          </div>
         </div>
 
-        <div class="djm-rich-editor-group">
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.clearFormat')" :disabled="disabled" @mousedown.prevent @click="exec('removeFormat')">{{ t('richEditor.clearFormat') }}</button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.undo')" :aria-label="t('richEditor.undo')" :disabled="disabled" @mousedown.prevent @click="exec('undo')">\u21B6</button>
-          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.redo')" :aria-label="t('richEditor.redo')" :disabled="disabled" @mousedown.prevent @click="exec('redo')">\u21B7</button>
+        <div class="djm-rich-editor-group" v-if="has('align')">
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignLeft')" :aria-label="t('richEditor.alignLeft')" :aria-pressed="String(formats.align === 'left')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyLeft')"><Icon name="align-left" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignCenter')" :aria-label="t('richEditor.alignCenter')" :aria-pressed="String(formats.align === 'center')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyCenter')"><Icon name="align-center" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignRight')" :aria-label="t('richEditor.alignRight')" :aria-pressed="String(formats.align === 'right')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyRight')"><Icon name="align-right" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.alignJustify')" :aria-label="t('richEditor.alignJustify')" :aria-pressed="String(formats.align === 'justify')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('justifyFull')"><Icon name="align-justify" :size="13" /></button>
         </div>
 
-        <div class="djm-rich-editor-spacer"></div>
-        <button
-          class="djm-rich-editor-btn"
-          :class="{ 'djm-is-active': sourceMode }"
-          type="button"
-          :aria-pressed="String(sourceMode)"
-          :disabled="disabled"
-          @click="toggleSource"
-        >
-          <Icon name="code" :size="13" />{{ sourceMode ? t('richEditor.visual') : t('richEditor.source') }}
-        </button>
+        <div class="djm-rich-editor-group" v-if="has('list')">
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.bulletList')" :aria-label="t('richEditor.bulletList')" :aria-pressed="String(formats.list === 'ul')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('insertUnorderedList')"><Icon name="list" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.numberList')" :aria-label="t('richEditor.numberList')" :aria-pressed="String(formats.list === 'ol')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('insertOrderedList')"><Icon name="list-ordered" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.outdent')" :aria-label="t('richEditor.outdent')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('outdent')"><Icon name="outdent" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.indent')" :aria-label="t('richEditor.indent')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('indent')"><Icon name="indent" :size="13" /></button>
+        </div>
+
+        <div class="djm-rich-editor-group" v-if="has('insert')">
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.link')" :aria-label="t('richEditor.link')" :disabled="disabled || sourceMode" @mousedown.prevent @click="addLink"><Icon name="link" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.unlink')" :aria-label="t('richEditor.unlink')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('unlink')"><Icon name="unlink" :size="13" /></button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.singleImage')" :aria-label="t('richEditor.singleImage')" :disabled="disabled || sourceMode" @mousedown.prevent @click="pickImage(false)"><Icon name="image" :size="13" /></button>
+          <button v-if="multiple" class="djm-rich-editor-btn" type="button" :title="t('richEditor.multiImage')" :aria-label="t('richEditor.multiImage')" :disabled="disabled || sourceMode" @mousedown.prevent @click="pickImage(true)"><Icon name="images" :size="13" /></button>
+          <MediaPicker
+            v-if="mediaLibrary.length"
+            class="djm-rich-editor-picker"
+            multiple
+            accept="image"
+            :items="mediaLibrary"
+            :title="t('richEditor.mediaLibrary')"
+            :disabled="disabled || sourceMode"
+            @change="insertMedia"
+          >
+            <template #trigger="{ open }">
+              <button
+                class="djm-rich-editor-btn"
+                type="button"
+                :title="t('richEditor.mediaLibrary')"
+                :aria-label="t('richEditor.mediaLibrary')"
+                :disabled="disabled || sourceMode"
+                @mousedown.prevent="rememberRange"
+                @click="open"
+              ><Icon name="grid" :size="13" /></button>
+            </template>
+          </MediaPicker>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.hr')" :aria-label="t('richEditor.hr')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('insertHorizontalRule')">\u2014</button>
+          <button class="djm-rich-editor-btn" type="button" :title="t('richEditor.clearFormat')" :aria-label="t('richEditor.clearFormat')" :disabled="disabled || sourceMode" @mousedown.prevent @click="exec('removeFormat')"><span class="djm-rich-editor-glyph">T\xD7</span></button>
+        </div>
+
+        <div class="djm-rich-editor-spacer" v-if="has('view')"></div>
+        <div class="djm-rich-editor-group djm-rich-editor-group-end" v-if="has('view')">
+          <button
+            class="djm-rich-editor-btn"
+            :class="{ 'djm-is-active': sourceMode }"
+            type="button"
+            :title="sourceMode ? t('richEditor.visual') : t('richEditor.source')"
+            :aria-label="sourceMode ? t('richEditor.visual') : t('richEditor.source')"
+            :aria-pressed="String(sourceMode)"
+            :disabled="disabled"
+            @click="toggleSource"
+          ><Icon name="code" :size="13" /></button>
+          <button
+            class="djm-rich-editor-btn"
+            :class="{ 'djm-is-active': fullscreen }"
+            type="button"
+            :title="fullscreen ? t('richEditor.exitFullscreen') : t('richEditor.fullscreen')"
+            :aria-label="fullscreen ? t('richEditor.exitFullscreen') : t('richEditor.fullscreen')"
+            :aria-pressed="String(fullscreen)"
+            :disabled="disabled"
+            @click="toggleFullscreen"
+          ><Icon :name="fullscreen ? 'minimize' : 'maximize'" :size="13" /></button>
+        </div>
       </div>
 
       <div
@@ -9762,6 +10621,8 @@ Minimum version required to store current data is: ` + i + `.
         :style="{ minHeight: minHeight + 'px' }"
         @input="syncFromDom"
         @paste="onPaste"
+        @dragover="onDragOver"
+        @drop="onDrop"
       ></div>
 
       <textarea
@@ -9774,6 +10635,21 @@ Minimum version required to store current data is: ` + i + `.
         spellcheck="false"
         @input="onSourceInput"
       ></textarea>
+
+      <div v-if="showCount" class="djm-rich-editor-foot">
+        <span v-if="uploadCount" class="djm-rich-editor-foot-item">{{ t('richEditor.uploading', { count: uploadCount }) }}</span>
+        <span class="djm-rich-editor-foot-item">{{ t('richEditor.wordCount', { count }) }}</span>
+      </div>
+
+      <input
+        ref="fileInput"
+        class="djm-rich-editor-file"
+        type="file"
+        :accept="accept"
+        tabindex="-1"
+        aria-hidden="true"
+        @change="onFilesChange"
+      />
     </div>
   `
   };
@@ -11837,197 +12713,6 @@ Minimum version required to store current data is: ` + i + `.
   `
   };
 
-  // src/components/media-picker/index.js
-  var media_picker_default = {
-    name: "DjmMediaPicker",
-    components: { DjmModal: modal_default, DjmPagination: pagination_default, DjmIcon: icon_default },
-    props: {
-      modelValue: { type: [Array, String, Number], default: "" },
-      items: { type: Array, default: () => [] },
-      multiple: { type: Boolean, default: false },
-      // 最多选几个，0 表示不限
-      limit: { type: Number, default: 0 },
-      // image 只显示图片，file 只显示非图片，空串不过滤
-      accept: { type: String, default: "" },
-      title: { type: String, default: "" },
-      triggerText: { type: String, default: "" },
-      pageSize: { type: Number, default: 12 },
-      disabled: { type: Boolean, default: false }
-    },
-    emits: ["update:modelValue", "change"],
-    setup(props, { emit }) {
-      const open = ref(false);
-      const keyword = ref("");
-      const page = ref(1);
-      const temp = ref([]);
-      const selectedIds = computed(() => {
-        if (props.multiple) return Array.isArray(props.modelValue) ? props.modelValue : [];
-        if (props.modelValue === "" || props.modelValue === null || props.modelValue === void 0) return [];
-        return [props.modelValue];
-      });
-      function isImage(item) {
-        if (item.type) return item.type === "image";
-        return /\.(png|jpe?g|gif|webp|svg|avif)$/i.test(item.url || "");
-      }
-      const filtered = computed(() => {
-        const key = keyword.value.trim().toLowerCase();
-        return props.items.filter((item) => {
-          if (props.accept === "image" && !isImage(item)) return false;
-          if (props.accept === "file" && isImage(item)) return false;
-          if (key && !String(item.name || "").toLowerCase().includes(key)) return false;
-          return true;
-        });
-      });
-      const paged = computed(() => {
-        const start = (page.value - 1) * props.pageSize;
-        return filtered.value.slice(start, start + props.pageSize);
-      });
-      watch(keyword, () => {
-        page.value = 1;
-      });
-      watch(
-        () => filtered.value.length,
-        () => {
-          const max = Math.max(1, Math.ceil(filtered.value.length / props.pageSize));
-          if (page.value > max) page.value = max;
-        }
-      );
-      function isChecked(id) {
-        return temp.value.includes(id);
-      }
-      function atLimit() {
-        return props.limit > 0 && temp.value.length >= props.limit;
-      }
-      function toggle(item) {
-        if (props.multiple) {
-          if (isChecked(item.id)) {
-            temp.value = temp.value.filter((id) => id !== item.id);
-            return;
-          }
-          if (atLimit()) return;
-          temp.value = [...temp.value, item.id];
-          return;
-        }
-        temp.value = [item.id];
-      }
-      function openPanel() {
-        if (props.disabled) return;
-        temp.value = [...selectedIds.value];
-        keyword.value = "";
-        page.value = 1;
-        open.value = true;
-      }
-      function commit() {
-        const next = props.multiple ? [...temp.value] : temp.value[0] !== void 0 ? temp.value[0] : "";
-        emit("update:modelValue", next);
-        emit("change", next);
-        open.value = false;
-      }
-      function cancel() {
-        temp.value = [...selectedIds.value];
-        open.value = false;
-      }
-      return {
-        open,
-        keyword,
-        page,
-        temp,
-        selectedIds,
-        filtered,
-        paged,
-        isImage,
-        isChecked,
-        atLimit,
-        toggle,
-        openPanel,
-        commit,
-        cancel,
-        t
-      };
-    },
-    template: `
-    <span class="djm-media-picker">
-      <slot name="trigger" :open="openPanel" :count="selectedIds.length">
-        <button
-          class="djm-btn"
-          type="button"
-          :disabled="disabled"
-          @click="openPanel"
-        >{{ triggerText || t('mediaPicker.select') }}<span v-if="selectedIds.length" class="djm-media-picker-count">{{ selectedIds.length }}</span></button>
-      </slot>
-
-      <DjmModal
-        :model-value="open"
-        :title="title || t('mediaPicker.title')"
-        width="760px"
-        @update:model-value="cancel"
-      >
-        <div class="djm-media-toolbar">
-          <label class="djm-media-search">
-            <DjmIcon name="search" :size="13" />
-            <input
-              v-model="keyword"
-              class="djm-media-search-input"
-              type="text"
-              :placeholder="t('mediaPicker.search')"
-              :aria-label="t('mediaPicker.search')"
-            />
-          </label>
-          <span class="djm-media-toolbar-slot">
-            <slot name="toolbar"></slot>
-          </span>
-        </div>
-
-        <div class="djm-media-grid" role="listbox" :aria-multiselectable="multiple ? 'true' : 'false'">
-          <div
-            v-for="item in paged"
-            :key="item.id"
-            class="djm-media-item"
-            :class="{
-              'djm-is-checked': isChecked(item.id),
-              'djm-is-disabled': multiple && atLimit() && !isChecked(item.id)
-            }"
-            role="option"
-            tabindex="0"
-            :aria-selected="String(isChecked(item.id))"
-            @click="toggle(item)"
-            @keydown.enter.prevent="toggle(item)"
-            @keydown.space.prevent="toggle(item)"
-          >
-            <div class="djm-media-thumb">
-              <img v-if="isImage(item)" :src="item.url" :alt="item.name" loading="lazy" />
-              <DjmIcon v-else name="folder" :size="26" />
-              <span v-if="isChecked(item.id)" class="djm-media-check">
-                <DjmIcon name="check" :size="11" />
-              </span>
-            </div>
-            <div class="djm-media-name" :title="item.name">{{ item.name }}</div>
-          </div>
-          <div v-if="!paged.length" class="djm-media-empty">{{ t('mediaPicker.empty') }}</div>
-        </div>
-
-        <div class="djm-media-foot">
-          <span class="djm-media-total">
-            {{ t('mediaPicker.total', { total: filtered.length }) }}
-            <em v-if="multiple && limit > 0">{{ t('mediaPicker.limit', { limit }) }}</em>
-          </span>
-          <DjmPagination
-            v-if="filtered.length > pageSize"
-            v-model:page="page"
-            :page-size="pageSize"
-            :total="filtered.length"
-          />
-        </div>
-
-        <template #footer>
-          <button class="djm-btn" type="button" @click="cancel">{{ t('common.cancel') }}</button>
-          <button class="djm-btn djm-btn-primary" type="button" @click="commit">{{ t('common.confirm') }}</button>
-        </template>
-      </DjmModal>
-    </span>
-  `
-  };
-
   // src/components/kanban/index.js
   function cloneColumns(list) {
     return (list || []).map((col) => ({ ...col, cards: (col.cards || []).slice() }));
@@ -15346,7 +16031,7 @@ Minimum version required to store current data is: ` + i + `.
     org_chart_default,
     page_tabs_default
   ];
-  var version = "0.67.4";
+  var version = "0.72.0";
   function install(app, options = {}) {
     if (options.locale) setLocale(options.locale);
     components.forEach((component) => app.component(component.name, component));