blixify-ui-web 1.2.126 → 1.2.128

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)((0, headings_1.handleCapImages)(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) },