@codemirror/view 6.14.0 → 6.14.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 6.14.1 (2023-07-06)
+
+### Bug fixes
+
+Fix an issue where scrolling up through line-wrapped text would sometimes cause the scroll position to pop down.
+
+Fix an issue where clicking wouldn't focus the editor on Firefox when it was in an iframe and already the active element of the frame.
+
+Fix a bug that could cause compositions to be disrupted because their surrounding DOM was repurposed for some other piece of content.
+
+Fix a bug where adding content to the editor could inappropriately move the scroll position.
+
+Extend detection of Enter presses on Android to `beforeInput` events with an `"insertLineBreak"` type.
+
 ## 6.14.0 (2023-06-23)
 
 ### Bug fixes

package/dist/index.cjs

@@ -320,6 +320,9 @@ function atElementStart(doc, selection) {
         }
     }
 }
+function isScrolledToBottom(elt) {
+    return elt.scrollTop > Math.max(1, elt.scrollHeight - elt.clientHeight - 4);
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -362,7 +365,7 @@ class ContentView {
             let prev = null, next;
             for (let child of this.children) {
                 if (child.dirty) {
-                    if (!child.dom && (next = prev ? prev.nextSibling : parent.firstChild)) {
+                    if (!child.dom && (next = prev ? prev.nextSibling : parent.firstChild) && next != view.docView.compositionNode) {
                         let contentView = ContentView.get(next);
                         if (!contentView || !contentView.parent && contentView.canReuseDOM(child))
                             child.reuseDOM(next);
@@ -2601,6 +2604,7 @@ class DocView extends ContentView {
         super();
         this.view = view;
         this.compositionDeco = Decoration.none;
+        this.compositionNode = null;
         this.decorations = [];
         this.dynamicDecorationMap = [];
         // Track a minimum width for the editor. When measuring sizes in
@@ -2640,10 +2644,8 @@ class DocView extends ContentView {
                 this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
             }
         }
-        if (this.view.inputState.composing < 0)
-            this.compositionDeco = Decoration.none;
-        else if (update.transactions.length || this.dirty)
-            this.compositionDeco = computeCompositionDeco(this.view, update.changes);
+        ({ deco: this.compositionDeco, node: this.compositionNode } =
+            this.view.inputState.composing < 0 ? noComp : computeCompositionDeco(this.view, update.changes));
         // 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.
@@ -3031,10 +3033,11 @@ function compositionSurroundingNode(view) {
         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 Decoration.none;
+        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);
@@ -3044,25 +3047,26 @@ function computeCompositionDeco(view, changes) {
         reader.readRange(node.firstChild, null);
     let { text } = reader;
     if (text.indexOf(LineBreakPlaceholder) > -1)
-        return Decoration.none; // Don't try to preserve multi-line compositions
+        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;
         else
-            return Decoration.none;
+            return noComp;
     }
     else if (state.doc.sliceString(newFrom, newTo) != text) {
-        return Decoration.none;
+        return noComp;
     }
     let topView = ContentView.get(node);
     if (topView instanceof CompositionView)
         topView = topView.widget.topView;
     else if (topView)
         topView.parent = null;
-    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView), inclusive: true })
+    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) {
@@ -3725,6 +3729,7 @@ class InputState {
 const PendingKeys = [
     { key: "Backspace", keyCode: 8, inputType: "deleteContentBackward" },
     { key: "Enter", keyCode: 13, inputType: "insertParagraph" },
+    { key: "Enter", keyCode: 13, inputType: "insertLineBreak" },
     { key: "Delete", keyCode: 46, inputType: "deleteContentForward" }
 ];
 const EmacsyPendingKeys = "dthko";
@@ -3969,7 +3974,7 @@ handlers.mousedown = (view, event) => {
     if (!style && event.button == 0)
         style = basicMouseSelection(view, event);
     if (style) {
-        let mustFocus = view.root.activeElement != view.contentDOM;
+        let mustFocus = !view.hasFocus;
         view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
         if (mustFocus)
             view.observer.ignore(() => focusPreventScroll(view.contentDOM));
@@ -5166,7 +5171,7 @@ class ViewState {
         let contentChanges = update.changedRanges;
         let heightChanges = ChangedRange.extendWithRanges(contentChanges, heightRelevantDecoChanges(prevDeco, this.stateDeco, update ? update.changes : state.ChangeSet.empty(this.state.doc.length)));
         let prevHeight = this.heightMap.height;
-        let scrollAnchor = this.scrolledToBottom ? null : this.lineBlockAtHeight(this.scrollTop);
+        let scrollAnchor = this.scrolledToBottom ? null : this.scrollAnchorAt(this.scrollTop);
         this.heightMap = this.heightMap.applyChanges(this.stateDeco, update.startState.doc, this.heightOracle.setDoc(this.state.doc), heightChanges);
         if (this.heightMap.height != prevHeight)
             update.flags |= 2 /* Height */;
@@ -5226,7 +5231,7 @@ class ViewState {
             this.scrollAnchorHeight = -1;
             this.scrollTop = view.scrollDOM.scrollTop;
         }
-        this.scrolledToBottom = this.scrollTop > view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight - 4;
+        this.scrolledToBottom = isScrolledToBottom(view.scrollDOM);
         // Pixel viewport
         let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
@@ -5469,6 +5474,10 @@ class ViewState {
     lineBlockAtHeight(height) {
         return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.heightOracle, 0, 0), this.scaler);
     }
+    scrollAnchorAt(scrollTop) {
+        let block = this.lineBlockAtHeight(scrollTop + 8);
+        return block.from >= this.viewport.from || this.viewportLines[0].top - scrollTop > 200 ? block : this.viewportLines[0];
+    }
     elementAtHeight(height) {
         return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.heightOracle, 0, 0), this.scaler);
     }
@@ -6841,22 +6850,23 @@ class EditorView {
         let updated = null;
         let sDOM = this.scrollDOM, { scrollTop } = sDOM;
         let { scrollAnchorPos, scrollAnchorHeight } = this.viewState;
+        if (scrollTop != this.viewState.scrollTop)
+            scrollAnchorHeight = -1;
         this.viewState.scrollAnchorHeight = -1;
-        if (scrollAnchorHeight < 0 || scrollTop != this.viewState.scrollTop) {
-            if (scrollTop > sDOM.scrollHeight - sDOM.clientHeight - 4) {
-                scrollAnchorPos = -1;
-                scrollAnchorHeight = this.viewState.heightMap.height;
-            }
-            else {
-                let block = this.viewState.lineBlockAtHeight(scrollTop);
-                scrollAnchorPos = block.from;
-                scrollAnchorHeight = block.top;
-            }
-        }
         try {
             for (let i = 0;; i++) {
+                if (scrollAnchorHeight < 0) {
+                    if (isScrolledToBottom(sDOM)) {
+                        scrollAnchorPos = -1;
+                        scrollAnchorHeight = this.viewState.heightMap.height;
+                    }
+                    else {
+                        let block = this.viewState.scrollAnchorAt(scrollTop);
+                        scrollAnchorPos = block.from;
+                        scrollAnchorHeight = block.top;
+                    }
+                }
                 this.updateState = 1 /* Measuring */;
-                let oldViewport = this.viewport;
                 let changed = this.viewState.measure(this);
                 if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
@@ -6879,7 +6889,7 @@ class EditorView {
                         return BadMeasure;
                     }
                 });
-                let update = ViewUpdate.create(this, this.state, []), redrawn = false, scrolled = false;
+                let update = ViewUpdate.create(this, this.state, []), redrawn = false;
                 update.flags |= changed;
                 if (!updated)
                     updated = update;
@@ -6903,28 +6913,28 @@ class EditorView {
                             logException(this.state, e);
                         }
                     }
-                if (this.viewState.editorHeight) {
-                    if (this.viewState.scrollTarget) {
-                        this.docView.scrollIntoView(this.viewState.scrollTarget);
-                        this.viewState.scrollTarget = null;
-                        scrolled = true;
-                    }
-                    else if (scrollAnchorHeight > -1) {
-                        let newAnchorHeight = scrollAnchorPos < 0 ? this.viewState.heightMap.height :
-                            this.viewState.lineBlockAt(scrollAnchorPos).top;
-                        let diff = newAnchorHeight - scrollAnchorHeight;
-                        if (diff > 1 || diff < -1) {
-                            sDOM.scrollTop = scrollTop + diff;
-                            scrolled = true;
-                        }
-                    }
-                }
                 if (redrawn)
                     this.docView.updateSelection(true);
-                if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to &&
-                    !scrolled && this.measureRequests.length == 0)
+                if (!update.viewportChanged && this.measureRequests.length == 0) {
+                    if (this.viewState.editorHeight) {
+                        if (this.viewState.scrollTarget) {
+                            this.docView.scrollIntoView(this.viewState.scrollTarget);
+                            this.viewState.scrollTarget = null;
+                            continue;
+                        }
+                        else {
+                            let newAnchorHeight = scrollAnchorPos < 0 ? this.viewState.heightMap.height :
+                                this.viewState.lineBlockAt(scrollAnchorPos).top;
+                            let diff = newAnchorHeight - scrollAnchorHeight;
+                            if (diff > 1 || diff < -1) {
+                                scrollTop = sDOM.scrollTop = scrollTop + diff;
+                                scrollAnchorHeight = -1;
+                                continue;
+                            }
+                        }
+                    }
                     break;
-                scrollAnchorHeight = -1;
+                }
             }
         }
         finally {

package/dist/index.js

@@ -316,6 +316,9 @@ function atElementStart(doc, selection) {
         }
     }
 }
