reactjs-tiptap-editor/lib/MoreMark.js

A modern WYSIWYG rich text editor based on tiptap and shadcn ui for React

import { M as h, m, E as b } from "./clsx-DaPvp9ji.js";
import { jsx as e, Fragment as M, jsxs as d } from "react/jsx-runtime";
import { useMemo as f } from "react";
import { u as x, e as A, A as S, M as k, I as v, g as y } from "./index-RcSPeQHn.js";
import "./theme.js";
import { D as T, a as K, b as w, c as C } from "./dropdown-menu-q6RL_fkA.js";
var H = h.create({
  name: "subscript",
  addOptions() {
    return {
      HTMLAttributes: {}
    };
  },
  parseHTML() {
    return [
      {
        tag: "sub"
      },
      {
        style: "vertical-align",
        getAttrs(t) {
          return t !== "sub" ? !1 : null;
        }
      }
    ];
  },
  renderHTML({ HTMLAttributes: t }) {
    return ["sub", m(this.options.HTMLAttributes, t), 0];
  },
  addCommands() {
    return {
      setSubscript: () => ({ commands: t }) => t.setMark(this.name),
      toggleSubscript: () => ({ commands: t }) => t.toggleMark(this.name),
      unsetSubscript: () => ({ commands: t }) => t.unsetMark(this.name)
    };
  },
  addKeyboardShortcuts() {
    return {
      "Mod-,": () => this.editor.commands.toggleSubscript()
    };
  }
}), L = h.create({
  name: "superscript",
  addOptions() {
    return {
      HTMLAttributes: {}
    };
  },
  parseHTML() {
    return [
      {
        tag: "sup"
      },
      {
        style: "vertical-align",
        getAttrs(t) {
          return t !== "super" ? !1 : null;
        }
      }
    ];
  },
  renderHTML({ HTMLAttributes: t }) {
    return ["sup", m(this.options.HTMLAttributes, t), 0];
  },
  addCommands() {
    return {
      setSuperscript: () => ({ commands: t }) => t.setMark(this.name),
      toggleSuperscript: () => ({ commands: t }) => t.toggleMark(this.name),
      unsetSuperscript: () => ({ commands: t }) => t.unsetMark(this.name)
    };
  },
  addKeyboardShortcuts() {
    return {
      "Mod-.": () => this.editor.commands.toggleSuperscript()
    };
  }
});
function z() {
  const t = x(D.name), {
    icon: s = void 0,
    tooltip: n = void 0,
    items: i = [],
    isActive: a = void 0
  } = (t == null ? void 0 : t.componentProps) ?? {}, { disabled: c, dataState: o } = A(a), p = f(() => (o == null ? void 0 : o.title) || "", [o]);
  return t ? /* @__PURE__ */ d(T, { children: [
    /* @__PURE__ */ e(
      K,
      {
        asChild: !0,
        disabled: c,
        children: /* @__PURE__ */ e(
          S,
          {
            customClass: "!richtext-w-12 richtext-h-12",
            disabled: c,
            icon: s,
            tooltip: n,
            children: /* @__PURE__ */ e(k, { className: "richtext-size-3 richtext-text-gray-500" })
          }
        )
      }
    ),
    /* @__PURE__ */ e(w, { className: "w-full", children: i == null ? void 0 : i.map((r, u) => /* @__PURE__ */ d(
      C,
      {
        checked: p === r.title,
        className: "richtext-flex richtext-items-center richtext-gap-3",
        onClick: r.action,
        children: [
          /* @__PURE__ */ e(v, { name: r == null ? void 0 : r.icon }),
          /* @__PURE__ */ e("span", { className: "richtext-ml-1", children: r.title }),
          !!(r != null && r.shortcutKeys) && /* @__PURE__ */ e("span", { className: "richtext-ml-auto richtext-text-xs richtext-tracking-widest richtext-opacity-60", children: y(r.shortcutKeys) })
        ]
      },
      `more-mark-${u}`
    )) })
  ] }) : /* @__PURE__ */ e(M, {});
}
const D = /* @__PURE__ */ b.create({
  name: "moreMark",
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-expect-error
  addOptions() {
    var t;
    return {
      ...(t = this.parent) == null ? void 0 : t.call(this),
      button({ editor: s, extension: n, t: i }) {
        var u, l;
        const a = n.options.subscript, c = n.options.superscript, o = {
          action: () => s.commands.toggleSubscript(),
          isActive: () => s.isActive("subscript") || !1,
          disabled: !s.can().toggleSubscript(),
          icon: "Subscript",
          title: i("editor.subscript.tooltip"),
          shortcutKeys: ((u = n.options.shortcutKeys) == null ? void 0 : u[0]) ?? ["mod", "."]
        }, p = {
          action: () => s.commands.toggleSuperscript(),
          isActive: () => s.isActive("superscript") || !1,
          disabled: !s.can().toggleSuperscript(),
          icon: "Superscript",
          title: i("editor.superscript.tooltip"),
          shortcutKeys: ((l = n.options.shortcutKeys) == null ? void 0 : l[1]) ?? ["mod", ","]
        }, r = [];
        return a !== !1 && r.push(o), c !== !1 && r.push(p), {
          // component: ActionMoreButton,
          componentProps: {
            icon: "Type",
            tooltip: i("editor.moremark"),
            disabled: !s.isEditable,
            items: r,
            isActive: () => r == null ? void 0 : r.find((g) => g.isActive())
          }
        };
      }
    };
  },
  addExtensions() {
    const t = [];
    return this.options.subscript !== !1 && t.push(H.configure(this.options.subscript)), this.options.superscript !== !1 && t.push(L.configure(this.options.superscript)), t;
  }
});
export {
  D as MoreMark,
  z as RichTextMoreMark
};