@codemirror/view 6.8.1 → 6.9.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 6.9.1 (2023-02-17)
+
+### Bug fixes
+
+Improve the way `posAtCoords` picks the side of a widget to return by comparing the coordinates the center of the widget.
+
+Fix an issue where transactions created for the `focusChangeEffect` facet were sometimes not dispatched.
+
+## 6.9.0 (2023-02-15)
+
+### Bug fixes
+
+Fix an issue where inaccurate estimated vertical positions could cause the viewport to not converge in line-wrapped editors.
+
+Don't suppress double-space to period conversion when autocorrect is enabled.
+
+Make sure the measuring code notices when the scaling of the editor is changed, and does a full measure in that case.
+
+### New features
+
+The new `EditorView.focusChangeEffect` facet can be used to dispatch a state effect when the editor is focused or blurred.
+
 ## 6.8.1 (2023-02-08)
 
 ### Bug fixes

package/dist/index.cjs

@@ -519,6 +519,7 @@ class ContentView {
     }
     static get(node) { return node.cmView; }
     get isEditable() { return true; }
+    get isWidget() { return false; }
     merge(from, to, source, hasStart, openStart, openEnd) {
         return false;
     }
@@ -893,6 +894,7 @@ class WidgetView extends ContentView {
         return this.length ? rect : flattenRect(rect, this.side > 0);
     }
     get isEditable() { return false; }
