@oneuptime/common 14.0.9 → 14.0.11

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

@@ -0,0 +1,887 @@
+/*
+ * Inserting into the visual editor's DOM by hand, where the browser's own
+ * document.execCommand("insertHTML") gets it wrong.
+ *
+ * With the caret in the middle or at the end of a line, Chromium's and
+ * Safari's insertHTML fold the first block of what is inserted into that
+ * line: a <pre> becomes a monospace <span> inside the paragraph, and the
+ * first line of a quote leaves the quote. The serializer reads a <span> as
+ * plain text, so the Code Block button saved "hellocode block" and a fenced
+ * block pasted after "Run:" saved "Run:npm install". Here the line is split
+ * at the caret instead, and the blocks go in between its two halves -- what
+ * Firefox's insertHTML does, and what the markdown means.
+ *
+ * Only onto an empty line -- or into the empty editor -- does insertHTML put
+ * blocks where they belong in every browser, and there the editor still
+ * uses it, since it puts the insert on the browser's undo stack.
+ */
+// A line of text, which a block inserted into its middle splits in two.
+const SPLITTABLE_LINE_TAGS = new Set([
+    "p",
+    "div",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+]);
+/*
+ * Elements that hold blocks as well as text of their own: a block inserted
+ * into one stays inside it, as a code block pasted into a list item belongs
+ * to that item. A list inserted into a list item is the exception: its items
+ * join the item's list (insertListItemsAtCaret).
+ */
+const BLOCK_HOLDER_TAGS = new Set([
+    "li",
+    "blockquote",
+    "td",
+    "th",
+]);
+// Elements that start a new line of their own, rather than run on in one.
+const BLOCK_TAGS = new Set([
+    "address",
+    "article",
+    "aside",
+    "blockquote",
+    "dd",
+    "details",
+    "div",
+    "dl",
+    "dt",
+    "fieldset",
+    "figure",
+    "footer",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "header",
+    "hr",
+    "li",
+    "main",
+    "nav",
+    "ol",
+    "p",
+    "pre",
+    "section",
+    "table",
+    "ul",
+]);
+// What makes a line hold something even with no text in it.
+const CONTENT_ELEMENT_TAGS = [
+    "img",
+    "input",
+    "hr",
+    "table",
+    "pre",
+    "ul",
+    "ol",
+    "blockquote",
+    "video",
+    "audio",
+    "iframe",
+];
+const CONTENT_ELEMENT_SELECTOR = CONTENT_ELEMENT_TAGS.join(", ");
+// Whitespace a browser does not show; a non-breaking space is shown.
+const RE_SHOWN_TEXT = /[^ \t\n\r\f\u200b\ufeff]/;
+const tagOf = (node) => {
+    if (!node || node.nodeType !== Node.ELEMENT_NODE) {
+        return "";
+    }
+    return node.localName.toLowerCase();
+};
+const isBlock = (node) => {
+    return BLOCK_TAGS.has(tagOf(node));
+};
+/*
+ * Whether `node` -- an element, a text node or a fragment -- shows nothing:
+ * no text but whitespace, and no image, rule or other block. A lone <br>
+ * (the placeholder a browser keeps in an empty line) counts as nothing.
+ */
+const holdsNothing = (node) => {
+    if (RE_SHOWN_TEXT.test(node.textContent || "")) {
+        return false;
+    }
+    if (CONTENT_ELEMENT_TAGS.includes(tagOf(node))) {
+        return false;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE ||
+        node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        return (node.querySelector(CONTENT_ELEMENT_SELECTOR) === null);
+    }
+    return true;
+};
+/*
+ * Whether the caret sits on an empty line of its own: in the empty editor,
+ * or in a blank paragraph straight inside it -- "", or just the <br> a
+ * browser keeps there. There insertHTML puts blocks where they belong in
+ * every browser; anywhere else it may fold them into the line.
+ */
+export const isCaretOnEmptyLine = (editable, range) => {
+    if (!range.collapsed || !editable.contains(range.startContainer)) {
+        return false;
+    }
+    if (range.startContainer === editable) {
+        return holdsNothing(editable) && (editable.textContent || "") === "";
+    }
+    let line = range.startContainer;
+    while (line.parentNode && line.parentNode !== editable) {
+        line = line.parentNode;
+    }
+    if (!SPLITTABLE_LINE_TAGS.has(tagOf(line))) {
+        return false;
+    }
+    /*
+     * Strictly empty: Chromium folds a block into a line holding even a
+     * single space, which it keeps as a non-breaking one.
+     */
+    return (line.textContent || "") === "" && holdsNothing(line);
+};
+const RE_LEADING_SPACES = /^[ \t\n\r\f]+/;
+const RE_TRAILING_SPACES = /[ \t\n\r\f]+$/;
+// Elements that show something with nothing inside them.
+const SHOWN_EMPTY_TAGS = new Set([
+    "br",
+    "img",
+    "input",
+    "hr",
+    "video",
+    "audio",
+    "iframe",
+]);
+/*
+ * Tidies one edge of a split: from `edge`, the node next to the split,
+ * forward into what follows it or back into what precedes it, up to the
+ * first text a browser shows -- within `container`, the line or item that
+ * was split.
+ *
+ * The space the caret sat next to ends up at the edge of a line once the
+ * line is split there. A browser does not show a space at a line's edge,
+ * but the serializer would still write it -- "Run this \n\n```" -- so it
+ * goes. A non-breaking space is shown, and stays.
+ *
+ * And text nodes and inline elements left with nothing in them go. With the
+ * caret at the very end of a bold word, a link or inline code, the split
+ * copies that element into the part after the caret with nothing in it; at
+ * the very start of one, it leaves the element where it was, emptied; and a
+ * selection pasted over can leave one emptied too. None of them shows, but
+ * the serializer wrote them: "**** then check", "`` now", and an empty link
+ * as its address, a second link the note never had.
+ *
+ * This runs once both parts are back in the editor. The part after the
+ * caret can hold nodes the split moved out whole, and a change made to them
+ * while they were out of the editor is one an undo cannot check the editor
+ * against (MarkdownEditorHistory): with the caret between a bold word and
+ * the space after it, Ctrl+Z refused to take the insert back.
+ */
+const tidySplitEdge = (edge, container, forward) => {
+    const spaces = forward ? RE_LEADING_SPACES : RE_TRAILING_SPACES;
+    let node = edge;
+    while (node && node !== container && container.contains(node)) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = node;
+            const trimmed = text.data.replace(spaces, "");
+            if (trimmed !== text.data) {
+                text.data = trimmed;
+            }
+            if (trimmed !== "") {
+                return;
+            }
+        }
+        else if (node.nodeType === Node.ELEMENT_NODE) {
+            if (isBlock(node) || SHOWN_EMPTY_TAGS.has(tagOf(node))) {
+                return;
+            }
+            const inner = forward
+                ? node.firstChild
+                : node.lastChild;
+            if (inner) {
+                node = inner;
+                continue;
+            }
+        }
+        else if (node.nodeType !== Node.COMMENT_NODE) {
+            return;
+        }
+        /*
+         * `node` shows nothing. It goes -- a comment is only stepped over -- and
+         * so does each inline element that leaves with nothing in it, on the
+         * way back out to the next node along.
+         */
+        let next = forward ? node.nextSibling : node.previousSibling;
+        let parent = node.parentNode;
+        if (node.nodeType !== Node.COMMENT_NODE) {
+            parent === null || parent === void 0 ? void 0 : parent.removeChild(node);
+        }
+        while (!next && parent && parent !== container) {
+            next = forward ? parent.nextSibling : parent.previousSibling;
+            const grandparent = parent.parentNode;
+            if (parent.childNodes.length === 0) {
+                grandparent === null || grandparent === void 0 ? void 0 : grandparent.removeChild(parent);
+            }
+            parent = grandparent;
+        }
+        node = next;
+    }
+};
+/*
+ * Splits the line the caret is in -- a paragraph, a heading, the <div> a
+ * browser writes for a new line -- at the caret, and returns the spot
+ * between its two halves. Either half that is left with nothing in it is
+ * removed, so a block inserted at the start or end of a line does not leave
+ * an empty line behind.
+ */
+const splitLineAtCaret = (line, range) => {
+    const parent = line.parentNode;
+    const tail = line.ownerDocument.createRange();
+    tail.setStart(range.startContainer, range.startOffset);
+    tail.setEnd(line, line.childNodes.length);
+    const rest = tail.extractContents();
+    let before = line.nextSibling;
+    if (!holdsNothing(rest)) {
+        /*
+         * Into the editor first, then filled: filled while still out of it, the
+         * half took nodes the undo record never saw go in, and a redo after
+         * Ctrl+Z was refused.
+         */
+        const half = line.cloneNode(false);
+        parent.insertBefore(half, before);
+        half.appendChild(rest);
+        tidySplitEdge(half.firstChild, half, true);
+        before = half;
+    }
+    tidySplitEdge(line.lastChild, line, false);
+    if (holdsNothing(line)) {
+        line.remove();
+    }
+    return { parent, before };
+};
+/*
+ * The same for text that sits straight inside a list item, a quote, a table
+ * cell or the editor itself, with no paragraph around it: the run of inline
+ * content the caret is in is split at the caret, and the blocks go between
+ * the two parts -- still inside that item, quote or cell.
+ */
+const splitInlineRunAtCaret = (holder, range) => {
+    if (range.startContainer === holder) {
+        return {
+            parent: holder,
+            before: holder.childNodes[range.startOffset] || null,
+        };
+    }
+    let top = range.startContainer;
+    while (top.parentNode && top.parentNode !== holder) {
+        top = top.parentNode;
+    }
+    let runEnd = top;
+    while (runEnd.nextSibling && !isBlock(runEnd.nextSibling)) {
+        runEnd = runEnd.nextSibling;
+    }
+    const tail = holder.ownerDocument.createRange();
+    tail.setStart(range.startContainer, range.startOffset);
+    tail.setEndAfter(runEnd);
+    const rest = tail.extractContents();
+    let before = top.nextSibling;
+    if (!holdsNothing(rest)) {
+        const secondPart = Array.from(rest.childNodes);
+        holder.insertBefore(rest, before);
+        tidySplitEdge(secondPart[0] || null, holder, true);
+        before =
+            secondPart.find((node) => {
+                return node.parentNode === holder;
+            }) || before;
+    }
+    tidySplitEdge(top, holder, false);
+    if (top.parentNode === holder && holdsNothing(top) && !isBlock(top)) {
+        holder.removeChild(top);
+    }
+    return { parent: holder, before };
+};
+/*
+ * Where blocks inserted at the caret go: after the code block the caret is
+ * in (a code block holds only its text), between the two halves of the line
+ * it is in, or between the two parts of the text it is in.
+ */
+const blockInsertionPoint = (editable, range) => {
+    let current = range.startContainer;
+    while (current && current !== editable) {
+        const tag = tagOf(current);
+        if (tag === "pre" && current.parentNode) {
+            return { parent: current.parentNode, before: current.nextSibling };
+        }
+        if (SPLITTABLE_LINE_TAGS.has(tag) && current.parentNode) {
+            return splitLineAtCaret(current, range);
+        }
+        if (BLOCK_HOLDER_TAGS.has(tag)) {
+            return splitInlineRunAtCaret(current, range);
+        }
+        current = current.parentNode;
+    }
+    return splitInlineRunAtCaret(editable, range);
+};
+/*
+ * A caret at the end of what `node` holds -- after its last character, and
+ * before the <br> a browser keeps in an empty line -- so that typing carries
+ * on from what was inserted, as it does after a paste the browser makes.
+ */
+export const caretAtEndOf = (node) => {
+    const caret = node.ownerDocument.createRange();
+    let target = node;
+    while (target.lastChild && target.lastChild.nodeType !== Node.COMMENT_NODE) {
+        const last = target.lastChild;
+        if (last.nodeType === Node.TEXT_NODE) {
+            caret.setStart(last, last.length);
+            caret.collapse(true);
+            return caret;
+        }
+        const tag = tagOf(last);
+        if (tag === "br" || tag === "img" || tag === "input" || tag === "hr") {
+            caret.setStart(target, tag === "br" ? target.childNodes.length - 1 : target.childNodes.length);
+            caret.collapse(true);
+            return caret;
+        }
+        target = last;
+    }
+    caret.setStart(target, target.childNodes.length);
+    caret.collapse(true);
+    return caret;
+};
+/*
+ * The items of `fragment` when it is lists and nothing else that shows --
+ * a pasted list, bullets pasted as text, the Task List button's task --
+ * and null for anything else.
+ */
+const listItemsOf = (fragment) => {
+    const items = [];
+    for (const child of Array.from(fragment.childNodes)) {
+        const tag = tagOf(child);
+        if (tag === "ul" || tag === "ol") {
+            for (const item of Array.from(child.children)) {
+                if (tagOf(item) !== "li") {
+                    return null;
+                }
+                items.push(item);
+            }
+        }
+        else if (!holdsNothing(child)) {
+            return null;
+        }
+    }
+    return items.length > 0 ? items : null;
+};
+/*
+ * The empty first item of the list right after a caret that sits on the
+ * editor itself, or null. Once the Bullet or Numbered List button has made a
+ * list in the empty editor, Chromium leaves the selection on the editor
+ * itself, just before the list -- though it shows the caret in the list's
+ * empty first item, and types into it.
+ */
+const emptyListItemAfterEditorCaret = (editable, range) => {
+    if (range.startContainer !== editable) {
+        return null;
+    }
+    const next = editable.childNodes[range.startOffset];
+    const tag = tagOf(next);
+    const first = tag === "ul" || tag === "ol" ? next.firstElementChild : null;
+    return first && tagOf(first) === "li" && holdsNothing(first)
+        ? first
+        : null;
+};
+/*
+ * Moves a collapsed caret that Chromium left on the editor itself, just
+ * before a list the Bullet or Numbered List button has just made, into that
+ * list's empty first item -- where the caret shows, and where typing goes.
+ * The editor's own inserts then go there too: left on the editor, a paste
+ * or the Code Block button went in above the list, with an empty bullet
+ * left under it ("restart the api\n\n-"). Returns whether it moved it.
+ */
+export const moveCaretIntoEmptyListAhead = (editable, range) => {
+    if (!range.collapsed) {
+        return false;
+    }
+    const item = emptyListItemAfterEditorCaret(editable, range);
+    if (!item) {
+        return false;
+    }
+    range.setStart(item, 0);
+    range.collapse(true);
+    return true;
+};
+/*
+ * The list item whose list the items of a list inserted at the caret join:
+ * the item the caret is in -- unless it is in a code block, a quote or a
+ * table cell inside that item, which a list inserted there stays in.
+ */
+const listItemAtCaret = (editable, range) => {
+    if (range.startContainer === editable) {
+        return emptyListItemAfterEditorCaret(editable, range);
+    }
+    let current = range.startContainer;
+    while (current && current !== editable) {
+        const tag = tagOf(current);
+        if (tag === "li") {
+            return current;
+        }
+        if (tag === "pre" || tag === "blockquote" || tag === "td" || tag === "th") {
+            return null;
+        }
+        current = current.parentNode;
+    }
+    return null;
+};
+/*
+ * Puts `items`, the items of a list inserted at the caret, into the list of
+ * `item`, the list item the caret is in: after what `item` holds before the
+ * caret, and before a new item holding what came after it. Kept in the item
+ * instead -- as a code block inserted into one is -- they were a list nested
+ * in it: a list pasted into the empty item Enter leaves showed two bullets,
+ * "- - a", which is the double bullet of issue #4114, and a task added with
+ * the Task List button at the end of a task was a sub-task.
+ *
+ * A part left with nothing in it goes, so the empty item Enter or a list
+ * button makes is replaced by the items. When what followed the caret is
+ * the item's nested list, or another block of its own, that goes under the
+ * last of the items, so the text keeps its order. Returns the caret: at the
+ * end of what the last item holds.
+ */
+const insertListItemsAtCaret = (item, range, items) => {
+    const list = item.parentNode;
+    const tail = item.ownerDocument.createRange();
+    /*
+     * The paragraph of a loose item the caret is in: the part of it after the
+     * caret is the item's own text, as inline text straight in the item is.
+     */
+    let caretLine = null;
+    if (item.contains(range.startContainer)) {
+        tail.setStart(range.startContainer, range.startOffset);
+        let top = range.startContainer;
+        while (top.parentNode && top.parentNode !== item) {
+            top = top.parentNode;
+        }
+        caretLine = SPLITTABLE_LINE_TAGS.has(tagOf(top)) ? top : null;
+    }
+    else {
+        tail.setStart(item, 0);
+    }
+    tail.setEnd(item, item.childNodes.length);
+    const rest = tail.extractContents();
+    const before = item.nextSibling;
+    for (const pasted of items) {
+        list.insertBefore(pasted, before);
+    }
+    const last = items[items.length - 1];
+    const caret = caretAtEndOf(last);
+    if (!holdsNothing(rest)) {
+        const lead = Array.from(rest.childNodes).find((node) => {
+            return !holdsNothing(node);
+        });
+        const ownText = lead !== undefined &&
+            (!isBlock(lead) ||
+                (caretLine !== null &&
+                    lead === rest.firstChild &&
+                    tagOf(lead) === tagOf(caretLine)));
+        if (ownText) {
+            /*
+             * As when a line is split, into the editor first and then filled and
+             * tidied (MarkdownEditorHistory): the space at the split, and the
+             * empty copies of formatting the caret was at the edge of, go.
+             */
+            const half = item.cloneNode(false);
+            list.insertBefore(half, before);
+            half.appendChild(rest);
+            tidySplitEdge(half.firstChild, half, true);
+        }
+        else {
+            /*
+             * What went before the block holds nothing -- the emptied end of the
+             * text the caret was at the end of -- and is left out. Nothing of it
+             * has been in the editor since the split took it out, so leaving it
+             * out needs no record.
+             */
+            while (rest.firstChild && rest.firstChild !== lead) {
+                rest.removeChild(rest.firstChild);
+            }
+            last.appendChild(rest);
+        }
+    }
+    if (caretLine && caretLine.parentNode === item) {
+        tidySplitEdge(caretLine.lastChild, caretLine, false);
+        if (holdsNothing(caretLine)) {
+            item.removeChild(caretLine);
+        }
+    }
+    else {
+        tidySplitEdge(item.lastChild, item, false);
+    }
+    if (holdsNothing(item)) {
+        item.remove();
+    }
+    return caret;
+};
+/*
+ * Inserts `fragment` -- one or more blocks -- at the caret, splitting the
+ * line the caret is in rather than putting blocks inside it; the items of a
+ * list inserted in a list item join that item's list. Returns where the
+ * caret goes then -- at the end of what was inserted, so typing carries on
+ * from it, as it does after a paste the browser makes -- or null when there
+ * was nothing to insert.
+ */
+export const insertBlocksAtCaret = (editable, range, fragment) => {
+    const last = fragment.lastChild;
+    if (!last) {
+        return null;
+    }
+    const items = listItemsOf(fragment);
+    const item = items
+        ? listItemAtCaret(editable, range)
+        : null;
+    if (items && item) {
+        return insertListItemsAtCaret(item, range, items);
+    }
+    const point = blockInsertionPoint(editable, range);
+    point.parent.insertBefore(fragment, point.before);
+    return caretAtEndOf(last);
+};
+/*
+ * ---------------------------------------------------------------------------
+ * Deleting a selection before an insert
+ * ---------------------------------------------------------------------------
+ */
+// Elements that hold a line of text: where what is typed or pasted can go.
+const LINE_TAGS = new Set([
+    ...Array.from(SPLITTABLE_LINE_TAGS),
+    ...Array.from(BLOCK_HOLDER_TAGS),
+    "pre",
+    "dt",
+    "dd",
+]);
+// Elements whose children are only rows, cells or items -- never text.
+const STRUCTURE_ONLY_TAGS = new Set([
+    "ul",
+    "ol",
+    "table",
+    "thead",
+    "tbody",
+    "tfoot",
+    "tr",
+]);
+const nodeLength = (node) => {
+    if (node.nodeType === Node.TEXT_NODE || node.nodeType === Node.COMMENT_NODE) {
+        return node.length;
+    }
+    return node.childNodes.length;
+};
+/*
+ * The line `node` is in: its nearest paragraph, heading, <div> line, list
+ * item, table cell, code block or quote -- or the editor itself.
+ */
+const lineOf = (editable, node) => {
+    let current = node;
+    while (current && current !== editable) {
+        if (LINE_TAGS.has(tagOf(current))) {
+            return current;
+        }
+        current = current.parentNode;
+    }
+    return editable;
+};
+// The table cell `node` is in, if it is in one inside the editor.
+const cellOf = (editable, node) => {
+    let current = node;
+    while (current && current !== editable) {
+        const tag = tagOf(current);
+        if (tag === "td" || tag === "th") {
+            return current;
+        }
+        current = current.parentNode;
+    }
+    return null;
+};
+/*
+ * Whether the range takes any of `line` -- not merely reaches its start, as
+ * a triple click or Shift+Down that stops at the next line does.
+ */
+const selectsIntoLine = (range, line) => {
+    const head = line.ownerDocument.createRange();
+    head.setStart(line, 0);
+    head.setEnd(range.endContainer, range.endOffset);
+    return !holdsNothing(head.cloneContents());
+};
+// A table's rows and cells, which only ever go with the whole table.
+const TABLE_PART_TAGS = new Set([
+    "thead",
+    "tbody",
+    "tfoot",
+    "tr",
+    "td",
+    "th",
+]);
+/*
+ * Whether `node` is left with nothing in it: no text but whitespace, and no
+ * image, rule, list, code block or other content inside it -- whatever it is
+ * itself. holdsNothing counts a code block or a quote as content even when
+ * it is empty, which is right for what a line holds, and wrong for a code
+ * block or quote a selection has emptied.
+ */
+const isLeftEmpty = (node) => {
+    if (RE_SHOWN_TEXT.test(node.textContent || "")) {
+        return false;
+    }
+    return (node.nodeType !== Node.ELEMENT_NODE ||
+        node.querySelector(CONTENT_ELEMENT_SELECTOR) === null);
+};
+/*
+ * Removes `line` when a selection has left it with nothing in it, and each
+ * element around it that its removal leaves with nothing: the list it was the
+ * only item of, the quote it was the only paragraph of -- and the item that
+ * list was nested in, whose own text the selection took, which stayed as an
+ * empty bullet ("- ") when "al|pha".."de|ep" was pasted over in
+ * "alpha, beta > deep, gamma". Nothing that holds the caret goes: after
+ * Ctrl+A, the line the selection started in is empty too, and the paste
+ * goes into it. A list goes only once it has no items left -- an empty item
+ * of its own is still a bullet someone left there -- and a table's cells and
+ * rows go only with the whole table.
+ */
+const removeEmptiedLine = (line, editable, caret) => {
+    let node = line;
+    while (node &&
+        node !== editable &&
+        node.parentNode &&
+        !node.contains(caret)) {
+        const tag = tagOf(node);
+        if (TABLE_PART_TAGS.has(tag)) {
+            const table = node.closest("table");
+            if (!isLeftEmpty(node) || !table || table === node) {
+                return;
+            }
+            node = table;
+            continue;
+        }
+        const emptied = tag === "ul" || tag === "ol"
+            ? node.children.length === 0
+            : isLeftEmpty(node);
+        if (!emptied) {
+            return;
+        }
+        const parent = node.parentNode;
+        parent.removeChild(node);
+        node = parent;
+    }
+};
+/*
+ * Takes the first line of a code block's text out of it -- up to its first
+ * line break, which goes too -- and returns it as text.
+ */
+const takeFirstCodeLine = (pre) => {
+    const doc = pre.ownerDocument;
+    const first = doc.createRange();
+    first.selectNodeContents(pre);
+    const lineBreak = doc.createRange();
+    let found = false;
+    const walker = doc.createTreeWalker(pre, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+    let node = walker.nextNode();
+    while (node && !found) {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const at = node.data.indexOf("\n");
+            if (at !== -1) {
+                first.setEnd(node, at);
+                lineBreak.setStart(node, at);
+                lineBreak.setEnd(node, at + 1);
+                found = true;
+            }
+        }
+        else if (tagOf(node) === "br") {
+            first.setEndBefore(node);
+            lineBreak.selectNode(node);
+            found = true;
+        }
+        node = walker.nextNode();
+    }
+    const text = first.toString();
+    // The line break first: it comes after the line, whose range it would move.
+    if (found) {
+        lineBreak.deleteContents();
+    }
+    first.deleteContents();
+    return text;
+};
+/*
+ * The formatting a selection ended inside, when the delete left it with
+ * nothing in it -- "Run **this** then" with "un **this" selected keeps an
+ * empty <strong> -- removed, up to the line. Nothing shows it, but the
+ * serializer wrote it: "Rsee **that****** then". What holds the caret stays:
+ * typing there carries on in that formatting.
+ */
+const removeEmptiedFormatting = (end, caret) => {
+    let node = end;
+    while (node &&
+        node.parentNode &&
+        node.isConnected &&
+        (node.nodeType === Node.TEXT_NODE ||
+            (node.nodeType === Node.ELEMENT_NODE &&
+                !isBlock(node) &&
+                !LINE_TAGS.has(tagOf(node)) &&
+                !SHOWN_EMPTY_TAGS.has(tagOf(node)))) &&
+        !node.contains(caret) &&
+        isLeftEmpty(node)) {
+        const parent = node.parentNode;
+        parent.removeChild(node);
+        node = parent;
+    }
+};
+/*
+ * What a list item joined to another held below its own text -- its nested
+ * items, a code block -- goes to the item it joins, in the same place in the
+ * text. For an item nested in that one, the place is right after the join,
+ * ahead of what is left of the nested list the item was in, all of which
+ * came after it; its own nested items take its place in that list. Added at
+ * the end of the item instead, "deep" under "beta" came out after "gamma"
+ * when "al|pha".."be|ta" was pasted over in "alpha > beta > deep, gamma".
+ */
+const moveBelowJoin = (startLine, endLine) => {
+    let place = null;
+    if (startLine.contains(endLine)) {
+        place = endLine;
+        while (place.parentNode && place.parentNode !== startLine) {
+            place = place.parentNode;
+        }
+    }
+    while (endLine.firstChild) {
+        const child = endLine.firstChild;
+        if (place &&
+            endLine.parentNode === place &&
+            tagOf(child) === tagOf(place)) {
+            while (child.firstChild) {
+                place.insertBefore(child.firstChild, endLine);
+            }
+            endLine.removeChild(child);
+        }
+        else {
+            startLine.insertBefore(child, place);
+        }
+    }
+};
+/*
+ * What is left of the line a selection ended in joins the line it started
+ * in, at the caret -- as when the selection is typed over. Only its own text
+ * moves: a list nested in a list item goes along to the item it joins, and
+ * the line, left empty, goes.
+ *
+ * Of a code block, only what is left of the line the selection ended in
+ * joins, as text, and its other lines stay a code block -- what typing over
+ * the selection does in Chromium and Safari. Moved whole, the <code> was
+ * inline code in the line joined ("in` line`", and every line after it in
+ * one span), and the emptied code block stayed as an empty fence.
+ */
+const joinLineAtCaret = (range, startLine, endLine, editable) => {
+    const doc = endLine.ownerDocument;
+    const text = doc.createDocumentFragment();
+    if (tagOf(endLine) === "pre") {
+        const line = takeFirstCodeLine(endLine);
+        if (line) {
+            text.appendChild(doc.createTextNode(line));
+        }
+    }
+    else {
+        while (endLine.firstChild && !isBlock(endLine.firstChild)) {
+            text.appendChild(endLine.firstChild);
+        }
+    }
+    if (!holdsNothing(text)) {
+        range.insertNode(text);
+        range.collapse(true);
+    }
+    if (tagOf(startLine) === "li" && tagOf(endLine) === "li") {
+        moveBelowJoin(startLine, endLine);
+    }
+    removeEmptiedLine(endLine, editable, range.startContainer);
+};
+/*
+ * A caret straight inside a list or a table, between its items or rows,
+ * moved into the item or cell next to it -- the serializer reads only a
+ * list's items and a table's cells, so nothing inserted between them would
+ * be saved.
+ */
+const moveCaretIntoLine = (range) => {
+    let container = range.startContainer;
+    let offset = range.startOffset;
+    while (STRUCTURE_ONLY_TAGS.has(tagOf(container))) {
+        const after = container.childNodes[offset];
+        const before = container.childNodes[offset - 1];
+        if (after && after.nodeType === Node.ELEMENT_NODE) {
+            container = after;
+            offset = 0;
+        }
+        else if (before && before.nodeType === Node.ELEMENT_NODE) {
+            container = before;
+            offset = nodeLength(before);
+        }
+        else {
+            return;
+        }
+    }
+    range.setStart(container, offset);
+    range.collapse(true);
+};
+/*
+ * Deletes what the range selects, the way typing over it does: when the
+ * selection runs from one line into another -- two list items, two
+ * paragraphs -- what is left of the second line joins the first, and the
+ * caret ends up at the join, inside a line. Range.deleteContents on its own
+ * leaves both lines and puts the caret between them -- straight inside the
+ * <ul> when they were list items, where the serializer, which reads only a
+ * list's items, never saw what was pasted next: a link pasted over part of
+ * two items showed in the editor and was lost from the saved note. A
+ * selection that stops at the very start of a line -- a triple click,
+ * Shift+Down -- takes none of that line, and it stays as it is.
+ */
+export const deleteSelectionForInsert = (editable, range) => {
+    if (range.collapsed) {
+        return;
+    }
+    const startNode = range.startContainer;
+    const startOffset = range.startOffset;
+    const endNode = range.endContainer;
+    const startLine = lineOf(editable, startNode);
+    const endLine = lineOf(editable, endNode);
+    /*
+     * A table cell the selection ends in is never joined to where it started:
+     * typed over, a selection from one cell into the next keeps both, and the
+     * row keeps its columns. Joined, the cell's text moved into the first one,
+     * the emptied cell went, and every cell after it moved a column left --
+     * under the wrong header.
+     */
+    const endCell = cellOf(editable, range.endContainer);
+    const endsInAnotherCell = endCell !== null && !endCell.contains(startNode);
+    const joins = startLine !== endLine &&
+        startLine !== editable &&
+        endLine !== editable &&
+        !endsInAnotherCell &&
+        !endLine.contains(startLine) &&
+        selectsIntoLine(range, endLine);
+    range.deleteContents();
+    /*
+     * The start of a selection is never removed by the delete (only cut short),
+     * so the caret goes back there: inside the line the selection started in.
+     */
+    range.setStart(startNode, Math.min(startOffset, nodeLength(startNode)));
+    range.collapse(true);
+    removeEmptiedFormatting(endNode, range.startContainer);
+    if (joins && endLine.isConnected && startLine.isConnected) {
+        joinLineAtCaret(range, startLine, endLine, editable);
+    }
+    else if (endsInAnotherCell && endCell) {
+        /*
+         * Ctrl+A over a note that ends in a table, which Chromium and Safari end
+         * inside the last cell's text: the table the selection emptied goes,
+         * rather than being saved as an empty one.
+         */
+        removeEmptiedLine(endCell, editable, range.startContainer);
+    }
+    moveCaretIntoLine(range);
+};
+//# sourceMappingURL=MarkdownVisualEditing.js.map