blixify-ui-web 1.2.125 → 1.2.127

package/lib/components/input/markdown/headings.js

@@ -0,0 +1,192 @@
+"use strict";
+/**
+ * A document's headings — the outline a reader navigates by.
+ *
+ * INFO: read from the markdown, not from the rendered DOM. The editor and the
+ * static renderer draw a heading through completely different paths (tiptap
+ * nodes vs markdown-it html), and an outline built from either one would only
+ * be correct in that one. The markdown is the single thing they agree on, so it
+ * is what the outline is derived from and what both of them are then labelled
+ * against.
+ *
+ * INFO: no id is ever written INTO the markdown. Ids are slugs computed from
+ * the heading text every time, so a note saved before this existed gets an
+ * outline with no migration, and adding one changes no stored byte — the same
+ * commitment the embed's `data-view` makes by omitting itself for the default.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleBuildHeadingAnchors = exports.handleInjectHeadingIds = exports.handleParseMarkdownHeadings = exports.handleDedupeSlug = exports.handleSlugHeading = exports.MIN_OUTLINE_HEADINGS = exports.MAX_OUTLINE_LEVEL = void 0;
+exports.MAX_OUTLINE_LEVEL = 3;
+/**
+ * INFO: a document with one or two headings is not navigated, it is read. The
+ * rail would cost a column of width to say what the first screen already shows.
+ */
+exports.MIN_OUTLINE_HEADINGS = 3;
+var FENCE = /^\s{0,3}(`{3,}|~{3,})/;
+var HEADING = /^(#{1,6})\s+(.*)$/;
+/**
+ * Strips the inline markup a heading may carry, so the outline shows the words
+ * rather than the syntax around them.
+ */
+var handleCleanHeadingText = function (raw) {
+    return raw
+        // INFO: trailing #s of a closed atx heading — "## Title ##"
+        .replace(/\s+#+\s*$/, "")
+        // INFO: link and image syntax reduced to the text that was visible
+        .replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1")
+        .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+        .replace(/`([^`]*)`/g, "$1")
+        .replace(/[*_~]/g, "")
+        .replace(/<[^>]+>/g, "")
+        .replace(/\s+/g, " ")
+        .trim();
+};
+/**
+ * The anchor id for a heading's text.
+ *
+ * INFO: exported because both renderers have to arrive at the same id from the
+ * same text without talking to each other — that identity is the whole
+ * mechanism, so it lives in one function rather than being spelled twice.
+ */
+var handleSlugHeading = function (text) {
+    var slug = handleCleanHeadingText(text)
+        .toLowerCase()
+        // INFO: punctuation is REMOVED rather than letters being kept. A
+        // `\p{L}`-style whitelist needs the unicode flag, which this library cannot
+        // use at an es5 target — and matching `[a-z0-9]` instead would slug a
+        // heading in Chinese or Malay to an empty string. Full-width punctuation is
+        // listed too, since it is what a CJK heading actually carries.
+        .replace(/["'’“”!?@#$%^&*()+=[\]{}<>,.:;/\\|`~]/g, "")
+        .replace(/[，。！？：；（）【】、「」…]/g, "")
+        .replace(/\s+/g, "-")
+        .replace(/-+/g, "-")
+        .replace(/^-|-$/g, "");
+    // INFO: a heading of only punctuation would otherwise slug to "" and every
+    // such heading would share one id
+    return slug || "section";
+};
+exports.handleSlugHeading = handleSlugHeading;
+/**
+ * Makes a slug unique within one document by suffixing repeats.
+ *
+ * INFO: two "Overview" headings are ordinary in a long page. Without this they
+ * share an id, and every click on the second one jumps to the first.
+ */
+var handleDedupeSlug = function (slug, seen) {
+    var _a;
+    var count = (_a = seen.get(slug)) !== null && _a !== void 0 ? _a : 0;
+    seen.set(slug, count + 1);
+    return count === 0 ? slug : "".concat(slug, "-").concat(count + 1);
+};
+exports.handleDedupeSlug = handleDedupeSlug;
+/**
+ * Reads the outline out of a markdown document.
+ *
+ * INFO: fenced blocks are tracked and skipped, because a `# comment` inside a
+ * ```bash block and a `%% title` inside a ```mermaid one are code, not
+ * structure — a diagram-heavy page would otherwise produce an outline of its
+ * own source. The closing fence must be at least as long as the opening one,
+ * which is how a ``` block nested inside a ```` one stays inside it.
+ */
+var handleParseMarkdownHeadings = function (markdown) {
+    if (!markdown)
+        return [];
+    var headings = [];
+    var seen = new Map();
+    var fence = "";
+    for (var _i = 0, _a = markdown.split("\n"); _i < _a.length; _i++) {
+        var eachLine = _a[_i];
+        var fenceMatch = eachLine.match(FENCE);
+        if (fenceMatch) {
+            var marker = fenceMatch[1];
+            if (!fence) {
+                fence = marker;
+                continue;
+            }
+            // INFO: only a fence of the same character and at least the same length
+            // closes the block
+            if (marker[0] === fence[0] && marker.length >= fence.length)
+                fence = "";
+            continue;
+        }
+        if (fence)
+            continue;
+        var headingMatch = eachLine.match(HEADING);
+        if (!headingMatch)
+            continue;
+        var level = headingMatch[1].length;
+        if (level > exports.MAX_OUTLINE_LEVEL)
+            continue;
+        var text = handleCleanHeadingText(headingMatch[2]);
+        // INFO: "###" with nothing after it is not a section anyone can navigate to
+        if (!text)
+            continue;
+        headings.push({
+            id: (0, exports.handleDedupeSlug)((0, exports.handleSlugHeading)(text), seen),
+            level: level,
+            text: text,
+        });
+    }
+    return headings;
+};
+exports.handleParseMarkdownHeadings = handleParseMarkdownHeadings;
+/**
+ * Writes the outline's ids into rendered html, in document order.
+ *
+ * INFO: into the HTML STRING, not onto the mounted DOM. The static renderer sets
+ * its html through dangerouslySetInnerHTML, and React re-commits that html
+ * whenever it re-renders the element — which wipes every attribute added
+ * afterwards. Ids set from an effect therefore survived until the first
+ * re-render and then vanished silently, leaving an outline whose entries no
+ * longer scrolled anywhere. Being part of the html itself, these cannot be lost.
+ *
+ * INFO: the heading order is the only thing tying the two together, and it is
+ * reliable because both come from one parse of one document — the nth `<h1-3>`
+ * in the html is the nth entry in the outline. Levels deeper than the outline
+ * carry no id, which is why the pattern stops at h3.
+ */
+var handleInjectHeadingIds = function (html, headings) {
+    if (!headings.length)
+        return html;
+    var index = 0;
+    return html.replace(/<h([1-3])(\s[^>]*)?>/g, function (match, level, attrs) {
+        var heading = headings[index];
+        if (!heading)
+            return match;
+        index += 1;
+        return "<h".concat(level).concat(attrs !== null && attrs !== void 0 ? attrs : "", " id=\"").concat(heading.id, "\" data-heading-id=\"").concat(heading.id, "\">");
+    });
+};
+exports.handleInjectHeadingIds = handleInjectHeadingIds;
+/**
+ * The id a heading node carries in the editor, as a ProseMirror decoration.
+ *
+ * INFO: a decoration rather than a node attribute or a DOM write. An attribute
+ * would reach `getHTML()` — turndown's input — and be written into the saved
+ * markdown; a DOM write is undone the next time ProseMirror redraws that node.
+ * Decorations are recomputed from the document on every redraw by construction,
+ * so an anchor cannot drift out of the view or into the file.
+ */
+var handleBuildHeadingAnchors = function (doc) {
+    var anchors = [];
+    var seen = new Map();
+    doc.descendants(function (node, pos) {
+        var _a, _b, _c, _d;
+        if (((_a = node.type) === null || _a === void 0 ? void 0 : _a.name) !== "heading")
+            return;
+        var level = (_c = (_b = node.attrs) === null || _b === void 0 ? void 0 : _b.level) !== null && _c !== void 0 ? _c : 1;
+        if (level > exports.MAX_OUTLINE_LEVEL)
+            return;
+        var text = ((_d = node.textContent) !== null && _d !== void 0 ? _d : "").trim();
+        if (!text)
+            return;
+        anchors.push({
+            from: pos,
+            to: pos + node.nodeSize,
+            id: (0, exports.handleDedupeSlug)((0, exports.handleSlugHeading)(text), seen),
+        });
+    });
+    return anchors;
+};
+exports.handleBuildHeadingAnchors = handleBuildHeadingAnchors;
+//# sourceMappingURL=headings.js.map

package/lib/components/input/markdown/headings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"headings.js","sourceRoot":"","sources":["../../../../src/components/input/markdown/headings.ts"],"names":[],"mappings":"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"}

package/lib/components/input/markdown/index.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactElement } from "react";
 import { MermaidLoader } from "./mermaid";
+import { MarkdownHeading } from "./headings";
 export type EmbedView = "grid" | "list";
 export declare const handleParseEmbedView: (value?: string | null) => EmbedView;
 export interface EmbedActions {
@@ -76,6 +77,16 @@ interface Props {
      * until the supplied callback runs, so the host can confirm first.
      */
     onRequestRemove?: (spaceId: string, remove: () => void) => void;
+    /**
+     * Called with the document's headings whenever they change, for a host that
+     * renders an outline beside the editor.
+     *
+     * INFO: the headings are read from the markdown rather than from the editor's
+     * nodes, so the list a host gets here is identical to the one MarkdownStatic
+     * reports for the same document — the editor and a published page cannot show
+     * different outlines for the same note.
+     */
+    onHeadingsChange?: (headings: MarkdownHeading[]) => void;
     /**
      * Extra entries for the `/` menu, appended after the built-in formatting
      * commands. Use for actions the host app owns, such as creating a database.
@@ -100,6 +111,11 @@ interface MarkdownStaticProps {
     value: string;
     darkMode?: boolean;
     containerClassName?: string;
+    /**
+     * Called with the document's headings whenever they change, for a host that
+     * renders an outline beside the page.
+     */
+    onHeadingsChange?: (headings: MarkdownHeading[]) => void;
     lib?: {
         /**
          * Loads mermaid, e.g. `() => import("mermaid")`. When given, ```mermaid
@@ -115,7 +131,7 @@ interface MarkdownStaticProps {
  * many markdown fields stay responsive instead of freezing from 50+ ProseMirror
  * instances or a heavy re-parse.
  */
-export declare const MarkdownStatic: ({ id, label, labelExtra, subLabel, value, darkMode, containerClassName, lib, }: MarkdownStaticProps) => React.JSX.Element;
+export declare const MarkdownStatic: ({ id, label, labelExtra, subLabel, value, darkMode, containerClassName, onHeadingsChange, lib, }: MarkdownStaticProps) => React.JSX.Element;
 export declare const MarkdownInput: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<unknown>>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/components/input/markdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/markdown/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/input/markdown/index.tsx"],"names":[],"mappings":"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"}

package/lib/components/input/markdown/index.js

@@ -90,6 +90,7 @@ var TableCellsIcon_1 = __importDefault(require("@heroicons/react/24/solid/TableC
 var core_1 = require("@tiptap/core");
 var filePreview_1 = require("../../display/filePreview");
 var state_1 = require("@tiptap/pm/state");
+var view_1 = require("@tiptap/pm/view");
 var extension_image_1 = __importDefault(require("@tiptap/extension-image"));
 var extensions_1 = require("@tiptap/extensions");
 var extension_subscript_1 = __importDefault(require("@tiptap/extension-subscript"));
@@ -108,6 +109,7 @@ var turndown_1 = __importDefault(require("turndown"));
 var infoWindow_1 = require("../../advanced/infoWindow");
 var loading_1 = require("../../display/loading");
 var mermaid_1 = require("./mermaid");
+var headings_1 = require("./headings");
 var md = new markdown_it_1.default({
     html: true,
     breaks: true,
@@ -222,6 +224,17 @@ turndownService.addRule("image", {
         var alt = img.getAttribute("alt") || "";
         var src = img.getAttribute("src") || "";
         var title = img.getAttribute("title") || "";
+        var width = img.getAttribute("width") || "";
+        // INFO: markdown has no syntax for a size, so a resized image is written as
+        // html — the same route <video>, the file attachment and the space embed
+        // take, and markdown-it runs with html:true so it parses back on load.
+        // Written ONLY when a width was actually set: an image nobody has resized
+        // still serialises as ![alt](src), so every document saved before resizing
+        // existed round-trips byte-for-byte.
+        if (width) {
+            var titleAttr = title ? " title=\"".concat(title, "\"") : "";
+            return "<img src=\"".concat(src, "\" alt=\"").concat(alt, "\"").concat(titleAttr, " width=\"").concat(width, "\" />");
+        }
         if (title) {
             return "![".concat(alt, "](").concat(src, " \"").concat(title, "\")");
         }
@@ -771,6 +784,40 @@ var TrailingParagraph = core_1.Extension.create({
         ];
     },
 });
+/**
+ * Gives every h1-h3 in the editor the id its outline entry scrolls to.
+ *
+ * INFO: a view decoration, so it is recomputed from the document on every redraw
+ * and never enters the document itself. The two alternatives both fail: a node
+ * attribute reaches `getHTML()` and would be written into the saved markdown,
+ * and a DOM write is undone the next time ProseMirror redraws the heading.
+ */
+var HeadingAnchors = core_1.Extension.create({
+    name: "headingAnchors",
+    addProseMirrorPlugins: function () {
+        return [
+            new state_1.Plugin({
+                key: new state_1.PluginKey("headingAnchors"),
+                props: {
+                    // INFO: cast because the tree carries two copies of prosemirror-view —
+                    // one hoisted, one under @tiptap/pm — so the DecorationSet built from
+                    // `@tiptap/pm/view` is a different nominal type to the one tiptap's own
+                    // Plugin signature was compiled against, despite being the same class
+                    // at runtime. Importing the hoisted copy directly would fix the types
+                    // by adding an undeclared dependency, which is the worse trade.
+                    decorations: function (state) {
+                        return view_1.DecorationSet.create(state.doc, (0, headings_1.handleBuildHeadingAnchors)(state.doc).map(function (eachAnchor) {
+                            return view_1.Decoration.node(eachAnchor.from, eachAnchor.to, {
+                                id: eachAnchor.id,
+                                "data-heading-id": eachAnchor.id,
+                            });
+                        }));
+                    },
+                },
+            }),
+        ];
+    },
+});
 var SpaceEmbed = core_1.Node.create({
     name: "spaceEmbed",
     group: "block",
@@ -944,6 +991,206 @@ var DiagramCodeBlock = extension_code_block_1.default.extend({
         return (0, react_1.ReactNodeViewRenderer)(CodeBlockComponent);
     },
 });
+// INFO: below this an image is a thumbnail nobody can see the content of, and
+// dragging past it is almost always an accident
+var MIN_IMAGE_WIDTH = 80;
+/**
+ * An image with drag handles on its left and right edges.
+ *
+ * INFO: the width is previewed in local state while dragging and only committed
+ * to the node on release. Writing it on every pointermove would put one
+ * transaction per mouse move into the history — undo would take fifty presses to
+ * get back — and each one fires onUpdate, which in a host with autosave is fifty
+ * saves for one resize.
+ */
+var ResizableImageComponent = function (_a) {
+    var _b;
+    var node = _a.node, updateAttributes = _a.updateAttributes, editor = _a.editor, selected = _a.selected;
+    var _c = (0, react_2.useState)(null), preview = _c[0], setPreview = _c[1];
+    var _d = (0, react_2.useState)(false), hovered = _d[0], setHovered = _d[1];
+    var _e = (0, react_2.useState)(null), dragging = _e[0], setDragging = _e[1];
+    var imageRef = (0, react_2.useRef)(null);
+    var startRef = (0, react_2.useRef)({ x: 0, width: 0 });
+    // INFO: the pointerup handler needs the width the last move produced, and it
+    // is registered once — reading it from state would read the value from the
+    // render that registered it, which is the width before the drag started
+    var previewRef = (0, react_2.useRef)(null);
+    var _f = node.attrs, src = _f.src, alt = _f.alt, title = _f.title, width = _f.width;
+    var editable = !!(editor === null || editor === void 0 ? void 0 : editor.isEditable);
+    // INFO: the preview wins while dragging so the image tracks the pointer
+    // without the document being edited on the way
+    var shownWidth = (_b = preview !== null && preview !== void 0 ? preview : width) !== null && _b !== void 0 ? _b : null;
+    (0, react_2.useEffect)(function () {
+        if (!dragging)
+            return;
+        return handleObserveDrag();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dragging]);
+    var handleObserveDrag = function () {
+        var edge = dragging;
+        var handleMove = function (event) {
+            var _a, _b, _c;
+            var delta = event.clientX - startRef.current.x;
+            // INFO: dragging the left handle outward is dragging left, so the sign
+            // flips — the alternative is a handle that shrinks when pulled away
+            var next = startRef.current.width + (edge === "left" ? -delta : delta);
+            // INFO: an event that carries no coordinate makes this NaN, and NaN is
+            // truthy enough to be stored and falsy enough to render as no width at
+            // all — so the image would silently lose the size it already had. There is
+            // nothing to resize to without a coordinate, so the move is ignored.
+            if (!Number.isFinite(next))
+                return;
+            // INFO: capped at the width of the COLUMN the image sits in, because a
+            // wider image would be clipped by the page with no handle left to drag it
+            // back. Measured from the editor element, not from the node view wrapper:
+            // the wrapper is `fit-content` so the selection outline hugs the image,
+            // which means measuring it caps the image at its own current width — an
+            // image could then be shrunk but never grown again. A container that
+            // cannot be measured is no reason to refuse the resize.
+            var column = (_c = (_b = (_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.closest(".ProseMirror")) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0;
+            var max = column > 0 ? column : Number.MAX_SAFE_INTEGER;
+            var resolved = Math.round(Math.max(MIN_IMAGE_WIDTH, Math.min(next, max)));
+            previewRef.current = resolved;
+            setPreview(resolved);
+        };
+        /**
+         * INFO: the single point where the document is edited. Committing here
+         * rather than from the effect's cleanup keeps it out of a state updater —
+         * React may run an updater more than once, and a write to the document is
+         * not something that may happen twice.
+         */
+        var handleUp = function () {
+            var resolved = previewRef.current;
+            previewRef.current = null;
+            setDragging(null);
+            setPreview(null);
+            if (resolved !== null && resolved !== width)
+                updateAttributes({ width: resolved });
+        };
+        window.addEventListener("pointermove", handleMove);
+        window.addEventListener("pointerup", handleUp);
+        window.addEventListener("pointercancel", handleUp);
+        return function () {
+            window.removeEventListener("pointermove", handleMove);
+            window.removeEventListener("pointerup", handleUp);
+            window.removeEventListener("pointercancel", handleUp);
+        };
+    };
+    var handleStartDrag = function (edge) { return function (event) {
+        var _a, _b, _c, _d;
+        if (!editable)
+            return;
+        // INFO: capture phase, and propagation stopped. ProseMirror handles pointer
+        // events on the editor element to move the selection and to drag a node
+        // around the document — an image IS draggable — and its listener sits on an
+        // ancestor of this handle, so a bubble-phase handler never runs: the drag
+        // silently did nothing in a real browser while passing in jsdom, where no
+        // editor view competes for the event.
+        event.preventDefault();
+        event.stopPropagation();
+        // INFO: on a touch screen the finger leaves the 6px handle almost at once,
+        // and without capture every later move goes to whatever is underneath — the
+        // drag appeared to stick after a few pixels. Capture keeps the whole stream
+        // coming here until release.
+        try {
+            (_b = (_a = event.currentTarget) === null || _a === void 0 ? void 0 : _a.setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, event.pointerId);
+        }
+        catch (err) {
+            // INFO: a mouse event carries no pointerId in every browser; the drag
+            // works from the window listeners regardless
+        }
+        startRef.current = {
+            x: event.clientX,
+            width: (_d = (_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().width) !== null && _d !== void 0 ? _d : 0,
+        };
+        setDragging(edge);
+    }; };
+    var renderHandle = function (edge) { return (react_2.default.createElement("div", { role: "presentation", "data-testid": "image-resize-".concat(edge), onPointerDownCapture: handleStartDrag(edge), 
+        // INFO: the editor must not treat a grab of the handle as a text selection
+        // or a node drag either, and it listens for mousedown as well
+        onMouseDownCapture: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }, draggable: false, 
+        // INFO: the hit area is far larger than the bar it draws. A 6px target is
+        // reachable with a mouse and not with a thumb, which is most of why
+        // resizing felt unresponsive on a phone rather than anything in the maths.
+        className: "absolute ".concat(edge === "left" ? "-left-1" : "-right-1", " top-1/2 flex h-16 w-8 -translate-y-1/2 cursor-ew-resize items-center justify-center"), 
+        // INFO: touch-action none is what makes a touch drag possible at all —
+        // otherwise the browser claims the gesture as a scroll and cancels the
+        // pointer stream after the first few pixels, which reads as the handle
+        // being unresponsive
+        style: { touchAction: "none" } },
+        react_2.default.createElement("div", { className: "h-10 w-1.5 rounded-full bg-white/90 shadow ring-1 ring-gray-900/20" }))); };
+    /**
+     * INFO: a double click returns the image to its natural width by clearing the
+     * attribute rather than measuring one — so it goes back to serialising as
+     * plain `![alt](src)`, exactly as it did before it was ever resized.
+     */
+    var handleResetWidth = function () {
+        if (!editable || !width)
+            return;
+        updateAttributes({ width: null });
+    };
+    var showHandles = editable && (hovered || selected || !!dragging);
+    return (react_2.default.createElement(react_1.NodeViewWrapper, { className: "my-4", 
+        // INFO: the selection outline and the handles sit on a box the size of the
+        // image, not the width of the line, so they do not float away from it
+        style: { width: "fit-content", maxWidth: "100%" }, onMouseEnter: function () { return setHovered(true); }, onMouseLeave: function () { return setHovered(false); }, 
+        // INFO: a touch screen has no hover, so a tap has to be what reveals the
+        // handles. ProseMirror also selects the node on tap, but only once the
+        // editor has focus — relying on that alone left an image on a phone with
+        // no handles at all on first touch.
+        onPointerDown: function (event) {
+            if (event.pointerType !== "mouse")
+                setHovered(true);
+        } },
+        react_2.default.createElement("div", { className: "relative inline-block max-w-full leading-none" },
+            react_2.default.createElement("img", { ref: imageRef, src: src, alt: alt !== null && alt !== void 0 ? alt : "", title: title !== null && title !== void 0 ? title : undefined, draggable: false, onDoubleClick: handleResetWidth, className: "block h-auto max-w-full rounded ".concat(selected ? "ring-2 ring-primary-500" : ""), style: {
+                    // INFO: no width attribute means the image draws at its own size,
+                    // capped the way it always was
+                    width: shownWidth ? "".concat(shownWidth, "px") : undefined,
+                    maxWidth: shownWidth ? "100%" : "600px",
+                    // INFO: the browser would otherwise keep showing the resize cursor
+                    // and the pointer could slip onto the image mid-drag
+                    pointerEvents: dragging ? "none" : undefined,
+                } }),
+            showHandles && renderHandle("left"),
+            showHandles && renderHandle("right"))));
+};
+/**
+ * INFO: only a width is stored, never a height — the image keeps its own aspect
+ * ratio, which is what makes a one-axis handle enough and makes it impossible to
+ * save a distorted image.
+ */
+var ResizableImage = extension_image_1.default.extend({
+    addAttributes: function () {
+        var _a;
+        return __assign(__assign({}, (_a = this.parent) === null || _a === void 0 ? void 0 : _a.call(this)), { width: {
+                default: null,
+                parseHTML: function (element) {
+                    var _a, _b;
+                    var attr = element.getAttribute("width");
+                    if (attr && !Number.isNaN(Number(attr)))
+                        return Number(attr);
+                    // INFO: a document written by an older editor carries the size in the
+                    // inline style instead, so it is read back rather than being lost
+                    var style = (_b = (_a = element.style) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : "";
+                    var match = style.match(/^(\d+(?:\.\d+)?)px$/);
+                    return match ? Math.round(Number(match[1])) : null;
+                },
+                // INFO: the attribute, not a style — this is what turndown reads to
+                // decide between html and `![alt](src)`, and what a browser honours when
+                // the published page sets the html raw
+                renderHTML: function (attributes) {
+                    return attributes.width ? { width: attributes.width } : {};
+                },
+            } });
+    },
+    addNodeView: function () {
+        return (0, react_1.ReactNodeViewRenderer)(ResizableImageComponent);
+    },
+});
 // Slash command items
 var slashCommands = [
     {
@@ -1061,7 +1308,7 @@ var SlashMenuList = function (_a) {
         react_2.default.createElement("span", { className: "text-sm ".concat(darkMode ? "text-gray-200" : "text-gray-700") }, item.label))); })) : (react_2.default.createElement("div", { className: "px-4 py-2 text-sm text-gray-500" }, "No results"))));
 };
 var MarkdownInputContent = function (_a) {
-    var innerRef = _a.innerRef, id = _a.id, value = _a.value, label = _a.label, subLabel = _a.subLabel, labelExtra = _a.labelExtra, infoElement = _a.infoElement, placeholder = _a.placeholder, optional = _a.optional, disabled = _a.disabled, containerClassName = _a.containerClassName, heightClassName = _a.heightClassName, borderless = _a.borderless, onChange = _a.onChange, compress = _a.compress, lib = _a.lib, uploadEndpoint = _a.uploadEndpoint, enableImageUpload = _a.enableImageUpload, enableVideoUpload = _a.enableVideoUpload, enableFileUpload = _a.enableFileUpload, darkMode = _a.darkMode, readOnly = _a.readOnly, customElement = _a.customElement, renderEmbed = _a.renderEmbed, onRequestRemove = _a.onRequestRemove, customCommands = _a.customCommands;
+    var innerRef = _a.innerRef, id = _a.id, value = _a.value, label = _a.label, subLabel = _a.subLabel, labelExtra = _a.labelExtra, infoElement = _a.infoElement, placeholder = _a.placeholder, optional = _a.optional, disabled = _a.disabled, containerClassName = _a.containerClassName, heightClassName = _a.heightClassName, borderless = _a.borderless, onChange = _a.onChange, compress = _a.compress, lib = _a.lib, uploadEndpoint = _a.uploadEndpoint, enableImageUpload = _a.enableImageUpload, enableVideoUpload = _a.enableVideoUpload, enableFileUpload = _a.enableFileUpload, darkMode = _a.darkMode, readOnly = _a.readOnly, customElement = _a.customElement, renderEmbed = _a.renderEmbed, onRequestRemove = _a.onRequestRemove, onHeadingsChange = _a.onHeadingsChange, customCommands = _a.customCommands;
     var _b = (0, react_2.useState)(""), error = _b[0], setError = _b[1];
     var _c = (0, react_2.useState)(false), showTableMenu = _c[0], setShowTableMenu = _c[1];
     var _d = (0, react_2.useState)(3), tableCols = _d[0], setTableCols = _d[1];
@@ -1228,6 +1475,7 @@ var MarkdownInputContent = function (_a) {
             extension_list_1.TaskItem.configure({
                 nested: true,
             }),
+            HeadingAnchors,
             SpaceEmbed.configure({
                 getRenderEmbed: function () { return renderEmbedRef.current; },
                 getOnRequestRemove: function () { return onRequestRemoveRef.current; },
@@ -1240,7 +1488,10 @@ var MarkdownInputContent = function (_a) {
             extension_table_1.TableRow,
             extension_table_1.TableHeader,
             extension_table_1.TableCell,
-            extension_image_1.default.configure({
+            // INFO: the same image node with drag handles. The style stays for the
+            // html path — getHTML() is turndown's input, and a document opened by
+            // anything that renders that html directly still gets the 600px cap.
+            ResizableImage.configure({
                 inline: false,
                 allowBase64: true,
                 HTMLAttributes: {
@@ -1763,6 +2014,18 @@ var MarkdownInputContent = function (_a) {
             }
         }
     }, [value, editor, pendingImagesCount]);
+    /**
+     * INFO: the outline of the document being edited. The ids the headings carry
+     * in the view are produced by the HeadingAnchors plugin from the same slug
+     * function, so an entry here and the anchor it scrolls to cannot disagree.
+     */
+    var headings = (0, react_2.useMemo)(function () { return (0, headings_1.handleParseMarkdownHeadings)(value); }, [value]);
+    var onHeadingsChangeRef = (0, react_2.useRef)(onHeadingsChange);
+    onHeadingsChangeRef.current = onHeadingsChange;
+    (0, react_2.useEffect)(function () {
+        var _a;
+        (_a = onHeadingsChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onHeadingsChangeRef, headings);
+    }, [headings]);
     (0, react_2.useImperativeHandle)(innerRef, function () {
         var methods = {
             handleSubmit: function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -2152,7 +2415,7 @@ var MarkdownInputContent = function (_a) {
  * instances or a heavy re-parse.
  */
 var MarkdownStatic = function (_a) {
-    var id = _a.id, label = _a.label, labelExtra = _a.labelExtra, subLabel = _a.subLabel, value = _a.value, darkMode = _a.darkMode, containerClassName = _a.containerClassName, lib = _a.lib;
+    var id = _a.id, label = _a.label, labelExtra = _a.labelExtra, subLabel = _a.subLabel, value = _a.value, darkMode = _a.darkMode, containerClassName = _a.containerClassName, onHeadingsChange = _a.onHeadingsChange, lib = _a.lib;
     var contentRef = (0, react_2.useRef)(null);
     var labelColor = darkMode ? "text-white" : "text-gray-700";
     var subColor = darkMode ? "text-gray-300" : "text-gray-500";
@@ -2178,9 +2441,17 @@ var MarkdownStatic = function (_a) {
     };
     // INFO: markdown-it is fast (~ms/field); memoize on value so a read view with
     // many fields never re-parses on re-render — the source of the repeated freeze.
-    var html = (0, react_2.useMemo)(function () { return (value ? handleRenderAttachments(md.render(value)) : ""); }, 
+    var headings = (0, react_2.useMemo)(function () { return (0, headings_1.handleParseMarkdownHeadings)(value); }, [value]);
+    var html = (0, react_2.useMemo)(function () {
+        return value
+            ? // INFO: the ids go into the html here, not onto the DOM afterwards —
+                // React re-commits this string on re-render and would wipe anything
+                // added to the mounted nodes
+                (0, headings_1.handleInjectHeadingIds)(handleRenderAttachments(md.render(value)), headings)
+            : "";
+    }, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [value]);
+    [value, headings]);
     // INFO: the html is set raw, so diagrams are drawn over the mounted DOM once
     // it matches this value. A document with no mermaid block never loads mermaid.
     var mermaidLoader = lib === null || lib === void 0 ? void 0 : lib.mermaid;
@@ -2189,6 +2460,17 @@ var MarkdownStatic = function (_a) {
             return;
         (0, mermaid_1.handleRenderMermaidBlocks)(contentRef.current, mermaidLoader);
     }, [html, mermaidLoader]);
+    /**
+     * INFO: the same outline the editor reports, from the same function — a
+     * published page and the note it was published from cannot list different
+     * sections.
+     */
+    var onHeadingsChangeRef = (0, react_2.useRef)(onHeadingsChange);
+    onHeadingsChangeRef.current = onHeadingsChange;
+    (0, react_2.useEffect)(function () {
+        var _a;
+        (_a = onHeadingsChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onHeadingsChangeRef, headings);
+    }, [headings]);
     return (react_2.default.createElement("div", { className: defaultClassName },
         react_2.default.createElement("div", { className: "flex flex-col" },
             react_2.default.createElement("label", { className: "block text-sm font-medium ".concat(labelColor) },