+    get isWidget() { return true; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -1603,6 +1605,8 @@ class BlockWidgetView extends ContentView {
     }
     ignoreMutation() { return true; }
     ignoreEvent(event) { return this.widget.ignoreEvent(event); }
+    get isEditable() { return false; }
+    get isWidget() { return true; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -1784,6 +1788,7 @@ const mouseSelectionStyle = state.Facet.define();
 const exceptionSink = state.Facet.define();
 const updateListener = state.Facet.define();
 const inputHandler = state.Facet.define();
+const focusChangeEffect = state.Facet.define();
 const perLineTextDirection = state.Facet.define({
     combine: values => values.some(x => x)
 });
@@ -2026,11 +2031,6 @@ class ViewUpdate {
         let changedRanges = [];
         this.changes.iterChangedRanges((fromA, toA, fromB, toB) => changedRanges.push(new ChangedRange(fromA, toA, fromB, toB)));
         this.changedRanges = changedRanges;
-        let focus = view.hasFocus;
-        if (focus != view.inputState.notifiedFocused) {
-            view.inputState.notifiedFocused = focus;
-            this.flags |= 1 /* UpdateFlag.Focus */;
-        }
     }
     /**
     @internal
@@ -3166,11 +3166,11 @@ function domPosInText(node, x, y) {
     }
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
-function posAtCoords(view, { x, y }, precise, bias = -1) {
+function posAtCoords(view, coords, precise, bias = -1) {
     var _a;
     let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
     let block, { docHeight } = view.viewState;
-    let yOffset = y - docTop;
+    let { x, y } = coords, yOffset = y - docTop;
     if (yOffset < 0)
         return 0;
     if (yOffset > docHeight)
@@ -3241,7 +3241,17 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             return yOffset > block.top + block.height / 2 ? block.to : block.from;
         ({ node, offset } = domPosAtCoords(line.dom, x, y));
     }
-    return view.docView.posFromDOM(node, offset);
+    let nearest = view.docView.nearest(node);
+    if (!nearest)
+        return null;
+    if (nearest.isWidget) {
+        let rect = nearest.dom.getBoundingClientRect();
+        return coords.y < rect.top || coords.y <= rect.bottom && coords.x <= (rect.left + rect.right) / 2
+            ? nearest.posAtStart : nearest.posAtEnd;
+    }
+    else {
+        return nearest.localPosFromDOM(node, offset) + nearest.posAtStart;
+    }
 }
 function posAtCoordsImprecise(view, contentRect, block, x, y) {
     let into = Math.round((x - contentRect.left) * view.defaultCharacterWidth);
@@ -4032,10 +4042,26 @@ handlers.copy = handlers.cut = (view, event) => {
             userEvent: "delete.cut"
         });
 };
+const isFocusChange = state.Annotation.define();
+function focusChangeTransaction(state, focus) {
+    let effects = [];
+    for (let getEffect of state.facet(focusChangeEffect)) {
+        let effect = getEffect(state, focus);
+        if (effect)
+            effects.push(effect);
+    }
+    return effects ? state.update({ effects, annotations: isFocusChange.of(true) }) : null;
+}
 function updateForFocusChange(view) {
     setTimeout(() => {
-        if (view.hasFocus != view.inputState.notifiedFocused)
-            view.update([]);
+        let focus = view.hasFocus;
+        if (focus != view.inputState.notifiedFocused) {
+            let tr = focusChangeTransaction(view.state, focus);
+            if (tr)
+                view.dispatch(tr);
+            else
+                view.update([]);
+        }
     }, 10);
 }
 handlers.focus = view => {
@@ -4117,7 +4143,7 @@ class HeightOracle {
     heightForGap(from, to) {
         let lines = this.doc.lineAt(to).number - this.doc.lineAt(from).number + 1;
         if (this.lineWrapping)
-            lines += Math.ceil(((to - from) - (lines * this.lineLength * 0.5)) / this.lineLength);
+            lines += Math.max(0, Math.ceil(((to - from) - (lines * this.lineLength * 0.5)) / this.lineLength));
         return this.lineHeight * lines;
     }
     heightForLine(length) {
@@ -4263,11 +4289,11 @@ class HeightMap {
     decomposeLeft(_to, result) { result.push(this); }
     decomposeRight(_from, result) { result.push(this); }
     applyChanges(decorations, oldDoc, oracle, changes) {
-        let me = this;
+        let me = this, doc = oracle.doc;
         for (let i = changes.length - 1; i >= 0; i--) {
             let { fromA, toA, fromB, toB } = changes[i];
-            let start = me.lineAt(fromA, QueryType.ByPosNoHeight, oldDoc, 0, 0);
-            let end = start.to >= toA ? start : me.lineAt(toA, QueryType.ByPosNoHeight, oldDoc, 0, 0);
+            let start = me.lineAt(fromA, QueryType.ByPosNoHeight, oracle.setDoc(oldDoc), 0, 0);
+            let end = start.to >= toA ? start : me.lineAt(toA, QueryType.ByPosNoHeight, oracle, 0, 0);
             toB += end.to - toA;
             toA = end.to;
             while (i > 0 && start.from <= changes[i - 1].toA) {
@@ -4275,11 +4301,11 @@ class HeightMap {
                 fromB = changes[i - 1].fromB;
                 i--;
                 if (fromA < start.from)
-                    start = me.lineAt(fromA, QueryType.ByPosNoHeight, oldDoc, 0, 0);
+                    start = me.lineAt(fromA, QueryType.ByPosNoHeight, oracle, 0, 0);
             }
             fromB += start.from - fromA;
             fromA = start.from;
-            let nodes = NodeBuilder.build(oracle, decorations, fromB, toB);
+            let nodes = NodeBuilder.build(oracle.setDoc(doc), decorations, fromB, toB);
             me = me.replace(fromA, toA, nodes);
         }
         return me.updateHeight(oracle, 0);
@@ -4346,15 +4372,15 @@ class HeightMapBlock extends HeightMap {
         super(length, height);
         this.type = type;
     }
-    blockAt(_height, _doc, top, offset) {
+    blockAt(_height, _oracle, top, offset) {
         return new BlockInfo(offset, this.length, top, this.height, this.type);
     }
-    lineAt(_value, _type, doc, top, offset) {
-        return this.blockAt(0, doc, top, offset);
+    lineAt(_value, _type, oracle, top, offset) {
+        return this.blockAt(0, oracle, top, offset);
     }
-    forEachLine(from, to, doc, top, offset, f) {
+    forEachLine(from, to, oracle, top, offset, f) {
         if (from <= offset + this.length && to >= offset)
-            f(this.blockAt(0, doc, top, offset));
+            f(this.blockAt(0, oracle, top, offset));
     }
     updateHeight(oracle, offset = 0, _force = false, measured) {
         if (measured && measured.from <= offset && measured.more)
@@ -4400,35 +4426,60 @@ class HeightMapText extends HeightMapBlock {
 }
 class HeightMapGap extends HeightMap {
     constructor(length) { super(length, 0); }
-    lines(doc, offset) {
-        let firstLine = doc.lineAt(offset).number, lastLine = doc.lineAt(offset + this.length).number;
-        return { firstLine, lastLine, lineHeight: this.height / (lastLine - firstLine + 1) };
+    heightMetrics(oracle, offset) {
+        let firstLine = oracle.doc.lineAt(offset).number, lastLine = oracle.doc.lineAt(offset + this.length).number;
+        let lines = lastLine - firstLine + 1;
+        let perLine, perChar = 0;
+        if (oracle.lineWrapping) {
+            let totalPerLine = Math.min(this.height, oracle.lineHeight * lines);
+            perLine = totalPerLine / lines;
+            perChar = (this.height - totalPerLine) / (this.length - lines - 1);
+        }
+        else {
+            perLine = this.height / lines;
+        }
+        return { firstLine, lastLine, perLine, perChar };
     }
-    blockAt(height, doc, top, offset) {
-        let { firstLine, lastLine, lineHeight } = this.lines(doc, offset);
-        let line = Math.max(0, Math.min(lastLine - firstLine, Math.floor((height - top) / lineHeight)));
-        let { from, length } = doc.line(firstLine + line);
-        return new BlockInfo(from, length, top + lineHeight * line, lineHeight, exports.BlockType.Text);
+    blockAt(height, oracle, top, offset) {
+        let { firstLine, lastLine, perLine, perChar } = this.heightMetrics(oracle, offset);
+        if (oracle.lineWrapping) {
+            let guess = offset + Math.round(Math.max(0, Math.min(1, (height - top) / this.height)) * this.length);
+            let line = oracle.doc.lineAt(guess), lineHeight = perLine + line.length * perChar;
+            let lineTop = Math.max(top, height - lineHeight / 2);
+            return new BlockInfo(line.from, line.length, lineTop, lineHeight, exports.BlockType.Text);
+        }
+        else {
+            let line = Math.max(0, Math.min(lastLine - firstLine, Math.floor((height - top) / perLine)));
+            let { from, length } = oracle.doc.line(firstLine + line);
+            return new BlockInfo(from, length, top + perLine * line, perLine, exports.BlockType.Text);
+        }
     }
-    lineAt(value, type, doc, top, offset) {
+    lineAt(value, type, oracle, top, offset) {
         if (type == QueryType.ByHeight)
-            return this.blockAt(value, doc, top, offset);
+            return this.blockAt(value, oracle, top, offset);
         if (type == QueryType.ByPosNoHeight) {
-            let { from, to } = doc.lineAt(value);
+            let { from, to } = oracle.doc.lineAt(value);
             return new BlockInfo(from, to - from, 0, 0, exports.BlockType.Text);
         }
-        let { firstLine, lineHeight } = this.lines(doc, offset);
-        let { from, length, number } = doc.lineAt(value);
-        return new BlockInfo(from, length, top + lineHeight * (number - firstLine), lineHeight, exports.BlockType.Text);
-    }
-    forEachLine(from, to, doc, top, offset, f) {
-        let { firstLine, lineHeight } = this.lines(doc, offset);
-        for (let pos = Math.max(from, offset), end = Math.min(offset + this.length, to); pos <= end;) {
-            let line = doc.lineAt(pos);
-            if (pos == from)
-                top += lineHeight * (line.number - firstLine);
-            f(new BlockInfo(line.from, line.length, top, lineHeight, exports.BlockType.Text));
-            top += lineHeight;
+        let { firstLine, perLine, perChar } = this.heightMetrics(oracle, offset);
+        let line = oracle.doc.lineAt(value), lineHeight = perLine + line.length * perChar;
+        let linesAbove = line.number - firstLine;
+        let lineTop = top + perLine * linesAbove + perChar * (line.from - offset - linesAbove);
+        return new BlockInfo(line.from, line.length, Math.max(top, Math.min(lineTop, top + this.height - lineHeight)), lineHeight, exports.BlockType.Text);
+    }
+    forEachLine(from, to, oracle, top, offset, f) {
+        from = Math.max(from, offset);
+        to = Math.min(to, offset + this.length);
+        let { firstLine, perLine, perChar } = this.heightMetrics(oracle, offset);
+        for (let pos = from, lineTop = top; pos <= to;) {
+            let line = oracle.doc.lineAt(pos);
+            if (pos == from) {
+                let linesAbove = line.number - firstLine;
+                lineTop += perLine * linesAbove + perChar * (from - offset - linesAbove);
+            }
+            let lineHeight = perLine + perChar * line.length;
+            f(new BlockInfo(line.from, line.length, lineTop, lineHeight, exports.BlockType.Text));
+            lineTop += lineHeight;
             pos = line.to + 1;
         }
     }
@@ -4464,7 +4515,6 @@ class HeightMapGap extends HeightMap {
             // they would already have been added to the heightmap (gaps
             // only contain plain text).
             let nodes = [], pos = Math.max(offset, measured.from), singleHeight = -1;
-            let wasChanged = oracle.heightChanged;
             if (measured.from > offset)
                 nodes.push(new HeightMapGap(measured.from - offset - 1).updateHeight(oracle, offset));
             while (pos <= end && measured.more) {
@@ -4484,8 +4534,9 @@ class HeightMapGap extends HeightMap {
             if (pos <= end)
                 nodes.push(null, new HeightMapGap(end - pos).updateHeight(oracle, pos));
             let result = HeightMap.of(nodes);
-            oracle.heightChanged = wasChanged || singleHeight < 0 || Math.abs(result.height - this.height) >= Epsilon ||
-                Math.abs(singleHeight - this.lines(oracle.doc, offset).lineHeight) >= Epsilon;
+            if (singleHeight < 0 || Math.abs(result.height - this.height) >= Epsilon ||
+                Math.abs(singleHeight - this.heightMetrics(oracle, offset).perLine) >= Epsilon)
+                oracle.heightChanged = true;
             return result;
         }
         else if (force || this.outdated) {
@@ -4504,40 +4555,40 @@ class HeightMapBranch extends HeightMap {
         this.size = left.size + right.size;
     }
     get break() { return this.flags & 1 /* Flag.Break */; }
-    blockAt(height, doc, top, offset) {
+    blockAt(height, oracle, top, offset) {
         let mid = top + this.left.height;
-        return height < mid ? this.left.blockAt(height, doc, top, offset)
-            : this.right.blockAt(height, doc, mid, offset + this.left.length + this.break);
+        return height < mid ? this.left.blockAt(height, oracle, top, offset)
+            : this.right.blockAt(height, oracle, mid, offset + this.left.length + this.break);
     }
-    lineAt(value, type, doc, top, offset) {
+    lineAt(value, type, oracle, top, offset) {
         let rightTop = top + this.left.height, rightOffset = offset + this.left.length + this.break;
         let left = type == QueryType.ByHeight ? value < rightTop : value < rightOffset;
-        let base = left ? this.left.lineAt(value, type, doc, top, offset)
-            : this.right.lineAt(value, type, doc, rightTop, rightOffset);
+        let base = left ? this.left.lineAt(value, type, oracle, top, offset)
+            : this.right.lineAt(value, type, oracle, rightTop, rightOffset);
         if (this.break || (left ? base.to < rightOffset : base.from > rightOffset))
             return base;
         let subQuery = type == QueryType.ByPosNoHeight ? QueryType.ByPosNoHeight : QueryType.ByPos;
         if (left)
-            return base.join(this.right.lineAt(rightOffset, subQuery, doc, rightTop, rightOffset));
+            return base.join(this.right.lineAt(rightOffset, subQuery, oracle, rightTop, rightOffset));
         else
-            return this.left.lineAt(rightOffset, subQuery, doc, top, offset).join(base);
+            return this.left.lineAt(rightOffset, subQuery, oracle, top, offset).join(base);
     }
-    forEachLine(from, to, doc, top, offset, f) {
+    forEachLine(from, to, oracle, top, offset, f) {
         let rightTop = top + this.left.height, rightOffset = offset + this.left.length + this.break;
         if (this.break) {
             if (from < rightOffset)
-                this.left.forEachLine(from, to, doc, top, offset, f);
+                this.left.forEachLine(from, to, oracle, top, offset, f);
             if (to >= rightOffset)
-                this.right.forEachLine(from, to, doc, rightTop, rightOffset, f);
+                this.right.forEachLine(from, to, oracle, rightTop, rightOffset, f);
         }
         else {
-            let mid = this.lineAt(rightOffset, QueryType.ByPos, doc, top, offset);
+            let mid = this.lineAt(rightOffset, QueryType.ByPos, oracle, top, offset);
             if (from < mid.from)
-                this.left.forEachLine(from, mid.from - 1, doc, top, offset, f);
+                this.left.forEachLine(from, mid.from - 1, oracle, top, offset, f);
             if (mid.to >= from && mid.from <= to)
                 f(mid);
             if (to > mid.to)
-                this.right.forEachLine(mid.to + 1, to, doc, rightTop, rightOffset, f);
+                this.right.forEachLine(mid.to + 1, to, oracle, rightTop, rightOffset, f);
         }
     }
     replace(from, to, nodes) {
@@ -4887,11 +4938,11 @@ class ViewState {
         }
         this.viewports = viewports.sort((a, b) => a.from - b.from);
         this.scaler = this.heightMap.height <= 7000000 /* VP.MaxDOMHeight */ ? IdScaler :
-            new BigScaler(this.heightOracle.doc, this.heightMap, this.viewports);
+            new BigScaler(this.heightOracle, this.heightMap, this.viewports);
     }
     updateViewportLines() {
         this.viewportLines = [];
-        this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, block => {
+        this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.heightOracle.setDoc(this.state.doc), 0, 0, block => {
             this.viewportLines.push(this.scaler.scale == 1 ? block : scaleBlock(block, this.scaler));
         });
     }
@@ -4931,8 +4982,9 @@ class ViewState {
         let whiteSpace = style.whiteSpace;
         this.defaultTextDirection = style.direction == "rtl" ? exports.Direction.RTL : exports.Direction.LTR;
         let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
-        let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
-        this.contentDOMHeight = dom.clientHeight;
+        let domRect = dom.getBoundingClientRect();
+        let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != domRect.height;
+        this.contentDOMHeight = domRect.height;
         this.mustMeasureContent = false;
         let result = 0, bias = 0;
         // Vertical padding
@@ -4960,9 +5012,9 @@ class ViewState {
         }
         if (!this.inView && !this.scrollTarget)
             return 0;
-        let contentWidth = dom.clientWidth;
+        let contentWidth = domRect.width;
         if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
-            this.contentDOMWidth = contentWidth;
+            this.contentDOMWidth = domRect.width;
             this.editorHeight = view.scrollDOM.clientHeight;
             result |= 8 /* UpdateFlag.Geometry */;
         }
@@ -4991,7 +5043,8 @@ class ViewState {
                 result |= 2 /* UpdateFlag.Height */;
         }
         let viewportChange = !this.viewportIsAppropriate(this.viewport, bias) ||
-            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to);
+            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from ||
+                this.scrollTarget.range.head > this.viewport.to);
         if (viewportChange)
             this.viewport = this.getViewport(bias, this.scrollTarget);
         this.updateForViewport();
@@ -5017,36 +5070,37 @@ class ViewState {
         // bottom, depending on the bias (the change in viewport position
         // since the last update). It'll hold a number between 0 and 1
         let marginTop = 0.5 - Math.max(-0.5, Math.min(0.5, bias / 1000 /* VP.Margin */ / 2));
-        let map = this.heightMap, doc = this.state.doc, { visibleTop, visibleBottom } = this;
-        let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* VP.Margin */, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* VP.Margin */, QueryType.ByHeight, doc, 0, 0).to);
+        let map = this.heightMap, oracle = this.heightOracle;
+        let { visibleTop, visibleBottom } = this;
+        let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* VP.Margin */, QueryType.ByHeight, oracle, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* VP.Margin */, QueryType.ByHeight, oracle, 0, 0).to);
         // If scrollTarget is given, make sure the viewport includes that position
         if (scrollTarget) {
             let { head } = scrollTarget.range;
             if (head < viewport.from || head > viewport.to) {
                 let viewHeight = Math.min(this.editorHeight, this.pixelViewport.bottom - this.pixelViewport.top);
-                let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
+                let block = map.lineAt(head, QueryType.ByPos, oracle, 0, 0), topPos;
                 if (scrollTarget.y == "center")
                     topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
                 else if (scrollTarget.y == "start" || scrollTarget.y == "nearest" && head < viewport.from)
                     topPos = block.top;
                 else
                     topPos = block.bottom - viewHeight;
-                viewport = new Viewport(map.lineAt(topPos - 1000 /* VP.Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* VP.Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
+                viewport = new Viewport(map.lineAt(topPos - 1000 /* VP.Margin */ / 2, QueryType.ByHeight, oracle, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* VP.Margin */ / 2, QueryType.ByHeight, oracle, 0, 0).to);
             }
         }
         return viewport;
     }
     mapViewport(viewport, changes) {
         let from = changes.mapPos(viewport.from, -1), to = changes.mapPos(viewport.to, 1);
-        return new Viewport(this.heightMap.lineAt(from, QueryType.ByPos, this.state.doc, 0, 0).from, this.heightMap.lineAt(to, QueryType.ByPos, this.state.doc, 0, 0).to);
+        return new Viewport(this.heightMap.lineAt(from, QueryType.ByPos, this.heightOracle, 0, 0).from, this.heightMap.lineAt(to, QueryType.ByPos, this.heightOracle, 0, 0).to);
     }
     // Checks if a given viewport covers the visible part of the
     // document and not too much beyond that.
     viewportIsAppropriate({ from, to }, bias = 0) {
         if (!this.inView)
             return true;
-        let { top } = this.heightMap.lineAt(from, QueryType.ByPos, this.state.doc, 0, 0);
-        let { bottom } = this.heightMap.lineAt(to, QueryType.ByPos, this.state.doc, 0, 0);
+        let { top } = this.heightMap.lineAt(from, QueryType.ByPos, this.heightOracle, 0, 0);
+        let { bottom } = this.heightMap.lineAt(to, QueryType.ByPos, this.heightOracle, 0, 0);
         let { visibleTop, visibleBottom } = this;
         return (from == 0 || top <= visibleTop - Math.max(10 /* VP.MinCoverMargin */, Math.min(-bias, 250 /* VP.MaxCoverMargin */))) &&
             (to == this.state.doc.length ||
@@ -5183,13 +5237,13 @@ class ViewState {
     }
     lineBlockAt(pos) {
         return (pos >= this.viewport.from && pos <= this.viewport.to && this.viewportLines.find(b => b.from <= pos && b.to >= pos)) ||
-            scaleBlock(this.heightMap.lineAt(pos, QueryType.ByPos, this.state.doc, 0, 0), this.scaler);
+            scaleBlock(this.heightMap.lineAt(pos, QueryType.ByPos, this.heightOracle, 0, 0), this.scaler);
     }
     lineBlockAtHeight(height) {
-        return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.state.doc, 0, 0), this.scaler);
+        return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.heightOracle, 0, 0), this.scaler);
     }
     elementAtHeight(height) {
-        return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.state.doc, 0, 0), this.scaler);
+        return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.heightOracle, 0, 0), this.scaler);
     }
     get docHeight() {
         return this.scaler.toDOM(this.heightMap.height);
@@ -5263,11 +5317,11 @@ const IdScaler = {
 // regions outside the viewports so that the total height is
 // VP.MaxDOMHeight.
 class BigScaler {
-    constructor(doc, heightMap, viewports) {
+    constructor(oracle, heightMap, viewports) {
         let vpHeight = 0, base = 0, domBase = 0;
         this.viewports = viewports.map(({ from, to }) => {
-            let top = heightMap.lineAt(from, QueryType.ByPos, doc, 0, 0).top;
-            let bottom = heightMap.lineAt(to, QueryType.ByPos, doc, 0, 0).bottom;
+            let top = heightMap.lineAt(from, QueryType.ByPos, oracle, 0, 0).top;
+            let bottom = heightMap.lineAt(to, QueryType.ByPos, oracle, 0, 0).bottom;
             vpHeight += bottom - top;
             return { from, to, top, bottom, domTop: 0, domBottom: 0 };
         });
@@ -5634,7 +5688,7 @@ function applyDOMChange(view, domChange) {
         };
     }
     else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
-        /^\. ?$/.test(change.insert.toString())) {
+        /^\. ?$/.test(change.insert.toString()) && view.contentDOM.getAttribute("autocorrect") == "off") {
         // Detect insert-period-on-double-space Mac and Android behavior,
         // and transform it into a regular space insert.
         if (newSel && change.insert.length == 2)
@@ -6388,6 +6442,20 @@ class EditorView {
             this.viewState.state = state$1;
             return;
         }
+        let focus = this.hasFocus, focusFlag = 0, dispatchFocus = null;
+        if (transactions.some(tr => tr.annotation(isFocusChange))) {
+            this.inputState.notifiedFocused = focus;
+            // If a focus-change transaction is being dispatched, set this update flag.
+            focusFlag = 1 /* UpdateFlag.Focus */;
+        }
+        else if (focus != this.inputState.notifiedFocused) {
+            this.inputState.notifiedFocused = focus;
+            // Schedule a separate focus transaction if necessary, otherwise
+            // add a flag to this update
+            dispatchFocus = focusChangeTransaction(state$1, focus);
+            if (!dispatchFocus)
+                focusFlag = 1 /* UpdateFlag.Focus */;
+        }
         // If there was a pending DOM change, eagerly read it and try to
         // apply it after the given transactions.
         let pendingKey = this.observer.delayedAndroidKey, domChange = null;
@@ -6406,6 +6474,7 @@ class EditorView {
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
         update = ViewUpdate.create(this, state$1, transactions);
+        update.flags |= focusFlag;
         let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* UpdateState.Updating */;
@@ -6443,10 +6512,15 @@ class EditorView {
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(update);
-        if (domChange) {
-            if (!applyDOMChange(this, domChange) && pendingKey.force)
-                dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
-        }
+        if (dispatchFocus || domChange)
+            Promise.resolve().then(() => {
+                if (dispatchFocus && this.state == dispatchFocus.startState)
+                    this.dispatch(dispatchFocus);
+                if (domChange) {
+                    if (!applyDOMChange(this, domChange) && pendingKey.force)
+                        dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
+                }
+            });
     }
     /**
     Reset the view to the given state. (This will cause the entire
@@ -7048,6 +7122,11 @@ called and the default behavior is prevented.
 */
 EditorView.inputHandler = inputHandler;
 /**
+This facet can be used to provide functions that create effects
+to be dispatched when the editor's focus state changes.
+*/
+EditorView.focusChangeEffect = focusChangeEffect;
+/**
 By default, the editor assumes all its content has the same
 [text direction](https://codemirror.net/6/docs/ref/#view.Direction). Configure this with a `true`
 value to make it read the text direction of every (rendered)

package/dist/index.d.ts

@@ -995,6 +995,11 @@ declare class EditorView {
     */
     static inputHandler: Facet<(view: EditorView, from: number, to: number, text: string) => boolean, readonly ((view: EditorView, from: number, to: number, text: string) => boolean)[]>;
     /**
+    This facet can be used to provide functions that create effects
+    to be dispatched when the editor's focus state changes.
+    */
+    static focusChangeEffect: Facet<(state: EditorState, focusing: boolean) => StateEffect<any> | null, readonly ((state: EditorState, focusing: boolean) => StateEffect<any> | null)[]>;
+    /**
     By default, the editor assumes all its content has the same
     [text direction](https://codemirror.net/6/docs/ref/#view.Direction). Configure this with a `true`
     value to make it read the text direction of every (rendered)

package/dist/index.js

@@ -1,4 +1,4 @@
-import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
+import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Annotation, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { keyName, base, shift } from 'w3c-keyname';
 
@@ -515,6 +515,7 @@ class ContentView {
     }
     static get(node) { return node.cmView; }
     get isEditable() { return true; }
+    get isWidget() { return false; }
     merge(from, to, source, hasStart, openStart, openEnd) {
         return false;
     }
@@ -889,6 +890,7 @@ class WidgetView extends ContentView {
         return this.length ? rect : flattenRect(rect, this.side > 0);
     }
     get isEditable() { return false; }
+    get isWidget() { return true; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -1598,6 +1600,8 @@ class BlockWidgetView extends ContentView {
     }
     ignoreMutation() { return true; }
     ignoreEvent(event) { return this.widget.ignoreEvent(event); }
+    get isEditable() { return false; }
+    get isWidget() { return true; }
     destroy() {
         super.destroy();
         if (this.dom)
@@ -1779,6 +1783,7 @@ const mouseSelectionStyle = /*@__PURE__*/Facet.define();
 const exceptionSink = /*@__PURE__*/Facet.define();
 const updateListener = /*@__PURE__*/Facet.define();
 const inputHandler = /*@__PURE__*/Facet.define();
+const focusChangeEffect = /*@__PURE__*/Facet.define();
 const perLineTextDirection = /*@__PURE__*/Facet.define({
     combine: values => values.some(x => x)
 });
@@ -2021,11 +2026,6 @@ class ViewUpdate {
         let changedRanges = [];
         this.changes.iterChangedRanges((fromA, toA, fromB, toB) => changedRanges.push(new ChangedRange(fromA, toA, fromB, toB)));
         this.changedRanges = changedRanges;
-        let focus = view.hasFocus;
-        if (focus != view.inputState.notifiedFocused) {
-            view.inputState.notifiedFocused = focus;
-            this.flags |= 1 /* UpdateFlag.Focus */;
-        }
     }
     /**
     @internal
@@ -3160,11 +3160,11 @@ function domPosInText(node, x, y) {
     }
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
-function posAtCoords(view, { x, y }, precise, bias = -1) {
+function posAtCoords(view, coords, precise, bias = -1) {
     var _a;
     let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
     let block, { docHeight } = view.viewState;
-    let yOffset = y - docTop;
+    let { x, y } = coords, yOffset = y - docTop;
     if (yOffset < 0)
         return 0;
     if (yOffset > docHeight)
@@ -3235,7 +3235,17 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
             return yOffset > block.top + block.height / 2 ? block.to : block.from;
         ({ node, offset } = domPosAtCoords(line.dom, x, y));
     }
-    return view.docView.posFromDOM(node, offset);
+    let nearest = view.docView.nearest(node);
+    if (!nearest)
+        return null;
+    if (nearest.isWidget) {
+        let rect = nearest.dom.getBoundingClientRect();
+        return coords.y < rect.top || coords.y <= rect.bottom && coords.x <= (rect.left + rect.right) / 2
+            ? nearest.posAtStart : nearest.posAtEnd;
+    }
+    else {
+        return nearest.localPosFromDOM(node, offset) + nearest.posAtStart;
+    }
 }
 function posAtCoordsImprecise(view, contentRect, block, x, y) {
     let into = Math.round((x - contentRect.left) * view.defaultCharacterWidth);
@@ -4026,10 +4036,26 @@ handlers.copy = handlers.cut = (view, event) => {
             userEvent: "delete.cut"
         });
 };
+const isFocusChange = /*@__PURE__*/Annotation.define();
+function focusChangeTransaction(state, focus) {
+    let effects = [];
+    for (let getEffect of state.facet(focusChangeEffect)) {
+        let effect = getEffect(state, focus);
+        if (effect)
+            effects.push(effect);
+    }
+    return effects ? state.update({ effects, annotations: isFocusChange.of(true) }) : null;
+}
 function updateForFocusChange(view) {
     setTimeout(() => {
-        if (view.hasFocus != view.inputState.notifiedFocused)
-            view.update([]);
+        let focus = view.hasFocus;
+        if (focus != view.inputState.notifiedFocused) {
+            let tr = focusChangeTransaction(view.state, focus);
+            if (tr)
+                view.dispatch(tr);
+            else
+                view.update([]);
+        }
     }, 10);
 }
 handlers.focus = view => {
@@ -4111,7 +4137,7 @@ class HeightOracle {
     heightForGap(from, to) {
         let lines = this.doc.lineAt(to).number - this.doc.lineAt(from).number + 1;
         if (this.lineWrapping)
-            lines += Math.ceil(((to - from) - (lines * this.lineLength * 0.5)) / this.lineLength);
+            lines += Math.max(0, Math.ceil(((to - from) - (lines * this.lineLength * 0.5)) / this.lineLength));
         return this.lineHeight * lines;
     }
     heightForLine(length) {
@@ -4256,11 +4282,11 @@ class HeightMap {
     decomposeLeft(_to, result) { result.push(this); }
     decomposeRight(_from, result) { result.push(this); }
     applyChanges(decorations, oldDoc, oracle, changes) {
-        let me = this;
+        let me = this, doc = oracle.doc;
         for (let i = changes.length - 1; i >= 0; i--) {
             let { fromA, toA, fromB, toB } = changes[i];
-            let start = me.lineAt(fromA, QueryType.ByPosNoHeight, oldDoc, 0, 0);
-            let end = start.to >= toA ? start : me.lineAt(toA, QueryType.ByPosNoHeight, oldDoc, 0, 0);
+            let start = me.lineAt(fromA, QueryType.ByPosNoHeight, oracle.setDoc(oldDoc), 0, 0);
+            let end = start.to >= toA ? start : me.lineAt(toA, QueryType.ByPosNoHeight, oracle, 0, 0);
             toB += end.to - toA;
             toA = end.to;
             while (i > 0 && start.from <= changes[i - 1].toA) {
@@ -4268,11 +4294,11 @@ class HeightMap {
                 fromB = changes[i - 1].fromB;
                 i--;
                 if (fromA < start.from)
-                    start = me.lineAt(fromA, QueryType.ByPosNoHeight, oldDoc, 0, 0);
+                    start = me.lineAt(fromA, QueryType.ByPosNoHeight, oracle, 0, 0);
             }
             fromB += start.from - fromA;
             fromA = start.from;
-            let nodes = NodeBuilder.build(oracle, decorations, fromB, toB);
+            let nodes = NodeBuilder.build(oracle.setDoc(doc), decorations, fromB, toB);
             me = me.replace(fromA, toA, nodes);
         }
         return me.updateHeight(oracle, 0);
@@ -4339,15 +4365,15 @@ class HeightMapBlock extends HeightMap {
         super(length, height);
         this.type = type;
     }
-    blockAt(_height, _doc, top, offset) {
+    blockAt(_height, _oracle, top, offset) {
         return new BlockInfo(offset, this.length, top, this.height, this.type);
     }
-    lineAt(_value, _type, doc, top, offset) {
-        return this.blockAt(0, doc, top, offset);
+    lineAt(_value, _type, oracle, top, offset) {
+        return this.blockAt(0, oracle, top, offset);
     }
-    forEachLine(from, to, doc, top, offset, f) {
+    forEachLine(from, to, oracle, top, offset, f) {
         if (from <= offset + this.length && to >= offset)
-            f(this.blockAt(0, doc, top, offset));
+            f(this.blockAt(0, oracle, top, offset));
     }
     updateHeight(oracle, offset = 0, _force = false, measured) {
         if (measured && measured.from <= offset && measured.more)
@@ -4393,35 +4419,60 @@ class HeightMapText extends HeightMapBlock {
 }
 class HeightMapGap extends HeightMap {
     constructor(length) { super(length, 0); }
-    lines(doc, offset) {
-        let firstLine = doc.lineAt(offset).number, lastLine = doc.lineAt(offset + this.length).number;
-        return { firstLine, lastLine, lineHeight: this.height / (lastLine - firstLine + 1) };
+    heightMetrics(oracle, offset) {
+        let firstLine = oracle.doc.lineAt(offset).number, lastLine = oracle.doc.lineAt(offset + this.length).number;
+        let lines = lastLine - firstLine + 1;
+        let perLine, perChar = 0;
+        if (oracle.lineWrapping) {
+            let totalPerLine = Math.min(this.height, oracle.lineHeight * lines);
+            perLine = totalPerLine / lines;
+            perChar = (this.height - totalPerLine) / (this.length - lines - 1);
+        }
+        else {
+            perLine = this.height / lines;
+        }
+        return { firstLine, lastLine, perLine, perChar };
     }
-    blockAt(height, doc, top, offset) {
-        let { firstLine, lastLine, lineHeight } = this.lines(doc, offset);
-        let line = Math.max(0, Math.min(lastLine - firstLine, Math.floor((height - top) / lineHeight)));
-        let { from, length } = doc.line(firstLine + line);
-        return new BlockInfo(from, length, top + lineHeight * line, lineHeight, BlockType.Text);
+    blockAt(height, oracle, top, offset) {
+        let { firstLine, lastLine, perLine, perChar } = this.heightMetrics(oracle, offset);
+        if (oracle.lineWrapping) {
+            let guess = offset + Math.round(Math.max(0, Math.min(1, (height - top) / this.height)) * this.length);
+            let line = oracle.doc.lineAt(guess), lineHeight = perLine + line.length * perChar;
+            let lineTop = Math.max(top, height - lineHeight / 2);
+            return new BlockInfo(line.from, line.length, lineTop, lineHeight, BlockType.Text);
+        }
+        else {
+            let line = Math.max(0, Math.min(lastLine - firstLine, Math.floor((height - top) / perLine)));
+            let { from, length } = oracle.doc.line(firstLine + line);
+            return new BlockInfo(from, length, top + perLine * line, perLine, BlockType.Text);
+        }
     }
-    lineAt(value, type, doc, top, offset) {
+    lineAt(value, type, oracle, top, offset) {
         if (type == QueryType.ByHeight)
-            return this.blockAt(value, doc, top, offset);
+            return this.blockAt(value, oracle, top, offset);
         if (type == QueryType.ByPosNoHeight) {
-            let { from, to } = doc.lineAt(value);
+            let { from, to } = oracle.doc.lineAt(value);
             return new BlockInfo(from, to - from, 0, 0, BlockType.Text);
         }
-        let { firstLine, lineHeight } = this.lines(doc, offset);
-        let { from, length, number } = doc.lineAt(value);
-        return new BlockInfo(from, length, top + lineHeight * (number - firstLine), lineHeight, BlockType.Text);
-    }
-    forEachLine(from, to, doc, top, offset, f) {
-        let { firstLine, lineHeight } = this.lines(doc, offset);
-        for (let pos = Math.max(from, offset), end = Math.min(offset + this.length, to); pos <= end;) {
-            let line = doc.lineAt(pos);
-            if (pos == from)
-                top += lineHeight * (line.number - firstLine);
-            f(new BlockInfo(line.from, line.length, top, lineHeight, BlockType.Text));
-            top += lineHeight;
+        let { firstLine, perLine, perChar } = this.heightMetrics(oracle, offset);
+        let line = oracle.doc.lineAt(value), lineHeight = perLine + line.length * perChar;
+        let linesAbove = line.number - firstLine;
+        let lineTop = top + perLine * linesAbove + perChar * (line.from - offset - linesAbove);
+        return new BlockInfo(line.from, line.length, Math.max(top, Math.min(lineTop, top + this.height - lineHeight)), lineHeight, BlockType.Text);
+    }
+    forEachLine(from, to, oracle, top, offset, f) {
+        from = Math.max(from, offset);
+        to = Math.min(to, offset + this.length);
+        let { firstLine, perLine, perChar } = this.heightMetrics(oracle, offset);
+        for (let pos = from, lineTop = top; pos <= to;) {
+            let line = oracle.doc.lineAt(pos);
+            if (pos == from) {
+                let linesAbove = line.number - firstLine;
+                lineTop += perLine * linesAbove + perChar * (from - offset - linesAbove);
+            }
+            let lineHeight = perLine + perChar * line.length;
+            f(new BlockInfo(line.from, line.length, lineTop, lineHeight, BlockType.Text));
+            lineTop += lineHeight;
             pos = line.to + 1;
         }
     }
@@ -4457,7 +4508,6 @@ class HeightMapGap extends HeightMap {
             // they would already have been added to the heightmap (gaps
             // only contain plain text).
             let nodes = [], pos = Math.max(offset, measured.from), singleHeight = -1;
-            let wasChanged = oracle.heightChanged;
             if (measured.from > offset)
                 nodes.push(new HeightMapGap(measured.from - offset - 1).updateHeight(oracle, offset));
             while (pos <= end && measured.more) {
@@ -4477,8 +4527,9 @@ class HeightMapGap extends HeightMap {
             if (pos <= end)
                 nodes.push(null, new HeightMapGap(end - pos).updateHeight(oracle, pos));
             let result = HeightMap.of(nodes);
-            oracle.heightChanged = wasChanged || singleHeight < 0 || Math.abs(result.height - this.height) >= Epsilon ||
-                Math.abs(singleHeight - this.lines(oracle.doc, offset).lineHeight) >= Epsilon;
+            if (singleHeight < 0 || Math.abs(result.height - this.height) >= Epsilon ||
+                Math.abs(singleHeight - this.heightMetrics(oracle, offset).perLine) >= Epsilon)
+                oracle.heightChanged = true;
             return result;
         }
         else if (force || this.outdated) {
@@ -4497,40 +4548,40 @@ class HeightMapBranch extends HeightMap {
         this.size = left.size + right.size;
     }
     get break() { return this.flags & 1 /* Flag.Break */; }
-    blockAt(height, doc, top, offset) {
+    blockAt(height, oracle, top, offset) {
         let mid = top + this.left.height;
-        return height < mid ? this.left.blockAt(height, doc, top, offset)
-            : this.right.blockAt(height, doc, mid, offset + this.left.length + this.break);
+        return height < mid ? this.left.blockAt(height, oracle, top, offset)
+            : this.right.blockAt(height, oracle, mid, offset + this.left.length + this.break);
     }
-    lineAt(value, type, doc, top, offset) {
+    lineAt(value, type, oracle, top, offset) {
         let rightTop = top + this.left.height, rightOffset = offset + this.left.length + this.break;
         let left = type == QueryType.ByHeight ? value < rightTop : value < rightOffset;
-        let base = left ? this.left.lineAt(value, type, doc, top, offset)
-            : this.right.lineAt(value, type, doc, rightTop, rightOffset);
+        let base = left ? this.left.lineAt(value, type, oracle, top, offset)
+            : this.right.lineAt(value, type, oracle, rightTop, rightOffset);
         if (this.break || (left ? base.to < rightOffset : base.from > rightOffset))
             return base;
         let subQuery = type == QueryType.ByPosNoHeight ? QueryType.ByPosNoHeight : QueryType.ByPos;
         if (left)
-            return base.join(this.right.lineAt(rightOffset, subQuery, doc, rightTop, rightOffset));
+            return base.join(this.right.lineAt(rightOffset, subQuery, oracle, rightTop, rightOffset));
         else
-            return this.left.lineAt(rightOffset, subQuery, doc, top, offset).join(base);
+            return this.left.lineAt(rightOffset, subQuery, oracle, top, offset).join(base);
     }
-    forEachLine(from, to, doc, top, offset, f) {
+    forEachLine(from, to, oracle, top, offset, f) {
         let rightTop = top + this.left.height, rightOffset = offset + this.left.length + this.break;
         if (this.break) {
             if (from < rightOffset)
-                this.left.forEachLine(from, to, doc, top, offset, f);
+                this.left.forEachLine(from, to, oracle, top, offset, f);
             if (to >= rightOffset)
-                this.right.forEachLine(from, to, doc, rightTop, rightOffset, f);
+                this.right.forEachLine(from, to, oracle, rightTop, rightOffset, f);
         }
         else {
-            let mid = this.lineAt(rightOffset, QueryType.ByPos, doc, top, offset);
+            let mid = this.lineAt(rightOffset, QueryType.ByPos, oracle, top, offset);
             if (from < mid.from)
-                this.left.forEachLine(from, mid.from - 1, doc, top, offset, f);
+                this.left.forEachLine(from, mid.from - 1, oracle, top, offset, f);
             if (mid.to >= from && mid.from <= to)
                 f(mid);
             if (to > mid.to)
-                this.right.forEachLine(mid.to + 1, to, doc, rightTop, rightOffset, f);
+                this.right.forEachLine(mid.to + 1, to, oracle, rightTop, rightOffset, f);
         }
     }
     replace(from, to, nodes) {
@@ -4880,11 +4931,11 @@ class ViewState {
         }
         this.viewports = viewports.sort((a, b) => a.from - b.from);
         this.scaler = this.heightMap.height <= 7000000 /* VP.MaxDOMHeight */ ? IdScaler :
-            new BigScaler(this.heightOracle.doc, this.heightMap, this.viewports);
+            new BigScaler(this.heightOracle, this.heightMap, this.viewports);
     }
     updateViewportLines() {
         this.viewportLines = [];
-        this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, block => {
+        this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.heightOracle.setDoc(this.state.doc), 0, 0, block => {
             this.viewportLines.push(this.scaler.scale == 1 ? block : scaleBlock(block, this.scaler));
         });
     }
@@ -4924,8 +4975,9 @@ class ViewState {
         let whiteSpace = style.whiteSpace;
         this.defaultTextDirection = style.direction == "rtl" ? Direction.RTL : Direction.LTR;
         let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
-        let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
-        this.contentDOMHeight = dom.clientHeight;
+        let domRect = dom.getBoundingClientRect();
+        let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != domRect.height;
+        this.contentDOMHeight = domRect.height;
         this.mustMeasureContent = false;
         let result = 0, bias = 0;
         // Vertical padding
@@ -4953,9 +5005,9 @@ class ViewState {
         }
         if (!this.inView && !this.scrollTarget)
             return 0;
-        let contentWidth = dom.clientWidth;
+        let contentWidth = domRect.width;
         if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
-            this.contentDOMWidth = contentWidth;
+            this.contentDOMWidth = domRect.width;
             this.editorHeight = view.scrollDOM.clientHeight;
             result |= 8 /* UpdateFlag.Geometry */;
         }
@@ -4984,7 +5036,8 @@ class ViewState {
                 result |= 2 /* UpdateFlag.Height */;
         }
         let viewportChange = !this.viewportIsAppropriate(this.viewport, bias) ||
-            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to);
+            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from ||
+                this.scrollTarget.range.head > this.viewport.to);
         if (viewportChange)
             this.viewport = this.getViewport(bias, this.scrollTarget);
         this.updateForViewport();
@@ -5010,36 +5063,37 @@ class ViewState {
         // bottom, depending on the bias (the change in viewport position
         // since the last update). It'll hold a number between 0 and 1
         let marginTop = 0.5 - Math.max(-0.5, Math.min(0.5, bias / 1000 /* VP.Margin */ / 2));
-        let map = this.heightMap, doc = this.state.doc, { visibleTop, visibleBottom } = this;
-        let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* VP.Margin */, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* VP.Margin */, QueryType.ByHeight, doc, 0, 0).to);
+        let map = this.heightMap, oracle = this.heightOracle;
+        let { visibleTop, visibleBottom } = this;
+        let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* VP.Margin */, QueryType.ByHeight, oracle, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* VP.Margin */, QueryType.ByHeight, oracle, 0, 0).to);
         // If scrollTarget is given, make sure the viewport includes that position
         if (scrollTarget) {
             let { head } = scrollTarget.range;
             if (head < viewport.from || head > viewport.to) {
                 let viewHeight = Math.min(this.editorHeight, this.pixelViewport.bottom - this.pixelViewport.top);
-                let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
+                let block = map.lineAt(head, QueryType.ByPos, oracle, 0, 0), topPos;
                 if (scrollTarget.y == "center")
                     topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
                 else if (scrollTarget.y == "start" || scrollTarget.y == "nearest" && head < viewport.from)
                     topPos = block.top;
                 else
                     topPos = block.bottom - viewHeight;
-                viewport = new Viewport(map.lineAt(topPos - 1000 /* VP.Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* VP.Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
+                viewport = new Viewport(map.lineAt(topPos - 1000 /* VP.Margin */ / 2, QueryType.ByHeight, oracle, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* VP.Margin */ / 2, QueryType.ByHeight, oracle, 0, 0).to);
             }
         }
         return viewport;
     }
     mapViewport(viewport, changes) {
         let from = changes.mapPos(viewport.from, -1), to = changes.mapPos(viewport.to, 1);
-        return new Viewport(this.heightMap.lineAt(from, QueryType.ByPos, this.state.doc, 0, 0).from, this.heightMap.lineAt(to, QueryType.ByPos, this.state.doc, 0, 0).to);
+        return new Viewport(this.heightMap.lineAt(from, QueryType.ByPos, this.heightOracle, 0, 0).from, this.heightMap.lineAt(to, QueryType.ByPos, this.heightOracle, 0, 0).to);
     }
     // Checks if a given viewport covers the visible part of the
     // document and not too much beyond that.
     viewportIsAppropriate({ from, to }, bias = 0) {
         if (!this.inView)
             return true;
-        let { top } = this.heightMap.lineAt(from, QueryType.ByPos, this.state.doc, 0, 0);
-        let { bottom } = this.heightMap.lineAt(to, QueryType.ByPos, this.state.doc, 0, 0);
+        let { top } = this.heightMap.lineAt(from, QueryType.ByPos, this.heightOracle, 0, 0);
+        let { bottom } = this.heightMap.lineAt(to, QueryType.ByPos, this.heightOracle, 0, 0);
         let { visibleTop, visibleBottom } = this;
         return (from == 0 || top <= visibleTop - Math.max(10 /* VP.MinCoverMargin */, Math.min(-bias, 250 /* VP.MaxCoverMargin */))) &&
             (to == this.state.doc.length ||
@@ -5176,13 +5230,13 @@ class ViewState {
     }
     lineBlockAt(pos) {
         return (pos >= this.viewport.from && pos <= this.viewport.to && this.viewportLines.find(b => b.from <= pos && b.to >= pos)) ||
-            scaleBlock(this.heightMap.lineAt(pos, QueryType.ByPos, this.state.doc, 0, 0), this.scaler);
+            scaleBlock(this.heightMap.lineAt(pos, QueryType.ByPos, this.heightOracle, 0, 0), this.scaler);
     }
     lineBlockAtHeight(height) {
-        return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.state.doc, 0, 0), this.scaler);
+        return scaleBlock(this.heightMap.lineAt(this.scaler.fromDOM(height), QueryType.ByHeight, this.heightOracle, 0, 0), this.scaler);
     }
     elementAtHeight(height) {
-        return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.state.doc, 0, 0), this.scaler);
+        return scaleBlock(this.heightMap.blockAt(this.scaler.fromDOM(height), this.heightOracle, 0, 0), this.scaler);
     }
     get docHeight() {
         return this.scaler.toDOM(this.heightMap.height);
@@ -5256,11 +5310,11 @@ const IdScaler = {
 // regions outside the viewports so that the total height is
 // VP.MaxDOMHeight.
 class BigScaler {
-    constructor(doc, heightMap, viewports) {
+    constructor(oracle, heightMap, viewports) {
         let vpHeight = 0, base = 0, domBase = 0;
         this.viewports = viewports.map(({ from, to }) => {
-            let top = heightMap.lineAt(from, QueryType.ByPos, doc, 0, 0).top;
-            let bottom = heightMap.lineAt(to, QueryType.ByPos, doc, 0, 0).bottom;
+            let top = heightMap.lineAt(from, QueryType.ByPos, oracle, 0, 0).top;
+            let bottom = heightMap.lineAt(to, QueryType.ByPos, oracle, 0, 0).bottom;
             vpHeight += bottom - top;
             return { from, to, top, bottom, domTop: 0, domBottom: 0 };
         });
@@ -5627,7 +5681,7 @@ function applyDOMChange(view, domChange) {
         };
     }
     else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
-        /^\. ?$/.test(change.insert.toString())) {
+        /^\. ?$/.test(change.insert.toString()) && view.contentDOM.getAttribute("autocorrect") == "off") {
         // Detect insert-period-on-double-space Mac and Android behavior,
         // and transform it into a regular space insert.
         if (newSel && change.insert.length == 2)
@@ -6381,6 +6435,20 @@ class EditorView {
             this.viewState.state = state;
             return;
         }
+        let focus = this.hasFocus, focusFlag = 0, dispatchFocus = null;
+        if (transactions.some(tr => tr.annotation(isFocusChange))) {
+            this.inputState.notifiedFocused = focus;
+            // If a focus-change transaction is being dispatched, set this update flag.
+            focusFlag = 1 /* UpdateFlag.Focus */;
+        }
+        else if (focus != this.inputState.notifiedFocused) {
+            this.inputState.notifiedFocused = focus;
+            // Schedule a separate focus transaction if necessary, otherwise
+            // add a flag to this update
+            dispatchFocus = focusChangeTransaction(state, focus);
+            if (!dispatchFocus)
+                focusFlag = 1 /* UpdateFlag.Focus */;
+        }
         // If there was a pending DOM change, eagerly read it and try to
         // apply it after the given transactions.
         let pendingKey = this.observer.delayedAndroidKey, domChange = null;
@@ -6399,6 +6467,7 @@ class EditorView {
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);
         update = ViewUpdate.create(this, state, transactions);
+        update.flags |= focusFlag;
         let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* UpdateState.Updating */;
@@ -6436,10 +6505,15 @@ class EditorView {
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(update);
-        if (domChange) {
-            if (!applyDOMChange(this, domChange) && pendingKey.force)
-                dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
-        }
+        if (dispatchFocus || domChange)
+            Promise.resolve().then(() => {
+                if (dispatchFocus && this.state == dispatchFocus.startState)
+                    this.dispatch(dispatchFocus);
+                if (domChange) {
+                    if (!applyDOMChange(this, domChange) && pendingKey.force)
+                        dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
+                }
+            });
     }
     /**
     Reset the view to the given state. (This will cause the entire
@@ -7041,6 +7115,11 @@ called and the default behavior is prevented.
 */
 EditorView.inputHandler = inputHandler;
 /**
+This facet can be used to provide functions that create effects
+to be dispatched when the editor's focus state changes.
+*/
+EditorView.focusChangeEffect = focusChangeEffect;
+/**
 By default, the editor assumes all its content has the same
 [text direction](https://codemirror.net/6/docs/ref/#view.Direction). Configure this with a `true`
 value to make it read the text direction of every (rendered)

package/package.json

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