@panphora/clayjs 1.13.1 → 1.14.0

package/src/page/csv-import.js

@@ -0,0 +1,169 @@
+import { state } from "../vendor/prosemirror.vendor.js";
+import { schema } from "./schema.js";
+import { nodeFromBlock, newId, keyBetween } from "./model.js";
+import { parseCsv, tableFromCsv, CsvError } from "./rich/csv.js";
+import { TABLE_IMPORT_LIMIT, insertTableNode } from "./table.js";
+import { safeFileHref } from "./address.js";
+import { asStep } from "./blocksel.js";
+
+const { Plugin } = state;
+const inputs = new WeakMap();
+
+const readText = (file) => typeof file.text === "function" ? file.text() : new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.onload = () => resolve(reader.result);
+  reader.onerror = () => reject(reader.error);
+  reader.readAsText(file);
+});
+
+function error(view, message) {
+  const doc = view.dom.ownerDocument;
+  let notice = view.dom.parentElement.querySelector(".page-csv-error");
+  if (!notice) {
+    notice = doc.createElement("div");
+    notice.className = "page-csv-error";
+    notice.setAttribute("role", "alert");
+    view.dom.parentElement.append(notice);
+  }
+  notice.textContent = message;
+}
+
+function tableNode(parsed) {
+  let count = 0;
+  const data = tableFromCsv(parsed, { maxBytes: TABLE_IMPORT_LIMIT, newId: () => newId(count++ < parsed.header.length ? "c" : "r") });
+  if (!Object.keys(data.cols).length) return null;
+  if (!Object.keys(data.rows).length) {
+    const cells = Object.fromEntries(Object.keys(data.cols).map((id) => [id, ""]));
+    data.rows[newId("r")] = { pos: keyBetween(), cells };
+  }
+  return { node: nodeFromBlock(schema, newId(), { t: "table", pos: null, cols: data.cols, rows: data.rows }), truncated: data.truncated };
+}
+
+async function confirmTruncation({ kept, total }) {
+  const message = `This file has ${total} rows. The first ${kept} fit in a table.`;
+  let confirm = globalThis.clay?.confirm;
+  let modal = globalThis.clay?.modal;
+  if (!confirm) {
+    confirm = (await import("../ui/dialogs.js")).consent;
+    modal = (await import("../ui/modal.js")).default;
+  }
+  const promise = confirm(message);
+  if (modal) modal.yes = `Insert first ${kept} rows and attach the file`;
+  try { await promise; return true; } catch { return false; }
+}
+
+const tableIndex = (doc, id) => {
+  let found = -1;
+  doc.forEach((node, _offset, index) => { if (found < 0 && node.type === schema.nodes.table && node.attrs.id === id) found = index; });
+  return found;
+};
+
+const emptyTable = (table) => {
+  let empty = true;
+  table.descendants((node) => { if (node.isText) empty = false; return empty; });
+  return empty;
+};
+
+// From a table's menu: an empty table is filled in place (it keeps its id,
+// order and parent), a table with content gets the imported one below it.
+function placeImported(view, node, tableId, attachment) {
+  const st = view.state;
+  const index = tableIndex(st.doc, tableId);
+  if (index < 0) return insertTableNode(st, view.dispatch, node, null, attachment);
+  let at = 0;
+  for (let i = 0; i < index; i++) at += st.doc.child(i).nodeSize;
+  const table = st.doc.child(index);
+  if (!emptyTable(table) || attachment) {
+    const next = st.doc.maybeChild(index + 1);
+    const parent = table.attrs.parent ?? null;
+    const pos = keyBetween(table.attrs.pos, next?.attrs.pos ?? null);
+    const placed = node.type.create({ ...node.attrs, pos, parent }, node.content);
+    const end = at + table.nodeSize;
+    const tr = st.tr.insert(end, placed);
+    if (attachment) tr.insert(end + placed.nodeSize, attachment.type.create({ ...attachment.attrs, pos: keyBetween(pos, next?.attrs.pos ?? null), parent }, attachment.content));
+    tr.setSelection(state.TextSelection.create(tr.doc, end + 3));
+    view.dispatch(asStep(tr).scrollIntoView());
+    return true;
+  }
+  const filled = node.type.create({ ...node.attrs, id: table.attrs.id, pos: table.attrs.pos, parent: table.attrs.parent }, node.content);
+  const tr = st.tr.replaceWith(at, at + table.nodeSize, filled);
+  tr.setSelection(state.TextSelection.create(tr.doc, at + 3));
+  view.dispatch(asStep(tr).scrollIntoView());
+  return true;
+}
+
+export async function importCsv(view, file, { upload, remove = null, table = null } = {}) {
+  try {
+    view.dom.parentElement.querySelector(".page-csv-error")?.remove();
+    const parsed = parseCsv(await readText(file));
+    const result = tableNode(parsed);
+    if (!result) { error(view, "Couldn't read this CSV: no columns."); return false; }
+    let attachment = null;
+    if (result.truncated) {
+      if (!(await confirmTruncation(result.truncated))) return false;
+      const response = await upload?.(file);
+      const src = safeFileHref(response?.uploads?.[0]?.url);
+      if (!response?.ok || !src) { error(view, "Couldn't attach the original CSV."); return false; }
+      attachment = schema.nodes.file.create({ id: newId(), src, name: file.name, size: file.size ?? null, mime: file.type || "text/csv" });
+    }
+    if (view.isDestroyed) return false;
+    if (table) return placeImported(view, result.node, table, attachment);
+    const inserted = insertTableNode(view.state, view.dispatch, result.node, remove, attachment);
+    return inserted;
+  } catch (cause) {
+    if (cause instanceof CsvError) error(view, `Couldn't read this CSV: unclosed quote on line ${cause.line}.`);
+    else error(view, "Couldn't read this CSV.");
+    return false;
+  }
+}
+
+export function pickCsv(view, remove = null, table = null) {
+  const input = inputs.get(view);
+  if (!input) return false;
+  input._remove = remove;
+  input._table = table;
+  input.click();
+  return true;
+}
+
+const csvFiles = (files) => [...files].filter((file) => /\.csv$/i.test(file.name || "") || /^(text\/csv|application\/csv)$/i.test(file.type || ""));
+
+export function csvImportPlugin({ upload }) {
+  return new Plugin({
+    view(view) {
+      const input = view.dom.ownerDocument.createElement("input");
+      input.type = "file";
+      input.accept = ".csv,text/csv";
+      input.hidden = true;
+      input.className = "page-csv-input";
+      view.dom.parentElement.append(input);
+      inputs.set(view, input);
+      input.addEventListener("change", () => {
+        const file = input.files?.[0];
+        if (file) importCsv(view, file, { upload, remove: input._remove, table: input._table });
+        input._remove = null;
+        input._table = null;
+        input.value = "";
+      });
+      return { destroy() { inputs.delete(view); input.remove(); } };
+    },
+    props: {
+      handlePaste(view, event) {
+        const files = csvFiles(event.clipboardData?.files || []);
+        if (!files.length) return false;
+        event.preventDefault();
+        importCsv(view, files[0], { upload });
+        return true;
+      },
+      handleDrop(view, event, _slice, moved) {
+        const files = csvFiles(event.dataTransfer?.files || []);
+        if (moved || !files.length) return false;
+        event.preventDefault();
+        const hit = view.posAtCoords({ left: event.clientX, top: event.clientY });
+        if (hit) view.dispatch(view.state.tr.setSelection(state.TextSelection.near(view.state.doc.resolve(hit.pos))));
+        importCsv(view, files[0], { upload });
+        return true;
+      },
+    },
+  });
+}

