@b9g/revise 0.1.1 → 0.1.3

package/contentarea.js

@@ -1,497 +1,530 @@
 /// <reference types="contentarea.d.ts" />
 import { Edit } from './edit.js';
-import './subseq.js';
 
 /// <reference lib="dom" />
-class ContentEvent extends CustomEvent {
-    constructor(typeArg, eventInit) {
-        // Maybe we should do some runtime eventInit validation.
-        super(typeArg, { bubbles: true, ...eventInit });
-    }
-}
-/** Whether the node’s info is up to date. */
-const IS_VALID = 1 << 0;
-/** Whether the node is responsible for the newline before it. */
-const PREPENDS_NEWLINE = 1 << 1;
-/** Whether the node is responsible for the newline after it. */
-const APPENDS_NEWLINE = 1 << 2;
-class NodeInfo {
-    constructor(offset) {
-        this.flags = 0;
-        this.size = 0;
-        this.offset = offset;
-    }
-}
-/********************************************/
-/*** ContentAreaElement symbol properties ***/
-/********************************************/
-const $slot = Symbol.for("revise$slot");
-const $cache = Symbol.for("revise$cache");
-const $value = Symbol.for("revise$value");
-const $observer = Symbol.for("revise$observer");
-const $selectionStart = Symbol.for("revise$selectionStart");
-const $onselectionchange = Symbol.for("revise$onselectionchange");
-const css = `:host {
-	display: contents;
-	white-space: pre-wrap;
-	white-space: break-spaces;
-	overflow-wrap: break-word;
-}`;
+/***************************************************/
+/*** ContentAreaElement private property symbols ***/
+/***************************************************/
+const _cache = Symbol.for("ContentArea._cache");
+const _observer = Symbol.for("ContentArea._observer");
+const _onselectionchange = Symbol.for("ContentArea._onselectionchange");
+const _value = Symbol.for("ContentArea._value");
+const _selectionRange = Symbol.for("ContentArea._selectionRange");
+const _staleValue = Symbol.for("ContentArea._staleValue");
+const _staleSelectionRange = Symbol.for("ContentArea._slateSelectionRange");
+const _compositionBuffer = Symbol.for("ContentArea._compositionBuffer");
+const _compositionStartValue = Symbol.for("ContentArea._compositionStartValue");
+const _compositionSelectionRange = Symbol.for("ContentArea._compositionSelectionRange");
 class ContentAreaElement extends HTMLElement {
     constructor() {
         super();
-        {
-            // Creating the shadow DOM.
-            const slot = document.createElement("slot");
-            const shadow = this.attachShadow({ mode: "closed" });
-            const style = document.createElement("style");
-            style.textContent = css;
-            shadow.appendChild(style);
-            slot.contentEditable = this.contentEditable;
-            shadow.appendChild(slot);
-            this[$slot] = slot;
-        }
-        this[$cache] = new Map();
-        this[$value] = "";
-        this[$observer] = new MutationObserver((records) => {
-            validate(this, null, records);
+        this[_cache] = new Map();
+        this[_observer] = new MutationObserver((records) => {
+            if (this[_compositionBuffer]) {
+                // Buffer mutations during composition but still process them to keep cache in sync
+                this[_compositionBuffer].push(...records);
+            }
+            validate(this, records);
         });
-        this[$selectionStart] = 0;
-        this[$onselectionchange] = () => {
-            validate(this);
-            this[$selectionStart] = getSelectionRange(this, this[$cache]).selectionStart;
+        this[_onselectionchange] = () => {
+            this[_selectionRange] = getSelectionRange(this);
         };
+        this[_value] = "";
+        this[_selectionRange] = { start: 0, end: 0, direction: "none" };
+        this[_staleValue] = undefined;
+        this[_staleSelectionRange] = undefined;
+        this[_compositionBuffer] = undefined;
+        this[_compositionStartValue] = undefined;
+        this[_compositionSelectionRange] = undefined;
     }
     /******************************/
     /*** Custom Element methods ***/
     /******************************/
-    static get observedAttributes() {
-        return ["contenteditable"];
-    }
     connectedCallback() {
-        this[$observer].observe(this, {
+        this[_observer].observe(this, {
             subtree: true,
             childList: true,
             characterData: true,
+            characterDataOldValue: true,
             attributes: true,
+            attributeOldValue: true,
             attributeFilter: [
                 "data-content",
-                "data-contentbefore",
-                "data-contentafter",
+                // TODO: implement these attributes
+                //"data-contentbefore",
+                //"data-contentafter",
             ],
         });
-        this[$value] = getValue(this, this[$cache], "");
-        this[$selectionStart] = getSelectionRange(this, this[$cache]).selectionStart;
-        document.addEventListener("selectionchange", this[$onselectionchange], 
+        document.addEventListener("selectionchange", this[_onselectionchange], 
         // We use capture in an attempt to run before other event listeners.
         true);
+        validate(this);
+        this[_onselectionchange]();
+        // Composition event handling
+        let processCompositionTimeout;
+        this.addEventListener("compositionstart", () => {
+            clearTimeout(processCompositionTimeout); // Cancel pending commit
+            if (processCompositionTimeout == null) {
+                this[_compositionBuffer] = [];
+                this[_compositionStartValue] = this[_value];
+                this[_compositionSelectionRange] = { ...this[_selectionRange] };
+            }
+            processCompositionTimeout = undefined;
+        });
+        const processComposition = () => {
+            if (this[_compositionBuffer] &&
+                this[_compositionBuffer].length > 0 &&
+                this[_compositionStartValue] !== undefined &&
+                this[_compositionSelectionRange] !== undefined) {
+                const edit = Edit.diff(this[_compositionStartValue], this[_value], this[_compositionSelectionRange].start);
+                const ev = new ContentEvent("contentchange", {
+                    detail: { edit, source: null, mutations: this[_compositionBuffer] }
+                });
+                this.dispatchEvent(ev);
+                this[_staleValue] = undefined;
+                this[_staleSelectionRange] = undefined;
+            }
+            this[_compositionBuffer] = undefined;
+            this[_compositionStartValue] = undefined;
+            this[_compositionSelectionRange] = undefined;
+            processCompositionTimeout = undefined;
+        };
+        this.addEventListener("compositionend", () => {
+            clearTimeout(processCompositionTimeout);
+            processCompositionTimeout = setTimeout(processComposition);
+        });
+        this.addEventListener("blur", () => {
+            clearTimeout(processCompositionTimeout);
+            processComposition();
+        });
+        this.addEventListener("keydown", (e) => {
+            if (e.key === "Escape" && this[_compositionBuffer]) {
+                clearTimeout(processCompositionTimeout);
+                processComposition();
+            }
+        });
     }
     disconnectedCallback() {
-        this[$cache].clear();
-        this[$value] = "";
-        this[$observer].disconnect();
-        // JSDOM-based environments like Jest will make the global document null
-        // before calling the disconnectedCallback for some reason.
+        this[_cache].clear();
+        this[_value] = "";
+        this[_observer].disconnect();
+        // JSDOM-based environments like Jest sometimes make the global document
+        // null before calling the disconnectedCallback for some reason.
         if (document) {
-            document.removeEventListener("selectionchange", this[$onselectionchange], true);
+            document.removeEventListener("selectionchange", this[_onselectionchange], true);
         }
     }
-    attributeChangedCallback(name) {
-        switch (name) {
-            case "contenteditable": {
-                const slot = this[$slot];
-                // We have to set slot.contentEditable to this.contentEditable because
-                // Chrome has trouble selecting elements across shadow DOM boundaries.
-                // See https://bugs.chromium.org/p/chromium/issues/detail?id=1175930
-                // Chrome has additional issues with using the host element as a
-                // contenteditable element but this normalizes some of the behavior.
-                slot.contentEditable = this.contentEditable;
-                break;
-            }
-        }
-    }
-    /***********************/
-    /*** Content methods ***/
-    /***********************/
     get value() {
         validate(this);
-        return this[$value];
+        return this[_staleValue] == null ? this[_value] : this[_staleValue];
     }
     get selectionStart() {
         validate(this);
-        return getSelectionRange(this, this[$cache]).selectionStart;
+        const range = this[_staleSelectionRange] || this[_selectionRange];
+        return range.start;
     }
-    set selectionStart(selectionStart) {
+    set selectionStart(start) {
         validate(this);
-        const selectionRange = getSelectionRange(this, this[$cache]);
-        setSelectionRange(this, this[$cache], selectionStart, selectionRange.selectionEnd, selectionRange.selectionDirection);
+        const { end, direction } = getSelectionRange(this);
+        setSelectionRange(this, { start, end, direction });
     }
     get selectionEnd() {
         validate(this);
-        return getSelectionRange(this, this[$cache]).selectionEnd;
+        const range = this[_staleSelectionRange] || this[_selectionRange];
+        return range.end;
     }
-    set selectionEnd(selectionEnd) {
+    set selectionEnd(end) {
         validate(this);
-        const selectionRange = getSelectionRange(this, this[$cache]);
-        setSelectionRange(this, this[$cache], selectionRange.selectionStart, selectionEnd, selectionRange.selectionDirection);
+        const { start, direction } = getSelectionRange(this);
+        setSelectionRange(this, { start, end, direction });
     }
     get selectionDirection() {
         validate(this);
-        return getSelectionRange(this, this[$cache]).selectionDirection;
+        const range = this[_staleSelectionRange] || this[_selectionRange];
+        return range.direction;
     }
-    set selectionDirection(selectionDirection) {
+    set selectionDirection(direction) {
         validate(this);
-        const selectionRange = getSelectionRange(this, this[$cache]);
-        setSelectionRange(this, this[$cache], selectionRange.selectionStart, selectionRange.selectionEnd, selectionDirection);
+        const { start, end } = getSelectionRange(this);
+        setSelectionRange(this, { start, end, direction });
     }
     getSelectionRange() {
         validate(this);
-        return getSelectionRange(this, this[$cache]);
+        const range = this[_staleSelectionRange] || this[_selectionRange];
+        return { ...range };
     }
-    setSelectionRange(selectionStart, selectionEnd, selectionDirection = "none") {
+    setSelectionRange(start, end, direction = "none") {
         validate(this);
-        setSelectionRange(this, this[$cache], selectionStart, selectionEnd, selectionDirection);
+        setSelectionRange(this, { start, end, direction });
     }
     indexAt(node, offset) {
         validate(this);
-        const cache = this[$cache];
-        return indexAt(this, cache, node, offset);
+        return indexAt(this, node, offset);
     }
     nodeOffsetAt(index) {
         validate(this);
-        const cache = this[$cache];
-        return nodeOffsetAt(this, cache, index);
+        return nodeOffsetAt(this, index);
     }
     source(source) {
-        return validate(this, source, this[$observer].takeRecords());
+        return validate(this, this[_observer].takeRecords(), source);
     }
 }
-// TODO: custom newlines?
-const NEWLINE = "\n";
-// TODO: Try using getComputedStyle
-const BLOCKLIKE_ELEMENTS = new Set([
-    "ADDRESS",
-    "ARTICLE",
-    "ASIDE",
-    "BLOCKQUOTE",
-    "CAPTION",
-    "DETAILS",
-    "DIALOG",
-    "DD",
-    "DIV",
-    "DL",
-    "DT",
-    "FIELDSET",
-    "FIGCAPTION",
-    "FIGURE",
-    "FOOTER",
-    "FORM",
-    "H1",
-    "H2",
-    "H3",
-    "H4",
-    "H5",
-    "H6",
-    "HEADER",
-    "HGROUP",
-    "HR",
-    "LI",
-    "MAIN",
-    "NAV",
-    "OL",
-    "P",
-    "PRE",
-    "SECTION",
-    "TABLE",
-    "TR",
-    "UL",
-]);
-function validate(root, source = null, records) {
-    const cache = root[$cache];
-    // We use the existence of records to determine whether
-    // contentchange events should be fired synchronously.
-    let delay = false;
-    if (records === undefined) {
-        delay = true;
-        records = root[$observer].takeRecords();
-    }
-    if (!invalidate(root, cache, records)) {
-        return false;
+const PreventDefaultSource = Symbol.for("ContentArea.PreventDefaultSource");
+class ContentEvent extends CustomEvent {
+    constructor(typeArg, eventInit) {
+        // Maybe we should do some runtime eventInit validation.
+        super(typeArg, { bubbles: true, ...eventInit });
     }
-    const oldValue = root[$value];
-    const oldSelectionStart = root[$selectionStart];
-    const value = (root[$value] = getValue(root, cache, oldValue));
-    const selectionStart = getSelectionRange(root, cache).selectionStart;
-    const hint = Math.min(oldSelectionStart, selectionStart);
-    // TODO: This call is expensive. If we have getValue return an edit instead
-    // of a string, we might be able to save a lot in CPU time.
-    const edit = Edit.diff(oldValue, value, hint);
-    const ev = new ContentEvent("contentchange", { detail: { edit, source } });
-    if (delay) {
-        Promise.resolve().then(() => root.dispatchEvent(ev));
+    preventDefault() {
+        if (this.defaultPrevented) {
+            return;
+        }
+        super.preventDefault();
+        const area = this.target;
+        area[_staleValue] = area[_value];
+        area[_staleSelectionRange] = area[_selectionRange];
+        const records = this.detail.mutations;
+        for (let i = records.length - 1; i >= 0; i--) {
+            const record = records[i];
+            switch (record.type) {
+                case 'childList': {
+                    for (let j = 0; j < record.addedNodes.length; j++) {
+                        const node = record.addedNodes[j];
+                        if (node.parentNode) {
+                            node.parentNode.removeChild(node);
+                        }
+                    }
+                    for (let j = 0; j < record.removedNodes.length; j++) {
+                        const node = record.removedNodes[j];
+                        record.target.insertBefore(node, record.nextSibling);
+                    }
+                    break;
+                }
+                case 'characterData': {
+                    if (record.oldValue !== null) {
+                        record.target.data = record.oldValue;
+                    }
+                    break;
+                }
+                case 'attributes': {
+                    if (record.oldValue === null) {
+                        record.target.removeAttribute(record.attributeName);
+                    }
+                    else {
+                        record.target.setAttribute(record.attributeName, record.oldValue);
+                    }
+                    break;
+                }
+            }
+        }
+        const records1 = (area)[_observer].takeRecords();
+        validate(area, records1, PreventDefaultSource);
     }
-    else {
-        root.dispatchEvent(ev);
+}
+/*** NodeInfo.flags ***/
+/** Whether the node is old. */
+const IS_OLD = 1 << 0;
+/** Whether the node’s info is still up-to-date. */
+const IS_VALID = 1 << 1;
+/** Whether the node has a styling of type display: block or similar. */
+const IS_BLOCKLIKE = 1 << 2;
+/** Whether the node is responsible for the newline before it. */
+const PREPENDS_NEWLINE = 1 << 3;
+/** Whether the node is responsible for the newline after it. */
+const APPENDS_NEWLINE = 1 << 4;
+/** Data associated with the child nodes of a ContentAreaElement. */
+class NodeInfo {
+    constructor(offset) {
+        this.f = 0;
+        this.offset = offset;
+        this.length = 0;
+    }
+}
+/**
+ * Should be called before calling any ContentAreaElement methods.
+ *
+ * This function ensures the cache is up to date.
+ *
+ * Dispatches "contentchange" events.
+ *
+ * @returns whether a change was detected
+ */
+function validate(_this, records = _this[_observer].takeRecords(), source = null) {
+    if (typeof _this !== "object" || _this[_cache] == null) {
+        throw new TypeError("this is not a ContentAreaElement");
+    }
+    else if (!document.contains(_this)) {
+        throw new Error("ContentArea cannot be read before it is inserted into the DOM");
+    }
+    if (!invalidate(_this, records)) {
+        return false;
+    }
+    const oldValue = _this[_value];
+    const edit = diff(_this, oldValue, _this[_selectionRange].start);
+    _this[_value] = edit.apply(oldValue);
+    _this[_selectionRange] = getSelectionRange(_this);
+    // Don't dispatch events during composition or preventDefault operations
+    if (source !== PreventDefaultSource && !_this[_compositionBuffer]) {
+        const ev = new ContentEvent("contentchange", { detail: { edit, source, mutations: records } });
+        _this.dispatchEvent(ev);
+        _this[_staleValue] = undefined;
+        _this[_staleSelectionRange] = undefined;
     }
     return true;
 }
-function invalidate(root, cache, records) {
-    if (!cache.get(root)) {
+function invalidate(_this, records) {
+    const cache = _this[_cache];
+    if (!cache.get(_this)) {
+        // The root ContentAreaElement will not be deleted from the cache until the
+        // element is removed from the DOM, so this is the first time the
+        // ContentAreaElement is being validated.
         return true;
     }
     let invalid = false;
     for (let i = 0; i < records.length; i++) {
         const record = records[i];
-        // We make sure all added and removed nodes are cleared from the cache just
-        // in case of any MutationObserver weirdness.
+        // We make sure all added and removed nodes and their children are deleted
+        // from the cache in case of any weirdness where nodes have been moved.
         for (let j = 0; j < record.addedNodes.length; j++) {
-            clear(record.addedNodes[j], cache);
+            const addedNode = record.addedNodes[j];
+            clear(addedNode, cache);
         }
         for (let j = 0; j < record.removedNodes.length; j++) {
             clear(record.removedNodes[j], cache);
         }
-        // TODO: invalidate data-content nodes correctly.
         let node = record.target;
-        if (node === root) {
+        if (node === _this) {
             invalid = true;
             continue;
         }
-        else if (!root.contains(node)) {
+        else if (!_this.contains(node)) {
             clear(node, cache);
             continue;
         }
-        for (; node !== root; node = node.parentNode) {
+        for (; node !== _this; node = node.parentNode) {
             if (!cache.has(node)) {
                 break;
             }
-            const info = cache.get(node);
-            if (info) {
-                info.flags &= ~IS_VALID;
+            const nodeInfo = cache.get(node);
+            if (nodeInfo) {
+                nodeInfo.f &= ~IS_VALID;
             }
             invalid = true;
         }
     }
     if (invalid) {
-        const info = cache.get(root);
-        info.flags &= ~IS_VALID;
+        const nodeInfo = cache.get(_this);
+        nodeInfo.f &= ~IS_VALID;
     }
     return invalid;
 }
-// This is the single most complicated function in the library!!!
 /**
- * This function both returns the content of the root (always a content-area
- * element, and populates the cache with info about the contents of nodes for
- * future reads.
- * @param root - The root element (usually a content-area element)
- * @param cache - The nodeInfo cache associated with the root
- * @param oldContent - The previous content of the root.
+ * For a given parent node and node info cache, clear the info for the node and
+ * all of its child nodes from the cache.
  */
-function getValue(root, cache, oldContent) {
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
-    // TODO: It might be faster to construct and return a edit rather than
-    // concatenating a giant string.
-    let content = "";
-    // Because the content variable is a heavily concatenated string and likely
-    // inferred by most engines as requiring a “rope-like” data structure for
-    // performance, reading from the end of the string to detect newlines can be
-    // a bottleneck. Therefore, we store that info in this boolean instead.
-    /** A boolean which indicates whether content currently ends in a newline. */
-    let hasNewline = false;
-    /** The start of the current node relative to its parent. */
-    let offset = 0;
-    // The current index into oldContent. We use this to copy unchanged text over
-    // and track deletions.
-    // If there are nodes which have cached start and length information, we get
-    // their contents from oldContent string using oldIndex so we don’t have to
-    // read it from the DOM.
-    let oldIndex = 0;
-    // The current index into oldContent of the current node’s parent. We can get
-    // the expected start of a node if none of the nodes before it were deleted
-    // by finding the difference between oldIndex and relativeOldIndex. We can
-    // compare this difference to the cached start information to detect
-    // deletions.
-    let relativeOldIndex = 0;
-    let info = cache.get(root);
-    if (info === undefined) {
-        info = new NodeInfo(offset);
-        cache.set(root, info);
-    }
-    // A stack to save some variables as we walk up and down the tree.
+function clear(parent, cache) {
+    const walker = document.createTreeWalker(parent, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+    for (let node = parent; node !== null; node = walker.nextNode()) {
+        cache.delete(node);
+    }
+}
+// TODO: custom newlines?
+const NEWLINE = "\n";
+// THIS IS THE MOST COMPLICATED FUNCTION IN THE LIBRARY!
+/**
+ * This function both returns an edit which represents changes to the
+ * ContentAreaElement, and populates the cache with info about nodes for future
+ * reads.
+ */
+function diff(_this, oldValue, oldSelectionStart) {
+    const walker = document.createTreeWalker(_this, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+    const cache = _this[_cache];
     const stack = [];
-    for (let node = root, descending = true; node !== null;) {
-        // A loop to descend into the DOM tree.
-        while (descending && !(info.flags & IS_VALID)) {
-            if (node.nodeType === Node.TEXT_NODE ||
-                // We treat elements with data-content attributes as opaque.
-                node.hasAttribute("data-content")) {
-                break;
-            }
-            // If the current node is a block-like element, and the previous
-            // node/elements did not end with a newline, then the current element
-            // would introduce a linebreak before its contents.
-            // We check that the offset is non-zero so that the first child of a
-            // parent does not introduce a newline before it.
-            const prependsNewline = !!offset && !hasNewline && isBlocklikeElement(node);
-            if (prependsNewline) {
-                content += NEWLINE;
-                hasNewline = true;
-                offset += NEWLINE.length;
-                info.offset += NEWLINE.length;
-                info.flags |= PREPENDS_NEWLINE;
-            }
-            else {
-                info.flags &= ~PREPENDS_NEWLINE;
-            }
-            if ((node = walker.firstChild())) {
-                descending = true;
-            }
-            else {
-                node = walker.currentNode;
-                break;
-            }
-            stack.push({ relativeOldIndex, info });
-            relativeOldIndex = oldIndex;
-            offset = 0;
-            // getNodeInfo
-            info = cache.get(node);
-            if (info === undefined) {
-                info = new NodeInfo(offset);
-                cache.set(node, info);
+    let nodeInfo;
+    let value = "";
+    for (let node = _this, descending = true, 
+    /** the current offset relative to the parent */
+    offset = 0, 
+    /** the index into the old string */
+    oldIndex = 0, 
+    /** the index into the old string of the parent */
+    oldIndexRelative = 0, 
+    /** Whether or not the value being built currently ends with a newline */
+    hasNewline = false;; node = walker.currentNode) {
+        if (descending) {
+            // PRE-ORDER LOGIC
+            nodeInfo = cache.get(node);
+            if (nodeInfo === undefined) {
+                cache.set(node, (nodeInfo = new NodeInfo(offset)));
+                if (isBlocklikeElement(node)) {
+                    nodeInfo.f |= IS_BLOCKLIKE;
+                }
             }
             else {
-                if (info.offset > 0) {
+                const expectedOffset = oldIndex - oldIndexRelative;
+                const deleteLength = nodeInfo.offset - expectedOffset;
+                if (deleteLength < 0) {
+                    // this should never happen
+                    throw new Error("cache offset error");
+                }
+                else if (deleteLength > 0) {
                     // deletion detected
-                    oldIndex += info.offset;
+                    oldIndex += deleteLength;
                 }
-                info.offset = offset;
-            }
-        }
-        if (info.flags & IS_VALID) {
-            // The node has been seen before.
-            // Reading from oldContent because length hasn’t been invalidated.
-            const length = info.size;
-            if (oldIndex + info.size > oldContent.length) {
-                // This should never happen
-                throw new Error("String length mismatch");
+                nodeInfo.offset = offset;
             }
-            const prependsNewline = !!offset && !hasNewline && isBlocklikeElement(node);
-            if (prependsNewline) {
-                content += NEWLINE;
+            if (offset && !hasNewline && nodeInfo.f & IS_BLOCKLIKE) {
+                // Block-like elements prepend a newline when they appear after text or
+                // inline elements.
                 hasNewline = true;
                 offset += NEWLINE.length;
-                info.offset += NEWLINE.length;
-                info.flags |= PREPENDS_NEWLINE;
+                value += NEWLINE;
+                if (nodeInfo.f & PREPENDS_NEWLINE) {
+                    oldIndex += NEWLINE.length;
+                }
+                nodeInfo.f |= PREPENDS_NEWLINE;
             }
             else {
-                info.flags &= ~PREPENDS_NEWLINE;
+                if (nodeInfo.f & PREPENDS_NEWLINE) {
+                    // deletion detected
+                    oldIndex += NEWLINE.length;
+                }
+                nodeInfo.f &= ~PREPENDS_NEWLINE;
             }
-            const oldContent1 = oldContent.slice(oldIndex, oldIndex + length);
-            content += oldContent1;
-            offset += length;
-            oldIndex += length;
-            if (oldContent1.length) {
-                hasNewline = oldContent1.endsWith(NEWLINE);
+            descending = false;
+            if (nodeInfo.f & IS_VALID) {
+                // The node and its children are unchanged, so we read from the length.
+                if (nodeInfo.length) {
+                    value += oldValue.slice(oldIndex, oldIndex + nodeInfo.length);
+                    oldIndex += nodeInfo.length;
+                    offset += nodeInfo.length;
+                    hasNewline =
+                        oldValue.slice(Math.max(0, oldIndex - NEWLINE.length), oldIndex) ===
+                            NEWLINE;
+                }
             }
-        }
-        else {
-            // The node hasn’t been seen before.
-            let appendsNewline = false;
-            if (node.nodeType === Node.TEXT_NODE) {
-                const content1 = node.data;
-                content += content1;
-                offset += content1.length;
-                if (content1.length) {
-                    hasNewline = content1.endsWith(NEWLINE);
+            else if (node.nodeType === Node.TEXT_NODE) {
+                const text = node.data;
+                if (text.length) {
+                    value += text;
+                    offset += text.length;
+                    hasNewline = text.endsWith(NEWLINE);
+                }
+                if (nodeInfo.f & IS_OLD) {
+                    oldIndex += nodeInfo.length;
                 }
             }
             else if (node.hasAttribute("data-content")) {
-                const content1 = node.getAttribute("data-content") || "";
-                content += content1;
-                offset += content1.length;
-                if (content1.length) {
-                    hasNewline = content1.endsWith(NEWLINE);
+                const text = node.getAttribute("data-content") || "";
+                if (text.length) {
+                    value += text;
+                    offset += text.length;
+                    hasNewline = text.endsWith(NEWLINE);
+                }
+                if (nodeInfo.f & IS_OLD) {
+                    oldIndex += nodeInfo.length;
                 }
-            }
-            else if (!hasNewline && isBlocklikeElement(node)) {
-                content += NEWLINE;
-                offset += NEWLINE.length;
-                hasNewline = true;
-                appendsNewline = true;
             }
             else if (node.nodeName === "BR") {
-                content += NEWLINE;
+                value += NEWLINE;
                 offset += NEWLINE.length;
                 hasNewline = true;
-            }
-            info.size = offset - info.offset;
-            info.flags |= IS_VALID;
-            info.flags = appendsNewline
-                ? info.flags | APPENDS_NEWLINE
-                : info.flags & ~APPENDS_NEWLINE;
-        }
-        if ((node = walker.nextSibling())) {
-            descending = true;
-            // getNodeInfo
-            info = cache.get(node);
-            if (info === undefined) {
-                info = new NodeInfo(offset);
-                cache.set(node, info);
+                if (nodeInfo.f & IS_OLD) {
+                    oldIndex += nodeInfo.length;
+                }
             }
             else {
-                const oldOffset = oldIndex - relativeOldIndex;
-                if (info.offset > oldOffset) {
-                    // deletion detected
-                    oldIndex += info.offset - oldOffset;
-                }
-                else if (info.offset < oldOffset) {
-                    // This should never happen
-                    throw new Error("Offset is before old offset");
+                descending = !!walker.firstChild();
+                if (descending) {
+                    stack.push({ nodeInfo, oldIndexRelative });
+                    offset = 0;
+                    oldIndexRelative = oldIndex;
                 }
-                info.offset = offset;
             }
         }
         else {
-            descending = false;
-            if (walker.currentNode !== root) {
-                if (!stack.length) {
-                    // This should never happen
-                    throw new Error("Stack is empty");
+            if (!stack.length) {
+                // This should never happen.
+                throw new Error("Stack is empty");
+            }
+            // If the child node prepends a newline, add to offset to increase the
+            // length of the parent node.
+            if (nodeInfo.f & PREPENDS_NEWLINE) {
+                offset += NEWLINE.length;
+            }
+            ({ nodeInfo, oldIndexRelative } = stack.pop());
+            offset = nodeInfo.offset + offset;
+        }
+        if (!descending) {
+            // POST-ORDER LOGIC
+            if (!(nodeInfo.f & IS_VALID)) {
+                // TODO: Figure out if we should always recalculate APPENDS_NEWLINE???
+                if (!hasNewline && nodeInfo.f & IS_BLOCKLIKE) {
+                    value += NEWLINE;
+                    offset += NEWLINE.length;
+                    hasNewline = true;
+                    nodeInfo.f |= APPENDS_NEWLINE;
+                }
+                else {
+                    nodeInfo.f &= ~APPENDS_NEWLINE;
+                }
+                nodeInfo.length = offset - nodeInfo.offset;
+                nodeInfo.f |= IS_VALID;
+            }
+            nodeInfo.f |= IS_OLD;
+            descending = !!walker.nextSibling();
+            if (!descending) {
+                if (walker.currentNode === _this) {
+                    break;
                 }
-                ({ relativeOldIndex, info } = stack.pop());
-                offset = info.offset + offset;
-                node = walker.parentNode();
+                walker.parentNode();
             }
         }
+        if (oldIndex > oldValue.length) {
+            // This should never happen.
+            throw new Error("cache length error");
+        }
     }
-    return content;
+    const selectionStart = getSelectionRange(_this).start;
+    // TODO: Doing a diff over the entirety of both oldValue and value is a
+    // performance bottleneck. Figure out how to reduce the search for changed
+    // values.
+    return Edit.diff(oldValue, value, Math.min(oldSelectionStart, selectionStart));
 }
+const BLOCKLIKE_DISPLAYS = new Set([
+    "block",
+    "flex",
+    "grid",
+    "flow-root",
+    "list-item",
+    "table",
+    "table-row-group",
+    "table-header-group",
+    "table-footer-group",
+    "table-row",
+    "table-caption",
+]);
 function isBlocklikeElement(node) {
-    return (node.nodeType === Node.ELEMENT_NODE && BLOCKLIKE_ELEMENTS.has(node.nodeName));
-}
-/**
- * For a given parent node and node info cache, clear info for the node and all
- * child nodes from the cache.
- */
-function clear(parent, cache) {
-    const walker = document.createTreeWalker(parent, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
-    for (let node = parent; node !== null; node = walker.nextNode()) {
-        cache.delete(node);
-    }
+    return (node.nodeType === Node.ELEMENT_NODE &&
+        BLOCKLIKE_DISPLAYS.has(
+        // handle two-value display syntax like `display: block flex`
+        getComputedStyle(node).display.split(" ")[0]));
 }
+/***********************/
+/*** Selection Logic ***/
+/***********************/
 /**
  * Finds the string index of a node and offset pair provided by a browser API
- * like window.getSelection() for a given root and cache.
+ * like document.getSelection() for a given root and cache.
  */
-function indexAt(root, cache, node, offset) {
-    if (node == null || !root.contains(node)) {
+function indexAt(_this, node, offset) {
+    const cache = _this[_cache];
+    if (node == null || !_this.contains(node)) {
         return -1;
     }
     if (!cache.has(node)) {
-        // If the node is not found in the cache but is contained in the root,
-        // then it is probably the child of an element with a data-content
-        // attribute.
-        // TODO: Maybe a non-zero offset should put the index at the end of
-        // the data-content node.
+        // If the node is not found in the cache but is contained in the root, then
+        // it is the child of an element with a data-content attribute.
         offset = 0;
         while (!cache.has(node)) {
             node = node.parentNode;
@@ -499,8 +532,8 @@ function indexAt(root, cache, node, offset) {
     }
     let index;
     if (node.nodeType === Node.TEXT_NODE) {
-        const info = cache.get(node);
-        index = offset + info.offset;
+        const nodeInfo = cache.get(node);
+        index = offset + nodeInfo.offset;
         node = node.parentNode;
     }
     else {
@@ -508,11 +541,11 @@ function indexAt(root, cache, node, offset) {
             index = 0;
         }
         else if (offset >= node.childNodes.length) {
-            const info = cache.get(node);
-            index = info.size;
-            if (info.flags & APPENDS_NEWLINE) {
-                index -= NEWLINE.length;
-            }
+            const nodeInfo = cache.get(node);
+            index =
+                nodeInfo.f & APPENDS_NEWLINE
+                    ? nodeInfo.length - NEWLINE.length
+                    : nodeInfo.length;
         }
         else {
             let child = node.childNodes[offset];
@@ -524,17 +557,20 @@ function indexAt(root, cache, node, offset) {
             }
             else {
                 node = child;
-                const info = cache.get(node);
+                const nodeInfo = cache.get(node);
                 // If the offset references an element which prepends a newline
                 // ("hello<div>world</div>"), we have to start from -1 because the
                 // element’s info.offset will not account for the newline.
-                index = info.flags & PREPENDS_NEWLINE ? -1 : 0;
+                index = nodeInfo.f & PREPENDS_NEWLINE ? -1 : 0;
             }
         }
     }
-    for (; node !== root; node = node.parentNode) {
-        const info = cache.get(node);
-        index += info.offset;
+    for (; node !== _this; node = node.parentNode) {
+        const nodeInfo = cache.get(node);
+        index += nodeInfo.offset;
+        if (nodeInfo.f & PREPENDS_NEWLINE) {
+            index += NEWLINE.length;
+        }
     }
     return index;
 }
@@ -542,47 +578,40 @@ function indexAt(root, cache, node, offset) {
  * Finds the node and offset pair to use with browser APIs like
  * selection.collapse() from a given string index.
  */
-function nodeOffsetAt(root, cache, index) {
-    const [node, offset] = findNodeOffset(root, cache, index);
+function nodeOffsetAt(_this, index) {
+    if (index < 0) {
+        return [null, 0];
+    }
+    const [node, offset] = findNodeOffset(_this, index);
     if (node && node.nodeName === "BR") {
-        // Different browsers can have trouble when calling `selection.collapse()`
+        // Some browsers seem to have trouble when calling `selection.collapse()`
         // with a BR element, so we try to avoid returning them from this function.
         return nodeOffsetFromChild(node);
     }
     return [node, offset];
 }
-function findNodeOffset(root, cache, index) {
-    if (index < 0) {
-        return [null, 0];
-    }
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
-    for (let node = root; node !== null;) {
-        const info = cache.get(node);
-        if (info == null) {
+// TODO: Can this function be inlined?
+function findNodeOffset(_this, index) {
+    const cache = _this[_cache];
+    const walker = document.createTreeWalker(_this, NodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT);
+    for (let node = _this; node !== null;) {
+        const nodeInfo = cache.get(node);
+        if (nodeInfo == null) {
             return nodeOffsetFromChild(node, index > 0);
         }
-        else if (info.flags & PREPENDS_NEWLINE) {
-            index -= NEWLINE.length;
-        }
-        if (index < 0) {
-            // This branch should only run when an element prepends an newline
-            const previousSibling = walker.previousSibling();
-            if (!previousSibling) {
-                // This should never happen
-                throw new Error("Previous sibling missing");
-            }
-            return [previousSibling, getNodeLength(previousSibling)];
+        if (nodeInfo.f & PREPENDS_NEWLINE) {
+            index -= 1;
         }
-        else if (index === info.size && node.nodeType === Node.TEXT_NODE) {
+        if (index === nodeInfo.length && node.nodeType === Node.TEXT_NODE) {
             return [node, node.data.length];
         }
-        else if (index >= info.size) {
-            index -= info.size;
+        else if (index >= nodeInfo.length) {
+            index -= nodeInfo.length;
             const nextSibling = walker.nextSibling();
             if (nextSibling === null) {
                 // This branch seems necessary mainly when working with data-content
                 // nodes.
-                if (node === root) {
+                if (node === _this) {
                     return [node, getNodeLength(node)];
                 }
                 return nodeOffsetFromChild(walker.currentNode, true);
@@ -624,42 +653,41 @@ function nodeOffsetFromChild(node, after = false) {
     }
     return [parentNode, offset];
 }
-function getSelectionRange(root, cache) {
-    const selection = window.getSelection();
+function getSelectionRange(_this) {
+    const selection = document.getSelection();
     if (!selection) {
-        return { selectionStart: 0, selectionEnd: 0, selectionDirection: "none" };
+        return { start: 0, end: 0, direction: "none" };
     }
     const { focusNode, focusOffset, anchorNode, anchorOffset, isCollapsed, } = selection;
-    const focus = Math.max(0, indexAt(root, cache, focusNode, focusOffset));
+    const focus = Math.max(0, indexAt(_this, focusNode, focusOffset));
     const anchor = isCollapsed
         ? focus
-        : Math.max(0, indexAt(root, cache, anchorNode, anchorOffset));
+        : Math.max(0, indexAt(_this, anchorNode, anchorOffset));
     return {
-        selectionStart: Math.min(focus, anchor),
-        selectionEnd: Math.max(focus, anchor),
-        selectionDirection: focus < anchor ? "backward" : focus > anchor ? "forward" : "none",
+        start: Math.min(focus, anchor),
+        end: Math.max(focus, anchor),
+        direction: focus < anchor ? "backward" : focus > anchor ? "forward" : "none",
     };
 }
-function setSelectionRange(root, cache, selectionStart, selectionEnd, selectionDirection) {
-    const selection = window.getSelection();
+function setSelectionRange(_this, { start, end, direction }) {
+    const selection = document.getSelection();
     if (!selection) {
         return;
     }
-    selectionStart = Math.max(0, selectionStart || 0);
-    selectionEnd = Math.max(0, selectionEnd || 0);
-    if (selectionEnd < selectionStart) {
-        selectionStart = selectionEnd;
+    start = Math.max(0, start || 0);
+    end = Math.max(0, end || 0);
+    if (end < start) {
+        start = end;
     }
-    const [focusIndex, anchorIndex] = selectionDirection === "backward"
-        ? [selectionStart, selectionEnd]
-        : [selectionEnd, selectionStart];
-    if (focusIndex === anchorIndex) {
-        const [node, offset] = nodeOffsetAt(root, cache, focusIndex);
+    // Focus is the side of the selection where the pointer is released.
+    const [focus, anchor] = direction === "backward" ? [start, end] : [end, start];
+    if (focus === anchor) {
+        const [node, offset] = nodeOffsetAt(_this, focus);
         selection.collapse(node, offset);
     }
     else {
-        const [anchorNode, anchorOffset] = nodeOffsetAt(root, cache, anchorIndex);
-        const [focusNode, focusOffset] = nodeOffsetAt(root, cache, focusIndex);
+        const [anchorNode, anchorOffset] = nodeOffsetAt(_this, anchor);
+        const [focusNode, focusOffset] = nodeOffsetAt(_this, focus);
         if (anchorNode === null && focusNode === null) {
             selection.collapse(null);
         }
@@ -670,7 +698,7 @@ function setSelectionRange(root, cache, selectionStart, selectionEnd, selectionD
             selection.collapse(anchorNode, anchorOffset);
         }
         else {
-            // This is not a method in IE. We don’t care.
+            // NOTE: This method is not implemented in IE.
             selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
         }
     }