@jcroger/tiptap-simple-editor 1.0.0

package/dist/index.css

@@ -0,0 +1 @@
+@layer ste-base{:root{--primary-color-filled: #228be6}}.tiptap.ProseMirror a{color:LinkText;text-decoration:underline}.tiptap.ProseMirror h1:not(:first-child),.tiptap.ProseMirror h2:not(:first-child),.tiptap.ProseMirror h3:not(:first-child),.tiptap.ProseMirror h4:not(:first-child),.tiptap.ProseMirror h5:not(:first-child),.tiptap.ProseMirror h6:not(:first-child),.tiptap.ProseMirror p:not(:first-child):not(td p):not(th p){margin-top:1.2rem}.tiptap.ProseMirror h1{font-size:48px;font-weight:400;line-height:1.125}.tiptap.ProseMirror h2{font-size:32px;font-weight:400;line-height:1.125}.tiptap.ProseMirror h3{font-size:22px;font-weight:400;line-height:1.125}.tiptap.ProseMirror h4{font-size:18px;font-weight:400;line-height:1.125}.tiptap.ProseMirror h5{font-size:14px;font-weight:400;line-height:1.125}.tiptap.ProseMirror h6{font-size:14px;font-weight:700;letter-spacing:1.4px;line-height:1.125;text-transform:uppercase}.tiptap.ProseMirror blockquote{border-left:3px solid var(--mantine-color-gray-4);padding-left:1rem;color:var(--mantine-color-gray-7);font-style:italic}.tiptap.ProseMirror img{max-width:100%;height:auto;display:block}.tiptap.ProseMirror p>img{display:inline-block}.tiptap.ProseMirror>img:not([data-type=emoji] img){margin:2rem 0;outline:.125rem solid transparent;border-radius:var(--mantine-radius-xs, .25rem)}.tiptap.ProseMirror img:not([data-type=emoji] img).ProseMirror-selectednode{outline-color:var(--primary-color-filled)}.tiptap.ProseMirror .tiptap-thread:has(>img){margin:2rem 0}.tiptap.ProseMirror .tiptap-thread:has(>img) img{outline:.125rem solid transparent;border-radius:var(--tt-radius-xs, .25rem)}.tiptap.ProseMirror .tiptap-thread img{margin:0}.tiptap.ProseMirror .tiptap-image-upload{margin:2rem 0}.tiptap.ProseMirror .tiptap-image-upload input[type=file]{display:none}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-dropzone{position:relative;width:3.125rem;height:3.75rem;display:inline-flex;align-items:flex-start;justify-content:center;-webkit-user-select:none;user-select:none}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-icon-container{position:absolute;width:1.75rem;height:1.75rem;bottom:0;right:0;background-color:var(--primary-color-filled);border-radius:.75rem;display:flex;align-items:center;justify-content:center}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-icon{width:.875rem;height:.875rem;color:#fff}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-dropzone-rect-primary{color:var(--mantine-color-gray-2);position:absolute}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-dropzone-rect-secondary{position:absolute;top:0;right:.25rem;bottom:0;color:var(--mantine-color-gray-3)}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-text{color:var(--mantine-color-gray-7);font-weight:500;font-size:.875rem;line-height:normal}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-text em{font-style:normal;text-decoration:underline}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-subtext{color:var(--mantine-color-gray-7);font-weight:600;line-height:normal;font-size:.75rem}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-drag-area{padding:2rem 1.5rem;border:1.5px dashed var(--mantine-color-gray-3);border-radius:var(--mantine-radius-default, .5rem);text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:all .2s ease}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-drag-area:hover{border-color:var(--mantine-color-gray-4)}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-drag-area.drag-active{border-color:var(--mantine-color-gray-5);background-color:rgba(var(--primary-color-filled, 0, 123, 255),.05)}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-drag-area.drag-over{border-color:var(--primary-color-filled);background-color:#ffffff1a}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-content{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.25rem;-webkit-user-select:none;user-select:none}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-previews{display:flex;flex-direction:column;gap:.75rem}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--mantine-color-gray-3);margin-bottom:.5rem}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-header span{font-size:.875rem;font-weight:500;color:var(--mantine-color-gray-7)}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview{border:1px solid var(--mantine-color-gray-3);border-radius:var(--mantine-radius-default, .5rem);overflow:hidden}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-preview-content{padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-progress-track{height:4px;background-color:var(--mantine-color-gray-2)}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-progress-track .tiptap-image-upload-progress-bar{height:100%;background-color:var(--primary-color-filled);transition:width .3s ease-out}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info{display:flex;align-items:center;gap:.75rem;min-width:0}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info .tiptap-image-upload-file-icon{flex-shrink:0;padding:.5rem;background-color:var(--primary-color-filled);border-radius:var(--mantine-radius-lg, .75rem)}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-file-info .tiptap-image-upload-file-icon svg{width:.875rem;height:.875rem;color:#fff}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-details{display:flex;flex-direction:column;gap:.125rem;min-width:0}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-details .tiptap-image-upload-text{font-size:.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-details .tiptap-image-upload-subtext{font-size:.75rem;color:var(--mantine-color-gray-6)}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions{display:flex;align-items:center;gap:.5rem}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview .tiptap-image-upload-actions .tiptap-image-upload-progress-text{font-size:.75rem;color:var(--primary-color-filled);font-weight:600}@media(max-width:480px){.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-drag-area{padding:1.5rem 1rem}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-header{flex-direction:column;align-items:flex-start;gap:.5rem}.tiptap.ProseMirror .tiptap-image-upload .tiptap-image-upload-preview-content{padding:.75rem}}.tiptap.ProseMirror .ProseMirror-focused .ProseMirror-selectednode .tiptap-image-upload-drag-area{border-color:var(--primary-color-filled)}

package/dist/index.mjs

@@ -0,0 +1,1181 @@
+import { jsx as t, jsxs as p, Fragment as X } from "react/jsx-runtime";
+import { useRef as _, useState as A, useEffect as M, useCallback as O } from "react";
+import { Popover as k, Group as G, TextInput as ce, ActionIcon as b, Divider as H, Stack as V, Button as Z, CloseIcon as Ie, useCombobox as Se, Combobox as $, Menu as z, Grid as B, ThemeIcon as ie, ColorSwatch as ne } from "@mantine/core";
+import { FontAwesomeIcon as x } from "@fortawesome/react-fontawesome";
+import { faCheck as de, faArrowUpRightFromSquare as ue, faTrash as K, faAlignLeft as J, faAlignCenter as ge, faAlignRight as he, faArrowsLeftRight as Ee, faLink as pe, faFile as Ne, faIndent as Te, faOutdent as Me, faImage as ze, faAlignJustify as De, faChevronDown as He, faListOl as me, faQuoteLeft as fe, faListUl as ve, faStrikethrough as Ue, faHighlighter as Be, faA as re } from "@fortawesome/free-solid-svg-icons";
+import { NodeViewWrapper as be, ReactNodeViewRenderer as Ce, Node as Oe, mergeAttributes as Fe, useCurrentEditor as We, useEditorState as ye, useEditor as $e, EditorContent as Re } from "@tiptap/react";
+import { TextStyle as Pe } from "@tiptap/extension-text-style";
+import { Color as _e } from "@tiptap/extension-color";
+import { Highlight as Ve } from "@tiptap/extension-highlight";
+import qe from "@tiptap/starter-kit";
+import je from "@tiptap/extension-underline";
+import Xe from "@tiptap/extension-link";
+import Ge from "@tiptap/extension-text-align";
+import Ze from "@tiptap/extension-heading";
+import { Selection as Ke, TextSelection as Je, NodeSelection as Qe } from "@tiptap/pm/state";
+import { Image as Ye } from "@tiptap/extension-image";
+import { Extension as et } from "@tiptap/core";
+import { useDisclosure as tt } from "@mantine/hooks";
+import { useHotkeys as it } from "react-hotkeys-hook";
+const R = {
+  MIN_WIDTH: 10,
+  MAX_WIDTH: 100,
+  MIN_HEIGHT_PX: 70
+}, nt = [25, 50, 75, 100], rt = [
+  { value: "left", icon: J, label: "Aligner à gauche" },
+  { value: "center", icon: ge, label: "Aligner au centre" },
+  { value: "right", icon: he, label: "Aligner à droite" }
+], at = (e) => {
+  const i = {
+    left: { marginLeft: 0, marginRight: "auto" },
+    right: { marginLeft: "auto", marginRight: 0 },
+    center: { marginLeft: "auto", marginRight: "auto" }
+  };
+  return i[e] || i.center;
+}, ae = (e, i) => {
+  if (!(e != null && e.naturalWidth) || !(e != null && e.naturalHeight)) return R.MIN_WIDTH;
+  const l = e.naturalWidth / e.naturalHeight, r = R.MIN_HEIGHT_PX * l;
+  return Math.max(R.MIN_WIDTH, r / i * 100);
+}, le = ({ direction: e, onMouseDown: i }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: `absolute top-1/2 -translate-y-1/2 w-[6px] h-[48px] bg-[var(--primary-color-filled)] cursor-ew-resize rounded-full z-10 ${e === "left" ? "left-[4px]" : "right-[4px]"}`,
+    onMouseDown: i
+  }
+), lt = ({ toolbarId: e, alignment: i, imageWidth: l, href: r, onAlignChange: c, onSizeChange: o, onToggleLink: s, onDelete: d }) => {
+  const [m, h] = A(!1);
+  return /* @__PURE__ */ p(G, { gap: "xs", wrap: "nowrap", children: [
+    rt.map((a) => /* @__PURE__ */ t(
+      b,
+      {
+        size: "xs",
+        radius: "sm",
+        variant: i === a.value ? "light" : "subtle",
+        color: i === a.value ? void 0 : "gray",
+        onClick: () => c(a.value),
+        title: a.label,
+        children: /* @__PURE__ */ t(x, { icon: a.icon })
+      },
+      a.value
+    )),
+    /* @__PURE__ */ p(k, { opened: m, position: "bottom", shadow: "md", offset: 8, withArrow: !1, closeOnClickOutside: !1, children: [
+      /* @__PURE__ */ t(k.Target, { children: /* @__PURE__ */ t(
+        b,
+        {
+          size: "xs",
+          radius: "sm",
+          variant: m ? "light" : "subtle",
+          color: m ? void 0 : "gray",
+          onClick: () => h((a) => !a),
+          title: "Taille",
+          children: /* @__PURE__ */ t(x, { icon: Ee })
+        }
+      ) }),
+      /* @__PURE__ */ t(k.Dropdown, { p: "xs", children: /* @__PURE__ */ t("div", { "data-image-toolbar": e, children: /* @__PURE__ */ t(V, { gap: "4px", wrap: "nowrap", children: nt.map((a) => /* @__PURE__ */ t(
+        b,
+        {
+          radius: "sm",
+          variant: l !== null && Math.round(l) === a ? "light" : "subtle",
+          color: l !== null && Math.round(l) === a ? void 0 : "gray",
+          onClick: () => {
+            o(a), h(!1);
+          },
+          title: `${a}%`,
+          style: { minWidth: 52 },
+          children: /* @__PURE__ */ p("span", { children: [
+            a,
+            "%"
+          ] })
+        },
+        a
+      )) }) }) })
+    ] }),
+    /* @__PURE__ */ t(H, { my: "0", mx: "xs", orientation: "vertical" }),
+    /* @__PURE__ */ t(
+      b,
+      {
+        size: "xs",
+        radius: "sm",
+        variant: r ? "light" : "subtle",
+        color: r ? void 0 : "gray",
+        onClick: s,
+        title: "Lien",
+        children: /* @__PURE__ */ t(x, { icon: pe })
+      }
+    ),
+    /* @__PURE__ */ t(H, { my: "0", mx: "xs", orientation: "vertical" }),
+    /* @__PURE__ */ t(b, { size: "xs", radius: "sm", variant: "subtle", color: "red", onClick: d, title: "Supprimer l'image", children: /* @__PURE__ */ t(x, { icon: K }) })
+  ] });
+}, ot = ({ toolbarId: e, href: i, onHrefChange: l, onClose: r }) => {
+  const [c, o] = A(i || ""), s = () => {
+    l(c.trim() || null), r();
+  };
+  return /* @__PURE__ */ t("div", { "data-image-toolbar": e, children: /* @__PURE__ */ p(G, { gap: "xs", wrap: "nowrap", children: [
+    /* @__PURE__ */ t("div", { className: "w-[220px]", children: /* @__PURE__ */ t(
+      ce,
+      {
+        size: "xs",
+        placeholder: "https://...",
+        value: c,
+        onChange: (m) => o(m.currentTarget.value),
+        onKeyDown: (m) => m.key === "Enter" && s(),
+        autoFocus: !0
+      }
+    ) }),
+    /* @__PURE__ */ t(b, { type: "button", size: "xs", radius: "sm", variant: "subtle", color: "gray", onClick: s, title: "Valider", children: /* @__PURE__ */ t(x, { icon: de }) }),
+    /* @__PURE__ */ t(H, { my: "0", orientation: "vertical" }),
+    /* @__PURE__ */ t(
+      b,
+      {
+        type: "button",
+        size: "xs",
+        radius: "sm",
+        variant: "subtle",
+        color: "gray",
+        onClick: () => c && window.open(c, "_blank"),
+        title: "Ouvrir dans un nouvel onglet",
+        disabled: !c,
+        children: /* @__PURE__ */ t(x, { icon: ue })
+      }
+    ),
+    /* @__PURE__ */ t(
+      b,
+      {
+        type: "button",
+        size: "xs",
+        radius: "sm",
+        variant: "subtle",
+        color: "red",
+        onClick: () => {
+          l(null), r();
+        },
+        title: "Supprimer le lien",
+        disabled: !i,
+        children: /* @__PURE__ */ t(x, { icon: K })
+      }
+    )
+  ] }) });
+}, st = ({ editor: e, node: i, getPos: l }) => {
+  const r = _(null), c = _(null), o = _(null), [s, d] = A(!1), [m, h] = A(!1), [a, f] = A(i.attrs.width || null), [u, g] = A(0), [y, C] = A(!1), [w] = A(() => `image-toolbar-${Math.random().toString(36).substring(2, 9)}`), L = i.attrs.alignment || "center";
+  M(() => {
+    if (!r.current || !u || a !== null) return;
+    const v = () => {
+      let E = r.current.naturalWidth / u * 100;
+      E = Math.min(E, R.MAX_WIDTH);
+      const U = ae(r.current, u);
+      E = Math.max(E, U), f(E), e.chain().updateAttributes({ width: E }).run();
+    };
+    if (r.current.complete)
+      v();
+    else
+      return r.current.addEventListener("load", v), () => {
+        var S;
+        return (S = r.current) == null ? void 0 : S.removeEventListener("load", v);
+      };
+  }, [u, a, e]), M(() => {
+    const v = () => {
+      c.current && g(c.current.offsetWidth);
+    };
+    v();
+    const S = new ResizeObserver(v);
+    return c.current && S.observe(c.current), () => S.disconnect();
+  }, []), M(() => {
+    const v = (S) => {
+      var F, W;
+      const E = S.target, U = ((F = r.current) == null ? void 0 : F.contains(E)) || ((W = o.current) == null ? void 0 : W.contains(E)), q = !!E.closest(`[data-image-toolbar="${w}"]`);
+      U ? (d(!0), e.chain().focus().run()) : d(!!q);
+    };
+    return document.addEventListener("click", v), () => document.removeEventListener("click", v);
+  }, [e, w]), M(() => {
+    s || h(!1);
+  }, [s]);
+  const D = O(
+    (v, S) => {
+      if (S.preventDefault(), S.stopPropagation(), !r.current || !c.current) return;
+      C(!0);
+      const E = S.clientX, U = r.current.offsetWidth, q = ae(r.current, u);
+      let F = a;
+      const W = (ke) => {
+        const ee = ke.clientX - E, te = L === "center" ? ee * 2 : ee, Le = (v === "left" ? U - te : U + te) / u * 100, P = Math.max(q, Math.min(R.MAX_WIDTH, Le));
+        P !== (a || 0) && (f(P), e.chain().updateAttributes({ width: P }).run(), F = P);
+      }, Y = () => {
+        C(!1), document.removeEventListener("mousemove", W), document.removeEventListener("mouseup", Y), e.commands.updateAttributes("image", { width: F });
+      };
+      document.addEventListener("mousemove", W), document.addEventListener("mouseup", Y);
+    },
+    [L, a, u, e]
+  ), n = O(
+    (v) => {
+      e.commands.updateAttributes("image", {
+        alignment: v,
+        ...a && { width: a }
+      });
+    },
+    [a, e]
+  ), I = O(
+    (v) => {
+      f(v), e.commands.updateAttributes("image", { width: v });
+    },
+    [e]
+  ), N = O(
+    (v) => {
+      e.commands.updateAttributes("image", { href: v });
+    },
+    [e]
+  ), T = O(() => {
+    const v = l();
+    e.view.dispatch(e.state.tr.delete(v, v + i.nodeSize));
+  }, [e, l, i.nodeSize]), Ae = a ? `${a}%` : "auto";
+  return /* @__PURE__ */ t("div", { ref: c, className: "relative block w-full my-2.5 select-none", children: /* @__PURE__ */ t("div", { style: { width: Ae, ...at(L) }, children: /* @__PURE__ */ p(k, { opened: s, position: "top", shadow: "md", offset: 8, withArrow: !1, closeOnClickOutside: !1, children: [
+    /* @__PURE__ */ t(k.Target, { children: /* @__PURE__ */ t("div", { children: /* @__PURE__ */ p(k, { opened: m, position: "bottom", shadow: "md", offset: 8, withArrow: !1, closeOnClickOutside: !1, children: [
+      /* @__PURE__ */ t(k.Target, { children: /* @__PURE__ */ p("div", { ref: o, className: "relative block", children: [
+        /* @__PURE__ */ t(
+          "img",
+          {
+            ref: r,
+            src: i.attrs.src,
+            alt: i.attrs.alt || "",
+            draggable: !1,
+            onDragStart: (v) => v.preventDefault(),
+            className: `w-full h-auto block rounded transition-shadow cursor-pointer ${s ? "shadow-[0_0_0_2px_var(--primary-color-filled)]" : ""}`
+          }
+        ),
+        s && /* @__PURE__ */ p(X, { children: [
+          /* @__PURE__ */ t(le, { direction: "left", onMouseDown: (v) => D("left", v) }),
+          /* @__PURE__ */ t(le, { direction: "right", onMouseDown: (v) => D("right", v) })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ t(k.Dropdown, { p: "xs", children: /* @__PURE__ */ t(
+        ot,
+        {
+          toolbarId: w,
+          href: i.attrs.href,
+          onHrefChange: N,
+          onClose: () => h(!1)
+        }
+      ) })
+    ] }) }) }),
+    /* @__PURE__ */ t(k.Dropdown, { p: "xs", children: /* @__PURE__ */ t("div", { "data-image-toolbar": w, children: /* @__PURE__ */ t(
+      lt,
+      {
+        toolbarId: w,
+        alignment: L,
+        imageWidth: a,
+        href: i.attrs.href,
+        onAlignChange: n,
+        onSizeChange: I,
+        onToggleLink: () => h((v) => !v),
+        onDelete: T
+      }
+    ) }) })
+  ] }) }) });
+};
+function ct(e) {
+  const { editor: i, node: l, getPos: r } = e;
+  return /* @__PURE__ */ t(be, { children: /* @__PURE__ */ t(st, { editor: i, node: l, getPos: r }) });
+}
+const dt = Ye.extend({
+  addAttributes() {
+    return {
+      src: { default: null },
+      alt: { default: null },
+      title: { default: null },
+      width: {
+        default: null,
+        parseHTML: (e) => e.getAttribute("data-width"),
+        renderHTML: (e) => e.width ? { "data-width": e.width } : {}
+      },
+      alignment: {
+        default: "center",
+        parseHTML: (e) => e.getAttribute("data-alignment") || "center",
+        renderHTML: (e) => ({ "data-alignment": e.alignment })
+      },
+      href: {
+        default: null,
+        parseHTML: (e) => {
+          const i = e.parentElement;
+          return (i == null ? void 0 : i.tagName) === "A" ? i.getAttribute("href") : null;
+        },
+        renderHTML: () => ({})
+      }
+    };
+  },
+  renderHTML({ node: e, HTMLAttributes: i }) {
+    const { width: l, alignment: r, href: c } = e.attrs, o = [];
+    l && o.push(`width: ${l}%`), r === "center" ? o.push("display: block", "margin-left: auto", "margin-right: auto") : r === "right" ? o.push("display: block", "margin-left: auto", "margin-right: 0") : r === "left" && o.push("display: block", "margin-left: 0", "margin-right: auto");
+    const s = { ...i, class: "tiptap-img" };
+    o.length && (s.style = o.join("; "));
+    const d = ["img", s];
+    return c ? ["a", { href: c, target: "_blank", rel: "noopener noreferrer" }, d] : d;
+  },
+  addNodeView() {
+    return Ce(ct);
+  }
+}), ut = et.create({
+  name: "indent",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["paragraph", "heading"],
+        attributes: {
+          indent: {
+            default: 0,
+            renderHTML: (e) => ({ style: `padding-left: ${(e.indent || 0) * 40}px` }),
+            parseHTML: (e) => ({
+              indent: parseInt(e.style.paddingLeft) / 40 || 0
+            })
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      indent: () => ({ editor: e, commands: i }) => {
+        const l = e.getAttributes(e.state.selection.$head.parent.type.name).indent || 0;
+        return i.updateAttributes(
+          e.state.selection.$head.parent.type.name,
+          { indent: l + 1 }
+        );
+      },
+      outdent: () => ({ editor: e, commands: i }) => {
+        const l = e.getAttributes(e.state.selection.$head.parent.type.name).indent || 0;
+        return i.updateAttributes(
+          e.state.selection.$head.parent.type.name,
+          { indent: Math.max(0, l - 1) }
+        );
+      }
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Tab: () => this.editor.commands.indent(),
+      "Shift-Tab": () => this.editor.commands.outdent()
+    };
+  }
+}), j = 8 * 1024 * 1024;
+function gt(e) {
+  return typeof e == "number" && e >= 0;
+}
+function xe(e, i) {
+  return e ? (Array.isArray(i) ? i : [i]).some(
+    (r) => e.extensionManager.extensions.some((c) => c.name === r)
+  ) : !1;
+}
+function ht(e) {
+  const { state: i, view: l } = e, { doc: r, selection: c } = i, o = Ke.findFrom(c.$to, 1, !0);
+  if (o)
+    return l.dispatch(i.tr.setSelection(o).scrollIntoView()), !0;
+  const s = i.schema.nodes.paragraph;
+  if (!s) return !1;
+  const d = r.content.size, m = s.create();
+  let h = i.tr.insert(d, m);
+  const a = h.doc.resolve(d + 1);
+  return h = h.setSelection(Je.near(a)).scrollIntoView(), l.dispatch(h), !0;
+}
+function pt(e) {
+  const [i, l] = A([]), r = async (d) => {
+    var a, f, u;
+    if (d.size > e.maxSize)
+      return (a = e.onError) == null || a.call(e, new Error(`File size exceeds maximum allowed (${e.maxSize / 1024 / 1024}MB)`)), null;
+    const m = new AbortController(), h = crypto.randomUUID();
+    l((g) => [...g, { id: h, file: d, progress: 0, status: "uploading", abortController: m }]);
+    try {
+      if (!e.upload) throw new Error("Upload function is not defined");
+      const g = await e.upload(
+        d,
+        (y) => {
+          l(
+            (C) => C.map((w) => w.id === h ? { ...w, progress: y.progress } : w)
+          );
+        },
+        m.signal
+      );
+      if (!g) throw new Error("Upload failed: No URL returned");
+      return m.signal.aborted ? null : (l(
+        (y) => y.map((C) => C.id === h ? { ...C, status: "success", url: g, progress: 100 } : C)
+      ), (f = e.onSuccess) == null || f.call(e, g), g);
+    } catch (g) {
+      return m.signal.aborted || (l(
+        (y) => y.map((C) => C.id === h ? { ...C, status: "error", progress: 0 } : C)
+      ), (u = e.onError) == null || u.call(e, g instanceof Error ? g : new Error("Upload failed"))), null;
+    }
+  };
+  return { fileItems: i, uploadFiles: async (d) => {
+    var h, a;
+    return !d || d.length === 0 ? ((h = e.onError) == null || h.call(e, new Error("No files to upload")), []) : e.limit && d.length > e.limit ? ((a = e.onError) == null || a.call(e, new Error(`Maximum ${e.limit} file${e.limit === 1 ? "" : "s"} allowed`)), []) : (await Promise.all(d.map((f) => r(f)))).filter((f) => f !== null);
+  }, removeFileItem: (d) => {
+    l((m) => {
+      const h = m.find((a) => a.id === d);
+      return h != null && h.abortController && h.abortController.abort(), h != null && h.url && URL.revokeObjectURL(h.url), m.filter((a) => a.id !== d);
+    });
+  }, clearAllFiles: () => {
+    i.forEach((d) => {
+      d.abortController && d.abortController.abort(), d.url && URL.revokeObjectURL(d.url);
+    }), l([]);
+  } };
+}
+const we = () => /* @__PURE__ */ p("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__ */ t("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__ */ t("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" })
+] }), mt = () => /* @__PURE__ */ t("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__ */ t("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" }) }), ft = () => /* @__PURE__ */ t("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__ */ t("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" }) }), vt = ({ onFile: e, children: i }) => {
+  const [l, r] = A(!1), [c, o] = A(!1);
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: `tiptap-image-upload-drag-area ${c ? "drag-active" : ""} ${l ? "drag-over" : ""}`,
+      onDragEnter: (a) => {
+        a.preventDefault(), a.stopPropagation(), o(!0);
+      },
+      onDragLeave: (a) => {
+        a.preventDefault(), a.stopPropagation(), a.currentTarget.contains(a.relatedTarget) || (o(!1), r(!1));
+      },
+      onDragOver: (a) => {
+        a.preventDefault(), a.stopPropagation(), r(!0);
+      },
+      onDrop: (a) => {
+        a.preventDefault(), a.stopPropagation(), o(!1), r(!1);
+        const f = Array.from(a.dataTransfer.files);
+        f.length > 0 && e(f);
+      },
+      children: i
+    }
+  );
+}, bt = ({ fileItem: e, onRemove: i }) => {
+  const l = (r) => {
+    if (r === 0) return "0 Bytes";
+    const c = 1024, o = ["Bytes", "KB", "MB", "GB"], s = Math.floor(Math.log(r) / Math.log(c));
+    return `${parseFloat((r / Math.pow(c, s)).toFixed(2))} ${o[s]}`;
+  };
+  return /* @__PURE__ */ p("div", { className: "tiptap-image-upload-preview", children: [
+    /* @__PURE__ */ p("div", { className: "tiptap-image-upload-preview-content", children: [
+      /* @__PURE__ */ p("div", { className: "tiptap-image-upload-file-info", children: [
+        /* @__PURE__ */ t("div", { className: "tiptap-image-upload-file-icon", children: /* @__PURE__ */ t(we, {}) }),
+        /* @__PURE__ */ p("div", { className: "tiptap-image-upload-details", children: [
+          /* @__PURE__ */ t("span", { className: "tiptap-image-upload-text", children: e.file.name }),
+          /* @__PURE__ */ t("span", { className: "tiptap-image-upload-subtext", children: l(e.file.size) })
+        ] })
+      ] }),
+      /* @__PURE__ */ p("div", { className: "tiptap-image-upload-actions", children: [
+        e.status === "uploading" && /* @__PURE__ */ p("span", { className: "tiptap-image-upload-progress-text", children: [
+          e.progress,
+          "%"
+        ] }),
+        /* @__PURE__ */ t(Z, { type: "button", variant: "subtle", onClick: (r) => {
+          r.stopPropagation(), i();
+        }, children: /* @__PURE__ */ t(Ie, { className: "tiptap-button-icon" }) })
+      ] })
+    ] }),
+    e.status === "uploading" && /* @__PURE__ */ t("div", { className: "tiptap-image-upload-progress-track", children: /* @__PURE__ */ t("div", { className: "tiptap-image-upload-progress-bar", style: { width: `${e.progress}%` } }) })
+  ] });
+}, Ct = ({ maxSize: e, limit: i }) => /* @__PURE__ */ p(X, { children: [
+  /* @__PURE__ */ p("div", { className: "tiptap-image-upload-dropzone", children: [
+    /* @__PURE__ */ t(mt, {}),
+    /* @__PURE__ */ t(ft, {}),
+    /* @__PURE__ */ t("div", { className: "tiptap-image-upload-icon-container", children: /* @__PURE__ */ t(we, {}) })
+  ] }),
+  /* @__PURE__ */ p("div", { className: "tiptap-image-upload-content", children: [
+    /* @__PURE__ */ p("span", { className: "tiptap-image-upload-text", children: [
+      /* @__PURE__ */ t("em", { children: "Cliquez pour télécharger" }),
+      " ou glisser-déposer vos images ici"
+    ] }),
+    /* @__PURE__ */ p("span", { className: "tiptap-image-upload-subtext", children: [
+      "Maximum ",
+      i,
+      " fichier",
+      i === 1 ? "" : "s",
+      ", ",
+      e / 1024 / 1024,
+      "Mo",
+      i === 1 ? ". " : " chacun."
+    ] })
+  ] })
+] }), yt = (e) => {
+  const { accept: i, limit: l, maxSize: r } = e.node.attrs, c = _(null), o = e.extension, { fileItems: s, uploadFiles: d, removeFileItem: m, clearAllFiles: h } = pt({
+    maxSize: r,
+    limit: l,
+    accept: i,
+    upload: o.options.upload,
+    onSuccess: o.options.onSuccess,
+    onError: o.options.onError
+  }), a = async (y) => {
+    const C = await d(y);
+    if (C.length > 0) {
+      const w = e.getPos();
+      if (gt(w)) {
+        const L = C.map((D, n) => {
+          var N;
+          const I = ((N = y[n]) == null ? void 0 : N.name.replace(/\.[^/.]+$/, "")) || "unknown";
+          return {
+            type: o.options.type,
+            attrs: { ...o.options, src: D, alt: I, title: I }
+          };
+        });
+        e.editor.chain().focus().deleteRange({ from: w, to: w + e.node.nodeSize }).insertContentAt(w, L).run(), ht(e.editor);
+      }
+    }
+  }, f = (y) => {
+    var w, L;
+    const C = y.target.files;
+    if (!C || C.length === 0) {
+      (L = (w = o.options).onError) == null || L.call(w, new Error("No file selected"));
+      return;
+    }
+    a(Array.from(C));
+  }, u = () => {
+    c.current && s.length === 0 && (c.current.value = "", c.current.click());
+  }, g = s.length > 0;
+  return /* @__PURE__ */ p(be, { className: "tiptap-image-upload", tabIndex: 0, onClick: u, children: [
+    !g && /* @__PURE__ */ t(vt, { onFile: a, children: /* @__PURE__ */ t(Ct, { maxSize: r, limit: l }) }),
+    g && /* @__PURE__ */ p("div", { className: "tiptap-image-upload-previews", children: [
+      s.length > 1 && /* @__PURE__ */ p("div", { className: "tiptap-image-upload-header", children: [
+        /* @__PURE__ */ p("span", { children: [
+          "Uploading ",
+          s.length,
+          " files"
+        ] }),
+        /* @__PURE__ */ t(Z, { type: "button", variant: "subtle", onClick: (y) => {
+          y.stopPropagation(), h();
+        }, children: "Clear All" })
+      ] }),
+      s.map((y) => /* @__PURE__ */ t(
+        bt,
+        {
+          fileItem: y,
+          onRemove: () => m(y.id)
+        },
+        y.id
+      ))
+    ] }),
+    /* @__PURE__ */ t(
+      "input",
+      {
+        ref: c,
+        name: "file",
+        accept: i,
+        type: "file",
+        multiple: l > 1,
+        onChange: f,
+        onClick: (y) => y.stopPropagation()
+      }
+    )
+  ] });
+}, xt = Oe.create({
+  name: "imageUpload",
+  group: "block",
+  draggable: !0,
+  selectable: !0,
+  atom: !0,
+  addOptions() {
+    return {
+      type: "image",
+      accept: "image/*",
+      limit: 1,
+      maxSize: 0,
+      upload: void 0,
+      onError: void 0,
+      onSuccess: void 0,
+      HTMLAttributes: {}
+    };
+  },
+  addAttributes() {
+    return {
+      accept: { default: this.options.accept },
+      limit: { default: this.options.limit },
+      maxSize: { default: this.options.maxSize }
+    };
+  },
+  parseHTML() {
+    return [{ tag: 'div[data-type="image-upload"]' }];
+  },
+  renderHTML({ HTMLAttributes: e }) {
+    return ["div", Fe({ "data-type": "image-upload" }, e)];
+  },
+  addNodeView() {
+    return Ce(yt);
+  },
+  addCommands() {
+    return {
+      setImageUploadNode: (e) => ({ commands: i }) => i.insertContent({ type: this.name, attrs: e })
+    };
+  },
+  addKeyboardShortcuts() {
+    return {
+      Enter: ({ editor: e }) => {
+        const { selection: i } = e.state, { nodeAfter: l } = i.$from;
+        if (l && l.type.name === "imageUpload" && e.isActive("imageUpload")) {
+          const r = e.view.nodeDOM(i.$from.pos);
+          if (r && r instanceof HTMLElement) {
+            const c = r.firstChild;
+            if (c && c instanceof HTMLElement)
+              return c.click(), !0;
+          }
+        }
+        return !1;
+      }
+    };
+  }
+});
+function wt({ editor: e, disabled: i = !1 }) {
+  const [l, { open: r, close: c, toggle: o }] = tt(!1), [s, d] = A("");
+  M(() => {
+    if (l) {
+      const f = e.getAttributes("link").href ?? "";
+      d(f);
+    }
+  }, [l, e]), M(() => {
+    if (!e) return;
+    const f = (u) => {
+      const g = u.target.closest("a");
+      g && (d(g.href ?? ""), r());
+    };
+    return e.view.dom.addEventListener("click", f, !0), () => e.view.dom.removeEventListener("click", f);
+  }, [e, r]);
+  const m = () => {
+    s && e.chain().focus().setLink({ href: s }).run(), c();
+  }, h = () => {
+    e.chain().focus().unsetLink().run(), c();
+  }, a = e.isActive("link");
+  return /* @__PURE__ */ p(k, { shadow: "md", children: [
+    /* @__PURE__ */ t(k.Target, { children: /* @__PURE__ */ t(
+      b,
+      {
+        type: "button",
+        onClick: o,
+        title: "Inserer un lien",
+        variant: a ? "light" : "subtle",
+        color: a ? void 0 : "gray",
+        radius: "sm",
+        size: "xs",
+        disabled: i,
+        children: /* @__PURE__ */ t(x, { icon: pe })
+      }
+    ) }),
+    /* @__PURE__ */ t(k.Dropdown, { children: /* @__PURE__ */ p(G, { gap: "xs", wrap: "nowrap", children: [
+      /* @__PURE__ */ t(
+        ce,
+        {
+          size: "xs",
+          placeholder: "https://...",
+          value: s,
+          onChange: (f) => d(f.currentTarget.value),
+          onKeyDown: (f) => f.key === "Enter" && m(),
+          style: { width: 220 },
+          autoFocus: !0
+        }
+      ),
+      /* @__PURE__ */ t(b, { type: "button", size: "xs", radius: "sm", variant: "subtle", color: "gray", onClick: m, title: "Valider", children: /* @__PURE__ */ t(x, { icon: de }) }),
+      /* @__PURE__ */ t(H, { my: "0", orientation: "vertical" }),
+      /* @__PURE__ */ t(
+        b,
+        {
+          type: "button",
+          size: "xs",
+          radius: "sm",
+          variant: "subtle",
+          color: "gray",
+          onClick: () => window.open(s, "_blank"),
+          title: "Ouvrir dans un nouvel onglet",
+          disabled: !s,
+          children: /* @__PURE__ */ t(x, { icon: ue })
+        }
+      ),
+      /* @__PURE__ */ t(
+        b,
+        {
+          type: "button",
+          size: "xs",
+          radius: "sm",
+          variant: "subtle",
+          color: "red",
+          onClick: h,
+          title: "Supprimer le lien",
+          disabled: !a,
+          children: /* @__PURE__ */ t(x, { icon: K })
+        }
+      )
+    ] }) })
+  ] });
+}
+function At({ editor: e, onDocUpload: i, disabled: l = !1 }) {
+  return i ? /* @__PURE__ */ p(X, { children: [
+    /* @__PURE__ */ t(
+      "input",
+      {
+        id: "ste-file-upload",
+        type: "file",
+        accept: ".pdf,.doc,.docx,.xls,.xlsx,.txt,.csv",
+        style: { display: "none" },
+        onChange: async (c) => {
+          var s;
+          const o = (s = c.target.files) == null ? void 0 : s[0];
+          if (o) {
+            try {
+              const d = await i(o);
+              if (!(d != null && d.url)) return;
+              const { url: m, name: h } = d, a = h || o.name, { from: f, to: u, empty: g } = e.state.selection;
+              g ? e.chain().focus().insertContent(a).setTextSelection({ from: f, to: f + a.length }).setLink({ href: m }).run() : e.chain().focus().setLink({ href: m }).run();
+            } catch (d) {
+              console.error("Doc upload failed:", d);
+            }
+            c.target.value = "";
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ t(
+      b,
+      {
+        type: "button",
+        variant: "subtle",
+        color: "gray",
+        radius: "sm",
+        size: "xs",
+        title: "Insérer un fichier",
+        onClick: () => document.getElementById("ste-file-upload").click(),
+        disabled: l,
+        children: /* @__PURE__ */ t(x, { icon: Ne })
+      }
+    )
+  ] }) : null;
+}
+function oe({ editor: e, indentType: i = "in", disabled: l = !1 }) {
+  return /* @__PURE__ */ t(
+    b,
+    {
+      type: "button",
+      onClick: () => {
+        e && (i === "in" ? e.chain().focus().indent().run() : e.chain().focus().outdent().run());
+      },
+      title: i === "in" ? "Augmenter l'indentation" : "Diminuer l'indentation",
+      variant: "subtle",
+      color: "gray",
+      radius: "sm",
+      size: "xs",
+      disabled: l,
+      children: /* @__PURE__ */ t(x, { icon: i === "in" ? Te : Me })
+    }
+  );
+}
+function kt(e = "max", i = 768) {
+  const [l, r] = A(!1);
+  return M(() => {
+    const c = e === "min" ? `(min-width: ${i}px)` : `(max-width: ${i - 1}px)`, o = window.matchMedia(c), s = (d) => r(d.matches);
+    return r(o.matches), o.addEventListener("change", s), () => o.removeEventListener("change", s);
+  }, [e, i]), l;
+}
+function Lt(e) {
+  const i = e.storage, l = i == null ? void 0 : i.pages;
+  return !l || !("activeEditor" in l) ? null : l.activeEditor ?? null;
+}
+function It(e) {
+  const { editor: i } = We(), l = e ?? i, [r, c] = A(null);
+  return M(() => {
+    if (!l) {
+      c(null);
+      return;
+    }
+    const s = () => c(Lt(l));
+    return s(), l.on("update", s), l.on("selectionUpdate", s), () => {
+      l.off("update", s), l.off("selectionUpdate", s);
+    };
+  }, [l]), M(() => {
+    if (!r) return;
+    const s = () => c(null);
+    return r.on("destroy", s), () => r.off("destroy", s);
+  }, [r]), ye({
+    editor: r ?? l,
+    selector(s) {
+      return s.editor ? { editor: s.editor } : { editor: null };
+    }
+  }) ?? { editor: null };
+}
+function Q(e) {
+  return !e || !e.isEditable || !xe(e, "imageUpload") ? !1 : e.can().insertContent({ type: "imageUpload" });
+}
+function St(e) {
+  if (!e || !e.isEditable || !Q(e)) return !1;
+  try {
+    return e.chain().focus().insertContent({ type: "imageUpload" }).run();
+  } catch {
+    return !1;
+  }
+}
+function Et(e, i) {
+  return !e || !e.isEditable ? !1 : i ? xe(e, "imageUpload") ? e.isActive("code") ? !0 : Q(e) : !1 : !0;
+}
+function Nt({ editor: e, hideWhenUnavailable: i = !1, onInserted: l }) {
+  const { editor: r } = It(e), c = kt(), [o, s] = A(!0), d = Q(r), m = (r == null ? void 0 : r.isActive("imageUpload")) ?? !1;
+  M(() => {
+    if (!r) return;
+    const a = () => s(Et(r, i));
+    return a(), r.on("selectionUpdate", a), () => r.off("selectionUpdate", a);
+  }, [r, i]);
+  const h = O(() => {
+    if (!r) return !1;
+    const a = St(r);
+    return a && (l == null || l()), a;
+  }, [r, l]);
+  return it("", (a) => {
+    a.preventDefault(), h();
+  }, {
+    enabled: o && d,
+    enableOnContentEditable: !c,
+    enableOnFormTags: !0
+  }), o ? /* @__PURE__ */ t(
+    b,
+    {
+      type: "button",
+      variant: m ? "light" : "subtle",
+      color: m ? void 0 : "gray",
+      disabled: !d,
+      "aria-label": "Ajouter une image",
+      "aria-pressed": m,
+      title: "Ajouter une image",
+      onClick: h,
+      radius: "sm",
+      size: "xs",
+      children: /* @__PURE__ */ t(x, { icon: ze })
+    }
+  ) : null;
+}
+const Tt = [
+  { value: "#e9ecef" },
+  { value: "#f03e3e" },
+  { value: "#e64980" },
+  { value: "#be4bdb" },
+  { value: "#7950f2" },
+  { value: "#228be6" },
+  { value: "#12b886" },
+  { value: "#82c91e" },
+  { value: "#fd7e14" }
+], Mt = [
+  { value: "#e9ecef" },
+  { value: "#f03e3e" },
+  { value: "#e64980" },
+  { value: "#be4bdb" },
+  { value: "#7950f2" },
+  { value: "#228be6" },
+  { value: "#12b886" },
+  { value: "#82c91e" },
+  { value: "#fd7e14" }
+], zt = [
+  { type: "heading", level: 1, label: "Titre 1", className: "text-2xl font-bold" },
+  { type: "heading", level: 2, label: "Titre 2", className: "text-xl font-bold" },
+  { type: "heading", level: 3, label: "Titre 3", className: "text-lg font-bold" },
+  { type: "heading", level: 4, label: "Titre 4", className: "text-base font-bold" },
+  { type: "heading", level: 5, label: "Titre 5", className: "text-sm font-bold" },
+  { type: "heading", level: 6, label: "Titre 6", className: "text-sm font-semibold uppercase" }
+], se = [
+  { value: "left", icon: J, label: "Aligner à gauche" },
+  { value: "center", icon: ge, label: "Aligner au centre" },
+  { value: "right", icon: he, label: "Aligner à droite" },
+  { value: "justify", icon: De, label: "Justifier" }
+], Dt = [
+  { type: "bulletList", icon: ve, label: "Liste à puces" },
+  { type: "orderedList", icon: me, label: "Liste numérotée" },
+  { type: "blockquote", icon: fe, label: "Citation" }
+];
+function ei({ content: e, onChange: i, error: l, onImageUpload: r, onDocUpload: c }) {
+  var D;
+  const [o, s] = A(!1), d = r ? async (n, I, N) => {
+    if (n.size > j)
+      throw new Error(`File size exceeds maximum allowed (${j / (1024 * 1024)}MB)`);
+    return r(n, I, N);
+  } : void 0, m = (n) => {
+    u.isActive({ textAlign: n }) ? u.chain().focus().setTextAlign("left").run() : u.chain().focus().setTextAlign(n).run();
+  }, h = (n) => {
+    u.isActive("heading", { level: n }) ? u.chain().focus().setParagraph().run() : u.chain().focus().toggleHeading({ level: n }).run();
+  }, a = (n) => {
+    n === null ? u.chain().focus().unsetColor().run() : u.chain().focus().setColor(n).run();
+  }, f = (n) => {
+    n === null ? u.chain().focus().unsetHighlight().run() : u.chain().focus().setHighlight({ color: n }).run();
+  }, u = $e({
+    extensions: [
+      qe.configure({
+        bulletList: { HTMLAttributes: { class: "list-disc ml-3" } },
+        orderedList: { HTMLAttributes: { class: "list-decimal ml-3" } },
+        heading: !1,
+        codeBlock: !1,
+        link: !1,
+        underline: !1
+      }),
+      _e,
+      Ze.configure({ levels: [1, 2, 3, 4, 5, 6] }),
+      Ve.configure({ multicolor: !0 }),
+      dt,
+      ...d ? [
+        xt.configure({
+          accept: "image/*",
+          maxSize: j,
+          limit: 1,
+          upload: d,
+          onError: (n) => console.error("Upload failed:", n)
+        })
+      ] : [],
+      ut,
+      Xe.configure({ openOnClick: !1 }),
+      Ge.configure({ types: ["heading", "paragraph"] }),
+      Pe,
+      je
+    ],
+    content: e || "",
+    onUpdate({ editor: n }) {
+      i == null || i(n.getHTML());
+    },
+    onSelectionUpdate({ editor: n }) {
+      const { selection: I } = n.state;
+      s(I instanceof Qe && I.node.type.name === "image");
+    },
+    editorProps: {
+      handleClick(n, I, N) {
+        return N.target.closest("a") ? (N.preventDefault(), !0) : !1;
+      }
+    }
+  });
+  if (!u) return null;
+  const g = ye({
+    editor: u,
+    selector: (n) => ({
+      isBold: n.editor.isActive("bold"),
+      isItalic: n.editor.isActive("italic"),
+      isUnderline: n.editor.isActive("underline"),
+      isStrike: n.editor.isActive("strike"),
+      isLink: n.editor.isActive("link"),
+      isBulletList: n.editor.isActive("bulletList"),
+      isOrderedList: n.editor.isActive("orderedList"),
+      isBlockquote: n.editor.isActive("blockquote"),
+      isAlignLeft: n.editor.isActive({ textAlign: "left" }),
+      isAlignCenter: n.editor.isActive({ textAlign: "center" }),
+      isAlignRight: n.editor.isActive({ textAlign: "right" }),
+      isAlignJustify: n.editor.isActive({ textAlign: "justify" })
+    })
+  }), y = Se(), C = g.isAlignJustify ? "justify" : g.isAlignRight ? "right" : g.isAlignCenter ? "center" : "left", w = ((D = se.find((n) => n.value === C)) == null ? void 0 : D.icon) || J, L = [1, 2, 3, 4, 5, 6].find((n) => u.isActive("heading", { level: n }));
+  return /* @__PURE__ */ p("div", { className: "rounded-md border border-gray-300 bg-white overflow-hidden", children: [
+    /* @__PURE__ */ p("div", { className: "flex flex-wrap gap-1 p-2 border-b border-gray-200 bg-gray-50", children: [
+      /* @__PURE__ */ p(
+        $,
+        {
+          store: y,
+          onOptionSubmit: (n) => {
+            h(Number(n)), y.closeDropdown();
+          },
+          width: 110,
+          classNames: { option: "editor-heading-option" },
+          children: [
+            /* @__PURE__ */ t($.Target, { children: /* @__PURE__ */ t(
+              Z,
+              {
+                title: "Taille du texte",
+                rightSection: /* @__PURE__ */ t(x, { icon: He, size: "2xs" }),
+                onClick: () => y.toggleDropdown(),
+                variant: L ? "light" : "subtle",
+                color: L ? void 0 : "gray",
+                radius: "sm",
+                size: "xs",
+                disabled: o,
+                children: /* @__PURE__ */ p("strong", { children: [
+                  "T",
+                  /* @__PURE__ */ t("sub", { children: L })
+                ] })
+              }
+            ) }),
+            /* @__PURE__ */ t($.Dropdown, { className: "editor-menu", children: /* @__PURE__ */ t($.Options, { children: zt.map((n) => /* @__PURE__ */ t(
+              $.Option,
+              {
+                value: String(n.level),
+                bg: L === n.level ? "var(--mantine-primary-color-light)" : void 0,
+                children: /* @__PURE__ */ t("span", { className: n.className, children: n.label })
+              },
+              n.level
+            )) }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ p(z, { shadow: "md", children: [
+        /* @__PURE__ */ t(z.Target, { children: /* @__PURE__ */ t(
+          b,
+          {
+            type: "button",
+            title: "Alignement",
+            variant: C !== "left" ? "light" : "subtle",
+            color: C !== "left" ? void 0 : "gray",
+            radius: "sm",
+            size: "xs",
+            disabled: o,
+            children: /* @__PURE__ */ t(x, { icon: w })
+          }
+        ) }),
+        /* @__PURE__ */ t(z.Dropdown, { children: se.map((n) => /* @__PURE__ */ t(
+          z.Item,
+          {
+            onClick: () => m(n.value),
+            bg: C === n.value ? "var(--mantine-primary-color-light)" : void 0,
+            title: n.label,
+            disabled: o,
+            children: /* @__PURE__ */ t(x, { icon: n.icon })
+          },
+          n.value
+        )) })
+      ] }),
+      /* @__PURE__ */ p(z, { shadow: "md", children: [
+        /* @__PURE__ */ t(z.Target, { children: /* @__PURE__ */ t(
+          b,
+          {
+            type: "button",
+            title: "Listes et citations",
+            variant: g.isBulletList || g.isOrderedList || g.isBlockquote ? "light" : "subtle",
+            color: g.isBulletList || g.isOrderedList || g.isBlockquote ? void 0 : "gray",
+            radius: "sm",
+            size: "xs",
+            disabled: o,
+            children: /* @__PURE__ */ t(x, { icon: g.isOrderedList ? me : g.isBlockquote ? fe : ve })
+          }
+        ) }),
+        /* @__PURE__ */ t(z.Dropdown, { children: Dt.map((n) => {
+          const I = g[`is${n.type.charAt(0).toUpperCase() + n.type.slice(1)}`], N = () => {
+            const T = u.chain().focus();
+            n.type === "bulletList" ? (g.isBlockquote && T.toggleBlockquote(), T.toggleBulletList().run()) : n.type === "orderedList" ? (g.isBlockquote && T.toggleBlockquote(), T.toggleOrderedList().run()) : n.type === "blockquote" && (g.isBulletList ? T.toggleBulletList() : g.isOrderedList && T.toggleOrderedList(), T.toggleBlockquote().run());
+          };
+          return /* @__PURE__ */ t(
+            z.Item,
+            {
+              onClick: N,
+              bg: I ? "var(--mantine-primary-color-light)" : void 0,
+              title: n.label,
+              disabled: o,
+              leftSection: /* @__PURE__ */ t(x, { icon: n.icon }),
+              children: n.label
+            },
+            n.type
+          );
+        }) })
+      ] }),
+      /* @__PURE__ */ t(H, { my: "0", mx: "xs", orientation: "vertical" }),
+      /* @__PURE__ */ t(oe, { editor: u, indentType: "in", disabled: o }),
+      /* @__PURE__ */ t(oe, { editor: u, indentType: "out", disabled: o }),
+      /* @__PURE__ */ t(H, { my: "0", mx: "xs", orientation: "vertical" }),
+      /* @__PURE__ */ t(
+        b,
+        {
+          type: "button",
+          onClick: () => u.chain().focus().toggleBold().run(),
+          title: "Gras",
+          variant: g.isBold ? "light" : "subtle",
+          color: g.isBold ? void 0 : "gray",
+          radius: "sm",
+          size: "xs",
+          disabled: o,
+          children: /* @__PURE__ */ t("strong", { children: "B" })
+        }
+      ),
+      /* @__PURE__ */ t(
+        b,
+        {
+          type: "button",
+          onClick: () => u.chain().focus().toggleItalic().run(),
+          title: "Italique",
+          variant: g.isItalic ? "light" : "subtle",
+          color: g.isItalic ? void 0 : "gray",
+          radius: "sm",
+          size: "xs",
+          disabled: o,
+          children: /* @__PURE__ */ t("em", { children: "I" })
+        }
+      ),
+      /* @__PURE__ */ t(
+        b,
+        {
+          type: "button",
+          onClick: () => u.chain().focus().toggleUnderline().run(),
+          title: "Souligné",
+          variant: g.isUnderline ? "light" : "subtle",
+          color: g.isUnderline ? void 0 : "gray",
+          radius: "sm",
+          size: "xs",
+          disabled: o,
+          children: /* @__PURE__ */ t("u", { children: "S" })
+        }
+      ),
+      /* @__PURE__ */ t(
+        b,
+        {
+          type: "button",
+          onClick: () => u.chain().focus().toggleStrike().run(),
+          title: "Barré",
+          variant: g.isStrike ? "light" : "subtle",
+          color: g.isStrike ? void 0 : "gray",
+          radius: "sm",
+          size: "xs",
+          disabled: o,
+          children: /* @__PURE__ */ t(x, { icon: Ue })
+        }
+      ),
+      /* @__PURE__ */ p(k, { shadow: "md", children: [
+        /* @__PURE__ */ t(k.Target, { children: /* @__PURE__ */ t(
+          b,
+          {
+            type: "button",
+            title: "Couleur du texte",
+            variant: u.getAttributes("textStyle").color ? "light" : "subtle",
+            color: u.getAttributes("textStyle").color ? void 0 : "gray",
+            radius: "sm",
+            size: "xs",
+            disabled: o,
+            children: /* @__PURE__ */ t(x, { icon: Be })
+          }
+        ) }),
+        /* @__PURE__ */ t(k.Dropdown, { children: /* @__PURE__ */ p(V, { gap: "lg", children: [
+          /* @__PURE__ */ p(V, { w: 150, gap: "sm", children: [
+            /* @__PURE__ */ t("p", { className: "text-sm font-semibold", children: "Couleur du texte" }),
+            /* @__PURE__ */ p(B, { gap: "none", children: [
+              /* @__PURE__ */ t(B.Col, { span: 3, align: "center", p: "0", children: /* @__PURE__ */ t(b, { variant: "subtle", color: "gray", onClick: () => a(null), size: "xs", disabled: o, radius: "sm", children: /* @__PURE__ */ t(ie, { variant: "outline", radius: "xl", size: "xs", color: "black", children: /* @__PURE__ */ t(x, { icon: re, size: "xs" }) }) }) }),
+              Tt.map((n) => /* @__PURE__ */ t(B.Col, { span: 3, align: "center", p: "0", children: /* @__PURE__ */ t(
+                b,
+                {
+                  variant: u.getAttributes("textStyle").color === n.value ? "light" : "subtle",
+                  color: u.getAttributes("textStyle").color === n.value ? void 0 : "gray",
+                  onClick: () => a(n.value),
+                  size: "xs",
+                  disabled: o,
+                  radius: "sm",
+                  children: /* @__PURE__ */ t(ie, { variant: "outline", radius: "xl", size: "xs", color: n.value, children: /* @__PURE__ */ t(x, { icon: re, size: "xs" }) })
+                }
+              ) }, n.value))
+            ] })
+          ] }),
+          /* @__PURE__ */ p(V, { w: 150, gap: "sm", children: [
+            /* @__PURE__ */ t("p", { className: "text-sm font-semibold", children: "Couleur du fond" }),
+            /* @__PURE__ */ p(B, { gap: "none", children: [
+              /* @__PURE__ */ t(B.Col, { span: 3, align: "center", p: "0", children: /* @__PURE__ */ t(b, { variant: "subtle", color: "gray", onClick: () => f(null), size: "xs", disabled: o, radius: "sm", children: /* @__PURE__ */ t(ne, { size: "20", color: "white" }) }) }),
+              Mt.map((n) => /* @__PURE__ */ t(B.Col, { span: 3, align: "center", p: "0", children: /* @__PURE__ */ t(
+                b,
+                {
+                  variant: u.getAttributes("highlight").color === n.value ? "light" : "subtle",
+                  color: u.getAttributes("highlight").color === n.value ? void 0 : "gray",
+                  onClick: () => f(n.value),
+                  size: "xs",
+                  disabled: o,
+                  radius: "sm",
+                  children: /* @__PURE__ */ t(ne, { size: "20", color: n.value })
+                }
+              ) }, n.value))
+            ] })
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t(H, { my: "0", mx: "xs", orientation: "vertical" }),
+      /* @__PURE__ */ t(wt, { editor: u, disabled: o }),
+      /* @__PURE__ */ t(At, { editor: u, onDocUpload: c, disabled: o }),
+      d && /* @__PURE__ */ t(Nt, { editor: u, hideWhenUnavailable: !0 })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "p-4 min-h-[400px]", children: /* @__PURE__ */ t(Re, { editor: u }) }),
+    l && /* @__PURE__ */ t("div", { className: "px-4 pb-2 text-red-500 text-sm", children: l })
+  ] });
+}
+export {
+  dt as CustomImage,
+  xt as ImageUploadNode,
+  ut as Indent,
+  ei as SimpleTiptapEditor
+};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@jcroger/tiptap-simple-editor",
+  "version": "1.0.0",
+  "description": "Rich text editor based on Tiptap and Mantine",
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./styles": "./dist/style.css"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@mantine/core": ">=7",
+    "@mantine/hooks": ">=7",
+    "@tiptap/react": ">=2",
+    "@tiptap/pm": ">=2",
+    "@tiptap/starter-kit": ">=2",
+    "@tiptap/extension-color": ">=2",
+    "@tiptap/extension-highlight": ">=2",
+    "@tiptap/extension-image": ">=2",
+    "@tiptap/extension-link": ">=2",
+    "@tiptap/extension-text-align": ">=2",
+    "@tiptap/extension-text-style": ">=2",
+    "@tiptap/extension-underline": ">=2",
+    "@tiptap/extension-heading": ">=2",
+    "@tiptap/extension-code-block": ">=2",
+    "@fortawesome/react-fontawesome": ">=0.2",
+    "@fortawesome/free-solid-svg-icons": ">=6",
+    "react-hotkeys-hook": ">=4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4",
+    "sass": "^1",
+    "vite": "^6"
+  }
+}