package/src/page/drag.js

@@ -0,0 +1,202 @@
+import { outline, siblingSpan, BlockSelection, captureSpan, resolveSpan } from "./blocks.js";
+import { selectBlocks, asStep } from "./blocksel.js";
+import { gapTargets, summaryTarget, pickTarget, moveSpanTo } from "./drop.js";
+import { announce } from "./announce.js";
+
+const SLOP = 4;
+const EDGE = 56;
+const MAX_SPEED = 18;
+
+export function scrollParent(el) {
+  for (let n = el.parentElement; n; n = n.parentElement) {
+    const o = getComputedStyle(n).overflowY;
+    if ((o === "auto" || o === "scroll") && n.scrollHeight > n.clientHeight) return n;
+  }
+  return el.ownerDocument.scrollingElement;
+}
+
+export class BlockDrag {
+  constructor(view, grip, { index, onClick }) {
+    this.view = view;
+    this.grip = grip;
+    this.index = index;
+    this.onClick = onClick;
+    this.shell = view.dom.parentElement;
+    this.line = document.createElement("div");
+    this.line.className = "page-drop";
+    this.line.hidden = true;
+    this.line.setAttribute("aria-hidden", "true");
+    this.shell.append(this.line);
+    this.state = null;
+    this.onMove = (e) => this.move(e);
+    this.onUp = (e) => this.end(e);
+    this.onCancel = (e) => { if (e.pointerId === this.state?.pointer) this.cancel(); };
+    this.onKey = (e) => {
+      if (e.key === "Escape" && this.state?.active) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.cancel();
+      }
+    };
+    grip.addEventListener("pointerdown", (e) => this.start(e));
+  }
+
+  start(event) {
+    if (event.button !== 0 || this.state) return;
+    const st = this.view.state, ents = outline(st.doc), sel = st.selection;
+    const index = Math.min(this.index(), ents.length - 1);
+    const inSel = sel instanceof BlockSelection && ents[index].at >= sel.from && ents[index].end <= sel.to;
+    const { lo, hi } = inSel ? sel.span(st.doc) : siblingSpan(ents, index, index);
+    this.state = {
+      index, span: captureSpan(ents, lo, hi), touch: event.pointerType === "touch",
+      pointer: event.pointerId, x0: event.clientX, y0: event.clientY, x: event.clientX, y: event.clientY,
+      active: false, raf: 0, gap: undefined, targets: [], target: null,
+    };
+    this.grip.setPointerCapture?.(event.pointerId);
+    this.grip.addEventListener("pointermove", this.onMove);
+    this.grip.addEventListener("pointerup", this.onUp);
+    this.grip.addEventListener("pointercancel", this.onCancel);
+    this.grip.addEventListener("lostpointercapture", this.onCancel);
+    event.preventDefault();
+  }
+
+  move(event) {
+    const s = this.state;
+    if (!s || event.pointerId !== s.pointer) return;
+    s.x = event.clientX;
+    s.y = event.clientY;
+    if (!s.active) {
+      if (Math.hypot(s.x - s.x0, s.y - s.y0) <= SLOP) return;
+      if (s.touch) return this.stop();
+      this.begin();
+    }
+    this.track();
+  }
+
+  begin() {
+    const s = this.state;
+    if (!s || s.active) return;
+    const st = this.view.state, ents = outline(st.doc);
+    const span = resolveSpan(ents, s.span);
+    if (!span) return this.cancel();
+    s.active = true;
+    this.view.dispatch(st.tr.setSelection(selectBlocks(st.doc, span.lo, span.hi)));
+    this.shell.classList.add("is-dragging");
+    const probe = this.shell.appendChild(document.createElement("div"));
+    probe.style.cssText = "position:absolute;visibility:hidden;width:var(--page-indent)";
+    this.indentPx = probe.getBoundingClientRect().width || 27;
+    probe.remove();
+    this.scroller = scrollParent(this.view.dom);
+    window.addEventListener("keydown", this.onKey, true);
+    this.loop();
+    this.track();
+  }
+
+  track() {
+    const s = this.state, view = this.view, st = view.state;
+    if (!s) return;
+    const ents = outline(st.doc), span = resolveSpan(ents, s.span);
+    if (!span) return this.cancel();
+    const { lo, hi } = span;
+    let next = -1, line = null, over = null;
+    for (const e of ents) {
+      if (e.hidden) continue;
+      const dom = view.nodeDOM(e.at);
+      if (!dom?.getBoundingClientRect) continue;
+      const r = dom.getBoundingClientRect();
+      if (s.y >= r.top + r.height / 4 && s.y <= r.bottom - r.height / 4) over = { i: e.i, bottom: r.bottom };
+      if (s.y < r.top + r.height / 2) { next = e.i; line = r.top - 2; break; }
+      line = r.bottom + 2;
+    }
+    const inside = lo < 0 ? null : over && summaryTarget(st, ents, lo, hi, over.i);
+    const key = inside ? `summary:${over.i}` : next;
+    if (key !== s.gap || st.doc !== s.doc) {
+      s.gap = key;
+      s.doc = st.doc;
+      s.targets = lo < 0 ? [] : inside ? [inside] : gapTargets(st, ents, lo, hi, next);
+    }
+    if (inside) line = over.bottom + 2;
+    const edLeft = view.dom.getBoundingClientRect().left;
+    s.target = pickTarget(s.targets, (s.x - edLeft) / this.indentPx);
+    const shellBox = this.shell.getBoundingClientRect();
+    if (!s.target || line === null) {
+      this.line.hidden = true;
+      this.shell.dataset.drop = "none";
+      return;
+    }
+    this.shell.dataset.drop = "ok";
+    this.line.hidden = false;
+    this.line.style.setProperty("--page-drop-y", `${line - shellBox.top}px`);
+    this.line.style.setProperty("--page-drop-x", `${edLeft - shellBox.left + s.target.depth * this.indentPx}px`);
+    this.line.style.setProperty("--page-drop-w", `${view.dom.getBoundingClientRect().right - edLeft - s.target.depth * this.indentPx}px`);
+  }
+
+  loop() {
+    const step = () => {
+      const s = this.state;
+      if (!s?.active) return;
+      const sc = this.scroller;
+      const box = sc === sc.ownerDocument.scrollingElement ? { top: 0, bottom: window.innerHeight } : sc.getBoundingClientRect();
+      let v = 0;
+      if (s.y < box.top + EDGE) v = -MAX_SPEED * Math.min(1, (box.top + EDGE - s.y) / EDGE);
+      else if (s.y > box.bottom - EDGE) v = MAX_SPEED * Math.min(1, (s.y - (box.bottom - EDGE)) / EDGE);
+      if (v) {
+        sc.scrollTop += v;
+        this.track();
+      }
+      s.raf = requestAnimationFrame(step);
+    };
+    this.state.raf = requestAnimationFrame(step);
+  }
+
+  end(event) {
+    const s = this.state;
+    if (!s || event.pointerId !== s.pointer) return;
+    if (!s.active) {
+      this.stop();
+      if (event.type === "pointerup") this.onClick(s.index);
+      return;
+    }
+    this.track();
+    if (this.state !== s) return;
+    const target = s.target;
+    const st = this.view.state, ents = outline(st.doc);
+    const span = resolveSpan(ents, s.span);
+    this.stop();
+    if (!target || !span) return;
+    const { lo, hi } = span;
+    const same = !target.open && (target.at === ents[lo].at || target.at === ents[hi].end) && target.parent === (ents[lo].node.attrs.parent ?? null)
+      && (ents[lo].node.type.name !== "list_item" || target.indent === ents[lo].node.attrs.indent);
+    if (same) return;
+    this.view.dispatch(asStep(moveSpanTo(st, ents, lo, hi, target)).scrollIntoView());
+    const n = hi - lo + 1;
+    announce(this.view, `Moved ${n} ${n === 1 ? "block" : "blocks"}`);
+    this.view.focus();
+  }
+
+  cancel() {
+    this.stop();
+    announce(this.view, "Move cancelled");
+  }
+
+  stop() {
+    const s = this.state;
+    if (!s) return;
+    this.state = null;
+    cancelAnimationFrame(s.raf);
+    this.grip.removeEventListener("pointermove", this.onMove);
+    this.grip.removeEventListener("pointerup", this.onUp);
+    this.grip.removeEventListener("pointercancel", this.onCancel);
+    this.grip.removeEventListener("lostpointercapture", this.onCancel);
+    this.grip.releasePointerCapture?.(s.pointer);
+    window.removeEventListener("keydown", this.onKey, true);
+    this.shell.classList.remove("is-dragging");
+    delete this.shell.dataset.drop;
+    this.line.hidden = true;
+  }
+
+  destroy() {
+    this.stop();
+    this.line.remove();
+  }
+}

