@b9g/revise 0.1.2 → 0.1.3

package/contentarea.cjs

@@ -5,43 +5,40 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var edit = require('./edit.cjs');
 
 /// <reference lib="dom" />
-// TODO: custom newlines?
-const NEWLINE = "\n";
-class ContentEvent extends CustomEvent {
-    constructor(typeArg, eventInit) {
-        // Maybe we should do some runtime eventInit validation.
-        super(typeArg, { bubbles: true, ...eventInit });
-    }
-}
-/********************************************/
+/***************************************************/
 /*** ContentAreaElement private property symbols ***/
-/********************************************/
-const _cache = Symbol.for("ContentAreaElement._cache");
-const _value = Symbol.for("ContentAreaElement._value");
-const _observer = Symbol.for("ContentAreaElement._observer");
-const _onselectionchange = Symbol.for("ContentAreaElement._onselectionchange");
-const _selectionStart = Symbol.for("ContentAreaElement._selectionStart");
+/***************************************************/
+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();
         this[_cache] = new Map();
-        this[_value] = "";
         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] = () => {
-            // We keep track of the starting node offset pair to accurately diff
-            // edits to text nodes.
-            validate(this);
-            this[_selectionStart] = getSelectionRange(this).start;
+            this[_selectionRange] = getSelectionRange(this);
         };
