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 te, D as lt } from "./chunks/index.mjs";
import { s as at, a as nt, M as We } from "./chunks/index4.mjs";
import { C as rt, c as st, a as it, e as ct, b as ut, u as dt, d as mt, f as bt, g as vt, h as gt, i as ht, j as ft, k as pt, M as Tt } from "./chunks/index3.mjs";
import wt from "./ModalToolbar.mjs";
import yt from "./NormalToolbar.mjs";
import { inject as r, watch as N, nextTick as ie, onMounted as K, ref as I, defineComponent as C, createVNode as l, reactive as Y, toRef as ke, computed as P, Fragment as _e, cloneVNode as ne, createApp as Ct, shallowRef as kt, onBeforeUnmount as he } from "vue";
import { g as Z, p as a, a as $t, M as le, d as xt, b as St } from "./chunks/config.mjs";
import { linkTo as It, throttle as Et, createSmoothScroll as ze, draggingScroll as Lt } from "@vavt/util";
import { deleteLine as Nt, history as $e, defaultKeymap as At, historyKeymap as Dt, indentWithTab as Rt, undo as Mt, redo as Ft } from "@codemirror/commands";
import { markdown as Bt } from "@codemirror/lang-markdown";
import { languages as Pt } from "@codemirror/language-data";
import { EditorState as ce, EditorSelection as U, Compartment as j, StateEffect as re, StateField as qe, RangeSetBuilder as Ht } from "@codemirror/state";
import { placeholder as Ot, EditorView as B, showTooltip as Vt, Decoration as Wt, WidgetType as _t, keymap as zt, drawSelection as qt } from "@codemirror/view";
import { b as h, E as X, R as y, C as Ut, U as fe, a as Ue, c as Ke, O as Ge, d as Kt, e as Gt, T as jt, S as Yt, G as xe } from "./chunks/event-bus.mjs";
import { indentUnit as Zt, syntaxHighlighting as je, HighlightStyle as Ye } from "@codemirror/language";
import { autocompletion as Xt } from "@codemirror/autocomplete";
import { a as Jt } from "./chunks/dom.mjs";
import { I as x, M as Qt } from "./chunks/index2.mjs";
import { b as eo } from "./chunks/index5.mjs";
import { tags as b } from "@lezer/highlight";
import { searchKeymap as to } from "@codemirror/search";
import { g as Se } from "./chunks/vue-tsx.mjs";
const oo = (e, t, o) => {
  const n = r("editorId"), i = r("setting");
  let s = () => {
  }, c = () => {
  };
  const d = () => {
    s();
    const u = o.value?.view.contentDOM.getRootNode(), v = u?.querySelector(
      `#${n} .cm-scroller`
    ), m = u?.querySelector(
      `[id="${n}-preview-wrapper"]`
    ), f = u?.querySelector(
      `[id="${n}-html-wrapper"]`
    );
    (m || f) && ([c, s] = (m ? at : nt)(
      v,
      m || f,
      o.value
    ), e.scrollAuto && c());
  };
  N([t, i], () => {
    ie(d);
  }), N(
    () => e.scrollAuto,
    (u) => {
      u ? c() : s();
    }
  ), N(
    () => i.value.previewOnly,
    (u) => {
      u ? s() : c();
    }
  ), K(d);
}, ue = async (e, t, o) => {
  if (/^h[1-6]$/.test(e))
    return lo(e, t);
  if (e === "prettier")
    return await ao(t, o);
  switch (e) {
    case "bold":
    case "underline":
    case "italic":
    case "strikeThrough":
    case "sub":
    case "sup":
    case "codeRow":
    case "katexInline":
    case "katexBlock":
      return ro(e, t);
    case "quote":
    case "orderedList":
    case "unorderedList":
    case "task":
      return io(e, t);
    case "code":
      return co(o, t);
    case "table":
      return bo(o);
    case "link": {
      const n = t.getSelectedText(), { desc: i = n, url: s = "" } = o, c = `[${i}](${s})`;
      return {
        text: c,
        options: {
          select: s === "",
          deviationStart: c.length - s.length - 1,
          deviationEnd: -1
        }
      };
    }
    case "image":
      return mo(o, t);
    case "flow":
    case "sequence":
    case "gantt":
    case "class":
    case "state":
    case "pie":
    case "relationship":
    case "journey":
      return uo(e);
    case "universal":
      return vo(t.getSelectedText(), o);
    default:
      return { text: "", options: {} };
  }
}, lo = (e, t) => {
  const o = e.slice(1), n = "#".repeat(Number(o)), [i, s, c] = pe(t, {
    wholeLine: !0
  });
  return {
    text: `${n} ${i}`,
    options: { deviationStart: n.length + 1, replaceStart: s, replaceEnd: c }
  };
}, ao = async (e, t) => {
  const o = window.prettier || Z.editorExtensions.prettier?.prettierInstance, n = [
    window.prettierPlugins?.markdown || Z.editorExtensions.prettier?.parserMarkdownInstance
  ];
  return !o || !n[0] ? (h.emit(t.editorId, X, {
    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 }
  };
}, no = {
  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]
}, ro = (e, t) => {
  const o = t.getSelectedText(), [n, i, s, c] = no[e];
  return {
    text: `${n}${o}${i}`,
    options: {
      deviationStart: s,
      deviationEnd: c
      // replaceStart, replaceEnd
    }
  };
}, so = {
  quote: "> ",
  unorderedList: "- ",
  orderedList: 1,
  task: "- [ ] "
}, io = (e, t) => {
  const [o, n, i] = pe(t, {
    wholeLine: !0
  }), s = o.split(`
`), c = so[e], d = e === "orderedList" ? s.map((m, f) => `${c + f}. ${m}`) : s.map((m) => `${c}${m}`), u = e === "orderedList" ? "1. " : c.toString(), v = s.length === 1 ? u.length : 0;
  return {
    text: d.join(`
`),
    options: { deviationStart: v, replaceStart: n, replaceEnd: i }
  };
}, co = (e, t) => {
  const [o, n, i] = pe(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
    }
  };
}, uo = (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`,
    ...Z.editorConfig.mermaidTemplate
  }[e]}
\`\`\`
`,
  options: { deviationStart: 12, deviationEnd: -5 }
}), mo = (e, t) => {
  const o = t.getSelectedText(), { desc: n = o, url: i = "", urls: s } = e;
  let c = "";
  const d = i === "" && (!s || s instanceof Array && s.length === 0);
  return s instanceof Array ? c = s.reduce((u, v) => {
    const {
      url: m = "",
      alt: f = "",
      title: g = ""
    } = typeof v == "object" ? v : { url: v };
    return u + `![${f}](${m}${g ? " '" + g + "'" : ""})
`;
  }, "") : c = `![${n}](${i})
`, {
    text: c,
    options: {
      select: i === "",
      deviationStart: d ? c.length - i.length - 2 : c.length,
      deviationEnd: d ? -2 : 0
    }
  };
}, bo = (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 } };
}, vo = (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
    }
  };
}, pe = (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
  ];
}, G = (e) => {
  const t = new j();
  return (n) => (t.get(e.state) ? e.dispatch({ effects: t.reconfigure(n) }) : e.dispatch({
    effects: re.appendConfig.of(t.of(n))
  }), !0);
};
class go {
  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")
        h.emit(n, X, {
          name: "overlength",
          message: s.message,
          data: t
        });
      else
        throw s;
    }
  }
  constructor(t) {
    this.view = t, this.toggleTabSize = G(this.view), this.togglePlaceholder = G(this.view), this.setExtensions = G(this.view), this.toggleDisabled = G(this.view), this.toggleReadOnly = G(this.view), this.toggleMaxlength = G(this.view);
  }
  /**
   * 设置tabSize
   *
   * @param tabSize 需要切换的大小
   */
  setTabSize(t) {
    this.toggleTabSize([
      ce.tabSize.of(t),
      Zt.of(" ".repeat(t))
    ]);
  }
  /**
   * 设置placeholder
   *
   * @param t 目标内容
   */
  setPlaceholder(t) {
    this.togglePlaceholder(Ot(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: U.create(
        [U.range(o, n), U.cursor(i)],
        1
      )
    });
  }
  setDisabled(t) {
    this.toggleDisabled([B.editable.of(!t)]);
  }
  setReadOnly(t) {
    this.toggleReadOnly([ce.readOnly.of(t)]);
  }
  setMaxLength(t) {
    this.maxLength = t, this.toggleMaxlength([
      ce.changeFilter.of((o) => o.newDoc.length <= t)
    ]);
  }
}
const ho = (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;
}, fo = (e, t) => {
  const o = I(t.value);
  N([t], () => {
    (!o.value || !ho(o.value, t.value)) && (o.value = t.value, e());
  });
}, ae = (e, t, o, n, i) => (s, c, d, u) => {
  const v = `${e}${t}${o}${n}`, m = d + c.label.length + (i === "title" ? o.length : 0);
  s.dispatch({
    changes: { from: d, to: u, insert: v },
    selection: U.create(
      [
        U.range(
          d + c.label.length + (i === "title" ? 1 : -t.length),
          m
        ),
        U.cursor(m)
      ],
      1
    )
  }), s.focus();
}, Ie = (e) => (t, o, n, i) => {
  const s = e.slice(i - n);
  t.dispatch(t.state.replaceSelection(`${s} `));
}, Ee = (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: Ie(c)
          };
        }),
        // 任务列表
        ...["unchecked", "checked"].map((i) => {
          const s = i === "checked" ? "- [x]" : "- [ ]";
          return {
            label: s,
            type: "text",
            apply: Ie(s)
          };
        }),
        // 代码
        ...[
          ["`", ""],
          ["```", "language"],
          ["```mermaid\n", ""],
          ["```echarts\n", ""]
        ].map((i) => ({
          label: `${i[0]}${i[1]}`,
          type: "text",
          apply: ae(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: ae("$", "", "", "$", "type")
        },
        {
          label: "$$",
          type: "text",
          apply: ae("$$", "", `
`, `
$$`, "title")
        },
        // 那啥？
        ...[
          "note",
          "abstract",
          "info",
          "tip",
          "success",
          "question",
          "warning",
          "failure",
          "danger",
          "bug",
          "example",
          "quote",
          "hint",
          "caution",
          "error",
          "attention"
        ].map((i) => ({
          label: `!!! ${i}`,
          type: "text",
          apply: ae("!!!", ` ${i}`, " Title", `

!!!`, "title")
        }))
      ]
    };
  };
  return Xt({
    override: e ? [t, ...e] : [t]
  });
}, po = /* @__PURE__ */ C({
  name: `${a}-divider`,
  setup() {
    return () => l("div", {
      class: `${a}-divider`
    }, null);
  }
}), To = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "bold");
      },
      type: "button"
    }, [l(x, {
      name: "bold"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.bold])]);
  }
}), wo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, Ut);
      },
      key: "bar-catalog",
      type: "button"
    }, [l(x, {
      name: "catalog"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.catalog])]);
  }
}), yo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "code");
      },
      type: "button"
    }, [l(x, {
      name: "code"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.code])]);
  }
}), Co = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "codeRow");
      },
      type: "button"
    }, [l(x, {
      name: "code-row"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.codeRow])]);
  }
}), ko = /* @__PURE__ */ C({
  name: "ToolbarFullscreen",
  setup() {
    const e = r("usedLanguageText"), t = r("disabled"), o = r("showToolbarName"), n = r("setting"), {
      fullscreenHandler: i
    } = tl();
    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(x, {
      name: n.value.fullscreen ? "fullscreen-exit" : "fullscreen"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.fullscreen])]);
  }
}), $o = /* @__PURE__ */ C({
  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: () => {
        It("https://github.com/imzbf/md-editor-v3");
      },
      type: "button"
    }, [l(x, {
      name: "github"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.github])]);
  }
}), xo = /* @__PURE__ */ C({
  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(x, {
      name: "preview-html"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.htmlPreview])]);
  }
}), So = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "image");
      },
      type: "button"
    }, [l(x, {
      name: "image"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.image])]);
  }
}), Io = {
  visible: {
    type: Boolean,
    default: !1
  },
  onCancel: {
    type: Function,
    default: () => {
    }
  },
  onOk: {
    type: Function,
    default: () => {
    }
  }
}, Eo = /* @__PURE__ */ C({
  name: `${a}-modal-clip`,
  props: Io,
  setup(e) {
    const t = r("usedLanguageText"), o = r("editorId"), n = r("rootRef");
    let i = Z.editorExtensions.cropper.instance;
    const s = I(), c = I(), d = I(), u = Y({
      cropperInited: !1,
      imgSelected: !1,
      imgSrc: "",
      // 是否全屏
      isFullscreen: !1
    });
    let v = null;
    N(() => e.visible, () => {
      e.visible && !u.cropperInited && (i = i || window.Cropper, s.value.onchange = () => {
        if (!i) {
          h.emit(o, X, {
            name: "Cropper",
            message: "Cropper is undefined"
          });
          return;
        }
        const g = s.value.files || [];
        if (u.imgSelected = !0, g?.length > 0) {
          const p = new FileReader();
          p.onload = (k) => {
            u.imgSrc = k.target.result;
          }, p.readAsDataURL(g[0]);
        }
      });
    }), N(() => [u.imgSelected], () => {
      d.value.style = "";
    }), N([ke(() => u.isFullscreen), ke(() => u.imgSrc)], () => {
      u.imgSrc && ie(() => {
        v?.destroy(), d.value.style = "", c.value && (v = new i(c.value, {
          viewMode: 2,
          preview: n.value.getRootNode().querySelector(`.${a}-clip-preview-target`)
          // aspectRatio: 16 / 9,
        }));
      });
    });
    const m = () => {
      v.clear(), v.destroy(), v = null, s.value.value = "", u.imgSelected = !1, u.imgSrc = "";
    }, f = (g) => {
      u.isFullscreen = g;
    };
    return () => l(Qt, {
      class: `${a}-modal-clip`,
      title: t.value.clipModalTips?.title,
      visible: e.visible,
      onClose: e.onCancel,
      showAdjust: !0,
      isFullscreen: u.isFullscreen,
      onAdjust: f,
      width: "668px",
      height: "421px"
    }, {
      default: () => [l("div", {
        class: `${a}-form-item ${a}-clip`
      }, [l("div", {
        class: `${a}-clip-main`
      }, [u.imgSelected ? l("div", {
        class: `${a}-clip-cropper`
      }, [l("img", {
        src: u.imgSrc,
        ref: c,
        style: {
          display: "none"
        },
        alt: ""
      }, null), l("div", {
        class: `${a}-clip-delete`,
        onClick: m
      }, [l(x, {
        name: "delete"
      }, null)])]) : l("div", {
        class: `${a}-clip-upload`,
        onClick: () => {
          s.value.click();
        },
        role: "button",
        tabindex: "0",
        "aria-label": t.value.imgTitleItem?.upload
      }, [l(x, {
        name: "upload"
      }, null)])]), l("div", {
        class: `${a}-clip-preview`
      }, [l("div", {
        class: `${a}-clip-preview-target`,
        ref: d
      }, null)])]), l("div", {
        class: `${a}-form-item`
      }, [l("button", {
        class: `${a}-btn`,
        type: "button",
        onClick: () => {
          if (v) {
            const g = v.getCroppedCanvas();
            h.emit(o, fe, [eo(g.toDataURL("image/png"))], e.onOk), m();
          }
        }
      }, [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: () => {
    }
  }
}, No = /* @__PURE__ */ C({
  name: `${a}-modals`,
  props: Lo,
  setup(e) {
    return () => l(Eo, {
      visible: e.clipVisible,
      onOk: e.onOk,
      onCancel: e.onCancel
    }, null);
  }
}), Ao = /* @__PURE__ */ C({
  name: "ToolbarImageDropdown",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = `${e}-toolbar-wrapper`, s = I(!1), c = I(!1), d = I(), u = () => {
      h.emit(e, fe, Array.from(d.value.files || [])), d.value.value = "";
    }, v = (k, E) => {
      o?.value || h.emit(e, y, k, E);
    };
    K(() => {
      d.value.addEventListener("change", u);
    });
    const m = (k) => {
      s.value = k;
    }, f = () => {
      c.value = !1;
    }, g = (k) => {
      k && v("image", {
        desc: k.desc,
        url: k.url,
        transform: !0
      }), c.value = !1;
    }, p = P(() => l("ul", {
      class: `${a}-menu`,
      onClick: () => {
        s.value = !1;
      },
      role: "menu"
    }, [l("li", {
      class: `${a}-menu-item ${a}-menu-item-image`,
      onClick: () => {
        v("image");
      },
      role: "menuitem",
      tabindex: "0"
    }, [t.value.imgTitleItem?.link]), l("li", {
      class: `${a}-menu-item ${a}-menu-item-image`,
      onClick: () => {
        d.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])]));
    return () => l(_e, null, [l("label", {
      for: `${i}_label`,
      style: {
        display: "none"
      },
      "aria-label": t.value.imgTitleItem?.upload
    }, null), l("input", {
      id: `${i}_label`,
      ref: d,
      accept: "image/*",
      type: "file",
      multiple: !0,
      style: {
        display: "none"
      }
    }, null), l(te, {
      relative: `#${i}`,
      visible: s.value,
      onChange: m,
      disabled: o?.value,
      overlay: p.value
    }, {
      default: () => [l("button", {
        class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
        title: t.value.toolbarTips?.image,
        disabled: o?.value,
        type: "button"
      }, [l(x, {
        name: "image"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.image])])]
    }), l(No, {
      clipVisible: c.value,
      onCancel: f,
      onOk: g
    }, null)]);
  }
}), Do = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "italic");
      },
      type: "button"
    }, [l(x, {
      name: "italic"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.italic])]);
  }
}), Ro = /* @__PURE__ */ C({
  name: "ToolbarKatex",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = `${e}-toolbar-wrapper`, s = I(!1), c = (v) => {
      o?.value || h.emit(e, y, v);
    }, d = (v) => {
      s.value = v;
    }, u = P(() => 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])]));
    return () => l(te, {
      relative: `#${i}`,
      visible: s.value,
      onChange: d,
      disabled: o?.value,
      overlay: u.value,
      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(x, {
        name: "formula"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.katex])])]
    });
  }
}), Mo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "link");
      },
      type: "button"
    }, [l(x, {
      name: "link"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.link])]);
  }
}), Fo = /* @__PURE__ */ C({
  name: "ToolbarMermaid",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = `${e}-toolbar-wrapper`, s = I(!1), c = (v) => {
      o?.value || h.emit(e, y, v);
    }, d = (v) => {
      s.value = v;
    }, u = P(() => 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])]));
    return () => l(te, {
      relative: `#${i}`,
      visible: s.value,
      onChange: d,
      disabled: o?.value,
      overlay: u.value,
      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(x, {
        name: "mermaid"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.mermaid])])]
    });
  }
}), Bo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, Ue);
      },
      type: "button"
    }, [l(x, {
      name: "next"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.next])]);
  }
}), Po = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "orderedList");
      },
      type: "button"
    }, [l(x, {
      name: "ordered-list"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.orderedList])]);
  }
}), Ho = /* @__PURE__ */ C({
  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(x, {
      name: n.value.pageFullscreen ? "minimize" : "maximize"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.pageFullscreen])]);
  }
}), Oo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "prettier");
      },
      type: "button"
    }, [l(x, {
      name: "prettier"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.prettier])]);
  }
}), Vo = /* @__PURE__ */ C({
  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(x, {
      name: "preview"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.preview])]);
  }
}), Wo = /* @__PURE__ */ C({
  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(x, {
      name: "preview-only"
    }, null), o?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [e.value.toolbarTips?.previewOnly])]);
  }
}), _o = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "quote");
      },
      type: "button"
    }, [l(x, {
      name: "quote"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.quote])]);
  }
}), zo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, Ke);
      },
      type: "button"
    }, [l(x, {
      name: "revoke"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.revoke])]);
  }
}), qo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, Ge);
      },
      type: "button"
    }, [l(x, {
      name: "save"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.save])]);
  }
}), Uo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "strikeThrough");
      },
      type: "button"
    }, [l(x, {
      name: "strike-through"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.strikeThrough])]);
  }
}), Ko = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "sub");
      },
      type: "button"
    }, [l(x, {
      name: "sub"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.sub])]);
  }
}), Go = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "sup");
      },
      type: "button"
    }, [l(x, {
      name: "sup"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.sup])]);
  }
}), jo = {
  tableShape: {
    type: Array,
    default: () => [6, 4]
  },
  onSelected: {
    type: Function,
    default: () => {
    }
  }
}, Yo = /* @__PURE__ */ C({
  name: "TableShape",
  props: jo,
  setup(e) {
    const t = Y({
      x: -1,
      y: -1
    }), o = P(() => 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 = I(n());
    return N([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((d, u) => l("div", {
      class: `${a}-table-shape-col`,
      key: `table-shape-col-${u}`,
      onMouseenter: () => {
        t.x = c, t.y = u, u + 1 === i.value[0] && u + 1 < i.value[2] ? i.value[0]++ : u + 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 && u <= t.y && `${a}-table-shape-col-include`]
    }, null)]))]))]);
  }
}), Zo = /* @__PURE__ */ C({
  name: "ToolbarTable",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = r("tableShape"), s = `${e}-toolbar-wrapper`, c = I(!1), d = (m) => {
      c.value = m;
    }, u = (m) => {
      o?.value || h.emit(e, y, "table", {
        selectedShape: m
      });
    }, v = P(() => l(Yo, {
      tableShape: i.value,
      onSelected: u
    }, null));
    return () => l(te, {
      relative: `#${s}`,
      visible: c.value,
      onChange: d,
      disabled: o?.value,
      key: "bar-table",
      overlay: v.value
    }, {
      default: () => [l("button", {
        class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
        title: t.value.toolbarTips?.table,
        disabled: o?.value,
        type: "button"
      }, [l(x, {
        name: "table"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.table])])]
    });
  }
}), Xo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "task");
      },
      type: "button"
    }, [l(x, {
      name: "task"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.task])]);
  }
}), Jo = /* @__PURE__ */ C({
  name: "ToolbarTitle",
  setup() {
    const e = r("editorId"), t = r("usedLanguageText"), o = r("disabled"), n = r("showToolbarName"), i = `${e}-toolbar-wrapper`, s = I(!1), c = (v) => {
      o?.value || h.emit(e, y, v);
    }, d = (v) => {
      s.value = v;
    }, u = P(() => 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])]));
    return () => l(te, {
      relative: `#${i}`,
      visible: s.value,
      onChange: d,
      disabled: o?.value,
      overlay: u.value
    }, {
      default: () => [l("button", {
        class: [`${a}-toolbar-item`, o?.value && `${a}-disabled`],
        disabled: o?.value,
        title: t.value.toolbarTips?.title,
        type: "button"
      }, [l(x, {
        name: "title"
      }, null), n?.value && l("div", {
        class: `${a}-toolbar-item-name`
      }, [t.value.toolbarTips?.title])])]
    });
  }
}), Qo = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "underline");
      },
      type: "button"
    }, [l(x, {
      name: "underline"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.underline])]);
  }
}), el = /* @__PURE__ */ C({
  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: () => {
        h.emit(e, y, "unorderedList");
      },
      type: "button"
    }, [l(x, {
      name: "unordered-list"
    }, null), n?.value && l("div", {
      class: `${a}-toolbar-item-name`
    }, [t.value.toolbarTips?.unorderedList])]);
  }
}), tl = () => {
  const e = r("editorId"), t = r("setting"), o = r("updateSetting"), {
    editorExtensions: n,
    editorExtensionsAttrs: i
  } = Z;
  let s = n.screenfull.instance;
  const c = I(!1), d = (m) => {
    if (!s) {
      h.emit(e, X, {
        name: "fullscreen",
        message: "fullscreen is undefined"
      });
      return;
    }
    s.isEnabled ? (c.value = !0, (m === void 0 ? !s.isFullscreen : m) ? s.request() : s.exit()) : console.error("browser does not support screenfull!");
  }, u = () => {
    s && s.isEnabled && s.on("change", () => {
      (c.value || t.value.fullscreen) && (c.value = !1, o("fullscreen"));
    });
  }, v = () => {
    s = window.screenfull, u();
  };
  return K(() => {
    u(), s || Jt("script", {
      ...i.screenfull?.js,
      src: n.screenfull.js,
      id: rt.screenfull,
      onload: v
    }, "screenfull");
  }), K(() => {
    h.on(e, {
      name: Kt,
      callback: d
    });
  }), {
    fullscreenHandler: d
  };
};
let ol = 0;
const Ze = () => {
  const e = r("editorId"), t = r("theme"), o = r("previewTheme"), n = r("language"), i = r("disabled"), s = r("noUploadImg"), c = r("noPrettier"), d = r("codeTheme"), u = r("showToolbarName"), v = r("setting"), m = r("defToolbars");
  return {
    barRender: (g) => {
      if ($t.includes(g))
        switch (g) {
          case "-":
            return l(po, {
              key: `bar-${ol++}`
            }, null);
          case "bold":
            return l(To, {
              key: "bar-bold"
            }, null);
          case "underline":
            return l(Qo, {
              key: "bar-unorderline"
            }, null);
          case "italic":
            return l(Do, {
              key: "bar-italic"
            }, null);
          case "strikeThrough":
            return l(Uo, {
              key: "bar-strikeThrough"
            }, null);
          case "title":
            return l(Jo, {
              key: "bar-title"
            }, null);
          case "sub":
            return l(Ko, {
              key: "bar-sub"
            }, null);
          case "sup":
            return l(Go, {
              key: "bar-sup"
            }, null);
          case "quote":
            return l(_o, {
              key: "bar-quote"
            }, null);
          case "unorderedList":
            return l(el, {
              key: "bar-unorderedList"
            }, null);
          case "orderedList":
            return l(Po, {
              key: "bar-orderedList"
            }, null);
          case "task":
            return l(Xo, {
              key: "bar-task"
            }, null);
          case "codeRow":
            return l(Co, {
              key: "bar-codeRow"
            }, null);
          case "code":
            return l(yo, {
              key: "bar-code"
            }, null);
          case "link":
            return l(Mo, {
              key: "bar-link"
            }, null);
          case "image":
            return s ? l(So, {
              key: "bar-image"
            }, null) : l(Ao, {
              key: "bar-imageDropdown"
            }, null);
          case "table":
            return l(Zo, {
              key: "bar-table"
            }, null);
          case "revoke":
            return l(zo, {
              key: "bar-revoke"
            }, null);
          case "next":
            return l(Bo, {
              key: "bar-next"
            }, null);
          case "save":
            return l(qo, {
              key: "bar-save"
            }, null);
          case "prettier":
            return !c && l(Oo, {
              key: "bar-prettier"
            }, null);
          case "pageFullscreen":
            return !v.value.fullscreen && l(Ho, {
              key: "bar-pageFullscreen"
            }, null);
          case "fullscreen":
            return l(ko, {
              key: "bar-fullscreen"
            }, null);
          case "catalog":
            return l(wo, {
              key: "bar-catalog"
            }, null);
          case "preview":
            return l(Vo, {
              key: "bar-preview"
            }, null);
          case "previewOnly":
            return l(Wo, {
              key: "bar-previewOnly"
            }, null);
          case "htmlPreview":
            return l(xo, {
              key: "bar-htmlPreview"
            }, null);
          case "github":
            return l($o, {
              key: "bar-github"
            }, null);
          case "mermaid":
            return l(Fo, {
              key: "bar-mermaid"
            }, null);
          case "katex":
            return l(Ro, {
              key: "bar-katex"
            }, null);
        }
      else if (m.value instanceof Array) {
        const p = m.value[g];
        return p ? ne(p, {
          theme: p.props?.theme || t.value,
          previewTheme: p.props?.theme || o.value,
          language: p.props?.theme || n.value,
          codeTheme: p.props?.codeTheme || d.value,
          disabled: p.props?.disabled || i.value,
          showToolbarName: p.props?.showToolbarName || u.value,
          insert(E) {
            h.emit(e, y, "universal", {
              generate: E
            });
          }
        }) : "";
      } else if (m.value?.children instanceof Array) {
        const p = m.value.children[g];
        return p ? ne(p, {
          theme: p.props?.theme || t.v