reactjs-tiptap-editor 0.4.1 → 1.0.0

package/lib/ImageGif.js

@@ -1,7 +1,426 @@
-import "./index-kbO3iWqL.js";
-import { av as t, av as e } from "./RichTextEditor-DGcKEUGr.js";
-import "./dom-dataset-lYeH6gfI.js";
+import { m as F } from "./index-DnWWK9F_.js";
+import { a as k, d as B, c as q } from "./throttle-CdwDrFpn.js";
+import { N as V, R as X } from "./index-DzcKxutn.js";
+import { jsx as u, jsxs as P, Fragment as Y } from "react/jsx-runtime";
+import { useState as A, useMemo as L, useCallback as G, useEffect as z, useRef as Z } from "react";
+import { I as C, m as W, n as U } from "./index-DYkucCoF.js";
+import { i as j, c as J } from "./isNumber-fpLGS0AZ.js";
+import { A as Q } from "./toggle-Cdp4IT2U.js";
+import "./index-BPfVXs5_.js";
+import { u as K, a as ee } from "./useButtonProps-BsEd4zYM.js";
+import { P as te, a as re, b as ne } from "./popover-CAuEW0Mr.js";
+import { I as ie } from "./input-wJ9PDEzZ.js";
+const O = {
+  TOP_LEFT: "tl",
+  TOP_RIGHT: "tr",
+  BOTTOM_LEFT: "bl",
+  BOTTOM_RIGHT: "br"
+};
+function ae(e) {
+  var $, H;
+  const [t, n] = A({
+    width: C,
+    height: C
+  }), [c, i] = A({
+    width: 0,
+    height: 0
+  }), [r] = A([
+    O.TOP_LEFT,
+    O.TOP_RIGHT,
+    O.BOTTOM_LEFT,
+    O.BOTTOM_RIGHT
+  ]), [a, s] = A(!1), [l, g] = A({
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+    dir: ""
+  }), { align: b } = ($ = e == null ? void 0 : e.node) == null ? void 0 : $.attrs, m = L(() => {
+    var v;
+    const { src: o, alt: f, width: w, height: T } = (v = e == null ? void 0 : e.node) == null ? void 0 : v.attrs, x = j(w) ? `${w}px` : w, d = j(T) ? `${T}px` : T;
+    return {
+      src: o || void 0,
+      alt: f || void 0,
+      style: {
+        width: x || void 0,
+        height: d || void 0
+      }
+    };
+  }, [(H = e == null ? void 0 : e.node) == null ? void 0 : H.attrs]), h = L(() => {
+    const {
+      style: { width: o }
+    } = m;
+    return { width: o === "100%" ? o : void 0 };
+  }, [m]);
+  function _(o) {
+    i({
+      width: o.target.width,
+      height: o.target.height
+    });
+  }
+  function y() {
+    const { editor: o, getPos: f } = e;
+    o.commands.setNodeSelection(f());
+  }
+  const M = G(
+    k(() => {
+      const { editor: o } = e, { width: f } = getComputedStyle(o.view.dom);
+      n((w) => ({
+        ...w,
+        width: Number.parseInt(f, 10)
+      }));
+    }, W),
+    [e == null ? void 0 : e.editor]
+  );
+  function D(o, f) {
+    o.preventDefault(), o.stopPropagation();
+    const w = c.width, T = c.height, x = w / T;
+    let d = Number(e.node.attrs.width), v = Number(e.node.attrs.height);
+    const I = t.width;
+    d && !v ? (d = d > I ? I : d, v = Math.round(d / x)) : v && !d ? (d = Math.round(v * x), d = d > I ? I : d) : !d && !v ? (d = w > I ? I : w, v = Math.round(d / x)) : d = d > I ? I : d, s(!0), g({
+      x: o.clientX,
+      y: o.clientY,
+      w: d,
+      h: v,
+      dir: f
+    });
+  }
+  const N = G(
+    k((o) => {
+      if (o.preventDefault(), o.stopPropagation(), !a)
+        return;
+      const { x: f, w, dir: T } = l, x = (o.clientX - f) * (/l/.test(T) ? -1 : 1), d = J(w + x, U, t.width);
+      e.updateAttributes({
+        width: d,
+        height: null
+      });
+    }, W),
+    [a, l, t, e.updateAttributes]
+  ), E = G(
+    (o) => {
+      o.preventDefault(), o.stopPropagation(), a && (g({
+        x: 0,
+        y: 0,
+        w: 0,
+        h: 0,
+        dir: ""
+      }), s(!1), y());
+    },
+    [a, y]
+  ), R = G(() => {
+    document == null || document.addEventListener("mousemove", N, !0), document == null || document.addEventListener("mouseup", E, !0);
+  }, [N, E]), p = G(() => {
+    document == null || document.removeEventListener("mousemove", N, !0), document == null || document.removeEventListener("mouseup", E, !0);
+  }, [N, E]);
+  z(() => (a ? R() : p(), () => {
+    p();
+  }), [a, R, p]);
+  const S = L(() => new ResizeObserver(() => M()), [M]);
+  return z(() => (S.observe(e.editor.view.dom), () => {
+    S.disconnect();
+  }), [e.editor.view.dom, S]), /* @__PURE__ */ u(
+    V,
+    {
+      className: "image-view",
+      style: { ...h, width: "100%", textAlign: b },
+      children: /* @__PURE__ */ P(
+        "div",
+        {
+          "data-drag-handle": !0,
+          draggable: "true",
+          style: h,
+          className: `image-view__body ${e != null && e.selected ? "image-view__body--focused" : ""} ${a ? "image-view__body--resizing" : ""}`,
+          children: [
+            /* @__PURE__ */ u(
+              "img",
+              {
+                alt: m.alt,
+                className: "image-view__body__image block",
+                height: "auto",
+                onClick: y,
+                onLoad: _,
+                src: m.src,
+                style: m.style
+              }
+            ),
+            (e == null ? void 0 : e.editor.view.editable) && ((e == null ? void 0 : e.selected) || a) && /* @__PURE__ */ u("div", { className: "image-resizer", children: r == null ? void 0 : r.map((o) => /* @__PURE__ */ u(
+              "span",
+              {
+                className: `image-resizer__handler image-resizer__handler--${o}`,
+                onMouseDown: (f) => D(f, o)
+              },
+              `image-dir-${o}`
+            )) })
+          ]
+        }
+      )
+    }
+  );
+}
+async function se(e) {
+  var c;
+  const n = await (await fetch(`https://api.giphy.com/v1/gifs/trending?q=&limit=15&api_key=${e}`)).json();
+  return (c = n == null ? void 0 : n.data) == null ? void 0 : c.map((i) => {
+    var r, a, s;
+    return {
+      id: i == null ? void 0 : i.id,
+      src: (r = i == null ? void 0 : i.images.original) == null ? void 0 : r.url,
+      width: +((a = i == null ? void 0 : i.images.original) == null ? void 0 : a.width),
+      height: +((s = i == null ? void 0 : i.images.original) == null ? void 0 : s.width)
+    };
+  });
+}
+async function oe(e, t) {
+  var i;
+  const c = await (await fetch(`https://api.giphy.com/v1/gifs/search?q=${e}&limit=15&api_key=${t}`)).json();
+  return (i = c == null ? void 0 : c.data) == null ? void 0 : i.map((r) => {
+    var a, s, l;
+    return {
+      id: r == null ? void 0 : r.id,
+      src: (a = r == null ? void 0 : r.images.original) == null ? void 0 : a.url,
+      width: +((s = r == null ? void 0 : r.images.original) == null ? void 0 : s.width),
+      height: +((l = r == null ? void 0 : r.images.original) == null ? void 0 : l.width)
+    };
+  });
+}
+async function ce(e) {
+  var r, a;
+  const t = await fetch(`https://tenor.googleapis.com/v2/trending_terms?key=${e}&limit=10`), n = await (t == null ? void 0 : t.json()), i = await (await fetch(`https://tenor.googleapis.com/v2/search?key=${e}&q=${(r = n == null ? void 0 : n.results) == null ? void 0 : r[0]}&limit=15`)).json();
+  return (a = i == null ? void 0 : i.results) == null ? void 0 : a.map((s) => {
+    var l, g, b, m, h, _, y, M;
+    return {
+      id: s == null ? void 0 : s.id,
+      src: (g = (l = s == null ? void 0 : s.media_formats) == null ? void 0 : l.gif) == null ? void 0 : g.url,
+      width: (h = (m = (b = s == null ? void 0 : s.media_formats) == null ? void 0 : b.gif) == null ? void 0 : m.dims) == null ? void 0 : h[0],
+      height: (M = (y = (_ = s == null ? void 0 : s.media_formats) == null ? void 0 : _.gif) == null ? void 0 : y.dims) == null ? void 0 : M[1]
+    };
+  });
+}
+async function de(e, t) {
+  var i;
+  const c = await (await fetch(`https://tenor.googleapis.com/v2/search?key=${t}&q=${e}&limit=15`)).json();
+  return (i = c == null ? void 0 : c.results) == null ? void 0 : i.map((r) => {
+    var a, s, l, g, b, m, h, _;
+    return {
+      id: r == null ? void 0 : r.id,
+      src: (s = (a = r == null ? void 0 : r.media_formats) == null ? void 0 : a.gif) == null ? void 0 : s.url,
+      width: (b = (g = (l = r == null ? void 0 : r.media_formats) == null ? void 0 : l.gif) == null ? void 0 : g.dims) == null ? void 0 : b[0],
+      height: (_ = (h = (m = r == null ? void 0 : r.media_formats) == null ? void 0 : m.gif) == null ? void 0 : h.dims) == null ? void 0 : _[1]
+    };
+  });
+}
+function le(e, t) {
+  return {
+    searchTrending: async () => t ? e === "giphy" ? se(t) : e === "tenor" ? ce(t) : [] : [],
+    searchWord: async (i) => t ? e === "giphy" ? oe(i, t) : e === "tenor" ? de(i, t) : [] : []
+  };
+}
+function he({ selectImage: e, apiKey: t, provider: n, children: c }) {
+  const [i, r] = A(!1), [a, s] = A([]), l = Z(null), { searchTrending: g, searchWord: b } = le(n, t);
+  z(() => {
+    (async () => {
+      const h = await g();
+      s(h);
+    })();
+  }, []);
+  const m = G(
+    B(async (h) => {
+      if (!h.target.value) {
+        const y = await g();
+        s(y);
+        return;
+      }
+      const _ = await b(h.target.value);
+      s(_);
+    }, 350),
+    // Adjust the debounce delay as needed
+    []
+  );
+  return /* @__PURE__ */ P(
+    te,
+    {
+      modal: !0,
+      onOpenChange: r,
+      open: i,
+      children: [
+        /* @__PURE__ */ u(re, { asChild: !0, children: c }),
+        /* @__PURE__ */ u(
+          ne,
+          {
+            align: "start",
+            className: "richtext-size-full richtext-p-2",
+            hideWhenDetached: !0,
+            side: "bottom",
+            children: t ? /* @__PURE__ */ P(Y, { children: [
+              /* @__PURE__ */ u("div", { className: "richtext-mb-[10px] richtext-w-full", children: /* @__PURE__ */ u(
+                ie,
+                {
+                  onChange: m,
+                  placeholder: "Search GIF",
+                  ref: l,
+                  type: "text"
+                }
+              ) }),
+              /* @__PURE__ */ u("div", { className: "richtext-max-h-[280px] !richtext-max-w-[400px] richtext-overflow-y-auto", children: /* @__PURE__ */ u("div", { className: "richtext-grid richtext-grid-cols-2 richtext-gap-1 ", children: a != null && a.length ? a == null ? void 0 : a.map((h) => /* @__PURE__ */ u(
+                "img",
+                {
+                  alt: "",
+                  className: "richtext-cursor-pointer richtext-object-contain richtext-text-center",
+                  src: h.src,
+                  onClick: () => {
+                    e(h.src), r(!1);
+                  }
+                },
+                h.id
+              )) : /* @__PURE__ */ u("p", { children: "No GIFs found" }) }) })
+            ] }) : /* @__PURE__ */ u("div", { children: /* @__PURE__ */ u("p", { children: "Missing Giphy API Key" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+function Ge() {
+  const e = K(ue.name), {
+    action: t,
+    icon: n,
+    tooltip: c,
+    apiKey: i,
+    provider: r
+  } = (e == null ? void 0 : e.componentProps) ?? {}, { editorDisabled: a } = ee();
+  return /* @__PURE__ */ u(
+    he,
+    {
+      apiKey: i,
+      provider: r,
+      selectImage: (l) => {
+        a || t && t(l);
+      },
+      children: /* @__PURE__ */ u(
+        Q,
+        {
+          icon: n,
+          tooltip: c
+        }
+      )
+    }
+  );
+}
+const ue = /* @__PURE__ */ q.extend({
+  name: "imageGif",
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-expect-error
+  addOptions() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      inline: !1,
+      content: "",
+      marks: "",
+      group: "block",
+      API_KEY: "",
+      provider: "giphy",
+      draggable: !1,
+      selectable: !0,
+      atom: !0,
+      button: ({ editor: t, extension: n, t: c }) => {
+        var a, s;
+        const i = ((a = n == null ? void 0 : n.options) == null ? void 0 : a.provider) || "", r = ((s = n == null ? void 0 : n.options) == null ? void 0 : s.API_KEY) || "";
+        return {
+          componentProps: {
+            action: (l) => {
+              t.chain().focus().setImageGif({ src: l }).run();
+            },
+            isActive: () => !1,
+            disabled: !1,
+            icon: "GifIcon",
+            tooltip: c("editor.imageGif.tooltip"),
+            apiKey: r,
+            provider: i
+          }
+        };
+      }
+    };
+  },
+  addAttributes() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      width: {
+        default: null,
+        parseHTML: (t) => {
+          const n = t.style.width || t.getAttribute("width") || "10";
+          return n === void 0 ? null : Number.parseInt(`${n}`, 10);
+        },
+        renderHTML: (t) => ({
+          width: t.width
+        })
+      },
+      align: {
+        default: "center",
+        parseHTML: (t) => t.getAttribute("align"),
+        renderHTML: (t) => ({
+          align: t.align
+        })
+      }
+    };
+  },
+  addNodeView() {
+    return X(ae);
+  },
+  addCommands() {
+    var e;
+    return {
+      ...(e = this.parent) == null ? void 0 : e.call(this),
+      setImageGif: (t) => ({ commands: n }) => n.insertContent({
+        type: this.name,
+        attrs: t
+      }),
+      updateImageGif: (t) => ({ commands: n }) => n.updateAttributes(this.name, t),
+      setAlignImageGif: (t) => ({ commands: n }) => n.updateAttributes(this.name, { align: t })
+    };
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    const { align: t } = e;
+    return [
+      "div",
+      // Parent element
+      {
+        style: t ? `text-align: ${t};` : "",
+        class: "imageGIf"
+      },
+      [
+        "img",
+        F(
+          // Always render the `height="auto"`
+          {
+            height: "auto"
+          },
+          this.options.HTMLAttributes,
+          e
+        )
+      ]
+    ];
+  },
+  parseHTML() {
+    return [
+      {
+        tag: "div[class=imageGIf]",
+        getAttrs: (e) => {
+          const t = e.querySelector("img"), n = t == null ? void 0 : t.getAttribute("width");
+          return {
+            src: t == null ? void 0 : t.getAttribute("src"),
+            alt: t == null ? void 0 : t.getAttribute("alt"),
+            title: t == null ? void 0 : t.getAttribute("title"),
+            width: n ? Number.parseInt(n, 10) : null,
+            align: (t == null ? void 0 : t.getAttribute("align")) || e.style.textAlign || null
+          };
+        }
+      }
+    ];
+  }
+});
 export {
-  t as ImageGif,
-  e as default
+  ue as ImageGif,
+  Ge as RichTextImageGif
 };