@oneuptime/common 14.0.10 → 14.0.12

package/build/dist/UI/Components/Markdown.tsx/MarkdownEditor.js

@@ -4,13 +4,18 @@ import IconProp from "../../../Types/Icon/IconProp";
 import TinyFormDocumentation from "../TinyFormDocumentation/TinyFormDocumentation";
 import { FILE_URL } from "../../Config";
 import API from "../../Utils/API/API";
+import useTranslateValue from "../../Utils/Translation";
 import ModelAPI from "../../Utils/ModelAPI/ModelAPI";
 import CommonURL from "../../../Types/API/URL";
 import MimeType from "../../../Types/File/MimeType";
 import FileModel from "../../../Models/DatabaseModels/File";
 import DOMPurify from "dompurify";
 import { htmlToMarkdown, markdownToHtml } from "./MarkdownConverters";
-import React, { useState, useRef, useEffect, } from "react";
+import { indentMarkdownLines, isInFencedCodeBlock, liftListItems, outdentMarkdownLines, sinkListItems, stripTextListMarkers, toggleMarkdownList, } from "./MarkdownListEditing";
+import MarkdownEditorHistory from "./MarkdownEditorHistory";
+import { clipboardToMarkdown } from "./MarkdownPaste";
+import { deleteSelectionForInsert, insertBlocksAtCaret, isCaretOnEmptyLine, moveCaretIntoEmptyListAhead, } from "./MarkdownVisualEditing";
+import React, { useState, useRef, useEffect, useId, } from "react";
 const MAX_IMAGE_SIZE_BYTES = 10 * 1024 * 1024; // 10MB
 const IMAGE_MIME_BY_EXTENSION = {
     png: MimeType.png,
@@ -46,6 +51,142 @@ const sanitizeHtml = (html) => {
         ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel|ftp|data|placeholder|oneuptime-uploading):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
     });
 };
