md-editor-v3/lib/es/MdEditor.mjs

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...

import { a as J, D as ot } from "./chunks/index.mjs";
import { s as lt, a as at, M as Oe } from "./chunks/index4.mjs";
import { C as nt, c as rt, a as st, e as it, b as ct, u as ut, d as dt, f as mt, g as bt, h as vt, i as gt, j as ht, k as ft, M as pt } from "./chunks/index3.mjs";
import Tt from "./ModalToolbar.mjs";
import wt from "./NormalToolbar.mjs";
import { inject as r, watch as I, nextTick as ne, onMounted as W, ref as x, defineComponent as w, createVNode as l, reactive as U, toRef as ye, Fragment as Ve, computed as K, cloneVNode as ae, createApp as yt, shallowRef as Ct, onBeforeUnmount as ve } from "vue";
import { g as G, p as a, a as kt, M as oe, d as $t, b as xt } from "./chunks/config.mjs";
import { linkTo as St, throttle as It, createSmoothScroll as We, draggingScroll as Lt } from "@vavt/util";
import { deleteLine as Et, history as Ce, defaultKeymap as Nt, historyKeymap as At, indentWithTab as Dt, undo as Mt, redo as Rt } from "@codemirror/commands";
import { markdown as Ft } from "@codemirror/lang-markdown";
import { languages as Bt } from "@codemirror/language-data";
import { EditorState as se, EditorSelection as q, Compartment as z, StateEffect as _e, StateField as ze, RangeSetBuilder as Ht } from "@codemirror/state";
import { placeholder as Pt, EditorView as R, showTooltip as Ot, Decoration as Vt, WidgetType as Wt, keymap as _t, drawSelection as zt } from "@codemirror/view";
import { b, E as j, R as f, C as Ut, U as ge, a as Ue, c as qe, O as Ke, d as qt, e as Kt, T as Gt, S as jt, G as ke } from "./chunks/event-bus.mjs";
import { indentUnit as Yt, syntaxHighlighting as Ge, HighlightStyle as je } from "@codemirror/language";
import { autocompletion as Zt } from "@codemirror/autocomplete";
import { a as Xt } from "./chunks/dom.mjs";
import { I as $, M as Jt } from "./chunks/index2.mjs";
import { b as Qt } from "./chunks/index5.mjs";
import { tags as d } from "@lezer/highlight";
import { searchKeymap as eo } from "@codemirror/search";
import { g as $e } from "./chunks/vue-tsx.mjs";
const to = (e, t, o) => {
  const n = r("editorId"), i = r("setting");
  let s = () => {
  }, c = () => {
  };
  const u = () => {
    s();
    const m = o.value?.view.contentDOM.getRootNode(), g = m?.querySelector(
      `#${n} .cm-scroller`
    ), v = m?.querySelector(
      `[id="${n}-preview-wrapper"]`
    ), p = m?.querySelector(
      `[id="${n}-html-wrapper"]`
    );
    (v || p) && ([c, s] = (v ? lt : at)(
      g,
      v || p,
      o.value
    ), e.scrollAuto && c());
  };
  I([t, i], () => {
    ne(u);
  }), I(
    () => e.scrollAuto,
    (m) => {
      m ? c() : s();
    }
  ), I(
    () => i.value.previewOnly,
    (m) => {
      m ? s() : c();
    }
  ), W(u);
}, ie = async (e, t, o) => {
  if (/^h[1-6]$/.test(e))
    return oo(e, t);
  if (e === "prettier")
    return await lo(t, o);
  switch (e) {
    case "bold":
    case "underline":
    case "italic":
    case "strikeThrough":
    case "sub":
    case "sup":
    case "codeRow":
    case "katexInline":
    case "katexBlock":
      return no(e, t);
    case "quote":
    case "orderedList":
    case "unorderedList":
    case "task":
      return so(e, t);
    case "code":
      return io(o, t);
    case "table":
      return mo(o);
    case "link": {
      const { desc: n = "", url: i = "" } = o, s = `[${n}](${i})`;
      return {
        text: s,
        options: {
          select: i === "",
          deviationStart: s.length - i.length - 1,
          deviationEnd: -1
        }
      };
    }
    case "image":
      return uo(o);
    case "flow":
    case "sequence":
    case "gantt":
    case "class":
    case "state":
    case "pie":
    case "relationship":
    case "journey":
      return co(e);
    case "universal":
      return bo(t.getSelectedText(), o);
    default:
      return { text: "", options: {} };
  }
}, oo = (e, t) => {
  const o = e.slice(1), n = "#".repeat(Number(o)), [i, s, c] = he(t, {
    wholeLine: !0
  });
  return {
    text: `${n} ${i}`,
    options: { deviationStart: n.length + 1, replaceStart: s, replaceEnd: c }
  };
}, lo = async (e, t) => {
  const o = window.prettier || G.editorExtensions.prettier?.prettierInstance, n = [
    window.prettierPlugins?.markdown || G.editorExtensions.prettier?.parserMarkdownInstance
  ];
  return !o || !n[0] ? (b.emit(t.editorId, j, {
    name: "prettier",
    message: "prettier is undefined"
  }), {
    text: e.getValue(),
    options: { select: !1, replaceAll: !0 }
  }) : {
    text: await o.format(e.getValue(), {
      parser: "markdown",
      plugins: n
    }),
    options: { select: !1, replaceAll: !0 }
  };
}, ao = {
  bold: ["**", "**", 2, -2],
  underline: ["<u>", "</u>", 3, -4],
  italic: ["*", "*", 1, -1],
  strikeThrough: ["~~", "~~", 2, -2],
  sub: ["~", "~", 1, -1],
  sup: ["^", "^", 1, -1],
  codeRow: ["`", "`", 1, -1],
  katexInline: ["$", "$", 1, -1],
  katexBlock: [`
$$
`, `
$$
`, 4, -4]
}, no = (e, t) => {
  const o = t.getSelectedText(), [n, i, s, c] = ao[e];
  return {
    text: `${n}${o}${i}`,
    options: {
      deviationStart: s,
      deviationEnd: c
      // replaceStart, replaceEnd
    }
  };
}, ro = {
  quote: "> ",
  unorderedList: "- ",
  orderedList: 1,
  task: "- [ ] "
}, so = (e, t) => {
  const [o, n, i] = he(t, {
    wholeLine: !0
  }), s = o.split(`
`), c = ro[e], u = e === "orderedList" ? s.map((v, p) => `${c + p}. ${v}`) : s.map((v) => `${c}${v}`), m = e === "orderedList" ? "1. " : c.toString(), g = s.length === 1 ? m.length : 0;
  return {
    text: u.join(`
`),
    options: { deviationStart: g, replaceStart: n, replaceEnd: i }
  };
}, io = (e, t) => {
  const [o, n, i] = he(t), s = e.mode || "language", c = `
\`\`\`${s}
${e.text || o || ""}
\`\`\`
`;
  return {
    text: c,
    options: {
      deviationStart: 4,
      deviationEnd: 4 + s.length - c.length,
      replaceStart: n,
      replaceEnd: i
    }
  };
}, co = (e) => ({
  text: `
\`\`\`mermaid
${{
    flow: `flowchart TD 
  Start --> Stop`,
    sequence: `sequenceDiagram
  A->>B: hello!
  B-->>A: hi!`,
    gantt: `gantt
title Gantt Chart
dateFormat  YYYY-MM-DD`,
    class: `classDiagram
  class Animal`,
    state: `stateDiagram-v2
  s1 --> s2`,
    pie: `pie
  "Dogs" : 386
  "Cats" : 85
  "Rats" : 15`,
    relationship: `erDiagram
  CAR ||--o{ NAMED-DRIVER : allows`,
    journey: `journey
  title My Journey`,
    ...G.editorConfig.mermaidTemplate
  }[e]}
\`\`\`
`,
  options: { deviationStart: 12, deviationEnd: -5 }
}), uo = (e) => {
  const { desc: t = "", url: o = "", urls: n } = e;
  let i = "";
  const s = o === "" && (!n || n instanceof Array && n.length === 0);
  return n instanceof Array ? i = n.reduce((c, u) => {
    const {
      url: m = "",
      alt: g = "",
      title: v = ""
    } = typeof u == "object" ? u : { url: u };
    return c + `![${g}](${m}${v ? " '" + v + "'" : ""})
`;
  }, "") : i = `![${t}](${o})
`, {
    text: i,
    options: {
      select: o === "",
      deviationStart: s ? i.length - o.length - 2 : i.length,
      deviationEnd: s ? -2 : 0
    }
  };
}, mo = (e) => {
  const { selectedShape: t = { x: 1, y: 1 } } = e, { x: o, y: n } = t;
  let i = `
| Column`;
  for (let s = 0; s <= n; s++)
    i += " |";
  i += `
|`;
  for (let s = 0; s <= n; s++)
    i += " - |";
  for (let s = 0; s <= o; s++) {
    i += `
|`;
    for (let c = 0; c <= n; c++)
      i += " |";
  }
  return i += `
`, { text: i, options: { deviationStart: 3, deviationEnd: 10 - i.length } };
}, bo = (e, t) => {
  const { generate: o } = t, n = o(e);
  return {
    text: n.targetValue,
    options: {
      select: n.select ?? !0,
      deviationStart: n.deviationStart || 0,
      deviationEnd: n.deviationEnd || 0
    }
  };
}, he = (e, t = { wholeLine: !1 }) => {
  const o = e.view.state, n = o.selection.main;
  if (n.empty) {
    const i = o.doc.lineAt(n.from);
    return [o.doc.lineAt(n.from).text, i.from, i.to];
  } else if (t.wholeLine) {
    const i = o.doc.lineAt(n.from), s = o.doc.lineAt(n.to);
    return [
      o.doc.sliceString(i.from, s.to),
      i.from,
      s.to
    ];
  }
  return [
    o.doc.sliceString(n.from, n.to),
    n.from,
    n.to
  ];
}, _ = (e) => {
  const t = new z();
  return (n) => (t.get(e.state) ? e.dispatch({ effects: t.reconfigure(n) }) : e.dispatch({
    effects: _e.appendConfig.of(t.of(n))
  }), !0);
};
class vo {
  view;
  maxLength = Number.MAX_SAFE_INTEGER;
  // 切换tabSize的执行方法。切换时，Compartment实例需要相同
  toggleTabSize;
  togglePlaceholder;
  /**
   * 设置全部的扩展
   */
  setExtensions;
  toggleDisabled;
  toggleReadOnly;
  toggleMaxlength;
  getValue() {
    return this.view.state.doc.toString();
  }
  /**
   * 设置内容
   *
   * @param insert 待插入内容
   * @param from 插入开始位置
   * @param to 插入结束位置
   */
  setValue(t, o = 0, n = this.view.state.doc.length) {
    this.view.dispatch({
      changes: {
        from: o,
        to: n,
        insert: t
      }
    });
  }
  /**
   * 获取选中的文本
   */
  getSelectedText() {
    const { from: t, to: o } = this.view.state.selection.main;
    return this.view.state.sliceDoc(t, o);
  }
  /**
   * 使用新的内容替换选中的内容
   *
   * @param text 待替换内容
   * @param options 替换后是否选中
   */
  replaceSelectedText(t, o, n) {
    const i = {
      // 是否选中
      select: !0,
      // 选中时，开始位置的偏移量
      deviationStart: 0,
      // 结束的偏移量
      deviationEnd: 0,
      // 直接替换所有文本
      replaceAll: !1,
      // 替换旧文本的开始位置
      replaceStart: -1,
      // 替换旧文本的结束位置
      replaceEnd: -1,
      ...o
    };
    try {
      if (i.replaceAll) {
        if (this.setValue(t), t.length > this.maxLength)
          throw new Error("The input text is too long");
        return;
      }
      if (this.view.state.doc.length - this.getSelectedText().length + t.length > this.maxLength)
        throw new Error("The input text is too long");
      const { from: s } = this.view.state.selection.main;
      i.replaceStart !== -1 ? this.view.dispatch({
        changes: {
          from: i.replaceStart,
          to: i.replaceEnd,
          insert: t
        }
      }) : this.view.dispatch(this.view.state.replaceSelection(t)), i.select && this.view.dispatch({
        selection: {
          anchor: i.replaceStart === -1 ? s + i.deviationStart : i.replaceStart + i.deviationStart,
          head: i.replaceStart === -1 ? s + t.length + i.deviationEnd : i.replaceStart + t.length + i.deviationEnd
        }
      }), this.view.focus();
    } catch (s) {
      if (s.message === "The input text is too long")
        b.emit(n, j, {
          name: "overlength",
          message: s.message,
          data: t
        });
      else
        throw s;
    }
  }
  constructor(t) {
    this.view = t, this.toggleTabSize = _(this.view), this.togglePlaceholder = _(this.view), this.setExtensions = _(this.view), this.toggleDisabled = _(this.view), this.toggleReadOnly = _(this.view), this.toggleMaxlength = _(this.view);
  }
  /**
   * 设置tabSize
   *
   * @param tabSize 需要切换的大小
   */
  setTabSize(t) {
    this.toggleTabSize([
      se.tabSize.of(t),
      Yt.of(" ".repeat(t))
    ]);
  }
  /**
   * 设置placeholder
   *
   * @param t 目标内容
   */
  setPlaceholder(t) {
    this.togglePlaceholder(Pt(t));
  }
  focus(t) {
    if (this.view.focus(), !t)
      return;
    let o = 0, n = 0, i = 0;
    switch (t) {
      case "start":
        break;
      case "end": {
        o = n = i = this.getValue().length;
        break;
      }
      default:
        o = t.rangeAnchor || t.cursorPos, n = t.rangeHead || t.cursorPos, i = t.cursorPos;
    }
    this.view.dispatch({
      scrollIntoView: !0,
      selection: q.create(
        [q.range(o, n), q.cursor(i)],
        1
      )
    });
  }
  setDisabled(t) {
    this.toggleDisabled([R.editable.of(!t)]);
  }
  setReadOnly(t) {
    this.toggleReadOnly([se.readOnly.of(t)]);
  }
  setMaxLength(t) {
    this.maxLength = t, this.toggleMaxlength([
      se.changeFilter.of((o) => o.newDoc.length <= t)
    ]);
  }
}
const go = (e, t) => {
  if (e === t) return !0;
  if (e.length !== t.length) return !1;
  for (let o = 0; o < e.length; o++)
    if (e[o] !== t[o]) return !1;
  return !0;
}, ho = (e, t) => {
  const o = x(t.value);
  I([t], () => {
    (!o.value || !go(o.value, t.value)) && (o.value = t.value, e());
  });
}, le = (e, t, o, n, i) => (s, c, u, m) => {
  const g = `${e}${t}${o}${n}`, v = u + c.label.length + (i === "title" ? o.length : 0);
  s.dispatch({
    changes: { from: u, to: m, insert: g },
    selection: q.create(
      [
        q.range(
          u + c.label.length + (i === "title" ? 1 : -t.length),
          v
        ),
        q.cursor(v)
      ],
      1
    )
  }), s.focus();
}, xe = (e) => (t, o, n, i) => {
  const s = e.slice(i - n);
  t.dispatch(t.state.replaceSelection(`${s} `));
}, Se = (e) => {
  const t = (o) => {
    const n = o.matchBefore(
      /^#+|^-\s*\[*\s*\]*|`+|\[|!\[*|^\|\s?\|?|\$\$?|!+\s*\w*/
    );
    return n === null || n.from == n.to && o.explicit ? null : {
      from: n.from,
      options: [
        // 标题
        ...["h2", "h3", "h4", "h5", "h6"].map((i, s) => {
          const c = new Array(s + 2).fill("#").join("");
          return {
            label: c,
            type: "text",
            apply: xe(c)
          };
        }),
        // 任务列表
        ...["unchecked", "checked"].map((i) => {
          const s = i === "checked" ? "- [x]" : "- [ ]";
          return {
            label: s,
            type: "text",
            apply: xe(s)
          };
        }),
        // 代码
        ...[
          ["`", ""],
          ["```", "language"],
          ["```mermaid\n", ""],
          ["```echarts\n", ""]
        ].map((i) => ({
          label: `${i[0]}${i[1]}`,
          type: "text",
          apply: le(i[0], i[1], "", i[0] === "`" ? "`" : "\n```", "type")
        })),
        // 链接
        {
          label: "[]()",
          type: "text"
        },
        {
          label: "![]()",
          type: "text"
        },
        // 表格
        {
          label: "| |",
          type: "text",
          detail: "table",
          apply: `| col | col | col |
| - | - | - |
| content | content | content |
| content | content | content |`
        },
        // 公式
        {
          label: "$",
          type: "text",
          apply: le("$", "", "", "$", "type")
        },
        {
          label: "$$",
          type: "text",
          apply: le("$$", "", `
`, `
$$`, "title")
        },
        // 那啥？
        ...[
          "note",
          "abstract",
          "info",
          "tip",
          "success",
          "question",
          "warning",
          "failure",
          "danger",
          "bug",
          "example",
          "quote",
          "hint",
          "caution",
          "error",
          "attention"
        ].map((i) => ({
          label: `!!! ${i}`,
          type: "text",
          apply: le("!!!", ` ${i}`, " Title", `

!!!`, "title")
        }))
      ]
    };
  };
  return Zt({
    override: e ? [t, ...e] : [t]
  });
}, fo = /* @__PURE__ */ w({
  name: `${a}-divider`,
  setup() {
    return () => l("div", {
      class: `${a}-divider`
    }, null);
  }
}), po = /* @__PURE__ */ w({
  name: "ToolbarBold",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.bold,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "bold");
      },
      type: "button"
    }, [l($, {
      name: "bold"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.bold])]);
  }
}), To = /* @__PURE__ */ w({
  name: "ToolbarCatalog",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = r("catalogVisible");
    return () => l("button", {
      class: [`${a}-toolbar-item`, i.value && `${a}-toolbar-active`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.catalog,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, Ut);
      },
      key: "bar-catalog",
      type: "button"
    }, [l($, {
      name: "catalog"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.catalog])]);
  }
}), wo = /* @__PURE__ */ w({
  name: "ToolbarCode",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.code,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "code");
      },
      type: "button"
    }, [l($, {
      name: "code"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.code])]);
  }
}), yo = /* @__PURE__ */ w({
  name: "ToolbarCodeRow",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.codeRow,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "codeRow");
      },
      type: "button"
    }, [l($, {
      name: "code-row"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.codeRow])]);
  }
}), Co = /* @__PURE__ */ w({
  name: "ToolbarFullscreen",
  setup() {
    const e = r("usedLanguageText"), t = r("disabled"), o = r("showToolbarName"), n = r("setting"), {
      fullscreenHandler: i
    } = el();
    return () => l("button", {
      class: [`${a}-toolbar-item`, n.value.fullscreen && `${a}-toolbar-active`, t?.value && `${a}-disabled`],
      title: e.value.toolbarTips?.fullscreen,
      disabled: t?.value,
      onClick: () => {
        i();
      },
      type: "button"
    }, [l($, {
      name: n.value.fullscreen ? "fullscreen-exit" : "fullscreen"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.fullscreen])]);
  }
}), ko = /* @__PURE__ */ w({
  name: "ToolbarGithub",
  setup() {
    const e = r("usedLanguageText"), t = r("disabled"), o = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, t?.value && `${a}-disabled`],
      title: e.value.toolbarTips?.github,
      disabled: t?.value,
      onClick: () => {
        St("https://github.com/imzbf/md-editor-v3");
      },
      type: "button"
    }, [l($, {
      name: "github"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.github])]);
  }
}), $o = /* @__PURE__ */ w({
  name: "ToolbarHtmlPreview",
  setup() {
    const e = r("usedLanguageText"), t = r("disabled"), o = r("showToolbarName"), n = r("setting"), i = r("updateSetting");
    return () => l("button", {
      class: [`${a}-toolbar-item`, n.value.htmlPreview && `${a}-toolbar-active`, t?.value && `${a}-disabled`],
      title: e.value.toolbarTips?.htmlPreview,
      disabled: t?.value,
      onClick: () => {
        i("htmlPreview");
      },
      type: "button"
    }, [l($, {
      name: "preview-html"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.htmlPreview])]);
  }
}), xo = /* @__PURE__ */ w({
  name: "ToolbarImage",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.image,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "image");
      },
      type: "button"
    }, [l($, {
      name: "image"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.image])]);
  }
}), So = {
  visible: {
    type: Boolean,
    default: !1
  },
  onCancel: {
    type: Function,
    default: () => {
    }
  },
  onOk: {
    type: Function,
    default: () => {
    }
  }
}, Io = /* @__PURE__ */ w({
  name: `${a}-modal-clip`,
  props: So,
  setup(e) {
    const t = r("usedLanguageText"), o = r("editorId"), n = r("rootRef");
    let i = G.editorExtensions.cropper.instance;
    const s = x(), c = x(), u = x(), m = U({
      cropperInited: !1,
      imgSelected: !1,
      imgSrc: "",
      // 是否全屏
      isFullscreen: !1
    });
    let g = null;
    I(() => e.visible, () => {
      e.visible && !m.cropperInited && (i = i || window.Cropper, s.value.onchange = () => {
        if (!i) {
          b.emit(o, j, {
            name: "Cropper",
            message: "Cropper is undefined"
          });
          return;
        }
        const p = s.value.files || [];
        if (m.imgSelected = !0, p?.length > 0) {
          const y = new FileReader();
          y.onload = (C) => {
            m.imgSrc = C.target.result;
          }, y.readAsDataURL(p[0]);
        }
      });
    }), I(() => [m.imgSelected], () => {
      u.value.style = "";
    }), I([ye(() => m.isFullscreen), ye(() => m.imgSrc)], () => {
      m.imgSrc && ne(() => {
        g?.destroy(), u.value.style = "", c.value && (g = new i(c.value, {
          viewMode: 2,
          preview: n.value.getRootNode().querySelector(`.${a}-clip-preview-target`)
          // aspectRatio: 16 / 9,
        }));
      });
    });
    const v = () => {
      g.clear(), g.destroy(), g = null, s.value.value = "", m.imgSelected = !1, m.imgSrc = "";
    };
    return () => l(Jt, {
      class: `${a}-modal-clip`,
      title: t.value.clipModalTips?.title,
      visible: e.visible,
      onClose: e.onCancel,
      showAdjust: !0,
      isFullscreen: m.isFullscreen,
      onAdjust: (p) => {
        m.isFullscreen = p;
      },
      width: "668px",
      height: "421px"
    }, {
      default: () => [l("div", {
        class: `${a}-form-item ${a}-clip`
      }, [l("div", {
        class: `${a}-clip-main`
      }, [m.imgSelected ? l("div", {
        class: `${a}-clip-cropper`
      }, [l("img", {
        src: m.imgSrc,
        ref: c,
        style: {
          display: "none"
        },
        alt: ""
      }, null), l("div", {
        class: `${a}-clip-delete`,
        onClick: v
      }, [l($, {
        name: "delete"
      }, null)])]) : l("div", {
        class: `${a}-clip-upload`,
        onClick: () => {
          s.value.click();
        },
        role: "button",
        tabindex: "0",
        "aria-label": t.value.imgTitleItem?.upload
      }, [l($, {
        name: "upload"
      }, null)])]), l("div", {
        class: `${a}-clip-preview`
      }, [l("div", {
        class: `${a}-clip-preview-target`,
        ref: u
      }, null)])]), l("div", {
        class: `${a}-form-item`
      }, [l("button", {
        class: `${a}-btn`,
        type: "button",
        onClick: () => {
          if (g) {
            const p = g.getCroppedCanvas();
            b.emit(o, ge, [Qt(p.toDataURL("image/png"))], e.onOk), v();
          }
        }
      }, [t.value.clipModalTips?.buttonUpload || t.value.linkModalTips?.buttonOK])]), l("input", {
        ref: s,
        accept: "image/*",
        type: "file",
        multiple: !1,
        style: {
          display: "none"
        },
        "aria-hidden": "true"
      }, null)]
    });
  }
}), Lo = {
  clipVisible: {
    type: Boolean,
    default: !1
  },
  onCancel: {
    type: Function,
    default: () => {
    }
  },
  onOk: {
    type: Function,
    default: () => {
    }
  }
}, Eo = /* @__PURE__ */ w({
  name: `${a}-modals`,
  props: Lo,
  setup(e) {
    return () => l(Io, {
      visible: e.clipVisible,
      onOk: e.onOk,
      onCancel: e.onCancel
    }, null);
  }
}), No = /* @__PURE__ */ w({
  name: "ToolbarImageDropdown",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = `${e}-toolbar-wrapper`, s = x(!1), c = x(!1), u = x(), m = () => {
      b.emit(e, ge, Array.from(u.value.files || [])), u.value.value = "";
    }, g = (v, p) => {
      o?.value || b.emit(e, f, v, p);
    };
    return W(() => {
      u.value.addEventListener("change", m);
    }), () => l(Ve, null, [l("label", {
      for: `${i}_label`,
      style: {
        display: "none"
      },
      "aria-label": t.value.imgTitleItem?.upload
    }, null), l("input", {
      id: `${i}_label`,
      ref: u,
      accept: "image/*",
      type: "file",
      multiple: !0,
      style: {
        display: "none"
      }
    }, null), l(J, {
      relative: `#${i}`,
      visible: s.value,
      onChange: (v) => {
        s.value = v;
      },
      disabled: o?.value,
      overlay: l("ul", {
        class: `${a}-menu`,
        onClick: () => {
          s.value = !1;
        },
        role: "menu"
      }, [l("li", {
        class: `${a}-menu-item ${a}-menu-item-image`,
        onClick: () => {
          g("image");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.imgTitleItem?.link]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-image`,
        onClick: () => {
          u.value.click();
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.imgTitleItem?.upload]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-image`,
        onClick: () => {
          c.value = !0;
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.imgTitleItem?.clip2upload])])
    }, {
      default: () => [l("button", {
        class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
        title: t.value.toolbarTips?.image,
        disabled: o?.value,
        type: "button"
      }, [l($, {
        name: "image"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.image])])]
    }), l(Eo, {
      clipVisible: c.value,
      onCancel: () => {
        c.value = !1;
      },
      onOk: (v) => {
        v && g("image", {
          desc: v.desc,
          url: v.url,
          transform: !0
        }), c.value = !1;
      }
    }, null)]);
  }
}), Ao = /* @__PURE__ */ w({
  name: "ToolbarItalic",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.italic,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "italic");
      },
      type: "button"
    }, [l($, {
      name: "italic"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.italic])]);
  }
}), Do = /* @__PURE__ */ w({
  name: "ToolbarKatex",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = `${e}-toolbar-wrapper`, s = x(!1), c = (u) => {
      o?.value || b.emit(e, f, u);
    };
    return () => l(J, {
      relative: `#${i}`,
      visible: s.value,
      onChange: (u) => {
        s.value = u;
      },
      disabled: o?.value,
      overlay: l("ul", {
        class: `${a}-menu`,
        onClick: () => {
          s.value = !1;
        },
        role: "menu"
      }, [l("li", {
        class: `${a}-menu-item ${a}-menu-item-katex`,
        onClick: () => {
          c("katexInline");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.katex?.inline]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-katex`,
        onClick: () => {
          c("katexBlock");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.katex?.block])]),
      key: "bar-katex"
    }, {
      default: () => [l("button", {
        class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
        title: t.value.toolbarTips?.katex,
        disabled: o?.value,
        type: "button"
      }, [l($, {
        name: "formula"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.katex])])]
    });
  }
}), Mo = /* @__PURE__ */ w({
  name: "ToolbarLink",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.link,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "link");
      },
      type: "button"
    }, [l($, {
      name: "link"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.link])]);
  }
}), Ro = /* @__PURE__ */ w({
  name: "ToolbarMermaid",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = `${e}-toolbar-wrapper`, s = x(!1), c = (u) => {
      o?.value || b.emit(e, f, u);
    };
    return () => l(J, {
      relative: `#${i}`,
      visible: s.value,
      onChange: (u) => {
        s.value = u;
      },
      disabled: o?.value,
      overlay: l("ul", {
        class: `${a}-menu`,
        onClick: () => {
          s.value = !1;
        },
        role: "menu"
      }, [l("li", {
        class: `${a}-menu-item ${a}-menu-item-mermaid`,
        onClick: () => {
          c("flow");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.mermaid?.flow]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-mermaid`,
        onClick: () => {
          c("sequence");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.mermaid?.sequence]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-mermaid`,
        onClick: () => {
          c("gantt");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.mermaid?.gantt]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-mermaid`,
        onClick: () => {
          c("class");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.mermaid?.class]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-mermaid`,
        onClick: () => {
          c("state");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.mermaid?.state]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-mermaid`,
        onClick: () => {
          c("pie");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.mermaid?.pie]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-mermaid`,
        onClick: () => {
          c("relationship");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.mermaid?.relationship]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-mermaid`,
        onClick: () => {
          c("journey");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.mermaid?.journey])]),
      key: "bar-mermaid"
    }, {
      default: () => [l("button", {
        class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
        title: t.value.toolbarTips?.mermaid,
        disabled: o?.value,
        type: "button"
      }, [l($, {
        name: "mermaid"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.mermaid])])]
    });
  }
}), Fo = /* @__PURE__ */ w({
  name: "ToolbarNext",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.next,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, Ue);
      },
      type: "button"
    }, [l($, {
      name: "next"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.next])]);
  }
}), Bo = /* @__PURE__ */ w({
  name: "ToolbarOrderedList",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.orderedList,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "orderedList");
      },
      type: "button"
    }, [l($, {
      name: "ordered-list"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.orderedList])]);
  }
}), Ho = /* @__PURE__ */ w({
  name: "ToolbarPageFullscreen",
  setup() {
    const e = r("usedLanguageText"), t = r("disabled"), o = r("showToolbarName"), n = r("setting"), i = r("updateSetting");
    return () => l("button", {
      class: [`${a}-toolbar-item`, n.value.pageFullscreen && `${a}-toolbar-active`, t?.value && `${a}-disabled`],
      title: e.value.toolbarTips?.pageFullscreen,
      disabled: t?.value,
      onClick: () => {
        i("pageFullscreen");
      },
      type: "button"
    }, [l($, {
      name: n.value.pageFullscreen ? "minimize" : "maximize"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.pageFullscreen])]);
  }
}), Po = /* @__PURE__ */ w({
  name: "ToolbarPrettier",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.prettier,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "prettier");
      },
      type: "button"
    }, [l($, {
      name: "prettier"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.prettier])]);
  }
}), Oo = /* @__PURE__ */ w({
  name: "ToolbarPreview",
  setup() {
    const e = r("usedLanguageText"), t = r("disabled"), o = r("showToolbarName"), n = r("setting"), i = r("updateSetting");
    return () => l("button", {
      class: [`${a}-toolbar-item`, n.value.preview && `${a}-toolbar-active`, t?.value && `${a}-disabled`],
      title: e.value.toolbarTips?.preview,
      disabled: t?.value,
      onClick: () => {
        i("preview");
      },
      type: "button"
    }, [l($, {
      name: "preview"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.preview])]);
  }
}), Vo = /* @__PURE__ */ w({
  name: "ToolbarPreviewOnly",
  setup() {
    const e = r("usedLanguageText"), t = r("disabled"), o = r("showToolbarName"), n = r("setting"), i = r("updateSetting");
    return () => l("button", {
      class: [`${a}-toolbar-item`, n.value.previewOnly && `${a}-toolbar-active`, t?.value && `${a}-disabled`],
      title: e.value.toolbarTips?.previewOnly,
      disabled: t?.value,
      onClick: () => {
        i("previewOnly");
      },
      type: "button"
    }, [l($, {
      name: "preview-only"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.previewOnly])]);
  }
}), Wo = /* @__PURE__ */ w({
  name: "ToolbarQuote",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.quote,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "quote");
      },
      type: "button"
    }, [l($, {
      name: "quote"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.quote])]);
  }
}), _o = /* @__PURE__ */ w({
  name: "ToolbarRevoke",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.revoke,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, qe);
      },
      type: "button"
    }, [l($, {
      name: "revoke"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.revoke])]);
  }
}), zo = /* @__PURE__ */ w({
  name: "ToolbarSave",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.save,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, Ke);
      },
      type: "button"
    }, [l($, {
      name: "save"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.save])]);
  }
}), Uo = /* @__PURE__ */ w({
  name: "ToolbarStrikeThrough",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.strikeThrough,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "strikeThrough");
      },
      type: "button"
    }, [l($, {
      name: "strike-through"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.strikeThrough])]);
  }
}), qo = /* @__PURE__ */ w({
  name: "ToolbarSub",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.sub,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "sub");
      },
      type: "button"
    }, [l($, {
      name: "sub"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.sub])]);
  }
}), Ko = /* @__PURE__ */ w({
  name: "ToolbarSup",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.sup,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "sup");
      },
      type: "button"
    }, [l($, {
      name: "sup"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.sup])]);
  }
}), Go = {
  tableShape: {
    type: Array,
    default: () => [6, 4]
  },
  onSelected: {
    type: Function,
    default: () => {
    }
  }
}, jo = /* @__PURE__ */ w({
  name: "TableShape",
  props: Go,
  setup(e) {
    const t = U({
      x: -1,
      y: -1
    }), o = K(() => JSON.stringify(e.tableShape)), n = () => {
      const s = [...JSON.parse(o.value)];
      return (!s[2] || s[2] < s[0]) && (s[2] = s[0]), (!s[3] || s[3] < s[3]) && (s[3] = s[1]), s;
    }, i = x(n());
    return I([o], () => {
      i.value = n();
    }), () => l("div", {
      class: `${a}-table-shape`,
      onMouseleave: () => {
        i.value = n(), t.x = -1, t.y = -1;
      }
    }, [new Array(i.value[1]).fill("").map((s, c) => l("div", {
      class: `${a}-table-shape-row`,
      key: `table-shape-row-${c}`
    }, [new Array(i.value[0]).fill("").map((u, m) => l("div", {
      class: `${a}-table-shape-col`,
      key: `table-shape-col-${m}`,
      onMouseenter: () => {
        t.x = c, t.y = m, m + 1 === i.value[0] && m + 1 < i.value[2] ? i.value[0]++ : m + 2 < i.value[0] && i.value[0] > e.tableShape[0] && i.value[0]--, c + 1 === i.value[1] && c + 1 < i.value[3] ? i.value[1]++ : c + 2 < i.value[1] && i.value[1] > e.tableShape[1] && i.value[1]--;
      },
      onClick: () => {
        e.onSelected(t);
      }
    }, [l("div", {
      class: [`${a}-table-shape-col-default`, c <= t.x && m <= t.y && `${a}-table-shape-col-include`]
    }, null)]))]))]);
  }
}), Yo = /* @__PURE__ */ w({
  name: "ToolbarTable",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = r("tableShape"), s = `${e}-toolbar-wrapper`, c = x(!1);
    return () => l(J, {
      relative: `#${s}`,
      visible: c.value,
      onChange: (u) => {
        c.value = u;
      },
      disabled: o?.value,
      key: "bar-table",
      overlay: l(jo, {
        tableShape: i.value,
        onSelected: (u) => {
          o?.value || b.emit(e, f, "table", {
            selectedShape: u
          });
        }
      }, null)
    }, {
      default: () => [l("button", {
        class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
        title: t.value.toolbarTips?.table,
        disabled: o?.value,
        type: "button"
      }, [l($, {
        name: "table"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.table])])]
    });
  }
}), Zo = /* @__PURE__ */ w({
  name: "ToolbarTask",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.task,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "task");
      },
      type: "button"
    }, [l($, {
      name: "task"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.task])]);
  }
}), Xo = /* @__PURE__ */ w({
  name: "ToolbarTitle",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = `${e}-toolbar-wrapper`, s = x(!1), c = (u) => {
      o?.value || b.emit(e, f, u);
    };
    return () => l(J, {
      relative: `#${i}`,
      visible: s.value,
      onChange: (u) => {
        s.value = u;
      },
      disabled: o?.value,
      overlay: l("ul", {
        class: `${a}-menu`,
        onClick: () => {
          s.value = !1;
        },
        role: "menu"
      }, [l("li", {
        class: `${a}-menu-item ${a}-menu-item-title`,
        onClick: () => {
          c("h1");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.titleItem?.h1]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-title`,
        onClick: () => {
          c("h2");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.titleItem?.h2]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-title`,
        onClick: () => {
          c("h3");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.titleItem?.h3]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-title`,
        onClick: () => {
          c("h4");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.titleItem?.h4]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-title`,
        onClick: () => {
          c("h5");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.titleItem?.h5]), l("li", {
        class: `${a}-menu-item ${a}-menu-item-title`,
        onClick: () => {
          c("h6");
        },
        role: "menuitem",
        tabindex: "0"
      }, [t.value.titleItem?.h6])])
    }, {
      default: () => [l("button", {
        class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
        disabled: o?.value,
        title: t.value.toolbarTips?.title,
        type: "button"
      }, [l($, {
        name: "title"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.title])])]
    });
  }
}), Jo = /* @__PURE__ */ w({
  name: "ToolbarUnderline",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.underline,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "underline");
      },
      type: "button"
    }, [l($, {
      name: "underline"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.underline])]);
  }
}), Qo = /* @__PURE__ */ w({
  name: "ToolbarUnorderedList",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName");
    return () => l("button", {
      class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
      title: t.value.toolbarTips?.unorderedList,
      disabled: o?.value,
      onClick: () => {
        b.emit(e, f, "unorderedList");
      },
      type: "button"
    }, [l($, {
      name: "unordered-list"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.unorderedList])]);
  }
}), el = () => {
  const e = r("editorId"), t = r("setting"), o = r("updateSetting"), {
    editorExtensions: n,
    editorExtensionsAttrs: i
  } = G;
  let s = n.screenfull.instance;
  const c = x(!1), u = (v) => {
    if (!s) {
      b.emit(e, j, {
        name: "fullscreen",
        message: "fullscreen is undefined"
      });
      return;
    }
    s.isEnabled ? (c.value = !0, (v === void 0 ? !s.isFullscreen : v) ? s.request() : s.exit()) : console.error("browser does not support screenfull!");
  }, m = () => {
    s && s.isEnabled && s.on("change", () => {
      (c.value || t.value.fullscreen) && (c.value = !1, o("fullscreen"));
    });
  }, g = () => {
    s = window.screenfull, m();
  };
  return W(() => {
    m(), s || Xt("script", {
      ...i.screenfull?.js,
      src: n.screenfull.js,
      id: nt.screenfull,
      onload: g
    }, "screenfull");
  }), W(() => {
    b.on(e, {
      name: qt,
      callback: u
    });
  }), {
    fullscreenHandler: u
  };
};
let tl = 0;
const Ye = () => {
  const e = r("editorId"), t = r("theme"), o = r("previewTheme"), n = r("language"), i = r("disabled"), s = r("noUploadImg"), c = r("noPrettier"), u = r("codeTheme"), m = r("showToolbarName"), g = r("setting"), v = r("defToolbars");
  return {
    barRender: (y) => {
      if (kt.includes(y))
        switch (y) {
          case "-":
            return l(fo, {
              key: `bar-${tl++}`
            }, null);
          case "bold":
            return l(po, {
              key: "bar-bold"
            }, null);
          case "underline":
            return l(Jo, {
              key: "bar-unorderline"
            }, null);
          case "italic":
            return l(Ao, {
              key: "bar-italic"
            }, null);
          case "strikeThrough":
            return l(Uo, {
              key: "bar-strikeThrough"
            }, null);
          case "title":
            return l(Xo, {
              key: "bar-title"
            }, null);
          case "sub":
            return l(qo, {
              key: "bar-sub"
            }, null);
          case "sup":
            return l(Ko, {
              key: "bar-sup"
            }, null);
          case "quote":
            return l(Wo, {
              key: "bar-quote"
            }, null);
          case "unorderedList":
            return l(Qo, {
              key: "bar-unorderedList"
            }, null);
          case "orderedList":
            return l(Bo, {
              key: "bar-orderedList"
            }, null);
          case "task":
            return l(Zo, {
              key: "bar-task"
            }, null);
          case "codeRow":
            return l(yo, {
              key: "bar-codeRow"
            }, null);
          case "code":
            return l(wo, {
              key: "bar-code"
            }, null);
          case "link":
            return l(Mo, {
              key: "bar-link"
            }, null);
          case "image":
            return s ? l(xo, {
              key: "bar-image"
            }, null) : l(No, {
              key: "bar-imageDropdown"
            }, null);
          case "table":
            return l(Yo, {
              key: "bar-table"
            }, null);
          case "revoke":
            return l(_o, {
              key: "bar-revoke"
            }, null);
          case "next":
            return l(Fo, {
              key: "bar-next"
            }, null);
          case "save":
            return l(zo, {
              key: "bar-save"
            }, null);
          case "prettier":
            return c && l(Po, {
              key: "bar-prettier"
            }, null);
          case "pageFullscreen":
            return !g.value.fullscreen && l(Ho, {
              key: "bar-pageFullscreen"
            }, null);
          case "fullscreen":
            return l(Co, {
              key: "bar-fullscreen"
            }, null);
          case "catalog":
            return l(To, {
              key: "bar-catalog"
            }, null);
          case "preview":
            return l(Oo, {
              key: "bar-preview"
            }, null);
          case "previewOnly":
            return l(Vo, {
              key: "bar-previewOnly"
            }, null);
          case "htmlPreview":
            return l($o, {
              key: "bar-htmlPreview"
            }, null);
          case "github":
            return l(ko, {
              key: "bar-github"
            }, null);
          case "mermaid":
            return l(Ro, {
              key: "bar-mermaid"
            }, null);
          case "katex":
            return l(Do, {
              key: "bar-katex"
            }, null);
        }
      else if (v.value instanceof Array) {
        const C = v.value[y];
        return C ? ae(C, {
          theme: C.props?.theme || t.value,
          previewTheme: C.props?.theme || o.value,
          language: C.props?.theme || n.value,
          codeTheme: C.props?.codeTheme || u.value,
          disabled: C.props?.disabled || i.value,
          showToolbarName: C.props?.showToolbarName || m.value,
          insert(L) {
            b.emit(e, f, "universal", {
              generate: L
            });
          }
        }) : "";
      } else if (v.value?.children i