@particle-academy/react-fancy 5.37.0 → 5.39.0

package/dist/chunk-2JOWGYAJ.js

@@ -0,0 +1,609 @@
+import { Tooltip } from './chunk-CF5KRDN4.js';
+import { useControllableState } from './chunk-EDYAXGUM.js';
+import { cn } from './chunk-MMW2JGKZ.js';
+import { forwardRef, useRef, useCallback, useLayoutEffect, useImperativeHandle, useMemo, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
+
+// src/components/Composer/paste-markers.ts
+var PILL_MARK = "\uFFFC";
+var MARKER = /\uFFFC([^\uFFFC\n]+)\uFFFC/g;
+function pasteMarker(id) {
+  return `${PILL_MARK}${id}${PILL_MARK}`;
+}
+function segmentValue(value, known) {
+  const out = [];
+  let last = 0;
+  for (const match of value.matchAll(MARKER)) {
+    const id = match[1];
+    if (!known.has(id)) continue;
+    const start = match.index ?? 0;
+    if (start > last) out.push({ type: "text", text: value.slice(last, start) });
+    out.push({ type: "pill", id });
+    last = start + match[0].length;
+  }
+  if (last < value.length) out.push({ type: "text", text: value.slice(last) });
+  return out;
+}
+function markedIds(value) {
+  return Array.from(value.matchAll(MARKER), (m) => m[1]);
+}
+function expandMarkers(value, pastes, images) {
+  const text = new Map(pastes.map((p) => [p.id, p.text]));
+  const image = new Map(images.map((i) => [i.id, `[${i.label}]`]));
+  return value.replace(MARKER, (whole, id) => text.get(id) ?? image.get(id) ?? whole);
+}
+function usePastePills({
+  threshold,
+  heldPastes: controlledHeldPastes,
+  onHeldPastesChange
+} = {}) {
+  const [heldPastes, setHeldPastes] = useControllableState(
+    controlledHeldPastes,
+    [],
+    onHeldPastesChange
+  );
+  const nextId = useRef(0);
+  const hold = useCallback(
+    (text) => {
+      let id;
+      do {
+        nextId.current += 1;
+        id = `paste-${nextId.current}`;
+      } while (heldPastes.some((p) => p.id === id));
+      setHeldPastes((current) => [...current, { id, text }]);
+      return id;
+    },
+    [heldPastes, setHeldPastes]
+  );
+  const handlePaste = useCallback(
+    (event) => {
+      if (!threshold || threshold <= 0) return false;
+      const text = event.clipboardData?.getData("text/plain") ?? "";
+      if (text.length < threshold) return false;
+      event.preventDefault();
+      hold(text);
+      return true;
+    },
+    [threshold, hold]
+  );
+  const expand = useCallback(
+    (id) => {
+      const found = heldPastes.find((p) => p.id === id);
+      if (found === void 0) return void 0;
+      setHeldPastes((current) => current.filter((p) => p.id !== id));
+      return found.text;
+    },
+    [heldPastes, setHeldPastes]
+  );
+  const remove = useCallback(
+    (id) => setHeldPastes((current) => current.filter((p) => p.id !== id)),
+    [setHeldPastes]
+  );
+  const clear = useCallback(() => setHeldPastes([]), [setHeldPastes]);
+  return { heldPastes, handlePaste, hold, expand, remove, clear };
+}
+function withSeparators(n) {
+  return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+function endsOf(text, chars) {
+  if (text.length <= chars * 2) return text;
+  return `${text.slice(0, chars)} \u2026 ${text.slice(-chars)}`;
+}
+var PILL_BASE = "inline-flex select-none items-center rounded-md px-2 py-0.5 text-xs leading-5 transition-colors";
+var TEXT_PILL = "cursor-pointer bg-zinc-100 text-zinc-700 hover:bg-zinc-200 dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700";
+var IMAGE_PILL = "bg-rose-100 font-medium text-rose-600 dark:bg-rose-500/20 dark:text-rose-300";
+var PREVIEW_BASE = "max-w-xs whitespace-pre-wrap break-all text-xs";
+function ImageThumb({ file }) {
+  const [url, setUrl] = useState(null);
+  useEffect(() => {
+    if (typeof URL.createObjectURL !== "function") return;
+    const made = URL.createObjectURL(file);
+    setUrl(made);
+    return () => URL.revokeObjectURL(made);
+  }, [file]);
+  return url ? /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "max-h-40 max-w-[16rem] rounded" }) : /* @__PURE__ */ jsx("span", { children: file.name });
+}
+function InlinePill({
+  preview,
+  previewChars,
+  renderPastePreview,
+  classNames,
+  disabled,
+  onExpand
+}) {
+  const id = preview.kind === "text" ? preview.paste.id : preview.image.id;
+  const content = /* @__PURE__ */ jsx("span", { "data-react-fancy-composer-paste-pill-preview": id, children: renderPastePreview?.(preview) ?? (preview.kind === "text" ? endsOf(preview.paste.text, previewChars) : /* @__PURE__ */ jsx(ImageThumb, { file: preview.image.file })) });
+  const tooltipClass = cn(PREVIEW_BASE, classNames?.preview);
+  if (preview.kind === "image") {
+    return /* @__PURE__ */ jsx(Tooltip, { content, className: tooltipClass, children: /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-react-fancy-composer-image-pill": id,
+        role: "img",
+        "aria-label": preview.image.label,
+        className: cn(PILL_BASE, IMAGE_PILL, classNames?.pill, classNames?.imagePill),
+        children: preview.image.label
+      }
+    ) });
+  }
+  const count = withSeparators(preview.paste.text.length);
+  return /* @__PURE__ */ jsx(Tooltip, { content, className: tooltipClass, children: /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-react-fancy-composer-paste-pill": id,
+      onClick: () => onExpand(id),
+      disabled,
+      "aria-label": `Insert this pasted text, ${count} characters`,
+      className: cn(PILL_BASE, TEXT_PILL, classNames?.pill, classNames?.textPill),
+      children: [
+        "Pasted text \xB7 ",
+        count,
+        " characters"
+      ]
+    }
+  ) });
+}
+var HOST_ATTR = "data-react-fancy-composer-paste-host";
+function serialize(parent, keep) {
+  let out = "";
+  const children = Array.from(parent.childNodes);
+  children.forEach((node, i) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      out += (node.textContent ?? "").replace(/\u00A0/g, " ");
+      return;
+    }
+    if (!(node instanceof HTMLElement)) return;
+    const id = node.getAttribute(HOST_ATTR);
+    if (id !== null) {
+      if (keep(id)) out += pasteMarker(id);
+      return;
+    }
+    if (node.tagName === "BR") {
+      if (i !== children.length - 1) out += "\n";
+      return;
+    }
+    if (/^(DIV|P)$/.test(node.tagName) && out.length > 0 && !out.endsWith("\n")) {
+      out += "\n";
+    }
+    out += serialize(node, keep);
+  });
+  return out;
+}
+function makeHost(id) {
+  const host = document.createElement("span");
+  host.setAttribute("contenteditable", "false");
+  host.setAttribute(HOST_ATTR, id);
+  host.className = "inline-block align-baseline";
+  return host;
+}
+function ensureTrailingBreak(root, value) {
+  const last = root.lastChild;
+  const hasBreak = last instanceof HTMLElement && last.tagName === "BR";
+  if (value.endsWith("\n") && !hasBreak) root.append(document.createElement("br"));
+  if (!value.endsWith("\n") && hasBreak && value.length > 0) last.remove();
+}
+function placeCaretAfter(node) {
+  const selection = window.getSelection();
+  if (!selection) return;
+  const range = document.createRange();
+  range.setStartAfter(node);
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+function placeCaretAtOffset(root, offset, keep) {
+  const selection = window.getSelection();
+  if (!selection) return;
+  const range = document.createRange();
+  let remaining = offset;
+  let placed = false;
+  for (const node of Array.from(root.childNodes)) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const length = node.textContent?.length ?? 0;
+      if (remaining <= length) {
+        range.setStart(node, remaining);
+        placed = true;
+        break;
+      }
+      remaining -= length;
+      continue;
+    }
+    const id = node instanceof HTMLElement ? node.getAttribute(HOST_ATTR) : null;
+    if (id !== null && keep(id)) {
+      const length = pasteMarker(id).length;
+      if (remaining < length) {
+        range.setStartAfter(node);
+        placed = true;
+        break;
+      }
+      remaining -= length;
+    }
+  }
+  if (!placed) {
+    range.selectNodeContents(root);
+    range.collapse(false);
+    const last = root.lastChild;
+    if (last instanceof HTMLElement && last.tagName === "BR") range.setStartBefore(last);
+  }
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+var InlinePasteEditor = forwardRef(
+  function InlinePasteEditor2({
+    value,
+    known,
+    onChange,
+    onSubmit,
+    onPaste,
+    onHostsChange,
+    placeholder,
+    disabled,
+    className,
+    submitKey = "enter",
+    onKeyDown,
+    placeholderClassName,
+    maxHeight
+  }, ref) {
+    const rootRef = useRef(null);
+    const lastValue = useRef(null);
+    const pending = useRef(/* @__PURE__ */ new Set());
+    const knownRef = useRef(known);
+    knownRef.current = known;
+    const keep = useCallback(
+      (id) => knownRef.current.has(id) || pending.current.has(id),
+      []
+    );
+    const reportHosts = useCallback(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      const hosts = /* @__PURE__ */ new Map();
+      root.querySelectorAll(`[${HOST_ATTR}]`).forEach((el) => {
+        const id = el.getAttribute(HOST_ATTR);
+        if (keep(id)) hosts.set(id, el);
+      });
+      onHostsChange(hosts);
+    }, [keep, onHostsChange]);
+    const caretOffset = useCallback(
+      (whole) => {
+        const root = rootRef.current;
+        const selection = window.getSelection();
+        if (!root || !selection || selection.rangeCount === 0) return whole.length;
+        const range = selection.getRangeAt(0);
+        if (!root.contains(range.endContainer)) return whole.length;
+        const head = document.createRange();
+        head.selectNodeContents(root);
+        head.setEnd(range.endContainer, range.endOffset);
+        return serialize(head.cloneContents(), keep).length;
+      },
+      [keep]
+    );
+    const emit = useCallback(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      const next = serialize(root, keep);
+      ensureTrailingBreak(root, next);
+      reportHosts();
+      lastValue.current = next;
+      onChange(next, caretOffset(next));
+    }, [keep, onChange, reportHosts, caretOffset]);
+    const render = useCallback(
+      (next) => {
+        const root = rootRef.current;
+        if (!root) return;
+        root.replaceChildren();
+        for (const segment of segmentValue(next, knownRef.current)) {
+          if (segment.type === "text") {
+            root.append(document.createTextNode(segment.text));
+          } else {
+            root.append(makeHost(segment.id));
+          }
+        }
+        ensureTrailingBreak(root, next);
+        lastValue.current = next;
+        reportHosts();
+      },
+      [reportHosts]
+    );
+    const caret = useCallback(() => {
+      const root = rootRef.current;
+      const selection = window.getSelection();
+      if (selection && selection.rangeCount > 0) {
+        const range2 = selection.getRangeAt(0);
+        if (root.contains(range2.commonAncestorContainer)) return range2;
+      }
+      const range = document.createRange();
+      range.selectNodeContents(root);
+      range.collapse(false);
+      const last = root.lastChild;
+      if (last instanceof HTMLElement && last.tagName === "BR") {
+        range.setStartBefore(last);
+        range.collapse(true);
+      }
+      return range;
+    }, []);
+    const insert = useCallback(
+      (build) => {
+        const root = rootRef.current;
+        const range = caret();
+        range.deleteContents();
+        const head = document.createRange();
+        head.selectNodeContents(root);
+        head.setEnd(range.startContainer, range.startOffset);
+        const tail = document.createRange();
+        tail.selectNodeContents(root);
+        tail.setStart(range.endContainer, range.endOffset);
+        const nodes = build(
+          serialize(head.cloneContents(), () => true),
+          serialize(tail.cloneContents(), () => true)
+        );
+        if (nodes.length === 0) return;
+        const fragment = document.createDocumentFragment();
+        nodes.forEach((n) => fragment.append(n));
+        range.insertNode(fragment);
+        placeCaretAfter(nodes[nodes.length - 1]);
+        emit();
+      },
+      [caret, emit]
+    );
+    const insertText = useCallback(
+      (text) => insert(() => text ? [document.createTextNode(text)] : []),
+      [insert]
+    );
+    useLayoutEffect(() => {
+      const root = rootRef.current;
+      if (!root) return;
+      for (const id of pending.current) if (known.has(id)) pending.current.delete(id);
+      const wanted = segmentValue(value, known).flatMap((s) => s.type === "pill" ? [s.id] : []).join(PILL_MARK);
+      const onScreen = Array.from(root.querySelectorAll(`[${HOST_ATTR}]`)).map((el) => el.getAttribute(HOST_ATTR)).filter((id) => id !== null && keep(id)).join(PILL_MARK);
+      if (value === lastValue.current && wanted === onScreen) return;
+      render(value);
+    }, [value, known, keep, render]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus() {
+          const root = rootRef.current;
+          if (!root) return;
+          root.focus();
+          const range = caret();
+          const selection = window.getSelection();
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+        },
+        replacePill(id, text) {
+          const root = rootRef.current;
+          const host = Array.from(
+            root?.querySelectorAll(`[${HOST_ATTR}]`) ?? []
+          ).find((el) => el.getAttribute(HOST_ATTR) === id);
+          if (!root || !host) return;
+          const node = document.createTextNode(text);
+          host.replaceWith(node);
+          root.focus();
+          placeCaretAfter(node);
+          emit();
+        },
+        setValue(next, offset) {
+          const root = rootRef.current;
+          if (!root) return;
+          render(next);
+          root.focus();
+          placeCaretAtOffset(root, offset, keep);
+          emit();
+        }
+      }),
+      [caret, emit, render, keep]
+    );
+    const handlePaste = (e) => {
+      e.preventDefault();
+      if (disabled) return;
+      const pills = onPaste(e.clipboardData);
+      if (pills === null) {
+        insertText((e.clipboardData?.getData("text/plain") ?? "").replace(/\r\n?/g, "\n"));
+        return;
+      }
+      for (const { id } of pills) pending.current.add(id);
+      insert((before, after) => {
+        const nodes = [];
+        for (const { id, block } of pills) {
+          if (block) {
+            const precededByBreak = nodes.length === 0 ? before === "" || before.endsWith("\n") : nodes[nodes.length - 1].textContent === "\n";
+            if (!precededByBreak) nodes.push(document.createTextNode("\n"));
+            nodes.push(makeHost(id));
+            nodes.push(document.createTextNode("\n"));
+          } else {
+            nodes.push(makeHost(id));
+          }
+        }
+        const last = nodes[nodes.length - 1];
+        if (last.textContent === "\n" && after.startsWith("\n")) nodes.pop();
+        return nodes;
+      });
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented) return;
+      if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
+      e.preventDefault();
+      const sends = submitKey === "mod-enter" ? e.ctrlKey || e.metaKey : !e.shiftKey;
+      if (sends) {
+        onSubmit();
+      } else {
+        insertText("\n");
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      value === "" && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn(
+            "pointer-events-none absolute left-4 top-3 text-sm text-zinc-400",
+            placeholderClassName
+          ),
+          children: placeholder
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: rootRef,
+          "data-react-fancy-composer-input": "",
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-placeholder": placeholder,
+          "aria-disabled": disabled || void 0,
+          contentEditable: !disabled,
+          suppressContentEditableWarning: true,
+          onInput: emit,
+          onPaste: handlePaste,
+          onKeyDown: handleKeyDown,
+          style: maxHeight === void 0 ? void 0 : { maxHeight },
+          className: cn(
+            "max-h-72 min-h-[4.5rem] w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent px-4 pt-3 text-sm outline-none",
+            className
+          )
+        }
+      )
+    ] });
+  }
+);
+function useInlinePaste({
+  pasteThreshold,
+  pasteImages = false,
+  previewChars,
+  renderPastePreview,
+  classNames,
+  disabled,
+  heldPastes: controlledHeldPastes,
+  onHeldPastesChange,
+  heldImages: controlledHeldImages,
+  onHeldImagesChange,
+  editorRef
+}) {
+  const pills = usePastePills({
+    threshold: pasteThreshold,
+    heldPastes: controlledHeldPastes,
+    onHeldPastesChange
+  });
+  const heldPastes = pills.heldPastes;
+  const [heldImages, setHeldImages] = useControllableState(
+    controlledHeldImages,
+    [],
+    onHeldImagesChange
+  );
+  const imageCount = useRef(0);
+  const known = useMemo(
+    () => /* @__PURE__ */ new Set([...heldPastes.map((p) => p.id), ...heldImages.map((i) => i.id)]),
+    [heldPastes, heldImages]
+  );
+  const holdImage = useCallback(
+    (file) => {
+      let id;
+      do {
+        imageCount.current += 1;
+        id = `image-${imageCount.current}`;
+      } while (heldImages.some((i) => i.id === id));
+      const image = { id, file, label: `Pasted image ${imageCount.current}` };
+      setHeldImages((current) => [...current, image]);
+      return id;
+    },
+    [heldImages, setHeldImages]
+  );
+  const decidePaste = useCallback(
+    (data) => {
+      const text = data?.getData("text/plain") ?? "";
+      if (pasteImages && text === "") {
+        const files = Array.from(data?.files ?? []).filter(
+          (f) => f.type.startsWith("image/")
+        );
+        if (files.length > 0) {
+          return files.map((file) => ({ id: holdImage(file), block: false }));
+        }
+      }
+      if (pasteThreshold && pasteThreshold > 0 && text.length >= pasteThreshold) {
+        return [{ id: pills.hold(text), block: true }];
+      }
+      return null;
+    },
+    [pasteImages, pasteThreshold, holdImage, pills]
+  );
+  const prune = useCallback(
+    (next) => {
+      const present = new Set(markedIds(next));
+      for (const paste of heldPastes) if (!present.has(paste.id)) pills.remove(paste.id);
+      if (heldImages.some((i) => !present.has(i.id))) {
+        setHeldImages((current) => current.filter((i) => present.has(i.id)));
+      }
+    },
+    [heldPastes, heldImages, pills, setHeldImages]
+  );
+  const [hosts, setHosts] = useState(/* @__PURE__ */ new Map());
+  const onHostsChange = useCallback((next) => {
+    setHosts((prev) => {
+      if (prev.size === next.size && [...next].every(([id, el]) => prev.get(id) === el)) {
+        return prev;
+      }
+      return next;
+    });
+  }, []);
+  const expandPill = useCallback(
+    (id) => {
+      const text = pills.expand(id);
+      if (text === void 0) return;
+      editorRef.current?.replacePill(id, text);
+    },
+    [pills, editorRef]
+  );
+  const expand = useCallback(
+    (value) => expandMarkers(value, heldPastes, heldImages),
+    [heldPastes, heldImages]
+  );
+  const imagesIn = useCallback(
+    (value) => markedIds(value).flatMap((id) => heldImages.filter((i) => i.id === id)),
+    [heldImages]
+  );
+  const clear = useCallback(() => {
+    pills.clear();
+    setHeldImages([]);
+  }, [pills, setHeldImages]);
+  const portals = Array.from(hosts, ([id, host]) => {
+    const paste = heldPastes.find((p) => p.id === id);
+    const image = paste ? void 0 : heldImages.find((i) => i.id === id);
+    const preview = paste ? { kind: "text", paste } : image ? { kind: "image", image } : null;
+    return preview ? createPortal(
+      /* @__PURE__ */ jsx(
+        InlinePill,
+        {
+          preview,
+          previewChars,
+          renderPastePreview,
+          classNames,
+          disabled,
+          onExpand: expandPill
+        }
+      ),
+      host,
+      id
+    ) : null;
+  });
+  return {
+    pills,
+    heldPastes,
+    heldImages,
+    known,
+    decidePaste,
+    prune,
+    onHostsChange,
+    expand,
+    imagesIn,
+    clear,
+    portals
+  };
+}
+
+export { InlinePasteEditor, endsOf, pasteMarker, useInlinePaste, usePastePills, withSeparators };
+//# sourceMappingURL=chunk-2JOWGYAJ.js.map
+//# sourceMappingURL=chunk-2JOWGYAJ.js.map