package/src/page/drop.js

@@ -0,0 +1,112 @@
+import { outline, structureFixes, moveSpanTr, BlockSelection, MAX_INDENT, MOVE } from "./blocks.js";
+import { schema } from "./schema.js";
+
+const N = schema.nodes;
+const isList = (n) => n.type === N.list_item;
+const isToggle = (n) => n.type === N.toggle;
+const parentOf = (n) => n.attrs.parent ?? null;
+
+function chainAfter(ents, byId, k) {
+  if (k < 0) return [null];
+  const chain = [];
+  const n = ents[k].node;
+  if (isToggle(n) && n.attrs.open && !ents[k].hidden) chain.unshift(n.attrs.id);
+  for (let p = parentOf(n); p !== null && !chain.includes(p);) {
+    const e = ents[byId.get(p)];
+    if (!e) break;
+    chain.unshift(p);
+    p = parentOf(e.node);
+  }
+  const out = [null];
+  for (const id of chain) {
+    const e = ents[byId.get(id)];
+    if (!e.node.attrs.open || e.hidden) break;
+    out.push(id);
+  }
+  return out;
+}
+
+export function spanAttrs(ents, lo, hi, target) {
+  const rootParent = parentOf(ents[lo].node);
+  const delta = isList(ents[lo].node) ? target.indent - ents[lo].node.attrs.indent : 0;
+  return (e) => {
+    if (e.i < lo || e.i > hi || parentOf(e.node) !== rootParent) return null;
+    return isList(e.node) ? { parent: target.parent, indent: e.node.attrs.indent + delta } : { parent: target.parent };
+  };
+}
+
+function openToggle(tr, id) {
+  let hit = null;
+  tr.doc.forEach((n, off) => { if (n.attrs.id === id && isToggle(n)) hit = { n, off }; });
+  if (hit && !hit.n.attrs.open) tr.setNodeMarkup(hit.off, null, { ...hit.n.attrs, open: true });
+}
+
+export function moveSpanTo(st, ents, lo, hi, target, sel = null) {
+  const attrs = spanAttrs(ents, lo, hi, target);
+  const from = ents[lo].at, to = ents[hi].end;
+  const pick = sel ?? new BlockSelection(st.doc.resolve(from), st.doc.resolve(to));
+  let tr;
+  if (target.at === from || target.at === to) {
+    tr = st.tr;
+    for (let k = lo; k <= hi; k++) {
+      const c = attrs(ents[k]);
+      if (c) tr.setNodeMarkup(ents[k].at, null, { ...ents[k].node.attrs, ...c });
+    }
+    tr.setSelection(pick.map(tr.doc, tr.mapping));
+  } else {
+    tr = moveSpanTr(st, ents, lo, hi, target.at, attrs, pick);
+  }
+  if (target.open) {
+    openToggle(tr, target.open);
+    const move = tr.getMeta(MOVE);
+    if (move) tr.setMeta(MOVE, { ...move, attrs: { ...move.attrs, [target.open]: { open: true } } });
+  }
+  return tr;
+}
+
+function legal(st, ents, lo, hi, target) {
+  if (target.parent != null && ents.slice(lo, hi + 1).some((e) => e.node.attrs.id === target.parent)) return false;
+  const size = ents[hi].end - ents[lo].at;
+  const attrs = spanAttrs(ents, lo, hi, target);
+  for (let k = lo; k <= hi; k++) if (isList(ents[k].node) && (attrs(ents[k])?.indent ?? ents[k].node.attrs.indent) > MAX_INDENT) return false;
+  const tr = moveSpanTo(st, ents, lo, hi, target);
+  const inPlace = target.at === ents[lo].at || target.at === ents[hi].end;
+  const at = inPlace ? ents[lo].at : target.at > ents[lo].at ? target.at - size : target.at;
+  return structureFixes(tr.doc, st.doc).every((f) => f.at >= at && f.at < at + size);
+}
+
+export function gapTargets(st, ents, lo, hi, next) {
+  const byId = new Map();
+  ents.forEach((e) => { if (isToggle(e.node) && e.node.attrs.id) byId.set(e.node.attrs.id, e.i); });
+  const at = next < 0 ? st.doc.content.size : ents[next].at;
+  if (at > ents[lo].at && at < ents[hi].end) return [];
+  const k = (next < 0 ? ents.length : next) - 1;
+  const chain = chainAfter(ents, byId, k);
+  const start = chain.indexOf(next < 0 ? null : parentOf(ents[next].node));
+  const out = [];
+  for (const parent of chain.slice(Math.max(0, start))) {
+    const base = parent === null ? 0 : ents[byId.get(parent)].depth + 1;
+    const prev = k >= 0 && isList(ents[k].node) && parentOf(ents[k].node) === parent ? ents[k].node : null;
+    const top = isList(ents[lo].node) ? (prev ? prev.attrs.indent + 1 : 0) : 0;
+    for (let indent = 0; indent <= top; indent++) {
+      const t = { at, parent, indent, depth: base + (isList(ents[lo].node) ? indent : 0) };
+      if (legal(st, ents, lo, hi, t)) out.push(t);
+    }
+  }
+  return out;
+}
+
+export function summaryTarget(st, ents, lo, hi, i) {
+  const e = ents[i];
+  if (!e || !isToggle(e.node) || e.node.attrs.open || e.hidden || (i >= lo && i <= hi)) return null;
+  if (e.at > ents[lo].at && e.at < ents[hi].end) return null;
+  const id = e.node.attrs.id;
+  const target = { at: ents[e.subEnd].end, parent: id, indent: 0, depth: e.depth + 1, open: id };
+  return legal(st, ents, lo, hi, target) ? target : null;
+}
+
+export function pickTarget(targets, depth) {
+  let best = null;
+  for (const t of targets) if (!best || Math.abs(t.depth - depth) < Math.abs(best.depth - depth)) best = t;
+  return best;
+}