+function isScrolledToBottom(elt) {
+    return elt.scrollTop > Math.max(1, elt.scrollHeight - elt.clientHeight - 4);
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -358,7 +361,7 @@ class ContentView {
             let prev = null, next;
             for (let child of this.children) {
                 if (child.dirty) {
-                    if (!child.dom && (next = prev ? prev.nextSibling : parent.firstChild)) {
+                    if (!child.dom && (next = prev ? prev.nextSibling : parent.firstChild) && next != view.docView.compositionNode) {
                         let contentView = ContentView.get(next);
                         if (!contentView || !contentView.parent && contentView.canReuseDOM(child))
                             child.reuseDOM(next);
@@ -2595,6 +2598,7 @@ class DocView extends ContentView {
         super();
         this.view = view;
         this.compositionDeco = Decoration.none;
+        this.compositionNode = null;
         this.decorations = [];
         this.dynamicDecorationMap = [];
         // Track a minimum width for the editor. When measuring sizes in
@@ -2634,10 +2638,8 @@ class DocView extends ContentView {
                 this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
             }
         }
-        if (this.view.inputState.composing < 0)
-            this.compositionDeco = Decoration.none;
-        else if (update.transactions.length || this.dirty)
-            this.compositionDeco = computeCompositionDeco(this.view, update.changes);
+        ({ deco: this.compositionDeco, node: this.compositionNode } =
+            this.view.inputState.composing < 0 ? noComp : computeCompositionDeco(this.view, update.changes));
         // 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.
@@ -3025,10 +3027,11 @@ function compositionSurroundingNode(view) {
         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 Decoration.none;
+        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);
@@ -3038,25 +3041,26 @@ function computeCompositionDeco(view, changes) {
         reader.readRange(node.firstChild, null);
     let { text } = reader;
     if (text.indexOf(LineBreakPlaceholder) > -1)
-        return Decoration.none; // Don't try to preserve multi-line compositions
+        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;
         else
-            return Decoration.none;
+            return noComp;
     }
     else if (state.doc.sliceString(newFrom, newTo) != text) {
-        return Decoration.none;
+        return noComp;
     }
     let topView = ContentView.get(node);
     if (topView instanceof CompositionView)
         topView = topView.widget.topView;
     else if (topView)
         topView.parent = null;
-    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView), inclusive: true })
+    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) {
@@ -3719,6 +3723,7 @@ class InputState {
 const PendingKeys = [
     { key: "Backspace", keyCode: 8, inputType: "deleteContentBackward" },
     { key: "Enter", keyCode: 13, inputType: "insertParagraph" },
+    { key: "Enter", keyCode: 13, inputType: "insertLineBreak" },
     { key: "Delete", keyCode: 46, inputType: "deleteContentForward" }
 ];
 const EmacsyPendingKeys = "dthko";
@@ -3963,7 +3968,7 @@ handlers.mousedown = (view, event) => {
     if (!style && event.button == 0)
         style = basicMouseSelection(view, event);
     if (style) {
-        let mustFocus = view.root.activeElement != view.contentDOM;
+        let mustFocus = !view.hasFocus;
         view.inputState.startMouseSelection(new MouseSelection(view, event, style, mustFocus));
         if (mustFocus)
             view.observer.ignore(() => focusPreventScroll(view.contentDOM));
@@ -5159,7 +5164,7 @@ class ViewState {
         let contentChanges = update.changedRanges;
         let heightChanges = ChangedRange.extendWithRanges(contentChanges, heightRelevantDecoChanges(prevDeco, this.stateDeco, update ? update.changes : ChangeSet.empty(this.state.doc.length)));
         let prevHeight = this.heightMap.height;
-        let scrollAnchor = this.scrolledToBottom ? null : this.lineBlockAtHeight(this.scrollTop);
+        let scrollAnchor = this.scrolledToBottom ? null : this.scrollAnchorAt(this.scrollTop);
         this.heightMap = this.heightMap.applyChanges(this.stateDeco, update.startState.doc, this.heightOracle.setDoc(this.state.doc), heightChanges);
         if (this.heightMap.height != prevHeight)
             update.flags |= 2 /* Height */;
@@ -5219,7 +5224,7 @@ class ViewState {
             this.scrollAnchorHeight = -1;
             this.scrollTop = view.scrollDOM.scrollTop;
         }
-        this.scrolledToBottom = this.scrollTop > view.scrollDOM.scrollHeight - view.scrollDOM.clientHeight - 4;
+        this.scrolledToBottom = isScrolledToBottom(view.scrollDOM);
         // Pixel viewport
         let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
@@ -5462,6 +5467,10 @@ class ViewState {
     lineBlockAtHeight(height) {
         return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.heightOracle, 0, 0), this.scaler);
     }
+    scrollAnchorAt(scrollTop) {
+        let block = this.lineBlockAtHeight(scrollTop + 8);
+        return block.from >= this.viewport.from || this.viewportLines[0].top - scrollTop > 200 ? block : this.viewportLines[0];
+    }
     elementAtHeight(height) {
         return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.heightOracle, 0, 0), this.scaler);
     }
@@ -6834,22 +6843,23 @@ class EditorView {
         let updated = null;
         let sDOM = this.scrollDOM, { scrollTop } = sDOM;
         let { scrollAnchorPos, scrollAnchorHeight } = this.viewState;
+        if (scrollTop != this.viewState.scrollTop)
+            scrollAnchorHeight = -1;
         this.viewState.scrollAnchorHeight = -1;
-        if (scrollAnchorHeight < 0 || scrollTop != this.viewState.scrollTop) {
-            if (scrollTop > sDOM.scrollHeight - sDOM.clientHeight - 4) {
-                scrollAnchorPos = -1;
-                scrollAnchorHeight = this.viewState.heightMap.height;
-            }
-            else {
-                let block = this.viewState.lineBlockAtHeight(scrollTop);
-                scrollAnchorPos = block.from;
-                scrollAnchorHeight = block.top;
-            }
-        }
         try {
             for (let i = 0;; i++) {
+                if (scrollAnchorHeight < 0) {
+                    if (isScrolledToBottom(sDOM)) {
+                        scrollAnchorPos = -1;
+                        scrollAnchorHeight = this.viewState.heightMap.height;
+                    }
+                    else {
+                        let block = this.viewState.scrollAnchorAt(scrollTop);
+                        scrollAnchorPos = block.from;
+                        scrollAnchorHeight = block.top;
+                    }
+                }
                 this.updateState = 1 /* Measuring */;
-                let oldViewport = this.viewport;
                 let changed = this.viewState.measure(this);
                 if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
@@ -6872,7 +6882,7 @@ class EditorView {
                         return BadMeasure;
                     }
                 });
-                let update = ViewUpdate.create(this, this.state, []), redrawn = false, scrolled = false;
+                let update = ViewUpdate.create(this, this.state, []), redrawn = false;
                 update.flags |= changed;
                 if (!updated)
                     updated = update;
@@ -6896,28 +6906,28 @@ class EditorView {
                             logException(this.state, e);
                         }
                     }
-                if (this.viewState.editorHeight) {
-                    if (this.viewState.scrollTarget) {
-                        this.docView.scrollIntoView(this.viewState.scrollTarget);
-                        this.viewState.scrollTarget = null;
-                        scrolled = true;
-                    }
-                    else if (scrollAnchorHeight > -1) {
-                        let newAnchorHeight = scrollAnchorPos < 0 ? this.viewState.heightMap.height :
-                            this.viewState.lineBlockAt(scrollAnchorPos).top;
-                        let diff = newAnchorHeight - scrollAnchorHeight;
-                        if (diff > 1 || diff < -1) {
-                            sDOM.scrollTop = scrollTop + diff;
-                            scrolled = true;
-                        }
-                    }
-                }
                 if (redrawn)
                     this.docView.updateSelection(true);
-                if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to &&
-                    !scrolled && this.measureRequests.length == 0)
+                if (!update.viewportChanged && this.measureRequests.length == 0) {
+                    if (this.viewState.editorHeight) {
+                        if (this.viewState.scrollTarget) {
+                            this.docView.scrollIntoView(this.viewState.scrollTarget);
+                            this.viewState.scrollTarget = null;
+                            continue;
+                        }
+                        else {
+                            let newAnchorHeight = scrollAnchorPos < 0 ? this.viewState.heightMap.height :
+                                this.viewState.lineBlockAt(scrollAnchorPos).top;
+                            let diff = newAnchorHeight - scrollAnchorHeight;
+                            if (diff > 1 || diff < -1) {
+                                scrollTop = sDOM.scrollTop = scrollTop + diff;
+                                scrollAnchorHeight = -1;
+                                continue;
+                            }
+                        }
+                    }
                     break;
-                scrollAnchorHeight = -1;
+                }
             }
         }
         finally {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "6.14.0",
+  "version": "6.14.1",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",