@codemirror/view 6.14.1 → 6.15.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Annotation, Prec, Transaction, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
+import { EditorState, Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, findColumn, CharCategory, Annotation, Prec, Transaction, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { keyName, base, shift } from 'w3c-keyname';
 
@@ -96,13 +96,15 @@ function windowRect(win) {
 }
 function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
     let doc = dom.ownerDocument, win = doc.defaultView || window;
-    for (let cur = dom; cur;) {
+    for (let cur = dom, stop = false; cur && !stop;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
             if (top) {
                 bounding = windowRect(win);
             }
             else {
+                if (/^(fixed|sticky)$/.test(getComputedStyle(cur).position))
+                    stop = true;
                 if (cur.scrollHeight <= cur.clientHeight && cur.scrollWidth <= cur.clientWidth) {
                     cur = cur.assignedSlot || cur.parentNode;
                     continue;
@@ -334,7 +336,7 @@ class ContentView {
     constructor() {
         this.parent = null;
         this.dom = null;
-        this.dirty = 2 /* Node */;
+        this.flags = 2 /* NodeDirty */;
     }
     get overrideDOMText() { return null; }
     get posAtStart() {
@@ -356,18 +358,18 @@ class ContentView {
         return this.posBefore(view) + view.length;
     }
     sync(view, track) {
-        if (this.dirty & 2 /* Node */) {
+        if (this.flags & 2 /* NodeDirty */) {
             let parent = this.dom;
             let prev = null, next;
             for (let child of this.children) {
-                if (child.dirty) {
-                    if (!child.dom && (next = prev ? prev.nextSibling : parent.firstChild) && next != view.docView.compositionNode) {
+                if (child.flags & 7 /* Dirty */) {
+                    if (!child.dom && (next = prev ? prev.nextSibling : parent.firstChild)) {
                         let contentView = ContentView.get(next);
                         if (!contentView || !contentView.parent && contentView.canReuseDOM(child))
                             child.reuseDOM(next);
                     }
                     child.sync(view, track);
-                    child.dirty = 0 /* Not */;
+                    child.flags &= ~7 /* Dirty */;
                 }
                 next = prev ? prev.nextSibling : parent.firstChild;
                 if (track && !track.written && track.node == parent && next != child.dom)
@@ -387,11 +389,11 @@ class ContentView {
             while (next)
                 next = rm$1(next);
         }
-        else if (this.dirty & 1 /* Child */) {
+        else if (this.flags & 1 /* ChildDirty */) {
             for (let child of this.children)
-                if (child.dirty) {
+                if (child.flags & 7 /* Dirty */) {
                     child.sync(view, track);
-                    child.dirty = 0 /* Not */;
+                    child.flags &= ~7 /* Dirty */;
                 }
         }
     }
@@ -456,23 +458,23 @@ class ContentView {
             endDOM: toI < this.children.length && toI >= 0 ? this.children[toI].dom : null };
     }
     markDirty(andParent = false) {
-        this.dirty |= 2 /* Node */;
+        this.flags |= 2 /* NodeDirty */;
         this.markParentsDirty(andParent);
     }
     markParentsDirty(childList) {
         for (let parent = this.parent; parent; parent = parent.parent) {
             if (childList)
-                parent.dirty |= 2 /* Node */;
-            if (parent.dirty & 1 /* Child */)
+                parent.flags |= 2 /* NodeDirty */;
+            if (parent.flags & 1 /* ChildDirty */)
                 return;
-            parent.dirty |= 1 /* Child */;
+            parent.flags |= 1 /* ChildDirty */;
             childList = false;
         }
     }
     setParent(parent) {
         if (this.parent != parent) {
             this.parent = parent;
-            if (this.dirty)
+            if (this.flags & 7 /* Dirty */)
                 this.markParentsDirty(true);
         }
     }
@@ -523,7 +525,9 @@ class ContentView {
         return false;
     }
     become(other) { return false; }
-    canReuseDOM(other) { return other.constructor == this.constructor; }
+    canReuseDOM(other) {
+        return other.constructor == this.constructor && !((this.flags | other.flags) & 8 /* Composition */);
+    }
     // When this is a zero-length view with a side, this should return a
     // number <= 0 to indicate it is before its position, or a
     // number > 0 when after its position.
@@ -647,6 +651,113 @@ function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
     replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
 }
 
+const LineBreakPlaceholder = "\uffff";
+class DOMReader {
+    constructor(points, state) {
+        this.points = points;
+        this.text = "";
+        this.lineSeparator = state.facet(EditorState.lineSeparator);
+    }
+    append(text) {
+        this.text += text;
+    }
+    lineBreak() {
+        this.text += LineBreakPlaceholder;
+    }
+    readRange(start, end) {
+        if (!start)
+            return this;
+        let parent = start.parentNode;
+        for (let cur = start;;) {
+            this.findPointBefore(parent, cur);
+            let oldLen = this.text.length;
+            this.readNode(cur);
+            let next = cur.nextSibling;
+            if (next == end)
+                break;
+            let view = ContentView.get(cur), nextView = ContentView.get(next);
+            if (view && nextView ? view.breakAfter :
+                (view ? view.breakAfter : isBlockElement(cur)) ||
+                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
+                this.lineBreak();
+            cur = next;
+        }
+        this.findPointBefore(parent, end);
+        return this;
+    }
+    readTextNode(node) {
+        let text = node.nodeValue;
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, text.length);
+        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
+            let nextBreak = -1, breakSize = 1, m;
+            if (this.lineSeparator) {
+                nextBreak = text.indexOf(this.lineSeparator, off);
+                breakSize = this.lineSeparator.length;
+            }
+            else if (m = re.exec(text)) {
+                nextBreak = m.index;
+                breakSize = m[0].length;
+            }
+            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
+            if (nextBreak < 0)
+                break;
+            this.lineBreak();
+            if (breakSize > 1)
+                for (let point of this.points)
+                    if (point.node == node && point.pos > this.text.length)
+                        point.pos -= breakSize - 1;
+            off = nextBreak + breakSize;
+        }
+    }
+    readNode(node) {
+        if (node.cmIgnore)
+            return;
+        let view = ContentView.get(node);
+        let fromView = view && view.overrideDOMText;
+        if (fromView != null) {
+            this.findPointInside(node, fromView.length);
+            for (let i = fromView.iter(); !i.next().done;) {
+                if (i.lineBreak)
+                    this.lineBreak();
+                else
+                    this.append(i.value);
+            }
+        }
+        else if (node.nodeType == 3) {
+            this.readTextNode(node);
+        }
+        else if (node.nodeName == "BR") {
+            if (node.nextSibling)
+                this.lineBreak();
+        }
+        else if (node.nodeType == 1) {
+            this.readRange(node.firstChild, null);
+        }
+    }
+    findPointBefore(node, next) {
+        for (let point of this.points)
+            if (point.node == node && node.childNodes[point.offset] == next)
+                point.pos = this.text.length;
+    }
+    findPointInside(node, maxLen) {
+        for (let point of this.points)
+            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
+                point.pos = this.text.length + Math.min(maxLen, point.offset);
+    }
+}
+function isBlockElement(node) {
+    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
+}
+class DOMPoint {
+    constructor(node, offset) {
+        this.node = node;
+        this.offset = offset;
+        this.pos = -1;
+    }
+}
+
 let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
 let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
 const ie_edge = /*@__PURE__*//Edge\/(\d+)/.exec(nav.userAgent);
@@ -700,7 +811,10 @@ class TextView extends ContentView {
             this.createDOM(dom);
     }
     merge(from, to, source) {
-        if (source && (!(source instanceof TextView) || this.length - (to - from) + source.length > MaxJoinLen))
+        if ((this.flags & 8 /* Composition */) ||
+            source && (!(source instanceof TextView) ||
+                this.length - (to - from) + source.length > MaxJoinLen ||
+                (source.flags & 8 /* Composition */)))
             return false;
         this.text = this.text.slice(0, from) + (source ? source.text : "") + this.text.slice(to);
         this.markDirty();
@@ -710,6 +824,7 @@ class TextView extends ContentView {
         let result = new TextView(this.text.slice(from));
         this.text = this.text.slice(0, from);
         this.markDirty();
+        result.flags |= this.flags & 8 /* Composition */;
         return result;
     }
     localPosFromDOM(node, offset) {
@@ -741,16 +856,19 @@ class MarkView extends ContentView {
                 dom.setAttribute(name, this.mark.attrs[name]);
         return dom;
     }
+    canReuseDOM(other) {
+        return super.canReuseDOM(other) && !((this.flags | other.flags) & 8 /* Composition */);
+    }
     reuseDOM(node) {
         if (node.nodeName == this.mark.tagName.toUpperCase()) {
             this.setDOM(node);
-            this.dirty |= 4 /* Attrs */ | 2 /* Node */;
+            this.flags |= 4 /* AttrsDirty */ | 2 /* NodeDirty */;
         }
     }
     sync(view, track) {
         if (!this.dom)
             this.setDOM(this.setAttrs(document.createElement(this.mark.tagName)));
-        else if (this.dirty & 4 /* Attrs */)
+        else if (this.flags & 4 /* AttrsDirty */)
             this.setAttrs(this.dom);
         super.sync(view, track);
     }
@@ -829,7 +947,7 @@ class WidgetView extends ContentView {
         this.prevWidget = null;
     }
     static create(widget, length, side) {
-        return new (widget.customView || WidgetView)(widget, length, side);
+        return new WidgetView(widget, length, side);
     }
     split(from) {
         let result = WidgetView.create(this.widget, this.length - from, this.side);
@@ -907,129 +1025,6 @@ class WidgetView extends ContentView {
             this.widget.destroy(this.dom);
     }
 }
-class CompositionView extends WidgetView {
-    domAtPos(pos) {
-        let { topView, text } = this.widget;
-        if (!topView)
-            return new DOMPos(text, Math.min(pos, text.nodeValue.length));
-        return scanCompositionTree(pos, 0, topView, text, this.length - topView.length, (v, p) => v.domAtPos(p), (text, p) => new DOMPos(text, Math.min(p, text.nodeValue.length)));
-    }
-    sync() { this.setDOM(this.widget.toDOM()); }
-    localPosFromDOM(node, offset) {
-        let { topView, text } = this.widget;
-        if (!topView)
-            return Math.min(offset, this.length);
-        return posFromDOMInCompositionTree(node, offset, topView, text, this.length - topView.length);
-    }
-    ignoreMutation() { return false; }
-    get overrideDOMText() { return null; }
-    coordsAt(pos, side) {
-        let { topView, text } = this.widget;
-        if (!topView)
-            return textCoords(text, pos, side);
-        return scanCompositionTree(pos, side, topView, text, this.length - topView.length, (v, pos, side) => v.coordsAt(pos, side), (text, pos, side) => textCoords(text, pos, side));
-    }
-    destroy() {
-        var _a;
-        super.destroy();
-        (_a = this.widget.topView) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
-    get isEditable() { return true; }
-    canReuseDOM() { return true; }
-}
-// Uses the old structure of a chunk of content view frozen for
-// composition to try and find a reasonable DOM location for the given
-// offset.
-function scanCompositionTree(pos, side, view, text, dLen, enterView, fromText) {
-    if (view instanceof MarkView) {
-        for (let child = view.dom.firstChild; child; child = child.nextSibling) {
-            let desc = ContentView.get(child);
-            if (!desc) {
-                let inner = scanCompositionNode(pos, side, child, fromText);
-                if (typeof inner != "number")
-                    return inner;
-                pos = inner;
-            }
-            else {
-                let hasComp = contains(child, text);
-                let len = desc.length + (hasComp ? dLen : 0);
-                if (pos < len || pos == len && desc.getSide() <= 0)
-                    return hasComp ? scanCompositionTree(pos, side, desc, text, dLen, enterView, fromText) : enterView(desc, pos, side);
-                pos -= len;
-            }
-        }
-        return enterView(view, view.length, -1);
-    }
-    else if (view.dom == text) {
-        return fromText(text, pos, side);
-    }
-    else {
-        return enterView(view, pos, side);
-    }
-}
-function scanCompositionNode(pos, side, node, fromText) {
-    if (node.nodeType == 3) {
-        let len = node.nodeValue.length;
-        if (pos <= len)
-            return fromText(node, pos, side);
-        pos -= len;
-    }
-    else if (node.nodeType == 1 && node.contentEditable != "false") {
-        for (let child = node.firstChild; child; child = child.nextSibling) {
-            let inner = scanCompositionNode(pos, side, child, fromText);
-            if (typeof inner != "number")
-                return inner;
-            pos = inner;
-        }
-    }
-    return pos;
-}
-function posFromDOMInCompositionTree(node, offset, view, text, dLen) {
-    if (view instanceof MarkView) {
-        let pos = 0;
-        for (let child = view.dom.firstChild; child; child = child.nextSibling) {
-            let childView = ContentView.get(child);
-            if (childView) {
-                let hasComp = contains(child, text);
-                if (contains(child, node))
-                    return pos + (hasComp ? posFromDOMInCompositionTree(node, offset, childView, text, dLen)
-                        : childView.localPosFromDOM(node, offset));
-                pos += childView.length + (hasComp ? dLen : 0);
-            }
-            else {
-                let inner = posFromDOMInOpaqueNode(node, offset, child);
-                if (inner.result != null)
-                    return pos + inner.result;
-                pos += inner.size;
-            }
-        }
-    }
-    else if (view.dom == text) {
-        return Math.min(offset, text.nodeValue.length);
-    }
-    return view.localPosFromDOM(node, offset);
-}
-function posFromDOMInOpaqueNode(node, offset, target) {
-    if (target.nodeType == 3) {
-        return node == target ? { result: offset } : { size: target.nodeValue.length };
-    }
-    else if (target.nodeType == 1 && target.contentEditable != "false") {
-        let pos = 0;
-        for (let child = target.firstChild, i = 0;; child = child.nextSibling, i++) {
-            if (node == target && i == offset)
-                return { result: pos };
-            if (!child)
-                return { size: pos };
-            let inner = posFromDOMInOpaqueNode(node, offset, child);
-            if (inner.result != null)
-                return { result: offset + inner.result };
-            pos += inner.size;
-        }
-    }
-    else {
-        return target.contains(node) ? { result: 0 } : { size: 0 };
-    }
-}
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
 // uneditable inline content.
@@ -1149,16 +1144,20 @@ function combineAttrs(source, target) {
     }
     return target;
 }
-function attrsEq(a, b) {
+const noAttrs = /*@__PURE__*/Object.create(null);
+function attrsEq(a, b, ignore) {
     if (a == b)
         return true;
-    if (!a || !b)
-        return false;
+    if (!a)
+        a = noAttrs;
+    if (!b)
+        b = noAttrs;
     let keysA = Object.keys(a), keysB = Object.keys(b);
-    if (keysA.length != keysB.length)
+    if (keysA.length - (ignore && keysA.indexOf(ignore) > -1 ? 1 : 0) !=
+        keysB.length - (ignore && keysB.indexOf(ignore) > -1 ? 1 : 0))
         return false;
     for (let key of keysA) {
-        if (keysB.indexOf(key) == -1 || a[key] !== b[key])
+        if (key != ignore && (keysB.indexOf(key) == -1 || a[key] !== b[key]))
             return false;
     }
     return true;
@@ -1175,6 +1174,14 @@ function updateAttrs(dom, prev, attrs) {
                 dom.setAttribute(changed = name, attrs[name]);
     return !!changed;
 }
+function getAttrs(dom) {
+    let attrs = Object.create(null);
+    for (let i = 0; i < dom.attributes.length; i++) {
+        let attr = dom.attributes[i];
+        attrs[attr.name] = attr.value;
+    }
+    return attrs;
+}
 
 /**
 Widgets added to the content are described by subclasses of this
@@ -1239,10 +1246,6 @@ class WidgetType {
     /**
     @internal
     */
-    get customView() { return null; }
-    /**
-    @internal
-    */
     get isHidden() { return false; }
     /**
     This is called when the an instance of the widget is removed
@@ -1380,11 +1383,12 @@ class MarkDecoration extends Decoration {
         this.attrs = spec.attributes || null;
     }
     eq(other) {
+        var _a, _b;
         return this == other ||
             other instanceof MarkDecoration &&
                 this.tagName == other.tagName &&
-                this.class == other.class &&
-                attrsEq(this.attrs, other.attrs);
+                (this.class || ((_a = this.attrs) === null || _a === void 0 ? void 0 : _a.class)) == (other.class || ((_b = other.attrs) === null || _b === void 0 ? void 0 : _b.class)) &&
+                attrsEq(this.attrs, other.attrs, "class");
     }
     range(from, to = from) {
         if (from >= to)
@@ -1536,7 +1540,7 @@ class LineView extends ContentView {
     reuseDOM(node) {
         if (node.nodeName == "DIV") {
             this.setDOM(node);
-            this.dirty |= 4 /* Attrs */ | 2 /* Node */;
+            this.flags |= 4 /* AttrsDirty */ | 2 /* NodeDirty */;
         }
     }
     sync(view, track) {
@@ -1546,7 +1550,7 @@ class LineView extends ContentView {
             this.dom.className = "cm-line";
             this.prevAttrs = this.attrs ? null : undefined;
         }
-        else if (this.dirty & 4 /* Attrs */) {
+        else if (this.flags & 4 /* AttrsDirty */) {
             clearAttributes(this.dom);
             this.dom.className = "cm-line";
             this.prevAttrs = this.attrs ? null : undefined;
@@ -2486,121 +2490,14 @@ function moveVisually(line, order, dir, start, forward) {
     return EditorSelection.cursor(nextIndex + line.from, forward ? -1 : 1, span.level);
 }
 
-const LineBreakPlaceholder = "\uffff";
-class DOMReader {
-    constructor(points, state) {
-        this.points = points;
-        this.text = "";
-        this.lineSeparator = state.facet(EditorState.lineSeparator);
-    }
-    append(text) {
-        this.text += text;
-    }
-    lineBreak() {
-        this.text += LineBreakPlaceholder;
-    }
-    readRange(start, end) {
-        if (!start)
-            return this;
-        let parent = start.parentNode;
-        for (let cur = start;;) {
-            this.findPointBefore(parent, cur);
-            let oldLen = this.text.length;
-            this.readNode(cur);
-            let next = cur.nextSibling;
-            if (next == end)
-                break;
-            let view = ContentView.get(cur), nextView = ContentView.get(next);
-            if (view && nextView ? view.breakAfter :
-                (view ? view.breakAfter : isBlockElement(cur)) ||
-                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
-                this.lineBreak();
-            cur = next;
-        }
-        this.findPointBefore(parent, end);
-        return this;
-    }
-    readTextNode(node) {
-        let text = node.nodeValue;
-        for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, text.length);
-        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
-            let nextBreak = -1, breakSize = 1, m;
-            if (this.lineSeparator) {
-                nextBreak = text.indexOf(this.lineSeparator, off);
-                breakSize = this.lineSeparator.length;
-            }
-            else if (m = re.exec(text)) {
-                nextBreak = m.index;
-                breakSize = m[0].length;
-            }
-            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
-            if (nextBreak < 0)
-                break;
-            this.lineBreak();
-            if (breakSize > 1)
-                for (let point of this.points)
-                    if (point.node == node && point.pos > this.text.length)
-                        point.pos -= breakSize - 1;
-            off = nextBreak + breakSize;
-        }
-    }
-    readNode(node) {
-        if (node.cmIgnore)
-            return;
-        let view = ContentView.get(node);
-        let fromView = view && view.overrideDOMText;
-        if (fromView != null) {
-            this.findPointInside(node, fromView.length);
-            for (let i = fromView.iter(); !i.next().done;) {
-                if (i.lineBreak)
-                    this.lineBreak();
-                else
-                    this.append(i.value);
-            }
-        }
-        else if (node.nodeType == 3) {
-            this.readTextNode(node);
-        }
-        else if (node.nodeName == "BR") {
-            if (node.nextSibling)
-                this.lineBreak();
-        }
-        else if (node.nodeType == 1) {
-            this.readRange(node.firstChild, null);
-        }
-    }
-    findPointBefore(node, next) {
-        for (let point of this.points)
-            if (point.node == node && node.childNodes[point.offset] == next)
-                point.pos = this.text.length;
-    }
-    findPointInside(node, maxLen) {
-        for (let point of this.points)
-            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
-                point.pos = this.text.length + Math.min(maxLen, point.offset);
-    }
-}
-function isBlockElement(node) {
-    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
-}
-class DOMPoint {
-    constructor(node, offset) {
-        this.node = node;
-        this.offset = offset;
-        this.pos = -1;
-    }
-}
-
 class DocView extends ContentView {
     constructor(view) {
         super();
         this.view = view;
-        this.compositionDeco = Decoration.none;
-        this.compositionNode = null;
         this.decorations = [];
         this.dynamicDecorationMap = [];
+        this.hasComposition = null;
+        this.markedForComposition = new Set;
         // Track a minimum width for the editor. When measuring sizes in
         // measureVisibleLineHeights, this is updated to point at the width
         // of a given element and its extent in the document. When a change
@@ -2623,7 +2520,7 @@ class DocView extends ContentView {
         this.children = [new LineView];
         this.children[0].setParent(this);
         this.updateDeco();
-        this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
+        this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0, null);
     }
     get length() { return this.view.state.doc.length; }
     // Update the document view to a given state.
@@ -2638,24 +2535,30 @@ class DocView extends ContentView {
                 this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
             }
         }
-        ({ deco: this.compositionDeco, node: this.compositionNode } =
-            this.view.inputState.composing < 0 ? noComp : computeCompositionDeco(this.view, update.changes));
+        let composition = this.view.inputState.composing < 0 ? null : findCompositionRange(this.view, update.changes);
+        if (this.hasComposition) {
+            this.markedForComposition.clear();
+            let { from, to } = this.hasComposition;
+            changedRanges = new ChangedRange(from, to, update.changes.mapPos(from, -1), update.changes.mapPos(to, 1))
+                .addToSet(changedRanges.slice());
+        }
+        this.hasComposition = composition ? { from: composition.range.fromB, to: composition.range.toB } : null;
         // When the DOM nodes around the selection are moved to another
         // parent, Chrome sometimes reports a different selection through
         // getSelection than the one that it actually shows to the user.
         // This forces a selection update when lines are joined to work
         // around that. Issue #54
-        if ((browser.ie || browser.chrome) && !this.compositionDeco.size && update &&
+        if ((browser.ie || browser.chrome) && !composition && update &&
             update.state.doc.lines != update.startState.doc.lines)
             this.forceSelection = true;
         let prevDeco = this.decorations, deco = this.updateDeco();
         let decoDiff = findChangedDeco(prevDeco, deco, update.changes);
         changedRanges = ChangedRange.extendWithRanges(changedRanges, decoDiff);
-        if (this.dirty == 0 /* Not */ && changedRanges.length == 0) {
+        if (!(this.flags & 7 /* Dirty */) && changedRanges.length == 0) {
             return false;
         }
         else {
-            this.updateInner(changedRanges, update.startState.doc.length);
+            this.updateInner(changedRanges, update.startState.doc.length, composition);
             if (update.transactions.length)
                 this.lastUpdate = Date.now();
             return true;
@@ -2663,9 +2566,9 @@ class DocView extends ContentView {
     }
     // Used by update and the constructor do perform the actual DOM
     // update
-    updateInner(changes, oldLength) {
+    updateInner(changes, oldLength, composition) {
         this.view.viewState.mustMeasureContent = true;
-        this.updateChildren(changes, oldLength);
+        this.updateChildren(changes, oldLength, composition);
         let { observer } = this.view;
         observer.ignore(() => {
             // Lock the height during redrawing, since Chrome sometimes
@@ -2680,11 +2583,12 @@ class DocView extends ContentView {
             // to detect that situation.
             let track = browser.chrome || browser.ios ? { node: observer.selectionRange.focusNode, written: false } : undefined;
             this.sync(this.view, track);
-            this.dirty = 0 /* Not */;
+            this.flags &= ~7 /* Dirty */;
             if (track && (track.written || observer.selectionRange.focusNode != track.node))
                 this.forceSelection = true;
             this.dom.style.height = "";
         });
+        this.markedForComposition.forEach(cView => cView.flags &= ~8 /* Composition */);
         let gaps = [];
         if (this.view.viewport.from || this.view.viewport.to < this.view.state.doc.length)
             for (let child of this.children)
@@ -2692,18 +2596,71 @@ class DocView extends ContentView {
                     gaps.push(child.dom);
         observer.updateGaps(gaps);
     }
-    updateChildren(changes, oldLength) {
+    updateChildren(changes, oldLength, composition) {
+        let ranges = composition ? composition.range.addToSet(changes.slice()) : changes;
         let cursor = this.childCursor(oldLength);
-        for (let i = changes.length - 1;; i--) {
-            let next = i >= 0 ? changes[i] : null;
+        for (let i = ranges.length - 1;; i--) {
+            let next = i >= 0 ? ranges[i] : null;
             if (!next)
                 break;
-            let { fromA, toA, fromB, toB } = next;
-            let { content, breakAtStart, openStart, openEnd } = ContentBuilder.build(this.view.state.doc, fromB, toB, this.decorations, this.dynamicDecorationMap);
+            let { fromA, toA, fromB, toB } = next, content, breakAtStart, openStart, openEnd;
+            if (composition && composition.range.fromB < toB && composition.range.toB > fromB) {
+                let before = ContentBuilder.build(this.view.state.doc, fromB, composition.range.fromB, this.decorations, this.dynamicDecorationMap);
+                let after = ContentBuilder.build(this.view.state.doc, composition.range.toB, toB, this.decorations, this.dynamicDecorationMap);
+                breakAtStart = before.breakAtStart;
+                openStart = before.openStart;
+                openEnd = after.openEnd;
+                let compLine = this.compositionView(composition);
+                if (after.content.length) {
+                    compLine.breakAfter = after.content[0].breakAfter;
+                    if (compLine.merge(compLine.length, compLine.length, after.content[0], false, after.openStart, 0))
+                        after.content.shift();
+                }
+                if (before.content.length) {
+                    if (compLine.merge(0, 0, before.content[before.content.length - 1], true, 0, before.openEnd))
+                        before.content.pop();
+                }
+                content = before.content.concat(compLine).concat(after.content);
+            }
+            else {
+                ({ content, breakAtStart, openStart, openEnd } =
+                    ContentBuilder.build(this.view.state.doc, fromB, toB, this.decorations, this.dynamicDecorationMap));
+            }
             let { i: toI, off: toOff } = cursor.findPos(toA, 1);
             let { i: fromI, off: fromOff } = cursor.findPos(fromA, -1);
             replaceRange(this, fromI, fromOff, toI, toOff, content, breakAtStart, openStart, openEnd);
         }
+        if (composition)
+            this.fixCompositionDOM(composition);
+    }
+    compositionView(composition) {
+        let cur = new TextView(composition.text.nodeValue);
+        cur.flags |= 8 /* Composition */;
+        for (let { deco } of composition.marks)
+            cur = new MarkView(deco, [cur], cur.length);
+        let line = new LineView;
+        line.append(cur, 0);
+        return line;
+    }
+    fixCompositionDOM(composition) {
+        let fix = (dom, cView) => {
+            cView.flags |= 8 /* Composition */;
+            this.markedForComposition.add(cView);
+            let prev = ContentView.get(dom);
+            if (prev != cView) {
+                if (prev)
+                    prev.dom = null;
+                cView.setDOM(dom);
+            }
+        };
+        let pos = this.childPos(composition.range.fromB, 1);
+        let cView = this.children[pos.i];
+        fix(composition.line, cView);
+        for (let i = composition.marks.length - 1; i >= -1; i--) {
+            pos = cView.childPos(pos.off, 1);
+            cView = cView.children[pos.i];
+            fix(i >= 0 ? composition.marks[i].node : composition.text, cView);
+        }
     }
     // Sync the DOM selection to this.state.selection
     updateSelection(mustRead = false, fromPointer = false) {
@@ -2722,7 +2679,7 @@ class DocView extends ContentView {
         let head = main.empty ? anchor : this.domAtPos(main.head);
         // Always reset on Firefox when next to an uneditable node to
         // avoid invisible cursor bugs (#111)
-        if (browser.gecko && main.empty && !this.compositionDeco.size && betweenUneditable(anchor)) {
+        if (browser.gecko && main.empty && !this.hasComposition && betweenUneditable(anchor)) {
             let dummy = document.createTextNode("");
             this.view.observer.ignore(() => anchor.node.insertBefore(dummy, anchor.node.childNodes[anchor.offset] || null));
             anchor = head = new DOMPos(dummy, 0);
@@ -2794,7 +2751,7 @@ class DocView extends ContentView {
         this.impreciseHead = head.precise ? null : new DOMPos(domSel.focusNode, domSel.focusOffset);
     }
     enforceCursorAssoc() {
-        if (this.compositionDeco.size)
+        if (this.hasComposition)
             return;
         let { view } = this, cursor = view.state.selection.main;
         let sel = getSelection(view.root);
@@ -2904,6 +2861,7 @@ class DocView extends ContentView {
         let dummy = document.createElement("div"), lineHeight, charWidth, textHeight;
         dummy.className = "cm-line";
         dummy.style.width = "99999px";
+        dummy.style.position = "absolute";
         dummy.textContent = "abc def ghi jkl mno pqr stu";
         this.view.observer.ignore(() => {
             this.dom.appendChild(dummy);
@@ -2953,7 +2911,6 @@ class DocView extends ContentView {
             this.dynamicDecorationMap[i] = false;
         return this.decorations = [
             ...allDeco,
-            this.compositionDeco,
             this.computeBlockGapDeco(),
             this.view.viewState.lineGapDeco
         ];
@@ -2996,83 +2953,86 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function compositionSurroundingNode(view) {
+function findCompositionNode(view) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
         return null;
-    let cView = view.docView.nearest(textNode);
-    if (!cView)
-        return null;
-    if (cView instanceof LineView) {
-        let topNode = textNode;
-        while (topNode.parentNode != cView.dom)
-            topNode = topNode.parentNode;
-        let prev = topNode.previousSibling;
-        while (prev && !ContentView.get(prev))
-            prev = prev.previousSibling;
-        let pos = prev ? ContentView.get(prev).posAtEnd : cView.posAtStart;
-        return { from: pos, to: pos, node: topNode, text: textNode };
+    let cView = ContentView.get(textNode);
+    let from, to;
+    if (cView instanceof TextView) {
+        from = cView.posAtStart;
+        to = from + cView.length;
     }
     else {
-        for (;;) {
-            let { parent } = cView;
-            if (!parent)
+        up: for (let offset = 0, node = textNode;;) {
+            for (let sibling = node.previousSibling, cView; sibling; sibling = sibling.previousSibling) {
+                if (cView = ContentView.get(sibling)) {
+                    from = to = cView.posAtEnd + offset;
+                    break up;
+                }
+                let reader = new DOMReader([], view.state);
+                reader.readNode(sibling);
+                if (reader.text.indexOf(LineBreakPlaceholder) > -1)
+                    return null;
+                offset += reader.text.length;
+            }
+            node = node.parentNode;
+            if (!node)
                 return null;
-            if (parent instanceof LineView)
+            let parentView = ContentView.get(node);
+            if (parentView) {
+                from = to = parentView.posAtStart + offset;
                 break;
-            cView = parent;
-        }
-        let from = cView.posAtStart;
-        return { from, to: from + cView.length, node: cView.dom, text: textNode };
-    }
-}
-const noComp = { deco: Decoration.none, node: null };
-function computeCompositionDeco(view, changes) {
-    let surrounding = compositionSurroundingNode(view);
-    if (!surrounding)
-        return noComp;
-    let { from, to, node, text: textNode } = surrounding;
-    let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
-    let { state } = view, reader = new DOMReader([], state);
-    if (node.nodeType == 3)
-        reader.readTextNode(node);
-    else
-        reader.readRange(node.firstChild, null);
-    let { text } = reader;
-    if (text.indexOf(LineBreakPlaceholder) > -1)
-        return noComp; // Don't try to preserve multi-line compositions
-    if (newTo - newFrom < text.length) {
-        if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
-            newTo = newFrom + text.length;
-        else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo) == text)
-            newFrom = newTo - text.length;
+            }
+        }
+    }
+    let { main } = view.state.selection;
+    return from > main.head || to < main.head ? null : { from, to, node: textNode };
+}
+function findCompositionRange(view, changes) {
+    let found = findCompositionNode(view);
+    if (!found)
+        return null;
+    let { from: fromA, to: toA, node: textNode } = found;
+    let fromB = changes.mapPos(fromA, -1), toB = changes.mapPos(toA, 1);
+    let text = textNode.nodeValue;
+    // Don't try to preserve multi-line compositions
+    if (/[\n\r]/.test(text))
+        return null;
+    if (toB - fromB != text.length) {
+        // If there is a length mismatch, see if mapping non-inclusively helps
+        let fromB2 = changes.mapPos(fromA, 1), toB2 = changes.mapPos(toA, -1);
+        if (toB2 - fromB2 == text.length)
+            fromB = fromB2, toB = toB2;
+        // See if we can find an instance of the text at either side
+        else if (view.state.doc.sliceString(toB - text.length, toB) == text)
+            fromB = toB - text.length;
+        else if (view.state.doc.sliceString(fromB, fromB + text.length) == text)
+            toB = fromB + text.length;
+        // Not found
         else
-            return noComp;
-    }
-    else if (state.doc.sliceString(newFrom, newTo) != text) {
-        return noComp;
-    }
-    let topView = ContentView.get(node);
-    if (topView instanceof CompositionView)
-        topView = topView.widget.topView;
-    else if (topView)
-        topView.parent = null;
-    let deco = Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView), inclusive: true })
-        .range(newFrom, newTo));
-    return { deco, node };
-}
-class CompositionWidget extends WidgetType {
-    constructor(top, text, topView) {
-        super();
-        this.top = top;
-        this.text = text;
-        this.topView = topView;
+            return null;
+    }
+    if (view.state.doc.sliceString(fromB, toB) != text)
+        return null;
+    let marks = [];
+    let range = new ChangedRange(fromA, toA, fromB, toB);
+    for (let parent = textNode.parentNode;; parent = parent.parentNode) {
+        let parentView = ContentView.get(parent);
+        if (parentView instanceof MarkView)
+            marks.push({ node: parent, deco: parentView.mark });
+        else if (parentView instanceof LineView || parent.nodeName == "DIV" && parent.parentNode == view.contentDOM)
+            return { range, text: textNode, marks, line: parent };
+        else if (parent != view.contentDOM)
+            marks.push({ node: parent, deco: new MarkDecoration({
+                    inclusive: true,
+                    attributes: getAttrs(parent),
+                    tagName: parent.tagName.toLowerCase()
+                }) });
+        else
+            return null;
     }
-    eq(other) { return this.top == other.top && this.text == other.text; }
-    toDOM() { return this.top; }
-    ignoreEvent() { return false; }
-    get customView() { return CompositionView; }
 }
 function nearbyTextNode(startNode, startOffset, side) {
     if (side <= 0)
@@ -3733,9 +3693,13 @@ const dragScrollMargin = 6;
 function dragScrollSpeed(dist) {
     return Math.max(0, dist) * 0.7 + 8;
 }
+function dist(a, b) {
+    return Math.max(Math.abs(a.clientX - b.clientX), Math.abs(a.clientY - b.clientY));
+}
 class MouseSelection {
     constructor(view, startEvent, style, mustSelect) {
         this.view = view;
+        this.startEvent = startEvent;
         this.style = style;
         this.mustSelect = mustSelect;
         this.scrollSpeed = { x: 0, y: 0 };
@@ -3762,7 +3726,7 @@ class MouseSelection {
         var _a;
         if (event.buttons == 0)
             return this.destroy();
-        if (this.dragging !== false)
+        if (this.dragging || this.dragging == null && dist(this.startEvent, event) < 10)
             return;
         this.select(this.lastEvent = event);
         let sx = 0, sy = 0;
@@ -3841,7 +3805,7 @@ class MouseSelection {
     select(event) {
         let { view } = this, selection = this.skipAtoms(this.style.get(event, this.extend, this.multiple));
         if (this.mustSelect || !selection.eq(view.state.selection) ||
-            selection.main.assoc != view.state.selection.main.assoc)
+            selection.main.assoc != view.state.selection.main.assoc && this.dragging === false)
             this.view.dispatch({
                 selection,
                 userEvent: "select.pointer"
@@ -4260,7 +4224,7 @@ handlers.compositionend = view => {
         // Otherwise, make sure that, if no changes come in soon, the
         // composition view is cleared.
         setTimeout(() => {
-            if (view.inputState.composing < 0 && view.docView.compositionDeco.size)
+            if (view.inputState.composing < 0 && view.docView.hasComposition)
                 view.update([]);
         }, 50);
     }
@@ -5976,7 +5940,7 @@ function applyDOMChange(view, domChange) {
             if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
                 change.to <= sel.to && change.to >= sel.to - 10) {
                 let replaced = view.state.sliceDoc(change.from, change.to);
-                let compositionRange = compositionSurroundingNode(view) || view.state.doc.lineAt(sel.head);
+                let composition = findCompositionNode(view) || view.state.doc.lineAt(sel.head);
                 let offset = sel.to - change.to, size = sel.to - sel.from;
                 tr = startState.changeByRange(range => {
                     if (range.from == sel.from && range.to == sel.to)
@@ -5987,7 +5951,7 @@ function applyDOMChange(view, domChange) {
                         // changes in the same node work without aborting
                         // composition, so cursors in the composition range are
                         // ignored.
-                        compositionRange && range.to >= compositionRange.from && range.from <= compositionRange.to)
+                        composition && range.to >= composition.from && range.from <= composition.to)
                         return { range };
                     let rangeChanges = startState.changes({ from, to, insert: change.insert }), selOff = range.to - sel.to;
                     return {
@@ -6448,7 +6412,7 @@ class DOMObserver {
             return null;
         cView.markDirty(rec.type == "attributes");
         if (rec.type == "attributes")
-            cView.dirty |= 4 /* Attrs */;
+            cView.flags |= 4 /* AttrsDirty */;
         if (rec.type == "childList") {
             let childBefore = findChild(cView, rec.previousSibling || rec.target.previousSibling, -1);
             let childAfter = findChild(cView, rec.nextSibling || rec.target.nextSibling, 1);
@@ -7622,7 +7586,7 @@ function buildKeymap(bindings, platform = currentPlatform) {
         else if (current != is)
             throw new Error("Key binding " + name + " is used both as a regular binding and as a multi-stroke prefix");
     };
-    let add = (scope, key, command, preventDefault) => {
+    let add = (scope, key, command, preventDefault, stopPropagation) => {
         var _a, _b;
         let scopeObj = bound[scope] || (bound[scope] = Object.create(null));
         let parts = key.split(/ (?!$)/).map(k => normalizeKeyName(k, platform));
@@ -7632,6 +7596,7 @@ function buildKeymap(bindings, platform = currentPlatform) {
             if (!scopeObj[prefix])
                 scopeObj[prefix] = {
                     preventDefault: true,
+                    stopPropagation: false,
                     run: [(view) => {
                             let ourObj = storedPrefix = { view, prefix, scope };
                             setTimeout(() => { if (storedPrefix == ourObj)
@@ -7642,11 +7607,17 @@ function buildKeymap(bindings, platform = currentPlatform) {
         }
         let full = parts.join(" ");
         checkPrefix(full, false);
-        let binding = scopeObj[full] || (scopeObj[full] = { preventDefault: false, run: ((_b = (_a = scopeObj._any) === null || _a === void 0 ? void 0 : _a.run) === null || _b === void 0 ? void 0 : _b.slice()) || [] });
+        let binding = scopeObj[full] || (scopeObj[full] = {
+            preventDefault: false,
+            stopPropagation: false,
+            run: ((_b = (_a = scopeObj._any) === null || _a === void 0 ? void 0 : _a.run) === null || _b === void 0 ? void 0 : _b.slice()) || []
+        });
         if (command)
             binding.run.push(command);
         if (preventDefault)
             binding.preventDefault = true;
+        if (stopPropagation)
+            binding.stopPropagation = true;
     };
     for (let b of bindings) {
         let scopes = b.scope ? b.scope.split(" ") : ["editor"];
@@ -7654,7 +7625,7 @@ function buildKeymap(bindings, platform = currentPlatform) {
             for (let scope of scopes) {
                 let scopeObj = bound[scope] || (bound[scope] = Object.create(null));
                 if (!scopeObj._any)
-                    scopeObj._any = { preventDefault: false, run: [] };
+                    scopeObj._any = { preventDefault: false, stopPropagation: false, run: [] };
                 for (let key in scopeObj)
                     scopeObj[key].run.push(b.any);
             }
@@ -7662,9 +7633,9 @@ function buildKeymap(bindings, platform = currentPlatform) {
         if (!name)
             continue;
         for (let scope of scopes) {
-            add(scope, name, b.run, b.preventDefault);
+            add(scope, name, b.run, b.preventDefault, b.stopPropagation);
             if (b.shift)
-                add(scope, "Shift-" + name, b.shift, b.preventDefault);
+                add(scope, "Shift-" + name, b.shift, b.preventDefault, b.stopPropagation);
         }
     }
     return bound;
@@ -7672,11 +7643,13 @@ function buildKeymap(bindings, platform = currentPlatform) {
 function runHandlers(map, event, view, scope) {
     let name = keyName(event);
     let charCode = codePointAt(name, 0), isChar = codePointSize(charCode) == name.length && name != " ";
-    let prefix = "", fallthrough = false;
+    let prefix = "", handled = false, prevented = false, stopPropagation = false;
     if (storedPrefix && storedPrefix.view == view && storedPrefix.scope == scope) {
         prefix = storedPrefix.prefix + " ";
-        if (fallthrough = modifierCodes.indexOf(event.keyCode) < 0)
+        if (modifierCodes.indexOf(event.keyCode) < 0) {
+            prevented = true;
             storedPrefix = null;
+        }
     }
     let ran = new Set;
     let runFor = (binding) => {
@@ -7684,36 +7657,49 @@ function runHandlers(map, event, view, scope) {
             for (let cmd of binding.run)
                 if (!ran.has(cmd)) {
                     ran.add(cmd);
-                    if (cmd(view, event))
+                    if (cmd(view, event)) {
+                        if (binding.stopPropagation)
+                            stopPropagation = true;
                         return true;
+                    }
                 }
-            if (binding.preventDefault)
-                fallthrough = true;
+            if (binding.preventDefault) {
+                if (binding.stopPropagation)
+                    stopPropagation = true;
+                prevented = true;
+            }
         }
         return false;
     };
     let scopeObj = map[scope], baseName, shiftName;
     if (scopeObj) {
-        if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
-            return true;
-        if (isChar && (event.altKey || event.metaKey || event.ctrlKey) &&
+        if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)])) {
+            handled = true;
+        }
+        else if (isChar && (event.altKey || event.metaKey || event.ctrlKey) &&
             // Ctrl-Alt may be used for AltGr on Windows
             !(browser.windows && event.ctrlKey && event.altKey) &&
             (baseName = base[event.keyCode]) && baseName != name) {
-            if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
-                return true;
+            if (runFor(scopeObj[prefix + modifiers(baseName, event, true)])) {
+                handled = true;
+            }
             else if (event.shiftKey && (shiftName = shift[event.keyCode]) != name && shiftName != baseName &&
-                runFor(scopeObj[prefix + modifiers(shiftName, event, false)]))
-                return true;
+                runFor(scopeObj[prefix + modifiers(shiftName, event, false)])) {
+                handled = true;
+            }
         }
-        else if (isChar && event.shiftKey) {
-            if (runFor(scopeObj[prefix + modifiers(name, event, true)]))
-                return true;
+        else if (isChar && event.shiftKey &&
+            runFor(scopeObj[prefix + modifiers(name, event, true)])) {
+            handled = true;
         }
-        if (runFor(scopeObj._any))
-            return true;
+        if (!handled && runFor(scopeObj._any))
+            handled = true;
     }
-    return fallthrough;
+    if (prevented)
+        handled = true;
+    if (handled && stopPropagation)
+        event.stopPropagation();
+    return handled;
 }
 
 /**
@@ -8500,7 +8486,9 @@ function placeholder(content) {
     return ViewPlugin.fromClass(class {
         constructor(view) {
             this.view = view;
-            this.placeholder = Decoration.set([Decoration.widget({ widget: new Placeholder(content), side: 1 }).range(0)]);
+            this.placeholder = content
+                ? Decoration.set([Decoration.widget({ widget: new Placeholder(content), side: 1 }).range(0)])
+                : Decoration.none;
         }
         get decorations() { return this.view.state.doc.length ? Decoration.none : this.placeholder; }
     }, { decorations: v => v.decorations });