reactjs-tiptap-editor/lib/FontSize.js

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

import { E as m } from "./clsx-DaPvp9ji.js";
import { u as p, g as S } from "./index-C07N8gA1.js";
import { u as z, e as h, f as v } from "./index-RcSPeQHn.js";
import { jsx as r, Fragment as x, jsxs as d } from "react/jsx-runtime";
import { useMemo as A, Fragment as D } from "react";
import { A as g } from "./ActionMenuButton-lsIBc9sU.js";
import "./theme.js";
import { D as y, a as F, b as M, c as w, d as T } from "./dropdown-menu-q6RL_fkA.js";
function $() {
  const { t: e } = p(), n = z(b.name), {
    icon: f = void 0,
    tooltip: s = void 0,
    items: a = [],
    isActive: u = void 0
  } = (n == null ? void 0 : n.componentProps) ?? {}, { disabled: l, dataState: t } = h(u), i = A(() => (t == null ? void 0 : t.title) || e("editor.fontSize.default.tooltip"), [t]);
  return n ? /* @__PURE__ */ d(y, { children: [
    /* @__PURE__ */ r(
      F,
      {
        asChild: !0,
        disabled: l,
        children: /* @__PURE__ */ r(
          g,
          {
            disabled: l,
            icon: f,
            title: i,
            tooltip: s
          }
        )
      }
    ),
    /* @__PURE__ */ r(M, { className: "richtext-max-h-96 richtext-w-32 richtext-overflow-y-auto", children: a == null ? void 0 : a.map((o, c) => /* @__PURE__ */ d(D, { children: [
      /* @__PURE__ */ r(
        w,
        {
          checked: i === o.title,
          onClick: o.action,
          children: /* @__PURE__ */ r("div", { className: "richtext-ml-1 richtext-h-full", children: o.title })
        }
      ),
      o.title === e("editor.fontSize.default.tooltip") && /* @__PURE__ */ r(T, {})
    ] }, `font-size-${c}`)) })
  ] }) : /* @__PURE__ */ r(x, {});
}
const b = /* @__PURE__ */ m.create({
  name: "fontSize",
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-expect-error
  addOptions() {
    var e;
    return {
      ...(e = this.parent) == null ? void 0 : e.call(this),
      types: ["textStyle"],
      fontSizes: S,
      button({ editor: n, extension: f, t: s }) {
        var l;
        const u = v((l = f.options) == null ? void 0 : l.fontSizes).map((t) => ({
          title: t.value === "Default" ? s("editor.fontSize.default.tooltip") : String(t.name),
          isActive: () => {
            const { fontSize: i } = n.getAttributes("textStyle"), o = t.value === "Default", c = i == null || i === "";
            return o && c ? !0 : n.isActive({ fontSize: String(t.value) }) || !1;
          },
          action: () => {
            if (t.value === "Default") {
              n.commands.unsetFontSize();
              return;
            }
            n.commands.setFontSize(String(t.value));
          },
          // disabled: !editor.can().setFontSize(String(k.value)),
          default: t.value === "Default" || !1
        }));
        return {
          // component: FontSizeMenuButton,
          componentProps: {
            editor: n,
            tooltip: s("editor.fontSize.tooltip"),
            disabled: !1,
            items: u,
            maxHeight: 280,
            icon: "MenuDown",
            isActive: () => {
              const t = (u || []).find((o) => o.isActive());
              return t && !t.default ? t : {
                title: s("editor.fontSize.default.tooltip"),
                isActive: () => !1
              };
            }
          }
        };
      }
    };
  },
  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          fontSize: {
            default: null,
            parseHTML: (e) => e.style.fontSize.replaceAll(/["']+/g, ""),
            renderHTML: (e) => e.fontSize ? {
              style: `font-size: ${e.fontSize}`
            } : {}
          }
        }
      }
    ];
  },
  addCommands() {
    return {
      setFontSize: (e) => ({ chain: n }) => n().setMark("textStyle", { fontSize: e }).run(),
      unsetFontSize: () => ({ chain: e }) => e().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run()
    };
  }
});
export {
  b as FontSize,
  $ as RichTextFontSize
};