+const RE_SINGLE_PARAGRAPH = /^<p>([\s\S]*)<\/p>$/;
+const RE_LINE_BREAKS = /\r\n?/g;
+const RE_SHOWN_CHARACTER = /\S/;
+const RE_BLANKS_AT_END = /[ \t]*$/;
+const RE_BLANKS_AT_START = /^[ \t]*/;
+// A list item's line, up to its marker: its indentation is group 1.
+const RE_LIST_ITEM_LINE = /^([ \t]*)(?:[-*+]|\d{1,9}[.)])(?=[ \t]|$)/;
+// A list item's line holding nothing but its marker (and a task's box).
+const RE_BARE_LIST_MARKER_LINE = /^[ \t]*(?:[-*+]|\d{1,9}[.)])(?:[ \t]+\[[ xX]\])?[ \t]*$/;
+const RE_STARTS_WITH_LIST_ITEM = /^(?:[-*+]|\d{1,9}[.)])[ \t]/;
+/*
+ * The inside of `html` when it is exactly one paragraph -- which is what
+ * markdownToHtml makes of a word, a sentence or an image -- and null for
+ * anything else.
+ */
+const singleParagraphContents = (html) => {
+    var _a;
+    const inner = (_a = html.match(RE_SINGLE_PARAGRAPH)) === null || _a === void 0 ? void 0 : _a[1];
+    if (inner === undefined || inner.includes("</p>")) {
+        return null;
+    }
+    return inner;
+};
+/*
+ * Markdown made of blocks -- a fenced code block, a list, a heading, more
+ * than one paragraph -- pasted into the middle of a line of the markdown
+ * source goes on lines of its own, with a blank line between it and the
+ * text either side of it on that line: the split the visual editor makes
+ * for a block. Put in the middle of the line as it was, a code block's
+ * closing fence had the rest of the line after it, which made it an opening
+ * fence instead -- the block never closed, and everything after it in the
+ * note rendered as code. The spaces at the split go, as in the visual
+ * editor. Returns the text to insert, having widened the textarea's
+ * selection over those spaces.
+ */
+const onLinesOfItsOwn = (textarea, markdown) => {
+    var _a, _b;
+    if (!RE_SHOWN_CHARACTER.test(markdown) ||
+        singleParagraphContents(markdownToHtml(markdown)) !== null) {
+        return markdown;
+    }
+    const value = textarea.value;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const lineStart = value.lastIndexOf("\n", start - 1) + 1;
+    const lineEndAt = value.indexOf("\n", end);
+    const lineEnd = lineEndAt === -1 ? value.length : lineEndAt;
+    const before = value.slice(lineStart, start);
+    const after = value.slice(end, lineEnd);
+    const textBefore = RE_SHOWN_CHARACTER.test(before);
+    const textAfter = RE_SHOWN_CHARACTER.test(after);
+    if (!textBefore && !textAfter) {
+        return markdown;
+    }
+    const spacesBefore = textBefore
+        ? (((_a = before.match(RE_BLANKS_AT_END)) === null || _a === void 0 ? void 0 : _a[0]) || "").length
+        : 0;
+    const spacesAfter = textAfter
+        ? (((_b = after.match(RE_BLANKS_AT_START)) === null || _b === void 0 ? void 0 : _b[0]) || "").length
+        : 0;
+    const itemLine = before.match(RE_LIST_ITEM_LINE);
+    if (itemLine && RE_STARTS_WITH_LIST_ITEM.test(markdown)) {
+        /*
+         * A list pasted on the line of a list item joins that item's list, as
+         * in the visual editor: its items go on the lines after the item, at
+         * its indentation -- or in its place when the caret sits after nothing
+         * but its marker, a "- " typed to start the list. After a blank line
+         * they were a list of their own; after the bare marker, a list nested
+         * in an empty item: "- - a", two bullets.
+         */
+        const indent = itemLine[1] || "";
+        const items = markdown
+            .split("\n")
+            .map((line) => {
+            return line ? `${indent}${line}` : line;
+        })
+            .join("\n");
+        if (RE_BARE_LIST_MARKER_LINE.test(before)) {
+            /*
+             * Only the item's marker (and task box) is before the caret. An empty
+             * item is replaced by the pasted items; an item with text keeps its
+             * own marker and task box, and the pasted items go in before it, as in
+             * the visual editor. Deciding on what is before the caret alone turned
+             * "- [x] |rolled back deploy" into a paragraph: the marker and the tick
+             * went, and the item's text was left on a line of its own.
+             */
+            textarea.setSelectionRange(lineStart, end + spacesAfter);
+            return textAfter ? `${items}\n${before}` : items;
+        }
+        textarea.setSelectionRange(start - spacesBefore, end + spacesAfter);
+        return `\n${items}${textAfter ? "\n\n" : ""}`;
+    }
+    textarea.setSelectionRange(start - spacesBefore, end + spacesAfter);
+    return `${textBefore ? "\n\n" : ""}${markdown}${textAfter ? "\n\n" : ""}`;
+};
+const RE_MARKUP = /<[a-z!/]/i;
+// The text of `html` when it holds no markup at all, else null.
+const textOfMarkupFreeHtml = (html) => {
+    if (RE_MARKUP.test(html)) {
+        return null;
+    }
+    // Only entities to decode; a <template> parses them without running anything.
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    return template.content.textContent || "";
+};
+/*
+ * Tab and Shift+Tab without other modifiers indent and outdent list items.
+ * A keypress that is still composing (an IME) is left alone.
+ */
+const isListIndentKey = (event) => {
+    return (event.key === "Tab" &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !event.altKey &&
+        !event.nativeEvent.isComposing);
+};
+/*
+ * Ctrl+Z (Cmd+Z on a Mac) is undo; Ctrl+Shift+Z, Cmd+Shift+Z and Ctrl+Y are
+ * redo. A keypress that is still composing is left alone.
+ */
+const historyStepOfKey = (event) => {
+    if (!(event.ctrlKey || event.metaKey) ||
+        event.altKey ||
+        event.nativeEvent.isComposing) {
+        return null;
+    }
+    const key = event.key.toLowerCase();
+    if (key === "z") {
+        return event.shiftKey ? "redo" : "undo";
+    }
+    if (key === "y" && !event.shiftKey) {
+        return "redo";
+    }
+    return null;
+};
 const ToolbarButton = ({ icon, title, onClick, isActive = false, }) => {
     return (React.createElement("button", { type: "button", onMouseDown: (e) => {
             /*
@@ -59,6 +200,29 @@ const ToolbarButton = ({ icon, title, onClick, isActive = false, }) => {
         React.createElement(Icon, { icon: icon, className: "h-4 w-4" })));
 };
 const MarkdownEditor = (props) => {
+    var _a, _b, _c;
+    const allowImageUpload = props.allowImageUpload !== false;
+    /*
+     * The error message is tied to the field -- in either mode -- and
+     * announced when it appears, as Input's and TextArea's are. It was a bare
+     * paragraph: a required description left empty was neither announced nor
+     * tied to the editor, so to a screen reader the form did nothing.
+     */
+    const errorId = `markdown-editor-error-${useId()}`;
+    /*
+     * The words the editor always shows of its own -- an empty field's
+     * placeholder and the heading of its formatting help -- are looked up in
+     * the page's locale, as FieldLabel's "(Optional)" is: on the public
+     * incident form, translated all round, they were the only English left.
+     * The English text is the key, and an app whose locale has no entry for
+     * it shows the English.
+     */
+    const { translateString } = useTranslateValue();
+    const visualPlaceholder = props.placeholder ||
+        ((_a = translateString("Type your content here...")) !== null && _a !== void 0 ? _a : "Type your content here...");
+    const sourcePlaceholder = props.placeholder ||
+        ((_b = translateString("Type your markdown here...")) !== null && _b !== void 0 ? _b : "Type your markdown here...");
+    const helpTitle = (_c = translateString("Formatting help")) !== null && _c !== void 0 ? _c : "Formatting help";
     const [text, setText] = useState(props.initialValue || "");
     const [mode, setMode] = useState("wysiwyg");
     const [isDraggingOver, setIsDraggingOver] = useState(false);
@@ -72,6 +236,14 @@ const MarkdownEditor = (props) => {
      * quick succession or the user keeps typing while uploading.
      */
     const textRef = useRef(props.initialValue || "");
+    /*
+     * The visual editor's own edits -- list moves, inserts made by hand --
+     * which the browser's undo stack never hears of (see
+     * MarkdownEditorHistory).
+     */
+    const [history] = useState(() => {
+        return new MarkdownEditorHistory();
+    });
     useEffect(() => {
         if (props.initialValue !== undefined &&
             props.initialValue !== textRef.current) {
@@ -79,6 +251,10 @@ const MarkdownEditor = (props) => {
             textRef.current = props.initialValue;
         }
     }, [props.initialValue]);
+    // A new editable in each mode: records about the old one's nodes are no use.
+    useEffect(() => {
+        history.clear();
+    }, [mode]);
     /*
      * Sync markdown -> contenteditable when entering WYSIWYG, when text
      * changes from outside, or after async image-upload swaps. Skip when
@@ -100,6 +276,7 @@ const MarkdownEditor = (props) => {
         const html = sanitizeHtml(markdownToHtml(text));
         if (editable.innerHTML !== html) {
             editable.innerHTML = html;
+            history.clear();
         }
     }, [mode, text]);
     const handleChange = (value) => {
@@ -120,6 +297,78 @@ const MarkdownEditor = (props) => {
             handleChange(md);
         }
     };
+    /*
+     * An edit the visual editor makes to its DOM itself, recorded so that
+     * Ctrl+Z takes it back. Returns what `edit` returns: whether it changed
+     * anything.
+     */
+    const editEditableByHand = (edit) => {
+        const editable = editableRef.current;
+        if (!editable) {
+            return false;
+        }
+        return history.record(editable, () => {
+            return edit(editable);
+        });
+    };
+    /*
+     * Undo or redo of the editor's own edits; false (and nothing done) when
+     * the last thing to undo is the browser's -- typing, say -- so the
+     * browser does it.
+     */
+    const stepEditableHistory = (step) => {
+        const editable = editableRef.current;
+        if (!editable) {
+            return false;
+        }
+        const stepped = step === "undo" ? history.undo(editable) : history.redo(editable);
+        if (stepped) {
+            syncFromEditable();
+        }
+        return stepped;
+    };
+    /*
+     * Typing, a paste the browser makes, an execCommand: each is newer
+     * history in the browser's own undo stack. The editor's own records wait
+     * behind it -- each applies again once the browser's undo has put the
+     * editor back as that edit left it -- but what they would redo is gone,
+     * as the browser's own redo is. The browser's undo and redo themselves
+     * leave both be.
+     */
+    const handleEditableInput = (event) => {
+        var _a;
+        const inputType = ((_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.inputType) || "";
+        if (inputType !== "historyUndo" && inputType !== "historyRedo") {
+            history.clearRedo();
+        }
+        syncFromEditable();
+    };
+    /*
+     * Undo and redo from the browser's Edit menu or context menu arrive with
+     * no key press, as a native beforeinput event -- which React's
+     * onBeforeInput is not -- so it is listened for on the element itself.
+     * The ref keeps the listener on the latest render's handlers.
+     */
+    const beforeInputRef = useRef(() => { });
+    beforeInputRef.current = (event) => {
+        if ((event.inputType === "historyUndo" && stepEditableHistory("undo")) ||
+            (event.inputType === "historyRedo" && stepEditableHistory("redo"))) {
+            event.preventDefault();
+        }
+    };
+    useEffect(() => {
+        const editable = editableRef.current;
+        if (mode !== "wysiwyg" || !editable) {
+            return undefined;
+        }
+        const listener = (event) => {
+            beforeInputRef.current(event);
+        };
+        editable.addEventListener("beforeinput", listener);
+        return () => {
+            editable.removeEventListener("beforeinput", listener);
+        };
+    }, [mode]);
     const insertTextAtCursor = (textToInsert) => {
         const textarea = textareaRef.current;
         const currentText = textRef.current;
@@ -140,6 +389,7 @@ const MarkdownEditor = (props) => {
         }, 0);
     };
     const insertHtmlAtCursorInEditable = (html) => {
+        var _a;
         const editable = editableRef.current;
         if (!editable) {
             return;
@@ -158,17 +408,80 @@ const MarkdownEditor = (props) => {
             syncFromEditable();
             return;
         }
-        range.deleteContents();
-        const fragment = range.createContextualFragment(html);
-        const lastNode = fragment.lastChild;
-        range.insertNode(fragment);
-        if (lastNode) {
-            const newRange = document.createRange();
-            newRange.setStartAfter(lastNode);
-            newRange.collapse(true);
+        // Chromium's caret just before a list it has just made goes into its item.
+        if (moveCaretIntoEmptyListAhead(editable, range)) {
             selection.removeAllRanges();
-            selection.addRange(newRange);
+            selection.addRange(range);
+        }
+        /*
+         * A single paragraph goes in as its contents, so text pasted into the
+         * middle of a line joins that line. Inserted whole, the <p> landed
+         * inside the paragraph the caret was in and the serializer wrote it out
+         * as three: pasting "big " into "hello world" saved
+         * "hello \n\nbig \n\nworld", and an uploading image's placeholder split
+         * its line the same way. Straight into the editor itself -- empty, or
+         * between two blocks -- the paragraph is kept.
+         */
+        const contents = range.startContainer === editable
+            ? html
+            : (_a = singleParagraphContents(html)) !== null && _a !== void 0 ? _a : html;
+        /*
+         * execCommand puts the insert on the browser's undo stack. Plain words
+         * go in with insertText, as if typed. Blocks go in with insertHTML only
+         * onto an empty line: anywhere else in a line, Chromium and Safari fold
+         * the first block into that line -- a <pre> became a monospace <span> of
+         * the paragraph, and a code block pasted after "Run:" saved as
+         * "Run:npm install" -- so there the line is split at the caret by hand
+         * and the blocks go in between its halves. Words with formatting go in
+         * by hand too: Chromium's and Firefox's insertHTML turn the spaces around
+         * an inline insert into non-breaking ones, which then ended up in the
+         * saved markdown. jsdom has no execCommand and a browser may refuse the
+         * command, so the insert by hand is the fallback as well.
+         */
+        const inline = contents !== html;
+        const plainText = inline
+            ? textOfMarkupFreeHtml(contents)
+            : null;
+        let command = null;
+        if (plainText !== null) {
+            command = "insertText";
+        }
+        else if (!inline && isCaretOnEmptyLine(editable, range)) {
+            command = "insertHTML";
+        }
+        if (command && typeof document.execCommand === "function") {
+            try {
+                if (document.execCommand(command, false, plainText !== null && plainText !== void 0 ? plainText : contents)) {
+                    syncFromEditable();
+                    return;
+                }
+            }
+            catch (_b) {
+                // Fall through to the insert by hand.
+            }
         }
+        editEditableByHand(() => {
+            deleteSelectionForInsert(editable, range);
+            const fragment = range.createContextualFragment(contents);
+            let caret = null;
+            if (inline) {
+                const lastNode = fragment.lastChild;
+                range.insertNode(fragment);
+                if (lastNode) {
+                    caret = document.createRange();
+                    caret.setStartAfter(lastNode);
+                    caret.collapse(true);
+                }
+            }
+            else {
+                caret = insertBlocksAtCaret(editable, range, fragment);
+            }
+            if (caret) {
+                selection.removeAllRanges();
+                selection.addRange(caret);
+            }
+            return true;
+        });
         syncFromEditable();
     };
     const insertMarkdownAtCursor = (md) => {
@@ -294,32 +607,141 @@ const MarkdownEditor = (props) => {
         }
         return files;
     };
+    /*
+     * Text for the source textarea. execCommand("insertText") types it the
+     * way a native paste would, so Ctrl+Z undoes it; where the browser has no
+     * such command (jsdom) it is spliced into the value instead.
+     */
+    const insertTextInTextarea = (textToInsert) => {
+        const textarea = textareaRef.current;
+        if (textarea && typeof document.execCommand === "function") {
+            textarea.focus();
+            try {
+                if (document.execCommand("insertText", false, textToInsert)) {
+                    return;
+                }
+            }
+            catch (_a) {
+                // Fall back to splicing the value.
+            }
+        }
+        insertTextAtCursor(textToInsert);
+    };
+    /*
+     * Markdown mode. Rich clipboard content (a Word list, a copied note) is
+     * converted to markdown source, and a file on the clipboard uploads as
+     * before. When the conversion gives back exactly the plain text, the
+     * browser's own paste inserts the same thing, so it is left to it.
+     */
     const handleTextareaPaste = (e) => {
-        var _a;
-        const images = extractImagesFromClipboard(((_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.items) || null);
-        if (images.length === 0) {
+        const clipboardData = e.clipboardData;
+        if (!clipboardData) {
+            return;
+        }
+        /*
+         * Inside a fenced code block the text goes in as it is, the browser's
+         * own paste (which keeps it on the undo stack) -- as in the visual
+         * editor's code blocks. Converted there, a command copied from a docs
+         * page came in as its own ``` fence, which closed the block around it,
+         * and CLI output had its "1)" and "•" lines rewritten as list items. A
+         * clipboard with no text, only an image, still uploads below.
+         */
+        const textarea = e.currentTarget;
+        if (clipboardData.getData("text/plain") &&
+            isInFencedCodeBlock(textarea.value, textarea.selectionStart)) {
+            return;
+        }
+        const images = allowImageUpload
+            ? extractImagesFromClipboard(clipboardData.items || null)
+            : [];
+        const markdown = clipboardToMarkdown(clipboardData, {
+            hasImageFiles: images.length > 0,
+        });
+        if (markdown === null) {
+            if (images.length > 0) {
+                e.preventDefault();
+                void handleImageFiles(images);
+            }
+            return;
+        }
+        const plain = (clipboardData.getData("text/plain") || "").replace(RE_LINE_BREAKS, "\n");
+        if (markdown === plain) {
             return;
         }
         e.preventDefault();
-        void handleImageFiles(images);
+        insertTextInTextarea(onLinesOfItsOwn(textarea, markdown));
+    };
+    // The code block the caret is in, if it is in one.
+    const codeBlockAtSelection = () => {
+        const editable = editableRef.current;
+        const selection = window.getSelection();
+        if (!editable || !selection || selection.rangeCount === 0) {
+            return null;
+        }
+        let node = selection.getRangeAt(0).startContainer;
+        while (node && node !== editable) {
+            if (node.nodeName.toLowerCase() === "pre") {
+                return node;
+            }
+            node = node.parentNode;
+        }
+        return null;
+    };
+    const insertPlainTextInEditable = (value) => {
+        const editable = editableRef.current;
+        const selection = window.getSelection();
+        if (!editable || !selection || selection.rangeCount === 0) {
+            return;
+        }
+        const range = selection.getRangeAt(0);
+        editEditableByHand(() => {
+            deleteSelectionForInsert(editable, range);
+            const textNode = document.createTextNode(value);
+            range.insertNode(textNode);
+            const after = document.createRange();
+            after.setStartAfter(textNode);
+            after.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(after);
+            return true;
+        });
+        syncFromEditable();
     };
+    /*
+     * Visual mode. The browser's own paste would bring the source's markup in
+     * with it -- styles, classes, elements markdown cannot hold -- so the paste
+     * is always handled here: converted to markdown (the clipboard's HTML
+     * first, so a Word or Outlook list keeps its nesting, then its plain text)
+     * and rendered back. Image files upload when there is no text to paste.
+     * Inside a code block the plain text goes in as it is.
+     */
     const handleEditablePaste = (e) => {
-        var _a, _b;
-        const images = extractImagesFromClipboard(((_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.items) || null);
-        if (images.length > 0) {
-            e.preventDefault();
-            void handleImageFiles(images);
+        const clipboardData = e.clipboardData;
+        if (!clipboardData) {
             return;
         }
-        /*
-         * Force plain-text paste so users don't import arbitrary styled HTML
-         * (which our markdown serializer can't faithfully round-trip).
-         */
-        const plain = (_b = e.clipboardData) === null || _b === void 0 ? void 0 : _b.getData("text/plain");
-        if (plain !== undefined) {
-            e.preventDefault();
-            const html = sanitizeHtml(markdownToHtml(plain));
-            insertHtmlAtCursorInEditable(html);
+        e.preventDefault();
+        if (codeBlockAtSelection()) {
+            const plain = clipboardData.getData("text/plain") || "";
+            if (plain) {
+                insertPlainTextInEditable(plain.replace(RE_LINE_BREAKS, "\n"));
+            }
+            return;
+        }
+        const images = allowImageUpload
+            ? extractImagesFromClipboard(clipboardData.items || null)
+            : [];
+        const markdown = clipboardToMarkdown(clipboardData, {
+            hasImageFiles: images.length > 0,
+        });
+        if (markdown !== null) {
+            if (markdown) {
+                insertMarkdownAtCursor(markdown);
+            }
+            return;
+        }
+        if (images.length > 0) {
+            void handleImageFiles(images);
         }
     };
     const dragHasFiles = (types) => {
@@ -339,6 +761,17 @@ const MarkdownEditor = (props) => {
             return;
         }
         e.preventDefault();
+        if (!allowImageUpload) {
+            /*
+             * Refuse the drop outright. Left to itself the browser would drop the
+             * file in anyway -- Firefox inlines an image as a data: URL -- or
+             * navigate away to it.
+             */
+            if (e.dataTransfer) {
+                e.dataTransfer.dropEffect = "none";
+            }
+            return;
+        }
         if (!isDraggingOver) {
             setIsDraggingOver(true);
         }
@@ -353,6 +786,9 @@ const MarkdownEditor = (props) => {
         }
         e.preventDefault();
         setIsDraggingOver(false);
+        if (!allowImageUpload) {
+            return;
+        }
         const fileList = ((_b = e.dataTransfer) === null || _b === void 0 ? void 0 : _b.files) || null;
         if (!fileList || fileList.length === 0) {
             return;
@@ -362,6 +798,9 @@ const MarkdownEditor = (props) => {
     };
     const handleImageButtonClick = () => {
         var _a;
+        if (!allowImageUpload) {
+            return;
+        }
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     const handleFileInputChange = (e) => {
@@ -457,8 +896,86 @@ const MarkdownEditor = (props) => {
             }, 0);
         }
     };
+    /*
+     * Puts an edit into the source textarea, selection included. Only the
+     * stretch that changed is replaced, with execCommand("insertText") where
+     * the browser has it, so Ctrl+Z undoes an indent like any typing; without
+     * it (jsdom) the value is set directly.
+     */
+    const applyTextareaEdit = (edit) => {
+        const textarea = textareaRef.current;
+        if (!textarea) {
+            return;
+        }
+        const current = textarea.value;
+        let start = 0;
+        while (start < current.length &&
+            start < edit.text.length &&
+            current.charAt(start) === edit.text.charAt(start)) {
+            start++;
+        }
+        let oldEnd = current.length;
+        let newEnd = edit.text.length;
+        while (oldEnd > start &&
+            newEnd > start &&
+            current.charAt(oldEnd - 1) === edit.text.charAt(newEnd - 1)) {
+            oldEnd--;
+            newEnd--;
+        }
+        textarea.focus();
+        let applied = false;
+        if (typeof document.execCommand === "function") {
+            textarea.setSelectionRange(start, oldEnd);
+            try {
+                applied = document.execCommand("insertText", false, edit.text.slice(start, newEnd));
+            }
+            catch (_a) {
+                applied = false;
+            }
+        }
+        if (!applied || textarea.value !== edit.text) {
+            textarea.value = edit.text;
+        }
+        if (textRef.current !== edit.text) {
+            handleChange(edit.text);
+        }
+        textarea.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+    };
+    // Runs a source edit on the textarea's text and selection; false if it changed nothing.
+    const editTextarea = (editor) => {
+        const textarea = textareaRef.current;
+        if (!textarea) {
+            return false;
+        }
+        const edit = editor(textarea.value, textarea.selectionStart, textarea.selectionEnd);
+        if (!edit) {
+            return false;
+        }
+        applyTextareaEdit(edit);
+        return true;
+    };
+    const toggleListInTextarea = (kind) => {
+        editTextarea((source, selectionStart, selectionEnd) => {
+            return toggleMarkdownList(source, selectionStart, selectionEnd, kind);
+        });
+    };
+    /*
+     * Indent or outdent the list items at the selection in the visual editor;
+     * false (and nothing changed) when the selection is not on an item that
+     * can move. The items are moved by hand, so the move is recorded for
+     * Ctrl+Z: it undid the typing before an indent and left the indent.
+     */
+    const shiftListItemsInEditable = (outdent) => {
+        const changed = editEditableByHand((editable) => {
+            return outdent ? liftListItems(editable) : sinkListItems(editable);
+        });
+        if (changed) {
+            syncFromEditable();
+        }
+        return changed;
+    };
     // WYSIWYG-mode toolbar helpers (operate on the contenteditable DOM).
-    const execEditable = (command, value) => {
+    const execEditable = (command, value, afterCommand) => {
         const editable = editableRef.current;
         if (!editable) {
             return;
@@ -475,8 +992,22 @@ const MarkdownEditor = (props) => {
         catch (_a) {
             // Ignore — older command names occasionally throw in some browsers.
         }
+        if (afterCommand) {
+            afterCommand(editable);
+        }
         syncFromEditable();
     };
+    /*
+     * The list buttons. execCommand turns the selected lines into items but
+     * keeps whatever text they started with, so a line pasted from Word as
+     * "•\tService down" showed the list's bullet and its own; the leftover
+     * markers are stripped from the items it made.
+     */
+    const makeListInEditable = (command) => {
+        execEditable(command, undefined, (editable) => {
+            stripTextListMarkers(editable);
+        });
+    };
     const wrapSelectionInEditable = (tagName, fallbackText) => {
         const editable = editableRef.current;
         if (!editable) {
@@ -492,12 +1023,15 @@ const MarkdownEditor = (props) => {
         const selected = selection.toString() || fallbackText;
         const wrapper = document.createElement(tagName);
         wrapper.textContent = selected;
-        range.deleteContents();
-        range.insertNode(wrapper);
-        const newRange = document.createRange();
-        newRange.selectNodeContents(wrapper);
-        selection.removeAllRanges();
-        selection.addRange(newRange);
+        editEditableByHand(() => {
+            deleteSelectionForInsert(editable, range);
+            range.insertNode(wrapper);
+            const newRange = document.createRange();
+            newRange.selectNodeContents(wrapper);
+            selection.removeAllRanges();
+            selection.addRange(newRange);
+            return true;
+        });
         syncFromEditable();
     };
     const insertWysiwygTaskList = () => {
@@ -523,18 +1057,50 @@ const MarkdownEditor = (props) => {
             execEditable("createLink", url);
         }
         else {
-            insertHtmlAtCursorInEditable(`<a href="${url.replace(/"/g, "&quot;")}">${url.replace(/</g, "&lt;")}</a>`);
+            /*
+             * Wrapped in a paragraph, so a link put into a line goes in as that
+             * line's own inline content (insertHtmlAtCursorInEditable unwraps a
+             * single paragraph). A bare <a> was taken for a block: it split the
+             * line, and "See " plus the link saved as two paragraphs. Into the
+             * empty editor the paragraph goes in whole.
+             */
+            insertHtmlAtCursorInEditable(`<p><a href="${url.replace(/"/g, "&quot;")}">${url.replace(/</g, "&lt;")}</a></p>`);
         }
     };
+    /*
+     * The Code Block button. As in the markdown source, the new block's
+     * placeholder is selected, so what is typed next replaces it inside the
+     * block. Left to themselves, browsers put the caret at the end of the
+     * placeholder (Chromium, Safari) or on the line below the block (Firefox).
+     * The empty line after the block (a <br> keeps it a line a caret can sit
+     * on) is where writing carries on below it.
+     */
     const insertWysiwygCodeBlock = () => {
-        insertHtmlAtCursorInEditable("<pre><code>code block</code></pre><p></p>");
+        const editable = editableRef.current;
+        if (!editable) {
+            return;
+        }
+        const existing = new Set(Array.from(editable.querySelectorAll("pre")));
+        insertHtmlAtCursorInEditable("<pre><code>code block</code></pre><p><br></p>");
+        const added = Array.from(editable.querySelectorAll("pre")).filter((pre) => {
+            return !existing.has(pre);
+        });
+        const block = added[added.length - 1];
+        const selection = window.getSelection();
+        if (!block || !selection) {
+            return;
+        }
+        const placeholder = document.createRange();
+        placeholder.selectNodeContents(block.querySelector("code") || block);
+        selection.removeAllRanges();
+        selection.addRange(placeholder);
     };
     const insertWysiwygTable = () => {
         const html = "<table><thead><tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr></thead>" +
             "<tbody>" +
             "<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>" +
             "<tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr>" +
-            "</tbody></table><p></p>";
+            "</tbody></table><p><br></p>";
         insertHtmlAtCursorInEditable(html);
     };
     const formatActions = {
@@ -582,21 +1148,39 @@ const MarkdownEditor = (props) => {
         },
         unorderedList: () => {
             if (mode === "wysiwyg") {
-                return execEditable("insertUnorderedList");
+                return makeListInEditable("insertUnorderedList");
             }
-            return insertAtLineStart("- ");
+            return toggleListInTextarea("bullet");
         },
         orderedList: () => {
             if (mode === "wysiwyg") {
-                return execEditable("insertOrderedList");
+                return makeListInEditable("insertOrderedList");
             }
-            return insertAtLineStart("1. ");
+            return toggleListInTextarea("ordered");
         },
         taskList: () => {
             if (mode === "wysiwyg") {
                 return insertWysiwygTaskList();
             }
-            return insertAtLineStart("- [ ] ");
+            return toggleListInTextarea("task");
+        },
+        indent: () => {
+            var _a;
+            if (mode === "wysiwyg") {
+                (_a = editableRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                shiftListItemsInEditable(false);
+                return;
+            }
+            editTextarea(indentMarkdownLines);
+        },
+        outdent: () => {
+            var _a;
+            if (mode === "wysiwyg") {
+                (_a = editableRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                shiftListItemsInEditable(true);
+                return;
+            }
+            editTextarea(outdentMarkdownLines);
         },
         link: () => {
             if (mode === "wysiwyg") {
@@ -656,6 +1240,16 @@ const MarkdownEditor = (props) => {
         ? "ring-2 ring-indigo-400 ring-offset-1 border-indigo-400"
         : ""}`;
     const handleEditableKeyDown = (e) => {
+        /*
+         * Ctrl+Z right after an edit the editor made itself -- a list move, an
+         * insert made by hand -- takes that edit back, and Ctrl+Shift+Z makes
+         * it again. Otherwise the key is the browser's, as always.
+         */
+        const historyStep = historyStepOfKey(e);
+        if (historyStep && stepEditableHistory(historyStep)) {
+            e.preventDefault();
+            return;
+        }
         if (e.ctrlKey || e.metaKey) {
             switch (e.key) {
                 case "b":
@@ -670,6 +1264,36 @@ const MarkdownEditor = (props) => {
                     break;
             }
         }
+        /*
+         * Tab indents a list item and Shift+Tab outdents it -- but the key is
+         * only taken when that actually moved something. On a list's first
+         * item, a top-level item, or outside a list, Tab keeps moving focus to
+         * the next field (and Shift+Tab to the previous one), so the editor is
+         * never a keyboard trap. The event is not stopped either: the note
+         * composer handles its own keys where they bubble to.
+         */
+        if (isListIndentKey(e) && shiftListItemsInEditable(e.shiftKey)) {
+            e.preventDefault();
+        }
+    };
+    const handleTextareaKeyDown = (e) => {
+        if (e.ctrlKey || e.metaKey) {
+            switch (e.key) {
+                case "b":
+                    e.preventDefault();
+                    formatActions.bold();
+                    break;
+                case "i":
+                    e.preventDefault();
+                    formatActions.italic();
+                    break;
+            }
+        }
+        // The same Tab rule as the visual editor's, on the markdown lines.
+        if (isListIndentKey(e) &&
+            editTextarea(e.shiftKey ? outdentMarkdownLines : indentMarkdownLines)) {
+            e.preventDefault();
+        }
     };
     return (React.createElement("div", { className: "relative", "data-testid": props.dataTestId },
         React.createElement("style", null, `
@@ -679,6 +1303,9 @@ const MarkdownEditor = (props) => {
         .oneuptime-wysiwyg p { margin: 0.5rem 0; }
         .oneuptime-wysiwyg ul, .oneuptime-wysiwyg ol { margin: 0.5rem 0 0.5rem 1.5rem; }
         .oneuptime-wysiwyg ul { list-style-type: disc; }
+        /* Nested bullets step through circle and square, as MarkdownViewer draws them. */
+        .oneuptime-wysiwyg ul ul, .oneuptime-wysiwyg ol ul { list-style-type: circle; }
+        .oneuptime-wysiwyg ul ul ul, .oneuptime-wysiwyg ul ol ul, .oneuptime-wysiwyg ol ul ul, .oneuptime-wysiwyg ol ol ul { list-style-type: square; }
         .oneuptime-wysiwyg ol { list-style-type: decimal; }
         .oneuptime-wysiwyg ul.task-list, .oneuptime-wysiwyg ul.task-list li { list-style: none; margin-left: 0; }
         .oneuptime-wysiwyg ul.task-list li { padding-left: 0; }
@@ -725,11 +1352,18 @@ const MarkdownEditor = (props) => {
                 React.createElement("div", { className: "flex items-center gap-1" },
                     React.createElement(ToolbarButton, { icon: IconProp.ListBullet, title: "Bullet List", onClick: formatActions.unorderedList }),
                     React.createElement(ToolbarButton, { icon: IconProp.List, title: "Numbered List", onClick: formatActions.orderedList }),
-                    React.createElement(ToolbarButton, { icon: IconProp.Check, title: "Task List", onClick: formatActions.taskList })),
+                    React.createElement(ToolbarButton, { icon: IconProp.Check, title: "Task List", onClick: formatActions.taskList }),
+                    React.createElement(ToolbarButton, { icon: IconProp.Indent, title: `Indent (${KeyboardKeyUtil.getDisplayLabel([
+                            KeyboardKey.Tab,
+                        ])})`, onClick: formatActions.indent }),
+                    React.createElement(ToolbarButton, { icon: IconProp.Outdent, title: `Outdent (${KeyboardKeyUtil.getDisplayLabel([
+                            KeyboardKey.Shift,
+                            KeyboardKey.Tab,
+                        ])})`, onClick: formatActions.outdent })),
                 React.createElement("div", { className: "w-px h-6 bg-gray-300" }),
                 React.createElement("div", { className: "flex items-center gap-1" },
                     React.createElement(ToolbarButton, { icon: IconProp.Link, title: "Link", onClick: formatActions.link }),
-                    React.createElement(ToolbarButton, { icon: IconProp.Image, title: "Image", onClick: formatActions.image }),
+                    allowImageUpload && (React.createElement(ToolbarButton, { icon: IconProp.Image, title: "Image", onClick: formatActions.image })),
                     React.createElement(ToolbarButton, { icon: IconProp.Code, title: "Code", onClick: formatActions.code })),
                 React.createElement("div", { className: "w-px h-6 bg-gray-300" }),
                 React.createElement("div", { className: "flex items-center gap-1" },
@@ -760,9 +1394,9 @@ const MarkdownEditor = (props) => {
                             ? "Switch to markdown source"
                             : "Switch to visual editor" }, mode === "wysiwyg" ? "Markdown" : "Visual")))),
         React.createElement("div", { className: "relative" },
-            React.createElement("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, className: "hidden", onChange: handleFileInputChange }),
+            allowImageUpload && (React.createElement("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, className: "hidden", onChange: handleFileInputChange })),
             mode === "wysiwyg" ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { ref: editableRef, role: "textbox", "aria-multiline": "true", "aria-labelledby": props.ariaLabelledby, contentEditable: true, suppressContentEditableWarning: true, spellCheck: props.disableSpellCheck !== true, "data-placeholder": props.placeholder || "Type your content here...", tabIndex: props.tabIndex, className: wysiwygClassName, onInput: syncFromEditable, onPaste: handleEditablePaste, onDragOver: handleDragOver, onDragEnter: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: handleEditableKeyDown, onFocus: () => {
+                React.createElement("div", { ref: editableRef, role: "textbox", "aria-multiline": "true", "aria-labelledby": props.ariaLabelledby, "aria-invalid": props.error ? "true" : undefined, "aria-describedby": props.error ? errorId : undefined, contentEditable: true, suppressContentEditableWarning: true, spellCheck: props.disableSpellCheck !== true, "data-placeholder": visualPlaceholder, tabIndex: props.tabIndex, className: wysiwygClassName, onInput: handleEditableInput, onPaste: handleEditablePaste, onDragOver: handleDragOver, onDragEnter: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onKeyDown: handleEditableKeyDown, onFocus: () => {
                         if (props.onFocus) {
                             props.onFocus();
                         }
@@ -775,7 +1409,7 @@ const MarkdownEditor = (props) => {
                     React.createElement("span", { className: "rounded-full bg-white px-3 py-1 text-sm font-medium text-indigo-700 shadow-sm" }, "Drop image to upload"))),
                 props.error && (React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" },
                     React.createElement(Icon, { icon: IconProp.ErrorSolid, className: "h-5 w-5 text-red-500" }))))) : (React.createElement(React.Fragment, null,
-                React.createElement("textarea", { ref: textareaRef, autoFocus: false, "aria-labelledby": props.ariaLabelledby, placeholder: props.placeholder || "Type your markdown here...", className: `${className} rounded-t-none min-h-32 ${isDraggingOver
+                React.createElement("textarea", { ref: textareaRef, autoFocus: false, "aria-labelledby": props.ariaLabelledby, "aria-invalid": props.error ? "true" : undefined, "aria-describedby": props.error ? errorId : undefined, placeholder: sourcePlaceholder, className: `${className} rounded-t-none min-h-32 ${isDraggingOver
                         ? "ring-2 ring-indigo-400 ring-offset-1 border-indigo-400"
                         : ""}`, value: text, spellCheck: props.disableSpellCheck !== true, onChange: (e) => {
                         handleChange(e.target.value);
@@ -787,33 +1421,44 @@ const MarkdownEditor = (props) => {
                         if (props.onBlur) {
                             props.onBlur();
                         }
-                    }, onKeyDown: (e) => {
-                        if (e.ctrlKey || e.metaKey) {
-                            switch (e.key) {
-                                case "b":
-                                    e.preventDefault();
-                                    formatActions.bold();
-                                    break;
-                                case "i":
-                                    e.preventDefault();
-                                    formatActions.italic();
-                                    break;
-                            }
-                        }
-                    }, tabIndex: props.tabIndex, rows: 10 }),
+                    }, onKeyDown: handleTextareaKeyDown, tabIndex: props.tabIndex, rows: 10 }),
                 isDraggingOver && (React.createElement("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center rounded-b-md bg-indigo-50/70" },
                     React.createElement("span", { className: "rounded-full bg-white px-3 py-1 text-sm font-medium text-indigo-700 shadow-sm" }, "Drop image to upload"))),
                 props.error && (React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3" },
                     React.createElement(Icon, { icon: IconProp.ErrorSolid, className: "h-5 w-5 text-red-500" })))))),
-        props.error && (React.createElement("p", { className: "mt-1 text-sm text-red-400" }, props.error)),
-        React.createElement(TinyFormDocumentation, { title: "Formatting help" },
+        props.error && (React.createElement("p", { id: errorId, role: "alert", className: "mt-1 text-sm text-red-400" }, props.error)),
+        React.createElement(TinyFormDocumentation, { title: helpTitle },
             React.createElement(React.Fragment, null,
                 React.createElement("div", null, "Type directly in the visual editor \u2014 use the toolbar to format."),
                 React.createElement("div", null,
                     "Switch to ",
                     React.createElement("strong", null, "Markdown"),
                     " to view or edit the raw source."),
-                React.createElement("div", null, "Tip: paste, drag & drop, or click the image button to upload screenshots inline.")))));
+                React.createElement("div", null,
+                    "In a list, press",
+                    " ",
+                    React.createElement("strong", null, KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Tab])),
+                    " ",
+                    "to indent an item and",
+                    " ",
+                    React.createElement("strong", null, KeyboardKeyUtil.getDisplayLabel([
+                        KeyboardKey.Shift,
+                        KeyboardKey.Tab,
+                    ])),
+                    " ",
+                    "to outdent it, or use the Indent and Outdent buttons. Outside a list, ",
+                    KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Tab]),
+                    " moves to the next field."),
+                React.createElement("div", null,
+                    "Pasting keeps lists, links and formatting from Word, Outlook, web pages and other notes. To paste plain text instead, press",
+                    " ",
+                    React.createElement("strong", null, KeyboardKeyUtil.getDisplayLabel([
+                        KeyboardKey.Mod,
+                        KeyboardKey.Shift,
+                        "V",
+                    ])),
+                    "."),
+                allowImageUpload && (React.createElement("div", null, "Tip: paste, drag & drop, or click the image button to upload screenshots inline."))))));
 };
 export default MarkdownEditor;
 //# sourceMappingURL=MarkdownEditor.js.map