@oneuptime/common 14.0.10 → 14.0.11

package/UI/Components/Markdown.tsx/MarkdownEditor.tsx

@@ -4,6 +4,7 @@ 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 HTTPResponse from "../../../Types/API/HTTPResponse";
@@ -11,12 +12,32 @@ import MimeType from "../../../Types/File/MimeType";
 import FileModel from "../../../Models/DatabaseModels/File";
 import DOMPurify from "dompurify";
 import { htmlToMarkdown, markdownToHtml } from "./MarkdownConverters";
+import {
+  indentMarkdownLines,
+  isInFencedCodeBlock,
+  liftListItems,
+  MarkdownListKind,
+  MarkdownTextEdit,
+  outdentMarkdownLines,
+  sinkListItems,
+  stripTextListMarkers,
+  toggleMarkdownList,
+} from "./MarkdownListEditing";
+import MarkdownEditorHistory from "./MarkdownEditorHistory";
+import { clipboardToMarkdown } from "./MarkdownPaste";
+import {
+  deleteSelectionForInsert,
+  insertBlocksAtCaret,
+  isCaretOnEmptyLine,
+  moveCaretIntoEmptyListAhead,
+} from "./MarkdownVisualEditing";
 import React, {
   FunctionComponent,
   ReactElement,
   useState,
   useRef,
   useEffect,
+  useId,
 } from "react";
 
 export interface ComponentProps {
@@ -32,6 +53,13 @@ export interface ComponentProps {
   disableSpellCheck?: boolean | undefined;
   dataTestId?: string | undefined;
   ariaLabelledby?: string | undefined;
+  /*
+   * Default: true. Inline images upload to the File API, which needs a
+   * signed-in user, so a form open to anyone (no OneUptime account) sets
+   * this to false: the Image button is hidden and pasted or dropped image
+   * files are ignored rather than failing to upload.
+   */
+  allowImageUpload?: boolean | undefined;
 }
 
 type EditorMode = "wysiwyg" | "markdown";
@@ -77,6 +105,175 @@ const sanitizeHtml: (html: string) => string = (html: string): string => {
   });
 };
 
