md-editor-rt/lib/es/chunks/Editor.mjs

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

import { jsxs as $, jsx as a, Fragment as rt } from "react/jsx-runtime";
import { memo as N, useRef as R, useCallback as A, useEffect as D, useContext as y, useState as O, useMemo as V, cloneElement as nt, createContext as wt, useSyncExternalStore as $t, forwardRef as at, useImperativeHandle as Ct } from "react";
import { p as n, g as ee, b as xt, M as ce, a as yt, d as S } from "./config.mjs";
import { linkTo as kt, createSmoothScroll as lt, draggingScroll as Nt } from "@vavt/util";
import { c as E, b as St } from "./index2.mjs";
import { E as C, d as Et } from "./context.mjs";
import { s as It, a as Lt, M as At } from "./index3.mjs";
import { C as Dt, a as Rt, u as Mt, b as Ft, c as Ht, d as Pt, e as Ot, f as Vt, g as Bt, h as zt } from "./hooks.mjs";
import { deleteLine as _t, defaultKeymap as Wt, historyKeymap as qt, indentWithTab as Kt, history as He, undo as Ut, redo as Gt } from "@codemirror/commands";
import { markdown as jt } from "@codemirror/lang-markdown";
import { languages as Yt } from "@codemirror/language-data";
import { EditorState as fe, EditorSelection as Q, Compartment as J, StateEffect as ue, StateField as it, RangeSetBuilder as Zt } from "@codemirror/state";
import { placeholder as Xt, EditorView as K, showTooltip as Jt, Decoration as Qt, WidgetType as eo, keymap as to, drawSelection as oo } from "@codemirror/view";
import { indentUnit as ro, syntaxHighlighting as st, HighlightStyle as ct } from "@codemirror/language";
import { b as f, E as re, R as w, U as ye, O as dt, C as no, a as $e, c as Ce, d as Pe, e as Oe, T as Ve, S as Be, G as ze } from "./event-bus.mjs";
import { autocompletion as ao } from "@codemirror/autocomplete";
import { searchKeymap as lo } from "@codemirror/search";
import { createRoot as io } from "react-dom/client";
import { a as so } from "./dom.mjs";
import { I as L, M as co } from "./index.mjs";
import { D as ie } from "./index4.mjs";
import { tags as m } from "@lezer/highlight";
const uo = (e) => {
  const t = R(null), r = R(null), o = R(null), l = R(null), i = R(!1), s = R(0), d = R(0), b = A(() => {
    if (!r.current || !t.current || !o.current || !l.current)
      return;
    const v = t.current.clientHeight, k = r.current.scrollHeight, I = r.current.scrollTop;
    if (k <= v) {
      o.current.style.display = "none", e.alwaysShowTrack || (l.current.style.display = "none");
      return;
    } else
      o.current.style.display = "block", l.current.style.display = "block";
    const H = v / k, z = Math.max(v * H, 20), B = v - z, P = Math.min(I * H, B);
    o.current.style.height = `${z}px`, o.current.style.top = `${P}px`;
  }, [e.alwaysShowTrack]), c = b, u = A((v) => {
    i.current = !0, s.current = v.clientY, d.current = r.current.scrollTop, document.body.style.userSelect = "none";
  }, []), g = A(
    (v) => {
      if (!i.current || !r.current || !t.current) return;
      const k = v.clientY - s.current, I = r.current.scrollHeight / t.current.clientHeight;
      r.current.scrollTop = d.current + k * I;
    },
    [d, s]
  ), h = A(() => {
    i.current = !1, document.body.style.userSelect = "";
  }, []), p = A(
    (v) => {
      r.current && r.current.removeEventListener("scroll", c), r.current = v, r.current ? (r.current.addEventListener("scroll", c), b()) : l.current && !e.alwaysShowTrack && (l.current.style.display = "none");
    },
    [c, e.alwaysShowTrack, b]
  ), T = A(() => {
    if (!t.current) return;
    const v = e.scrollTarget ? t.current.querySelector(e.scrollTarget) : t.current.firstElementChild;
    p(v);
  }, [p, e.scrollTarget]);
  return D(() => {
    T();
    const v = o.current;
    let k = null;
    const I = new MutationObserver(() => {
      k && cancelAnimationFrame(k), k = requestAnimationFrame(() => {
        T();
      });
    });
    return I.observe(t.current, {
      childList: !0,
      subtree: !0
    }), window.addEventListener("resize", b), v?.addEventListener("mousedown", u), document.addEventListener("mousemove", g), document.addEventListener("mouseup", h), () => {
      I?.disconnect(), r.current && r.current.removeEventListener("scroll", c), window.removeEventListener("resize", b), v?.removeEventListener("mousedown", u), document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", h);
    };
  }, [T, u, g, h, c, b]), /* @__PURE__ */ $(
    "div",
    {
      id: e.id,
      className: E([`${n}-custom-scrollbar`, e.className]),
      style: e.style,
      ref: t,
      onMouseEnter: e.onMouseEnter,
      onMouseLeave: e.onMouseLeave,
      children: [
        e.children,
        /* @__PURE__ */ a("div", { className: `${n}-custom-scrollbar__track`, ref: l, children: /* @__PURE__ */ a("div", { className: `${n}-custom-scrollbar__thumb`, ref: o }) })
      ]
    }
  );
}, pe = N(uo), mo = (e, t, r) => {
  const { editorId: o, setting: l } = y(C), [i, s] = O({
    clear() {
    },
    init() {
    }
  });
  D(() => {
    const d = r.current?.view.contentDOM.getRootNode(), b = d?.querySelector(
      `#${o} .cm-scroller`
    ), c = d?.querySelector(
      `[id="${o}-preview-wrapper"]`
    ), u = d?.querySelector(
      `[id="${o}-html-wrapper"]`
    );
    if (c || u) {
      const g = c ? It : Lt, h = c || u, [p, T] = g(b, h, r.current);
      s({
        init: p,
        clear: T
      });
    }
  }, [
    t,
    l.fullscreen,
    l.pageFullscreen,
    l.preview,
    l.htmlPreview,
    o,
    r
  ]), D(() => (e.scrollAuto && !l.previewOnly && (l.preview || l.htmlPreview) ? i.init() : i.clear(), () => {
    i.clear();
  }), [
    i,
    e.scrollAuto,
    l.preview,
    l.htmlPreview,
    l.previewOnly
  ]);
}, oe = (e) => {
  const t = new J();
  return (o) => (t.get(e.state) ? e.dispatch({ effects: t.reconfigure(o) }) : e.dispatch({
    effects: ue.appendConfig.of(t.of(o))
  }), !0);
};
class bo {
  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, r = 0, o = this.view.state.doc.length) {
    this.view.dispatch({
      changes: {
        from: r,
        to: o,
        insert: t
      }
    });
  }
  /**
   * 获取选中的文本
   */
  getSelectedText() {
    const { from: t, to: r } = this.view.state.selection.main;
    return this.view.state.sliceDoc(t, r);
  }
  /**
   * 使用新的内容替换选中的内容
   *
   * @param text 待替换内容
   * @param options 替换后是否选中
   */
  replaceSelectedText(t, r, o) {
    const l = {
      // 是否选中
      select: !0,
      // 选中时，开始位置的偏移量
      deviationStart: 0,
      // 结束的偏移量
      deviationEnd: 0,
      // 直接替换所有文本
      replaceAll: !1,
      // 替换旧文本的开始位置
      replaceStart: -1,
      // 替换旧文本的结束位置
      replaceEnd: -1,
      ...r
    };
    try {
      if (l.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: i } = this.view.state.selection.main;
      l.replaceStart !== -1 ? this.view.dispatch({
        changes: {
          from: l.replaceStart,
          to: l.replaceEnd,
          insert: t
        }
      }) : this.view.dispatch(this.view.state.replaceSelection(t)), l.select && this.view.dispatch({
        selection: {
          anchor: l.replaceStart === -1 ? i + l.deviationStart : l.replaceStart + l.deviationStart,
          head: l.replaceStart === -1 ? i + t.length + l.deviationEnd : l.replaceStart + t.length + l.deviationEnd
        }
      }), this.view.focus();
    } catch (i) {
      if (i.message === "The input text is too long")
        f.emit(o, re, {
          name: "overlength",
          message: i.message,
          data: t
        });
      else
        throw i;
    }
  }
  constructor(t) {
    this.view = t, this.toggleTabSize = oe(this.view), this.togglePlaceholder = oe(this.view), this.setExtensions = oe(this.view), this.toggleDisabled = oe(this.view), this.toggleReadOnly = oe(this.view), this.toggleMaxlength = oe(this.view);
  }
  /**
   * 设置tabSize
   *
   * @param tabSize 需要切换的大小
   */
  setTabSize(t) {
    this.toggleTabSize([
      fe.tabSize.of(t),
      ro.of(" ".repeat(t))
    ]);
  }
  /**
   * 设置placeholder
   *
   * @param t 目标内容
   */
  setPlaceholder(t) {
    this.togglePlaceholder(Xt(t));
  }
  focus(t) {
    if (this.view.focus(), !t)
      return;
    let r = 0, o = 0, l = 0;
    switch (t) {
      case "start":
        break;
      case "end": {
        r = o = l = this.getValue().length;
        break;
      }
      default:
        r = t.rangeAnchor || t.cursorPos, o = t.rangeHead || t.cursorPos, l = t.cursorPos;
    }
    this.view.dispatch({
      scrollIntoView: !0,
      selection: Q.create(
        [Q.range(r, o), Q.cursor(l)],
        1
      )
    });
  }
  setDisabled(t) {
    this.toggleDisabled([K.editable.of(!t)]);
  }
  setReadOnly(t) {
    this.toggleReadOnly([fe.readOnly.of(t)]);
  }
  setMaxLength(t) {
    this.maxLength = t, this.toggleMaxlength([
      fe.changeFilter.of((r) => r.newDoc.length <= t)
    ]);
  }
}
const ho = (e, t) => {
  const { editorId: r } = y(C), o = A(
    (i) => {
      i instanceof Promise ? i.then((s) => {
        f.emit(r, w, "universal", {
          generate() {
            return {
              targetValue: s
            };
          }
        });
      }).catch((s) => {
        console.error(s);
      }) : f.emit(r, w, "universal", {
        generate() {
          return {
            targetValue: i
          };
        }
      });
    },
    [r]
  );
  return A(
    (i) => {
      if (!i.clipboardData)
        return;
      if (i.clipboardData.files.length > 0) {
        const { files: h } = i.clipboardData;
        f.emit(
          r,
          ye,
          Array.from(h).filter((p) => /image\/.*/.test(p.type))
        ), i.preventDefault();
        return;
      }
      const s = i.clipboardData.getData("text/plain"), d = t.current?.view.state.selection.main.to || 0, b = t.current?.view.state.doc.lineAt(d).from || 0, c = t.current?.view.state.doc.sliceString(b, d) || "", u = /!\[.*\]\(\s*$/.test(c), g = /!\[.*\]\((.*)\s?.*\)/.test(s);
      if (u) {
        const h = e.transformImgUrl(s);
        o(h), i.preventDefault();
        return;
      } else if (g) {
        const h = s.match(
          new RegExp(`(?<=!\\[.*\\]\\()([^)\\s]+)(?=\\s?["']?.*["']?\\))`, "g")
        );
        h ? Promise.all(
          h.map((p) => e.transformImgUrl(p))
        ).then((p) => {
          o(
            p.reduce((T, v, k) => T.replace(h[k], v), s)
          );
        }).catch((p) => {
          console.error(p);
        }) : o(s), i.preventDefault();
        return;
      }
      if (e.autoDetectCode && i.clipboardData.types.includes("vscode-editor-data")) {
        const h = JSON.parse(i.clipboardData.getData("vscode-editor-data"));
        f.emit(r, w, "code", {
          mode: h.mode,
          text: i.clipboardData.getData("text/plain")
        }), i.preventDefault();
        return;
      }
      e.maxLength && s.length + e.modelValue.length > e.maxLength && f.emit(r, re, {
        name: "overlength",
        message: "The input text is too long",
        data: s
      });
    },
    [t, r, o, e]
  );
}, de = (e, t, r, o, l) => (i, s, d, b) => {
  const c = `${e}${t}${r}${o}`, u = d + s.label.length + (l === "title" ? r.length : 0);
  i.dispatch({
    changes: { from: d, to: b, insert: c },
    selection: Q.create(
      [
        Q.range(
          d + s.label.length + (l === "title" ? 1 : -t.length),
          u
        ),
        Q.cursor(u)
      ],
      1
    )
  }), i.focus();
}, _e = (e) => (t, r, o, l) => {
  const i = e.slice(l - o);
  t.dispatch(t.state.replaceSelection(`${i} `));
}, We = (e) => {
  const t = (r) => {
    const o = r.matchBefore(
      /^#+|^-\s*\[*\s*\]*|`+|\[|!\[*|^\|\s?\|?|\$\$?|!+\s*\w*/
    );
    return o === null || o.from == o.to && r.explicit ? null : {
      from: o.from,
      options: [
        // 标题
        ...["h2", "h3", "h4", "h5", "h6"].map((l, i) => {
          const s = new Array(i + 2).fill("#").join("");
          return {
            label: s,
            type: "text",
            apply: _e(s)
          };
        }),
        // 任务列表
        ...["unchecked", "checked"].map((l) => {
          const i = l === "checked" ? "- [x]" : "- [ ]";
          return {
            label: i,
            type: "text",
            apply: _e(i)
          };
        }),
        // 代码
        ...[
          ["`", ""],
          ["```", "language"],
          ["```mermaid\n", ""],
          ["```echarts\n", ""]
        ].map((l) => ({
          label: `${l[0]}${l[1]}`,
          type: "text",
          apply: de(l[0], l[1], "", l[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: de("$", "", "", "$", "type")
        },
        {
          label: "$$",
          type: "text",
          apply: de("$$", "", `
`, `
$$`, "title")
        },
        // 那啥？
        ...[
          "note",
          "abstract",
          "info",
          "tip",
          "success",
          "question",
          "warning",
          "failure",
          "danger",
          "bug",
          "example",
          "quote",
          "hint",
          "caution",
          "error",
          "attention"
        ].map((l) => ({
          label: `!!! ${l}`,
          type: "text",
          apply: de("!!!", ` ${l}`, " Title", `

!!!`, "title")
        }))
      ]
    };
  };
  return ao({
    override: e ? [t, ...e] : [t]
  });
}, go = (e, t) => [
  {
    key: "Ctrl-b",
    mac: "Cmd-b",
    run: () => (f.emit(e, w, "bold"), !0)
  },
  {
    key: "Ctrl-d",
    mac: "Cmd-d",
    run: _t,
    preventDefault: !0
  },
  {
    key: "Ctrl-s",
    mac: "Cmd-s",
    run: (B) => (f.emit(e, dt, B.state.doc.toString()), !0),
    shift: () => (f.emit(e, w, "strikeThrough"), !0)
  },
  {
    key: "Ctrl-u",
    mac: "Cmd-u",
    preventDefault: !0,
    run: () => (f.emit(e, w, "underline"), !0),
    shift: () => (f.emit(e, w, "unorderedList"), !0)
  },
  {
    key: "Ctrl-i",
    mac: "Cmd-i",
    preventDefault: !0,
    run: () => (f.emit(e, w, "italic"), !0),
    shift: () => (f.emit(e, w, "image"), !0)
  },
  {
    key: "Ctrl-1",
    mac: "Cmd-1",
    run: () => (f.emit(e, w, "h1"), !0)
  },
  {
    key: "Ctrl-2",
    mac: "Cmd-2",
    run: () => (f.emit(e, w, "h2"), !0)
  },
  {
    key: "Ctrl-3",
    mac: "Cmd-3",
    run: () => (f.emit(e, w, "h3"), !0)
  },
  {
    key: "Ctrl-4",
    mac: "Cmd-4",
    run: () => (f.emit(e, w, "h4"), !0)
  },
  {
    key: "Ctrl-5",
    mac: "Cmd-5",
    run: () => (f.emit(e, w, "h5"), !0)
  },
  {
    key: "Ctrl-6",
    mac: "Cmd-6",
    run: () => (f.emit(e, w, "h6"), !0)
  },
  {
    key: "Ctrl-ArrowUp",
    mac: "Cmd-ArrowUp",
    run: () => (f.emit(e, w, "sup"), !0)
  },
  {
    key: "Ctrl-ArrowDown",
    mac: "Cmd-ArrowDown",
    run: () => (f.emit(e, w, "sub"), !0)
  },
  {
    key: "Ctrl-o",
    mac: "Cmd-o",
    run: () => (f.emit(e, w, "orderedList"), !0)
  },
  {
    key: "Ctrl-c",
    mac: "Cmd-c",
    shift: () => (f.emit(e, w, "code"), !0),
    any(B, P) {
      return (P.ctrlKey || P.metaKey) && P.altKey && P.code === "KeyC" ? (f.emit(e, w, "codeRow"), !0) : !1;
    }
  },
  {
    key: "Ctrl-l",
    mac: "Cmd-l",
    run: () => (f.emit(e, w, "link"), !0)
  },
  {
    key: "Ctrl-f",
    mac: "Cmd-f",
    shift: () => t.noPrettier ? !1 : (f.emit(e, w, "prettier"), !0)
  },
  {
    any: (B, P) => (P.ctrlKey || P.metaKey) && P.altKey && P.shiftKey && P.code === "KeyT" ? (f.emit(e, w, "table"), !0) : !1
  },
  ...lo
], fo = () => /* @__PURE__ */ a("div", { className: `${n}-divider` }), po = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.bold,
      "aria-label": t.toolbarTips?.bold,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "bold");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "bold" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.bold })
      ]
    }
  );
}, To = N(po), vo = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o,
    catalogVisible: l
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        l && `${n}-toolbar-active`,
        o && `${n}-disabled`
      ]),
      title: t.toolbarTips?.catalog,
      "aria-label": t.toolbarTips?.catalog,
      disabled: o,
      onClick: () => {
        f.emit(e, no);
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "catalog" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.catalog })
      ]
    },
    "bar-catalog"
  );
}, wo = N(vo), $o = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.code,
      "aria-label": t.toolbarTips?.code,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "code");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "code" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.code })
      ]
    }
  );
}, Co = N($o), xo = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.codeRow,
      "aria-label": t.toolbarTips?.codeRow,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "codeRow");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "code-row" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.codeRow })
      ]
    }
  );
}, yo = N(xo), ko = () => {
  const {
    setting: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C), { fullscreenHandler: l } = Ir();
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        e.fullscreen && `${n}-toolbar-active`,
        o && `${n}-disabled`
      ]),
      title: t.toolbarTips?.fullscreen,
      "aria-label": t.toolbarTips?.fullscreen,
      disabled: o,
      onClick: () => {
        l();
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: e.fullscreen ? "fullscreen-exit" : "fullscreen" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.fullscreen })
      ]
    }
  );
}, No = N(ko), So = () => {
  const { usedLanguageText: e, showToolbarName: t, disabled: r } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, r && `${n}-disabled`]),
      title: e.toolbarTips?.github,
      "aria-label": e.toolbarTips?.github,
      disabled: r,
      onClick: () => {
        kt("https://github.com/imzbf/md-editor-rt");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "github" }),
        t && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: e.toolbarTips?.github })
      ]
    }
  );
}, Eo = N(So), Io = () => {
  const {
    usedLanguageText: e,
    setting: t,
    updateSetting: r,
    showToolbarName: o,
    disabled: l
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        t.htmlPreview && `${n}-toolbar-active`,
        l && `${n}-disabled`
      ]),
      title: e.toolbarTips?.htmlPreview,
      "aria-label": e.toolbarTips?.htmlPreview,
      disabled: l,
      onClick: () => {
        r("htmlPreview");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "preview-html" }),
        o && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: e.toolbarTips?.htmlPreview })
      ]
    }
  );
}, Lo = N(Io), Ao = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.image,
      "aria-label": t.toolbarTips?.image,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "image");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "image" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.image })
      ]
    }
  );
}, Do = N(Ao);
let X = null;
const Ro = (e) => {
  const t = y(C), { editorId: r, usedLanguageText: o, rootRef: l } = t, i = ee.editorExtensions.cropper.instance, s = R(null), d = R(null), b = R(null), [c, u] = O({
    cropperInited: !1,
    imgSelected: !1,
    imgSrc: "",
    // 是否全屏
    isFullscreen: !1
  });
  D(() => {
    e.visible && !c.cropperInited && (window.Cropper = i || window.Cropper, s.current.onchange = () => {
      if (!window.Cropper) {
        f.emit(r, re, {
          name: "Cropper",
          message: "Cropper is undefined"
        });
        return;
      }
      const T = s.current.files || [];
      if (T?.length > 0) {
        const v = new FileReader();
        v.onload = (k) => {
          u((I) => ({
            ...I,
            imgSelected: !0,
            imgSrc: k.target.result
          }));
        }, v.readAsDataURL(T[0]);
      }
    });
  }, [e.visible, c.cropperInited, i, r]), D(() => {
    b.current?.setAttribute("style", "");
  }, [c.imgSelected]), D(() => {
    X?.destroy(), b.current?.setAttribute("style", ""), d.current && c.imgSrc && (X = new window.Cropper(d.current, {
      viewMode: 2,
      preview: (l.current?.getRootNode()).querySelector(
        `.${n}-clip-preview-target`
      )
    }));
  }, [c.imgSrc, c.isFullscreen, l]);
  const g = V(() => c.isFullscreen ? {
    width: "100%",
    height: "100%"
  } : {
    width: "668px",
    height: "392px"
  }, [c.isFullscreen]), h = () => {
    X.clear(), X.destroy(), X = null, s.current.value = "", u((T) => ({
      ...T,
      imgSrc: "",
      imgSelected: !1
    }));
  }, p = A((T) => {
    u((v) => ({
      ...v,
      isFullscreen: T
    }));
  }, []);
  return V(() => /* @__PURE__ */ $(
    co,
    {
      className: `${n}-modal-clip`,
      title: o.clipModalTips?.title,
      visible: e.visible,
      onClose: e.onCancel,
      showAdjust: !0,
      isFullscreen: c.isFullscreen,
      onAdjust: p,
      ...g,
      children: [
        /* @__PURE__ */ $("div", { className: `${n}-form-item ${n}-clip`, children: [
          /* @__PURE__ */ a("div", { className: `${n}-clip-main`, children: c.imgSelected ? /* @__PURE__ */ $("div", { className: `${n}-clip-cropper`, children: [
            /* @__PURE__ */ a(
              "img",
              {
                src: c.imgSrc,
                ref: d,
                style: { display: "none" },
                alt: ""
              }
            ),
            /* @__PURE__ */ a("div", { className: `${n}-clip-delete`, onClick: h, children: /* @__PURE__ */ a(L, { name: "delete" }) })
          ] }) : /* @__PURE__ */ a(
            "div",
            {
              className: `${n}-clip-upload`,
              onClick: () => {
                s.current.click();
              },
              role: "button",
              tabIndex: 0,
              "aria-label": o.imgTitleItem?.upload,
              children: /* @__PURE__ */ a(L, { name: "upload" })
            }
          ) }),
          /* @__PURE__ */ a("div", { className: `${n}-clip-preview`, children: /* @__PURE__ */ a("div", { className: `${n}-clip-preview-target`, ref: b }) })
        ] }),
        /* @__PURE__ */ a("div", { className: `${n}-form-item`, children: /* @__PURE__ */ a(
          "button",
          {
            className: `${n}-btn`,
            type: "button",
            onClick: () => {
              if (X) {
                const T = X.getCroppedCanvas();
                f.emit(
                  r,
                  ye,
                  [St(T.toDataURL("image/png"))],
                  e.onOk
                ), h();
              }
            },
            children: o.linkModalTips?.buttonOK
          }
        ) }),
        /* @__PURE__ */ a(
          "input",
          {
            ref: s,
            accept: "image/*",
            type: "file",
            multiple: !1,
            style: { display: "none" },
            "aria-hidden": "true"
          }
        )
      ]
    }
  ), [
    o.clipModalTips?.title,
    o.linkModalTips?.buttonOK,
    o.imgTitleItem?.upload,
    e.visible,
    e.onCancel,
    e.onOk,
    c.isFullscreen,
    c.imgSelected,
    c.imgSrc,
    p,
    g,
    r
  ]);
}, Mo = N(Ro), Fo = (e) => /* @__PURE__ */ a(Mo, { visible: e.clipVisible, onOk: e.onOk, onCancel: e.onCancel }), Ho = N(Fo), Po = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C), l = `${e}-toolbar-wrapper`, [i, s] = O(!1), [d, b] = O(!1), c = R(null), u = A(() => {
    f.emit(e, ye, Array.from(c.current?.files || [])), c.current.value = "";
  }, [e]), g = A(
    (k, I) => {
      o || f.emit(e, w, k, I);
    },
    [e, o]
  ), h = A(() => {
    b(!1);
  }, []), p = A(
    (k) => {
      k && g("image", {
        desc: k.desc,
        url: k.url,
        transform: !0
      }), b(!1);
    },
    [g]
  ), T = V(() => {
    const k = [
      {
        key: "link",
        label: t.imgTitleItem?.link,
        onClick: () => g("image")
      },
      {
        key: "upload",
        label: t.imgTitleItem?.upload,
        onClick: () => c.current?.click()
      },
      {
        key: "clip",
        label: t.imgTitleItem?.clip2upload,
        onClick: () => b(!0)
      }
    ];
    return /* @__PURE__ */ a(
      "ul",
      {
        className: `${n}-menu`,
        onClick: () => {
          s(!1);
        },
        role: "menu",
        children: k.map((I) => /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-image`,
            onClick: I.onClick,
            role: "menuitem",
            tabIndex: 0,
            children: I.label
          },
          I.key
        ))
      }
    );
  }, [g, t.imgTitleItem]), v = V(() => /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        o && `${n}-disabled`
      ]),
      title: t.toolbarTips?.image,
      "aria-label": t.toolbarTips?.image,
      disabled: o,
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "image" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.image })
      ]
    }
  ), [o, r, t.toolbarTips?.image]);
  return D(() => {
    const k = c.current;
    return k?.addEventListener("change", u), () => {
      k?.removeEventListener("change", u);
    };
  }, [u]), /* @__PURE__ */ $(rt, { children: [
    /* @__PURE__ */ a(
      "label",
      {
        htmlFor: `${l}_label`,
        style: { display: "none" },
        "aria-label": t.imgTitleItem?.upload
      }
    ),
    /* @__PURE__ */ a(
      "input",
      {
        id: `${l}_label`,
        ref: c,
        accept: "image/*",
        type: "file",
        multiple: !0,
        style: { display: "none" }
      }
    ),
    /* @__PURE__ */ a(Ho, { clipVisible: d, onCancel: h, onOk: p }),
    /* @__PURE__ */ a(
      ie,
      {
        relative: `#${l}`,
        visible: i,
        onChange: s,
        disabled: o,
        overlay: T,
        children: v
      }
    )
  ] });
}, Oo = N(Po), Vo = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.italic,
      "aria-label": t.toolbarTips?.italic,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "italic");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "italic" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.italic })
      ]
    }
  );
}, Bo = N(Vo), zo = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C), l = `${e}-toolbar-wrapper`, [i, s] = O(!1), d = A(
    (u) => {
      o || f.emit(e, w, u);
    },
    [o, e]
  ), b = V(() => /* @__PURE__ */ $(
    "ul",
    {
      className: `${n}-menu`,
      onClick: () => {
        s(!1);
      },
      role: "menu",
      children: [
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-katex`,
            onClick: () => {
              d("katexInline");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.katex?.inline
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-katex`,
            onClick: () => {
              d("katexBlock");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.katex?.block
          }
        )
      ]
    }
  ), [d, t.katex?.block, t.katex?.inline]), c = V(() => /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        o && `${n}-disabled`
      ]),
      title: t.toolbarTips?.katex,
      "aria-label": t.toolbarTips?.katex,
      disabled: o,
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "formula" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.katex })
      ]
    }
  ), [o, r, t.toolbarTips?.katex]);
  return /* @__PURE__ */ a(
    ie,
    {
      relative: `#${l}`,
      visible: i,
      onChange: s,
      disabled: o,
      overlay: b,
      children: c
    },
    "bar-katex"
  );
}, _o = N(zo), Wo = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.link,
      "aria-label": t.toolbarTips?.link,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "link");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "link" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.link })
      ]
    }
  );
}, qo = N(Wo), Ko = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C), l = `${e}-toolbar-wrapper`, [i, s] = O(!1), d = A(
    (u) => {
      o || f.emit(e, w, u);
    },
    [o, e]
  ), b = V(() => /* @__PURE__ */ $(
    "ul",
    {
      className: `${n}-menu`,
      onClick: () => {
        s(!1);
      },
      role: "menu",
      children: [
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-mermaid`,
            onClick: () => {
              d("flow");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.mermaid?.flow
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-mermaid`,
            onClick: () => {
              d("sequence");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.mermaid?.sequence
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-mermaid`,
            onClick: () => {
              d("gantt");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.mermaid?.gantt
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-mermaid`,
            onClick: () => {
              d("class");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.mermaid?.class
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-mermaid`,
            onClick: () => {
              d("state");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.mermaid?.state
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-mermaid`,
            onClick: () => {
              d("pie");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.mermaid?.pie
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-mermaid`,
            onClick: () => {
              d("relationship");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.mermaid?.relationship
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-mermaid`,
            onClick: () => {
              d("journey");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.mermaid?.journey
          }
        )
      ]
    }
  ), [
    d,
    t.mermaid?.class,
    t.mermaid?.flow,
    t.mermaid?.gantt,
    t.mermaid?.journey,
    t.mermaid?.pie,
    t.mermaid?.relationship,
    t.mermaid?.sequence,
    t.mermaid?.state
  ]), c = V(() => /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        o && `${n}-disabled`
      ]),
      title: t.toolbarTips?.mermaid,
      "aria-label": t.toolbarTips?.mermaid,
      disabled: o,
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "mermaid" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.mermaid })
      ]
    }
  ), [o, r, t.toolbarTips?.mermaid]);
  return /* @__PURE__ */ a(
    ie,
    {
      relative: `#${l}`,
      visible: i,
      onChange: s,
      disabled: o,
      overlay: b,
      children: c
    },
    "bar-mermaid"
  );
}, Uo = N(Ko), Go = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.next,
      "aria-label": t.toolbarTips?.next,
      disabled: o,
      onClick: () => {
        f.emit(e, $e);
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "next" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.next })
      ]
    }
  );
}, jo = N(Go), Yo = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.orderedList,
      "aria-label": t.toolbarTips?.orderedList,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "orderedList");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "ordered-list" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.orderedList })
      ]
    }
  );
}, Zo = N(Yo), Xo = () => {
  const {
    setting: e,
    usedLanguageText: t,
    updateSetting: r,
    showToolbarName: o,
    disabled: l
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        e.pageFullscreen && `${n}-toolbar-active`,
        l && `${n}-disabled`
      ]),
      title: t.toolbarTips?.pageFullscreen,
      "aria-label": t.toolbarTips?.pageFullscreen,
      disabled: l,
      onClick: () => {
        r("pageFullscreen");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: e.pageFullscreen ? "minimize" : "maximize" }),
        o && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.pageFullscreen })
      ]
    }
  );
}, Jo = N(Xo), Qo = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.prettier,
      "aria-label": t.toolbarTips?.prettier,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "prettier");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "prettier" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.prettier })
      ]
    }
  );
}, er = N(Qo), tr = () => {
  const {
    usedLanguageText: e,
    showToolbarName: t,
    disabled: r,
    setting: o,
    updateSetting: l
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        o.preview && `${n}-toolbar-active`,
        r && `${n}-disabled`
      ]),
      title: e.toolbarTips?.preview,
      "aria-label": e.toolbarTips?.preview,
      disabled: r,
      onClick: () => {
        l("preview");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "preview" }),
        t && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: e.toolbarTips?.preview })
      ]
    }
  );
}, or = N(tr), rr = () => {
  const {
    usedLanguageText: e,
    showToolbarName: t,
    disabled: r,
    setting: o,
    updateSetting: l
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        o.previewOnly && `${n}-toolbar-active`,
        r && `${n}-disabled`
      ]),
      title: e.toolbarTips?.previewOnly,
      "aria-label": e.toolbarTips?.previewOnly,
      disabled: r,
      onClick: () => {
        l("previewOnly");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "preview-only" }),
        t && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: e.toolbarTips?.previewOnly })
      ]
    }
  );
}, nr = N(rr), ar = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.quote,
      "aria-label": t.toolbarTips?.quote,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "quote");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "quote" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.quote })
      ]
    }
  );
}, lr = N(ar), ir = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.revoke,
      "aria-label": t.toolbarTips?.revoke,
      disabled: o,
      onClick: () => {
        f.emit(e, Ce);
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "revoke" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.revoke })
      ]
    }
  );
}, sr = N(ir), cr = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.save,
      "aria-label": t.toolbarTips?.save,
      disabled: o,
      onClick: () => {
        f.emit(e, dt);
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "save" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.save })
      ]
    }
  );
}, dr = N(cr), ur = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.strikeThrough,
      "aria-label": t.toolbarTips?.strikeThrough,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "strikeThrough");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "strike-through" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.strikeThrough })
      ]
    }
  );
}, mr = N(ur), br = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.sub,
      "aria-label": t.toolbarTips?.sub,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "sub");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "sub" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.sub })
      ]
    }
  );
}, hr = N(br), gr = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.sup,
      "aria-label": t.toolbarTips?.sup,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "sup");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "sup" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.sup })
      ]
    }
  );
}, fr = N(gr), pr = (e) => {
  const [t, r] = O({
    x: -1,
    y: -1
  }), o = V(() => JSON.stringify(e.tableShape), [e.tableShape]), l = A(() => {
    const d = [...JSON.parse(o)];
    return (!d[2] || d[2] < d[0]) && (d[2] = d[0]), (!d[3] || d[3] < d[3]) && (d[3] = d[1]), d;
  }, [o]), [i, s] = O(l);
  return D(() => {
    s(l), r({
      x: -1,
      y: -1
    });
  }, [l]), /* @__PURE__ */ a(
    "div",
    {
      className: `${n}-table-shape`,
      onMouseLeave: () => {
        s(l), r({
          x: -1,
          y: -1
        });
      },
      children: new Array(i[1]).fill("").map((d, b) => /* @__PURE__ */ a("div", { className: `${n}-table-shape-row`, children: new Array(i[0]).fill("").map((c, u) => /* @__PURE__ */ a(
        "div",
        {
          className: `${n}-table-shape-col`,
          onMouseEnter: () => {
            r({
              x: b,
              y: u
            }), u + 1 === i[0] && u + 1 < i[2] ? s((g) => {
              const h = [...g];
              return h[0] = g[0] + 1, h;
            }) : u + 2 < i[0] && i[0] > e.tableShape[0] && s((g) => {
              const h = [...g];
              return h[0] = g[0] - 1, h;
            }), b + 1 === i[1] && b + 1 < i[3] ? s((g) => {
              const h = [...g];
              return h[1] = g[1] + 1, h;
            }) : b + 2 < i[1] && i[1] > e.tableShape[1] && s((g) => {
              const h = [...g];
              return h[1] = g[1] - 1, h;
            });
          },
          onClick: () => {
            e.onSelected(t);
          },
          children: /* @__PURE__ */ a(
            "div",
            {
              className: [
                `${n}-table-shape-col-default`,
                b <= t.x && u <= t.y && `${n}-table-shape-col-include`
              ].filter((g) => !!g).join(" ")
            }
          )
        },
        `table-shape-col-${u}`
      )) }, `table-shape-row-${b}`))
    }
  );
}, Tr = N(pr), vr = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o,
    tableShape: l
  } = y(C), i = `${e}-toolbar-wrapper`, [s, d] = O(!1), b = A(
    (g) => {
      o || f.emit(e, w, "table", { selectedShape: g });
    },
    [o, e]
  ), c = V(() => /* @__PURE__ */ a(Tr, { tableShape: l, onSelected: b }), [b, l]), u = V(() => /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        o && `${n}-disabled`
      ]),
      title: t.toolbarTips?.table,
      "aria-label": t.toolbarTips?.table,
      disabled: o,
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "table" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.table })
      ]
    }
  ), [o, r, t.toolbarTips?.table]);
  return /* @__PURE__ */ a(
    ie,
    {
      relative: `#${i}`,
      visible: s,
      onChange: d,
      disabled: o,
      overlay: c,
      children: u
    },
    "bar-table"
  );
}, wr = N(vr), $r = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C);
  return /* @__PURE__ */ $(
    "button",
    {
      className: E([`${n}-toolbar-item`, o && `${n}-disabled`]),
      title: t.toolbarTips?.task,
      "aria-label": t.toolbarTips?.task,
      disabled: o,
      onClick: () => {
        f.emit(e, w, "task");
      },
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "task" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.task })
      ]
    }
  );
}, Cr = N($r), xr = () => {
  const {
    editorId: e,
    usedLanguageText: t,
    showToolbarName: r,
    disabled: o
  } = y(C), l = `${e}-toolbar-wrapper`, [i, s] = O(!1), d = A(
    (u) => {
      o || f.emit(e, w, u);
    },
    [o, e]
  ), b = V(() => /* @__PURE__ */ $(
    "ul",
    {
      className: `${n}-menu`,
      onClick: () => {
        s(!1);
      },
      role: "menu",
      children: [
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-title`,
            onClick: () => {
              d("h1");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.titleItem?.h1
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-title`,
            onClick: () => {
              d("h2");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.titleItem?.h2
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-title`,
            onClick: () => {
              d("h3");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.titleItem?.h3
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-title`,
            onClick: () => {
              d("h4");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.titleItem?.h4
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-title`,
            onClick: () => {
              d("h5");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.titleItem?.h5
          }
        ),
        /* @__PURE__ */ a(
          "li",
          {
            className: `${n}-menu-item ${n}-menu-item-title`,
            onClick: () => {
              d("h6");
            },
            role: "menuitem",
            tabIndex: 0,
            children: t.titleItem?.h6
          }
        )
      ]
    }
  ), [
    d,
    t.titleItem?.h1,
    t.titleItem?.h2,
    t.titleItem?.h3,
    t.titleItem?.h4,
    t.titleItem?.h5,
    t.titleItem?.h6
  ]), c = V(() => /* @__PURE__ */ $(
    "button",
    {
      className: E([
        `${n}-toolbar-item`,
        o && `${n}-disabled`
      ]),
      disabled: o,
      title: t.toolbarTips?.title,
      "aria-label": t.toolbarTips?.title,
      type: "button",
      children: [
        /* @__PURE__ */ a(L, { name: "title" }),
        r && /* @__PURE__ */ a("div", { className: `${n}-toolbar-item-name`, children: t.toolbarTips?.title })
      ]
    }
  ), [o, r, t.toolbarTips?.title]);
  return /* @__PURE__ */ a(
    ie,
    {
      relative: `#${l}`,
      visible: i,
      onChange: s,
      disabled: o