@panphora/clayjs 1.15.2 → 1.17.0

package/src/page/csv-import.js

@@ -5,6 +5,7 @@ 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";
+import { holdSlashRange, heldSlashRange } from "./chrome.js";
 
 const { Plugin } = state;
 const inputs = new WeakMap();
@@ -108,7 +109,9 @@ export async function importCsv(view, file, { upload, remove = null, table = nul
     }
     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);
+    const held = remove ? heldSlashRange(view.state) : null;
+    if (remove && !held) placeAfterBlock(view, remove.block);
+    const inserted = insertTableNode(view.state, view.dispatch, result.node, held, attachment);
     return inserted;
   } catch (cause) {
     if (cause instanceof CsvError) error(view, `Couldn't read this CSV: unclosed quote on line ${cause.line}.`);
@@ -120,12 +123,24 @@ export async function importCsv(view, file, { upload, remove = null, table = nul
 export function pickCsv(view, remove = null, table = null) {
   const input = inputs.get(view);
   if (!input) return false;
-  input._remove = remove;
+  if (remove) holdSlashRange(view, remove);
+  input._remove = remove ? { ...remove, block: blockIdAt(view.state.doc, remove.from) } : null;
   input._table = table;
   input.click();
   return true;
 }
 
+const blockIdAt = (doc, pos) => doc.child(doc.resolve(Math.max(0, Math.min(pos, doc.content.size))).index(0)).attrs.id;
+
+function placeAfterBlock(view, id) {
+  const st = view.state;
+  let at = null;
+  st.doc.forEach((node, offset) => { if (at === null && node.attrs.id === id) at = offset; });
+  if (at === null) return false;
+  view.dispatch(st.tr.setSelection(state.TextSelection.near(st.doc.resolve(at))));
+  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 }) {

package/src/page/document-title-dom.js

@@ -0,0 +1,52 @@
+import { documentTitle } from "./document-title.js";
+
+const TITLE_MODE = "clay-seo-title-mode";
+
+const headOf = (root) =>
+  root?.nodeType === 9 ? root.head : root?.tagName === "HEAD" ? root : root?.querySelector?.("head") ?? null;
+
+export function customTitle(root) {
+  const head = headOf(root);
+  if (!head) return false;
+  for (const meta of head.querySelectorAll("meta")) {
+    if ((meta.getAttribute("name") ?? "").trim().toLowerCase() !== TITLE_MODE) continue;
+    if ((meta.getAttribute("content") ?? "").trim().toLowerCase() === "custom") return true;
+  }
+  return false;
+}
+
+// Mark this document's title as its author's own, the way the SEO editor's custom
+// title does. Returns whether it wrote the marker.
+export function markCustomTitle(root) {
+  const head = headOf(root);
+  if (!head || customTitle(root)) return false;
+  const meta = head.ownerDocument.createElement("meta");
+  meta.setAttribute("name", TITLE_MODE);
+  meta.setAttribute("content", "custom");
+  head.insertBefore(meta, head.querySelector("title") ?? head.firstChild);
+  return true;
+}
+
+export function titleText(root) {
+  return headOf(root)?.querySelector("title")?.textContent ?? "";
+}
+
+export function writeTitle(root, text) {
+  const head = headOf(root);
+  if (!head) return false;
+  const el = head.querySelector("title");
+  if (el) {
+    if (el.textContent === text) return false;
+    el.textContent = text;
+    return true;
+  }
+  const title = head.ownerDocument.createElement("title");
+  title.textContent = text;
+  head.insertBefore(title, head.firstChild);
+  return true;
+}
+
+export function titleFor(root, items) {
+  const custom = customTitle(root);
+  return { custom, title: documentTitle(items, { custom, currentTitle: titleText(root) }) };
+}

package/src/page/document-title-runtime.js

@@ -0,0 +1,90 @@
+import { state } from "../vendor/prosemirror.vendor.js";
+import Mutation from "../lib/mutation.js";
+import { UNTITLED } from "./document-title.js";
+import { customTitle, markCustomTitle, titleFor, titleText, writeTitle } from "./document-title-dom.js";
+
+const ATOM = "\uFFFC";
+
+export function titleItemsOfDoc(doc) {
+  const items = [];
+  for (let i = 0; i < doc.childCount; i++) {
+    const node = doc.child(i);
+    if (node.type.name !== "heading" || node.attrs.level !== 1 || (node.attrs.parent ?? null) !== null) continue;
+    let c = "";
+    node.forEach((child) => { c += child.isText ? child.text : child.type.name === "hard_break" ? ATOM : ""; });
+    items.push({ t: "heading", level: 1, parent: null, c });
+    break;
+  }
+  return items;
+}
+
+export function refreshDocumentTitle(view) {
+  if (!view || view.isDestroyed) return null;
+  const doc = view.dom?.ownerDocument ?? (typeof document === "undefined" ? null : document);
+  if (!doc) return null;
+  const items = titleItemsOfDoc(view.state.doc);
+  const { custom, title } = titleFor(doc, items);
+  if (custom) return title;
+  const current = titleText(doc);
+  // A document with no title of its own and no root H1 has nothing to derive:
+  // inserting a title the file never had would be a change the person did not
+  // make, and the save projection, which owns the saved title, writes none for
+  // it either. An existing title still follows the model, so deleting the H1
+  // reads Untitled.
+  if (current === "" && !items.length) return title;
+  if (current === title) return title;
+  Mutation.pause();
+  try { writeTitle(doc, title); }
+  finally { Mutation.resume(); }
+  return title;
+}
+
+// A file written before titles followed the first H1 can carry a title its author
+// typed with no H1 behind it. The first time an editor opens such a file, that title
+// becomes the author's own (the SEO custom marker), so deriving never replaces it;
+// a file that has an H1 keeps following it, and deleting that H1 later reads Untitled.
+export function adoptAuthoredTitle(view) {
+  const doc = view?.dom?.ownerDocument ?? null;
+  if (!doc || customTitle(doc) || titleItemsOfDoc(view.state.doc).length || [ "", UNTITLED ].includes(titleText(doc).trim())) return false;
+  Mutation.pause();
+  try { return markCustomTitle(doc); }
+  finally { Mutation.resume(); }
+}
+
+export function titlePlugin() {
+  return new state.Plugin({
+    view(editorView) {
+      let doc = null;
+      const refresh = () => {
+        doc = editorView.state.doc;
+        refreshDocumentTitle(editorView);
+      };
+      adoptAuthoredTitle(editorView);
+      refresh();
+      return {
+        update(next) {
+          if (next.state.doc === doc) return;
+          refresh();
+        },
+      };
+    },
+  });
+}
+
+export function observeDocumentTitle(view) {
+  const head = view?.dom?.ownerDocument?.head ?? null;
+  if (!head) return { refresh: () => refreshDocumentTitle(view), dispose() {} };
+  let queued = false;
+  const refresh = () => {
+    if (queued) return;
+    queued = true;
+    queueMicrotask(() => {
+      queued = false;
+      refreshDocumentTitle(view);
+    });
+  };
+  const observer = new MutationObserver(refresh);
+  observer.observe(head, { childList: true, characterData: true, subtree: true, attributeFilter: ["content", "name"] });
+  refreshDocumentTitle(view);
+  return { refresh, dispose() { observer.disconnect(); } };
+}

package/src/page/document-title.js

@@ -0,0 +1,12 @@
+export const UNTITLED = "Untitled";
+
+export function documentTitle(items, { custom = false, currentTitle = "", keepWithoutHeading = false } = {}) {
+  if (custom) return currentTitle;
+  const first = items.find(item =>
+    item.t === "heading" && (item.level ?? 2) === 1 && item.parent == null
+  );
+  // A file the editor has not adopted yet (see adoptAuthoredTitle) may carry a title
+  // its author wrote with no H1 behind it; a renderer that cannot ask keeps it.
+  if (!first && keepWithoutHeading && !["", UNTITLED].includes(String(currentTitle).trim())) return currentTitle;
+  return String(first?.c ?? "").replace(/[\s\uFFFC]+/gu, " ").trim() || UNTITLED;
+}

package/src/page/drag.js

@@ -1,4 +1,5 @@
-import { outline, siblingSpan, BlockSelection, captureSpan, resolveSpan } from "./blocks.js";
+import { siblingSpan, BlockSelection, captureSpan, resolveSpan } from "./blocks.js";
+import { outlineOf } from "./outline-cache.js";
 import { selectBlocks, asStep } from "./blocksel.js";
 import { gapTargets, summaryTarget, pickTarget, moveSpanTo } from "./drop.js";
 import { announce } from "./announce.js";
@@ -15,6 +16,37 @@ export function scrollParent(el) {
   return el.ownerDocument.scrollingElement;
 }
 
+// The blocks a pointer can land on, in vertical order: one list per outline, so
+// every frame of a drag searches it instead of walking the document.
+const visibles = new WeakMap();
+
+function visibleOf(ents, view) {
+  let list = visibles.get(ents);
+  if (!list) {
+    list = [];
+    for (const e of ents) {
+      if (e.hidden) continue;
+      const dom = view.nodeDOM(e.at);
+      if (dom?.getBoundingClientRect) list.push({ i: e.i, dom });
+    }
+    visibles.set(ents, list);
+  }
+  return list;
+}
+
+// The first visible entry whose vertical midpoint is below y, or -1 when the
+// pointer is past every block.
+function firstBelow(list, y) {
+  let lo = 0, hi = list.length;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    const r = list[mid].dom.getBoundingClientRect();
+    if (y < r.top + r.height / 2) hi = mid;
+    else lo = mid + 1;
+  }
+  return lo < list.length ? lo : -1;
+}
+
 export class BlockDrag {
   constructor(view, grip, { index, onClick }) {
     this.view = view;
@@ -43,7 +75,7 @@ export class BlockDrag {
 
   start(event) {
     if (event.button !== 0 || this.state) return;
-    const st = this.view.state, ents = outline(st.doc), sel = st.selection;
+    const st = this.view.state, ents = outlineOf(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);
@@ -76,7 +108,7 @@ export class BlockDrag {
   begin() {
     const s = this.state;
     if (!s || s.active) return;
-    const st = this.view.state, ents = outline(st.doc);
+    const st = this.view.state, ents = outlineOf(st.doc);
     const span = resolveSpan(ents, s.span);
     if (!span) return this.cancel();
     s.active = true;
@@ -95,19 +127,19 @@ export class BlockDrag {
   track() {
     const s = this.state, view = this.view, st = view.state;
     if (!s) return;
-    const ents = outline(st.doc), span = resolveSpan(ents, s.span);
+    const ents = outlineOf(st.doc), span = resolveSpan(ents, s.span);
     if (!span) return this.cancel();
     const { lo, hi } = span;
+    const visible = visibleOf(ents, view);
+    const k = firstBelow(visible, s.y);
     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; }
+    const stop = k < 0 ? visible.length : k + 1;
+    for (let j = Math.max(0, stop - 2); j < stop; j++) {
+      const r = visible[j].dom.getBoundingClientRect();
+      if (s.y >= r.top + r.height / 4 && s.y <= r.bottom - r.height / 4) over = { i: visible[j].i, bottom: r.bottom };
       line = r.bottom + 2;
     }
+    if (k >= 0) { next = visible[k].i; line = visible[k].dom.getBoundingClientRect().top - 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) {
@@ -154,13 +186,16 @@ export class BlockDrag {
     if (!s || event.pointerId !== s.pointer) return;
     if (!s.active) {
       this.stop();
-      if (event.type === "pointerup") this.onClick(s.index);
+      if (event.type === "pointerup") {
+        const ents = outlineOf(this.view.state.doc), span = resolveSpan(ents, s.span);
+        if (span) this.onClick(span.lo);
+      }
       return;
     }
     this.track();
     if (this.state !== s) return;
     const target = s.target;
-    const st = this.view.state, ents = outline(st.doc);
+    const st = this.view.state, ents = outlineOf(st.doc);
     const span = resolveSpan(ents, s.span);
     this.stop();
     if (!target || !span) return;

package/src/page/drop.js

@@ -1,4 +1,4 @@
-import { outline, structureFixes, moveSpanTr, BlockSelection, MAX_INDENT, MOVE } from "./blocks.js";
+import { outline, structureFixes, moveIntent, moveSpanTr, BlockSelection, MAX_INDENT, MOVE } from "./blocks.js";
 import { schema } from "./schema.js";
 
 const N = schema.nodes;
@@ -53,6 +53,7 @@ export function moveSpanTo(st, ents, lo, hi, target, sel = null) {
       if (c) tr.setNodeMarkup(ents[k].at, null, { ...ents[k].node.attrs, ...c });
     }
     tr.setSelection(pick.map(tr.doc, tr.mapping));
+    tr.setMeta(MOVE, moveIntent(ents, lo, hi, target.at, attrs));
   } else {
     tr = moveSpanTr(st, ents, lo, hi, target.at, attrs, pick);
   }