@dooherceg/tiptap-controlled-editor-with-table 0.0.1

package/dist/components/tiptap-node/image-upload-node/image-upload-node.js

@@ -0,0 +1,329 @@
+import { jsxs as l, jsx as a, Fragment as b } from "react/jsx-runtime";
+import { useRef as L, useState as N } from "react";
+import { NodeViewWrapper as k } from "@tiptap/react";
+import { CloseIcon as M } from "../../tiptap-icons/close-icon.js";
+import { isValidPosition as z, focusNextNode as P } from "../../../lib/tiptap-utils.js";
+import { Button as D } from "../../tiptap-ui-primitive/button/button.js";
+import '../../../assets/image-upload-node.css';function A(e) {
+  const [p, n] = N([]), i = async (t) => {
+    if (t.size > e.maxSize) {
+      const o = new Error(
+        `File size exceeds maximum allowed (${e.maxSize / 1024 / 1024}MB)`
+      );
+      return e.onError?.(o), null;
+    }
+    const d = new AbortController(), c = crypto.randomUUID(), r = {
+      id: c,
+      file: t,
+      progress: 0,
+      status: "uploading",
+      abortController: d
+    };
+    n((o) => [...o, r]);
+    try {
+      if (!e.upload)
+        throw new Error("Upload function is not defined");
+      const o = await e.upload(
+        t,
+        (h) => {
+          n(
+            (g) => g.map(
+              (f) => f.id === c ? { ...f, progress: h.progress } : f
+            )
+          );
+        },
+        d.signal
+      );
+      if (!o) throw new Error("Upload failed: No URL returned");
+      return d.signal.aborted ? null : (n(
+        (h) => h.map(
+          (g) => g.id === c ? { ...g, status: "success", url: o, progress: 100 } : g
+        )
+      ), e.onSuccess?.(o), o);
+    } catch (o) {
+      return d.signal.aborted || (n(
+        (h) => h.map(
+          (g) => g.id === c ? { ...g, status: "error", progress: 0 } : g
+        )
+      ), e.onError?.(
+        o instanceof Error ? o : new Error("Upload failed")
+      )), null;
+    }
+  };
+  return {
+    fileItems: p,
+    uploadFiles: async (t) => {
+      if (!t || t.length === 0)
+        return e.onError?.(new Error("No files to upload")), [];
+      if (e.limit && t.length > e.limit)
+        return e.onError?.(
+          new Error(
+            `Maximum ${e.limit} file${e.limit === 1 ? "" : "s"} allowed`
+          )
+        ), [];
+      const d = t.map((r) => i(r));
+      return (await Promise.all(d)).filter((r) => r !== null);
+    },
+    removeFileItem: (t) => {
+      n((d) => {
+        const c = d.find((r) => r.id === t);
+        return c?.abortController && c.abortController.abort(), c?.url && URL.revokeObjectURL(c.url), d.filter((r) => r.id !== t);
+      });
+    },
+    clearAllFiles: () => {
+      p.forEach((t) => {
+        t.abortController && t.abortController.abort(), t.url && URL.revokeObjectURL(t.url);
+      }), n([]);
+    }
+  };
+}
+const F = () => /* @__PURE__ */ l(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    className: "tiptap-image-upload-icon",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ a(
+        "path",
+        {
+          d: "M11.1953 4.41771C10.3478 4.08499 9.43578 3.94949 8.5282 4.02147C7.62062 4.09345 6.74133 4.37102 5.95691 4.83316C5.1725 5.2953 4.50354 5.92989 4.00071 6.68886C3.49788 7.44783 3.17436 8.31128 3.05465 9.2138C2.93495 10.1163 3.0222 11.0343 3.3098 11.8981C3.5974 12.7619 4.07781 13.5489 4.71463 14.1995C5.10094 14.5942 5.09414 15.2274 4.69945 15.6137C4.30476 16 3.67163 15.9932 3.28532 15.5985C2.43622 14.731 1.79568 13.6816 1.41221 12.5299C1.02875 11.3781 0.91241 10.1542 1.07201 8.95084C1.23162 7.74748 1.66298 6.59621 2.33343 5.58425C3.00387 4.57229 3.89581 3.72617 4.9417 3.10998C5.98758 2.4938 7.15998 2.1237 8.37008 2.02773C9.58018 1.93176 10.7963 2.11243 11.9262 2.55605C13.0561 2.99968 14.0703 3.69462 14.8919 4.58825C15.5423 5.29573 16.0585 6.11304 16.4177 7.00002H17.4999C18.6799 6.99991 19.8288 7.37933 20.7766 8.08222C21.7245 8.78515 22.4212 9.7743 22.7637 10.9036C23.1062 12.0328 23.0765 13.2423 22.6788 14.3534C22.2812 15.4644 21.5367 16.4181 20.5554 17.0736C20.0962 17.3803 19.4752 17.2567 19.1684 16.7975C18.8617 16.3382 18.9853 15.7172 19.4445 15.4105C20.069 14.9934 20.5427 14.3865 20.7958 13.6794C21.0488 12.9724 21.0678 12.2027 20.8498 11.4841C20.6318 10.7655 20.1885 10.136 19.5853 9.6887C18.9821 9.24138 18.251 8.99993 17.5001 9.00002H15.71C15.2679 9.00002 14.8783 8.70973 14.7518 8.28611C14.4913 7.41374 14.0357 6.61208 13.4195 5.94186C12.8034 5.27164 12.0427 4.75043 11.1953 4.41771Z",
+          fill: "currentColor"
+        }
+      ),
+      /* @__PURE__ */ a(
+        "path",
+        {
+          d: "M11 14.4142V21C11 21.5523 11.4477 22 12 22C12.5523 22 13 21.5523 13 21V14.4142L15.2929 16.7071C15.6834 17.0976 16.3166 17.0976 16.7071 16.7071C17.0976 16.3166 17.0976 15.6834 16.7071 15.2929L12.7078 11.2936C12.7054 11.2912 12.703 11.2888 12.7005 11.2864C12.5208 11.1099 12.2746 11.0008 12.003 11L12 11L11.997 11C11.8625 11.0004 11.7343 11.0273 11.6172 11.0759C11.502 11.1236 11.3938 11.1937 11.2995 11.2864C11.297 11.2888 11.2946 11.2912 11.2922 11.2936L7.29289 15.2929C6.90237 15.6834 6.90237 16.3166 7.29289 16.7071C7.68342 17.0976 8.31658 17.0976 8.70711 16.7071L11 14.4142Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+), B = () => /* @__PURE__ */ a(
+  "svg",
+  {
+    width: "43",
+    height: "57",
+    viewBox: "0 0 43 57",
+    fill: "currentColor",
+    className: "tiptap-image-upload-dropzone-rect-primary",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ a(
+      "path",
+      {
+        d: "M0.75 10.75C0.75 5.64137 4.89137 1.5 10 1.5H32.3431C33.2051 1.5 34.0317 1.84241 34.6412 2.4519L40.2981 8.10876C40.9076 8.71825 41.25 9.5449 41.25 10.4069V46.75C41.25 51.8586 37.1086 56 32 56H10C4.89137 56 0.75 51.8586 0.75 46.75V10.75Z",
+        fill: "currentColor",
+        fillOpacity: "0.11",
+        stroke: "currentColor",
+        strokeWidth: "1.5"
+      }
+    )
+  }
+), I = () => /* @__PURE__ */ a(
+  "svg",
+  {
+    width: "10",
+    height: "10",
+    className: "tiptap-image-upload-dropzone-rect-secondary",
+    viewBox: "0 0 10 10",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ a(
+      "path",
+      {
+        d: "M0 0.75H0.343146C1.40401 0.75 2.42143 1.17143 3.17157 1.92157L8.82843 7.57843C9.57857 8.32857 10 9.34599 10 10.4069V10.75H4C1.79086 10.75 0 8.95914 0 6.75V0.75Z",
+        fill: "currentColor"
+      }
+    )
+  }
+), R = ({
+  onFile: e,
+  children: p
+}) => {
+  const [n, i] = N(!1), [m, s] = N(!1);
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: `tiptap-image-upload-drag-area ${m ? "drag-active" : ""} ${n ? "drag-over" : ""}`,
+      onDragEnter: (r) => {
+        r.preventDefault(), r.stopPropagation(), s(!0);
+      },
+      onDragLeave: (r) => {
+        r.preventDefault(), r.stopPropagation(), r.currentTarget.contains(r.relatedTarget) || (s(!1), i(!1));
+      },
+      onDragOver: (r) => {
+        r.preventDefault(), r.stopPropagation(), i(!0);
+      },
+      onDrop: (r) => {
+        r.preventDefault(), r.stopPropagation(), s(!1), i(!1);
+        const o = Array.from(r.dataTransfer.files);
+        o.length > 0 && e(o);
+      },
+      children: p
+    }
+  );
+}, O = ({
+  fileItem: e,
+  onRemove: p
+}) => {
+  const n = (i) => {
+    if (i === 0) return "0 Bytes";
+    const m = 1024, s = ["Bytes", "KB", "MB", "GB"], C = Math.floor(Math.log(i) / Math.log(m));
+    return `${parseFloat((i / Math.pow(m, C)).toFixed(2))} ${s[C]}`;
+  };
+  return /* @__PURE__ */ l("div", { className: "tiptap-image-upload-preview", children: [
+    e.status === "uploading" && /* @__PURE__ */ a(
+      "div",
+      {
+        className: "tiptap-image-upload-progress",
+        style: { width: `${e.progress}%` }
+      }
+    ),
+    /* @__PURE__ */ l("div", { className: "tiptap-image-upload-preview-content", children: [
+      /* @__PURE__ */ l("div", { className: "tiptap-image-upload-file-info", children: [
+        /* @__PURE__ */ a("div", { className: "tiptap-image-upload-file-icon", children: /* @__PURE__ */ a(F, {}) }),
+        /* @__PURE__ */ l("div", { className: "tiptap-image-upload-details", children: [
+          /* @__PURE__ */ a("span", { className: "tiptap-image-upload-text", children: e.file.name }),
+          /* @__PURE__ */ a("span", { className: "tiptap-image-upload-subtext", children: n(e.file.size) })
+        ] })
+      ] }),
+      /* @__PURE__ */ l("div", { className: "tiptap-image-upload-actions", children: [
+        e.status === "uploading" && /* @__PURE__ */ l("span", { className: "tiptap-image-upload-progress-text", children: [
+          e.progress,
+          "%"
+        ] }),
+        /* @__PURE__ */ a(
+          D,
+          {
+            type: "button",
+            "data-style": "ghost",
+            onClick: (i) => {
+              i.stopPropagation(), p();
+            },
+            children: /* @__PURE__ */ a(M, { className: "tiptap-button-icon" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, S = ({
+  maxSize: e,
+  limit: p
+}) => /* @__PURE__ */ l(b, { children: [
+  /* @__PURE__ */ l("div", { className: "tiptap-image-upload-dropzone", children: [
+    /* @__PURE__ */ a(B, {}),
+    /* @__PURE__ */ a(I, {}),
+    /* @__PURE__ */ a("div", { className: "tiptap-image-upload-icon-container", children: /* @__PURE__ */ a(F, {}) })
+  ] }),
+  /* @__PURE__ */ l("div", { className: "tiptap-image-upload-content", children: [
+    /* @__PURE__ */ l("span", { className: "tiptap-image-upload-text", children: [
+      /* @__PURE__ */ a("em", { children: "Click to upload" }),
+      " or drag and drop"
+    ] }),
+    /* @__PURE__ */ l("span", { className: "tiptap-image-upload-subtext", children: [
+      "Maximum ",
+      p,
+      " file",
+      p === 1 ? "" : "s",
+      ", ",
+      e / 1024 / 1024,
+      "MB each."
+    ] })
+  ] })
+] }), W = (e) => {
+  const { accept: p, limit: n, maxSize: i } = e.node.attrs, m = L(null), s = e.extension, C = {
+    maxSize: i,
+    limit: n,
+    accept: p,
+    upload: s.options.upload,
+    onSuccess: s.options.onSuccess,
+    onError: s.options.onError
+  }, { fileItems: t, uploadFiles: d, removeFileItem: c, clearAllFiles: r } = A(C), o = async (u) => {
+    const v = await d(u);
+    if (v.length > 0) {
+      const w = e.getPos();
+      if (z(w)) {
+        const E = v.map((y, U) => {
+          const x = u[U]?.name.replace(/\.[^/.]+$/, "") || "unknown";
+          return {
+            type: s.options.type,
+            attrs: {
+              ...s.options,
+              src: y,
+              alt: x,
+              title: x
+            }
+          };
+        });
+        e.editor.chain().focus().deleteRange({ from: w, to: w + e.node.nodeSize }).insertContentAt(w, E).run(), P(e.editor);
+      }
+    }
+  }, h = (u) => {
+    const v = u.target.files;
+    if (!v || v.length === 0) {
+      s.options.onError?.(new Error("No file selected"));
+      return;
+    }
+    o(Array.from(v));
+  }, g = () => {
+    m.current && t.length === 0 && (m.current.value = "", m.current.click());
+  }, f = t.length > 0;
+  return /* @__PURE__ */ l(
+    k,
+    {
+      className: "tiptap-image-upload",
+      tabIndex: 0,
+      onClick: g,
+      children: [
+        !f && /* @__PURE__ */ a(R, { onFile: o, children: /* @__PURE__ */ a(S, { maxSize: i, limit: n }) }),
+        f && /* @__PURE__ */ l("div", { className: "tiptap-image-upload-previews", children: [
+          t.length > 1 && /* @__PURE__ */ l("div", { className: "tiptap-image-upload-header", children: [
+            /* @__PURE__ */ l("span", { children: [
+              "Uploading ",
+              t.length,
+              " files"
+            ] }),
+            /* @__PURE__ */ a(
+              D,
+              {
+                type: "button",
+                "data-style": "ghost",
+                onClick: (u) => {
+                  u.stopPropagation(), r();
+                },
+                children: "Clear All"
+              }
+            )
+          ] }),
+          t.map((u) => /* @__PURE__ */ a(
+            O,
+            {
+              fileItem: u,
+              onRemove: () => c(u.id)
+            },
+            u.id
+          ))
+        ] }),
+        /* @__PURE__ */ a(
+          "input",
+          {
+            ref: m,
+            name: "file",
+            accept: p,
+            type: "file",
+            multiple: n > 1,
+            onChange: h,
+            onClick: (u) => u.stopPropagation()
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as ImageUploadNode
+};

package/dist/components/tiptap-node/image-upload-node/index.d.ts

@@ -0,0 +1 @@
+export * from './image-upload-node-extension';

package/dist/components/tiptap-node/image-upload-node/index.js

@@ -0,0 +1,4 @@
+import { ImageUploadNode as a } from "./image-upload-node-extension.js";
+export {
+  a as ImageUploadNode
+};

package/dist/components/tiptap-templates/simple/simple-editor.d.ts

@@ -0,0 +1,8 @@
+import { EditorOptions } from '@tiptap/react';
+interface SimpleEditorProps extends Omit<Partial<EditorOptions>, "content"> {
+    themeMode: "dark" | "light";
+    content?: string;
+    onContentChange?: (content: string) => void;
+}
+export declare function SimpleEditor({ themeMode, content, onContentChange, }: SimpleEditorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};