@dogsbay/editor 0.2.0-beta.174 → 0.2.0-beta.175

package/README.md

@@ -45,14 +45,25 @@ const { text, changed } = block.close(doc);   // splice `text` over the block's
   pass `page`. With `page`, reference links are resolved from the page's definitions and an edited
   block writes them as inline links.
 - **`exact` is false** when the serializer would not write the block as it is written now, so an
-  edit restyles its other lines too. The common case: the parser reads a soft line break as a
-  space, so an edited paragraph wrapped over several lines comes back on one line.
+  edit restyles its other lines too. Rare: the block is parsed with format-dogsbay-md's
+  `asWritten`, so a paragraph wrapped over several lines keeps its lines (the editor draws each
+  break as a space), inline code across a line too, a table keeps its delimiter row (`|---|`), a
+  list stays tight or loose and each callout keeps its form (`:::note` or `> [!NOTE]`). Measured
+  on Dogsbay's `docs/`: 3,536 of 3,561 editable blocks exact with the docs' list style (3,353 with
+  the default `listIndent: 4`: pass the project's `style`).
+- **What typing gives is written as Markdown reads it**: a space typed before or after a bold,
+  italic, struck-out or code word goes outside its marks (`** bold**` is not bold).
+- **The block editor adds no empty paragraph** under the block (TipTap's `TrailingNode` is off in
+  `./block-view`; `editorExtensions({ trailingNode: false })` for a host building its own).
+- **A callout is drawn with the site's markup** (render-html's classes, `data-variant`,
+  `data-type`, icon and title, from `@dogsbay/render-html/callout-markup`), so the page's own
+  styles show it as the page does.
 - **Templating, includes and conditions** are parsed in preserve mode: they stay as written, as
   first-class nodes or verbatim parts. A host may open a block with `verbatim > 0` as Markdown
   instead.
 - The two entries are split so that each side loads only what it needs; the documents pass
   between them as JSON (`postMessage` into a sandboxed frame works). Gzipped, `./block-view` is
-  about 136 KB (TipTap and ProseMirror) and `./block` about 163 KB, nearly all of it the
+  about 138 KB (TipTap and ProseMirror) and `./block` about 163 KB, nearly all of it the
   format-dogsbay-md parser and serializer a host already has. Neither imports the change-review
   view or `@dogsbay/tree-diff`.
 