+const RE_SINGLE_PARAGRAPH: RegExp = /^<p>([\s\S]*)<\/p>$/;
+const RE_LINE_BREAKS: RegExp = /\r\n?/g;
+const RE_SHOWN_CHARACTER: RegExp = /\S/;
+const RE_BLANKS_AT_END: RegExp = /[ \t]*$/;
+const RE_BLANKS_AT_START: RegExp = /^[ \t]*/;
+// A list item's line, up to its marker: its indentation is group 1.
+const RE_LIST_ITEM_LINE: RegExp = /^([ \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: RegExp =
+  /^[ \t]*(?:[-*+]|\d{1,9}[.)])(?:[ \t]+\[[ xX]\])?[ \t]*$/;
+const RE_STARTS_WITH_LIST_ITEM: RegExp = /^(?:[-*+]|\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: string) => string | null = (
+  html: string,
+): string | null => {
+  const inner: string | undefined = html.match(RE_SINGLE_PARAGRAPH)?.[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: HTMLTextAreaElement,
+  markdown: string,
+) => string = (textarea: HTMLTextAreaElement, markdown: string): string => {
+  if (
+    !RE_SHOWN_CHARACTER.test(markdown) ||
+    singleParagraphContents(markdownToHtml(markdown)) !== null
+  ) {
+    return markdown;
+  }
+  const value: string = textarea.value;
+  const start: number = textarea.selectionStart;
+  const end: number = textarea.selectionEnd;
+  const lineStart: number = value.lastIndexOf("\n", start - 1) + 1;
+  const lineEndAt: number = value.indexOf("\n", end);
+  const lineEnd: number = lineEndAt === -1 ? value.length : lineEndAt;
+  const before: string = value.slice(lineStart, start);
+  const after: string = value.slice(end, lineEnd);
+  const textBefore: boolean = RE_SHOWN_CHARACTER.test(before);
+  const textAfter: boolean = RE_SHOWN_CHARACTER.test(after);
+  if (!textBefore && !textAfter) {
+    return markdown;
+  }
+  const spacesBefore: number = textBefore
+    ? (before.match(RE_BLANKS_AT_END)?.[0] || "").length
+    : 0;
+  const spacesAfter: number = textAfter
+    ? (after.match(RE_BLANKS_AT_START)?.[0] || "").length
+    : 0;
+  const itemLine: RegExpMatchArray | null = 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: string = itemLine[1] || "";
+    const items: string = markdown
+      .split("\n")
+      .map((line: string): string => {
+        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: RegExp = /<[a-z!/]/i;
+
+// The text of `html` when it holds no markup at all, else null.
+const textOfMarkupFreeHtml: (html: string) => string | null = (
+  html: string,
+): string | null => {
+  if (RE_MARKUP.test(html)) {
+    return null;
+  }
+  // Only entities to decode; a <template> parses them without running anything.
+  const template: HTMLTemplateElement = 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: React.KeyboardEvent<HTMLElement>) => boolean = (
+  event: React.KeyboardEvent<HTMLElement>,
+): boolean => {
+  return (
+    event.key === "Tab" &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.altKey &&
+    !event.nativeEvent.isComposing
+  );
+};
+
+type HistoryStep = "undo" | "redo";
+
+/*
+ * 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: React.KeyboardEvent<HTMLElement>,
+) => HistoryStep | null = (
+  event: React.KeyboardEvent<HTMLElement>,
+): HistoryStep | null => {
+  if (
+    !(event.ctrlKey || event.metaKey) ||
+    event.altKey ||
+    event.nativeEvent.isComposing
+  ) {
+    return null;
+  }
+  const key: string = event.key.toLowerCase();
+  if (key === "z") {
+    return event.shiftKey ? "redo" : "undo";
+  }
+  if (key === "y" && !event.shiftKey) {
+    return "redo";
+  }
+  return null;
+};
+
+type MarkdownTextEditor = (
+  text: string,
+  selectionStart: number,
+  selectionEnd: number,
+) => MarkdownTextEdit | null;
+
 interface ToolbarButtonProps {
   icon: IconProp;
   title: string;
@@ -116,6 +313,33 @@ const ToolbarButton: FunctionComponent<ToolbarButtonProps> = ({
 const MarkdownEditor: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const allowImageUpload: boolean = 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: string = `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: string =
+    props.placeholder ||
+    (translateString("Type your content here...") ??
+      "Type your content here...");
+  const sourcePlaceholder: string =
+    props.placeholder ||
+    (translateString("Type your markdown here...") ??
+      "Type your markdown here...");
+  const helpTitle: string =
+    translateString("Formatting help") ?? "Formatting help";
   const [text, setText] = useState<string>(props.initialValue || "");
   const [mode, setMode] = useState<EditorMode>("wysiwyg");
   const [isDraggingOver, setIsDraggingOver] = useState<boolean>(false);
@@ -134,6 +358,16 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
   const textRef: React.MutableRefObject<string> = useRef<string>(
     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<MarkdownEditorHistory>(
+    (): MarkdownEditorHistory => {
+      return new MarkdownEditorHistory();
+    },
+  );
 
   useEffect(() => {
     if (
@@ -145,6 +379,11 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     }
   }, [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
@@ -168,6 +407,7 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     const html: string = sanitizeHtml(markdownToHtml(text));
     if (editable.innerHTML !== html) {
       editable.innerHTML = html;
+      history.clear();
     }
   }, [mode, text]);
 
@@ -191,6 +431,92 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     }
   };
 
+  /*
+   * 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: (editable: HTMLDivElement) => boolean,
+  ) => boolean = (edit: (editable: HTMLDivElement) => boolean): boolean => {
+    const editable: HTMLDivElement | null = editableRef.current;
+    if (!editable) {
+      return false;
+    }
+    return history.record(editable, (): boolean => {
+      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: HistoryStep) => boolean = (
+    step: HistoryStep,
+  ): boolean => {
+    const editable: HTMLDivElement | null = editableRef.current;
+    if (!editable) {
+      return false;
+    }
+    const stepped: boolean =
+      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: React.FormEvent<HTMLDivElement>,
+  ) => void = (event: React.FormEvent<HTMLDivElement>): void => {
+    const inputType: string =
+      (event.nativeEvent as InputEvent | undefined)?.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: React.MutableRefObject<(event: InputEvent) => void> =
+    useRef<(event: InputEvent) => void>((): void => {});
+  beforeInputRef.current = (event: InputEvent): void => {
+    if (
+      (event.inputType === "historyUndo" && stepEditableHistory("undo")) ||
+      (event.inputType === "historyRedo" && stepEditableHistory("redo"))
+    ) {
+      event.preventDefault();
+    }
+  };
+  useEffect(() => {
+    const editable: HTMLDivElement | null = editableRef.current;
+    if (mode !== "wysiwyg" || !editable) {
+      return undefined;
+    }
+    const listener: (event: Event) => void = (event: Event): void => {
+      beforeInputRef.current(event as InputEvent);
+    };
+    editable.addEventListener("beforeinput", listener);
+    return () => {
+      editable.removeEventListener("beforeinput", listener);
+    };
+  }, [mode]);
+
   const insertTextAtCursor: (textToInsert: string) => void = (
     textToInsert: string,
   ): void => {
@@ -235,17 +561,79 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
       syncFromEditable();
       return;
     }
-    range.deleteContents();
-    const fragment: DocumentFragment = range.createContextualFragment(html);
-    const lastNode: ChildNode | null = fragment.lastChild;
-    range.insertNode(fragment);
-    if (lastNode) {
-      const newRange: Range = 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: string =
+      range.startContainer === editable
+        ? html
+        : singleParagraphContents(html) ?? 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: boolean = contents !== html;
+    const plainText: string | null = inline
+      ? textOfMarkupFreeHtml(contents)
+      : null;
+    let command: string | null = 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 ?? contents)) {
+          syncFromEditable();
+          return;
+        }
+      } catch {
+        // Fall through to the insert by hand.
+      }
+    }
+    editEditableByHand((): boolean => {
+      deleteSelectionForInsert(editable, range);
+      const fragment: DocumentFragment =
+        range.createContextualFragment(contents);
+      let caret: Range | null = null;
+      if (inline) {
+        const lastNode: ChildNode | null = 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();
   };
 
@@ -406,39 +794,158 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     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: string) => void = (
+    textToInsert: string,
+  ): void => {
+    const textarea: HTMLTextAreaElement | null = textareaRef.current;
+    if (textarea && typeof document.execCommand === "function") {
+      textarea.focus();
+      try {
+        if (document.execCommand("insertText", false, textToInsert)) {
+          return;
+        }
+      } catch {
+        // 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: React.ClipboardEvent<HTMLTextAreaElement>,
   ) => void = (e: React.ClipboardEvent<HTMLTextAreaElement>): void => {
-    const images: Array<File> = extractImagesFromClipboard(
-      e.clipboardData?.items || null,
+    const clipboardData: DataTransfer | null = 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: HTMLTextAreaElement = e.currentTarget;
+    if (
+      clipboardData.getData("text/plain") &&
+      isInFencedCodeBlock(textarea.value, textarea.selectionStart)
+    ) {
+      return;
+    }
+    const images: Array<File> = allowImageUpload
+      ? extractImagesFromClipboard(clipboardData.items || null)
+      : [];
+    const markdown: string | null = clipboardToMarkdown(clipboardData, {
+      hasImageFiles: images.length > 0,
+    });
+    if (markdown === null) {
+      if (images.length > 0) {
+        e.preventDefault();
+        void handleImageFiles(images);
+      }
+      return;
+    }
+    const plain: string = (clipboardData.getData("text/plain") || "").replace(
+      RE_LINE_BREAKS,
+      "\n",
     );
-    if (images.length === 0) {
+    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: () => HTMLElement | null =
+    (): HTMLElement | null => {
+      const editable: HTMLDivElement | null = editableRef.current;
+      const selection: Selection | null = window.getSelection();
+      if (!editable || !selection || selection.rangeCount === 0) {
+        return null;
+      }
+      let node: Node | null = selection.getRangeAt(0).startContainer;
+      while (node && node !== editable) {
+        if (node.nodeName.toLowerCase() === "pre") {
+          return node as HTMLElement;
+        }
+        node = node.parentNode;
+      }
+      return null;
+    };
+
+  const insertPlainTextInEditable: (value: string) => void = (
+    value: string,
+  ): void => {
+    const editable: HTMLDivElement | null = editableRef.current;
+    const selection: Selection | null = window.getSelection();
+    if (!editable || !selection || selection.rangeCount === 0) {
+      return;
+    }
+    const range: Range = selection.getRangeAt(0);
+    editEditableByHand((): boolean => {
+      deleteSelectionForInsert(editable, range);
+      const textNode: Text = document.createTextNode(value);
+      range.insertNode(textNode);
+      const after: Range = 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: React.ClipboardEvent<HTMLDivElement>,
   ) => void = (e: React.ClipboardEvent<HTMLDivElement>): void => {
-    const images: Array<File> = extractImagesFromClipboard(
-      e.clipboardData?.items || null,
-    );
-    if (images.length > 0) {
-      e.preventDefault();
-      void handleImageFiles(images);
+    const clipboardData: DataTransfer | null = 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: string | undefined = e.clipboardData?.getData("text/plain");
-    if (plain !== undefined) {
-      e.preventDefault();
-      const html: string = sanitizeHtml(markdownToHtml(plain));
-      insertHtmlAtCursorInEditable(html);
+    e.preventDefault();
+    if (codeBlockAtSelection()) {
+      const plain: string = clipboardData.getData("text/plain") || "";
+      if (plain) {
+        insertPlainTextInEditable(plain.replace(RE_LINE_BREAKS, "\n"));
+      }
+      return;
+    }
+    const images: Array<File> = allowImageUpload
+      ? extractImagesFromClipboard(clipboardData.items || null)
+      : [];
+    const markdown: string | null = clipboardToMarkdown(clipboardData, {
+      hasImageFiles: images.length > 0,
+    });
+    if (markdown !== null) {
+      if (markdown) {
+        insertMarkdownAtCursor(markdown);
+      }
+      return;
+    }
+    if (images.length > 0) {
+      void handleImageFiles(images);
     }
   };
 
@@ -463,6 +970,17 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
       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);
     }
@@ -482,6 +1000,9 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     }
     e.preventDefault();
     setIsDraggingOver(false);
+    if (!allowImageUpload) {
+      return;
+    }
     const fileList: FileList | null = e.dataTransfer?.files || null;
     if (!fileList || fileList.length === 0) {
       return;
@@ -491,6 +1012,9 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
   };
 
   const handleImageButtonClick: () => void = (): void => {
+    if (!allowImageUpload) {
+      return;
+    }
     fileInputRef.current?.click();
   };
 
@@ -627,10 +1151,120 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     }
   };
 
+  /*
+   * 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: MarkdownTextEdit) => void = (
+    edit: MarkdownTextEdit,
+  ): void => {
+    const textarea: HTMLTextAreaElement | null = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+    const current: string = textarea.value;
+    let start: number = 0;
+    while (
+      start < current.length &&
+      start < edit.text.length &&
+      current.charAt(start) === edit.text.charAt(start)
+    ) {
+      start++;
+    }
+    let oldEnd: number = current.length;
+    let newEnd: number = edit.text.length;
+    while (
+      oldEnd > start &&
+      newEnd > start &&
+      current.charAt(oldEnd - 1) === edit.text.charAt(newEnd - 1)
+    ) {
+      oldEnd--;
+      newEnd--;
+    }
+    textarea.focus();
+    let applied: boolean = false;
+    if (typeof document.execCommand === "function") {
+      textarea.setSelectionRange(start, oldEnd);
+      try {
+        applied = document.execCommand(
+          "insertText",
+          false,
+          edit.text.slice(start, newEnd),
+        );
+      } catch {
+        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: MarkdownTextEditor) => boolean = (
+    editor: MarkdownTextEditor,
+  ): boolean => {
+    const textarea: HTMLTextAreaElement | null = textareaRef.current;
+    if (!textarea) {
+      return false;
+    }
+    const edit: MarkdownTextEdit | null = editor(
+      textarea.value,
+      textarea.selectionStart,
+      textarea.selectionEnd,
+    );
+    if (!edit) {
+      return false;
+    }
+    applyTextareaEdit(edit);
+    return true;
+  };
+
+  const toggleListInTextarea: (kind: MarkdownListKind) => void = (
+    kind: MarkdownListKind,
+  ): void => {
+    editTextarea(
+      (source: string, selectionStart: number, selectionEnd: number) => {
+        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: boolean) => boolean = (
+    outdent: boolean,
+  ): boolean => {
+    const changed: boolean = editEditableByHand(
+      (editable: HTMLDivElement): boolean => {
+        return outdent ? liftListItems(editable) : sinkListItems(editable);
+      },
+    );
+    if (changed) {
+      syncFromEditable();
+    }
+    return changed;
+  };
+
   // WYSIWYG-mode toolbar helpers (operate on the contenteditable DOM).
-  const execEditable: (command: string, value?: string) => void = (
+  const execEditable: (
     command: string,
     value?: string,
+    afterCommand?: (editable: HTMLDivElement) => void,
+  ) => void = (
+    command: string,
+    value?: string,
+    afterCommand?: (editable: HTMLDivElement) => void,
   ): void => {
     const editable: HTMLDivElement | null = editableRef.current;
     if (!editable) {
@@ -647,9 +1281,26 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     } catch {
       // 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: string) => void = (
+    command: string,
+  ): void => {
+    execEditable(command, undefined, (editable: HTMLDivElement): void => {
+      stripTextListMarkers(editable);
+    });
+  };
+
   const wrapSelectionInEditable: (
     tagName: string,
     fallbackText: string,
@@ -668,12 +1319,15 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     const selected: string = selection.toString() || fallbackText;
     const wrapper: HTMLElement = document.createElement(tagName);
     wrapper.textContent = selected;
-    range.deleteContents();
-    range.insertNode(wrapper);
-    const newRange: Range = document.createRange();
-    newRange.selectNodeContents(wrapper);
-    selection.removeAllRanges();
-    selection.addRange(newRange);
+    editEditableByHand((): boolean => {
+      deleteSelectionForInsert(editable, range);
+      range.insertNode(wrapper);
+      const newRange: Range = document.createRange();
+      newRange.selectNodeContents(wrapper);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+      return true;
+    });
     syncFromEditable();
   };
 
@@ -703,14 +1357,52 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     if (hasSelection) {
       execEditable("createLink", url);
     } else {
+      /*
+       * 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(
-        `<a href="${url.replace(/"/g, "&quot;")}">${url.replace(/</g, "&lt;")}</a>`,
+        `<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: () => void = (): void => {
-    insertHtmlAtCursorInEditable("<pre><code>code block</code></pre><p></p>");
+    const editable: HTMLDivElement | null = editableRef.current;
+    if (!editable) {
+      return;
+    }
+    const existing: Set<Element> = new Set<Element>(
+      Array.from(editable.querySelectorAll("pre")),
+    );
+    insertHtmlAtCursorInEditable(
+      "<pre><code>code block</code></pre><p><br></p>",
+    );
+    const added: Array<Element> = Array.from(
+      editable.querySelectorAll("pre"),
+    ).filter((pre: Element): boolean => {
+      return !existing.has(pre);
+    });
+    const block: Element | undefined = added[added.length - 1];
+    const selection: Selection | null = window.getSelection();
+    if (!block || !selection) {
+      return;
+    }
+    const placeholder: Range = document.createRange();
+    placeholder.selectNodeContents(block.querySelector("code") || block);
+    selection.removeAllRanges();
+    selection.addRange(placeholder);
   };
 
   const insertWysiwygTable: () => void = (): void => {
@@ -719,7 +1411,7 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
       "<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);
   };
 
@@ -734,6 +1426,8 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     unorderedList: () => void;
     orderedList: () => void;
     taskList: () => void;
+    indent: () => void;
+    outdent: () => void;
     link: () => void;
     image: () => void;
     code: () => void;
@@ -786,21 +1480,37 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
     },
     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: () => {
+      if (mode === "wysiwyg") {
+        editableRef.current?.focus();
+        shiftListItemsInEditable(false);
+        return;
+      }
+      editTextarea(indentMarkdownLines);
+    },
+    outdent: () => {
+      if (mode === "wysiwyg") {
+        editableRef.current?.focus();
+        shiftListItemsInEditable(true);
+        return;
+      }
+      editTextarea(outdentMarkdownLines);
     },
     link: () => {
       if (mode === "wysiwyg") {
@@ -873,6 +1583,16 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
   const handleEditableKeyDown: (
     e: React.KeyboardEvent<HTMLDivElement>,
   ) => void = (e: React.KeyboardEvent<HTMLDivElement>): void => {
+    /*
+     * 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: HistoryStep | null = historyStepOfKey(e);
+    if (historyStep && stepEditableHistory(historyStep)) {
+      e.preventDefault();
+      return;
+    }
     if (e.ctrlKey || e.metaKey) {
       switch (e.key) {
         case "b":
@@ -887,6 +1607,41 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
           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: React.KeyboardEvent<HTMLTextAreaElement>,
+  ) => void = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+    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 (
@@ -899,6 +1654,9 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
         .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; }
@@ -1006,6 +1764,21 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
               title="Task List"
               onClick={formatActions.taskList}
             />
+            <ToolbarButton
+              icon={IconProp.Indent}
+              title={`Indent (${KeyboardKeyUtil.getDisplayLabel([
+                KeyboardKey.Tab,
+              ])})`}
+              onClick={formatActions.indent}
+            />
+            <ToolbarButton
+              icon={IconProp.Outdent}
+              title={`Outdent (${KeyboardKeyUtil.getDisplayLabel([
+                KeyboardKey.Shift,
+                KeyboardKey.Tab,
+              ])})`}
+              onClick={formatActions.outdent}
+            />
           </div>
 
           <div className="w-px h-6 bg-gray-300" />
@@ -1017,11 +1790,13 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
               title="Link"
               onClick={formatActions.link}
             />
-            <ToolbarButton
-              icon={IconProp.Image}
-              title="Image"
-              onClick={formatActions.image}
-            />
+            {allowImageUpload && (
+              <ToolbarButton
+                icon={IconProp.Image}
+                title="Image"
+                onClick={formatActions.image}
+              />
+            )}
             <ToolbarButton
               icon={IconProp.Code}
               title="Code"
@@ -1106,14 +1881,16 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
 
       {/* Editor Area */}
       <div className="relative">
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          multiple
-          className="hidden"
-          onChange={handleFileInputChange}
-        />
+        {allowImageUpload && (
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            className="hidden"
+            onChange={handleFileInputChange}
+          />
+        )}
         {mode === "wysiwyg" ? (
           <>
             <div
@@ -1121,15 +1898,15 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
               role="textbox"
               aria-multiline="true"
               aria-labelledby={props.ariaLabelledby}
+              aria-invalid={props.error ? "true" : undefined}
+              aria-describedby={props.error ? errorId : undefined}
               contentEditable
               suppressContentEditableWarning
               spellCheck={props.disableSpellCheck !== true}
-              data-placeholder={
-                props.placeholder || "Type your content here..."
-              }
+              data-placeholder={visualPlaceholder}
               tabIndex={props.tabIndex}
               className={wysiwygClassName}
-              onInput={syncFromEditable}
+              onInput={handleEditableInput}
               onPaste={handleEditablePaste}
               onDragOver={handleDragOver}
               onDragEnter={handleDragOver}
@@ -1169,7 +1946,9 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
               ref={textareaRef}
               autoFocus={false}
               aria-labelledby={props.ariaLabelledby}
-              placeholder={props.placeholder || "Type your markdown here..."}
+              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"
@@ -1195,20 +1974,7 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
                   props.onBlur();
                 }
               }}
-              onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-                if (e.ctrlKey || e.metaKey) {
-                  switch (e.key) {
-                    case "b":
-                      e.preventDefault();
-                      formatActions.bold();
-                      break;
-                    case "i":
-                      e.preventDefault();
-                      formatActions.italic();
-                      break;
-                  }
-                }
-              }}
+              onKeyDown={handleTextareaKeyDown}
               tabIndex={props.tabIndex}
               rows={10}
             />
@@ -1233,11 +1999,13 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
 
       {/* Error Message */}
       {props.error && (
-        <p className="mt-1 text-sm text-red-400">{props.error}</p>
+        <p id={errorId} role="alert" className="mt-1 text-sm text-red-400">
+          {props.error}
+        </p>
       )}
 
       {/* Help Text */}
-      <TinyFormDocumentation title="Formatting help">
+      <TinyFormDocumentation title={helpTitle}>
         <>
           <div>
             Type directly in the visual editor — use the toolbar to format.
@@ -1246,9 +2014,39 @@ const MarkdownEditor: FunctionComponent<ComponentProps> = (
             Switch to <strong>Markdown</strong> to view or edit the raw source.
           </div>
           <div>
-            Tip: paste, drag &amp; drop, or click the image button to upload
-            screenshots inline.
+            In a list, press{" "}
+            <strong>
+              {KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Tab])}
+            </strong>{" "}
+            to indent an item and{" "}
+            <strong>
+              {KeyboardKeyUtil.getDisplayLabel([
+                KeyboardKey.Shift,
+                KeyboardKey.Tab,
+              ])}
+            </strong>{" "}
+            to outdent it, or use the Indent and Outdent buttons. Outside a
+            list, {KeyboardKeyUtil.getDisplayLabel([KeyboardKey.Tab])} moves to
+            the next field.
+          </div>
+          <div>
+            Pasting keeps lists, links and formatting from Word, Outlook, web
+            pages and other notes. To paste plain text instead, press{" "}
+            <strong>
+              {KeyboardKeyUtil.getDisplayLabel([
+                KeyboardKey.Mod,
+                KeyboardKey.Shift,
+                "V",
+              ])}
+            </strong>
+            .
           </div>
+          {allowImageUpload && (
+            <div>
+              Tip: paste, drag &amp; drop, or click the image button to upload
+              screenshots inline.
+            </div>
+          )}
         </>
       </TinyFormDocumentation>
     </div>