reactjs-tiptap-editor 1.0.0 → 1.0.2

package/lib/separator-DqqiRHfY.js

@@ -0,0 +1,241 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import * as P from "react";
+import { useState as f, useMemo as S, useCallback as M } from "react";
+import { Plus as R } from "lucide-react";
+import { HexColorPicker as O } from "react-colorful";
+import { a as B, c as _ } from "./index-ClAEwR0V.js";
+import { u as v, C as $ } from "./index-CEbbM7Gx.js";
+import { P as b, a as g, b as C } from "./popover-ydZ2mHXy.js";
+import { I as j } from "./input-U-XBy56K.js";
+import * as L from "@radix-ui/react-separator";
+import { B as D } from "./button-DHZeIKzF.js";
+function I() {
+  return /* @__PURE__ */ e("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { fill: "currentColor", d: "M18 14c0-4-6-10.8-6-10.8s-1.33 1.51-2.73 3.52l8.59 8.59c.09-.42.14-.86.14-1.31m-.88 3.12L12.5 12.5L5.27 5.27L4 6.55l3.32 3.32C6.55 11.32 6 12.79 6 14c0 3.31 2.69 6 6 6c1.52 0 2.9-.57 3.96-1.5l2.63 2.63l1.27-1.27z" }) });
+}
+function J(l) {
+  const { t: h } = v(), {
+    disabled: n = !1,
+    value: a,
+    onChange: i,
+    colors: d = $,
+    highlight: x
+  } = l, [c, u] = f(!1), w = S(() => {
+    const t = d, r = [];
+    for (let o = 0; o < t.length; o += 10)
+      r.push(t.slice(o, o + 10));
+    return r;
+  }, [d]), [p, k] = B(x ? "richtext-recent-highlight" : "richtext-recent-colors", []), y = (t) => {
+    const r = [...p], o = r.indexOf(t);
+    o !== -1 && r.splice(o, 1), r.unshift(t), r.length > 10 && r.pop(), k(r);
+  };
+  function m(t) {
+    if (t === void 0) {
+      i == null || i(t), u(!1);
+      return;
+    }
+    /^#([\da-f]{3}){1,2}$/i.test(t) && (i == null || i(t), y(t), u(!1));
+  }
+  return /* @__PURE__ */ s(
+    b,
+    {
+      modal: !0,
+      onOpenChange: u,
+      open: c,
+      children: [
+        /* @__PURE__ */ e(
+          g,
+          {
+            asChild: !0,
+            className: "!richtext-p-0",
+            disabled: n,
+            children: l == null ? void 0 : l.children
+          }
+        ),
+        /* @__PURE__ */ e(
+          C,
+          {
+            align: "start",
+            className: "richtext-size-full !richtext-p-2",
+            hideWhenDetached: !0,
+            side: "bottom",
+            children: /* @__PURE__ */ s("div", { className: "richtext-flex richtext-flex-col", children: [
+              /* @__PURE__ */ s(
+                "div",
+                {
+                  className: "rd-1 richtext-flex richtext-cursor-pointer richtext-items-center richtext-gap-[4px] richtext-p-1 hover:richtext-bg-accent",
+                  onClick: () => {
+                    m(void 0);
+                  },
+                  children: [
+                    /* @__PURE__ */ e(I, {}),
+                    /* @__PURE__ */ e("span", { className: "richtext-ml-1 richtext-text-sm", children: h(x ? "editor.nofill" : "editor.default") })
+                  ]
+                }
+              ),
+              w.map((t, r) => /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "richtext-relative richtext-flex richtext-h-auto richtext-w-full richtext-p-0 last:richtext-pb-2",
+                  children: t.map((o, z) => /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: "richtext-inline-block richtext-size-6 richtext-flex-[0_0_auto] richtext-cursor-pointer richtext-rounded-sm !richtext-border richtext-border-solid !richtext-border-transparent richtext-p-0.5 hover:!richtext-border-border",
+                      onClick: () => m(o),
+                      children: /* @__PURE__ */ e(
+                        "span",
+                        {
+                          className: "richtext-relative richtext-block richtext-size-[18px] richtext-rounded-[2px]",
+                          style: {
+                            backgroundColor: o
+                          },
+                          children: o === a ? /* @__PURE__ */ e(
+                            "svg",
+                            {
+                              className: "richtext-absolute -richtext-top-px richtext-left-px richtext-block richtext-size-3",
+                              viewBox: "0 0 18 18",
+                              style: {
+                                fill: "rgb(255, 255, 255)"
+                              },
+                              children: /* @__PURE__ */ e("path", { d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" })
+                            }
+                          ) : /* @__PURE__ */ e(
+                            "svg",
+                            {
+                              viewBox: "0 0 18 18",
+                              style: {
+                                fill: "rgb(255, 255, 255)",
+                                display: "none"
+                              },
+                              children: /* @__PURE__ */ e("path", { d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" })
+                            }
+                          )
+                        }
+                      )
+                    },
+                    `sub-color-${z}`
+                  ))
+                },
+                `color-row-${r}`
+              )),
+              /* @__PURE__ */ s("div", { children: [
+                /* @__PURE__ */ e("div", { className: "richtext-my-1 richtext-text-sm", children: h("editor.recent") }),
+                /* @__PURE__ */ e("span", { className: "richtext-relative richtext-flex richtext-h-auto richtext-w-full richtext-flex-wrap richtext-p-0 last:richtext-pb-2", children: p == null ? void 0 : p.map((t, r) => /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "richtext-inline-block richtext-size-6 richtext-flex-[0_0_auto] richtext-cursor-pointer richtext-rounded-sm !richtext-border richtext-border-transparent richtext-p-0.5 hover:richtext-border-border hover:richtext-shadow-sm",
+                    onClick: () => m(t),
+                    children: /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: "richtext-relative richtext-block richtext-size-[18px] richtext-rounded-[2px] richtext-border-transparent",
+                        style: {
+                          backgroundColor: t
+                        },
+                        children: /* @__PURE__ */ e(
+                          "svg",
+                          {
+                            viewBox: "0 0 18 18",
+                            style: {
+                              fill: "rgb(255, 255, 255)",
+                              display: "none"
+                            },
+                            children: /* @__PURE__ */ e("path", { d: "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" })
+                          }
+                        )
+                      }
+                    )
+                  },
+                  `sub-color-recent-${r}`
+                )) })
+              ] }),
+              /* @__PURE__ */ e(Z, { setColor: m })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function Z({ setColor: l }) {
+  const { t: h } = v(), [n, a] = f(!1), [i, d] = f("#000000"), x = M(
+    (c) => {
+      d(c);
+    },
+    []
+  );
+  return /* @__PURE__ */ s(
+    b,
+    {
+      onOpenChange: a,
+      open: n,
+      children: [
+        /* @__PURE__ */ e(g, { asChild: !0, children: /* @__PURE__ */ s(
+          "div",
+          {
+            className: "richtext-p-1.5 richtext-text-sm hover:richtext-cursor-pointer hover:richtext-bg-accent",
+            children: [
+              h("editor.color.more"),
+              "..."
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ s(C, { children: [
+          /* @__PURE__ */ s("div", { className: "richtext-flex richtext-flex-col richtext-items-center richtext-justify-center", children: [
+            /* @__PURE__ */ e(
+              O,
+              {
+                color: i,
+                onChange: (c) => {
+                  x(c);
+                }
+              }
+            ),
+            /* @__PURE__ */ e(
+              j,
+              {
+                className: "richtext-mt-[8px] richtext-w-full",
+                type: "text",
+                value: i.replace("#", ""),
+                onChange: (c) => {
+                  c.preventDefault(), c.stopPropagation(), x(`#${c.target.value}`);
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(N, { className: "richtext-my-[10px]" }),
+          /* @__PURE__ */ e(
+            D,
+            {
+              className: "richtext-w-full",
+              onClick: (c) => {
+                c.preventDefault(), c.stopPropagation(), l(i), a(!1);
+              },
+              children: /* @__PURE__ */ e(R, { size: 16 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const N = P.forwardRef(
+  ({ className: l, orientation: h = "horizontal", decorative: n = !0, ...a }, i) => /* @__PURE__ */ e(
+    L.Root,
+    {
+      ref: i,
+      decorative: n,
+      orientation: h,
+      className: _(
+        "richtext-shrink-0 richtext-bg-border",
+        h === "horizontal" ? "richtext-h-[1px] richtext-w-full" : "richtext-h-full richtext-w-[1px]",
+        l
+      ),
+      ...a
+    }
+  )
+);
+N.displayName = L.Root.displayName;
+export {
+  J as C,
+  N as S
+};

package/lib/store/ProviderUniqueId.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+export declare function ProviderUniqueId({ editor, children, id }: {
+    children: React.ReactNode;
+    id: any;
+    editor: any;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/store/commandList.d.ts

@@ -0,0 +1,2 @@
+import { CommandList } from '../extensions/SlashCommand/types';
+export declare function useSignalCommandList(): readonly [CommandList[], (val: CommandList[] | ((oldVal: CommandList[]) => CommandList[])) => void];

package/lib/store/editor.d.ts

@@ -0,0 +1,21 @@
+import { Editor } from '@tiptap/core';
+/**
+ * Hook that provides access to a Tiptap editor instance.
+ *
+ * Accepts an optional editor instance directly, or falls back to retrieving
+ * the editor from the Tiptap context if available. This allows components
+ * to work both when given an editor directly and when used within a Tiptap
+ * editor context.
+ *
+ * @param providedEditor - Optional editor instance to use instead of the context editor
+ * @returns The provided editor or the editor from context, whichever is available
+ */
+export declare function useTiptapEditor(providedEditor?: Editor | null): {
+    editor: Editor | null;
+    editorState?: Editor['state'];
+    canCommand?: Editor['can'];
+};
+declare function useEditorInstance(): Editor;
+declare function useEditorState(): import('@tiptap/pm/state').EditorState | undefined;
+declare function useCanCommand(): (() => import('@tiptap/core').CanCommands) | undefined;
+export { useEditorInstance, useEditorState, useCanCommand, };

package/lib/store/fast-context.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+export default function createFastContext<Store>(initialState: Store): {
+    Provider: ({ children }: {
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useStore: <SelectorOutput>(selector: (store: Store) => SelectorOutput) => [SelectorOutput, (value: Partial<Store>) => void];
+};

package/lib/store/store.d.ts

@@ -0,0 +1,23 @@
+declare const ProviderUploadImage: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useStoreUploadImage: <SelectorOutput>(selector: (store: {
+    value: boolean;
+}) => SelectorOutput) => [SelectorOutput, (value: Partial<{
+    value: boolean;
+}>) => void];
+declare const ProviderUploadVideo: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useStoreUploadVideo: <SelectorOutput>(selector: (store: {
+    value: boolean;
+}) => SelectorOutput) => [SelectorOutput, (value: Partial<{
+    value: boolean;
+}>) => void];
+declare const ProviderEditableEditor: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element, useStoreEditableEditor: <SelectorOutput>(selector: (store: {
+    value: boolean;
+}) => SelectorOutput) => [SelectorOutput, (value: Partial<{
+    value: boolean;
+}>) => void];
+declare function useEditableEditor(): boolean;
+export { ProviderUploadImage, useStoreUploadImage, ProviderUploadVideo, useStoreUploadVideo, ProviderEditableEditor, useStoreEditableEditor, useEditableEditor, };

package/lib/store-BPiGnThe.cjs

@@ -0,0 +1 @@
+"use strict";require("./index-DM3mpxB-.cjs");const e=require("./events.constant-B-VGURJp.cjs"),a={setOpen:(t,n)=>{e.dispatchEvent(e.EVENTS.UPLOAD_IMAGE(t),n)}};exports.actionDialogImage=a;

package/lib/store-Cu0gDf4G.js

@@ -0,0 +1,10 @@
+import "./index-ClAEwR0V.js";
+import { d as o, E as s } from "./events.constant-CBPIqO_g.js";
+const p = {
+  setOpen: (a, t) => {
+    o(s.UPLOAD_IMAGE(a), t);
+  }
+};
+export {
+  p as a
+};