@@ -75,5 +86,5 @@ The package has no view layer of its own: bring `@tiptap/react` or plain `@tipta
 `@tiptap/core`, `@tiptap/pm` and `@tiptap/starter-kit` are peer dependencies, so the host and this
 package share one copy of ProseMirror. ESM only.
 
-What Markdown cannot hold, the bridge does not carry back: bold on inline code, a link's `target`
+What Markdown cannot hold, the bridge does not carry back: a link's `target`
 or `rel`, a table column's width. An edit that only changes these is no change.

package/dist/block-view.js

@@ -5,7 +5,7 @@
  * here and back as JSON.
  */
 import { Editor } from "@tiptap/core";
-import { extensions } from "./schema.js";
+import { editorExtensions } from "./schema.js";
 import { pmDocToTree } from "./bridge.js";
 /** JSON with sorted keys, so two readings of one tree compare equal. */
 const stable = (value) => JSON.stringify(value, (_key, v) => v && typeof v === "object" && !Array.isArray(v)
@@ -13,7 +13,8 @@ const stable = (value) => JSON.stringify(value, (_key, v) => v && typeof v === "
     : v);
 /** Mount the editor on `element` for a block's document (`openBlock(text).doc`). */
 export function mountBlock(element, doc, options = {}) {
-    const editor = new Editor({ element, extensions, content: doc });
+    // No trailing empty paragraph: the block is edited where it stands on its page
+    const editor = new Editor({ element, extensions: editorExtensions({ trailingNode: false }), content: doc });
     // The editor's own reading of the document (default attributes filled in) is what "unchanged" means
     const opened = stable(pmDocToTree(editor.getJSON()));
     const read = () => {

package/dist/block.d.ts

@@ -11,9 +11,9 @@
  * (undoing every change counts as no change). A changed block is written by format-dogsbay-md's
  * serializer in the host's style, re-indented and with the original line ends; `exact` says
  * beforehand whether that serializer gives back this block as written (when not, saving an edit
- * also restyles the block's untouched lines). One such case is common: the parser reads a soft
- * line break as a space, so an edited paragraph that was wrapped over several lines comes back
- * on one line.
+ * also restyles the block's untouched lines). The block is parsed `asWritten`: a paragraph wrapped
+ * over several lines keeps them (inline code across a line too), and a table its delimiter row, so
+ * an edit changes only the lines it touches.
  *
  * Some blocks cannot be edited this way, and `editable` is false with the reason: indentation that
  * does not start every line the same (a lazy continuation line, tabs on one line and spaces on the

package/dist/block.js

@@ -11,9 +11,9 @@
  * (undoing every change counts as no change). A changed block is written by format-dogsbay-md's
  * serializer in the host's style, re-indented and with the original line ends; `exact` says
  * beforehand whether that serializer gives back this block as written (when not, saving an edit
- * also restyles the block's untouched lines). One such case is common: the parser reads a soft
- * line break as a space, so an edited paragraph that was wrapped over several lines comes back
- * on one line.
+ * also restyles the block's untouched lines). The block is parsed `asWritten`: a paragraph wrapped
+ * over several lines keeps them (inline code across a line too), and a table its delimiter row, so
+ * an edit changes only the lines it touches.
  *
  * Some blocks cannot be edited this way, and `editable` is false with the reason: indentation that
  * does not start every line the same (a lazy continuation line, tabs on one line and spaces on the
@@ -89,7 +89,7 @@ export function openBlock(text, options = {}) {
     const l = layout(text);
     // A leading line end: a block starting `---` is a rule, never front matter
     const defs = options.page !== undefined ? definitions(options.page) : "";
-    const tree = dogsbayMdToTree(`\n${l.inner}${defs ? `\n\n${defs}\n` : ""}`, { directives: "preserve" }).tree;
+    const tree = dogsbayMdToTree(`\n${l.inner}${defs ? `\n\n${defs}\n` : ""}`, { directives: "preserve", asWritten: true }).tree;
     const opts = { ...options.serialize, ...options.style };
     const doc = treeToPmDoc(tree);
     const opened = stable(pmDocToTree(doc));

package/dist/bridge.js

@@ -62,13 +62,30 @@ function inlineToPm(nodes) {
                 marks.push({ type: "diffIns" });
             if (diffOp === "del")
                 marks.push({ type: "diffDel" });
-            out.push(marks.length ? { type: "text", text: n.text, marks } : { type: "text", text: n.text });
+            // A soft line break kept by the parser (`softBreaks`) is its own atom, drawn as a space: the
+            // paragraph reads as the page shows it, and its lines come back as written
+            n.text.split("\n").forEach((part, i) => {
+                if (i > 0)
+                    out.push(marks.length ? { type: "softBreak", marks } : { type: "softBreak" });
+                if (part)
+                    out.push(marks.length ? { type: "text", text: part, marks } : { type: "text", text: part });
+            });
             continue;
         }
         if (n.type === "code") {
             if (n.text === "")
                 continue;
-            out.push({ type: "text", text: n.text, marks: [{ type: "code" }] });
+            // Bold, italic or struck-out code (`**\`kubectl\`**`: the parser puts the flags on the code)
+            // keeps them as marks beside the code mark; they were dropped, so an edit anywhere in the
+            // paragraph lost them
+            const marks = [...flagMarks(n), n.minja ? { type: "code", attrs: { minja: true } } : { type: "code" }];
+            // A line break kept in the code (`asWritten`): a soft break with the code mark
+            n.text.split("\n").forEach((part, i) => {
+                if (i > 0)
+                    out.push({ type: "softBreak", marks });
+                if (part)
+                    out.push({ type: "text", text: part, marks });
+            });
             continue;
         }
         if (n.type === "break") {
@@ -95,7 +112,7 @@ function inlineToPm(nodes) {
                 continue;
             }
             for (const child of inner) {
-                if (child.type === "text") {
+                if (child.type === "text" || child.type === "softBreak") {
                     out.push({ ...child, marks: [...(child.marks ?? []), linkMark] });
                 }
                 else {
@@ -144,8 +161,9 @@ function inlineToPm(nodes) {
 function textSpanFromPm(n) {
     const markTypes = new Set((n.marks ?? []).map((m) => m.type));
     if (markTypes.has("code")) {
-        // Vocabulary limit: InlineCode has no formatting flags (parser parity).
-        return { type: "code", text: n.text ?? "" };
+        // The parser's shape: the formats around the code as flags on it
+        const minja = (n.marks ?? []).some((m) => m.type === "code" && m.attrs?.minja === true);
+        return { type: "code", text: n.text ?? "", ...(minja ? { minja: true } : {}), ...marksToFlags(n.marks) };
     }
     const out = { type: "text", text: n.text ?? "" };
     if (markTypes.has("bold"))
@@ -156,7 +174,95 @@ function textSpanFromPm(n) {
         out.strikethrough = true;
     return out;
 }
+/** Adjacent text with the same formats as one node, as the parser gives it (a soft break rejoins its line). */
+function joinText(nodes) {
+    const out = [];
+    for (const n of nodes) {
+        const prev = out[out.length - 1];
+        // A code span's line break (a soft break with the code mark) joins its two halves again
+        const flags = (x) => { const f = x; return `${!!f.bold}${!!f.italic}${!!f.strikethrough}`; };
+        if (n.type === "code" && prev?.type === "code" && (n.text.startsWith("\n") || prev.text.endsWith("\n")) && !!prev.minja === !!n.minja && flags(prev) === flags(n)) {
+            out[out.length - 1] = { ...prev, text: prev.text + n.text };
+            continue;
+        }
+        if (n.type === "text" &&
+            prev?.type === "text" &&
+            !!prev.bold === !!n.bold &&
+            !!prev.italic === !!n.italic &&
+            !!prev.strikethrough === !!n.strikethrough &&
+            prev.diffOp === n.diffOp &&
+            (n.text.startsWith("\n") || prev.text.endsWith("\n"))) {
+            out[out.length - 1] = { ...prev, text: prev.text + n.text };
+            continue;
+        }
+        if (n.type === "link") {
+            out.push({ ...n, children: joinText(n.children) });
+            continue;
+        }
+        out.push(n);
+    }
+    return out;
+}
+/**
+ * Inline code typed with a space before or after the word (`code` on, a space, the word) keeps the
+ * space outside the span: `` ` word` `` shows a space in the code. The other marks are moved by
+ * the serializer; a code span is a node of its own here, so it is done on the way out.
+ */
+function codeSpans(span) {
+    if (span.type !== "code" || !span.text.trim())
+        return [span];
+    // Lengths, not `\s+$`: that regex is quadratic on a long run of spaces inside the text
+    const lead = span.text.slice(0, span.text.length - span.text.trimStart().length);
+    const trail = span.text.slice(span.text.trimEnd().length);
+    if (!lead && !trail)
+        return [span];
+    return [
+        ...(lead ? [{ type: "text", text: lead }] : []),
+        { ...span, text: span.text.slice(lead.length, span.text.length - trail.length) },
+        ...(trail ? [{ type: "text", text: trail }] : []),
+    ];
+}
 function pmInlineToTree(content) {
+    return closeBeforePlainCode(joinText(pmInlineSpans(soleBreaks(content))));
+}
+/**
+ * The serializer lets code with no formats bridge an open bold or italic (`*foo \`x\` bar*`, an
+ * importer's shape), so plain code straight after formatted text or code would be written inside
+ * it (`**\`a\`**\`b\`` came back `**\`a\`\`b\`**`, and `b` bold). The parser marks that boundary
+ * with an empty text; so does the bridge.
+ */
+function closeBeforePlainCode(nodes) {
+    const formatted = (n) => {
+        const f = n;
+        return !!n && (n.type === "text" || n.type === "code") && !!(f.bold || f.italic || f.strikethrough);
+    };
+    const out = [];
+    for (const n of nodes) {
+        if (n.type === "code" && !formatted(n) && formatted(out[out.length - 1]))
+            out.push({ type: "text", text: "" });
+        out.push(n.type === "link" ? { ...n, children: closeBeforePlainCode(n.children) } : n);
+    }
+    return out;
+}
+/**
+ * Soft breaks as Markdown can hold them: never two in a row (a blank line would end the paragraph:
+ * deleting a wrapped line's words leaves its two breaks side by side) and never at the start or
+ * end, where the line break would add a blank line or be lost.
+ */
+function soleBreaks(content) {
+    if (!content?.some((n) => n.type === "softBreak"))
+        return content;
+    const out = [];
+    for (const n of content) {
+        if (n.type === "softBreak" && (out.length === 0 || out[out.length - 1].type === "softBreak" || out[out.length - 1].type === "hardBreak"))
+            continue;
+        out.push(n);
+    }
+    while (out.length && out[out.length - 1].type === "softBreak")
+        out.pop();
+    return out;
+}
+function pmInlineSpans(content) {
     const out = [];
     for (const n of content ?? []) {
         if (n.type === "variable") {
@@ -194,21 +300,24 @@ function pmInlineToTree(content) {
         }
         // text node — a link mark wraps the span in an InlineLink; consecutive
         // spans of the SAME link are grouped back into one link with children.
+        // A soft break is a line break in the text, with the formats around it.
         const linkMark = (n.marks ?? []).find((m) => m.type === "link");
-        const span = textSpanFromPm(n);
+        const spans = n.type === "softBreak"
+            ? [textSpanFromPm({ type: "text", text: "\n", marks: n.marks ?? [] })]
+            : codeSpans(textSpanFromPm(n));
         if (linkMark) {
             const href = String(linkMark.attrs?.href ?? "");
             const title = linkMark.attrs?.title == null ? undefined : String(linkMark.attrs.title);
             const prev = out[out.length - 1];
             if (prev && prev.type === "link" && prev.href === href && prev.title === title) {
-                prev.children.push(span);
+                prev.children.push(...spans);
             }
             else {
-                out.push({ type: "link", href, ...(title !== undefined ? { title } : {}), children: [span] });
+                out.push({ type: "link", href, ...(title !== undefined ? { title } : {}), children: spans });
             }
             continue;
         }
-        out.push(span);
+        out.push(...spans);
     }
     return out;
 }

package/dist/index.d.ts

@@ -11,7 +11,7 @@
  * Consumers bring their own view layer (@tiptap/react etc.). The dev
  * harness in main.tsx / index.html is not part of the published surface.
  */
-export { extensions, Callout, Variable, Conditional, Include, VarDef, DirectiveRaw, ConditionalSpan, DirectiveRawInline, DogsbayBlock, DogsbayInline, DogsbayProps, } from "./schema.js";
+export { extensions, editorExtensions, type EditorExtensionOptions, SoftBreak, Callout, Variable, Conditional, Include, VarDef, DirectiveRaw, ConditionalSpan, DirectiveRawInline, DogsbayBlock, DogsbayInline, DogsbayProps, } from "./schema.js";
 export { treeToPmDoc, pmDocToTree, treeToPmBlocks } from "./bridge.js";
 export type { PMNode, PMMark } from "./bridge.js";
 export { diffTreeToTree, diffTreeToPmDoc, diffExtensions, DiffMarks, DiffIns, DiffDel, type DiffMeta, type DiffKind, } from "./diff.js";

package/dist/index.js

@@ -11,7 +11,7 @@
  * Consumers bring their own view layer (@tiptap/react etc.). The dev
  * harness in main.tsx / index.html is not part of the published surface.
  */
-export { extensions, Callout, Variable, Conditional, Include, VarDef, DirectiveRaw, ConditionalSpan, DirectiveRawInline, DogsbayBlock, DogsbayInline, DogsbayProps, } from "./schema.js";
+export { extensions, editorExtensions, SoftBreak, Callout, Variable, Conditional, Include, VarDef, DirectiveRaw, ConditionalSpan, DirectiveRawInline, DogsbayBlock, DogsbayInline, DogsbayProps, } from "./schema.js";
 export { treeToPmDoc, pmDocToTree, treeToPmBlocks } from "./bridge.js";
 export { diffTreeToTree, diffTreeToPmDoc, diffExtensions, DiffMarks, DiffIns, DiffDel, } from "./diff.js";
 export { evaluateTest, resolveExpr, formatValue, collectDocVarDefs, } from "./directive-context.js";

package/dist/schema.d.ts

@@ -42,6 +42,11 @@ export declare const TableCell: Node<any, any>;
 /** prosemirror-tables' editing plugin + cell navigation (Tab / Shift-Tab). */
 export declare const TableEditing: Extension<any, any>;
 export declare const Callout: Node<any, any>;
+/**
+ * A soft line break kept from the source (a paragraph wrapped over several lines): drawn as the
+ * space a reader sees, written back as the line break it was (`@dogsbay/editor/block`).
+ */
+export declare const SoftBreak: Node<any, any>;
 export declare const Variable: Node<any, any>;
 export declare const Conditional: Node<any, any>;
 export declare const Include: Node<any, any>;
@@ -51,4 +56,14 @@ export declare const ConditionalSpan: Node<any, any>;
 export declare const DirectiveRawInline: Node<any, any>;
 export declare const DogsbayBlock: Node<any, any>;
 export declare const DogsbayInline: Node<any, any>;
+export interface EditorExtensionOptions {
+    /**
+     * TipTap's trailing empty paragraph (StarterKit's `TrailingNode`), so the caret can always get
+     * below the last block. On by default; the block editor turns it off, since a block shown on its
+     * page has no "below" and the writer saw an empty line under every block opened.
+     */
+    trailingNode?: boolean;
+}
+/** The editor's extensions (`extensions` is this with the defaults). */
+export declare function editorExtensions(options?: EditorExtensionOptions): (Node<any, any> | Extension<any, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any>)[];
 export declare const extensions: (Node<any, any> | Extension<any, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any>)[];

package/dist/schema.js

@@ -20,6 +20,7 @@
  */
 import { Extension, Node, mergeAttributes, callOrReturn, getExtensionField } from "@tiptap/core";
 import StarterKit from "@tiptap/starter-kit";
+import { calloutShell } from "@dogsbay/render-html/callout-markup";
 import { tableEditing, goToNextCell, isInTable, addRowAfter } from "@tiptap/pm/tables";
 export const DogsbayProps = Extension.create({
     name: "dogsbayProps",
@@ -49,6 +50,14 @@ export const DogsbayProps = Extension.create({
                     dogsbayProps: { default: null, rendered: false, keepOnSplit: false },
                 },
             },
+            {
+                // `\`x\`{minja}`: the span's build-processing opt-in (format-dogsbay-md #030), carried on
+                // the code mark so an edit elsewhere in the paragraph keeps it
+                types: ["code"],
+                attributes: {
+                    minja: { default: null, rendered: false },
+                },
+            },
         ];
     },
 });
@@ -172,10 +181,66 @@ export const Callout = Node.create({
         return { tone: { default: "note" } };
     },
     parseHTML() {
-        return [{ tag: "aside[data-callout]" }];
+        return [{ tag: "[data-callout]", contentElement: (el) => el.querySelector(":scope > div:not([data-part])") ?? el }];
+    },
+    // Drawn as the site draws a callout (render-html's markup and classes, its icon and title), so a
+    // host shows it with the site's own styles. The tone stays `data-callout` for parseHTML.
+    renderHTML({ node, HTMLAttributes }) {
+        const shell = calloutShell(String(node.attrs.tone ?? "note"));
+        return [
+            "div",
+            mergeAttributes(HTMLAttributes, { "data-callout": "", class: `${shell.className} my-4`, "data-variant": shell.variant, "data-type": shell.type, role: "note" }),
+            ["div", { "data-part": "title", class: shell.titleClass, contenteditable: "false" }, shell.label],
+            ["div", { class: shell.bodyClass }, 0],
+        ];
+    },
+    addNodeView() {
+        return ({ node, HTMLAttributes }) => {
+            const shell = calloutShell(String(node.attrs.tone ?? "note"));
+            const dom = document.createElement("div");
+            const attrs = mergeAttributes(HTMLAttributes, { "data-callout": "", class: `${shell.className} my-4`, "data-variant": shell.variant, "data-type": shell.type, role: "note" });
+            for (const [k, v] of Object.entries(attrs))
+                if (v != null && v !== false)
+                    dom.setAttribute(k, String(v));
+            // The icon as the site's first child (its classes place it: `[&>svg]:absolute`); our own
+            // constant SVG, never document text
+            if (shell.icon) {
+                const holder = document.createElement("template");
+                holder.innerHTML = shell.icon;
+                const svg = holder.content.firstElementChild;
+                if (svg)
+                    dom.appendChild(svg);
+            }
+            const title = document.createElement("div");
+            title.setAttribute("data-part", "title");
+            title.className = shell.titleClass;
+            title.contentEditable = "false";
+            title.textContent = shell.label;
+            const body = document.createElement("div");
+            body.className = shell.bodyClass;
+            dom.append(title, body);
+            return { dom, contentDOM: body };
+        };
+    },
+});
+/**
+ * A soft line break kept from the source (a paragraph wrapped over several lines): drawn as the
+ * space a reader sees, written back as the line break it was (`@dogsbay/editor/block`).
+ */
+export const SoftBreak = Node.create({
+    name: "softBreak",
+    group: "inline",
+    inline: true,
+    atom: true,
+    selectable: false,
+    parseHTML() {
+        return [{ tag: "span[data-soft-break]" }];
     },
     renderHTML({ HTMLAttributes }) {
-        return ["aside", mergeAttributes(HTMLAttributes, { "data-callout": "" }), 0];
+        return ["span", mergeAttributes(HTMLAttributes, { "data-soft-break": "" }), " "];
+    },
+    renderText() {
+        return " ";
     },
 });
 export const Variable = Node.create({
@@ -374,8 +439,12 @@ export const DogsbayInline = Node.create({
         return ["span", mergeAttributes(HTMLAttributes, { "data-dogsbay-inline": "" }), "⟨inline⟩"];
     },
 });
-export const extensions = [
-    StarterKit.configure({ underline: false }),
+/** The editor's extensions (`extensions` is this with the defaults). */
+export function editorExtensions(options = {}) {
+    return [StarterKit.configure({ underline: false, ...(options.trailingNode === false ? { trailingNode: false } : {}) }), ...SCHEMA];
+}
+const SCHEMA = [
+    SoftBreak,
     DogsbayProps,
     Table,
     TableRow,
@@ -393,3 +462,4 @@ export const extensions = [
     DogsbayBlock,
     DogsbayInline,
 ];
+export const extensions = editorExtensions();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dogsbay/editor",
-  "version": "0.2.0-beta.174",
+  "version": "0.2.0-beta.175",
   "license": "MIT",
   "type": "module",
   "description": "TipTap/ProseMirror editor for Dogsbay Markdown: schema, a lossless TreeNode ⇄ ProseMirror bridge, and the editor on one block of a page (./block)",
@@ -25,10 +25,11 @@
     "README.md"
   ],
   "dependencies": {
-    "@dogsbay/format-dogsbay-md": "0.2.0-beta.174",
-    "@dogsbay/minja": "0.2.0-beta.174",
-    "@dogsbay/tree-diff": "0.2.0-beta.174",
-    "@dogsbay/types": "0.2.0-beta.174"
+    "@dogsbay/render-html": "0.2.0-beta.175",
+    "@dogsbay/format-dogsbay-md": "0.2.0-beta.175",
+    "@dogsbay/minja": "0.2.0-beta.175",
+    "@dogsbay/tree-diff": "0.2.0-beta.175",
+    "@dogsbay/types": "0.2.0-beta.175"
   },
   "peerDependencies": {
     "@tiptap/core": "^3.27.3",