reactjs-tiptap-editor/lib/FontFamily.js

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

import { F as p } from "./index-BDYJ8Ph2.js";
import { u as F, D as y } from "./index-C07N8gA1.js";
import { u as h, e as v, f as A } from "./index-RcSPeQHn.js";
import { jsx as i, Fragment as D, jsxs as f } from "react/jsx-runtime";
import { useMemo as M, Fragment as w } from "react";
import { A as L } from "./ActionMenuButton-lsIBc9sU.js";
import "./theme.js";
import { D as g, a as x, b, c as T, d as C } from "./dropdown-menu-q6RL_fkA.js";
function S() {
  const { t: a } = F(), n = h(N.name), {
    icon: s = void 0,
    tooltip: c = void 0,
    items: l = [],
    isActive: r = void 0
  } = (n == null ? void 0 : n.componentProps) ?? {}, { disabled: u, dataState: t } = v(r), o = M(() => (t == null ? void 0 : t.font) || a("editor.fontFamily.default.tooltip"), [t]);
  return n ? /* @__PURE__ */ f(g, { children: [
    /* @__PURE__ */ i(
      x,
      {
        asChild: !0,
        disabled: u,
        children: /* @__PURE__ */ i(
          L,
          {
            disabled: u,
            icon: s,
            title: (o == null ? void 0 : o.length) > 12 ? `${o == null ? void 0 : o.slice(0, 12)}...` : o,
            tooltip: c
          }
        )
      }
    ),
    /* @__PURE__ */ i(b, { className: "richtext-w-full", children: l == null ? void 0 : l.map((e, m) => {
      const d = e.font === a("editor.fontFamily.default.tooltip") ? {} : { fontFamily: e.font };
      return /* @__PURE__ */ f(w, { children: [
        /* @__PURE__ */ i(
          T,
          {
            checked: o === e.font,
            onClick: e.action,
            children: /* @__PURE__ */ i(
              "div",
              {
                className: "richtext-ml-1 richtext-h-full",
                style: d,
                children: e.font
              }
            )
          }
        ),
        e.font === a("editor.fontFamily.default.tooltip") && /* @__PURE__ */ i(C, {})
      ] }, `font-family-${m}`);
    }) })
  ] }) : /* @__PURE__ */ i(D, {});
}
const N = /* @__PURE__ */ p.extend({
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-expect-error
  addOptions() {
    var a;
    return {
      ...(a = this.parent) == null ? void 0 : a.call(this),
      fontFamilyList: y,
      button({ editor: n, extension: s, t: c }) {
        var u;
        const l = A(((u = s == null ? void 0 : s.options) == null ? void 0 : u.fontFamilyList) || []), r = l.map((t) => ({
          action: () => {
            if (t.value === "Default") {
              n.chain().focus().unsetFontFamily().run();
              return;
            }
            n.chain().focus().setFontFamily(t.value).run();
          },
          isActive: () => n.isActive("textStyle", { fontFamily: t.value }) || !1,
          // disabled: !editor.can().setFontFamily(font.value),
          title: t.name,
          font: t.value,
          default: t.value === "Default"
        }));
        return {
          // component: FontFamilyButton,
          componentProps: {
            tooltip: c("editor.fontFamily.tooltip"),
            disabled: !1,
            items: r,
            isActive: () => {
              const t = r == null ? void 0 : r.find((e) => e.isActive());
              return t && !t.default ? t : {
                title: c("editor.fontFamily.default.tooltip"),
                font: c("editor.fontFamily.default.tooltip"),
                isActive: () => !1,
                disabled: !1
              };
            },
            icon: "MenuDown",
            fontFamilyList: l
          }
        };
      }
    };
  }
});
export {
  N as FontFamily,
  S as RichTextFontFamily
};