reactjs-tiptap-editor/lib/Heading.js

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

import { N as f, t as m, m as A } from "./clsx-DaPvp9ji.js";
import { u as M, H } from "./index-C07N8gA1.js";
import { jsx as d, Fragment as $, jsxs as g } from "react/jsx-runtime";
import { useMemo as b, Fragment as w } from "react";
import { u as x, e as D, c as y, l as N } from "./index-RcSPeQHn.js";
import { A as k } from "./ActionMenuButton-lsIBc9sU.js";
import "./theme.js";
import { D as L, a as C, b as T, c as I, e as K, d as P } from "./dropdown-menu-q6RL_fkA.js";
var R = f.create({
  name: "heading",
  addOptions() {
    return {
      levels: [1, 2, 3, 4, 5, 6],
      HTMLAttributes: {}
    };
  },
  content: "inline*",
  group: "block",
  defining: !0,
  addAttributes() {
    return {
      level: {
        default: 1,
        rendered: !1
      }
    };
  },
  parseHTML() {
    return this.options.levels.map((e) => ({
      tag: `h${e}`,
      attrs: { level: e }
    }));
  },
  renderHTML({ node: e, HTMLAttributes: t }) {
    return [`h${this.options.levels.includes(e.attrs.level) ? e.attrs.level : this.options.levels[0]}`, A(this.options.HTMLAttributes, t), 0];
  },
  parseMarkdown: (e, t) => t.createNode("heading", { level: e.depth || 1 }, t.parseInline(e.tokens || [])),
  renderMarkdown: (e, t) => {
    var a;
    const o = (a = e.attrs) != null && a.level ? parseInt(e.attrs.level, 10) : 1, i = "#".repeat(o);
    return e.content ? `${i} ${t.renderChildren(e.content)}` : "";
  },
  addCommands() {
    return {
      setHeading: (e) => ({ commands: t }) => this.options.levels.includes(e.level) ? t.setNode(this.name, e) : !1,
      toggleHeading: (e) => ({ commands: t }) => this.options.levels.includes(e.level) ? t.toggleNode(this.name, "paragraph", e) : !1
    };
  },
  addKeyboardShortcuts() {
    return this.options.levels.reduce(
      (e, t) => ({
        ...e,
        [`Mod-Alt-${t}`]: () => this.editor.commands.toggleHeading({ level: t })
      }),
      {}
    );
  },
  addInputRules() {
    return this.options.levels.map((e) => m({
      find: new RegExp(`^(#{${Math.min(...this.options.levels)},${e}})\\s$`),
      type: this.type,
      getAttributes: {
        level: e
      }
    }));
  }
});
function z() {
  const { t: e } = M(), t = x(S.name), {
    icon: a = void 0,
    tooltip: o = void 0,
    isActive: i = void 0,
    items: s = []
  } = (t == null ? void 0 : t.componentProps) ?? {}, { disabled: p, dataState: l } = D(i), r = b(() => (l == null ? void 0 : l.title) || e("editor.paragraph.tooltip"), [l]);
  return t ? /* @__PURE__ */ g(L, { children: [
    /* @__PURE__ */ d(
      C,
      {
        asChild: !0,
        disabled: p,
        children: /* @__PURE__ */ d(
          k,
          {
            disabled: p,
            icon: a,
            title: r,
            tooltip: o
          }
        )
      }
    ),
    /* @__PURE__ */ d(T, { className: "richtext-w-full", children: s == null ? void 0 : s.map((n, c) => {
      var u, h;
      return /* @__PURE__ */ g(w, { children: [
        /* @__PURE__ */ g(
          I,
          {
            checked: r === n.title,
            onClick: n.action,
            children: [
              /* @__PURE__ */ d(
                "div",
                {
                  className: y("richtext-ml-1 richtext-h-full", {
                    "": n.level === "Paragraph",
                    "heading-1": n.level === 1,
                    "heading-2": n.level === 2,
                    "heading-3": n.level === 3,
                    "heading-4": n.level === 4,
                    "heading-5": n.level === 5,
                    "heading-6": n.level === 6
                  }),
                  children: n.title
                }
              ),
              !!((u = n == null ? void 0 : n.shortcutKeys) != null && u.length) && /* @__PURE__ */ d(K, { className: "richtext-pl-4", children: (h = n == null ? void 0 : n.shortcutKeys) == null ? void 0 : h.map((v) => N(v)).join(" ") })
            ]
          }
        ),
        n.level === "Paragraph" && /* @__PURE__ */ d(P, {})
      ] }, `heading-k-${c}`);
    }) })
  ] }) : /* @__PURE__ */ d($, {});
}
const S = /* @__PURE__ */ R.extend({
  // 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),
      levels: H,
      button({ editor: t, extension: a, t: o }) {
        var l;
        const i = ((l = a.options) == null ? void 0 : l.levels) || [], s = i.map((r) => {
          var c;
          const n = r === "Paragraph";
          return {
            action: () => {
              if (n) {
                const u = i.find((h) => t.isActive("heading", { level: h }));
                u && u !== "Paragraph" && t.commands.toggleHeading({ level: u });
                return;
              }
              t.commands.toggleHeading({ level: r });
            },
            isActive: () => n ? !1 : t.isActive("heading", { level: r }) || !1,
            disabled: !t.can().toggleHeading({ level: r }),
            title: o(n ? "editor.paragraph.tooltip" : `editor.heading.h${r}.tooltip`),
            level: r,
            shortcutKeys: ((c = a.options.shortcutKeys) == null ? void 0 : c[r]) ?? ["alt", "mod", `${r}`],
            default: n
          };
        }), p = s.filter((r) => r.disabled).length === s.length;
        return {
          // component: HeadingButton,
          componentProps: {
            tooltip: o("editor.heading.tooltip"),
            disabled: p,
            items: s,
            icon: "MenuDown",
            isActive: () => {
              const r = s == null ? void 0 : s.find((c) => c.isActive());
              return r && !r.default ? r : {
                title: o("editor.paragraph.tooltip"),
                level: 0,
                isActive: () => !1
              };
            },
            levels: i
          }
        };
      }
    };
  }
});
export {
  S as Heading,
  z as RichTextHeading
};