velaris-richtext-editor/lib/TextAlign.js

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

import { E as T } from "./index-Drmyqk9P.js";
import { jsxs as g, jsx as n } from "react/jsx-runtime";
import { useMemo as b } from "react";
import { P as M, m as v, A as S, k as A, n as C, T as j, a as K, r as w, b as P, s as z } from "./RichTextEditor-BbtoCmQU.js";
const L = T.create({
  name: "textAlign",
  addOptions() {
    return {
      types: [],
      alignments: ["left", "center", "right", "justify"],
      defaultAlignment: null
    };
  },
  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          textAlign: {
            default: this.options.defaultAlignment,
            parseHTML: (t) => {
              const i = t.style.textAlign;
              return this.options.alignments.includes(i) ? i : this.options.defaultAlignment;
            },
            renderHTML: (t) => t.textAlign ? { style: `text-align: ${t.textAlign}` } : {}
          }
        }
      }
    ];
  },
  addCommands() {
    return {
      setTextAlign: (t) => ({ commands: i }) => this.options.alignments.includes(t) ? this.options.types.map((l) => i.updateAttributes(l, { textAlign: t })).every((l) => l) : !1,
      unsetTextAlign: () => ({ commands: t }) => this.options.types.map((i) => t.resetAttributes(i, "textAlign")).every((i) => i)
    };
  },
  addKeyboardShortcuts() {
    return {
      "Mod-Shift-l": () => this.editor.commands.setTextAlign("left"),
      "Mod-Shift-e": () => this.editor.commands.setTextAlign("center"),
      "Mod-Shift-r": () => this.editor.commands.setTextAlign("right"),
      "Mod-Shift-j": () => this.editor.commands.setTextAlign("justify")
    };
  }
});
function N(t) {
  var l;
  const i = b(() => {
    var a;
    const e = (a = t == null ? void 0 : t.items) == null ? void 0 : a.find((c) => c.isActive());
    return e && !e.default ? {
      ...e,
      icon: e.icon ? e.icon : t.icon
    } : {
      title: t == null ? void 0 : t.tooltip,
      icon: t.icon,
      isActive: () => !1
    };
  }, [t]);
  return /* @__PURE__ */ g(M, { modal: !0, children: [
    /* @__PURE__ */ n(
      v,
      {
        asChild: !0,
        disabled: t == null ? void 0 : t.disabled,
        children: /* @__PURE__ */ n(
          S,
          {
            customClass: "!richtext-w-12 richtext-h-12",
            disabled: t == null ? void 0 : t.disabled,
            icon: t == null ? void 0 : t.icon,
            tooltip: t == null ? void 0 : t.tooltip,
            children: /* @__PURE__ */ n(
              A,
              {
                className: "richtext-ml-1 richtext-size-3 richtext-text-zinc-500",
                name: "MenuDown"
              }
            )
          }
        )
      }
    ),
    /* @__PURE__ */ n(
      C,
      {
        align: "start",
        className: "richtext-flex richtext-w-full richtext-min-w-4 richtext-flex-row richtext-gap-1 !richtext-p-[4px]",
        side: "bottom",
        children: (l = t == null ? void 0 : t.items) == null ? void 0 : l.map((e, r) => {
          var a, c;
          return /* @__PURE__ */ g(j, { children: [
            /* @__PURE__ */ n(K, { asChild: !0, children: /* @__PURE__ */ n(
              w,
              {
                className: "richtext-size-7 richtext-p-1",
                "data-state": i.title === e.title ? "on" : "off",
                onClick: e == null ? void 0 : e.action,
                pressed: i.title === e.title,
                size: "sm",
                children: (e == null ? void 0 : e.icon) && /* @__PURE__ */ n(A, { name: e.icon })
              }
            ) }),
            /* @__PURE__ */ g(P, { className: "richtext-flex richtext-flex-col richtext-items-center", children: [
              /* @__PURE__ */ n("span", { children: e.title }),
              !!((a = e.shortcutKeys) != null && a.length) && /* @__PURE__ */ n("span", { children: (c = e.shortcutKeys) == null ? void 0 : c.map((o) => z(o)).join(" ") })
            ] })
          ] }, `text-align-${r}`);
        })
      }
    )
  ] });
}
const H = /* @__PURE__ */ L.extend({
  addOptions() {
    var t;
    return {
      ...(t = this.parent) == null ? void 0 : t.call(this),
      types: ["heading", "paragraph", "list_item", "title"],
      button({
        editor: i,
        extension: l,
        t: e
      }) {
        var u;
        const r = ((u = l.options) == null ? void 0 : u.alignments) || [], a = {
          left: ["mod", "Shift", "L"],
          center: ["mod", "Shift", "E"],
          right: ["mod", "Shift", "R"],
          justify: ["mod", "Shift", "J"]
        }, c = {
          left: "AlignLeft",
          center: "AlignCenter",
          right: "AlignRight",
          justify: "AlignJustify"
        }, o = r.map((s) => {
          var x, h, m;
          return {
            title: e(`editor.textalign.${s}.tooltip`),
            icon: c[s],
            shortcutKeys: a[s],
            isActive: () => i.isActive({ textAlign: s }) || !1,
            action: () => {
              var d, f;
              return (f = (d = i.commands) == null ? void 0 : d.setTextAlign) == null ? void 0 : f.call(d, s);
            },
            disabled: !((m = (h = (x = i == null ? void 0 : i.can) == null ? void 0 : x.call(i)) == null ? void 0 : h.setTextAlign) != null && m.call(h, s))
          };
        }), y = o.filter((s) => s.disabled).length === o.length;
        return {
          component: N,
          componentProps: {
            icon: "AlignJustify",
            tooltip: e("editor.textalign.tooltip"),
            disabled: y,
            items: o
          }
        };
      }
    };
  }
});
export {
  H as TextAlign
};