@openmarkdown-dev/editor 0.1.0 → 0.1.2

package/README.md

@@ -16,8 +16,8 @@ const editor = mountEditor(document.getElementById("editor")!, createEditorState
 const bytes = saveMarkdownFile(editor.getDoc(), file); // unedited: the file's own bytes
 ```
 
+- **Lossless round-trip:** open a Markdown file and save it without editing, and the file is byte-for-byte what it was. What an edit may rewrite is listed under [Fidelity](#fidelity), and the [fidelity page](https://openmarkdown.dev/editor/docs/fidelity/) has a check you can run yourself.
 - **Live preview:** headings, lists, tables, math, Mermaid diagrams, callouts and YAML properties render in place; the Markdown shows under the caret.
-- **Your file stays yours:** open and save without editing, and the file is byte-for-byte what it was.
 - **Tables in place:** edit a cell where it is drawn.
 - **Images:** paste or drop them in, drag a corner to resize.
 - **Framework-free:** plain TypeScript and DOM. Works with React, Vue, Svelte or nothing. Not build-free: with no bundler, [self-host it](https://github.com/OpenMarkdown-dev/OpenMarkdown-editor/blob/main/docs/guides/self-hosting.md).
@@ -38,7 +38,7 @@ Lossless round-trip: open a Markdown file and save it without editing, and the f
 
 That names one sentence of the claim below. For edits, the claim says exactly what changes. This is the whole claim. Every sentence is backed by a test:
 
-> OpenMarkdown edits your Markdown source text directly; it never rebuilds the file from a document tree. Open and save without editing, and the file is byte-for-byte what it was: line endings (LF / CRLF), BOM, final newline, whitespace, tabs, escapes and Unicode spelling untouched. When you edit, only what you touched changes, with a few exceptions, each pinned by a test: a table you edit (or click into a cell of) is re-aligned as a whole when you leave it — alignment, cell text and escapes kept; table commands rewrite that table the same way; indenting a list item or pressing Enter in a numbered list renumbers the affected items; Enter in a list item drops trailing spaces before the cursor; a file with mixed line endings gets uniform ones once you edit it.
+> OpenMarkdown edits your Markdown source text directly; it never rebuilds the file from a document tree. Open and save without editing, and the file is byte-for-byte what it was: line endings (LF / CRLF), BOM, final newline, whitespace, tabs, escapes and Unicode spelling untouched. When you edit, only what you touched changes, with a few exceptions, each pinned by a test: a table you edit (or click into a cell of) is re-aligned as a whole when you leave it — alignment, cell text and escapes kept; table commands rewrite that table the same way; indenting a list item or pressing Enter in a numbered list renumbers the affected items; Enter in a list item drops trailing spaces before the cursor; a file with mixed line endings gets uniform ones once you edit it; typing on a lone blank line between two blocks adds a line break after that line, so the block below stays separate.
 
 The claim holds when your host reads and writes the file with the package's
 `openMarkdownFile` and `saveMarkdownFile`. The editor keeps the document as a string in `\n`

package/dist/editor.js

@@ -1377,6 +1377,16 @@ function tableArrowNav(p, row, col, dir) {
 function flattenCellInsert(text) {
   return text.replace(/\r?\n/g, " ");
 }
+function tableCellInsert(text, before) {
+  let run = /\\*$/.exec(before)[0].length;
+  let out = "";
+  for (const ch of flattenCellInsert(text)) {
+    if (ch === "|" && run % 2 === 0) out += "\\";
+    out += ch;
+    run = ch === "\\" ? run + 1 : 0;
+  }
+  return out;
+}
 function tableRangeAt(state, pos) {
   for (const bias of [-1, 1]) {
     let node = treeUpTo(state, pos).resolveInner(pos, bias);
@@ -3930,18 +3940,7 @@ function buildPartEditor(outer, text, hooks, opts = {}) {
             }
           })
         ),
-        opts.singleLine ? EditorState.transactionFilter.of((tr) => {
-          let broken = false;
-          tr.changes.iterChanges((_a, _b, _c, _d, inserted) => {
-            if (/\r?\n/.test(inserted.toString())) broken = true;
-          });
-          if (!broken) return tr;
-          const changes = [];
-          tr.changes.iterChanges((fromA, toA, _b, _c, inserted) => {
-            changes.push({ from: fromA, to: toA, insert: flattenCellInsert(inserted.toString()) });
-          });
-          return { changes, selection: tr.selection, userEvent: tr.annotation(Transaction.userEvent) };
-        }) : [],
+        opts.accept ? acceptFilter(opts.accept) : [],
         EditorView.updateListener.of((u) => {
           if (!u.docChanged) return;
           if (u.transactions.some((t) => t.annotation(reseed))) return;
@@ -3966,7 +3965,7 @@ function buildPartEditor(outer, text, hooks, opts = {}) {
     })
   });
   parts.set(host, view);
-  setTimeout(() => {
+  queueMicrotask(() => {
     if (!host.isConnected) return;
     const selection = entrySelection(opts.caret, view.state.doc.length, pointerPlaced);
     if (!selection) return;
@@ -3993,6 +3992,29 @@ function reseedPart(view, text) {
     annotations: reseed.of(true)
   });
 }
+function acceptFilter(accept) {
+  return EditorState.transactionFilter.of((tr) => {
+    if (!tr.docChanged) return tr;
+    const changes = [];
+    let rewritten = false;
+    tr.changes.iterChanges((fromA, toA, _b, _c, inserted) => {
+      const text = inserted.toString();
+      const ok = accept(text, tr.startState.sliceDoc(0, fromA));
+      if (ok !== text) rewritten = true;
+      changes.push({ from: fromA, to: toA, insert: ok });
+    });
+    if (!rewritten) return tr;
+    const next = tr.startState.changes(changes);
+    const back = tr.changes.invert(tr.startState.doc);
+    const selection = tr.selection ? EditorSelection.create(
+      tr.selection.ranges.map(
+        (r) => EditorSelection.range(next.mapPos(back.mapPos(r.anchor, -1), 1), next.mapPos(back.mapPos(r.head, -1), 1))
+      ),
+      tr.selection.mainIndex
+    ) : void 0;
+    return { changes: next, selection, userEvent: tr.annotation(Transaction.userEvent) };
+  });
+}
 function headText(doc) {
   const n = Math.min(doc.lines, 100);
   return doc.sliceString(0, doc.line(n).to);
@@ -4198,7 +4220,7 @@ class PropertiesWidget extends WidgetType {
         },
         onKey: (e) => this.onKey(e, view, index, part)
       },
-      { singleLine: true, caret: view.state.field(activePropField, false)?.caret }
+      { accept: flattenCellInsert, caret: view.state.field(activePropField, false)?.caret }
     );
     return host;
   }
@@ -4408,6 +4430,29 @@ const undoLanding = ViewPlugin.define((view) => ({
     if (land) queueMicrotask(() => settleLanding(view, u.state, land));
   }
 }));
+function strandedIn(state) {
+  const hooks = state.facet(blockCaret);
+  if (!hooks) return null;
+  const sel = state.selection.main;
+  if (!sel.empty) return null;
+  const pos = sel.head;
+  const block = hooks.editable(state).find((b) => b.from < pos && pos <= b.to);
+  if (!block || hooks.leave(state).length > 0) return null;
+  return { block, pos };
+}
+const strandedCaret = ViewPlugin.define((view) => ({
+  update(u) {
+    if (!u.docChanged && !u.selectionSet) return;
+    if (u.transactions.some((tr) => tr.isUserEvent("undo") || tr.isUserEvent("redo"))) return;
+    if (!strandedIn(u.state)) return;
+    queueMicrotask(() => {
+      if (!view.dom.isConnected || view.state !== u.state || view.composing) return;
+      const hit = strandedIn(view.state);
+      const hooks = view.state.facet(blockCaret);
+      if (hit && hooks) hooks.enterAt(view, hit.block, hit.pos);
+    });
+  }
+}));
 function navigateTo(view, pos) {
   const line = view.state.doc.lineAt(Math.max(0, Math.min(pos, view.state.doc.length)));
   view.dispatch({
@@ -4417,6 +4462,9 @@ function navigateTo(view, pos) {
   });
   view.focus();
 }
+function isRevealed(state, range) {
+  return state.facet(livePreviewConfig).revealOnSelection && state.selection.ranges.some((r) => r.from <= range.to && r.to >= (range.revealFrom ?? range.from));
+}
 function loadMathThenRedraw(view) {
   ensureMath(() => {
     try {
@@ -4876,7 +4924,7 @@ class TableWidget extends WidgetType {
         },
         onKey: (e, part) => this.onCellKey(e, view, part, row, col)
       },
-      { singleLine: true, caret }
+      { accept: tableCellInsert, caret }
     );
     if (align && align !== "none") host.style.textAlign = align;
     return host;
@@ -5148,26 +5196,72 @@ function mermaidReason(e) {
   const reason = `${lines[0]} ${lines[lines.length - 1]}`;
   return reason.length > 200 ? `${reason.slice(0, 199)}…` : reason;
 }
-function requestMermaid(body, scheme, load, done) {
+function requestMermaid(body, scheme, load, done, wanted) {
   const key = cacheKey(body, scheme);
   if (cache.has(key)) return;
   const waiting = inflight.get(key);
   if (waiting) {
-    waiting.add(done);
+    waiting.set(done, wanted);
     return;
   }
-  const waiters = /* @__PURE__ */ new Set([done]);
+  const waiters = /* @__PURE__ */ new Map([[done, wanted]]);
   inflight.set(key, waiters);
   queue = queue.then(async () => {
     const mermaid = await loadMermaid(load);
-    inflight.delete(key);
-    if (!mermaid) return;
+    if (!mermaid || ![...waiters.values()].some((w) => w())) {
+      inflight.delete(key);
+      return;
+    }
     const result = await attemptRenderAsync(() => renderWith(mermaid, body, scheme));
     rememberMermaid(body, scheme, result);
-    for (const fn of waiters) queueMicrotask(fn);
+    inflight.delete(key);
+    for (const fn of waiters.keys()) queueMicrotask(fn);
   });
 }
 const schemeOf = (state) => state.facet(EditorView.darkTheme) ? "dark" : "light";
+function drawnMermaidBodies(state, viewport) {
+  const bodies = [];
+  progressiveTree(state).iterate({
+    enter: (node) => {
+      if (node.name !== "FencedCode") return;
+      const fence = mermaidFence(state, node);
+      if (fence && !isRevealed(state, fence)) {
+        bodies.push({ body: fence.body, near: fence.to >= viewport.from && fence.from <= viewport.to });
+      }
+      return false;
+    }
+  });
+  bodies.sort((a, b) => Number(b.near) - Number(a.near));
+  return bodies.map((b) => b.body);
+}
+class MermaidRequests {
+  constructor(redraw) {
+    this.redraw = redraw;
+  }
+  redraw;
+  alive = true;
+  wanted = /* @__PURE__ */ new Set();
+  request(state, viewport) {
+    const load = state.facet(mermaidLoader);
+    if (!load) return;
+    const scheme = schemeOf(state);
+    const bodies = drawnMermaidBodies(state, viewport);
+    const wanted = new Set(bodies.map((b) => `${scheme}
+${b}`));
+    this.wanted = wanted;
+    const done = () => {
+      if (this.alive) this.redraw();
+    };
+    for (const body of bodies) {
+      const key = `${scheme}
+${body}`;
+      requestMermaid(body, scheme, load, done, () => this.alive && this.wanted.has(key));
+    }
+  }
+  destroy() {
+    this.alive = false;
+  }
+}
 const mermaidEntry = {
   id: "mermaid",
   mode: "A",
@@ -5188,38 +5282,22 @@ const mermaidEntry = {
     class {
       constructor(view) {
         this.view = view;
+        this.requests = new MermaidRequests(() => view.dispatch({ effects: asyncRenderDone.of(null) }));
         this.request();
       }
       view;
-      alive = true;
+      requests;
       update(u) {
-        if (u.docChanged || treeChanged(u) || u.startState.facet(EditorView.darkTheme) !== u.state.facet(EditorView.darkTheme)) {
+        if (u.docChanged || // Which diagrams are drawn follows the selection (reveal) — design D3.
+        u.selectionSet || treeChanged(u) || u.startState.facet(EditorView.darkTheme) !== u.state.facet(EditorView.darkTheme)) {
           this.request();
         }
       }
       destroy() {
-        this.alive = false;
+        this.requests.destroy();
       }
-      /** Ask for every diagram in the document, those in view first. */
       request() {
-        const { state, viewport } = this.view;
-        const load = state.facet(mermaidLoader);
-        if (!load) return;
-        const scheme = schemeOf(state);
-        const bodies = [];
-        progressiveTree(state).iterate({
-          enter: (node) => {
-            if (node.name !== "FencedCode") return;
-            const fence = mermaidFence(state, node);
-            if (fence) bodies.push({ body: fence.body, near: fence.to >= viewport.from && fence.from <= viewport.to });
-            return false;
-          }
-        });
-        bodies.sort((a, b) => Number(b.near) - Number(a.near));
-        const redraw = () => {
-          if (this.alive) this.view.dispatch({ effects: asyncRenderDone.of(null) });
-        };
-        for (const { body } of bodies) requestMermaid(body, scheme, load, redraw);
+        this.requests.request(this.view.state, this.view.viewport);
       }
     }
   )
@@ -5294,9 +5372,8 @@ function buildBlockDecorations(state) {
   const config = state.facet(livePreviewConfig);
   const deco = [];
   const failed = [];
-  const revealed = (c) => config.revealOnSelection && state.selection.ranges.some((r) => r.from <= c.to && r.to >= (c.revealFrom ?? c.from));
   const push2 = (entry, c) => {
-    if (entry.mode === "A" && revealed(c)) return;
+    if (entry.mode === "A" && isRevealed(state, c)) return;
     deco.push(
       Decoration.replace({
         // Every block carries its selected state from here, the one exit, so no
@@ -5321,7 +5398,7 @@ function buildBlockDecorations(state) {
       if (!entry || !entry.range || !entry.widget) return;
       const range = entry.range(state, node);
       if (!range) return false;
-      if (entry.mode === "A" && revealed({ ...range })) return false;
+      if (entry.mode === "A" && isRevealed(state, range)) return false;
       const widget = entry.widget;
       const out = attemptRender(() => widget(state, node, range));
       if (out.kind === "rendered") push2(entry, { ...range, widget: out.value });
@@ -6091,12 +6168,12 @@ const headingFoldToggle = ViewPlugin.fromClass(
 function itemFoldRange(state, item) {
   const first = state.doc.lineAt(item.from);
   let last = state.doc.lineAt(Math.max(item.from, item.to));
-  while (last.number > first.number && (isBlank(state, last.from) || item.to <= last.from)) {
+  while (last.number > first.number && (isBlank$1(state, last.from) || item.to <= last.from)) {
     last = state.doc.line(last.number - 1);
   }
   return last.number > first.number ? { from: first.to, to: last.to } : null;
 }
-function isBlank(state, lineFrom) {
+function isBlank$1(state, lineFrom) {
   const p = linePrefix(state, lineFrom);
   return !/\S/.test(state.sliceDoc(p.end, p.line.to));
 }
@@ -6976,6 +7053,43 @@ function imagePaste(docPath, getSave, getNotify = () => void 0) {
     }
   });
 }
+const USER_INPUT = ["input.type", "input.paste", "input.drop"];
+const isBlank = (line) => /^[ \t]*$/.test(line.text);
+function loneSeparator(state, doc, n) {
+  if (n <= 1 || n >= doc.lines) return null;
+  const line = doc.line(n);
+  if (!isBlank(line) || isBlank(doc.line(n - 1)) || isBlank(doc.line(n + 1))) return null;
+  const tree = treeUpTo(state, line.from);
+  for (const side of [-1, 1]) {
+    const pos = side < 0 ? line.from : line.to;
+    if (tree.resolveInner(pos, side).name !== "Document") return null;
+  }
+  return line;
+}
+function separatorBreak(tr) {
+  if (!tr.docChanged || !USER_INPUT.some((e) => tr.isUserEvent(e))) return null;
+  const ranges = [];
+  tr.changes.iterChanges((fromA2, toA2, _fromB, toB2) => ranges.push({ fromA: fromA2, toA: toA2, toB: toB2 }));
+  if (ranges.length !== 1) return null;
+  const { fromA, toA, toB } = ranges[0];
+  const start = tr.startState;
+  const at = start.doc.lineAt(fromA);
+  if (start.doc.lineAt(toA).number !== at.number) return null;
+  const sep = loneSeparator(start, start.doc, at.number);
+  if (!sep) return null;
+  const doc = tr.newDoc;
+  const edited = doc.lineAt(toB);
+  if (isBlank(edited)) return null;
+  const below = doc.lineAt(tr.changes.mapPos(sep.to + 1, 1));
+  if (below.number !== edited.number + 1) return null;
+  return { from: sep.to, insert: start.lineBreak };
+}
+const separatorKeepsBlocks = EditorState.transactionFilter.of((tr) => {
+  const add2 = separatorBreak(tr);
+  if (!add2) return tr;
+  const spec = { changes: add2 };
+  return [tr, spec];
+});
 function changedRange(current, next) {
   if (current === next) return null;
   const max = Math.min(current.length, next.length);
@@ -7295,6 +7409,11 @@ function buildEditorState(options, loadMermaid2) {
       // Undo / redo land at the change, not at history's old caret (spec:
       // caret-rules R2 / R2a / R2b) — one filter for every undo entry point.
       undoLanding,
+      strandedCaret,
+      // Typing on the only blank line between two blocks keeps the block below
+      // separate (spec: editor-fidelity N8). Every mode: the file's structure
+      // is the same whether it is rendered or not.
+      separatorKeepsBlocks,
       drawSelection(),
       // Drop caret: draws a cursor at the drop position while dragging over the
       // editor, so a sidebar file drag (sidebar-drag-link) shows exactly where

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmarkdown-dev/editor",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A live-preview Markdown editor on CodeMirror 6 that edits the Markdown source itself, for a lossless round-trip: open and save without editing, and the file is byte-for-byte what it was.",
   "license": "MIT",
   "type": "module",
@@ -33,6 +33,7 @@
     "markdown-editor",
     "editor",
     "codemirror",
+    "codemirror-6",
     "live-preview",
     "wysiwyg",
     "embeddable",