reactjs-tiptap-editor/lib/TextDirection.js

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

import { E as g } from "./clsx-DaPvp9ji.js";
import { jsx as o, Fragment as D, jsxs as x } from "react/jsx-runtime";
import v, { useMemo as b } from "react";
import { u as C, e as A, A as P, I as f, T as w, a as z, k as N, b as R, l as j } from "./index-RcSPeQHn.js";
import "./theme.js";
import { P as y, a as K, b as M } from "./popover-CtinPbiy.js";
function F() {
  const i = C(O.name), [c, h] = v.useState(!1), {
    icon: p = void 0,
    tooltip: u = void 0,
    items: s = [],
    isActive: d = void 0
  } = (i == null ? void 0 : i.componentProps) ?? {}, { editorDisabled: a, dataState: e } = A(d), r = b(() => (e == null ? void 0 : e.dir) || "unset", [e]);
  return i ? /* @__PURE__ */ x(
    y,
    {
      open: c,
      onOpenChange: h,
      modal: !0,
      children: [
        /* @__PURE__ */ o(
          K,
          {
            asChild: !0,
            disabled: a,
            children: /* @__PURE__ */ o(
              P,
              {
                customClass: "!richtext-w-12 richtext-h-12",
                disabled: a,
                icon: p,
                tooltip: u,
                children: /* @__PURE__ */ o(
                  f,
                  {
                    className: "richtext-ml-1 richtext-size-3 richtext-text-zinc-500",
                    name: "MenuDown"
                  }
                )
              }
            )
          }
        ),
        /* @__PURE__ */ o(
          M,
          {
            align: "start",
            className: "richtext-flex richtext-w-full richtext-min-w-4 richtext-flex-row richtext-gap-1 !richtext-p-[4px]",
            side: "bottom",
            hideWhenDetached: !0,
            children: s == null ? void 0 : s.map((t, n) => {
              var l, m;
              return /* @__PURE__ */ x(w, { children: [
                /* @__PURE__ */ o(
                  z,
                  {
                    "data-state": r === t.value ? "on" : "off",
                    asChild: !0,
                    children: /* @__PURE__ */ o(
                      N,
                      {
                        className: "richtext-size-7 richtext-p-1",
                        onClick: () => {
                          t == null || t.action(), h(!1);
                        },
                        size: "sm",
                        children: (t == null ? void 0 : t.icon) && /* @__PURE__ */ o(f, { name: t.icon })
                      }
                    )
                  }
                ),
                /* @__PURE__ */ x(R, { className: "richtext-flex richtext-flex-col richtext-items-center", children: [
                  /* @__PURE__ */ o("span", { children: t.title }),
                  !!((l = t.shortcutKeys) != null && l.length) && /* @__PURE__ */ o("span", { children: (m = t.shortcutKeys) == null ? void 0 : m.map((T) => j(T)).join(" ") })
                ] })
              ] }, `text-direction-${n}`);
            })
          }
        )
      ]
    }
  ) : /* @__PURE__ */ o(D, {});
}
const O = /* @__PURE__ */ g.create({
  name: "richTextTextDirection",
  addOptions() {
    var i;
    return {
      ...(i = this.parent) == null ? void 0 : i.call(this),
      directions: ["auto", "ltr", "rtl", "unset"],
      defaultDirection: "auto",
      button({
        editor: c,
        extension: h,
        t: p
      }) {
        var a;
        const u = ((a = h.options) == null ? void 0 : a.directions) || [], s = {
          auto: "TextDirection",
          ltr: "LeftToRight",
          rtl: "RightToLeft",
          unset: "X"
        }, d = u.map((e) => ({
          title: p(`editor.textDirection.${e}.tooltip`),
          value: e,
          icon: s[e],
          action: () => {
            var r, t, n, l;
            if (e === "unset") {
              (t = (r = c.commands) == null ? void 0 : r.unsetTextDirection) == null || t.call(r);
              return;
            }
            (l = (n = c.commands) == null ? void 0 : n.setTextDirection) == null || l.call(n, e);
          },
          disabled: !1
        }));
        return {
          componentProps: {
            icon: "TextDirection",
            tooltip: p("editor.textDirection.tooltip"),
            items: d,
            isActive: () => c.getAttributes("paragraph")
          }
        };
      }
    };
  }
});
export {
  F as RichTextTextDirection,
  O as TextDirection
};