reactjs-tiptap-editor/lib/Color.js

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

import { C as d } from "./index-BDYJ8Ph2.js";
import { jsx as o, jsxs as h, Fragment as p } from "react/jsx-runtime";
import { useState as x, useEffect as m } from "react";
import { u as g, e as v, A as L, I as A } from "./index-RcSPeQHn.js";
import { C as y } from "./separator-C7luvaG8.js";
import "./theme.js";
function S({ fill: t }) {
  return /* @__PURE__ */ o(
    "svg",
    {
      height: "18px",
      version: "1.1",
      viewBox: "0 0 240 240",
      width: "18px",
      xmlns: "http://www.w3.org/2000/svg",
      children: /* @__PURE__ */ o(
        "g",
        {
          fill: "none",
          fillRule: "evenodd",
          stroke: "none",
          strokeWidth: 1,
          children: /* @__PURE__ */ o("g", { transform: "translate(0.000000, 0.500000)", children: /* @__PURE__ */ h("g", { transform: "translate(39.000000, 17.353553)", children: [
            /* @__PURE__ */ o(
              "path",
              {
                d: "M11,201.146447 L167,201.146447 C173.075132,201.146447 178,206.071314 178,212.146447 C178,218.221579 173.075132,223.146447 167,223.146447 L11,223.146447 C4.92486775,223.146447 7.43989126e-16,218.221579 0,212.146447 C-7.43989126e-16,206.071314 4.92486775,201.146447 11,201.146447 Z",
                fill: typeof t == "string" ? t : "#000",
                fillRule: "evenodd"
              }
            ),
            /* @__PURE__ */ o(
              "path",
              {
                d: "M72.3425855,16.8295583 C75.799482,7.50883712 86.1577877,2.75526801 95.4785089,6.21216449 C100.284516,7.99463061 104.096358,11.7387855 105.968745,16.4968188 L106.112518,16.8745422 L159.385152,161.694068 C161.291848,166.877345 158.635655,172.624903 153.452378,174.531599 C148.358469,176.405421 142.719567,173.872338 140.716873,168.864661 L140.614848,168.598825 L89.211,28.86 L37.3759214,168.623816 C35.4885354,173.712715 29.8981043,176.351047 24.7909589,174.617647 L24.5226307,174.522368 C19.4337312,172.634982 16.7953993,167.044551 18.5287999,161.937406 L18.6240786,161.669077 L72.3425855,16.8295583 Z",
                fill: "currentColor",
                fillRule: "nonzero"
              }
            ),
            /* @__PURE__ */ o(
              "path",
              {
                d: "M121,103.146447 C126.522847,103.146447 131,107.623599 131,113.146447 C131,118.575687 126.673329,122.994378 121.279905,123.142605 L121,123.146447 L55,123.146447 C49.4771525,123.146447 45,118.669294 45,113.146447 C45,107.717207 49.3266708,103.298515 54.7200952,103.150288 L55,103.146447 L121,103.146447 Z",
                fill: "currentColor",
                fillRule: "nonzero"
              }
            )
          ] }) })
        }
      )
    }
  );
}
function B() {
  const t = g(w.name), {
    tooltip: r = void 0,
    isActive: i = void 0,
    defaultColor: e = void 0,
    colors: n,
    action: s
  } = (t == null ? void 0 : t.componentProps) ?? {}, { disabled: l, dataState: c } = v(i), [f, u] = x(e);
  m(() => {
    u(c);
  }, [c]);
  function C(a) {
    l || s && (s == null || s(a), u(a));
  }
  return t ? /* @__PURE__ */ o(
    y,
    {
      colors: n,
      disabled: l,
      onChange: C,
      value: f,
      children: /* @__PURE__ */ o(
        L,
        {
          disabled: l,
          tooltip: r,
          children: /* @__PURE__ */ h("span", { className: "richtext-flex richtext-items-center richtext-justify-center richtext-gap-[4px] richtext-text-sm", children: [
            /* @__PURE__ */ o(S, { fill: c }),
            /* @__PURE__ */ o(
              A,
              {
                className: "!richtext-h-3 !richtext-w-3 richtext-text-zinc-500",
                name: "MenuDown"
              }
            )
          ] })
        }
      )
    }
  ) : /* @__PURE__ */ o(p, {});
}
const w = /* @__PURE__ */ d.extend({
  addStorage() {
    return {
      // Stores the currently selected text color; undefined indicates "No Fill" (default color)
      currentColor: this.options.defaultColor || void 0
    };
  },
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  //@ts-expect-error
  addOptions() {
    var t;
    return {
      ...(t = this.parent) == null ? void 0 : t.call(this),
      button({ editor: r, t: i, extension: e }) {
        return {
          // component: ColorActionButton,
          componentProps: {
            colors: e.options.colors,
            defaultColor: e.options.defaultColor,
            action: (n) => {
              if (typeof n == "string") {
                r.storage.color.currentColor = n, r.chain().focus().setColor(n).run();
                return;
              }
              r.chain().focus().unsetColor().run();
            },
            isActive: () => {
              const { color: n } = r.getAttributes("textStyle");
              return n;
            },
            disabled: !1,
            shortcutKeys: e.options.shortcutKeys ?? ["⇧", "alt", "C"],
            tooltip: i("editor.color.tooltip")
          }
        };
      }
    };
  },
  addKeyboardShortcuts() {
    var t;
    return {
      ...(t = this.parent) == null ? void 0 : t.call(this),
      "Alt-Shift-c": () => {
        const r = this.storage.currentColor || this.options.defaultColor;
        if (!r) {
          const { color: e } = this.editor.getAttributes("textStyle");
          return e ? this.editor.chain().focus().unsetColor().run() : !1;
        }
        return this.editor.isActive("textStyle", { color: r }) ? this.editor.chain().focus().unsetColor().run() : this.editor.chain().focus().setColor(r).run();
      }
    };
  }
});
export {
  w as Color,
  B as RichTextColor
};