@hachej/boring-workspace 0.1.5 → 0.1.7

package/dist/MarkdownEditor-DjiHxnRv.js

@@ -1,349 +0,0 @@
-import { jsxs as A, jsx as t } from "react/jsx-runtime";
-import { useRef as k, useState as y, useEffect as L } from "react";
-import { ReactNodeViewRenderer as S, NodeViewWrapper as B, useEditor as E, EditorContent as U, useEditorState as P } from "@tiptap/react";
-import z from "@tiptap/starter-kit";
-import D from "@tiptap/extension-underline";
-import W from "@tiptap/extension-link";
-import T from "@tiptap/extension-placeholder";
-import F from "@tiptap/extension-task-list";
-import j from "@tiptap/extension-task-item";
-import q from "@tiptap/extension-text-align";
-import V from "@tiptap/extension-highlight";
-import { Table as _ } from "@tiptap/extension-table";
-import { TableRow as $ } from "@tiptap/extension-table-row";
-import { TableHeader as X } from "@tiptap/extension-table-header";
-import { TableCell as K } from "@tiptap/extension-table-cell";
-import O from "@tiptap/extension-image";
-import { c as v } from "./utils-B6yFEsav.js";
-import Q from "@tiptap/extension-code-block-lowlight";
-import { createLowlight as Z, common as G } from "lowlight";
-import { Markdown as J } from "tiptap-markdown";
-import { BoldIcon as Y, ItalicIcon as tt, UnderlineIcon as et, StrikethroughIcon as it, Heading1Icon as rt, Heading2Icon as nt, Heading3Icon as at, ListIcon as ot, ListOrderedIcon as lt, ListChecksIcon as st, QuoteIcon as ct, CodeIcon as ut, LinkIcon as gt, ImageIcon as dt, HighlighterIcon as mt, AlignLeftIcon as ft, AlignCenterIcon as ht, AlignRightIcon as pt, MinusIcon as wt } from "lucide-react";
-import { Toolbar as kt, Input as vt, ToolbarButton as bt, ToolbarSeparator as Lt } from "@hachej/boring-ui-kit";
-const I = 64, x = 2e3, At = O.extend({
-  name: "image",
-  draggable: !0,
-  addAttributes() {
-    var a;
-    return {
-      ...((a = this.parent) == null ? void 0 : a.call(this)) ?? {},
-      width: {
-        default: null,
-        parseHTML: (n) => {
-          const r = n.getAttribute("width");
-          if (r) {
-            const s = parseInt(r, 10);
-            return Number.isFinite(s) ? s : null;
-          }
-          const u = n.style.width;
-          if (u && u.endsWith("px")) {
-            const s = parseInt(u, 10);
-            return Number.isFinite(s) ? s : null;
-          }
-          return null;
-        },
-        renderHTML: (n) => n.width ? { width: String(n.width) } : {}
-      },
-      align: {
-        default: "left",
-        parseHTML: (n) => {
-          const r = n.getAttribute("data-align");
-          return r === "left" || r === "center" || r === "right" ? r : n.style.marginLeft === "auto" && n.style.marginRight === "auto" ? "center" : n.style.marginLeft === "auto" ? "right" : "left";
-        },
-        renderHTML: (n) => ({ "data-align": n.align ?? "left" })
-      }
-    };
-  },
-  addNodeView() {
-    return S(It);
-  }
-});
-function It({ node: i, updateAttributes: a, selected: n }) {
-  const r = k(null), u = k(null), [s, d] = y(!1), c = i.attrs.src ?? "", e = i.attrs.alt ?? "", o = i.attrs.title ?? void 0, g = i.attrs.width, m = i.attrs.align ?? "left";
-  L(() => {
-    if (!s) return;
-    const h = (b) => {
-      const p = u.current;
-      if (!p) return;
-      const R = b.clientX - p.x, M = Math.max(I, Math.min(x, p.width + R));
-      a({ width: Math.round(M) });
-    }, f = () => {
-      u.current = null, d(!1);
-    };
-    return window.addEventListener("pointermove", h), window.addEventListener("pointerup", f), window.addEventListener("pointercancel", f), () => {
-      window.removeEventListener("pointermove", h), window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", f);
-    };
-  }, [s, a]);
-  const H = (h) => {
-    var p;
-    h.preventDefault(), h.stopPropagation();
-    const f = (p = r.current) == null ? void 0 : p.querySelector("img"), b = g ?? (f == null ? void 0 : f.getBoundingClientRect().width) ?? 320;
-    u.current = { x: h.clientX, width: b }, d(!0);
-  };
-  return /* @__PURE__ */ A(
-    B,
-    {
-      ref: r,
-      "data-resizable-image": "",
-      "data-selected": n ? "true" : void 0,
-      className: v(
-        "relative block max-w-full align-baseline",
-        "[&>img]:block [&>img]:max-w-full [&>img]:h-auto [&>img]:rounded-md",
-        m === "left" && "mr-auto",
-        m === "center" && "mx-auto",
-        m === "right" && "ml-auto",
-        n && "ring-2 ring-[color:var(--accent)] ring-offset-1 ring-offset-background"
-      ),
-      style: { width: g ? `${g}px` : void 0 },
-      children: [
-        /* @__PURE__ */ t("img", { src: c, alt: e, title: o, draggable: !1 }),
-        /* @__PURE__ */ t(
-          "span",
-          {
-            role: "slider",
-            "aria-label": "Resize image",
-            "aria-valuenow": g ?? 0,
-            "aria-valuemin": I,
-            "aria-valuemax": x,
-            "data-testid": "resize-handle",
-            onPointerDown: H,
-            className: v(
-              "absolute right-0 bottom-0 h-3 w-3 translate-x-1/2 translate-y-1/2 cursor-nwse-resize",
-              "rounded-full border border-background bg-[color:var(--accent)] shadow",
-              "opacity-0 transition-opacity duration-150 ease-out",
-              (n || s) && "opacity-100"
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-const xt = Z(G), Ct = [
-  /<script[\s>][\s\S]*?<\/script>/gi,
-  /<iframe[\s>][\s\S]*?<\/iframe>/gi,
-  /\s+on\w+\s*=\s*["'][^"']*["']/gi,
-  /\s+on\w+\s*=\s*\S+/gi,
-  /href\s*=\s*["']?\s*javascript:[^"'\s>]*/gi,
-  /src\s*=\s*["']?\s*javascript:[^"'\s>]*/gi
-];
-function Nt(i) {
-  let a = i;
-  for (const n of Ct)
-    a = a.replace(n, "");
-  return a;
-}
-const C = [
-  z.configure({
-    codeBlock: !1,
-    link: !1,
-    underline: !1
-  }),
-  D,
-  W.configure({
-    openOnClick: !0,
-    autolink: !0,
-    linkOnPaste: !0,
-    defaultProtocol: "https",
-    HTMLAttributes: { rel: "noopener noreferrer nofollow", target: "_blank" }
-  }),
-  T.configure({
-    placeholder: "Start writing..."
-  }),
-  F,
-  j.configure({ nested: !0 }),
-  q.configure({
-    types: ["heading", "paragraph"]
-  }),
-  V,
-  _.configure({
-    resizable: !0
-  }),
-  $,
-  X,
-  K,
-  At.configure({
-    inline: !1,
-    allowBase64: !0
-  }),
-  Q.configure({ lowlight: xt }),
-  J.configure({
-    html: !0,
-    transformPastedText: !0,
-    transformCopiedText: !0
-  })
-];
-function l({ onClick: i, active: a, disabled: n, title: r, children: u }) {
-  return /* @__PURE__ */ t(
-    bt,
-    {
-      type: "button",
-      size: "icon-xs",
-      onClick: i,
-      disabled: n,
-      title: r,
-      "aria-pressed": a,
-      className: v(
-        "text-muted-foreground/70",
-        a && "bg-[color:var(--accent-soft)] text-[color:var(--accent)]"
-      ),
-      children: u
-    }
-  );
-}
-function w() {
-  return /* @__PURE__ */ t(Lt, { className: "mx-2 h-3.5" });
-}
-function N(i) {
-  const a = i.trim().toLowerCase();
-  return !a.startsWith("javascript:") && !a.startsWith("data:text/html");
-}
-function Tt(i) {
-  return new Promise((a, n) => {
-    const r = new FileReader();
-    r.onload = () => a(r.result), r.onerror = () => n(r.error ?? new Error("Read failed")), r.readAsDataURL(i);
-  });
-}
-function Ht({ editor: i }) {
-  const a = (e) => {
-    if (i) {
-      if (i.isActive("image")) {
-        i.chain().focus().updateAttributes("image", { align: e }).run();
-        return;
-      }
-      i.chain().focus().setTextAlign(e).run();
-    }
-  }, n = k(null), r = P({
-    editor: i,
-    selector: ({ editor: e }) => e ? {
-      bold: e.isActive("bold"),
-      italic: e.isActive("italic"),
-      underline: e.isActive("underline"),
-      strike: e.isActive("strike"),
-      h1: e.isActive("heading", { level: 1 }),
-      h2: e.isActive("heading", { level: 2 }),
-      h3: e.isActive("heading", { level: 3 }),
-      bulletList: e.isActive("bulletList"),
-      orderedList: e.isActive("orderedList"),
-      taskList: e.isActive("taskList"),
-      blockquote: e.isActive("blockquote"),
-      codeBlock: e.isActive("codeBlock"),
-      link: e.isActive("link"),
-      highlight: e.isActive("highlight"),
-      alignLeft: e.isActive("image") ? (e.getAttributes("image").align ?? "left") === "left" : e.isActive({ textAlign: "left" }),
-      alignCenter: e.isActive("image") ? e.getAttributes("image").align === "center" : e.isActive({ textAlign: "center" }),
-      alignRight: e.isActive("image") ? e.getAttributes("image").align === "right" : e.isActive({ textAlign: "right" })
-    } : null
-  });
-  if (!i || !r) return null;
-  const u = () => {
-    const e = window.prompt("URL:");
-    e && N(e) && i.chain().focus().extendMarkRange("link").setLink({ href: e }).run();
-  }, s = () => {
-    const e = window.prompt("Image URL:");
-    e && N(e) && i.chain().focus().setImage({ src: e }).run();
-  }, d = (e) => {
-    var o;
-    if (e != null && e.shiftKey) {
-      s();
-      return;
-    }
-    (o = n.current) == null || o.click();
-  }, c = async (e) => {
-    var g;
-    const o = (g = e.target.files) == null ? void 0 : g[0];
-    if (e.target.value = "", !(!o || !o.type.startsWith("image/")))
-      try {
-        const m = await Tt(o);
-        i.chain().focus().setImage({ src: m, alt: o.name }).run();
-      } catch {
-      }
-  };
-  return /* @__PURE__ */ A(kt, { className: "border-b border-border/60 bg-background px-3 py-1.5", "aria-label": "Formatting toolbar", children: [
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleBold().run(), active: r.bold, title: "Bold", children: /* @__PURE__ */ t(Y, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleItalic().run(), active: r.italic, title: "Italic", children: /* @__PURE__ */ t(tt, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleUnderline().run(), active: r.underline, title: "Underline", children: /* @__PURE__ */ t(et, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleStrike().run(), active: r.strike, title: "Strikethrough", children: /* @__PURE__ */ t(it, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(w, {}),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleHeading({ level: 1 }).run(), active: r.h1, title: "Heading 1", children: /* @__PURE__ */ t(rt, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleHeading({ level: 2 }).run(), active: r.h2, title: "Heading 2", children: /* @__PURE__ */ t(nt, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleHeading({ level: 3 }).run(), active: r.h3, title: "Heading 3", children: /* @__PURE__ */ t(at, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(w, {}),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleBulletList().run(), active: r.bulletList, title: "Bullet list", children: /* @__PURE__ */ t(ot, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleOrderedList().run(), active: r.orderedList, title: "Ordered list", children: /* @__PURE__ */ t(lt, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleTaskList().run(), active: r.taskList, title: "Task list", children: /* @__PURE__ */ t(st, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(w, {}),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleBlockquote().run(), active: r.blockquote, title: "Quote", children: /* @__PURE__ */ t(ct, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleCodeBlock().run(), active: r.codeBlock, title: "Code block", children: /* @__PURE__ */ t(ut, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: u, active: r.link, title: "Link", children: /* @__PURE__ */ t(gt, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(
-      l,
-      {
-        onClick: d,
-        title: "Image (click to upload, Shift+click for URL)",
-        children: /* @__PURE__ */ t(dt, { className: "h-4 w-4" })
-      }
-    ),
-    /* @__PURE__ */ t(
-      vt,
-      {
-        ref: n,
-        "data-testid": "image-file-input",
-        type: "file",
-        accept: "image/*",
-        className: "hidden",
-        onChange: c
-      }
-    ),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().toggleHighlight().run(), active: r.highlight, title: "Highlight", children: /* @__PURE__ */ t(mt, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(w, {}),
-    /* @__PURE__ */ t(l, { onClick: () => a("left"), active: r.alignLeft, title: "Align left", children: /* @__PURE__ */ t(ft, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => a("center"), active: r.alignCenter, title: "Center align", children: /* @__PURE__ */ t(ht, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(l, { onClick: () => a("right"), active: r.alignRight, title: "Align right", children: /* @__PURE__ */ t(pt, { className: "h-4 w-4" }) }),
-    /* @__PURE__ */ t(w, {}),
-    /* @__PURE__ */ t(l, { onClick: () => i.chain().focus().setHorizontalRule().run(), title: "Horizontal rule", children: /* @__PURE__ */ t(wt, { className: "h-4 w-4" }) })
-  ] });
-}
-function Gt({
-  content: i,
-  onChange: a,
-  readOnly: n = !1,
-  placeholder: r,
-  className: u
-}) {
-  const s = k(a);
-  s.current = a;
-  const d = k(!1), c = E({
-    extensions: r ? [
-      ...C.filter((e) => e.name !== "placeholder"),
-      T.configure({ placeholder: r })
-    ] : C,
-    content: i,
-    editable: !n,
-    editorProps: {
-      attributes: {
-        class: "tiptap-prose max-w-[68ch] px-8 py-6 focus:outline-none min-h-[200px]"
-      },
-      transformPastedHTML: Nt
-    },
-    onUpdate: ({ editor: e }) => {
-      var o, g, m;
-      d.current || (m = s.current) == null || m.call(s, ((g = (o = e.storage.markdown) == null ? void 0 : o.getMarkdown) == null ? void 0 : g.call(o)) ?? e.getHTML());
-    }
-  });
-  return L(() => {
-    !c || c.isDestroyed || c.setEditable(!n);
-  }, [c, n]), L(() => {
-    var o, g;
-    !c || c.isDestroyed || (((g = (o = c.storage.markdown) == null ? void 0 : o.getMarkdown) == null ? void 0 : g.call(o)) ?? c.getHTML()) === i || (d.current = !0, c.commands.setContent(i), d.current = !1);
-  }, [c, i]), /* @__PURE__ */ A("div", { className: v("flex h-full flex-col overflow-hidden", u), children: [
-    !n && /* @__PURE__ */ t(Ht, { editor: c }),
-    /* @__PURE__ */ t("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ t(U, { editor: c }) })
-  ] });
-}
-export {
-  Gt as MarkdownEditor,
-  N as isSafeUrl,
-  Tt as readFileAsDataUrl,
-  Nt as sanitizeHtml
-};