-        this.addEventListener("input", () => {
-            // This is necessary for Safari bugs where fast-repeating edits which
-            // cause >40ms of execution cause the selection to lag and make pending
-            // edits appear elsewhere in the DOM.
-            validate(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 ***/
@@ -51,7 +48,9 @@ class ContentAreaElement extends HTMLElement {
             subtree: true,
             childList: true,
             characterData: true,
+            characterDataOldValue: true,
             attributes: true,
+            attributeOldValue: true,
             attributeFilter: [
                 "data-content",
                 // TODO: implement these attributes
@@ -59,10 +58,54 @@ class ContentAreaElement extends HTMLElement {
                 //"data-contentafter",
             ],
         });
-        validate(this);
         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$1 = edit.Edit.diff(this[_compositionStartValue], this[_value], this[_compositionSelectionRange].start);
+                const ev = new ContentEvent("contentchange", {
+                    detail: { edit: edit$1, 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();
@@ -76,11 +119,12 @@ class ContentAreaElement extends HTMLElement {
     }
     get value() {
         validate(this);
-        return this[_value];
+        return this[_staleValue] == null ? this[_value] : this[_staleValue];
     }
     get selectionStart() {
         validate(this);
-        return getSelectionRange(this).start;
+        const range = this[_staleSelectionRange] || this[_selectionRange];
+        return range.start;
     }
     set selectionStart(start) {
         validate(this);
@@ -89,7 +133,8 @@ class ContentAreaElement extends HTMLElement {
     }
     get selectionEnd() {
         validate(this);
-        return getSelectionRange(this).end;
+        const range = this[_staleSelectionRange] || this[_selectionRange];
+        return range.end;
     }
     set selectionEnd(end) {
         validate(this);
@@ -98,13 +143,19 @@ class ContentAreaElement extends HTMLElement {
     }
     get selectionDirection() {
         validate(this);
-        return getSelectionRange(this).direction;
+        const range = this[_staleSelectionRange] || this[_selectionRange];
+        return range.direction;
     }
     set selectionDirection(direction) {
         validate(this);
         const { start, end } = getSelectionRange(this);
         setSelectionRange(this, { start, end, direction });
     }
+    getSelectionRange() {
+        validate(this);
+        const range = this[_staleSelectionRange] || this[_selectionRange];
+        return { ...range };
+    }
     setSelectionRange(start, end, direction = "none") {
         validate(this);
         setSelectionRange(this, { start, end, direction });
@@ -121,6 +172,58 @@ class ContentAreaElement extends HTMLElement {
         return validate(this, this[_observer].takeRecords(), source);
     }
 }
+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 });
+    }
+    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);
+    }
+}
 /*** NodeInfo.flags ***/
 /** Whether the node is old. */
 const IS_OLD = 1 << 0;
@@ -135,9 +238,9 @@ 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;
-        this.flags = 0;
     }
 }
 /**
@@ -153,14 +256,23 @@ 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[_selectionStart]);
+    const edit = diff(_this, oldValue, _this[_selectionRange].start);
     _this[_value] = edit.apply(oldValue);
-    const ev = new ContentEvent("contentchange", { detail: { edit, source } });
-    Promise.resolve().then(() => _this.dispatchEvent(ev));
+    _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(_this, records) {
@@ -177,7 +289,8 @@ function invalidate(_this, records) {
         // 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);
@@ -197,14 +310,14 @@ function invalidate(_this, records) {
             }
             const nodeInfo = cache.get(node);
             if (nodeInfo) {
-                nodeInfo.flags &= ~IS_VALID;
+                nodeInfo.f &= ~IS_VALID;
             }
             invalid = true;
         }
     }
     if (invalid) {
         const nodeInfo = cache.get(_this);
-        nodeInfo.flags &= ~IS_VALID;
+        nodeInfo.f &= ~IS_VALID;
     }
     return invalid;
 }
@@ -218,6 +331,8 @@ function clear(parent, cache) {
         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
@@ -245,7 +360,7 @@ function diff(_this, oldValue, oldSelectionStart) {
             if (nodeInfo === undefined) {
                 cache.set(node, (nodeInfo = new NodeInfo(offset)));
                 if (isBlocklikeElement(node)) {
-                    nodeInfo.flags |= IS_BLOCKLIKE;
+                    nodeInfo.f |= IS_BLOCKLIKE;
                 }
             }
             else {
@@ -261,26 +376,26 @@ function diff(_this, oldValue, oldSelectionStart) {
                 }
                 nodeInfo.offset = offset;
             }
-            if (offset && !hasNewline && nodeInfo.flags & IS_BLOCKLIKE) {
+            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;
                 value += NEWLINE;
-                if (nodeInfo.flags & PREPENDS_NEWLINE) {
+                if (nodeInfo.f & PREPENDS_NEWLINE) {
                     oldIndex += NEWLINE.length;
                 }
-                nodeInfo.flags |= PREPENDS_NEWLINE;
+                nodeInfo.f |= PREPENDS_NEWLINE;
             }
             else {
-                if (nodeInfo.flags & PREPENDS_NEWLINE) {
+                if (nodeInfo.f & PREPENDS_NEWLINE) {
                     // deletion detected
                     oldIndex += NEWLINE.length;
                 }
-                nodeInfo.flags &= ~PREPENDS_NEWLINE;
+                nodeInfo.f &= ~PREPENDS_NEWLINE;
             }
             descending = false;
-            if (nodeInfo.flags & IS_VALID) {
+            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);
@@ -298,7 +413,7 @@ function diff(_this, oldValue, oldSelectionStart) {
                     offset += text.length;
                     hasNewline = text.endsWith(NEWLINE);
                 }
-                if (nodeInfo.flags & IS_OLD) {
+                if (nodeInfo.f & IS_OLD) {
                     oldIndex += nodeInfo.length;
                 }
             }
@@ -309,7 +424,7 @@ function diff(_this, oldValue, oldSelectionStart) {
                     offset += text.length;
                     hasNewline = text.endsWith(NEWLINE);
                 }
-                if (nodeInfo.flags & IS_OLD) {
+                if (nodeInfo.f & IS_OLD) {
                     oldIndex += nodeInfo.length;
                 }
             }
@@ -317,7 +432,7 @@ function diff(_this, oldValue, oldSelectionStart) {
                 value += NEWLINE;
                 offset += NEWLINE.length;
                 hasNewline = true;
-                if (nodeInfo.flags & IS_OLD) {
+                if (nodeInfo.f & IS_OLD) {
                     oldIndex += nodeInfo.length;
                 }
             }
@@ -337,7 +452,7 @@ function diff(_this, oldValue, oldSelectionStart) {
             }
             // If the child node prepends a newline, add to offset to increase the
             // length of the parent node.
-            if (nodeInfo.flags & PREPENDS_NEWLINE) {
+            if (nodeInfo.f & PREPENDS_NEWLINE) {
                 offset += NEWLINE.length;
             }
             ({ nodeInfo, oldIndexRelative } = stack.pop());
@@ -345,21 +460,21 @@ function diff(_this, oldValue, oldSelectionStart) {
         }
         if (!descending) {
             // POST-ORDER LOGIC
-            if (!(nodeInfo.flags & IS_VALID)) {
+            if (!(nodeInfo.f & IS_VALID)) {
                 // TODO: Figure out if we should always recalculate APPENDS_NEWLINE???
-                if (!hasNewline && nodeInfo.flags & IS_BLOCKLIKE) {
+                if (!hasNewline && nodeInfo.f & IS_BLOCKLIKE) {
                     value += NEWLINE;
                     offset += NEWLINE.length;
                     hasNewline = true;
-                    nodeInfo.flags |= APPENDS_NEWLINE;
+                    nodeInfo.f |= APPENDS_NEWLINE;
                 }
                 else {
-                    nodeInfo.flags &= ~APPENDS_NEWLINE;
+                    nodeInfo.f &= ~APPENDS_NEWLINE;
                 }
                 nodeInfo.length = offset - nodeInfo.offset;
-                nodeInfo.flags |= IS_VALID;
+                nodeInfo.f |= IS_VALID;
             }
-            nodeInfo.flags |= IS_OLD;
+            nodeInfo.f |= IS_OLD;
             descending = !!walker.nextSibling();
             if (!descending) {
                 if (walker.currentNode === _this) {
@@ -431,7 +546,7 @@ function indexAt(_this, node, offset) {
         else if (offset >= node.childNodes.length) {
             const nodeInfo = cache.get(node);
             index =
-                nodeInfo.flags & APPENDS_NEWLINE
+                nodeInfo.f & APPENDS_NEWLINE
                     ? nodeInfo.length - NEWLINE.length
                     : nodeInfo.length;
         }
@@ -449,14 +564,14 @@ function indexAt(_this, node, offset) {
                 // 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 = nodeInfo.flags & PREPENDS_NEWLINE ? -1 : 0;
+                index = nodeInfo.f & PREPENDS_NEWLINE ? -1 : 0;
             }
         }
     }
     for (; node !== _this; node = node.parentNode) {
         const nodeInfo = cache.get(node);
         index += nodeInfo.offset;
-        if (nodeInfo.flags & PREPENDS_NEWLINE) {
+        if (nodeInfo.f & PREPENDS_NEWLINE) {
             index += NEWLINE.length;
         }
     }
@@ -487,7 +602,7 @@ function findNodeOffset(_this, index) {
         if (nodeInfo == null) {
             return nodeOffsetFromChild(node, index > 0);
         }
-        if (nodeInfo.flags & PREPENDS_NEWLINE) {
+        if (nodeInfo.f & PREPENDS_NEWLINE) {
             index -= 1;
         }
         if (index === nodeInfo.length && node.nodeType === Node.TEXT_NODE) {
@@ -586,7 +701,7 @@ function setSelectionRange(_this, { start, end, direction }) {
             selection.collapse(anchorNode, anchorOffset);
         }
         else {
-            // This method is not implemented in IE.
+            // NOTE: This method is not implemented in IE.
             selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
         }
     }