@codemirror/view 6.17.0 → 6.18.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 6.18.0 (2023-09-05)
+
+### New features
+
+The new `EditorView.scaleX` and `scaleY` properties return the CSS-transformed scale of the editor (or 1 when not scaled).
+
+The editor now supports being scaled with CSS.
+
+## 6.17.1 (2023-08-31)
+
+### Bug fixes
+
+Don't close the hover tooltip when the pointer moves over empty space caused by line breaks within the hovered range.
+
+Fix a bug where on Chrome Android, if a virtual keyboard was slow to apply a change, the editor could end up dropping it.
+
+Work around an issue where line-wise copy/cut didn't work in Firefox because the browser wasn't firing those events when nothing was selected.
+
+Fix a crash triggered by the way some Android IME systems update the DOM.
+
+Fix a bug that caused replacing a word by an emoji on Chrome Android to be treated as a backspace press.
+
 ## 6.17.0 (2023-08-28)
 
 ### Bug fixes

package/dist/index.cjs

@@ -101,6 +101,7 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
     for (let cur = dom, stop = false; cur && !stop;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
+            let scaleX = 1, scaleY = 1;
             if (top) {
                 bounding = windowRect(win);
             }
@@ -112,9 +113,11 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
                     continue;
                 }
                 let rect = cur.getBoundingClientRect();
+                scaleX = rect.width / cur.offsetWidth;
+                scaleY = rect.height / cur.offsetHeight;
                 // Make sure scrollbar width isn't included in the rectangle
-                bounding = { left: rect.left, right: rect.left + cur.clientWidth,
-                    top: rect.top, bottom: rect.top + cur.clientHeight };
+                bounding = { left: rect.left, right: rect.left + cur.clientWidth * scaleX,
+                    top: rect.top, bottom: rect.top + cur.clientHeight * scaleY };
             }
             let moveX = 0, moveY = 0;
             if (y == "nearest") {
@@ -162,13 +165,13 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
                     let movedX = 0, movedY = 0;
                     if (moveY) {
                         let start = cur.scrollTop;
-                        cur.scrollTop += moveY;
-                        movedY = cur.scrollTop - start;
+                        cur.scrollTop += moveY / scaleY;
+                        movedY = (cur.scrollTop - start) * scaleY;
                     }
                     if (moveX) {
                         let start = cur.scrollLeft;
-                        cur.scrollLeft += moveX;
-                        movedX = cur.scrollLeft - start;
+                        cur.scrollLeft += moveX / scaleX;
+                        movedX = (cur.scrollLeft - start) * scaleX;
                     }
                     rect = { left: rect.left - movedX, top: rect.top - movedY,
                         right: rect.right - movedX, bottom: rect.bottom - movedY };
@@ -2781,7 +2784,7 @@ class DocView extends ContentView {
             // messes with the scroll position during DOM mutation (though
             // no relayout is triggered and I cannot imagine how it can
             // recompute the scroll position without a layout)
-            this.dom.style.height = this.view.viewState.contentHeight + "px";
+            this.dom.style.height = this.view.viewState.contentHeight / this.view.scaleY + "px";
             this.dom.style.flexBasis = this.minWidth ? this.minWidth + "px" : "";
             // Chrome will sometimes, when DOM mutations occur directly
             // around the selection, get confused and report a different
@@ -2853,7 +2856,7 @@ class DocView extends ContentView {
     }
     fixCompositionDOM(composition) {
         let fix = (dom, cView) => {
-            cView.flags |= 8 /* ViewFlag.Composition */;
+            cView.flags |= 8 /* ViewFlag.Composition */ | (cView.children.some(c => c.flags & 7 /* ViewFlag.Dirty */) ? 1 /* ViewFlag.ChildDirty */ : 0);
             this.markedForComposition.add(cView);
             let prev = ContentView.get(dom);
             if (prev != cView) {
@@ -3119,7 +3122,7 @@ class DocView extends ContentView {
             let next = i == vs.viewports.length ? null : vs.viewports[i];
             let end = next ? next.from - 1 : this.length;
             if (end > pos) {
-                let height = vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top;
+                let height = (vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top) / this.view.scaleY;
                 deco.push(Decoration.replace({
                     widget: new BlockGapWidget(height),
                     block: true,
@@ -3184,7 +3187,7 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function findCompositionNode(view) {
+function findCompositionNode(view, dLen) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
@@ -3196,10 +3199,12 @@ function findCompositionNode(view) {
         to = from + cView.length;
     }
     else {
+        let oldLen = Math.max(0, textNode.nodeValue.length - dLen);
         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;
+                    to = cView.posAtEnd + offset;
+                    from = Math.max(0, to - oldLen);
                     break up;
                 }
                 let reader = new DOMReader([], view.state);
@@ -3213,15 +3218,16 @@ function findCompositionNode(view) {
                 return null;
             let parentView = ContentView.get(node);
             if (parentView) {
-                from = to = parentView.posAtStart + offset;
+                from = parentView.posAtStart + offset;
+                to = from + oldLen;
                 break;
             }
         }
     }
-    return { from, to, node: textNode };
+    return { from, to: to, node: textNode };
 }
 function findCompositionRange(view, changes) {
-    let found = findCompositionNode(view);
+    let found = findCompositionNode(view, changes.newLength - changes.length);
     if (!found)
         return null;
     let { from: fromA, to: toA, node: textNode } = found;
@@ -3785,6 +3791,8 @@ class InputState {
         // issue where the composition vanishes when you press enter.
         if (browser.safari)
             view.contentDOM.addEventListener("input", () => null);
+        if (browser.gecko)
+            firefoxCopyCutHack(view.contentDOM.ownerDocument);
     }
     ensureHandlers(view, plugins) {
         var _a;
@@ -4490,6 +4498,18 @@ handlers.beforeinput = (view, event) => {
         }
     }
 };
+const appliedFirefoxHack = new Set;
+// In Firefox, when cut/copy handlers are added to the document, that
+// somehow avoids a bug where those events aren't fired when the
+// selection is empty. See https://github.com/codemirror/dev/issues/1082
+// and https://bugzilla.mozilla.org/show_bug.cgi?id=995961
+function firefoxCopyCutHack(doc) {
+    if (!appliedFirefoxHack.has(doc)) {
+        appliedFirefoxHack.add(doc);
+        doc.addEventListener("copy", () => { });
+        doc.addEventListener("cut", () => { });
+    }
+}
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
@@ -5259,8 +5279,10 @@ class LineGap {
         }
         return true;
     }
-    draw(wrapping) {
-        return Decoration.replace({ widget: new LineGapWidget(this.size, wrapping) }).range(this.from, this.to);
+    draw(viewState, wrapping) {
+        return Decoration.replace({
+            widget: new LineGapWidget(this.size * (wrapping ? viewState.scaleY : viewState.scaleX), wrapping)
+        }).range(this.from, this.to);
     }
 }
 class LineGapWidget extends WidgetType {
@@ -5290,14 +5312,18 @@ class ViewState {
         // These are contentDOM-local coordinates
         this.pixelViewport = { left: 0, right: window.innerWidth, top: 0, bottom: 0 };
         this.inView = true;
-        this.paddingTop = 0;
-        this.paddingBottom = 0;
-        this.contentDOMWidth = 0;
-        this.contentDOMHeight = 0;
-        this.editorHeight = 0;
-        this.editorWidth = 0;
-        this.scrollTop = 0;
+        this.paddingTop = 0; // Padding above the document, scaled
+        this.paddingBottom = 0; // Padding below the document, scaled
+        this.contentDOMWidth = 0; // contentDOM.getBoundingClientRect().width
+        this.contentDOMHeight = 0; // contentDOM.getBoundingClientRect().height
+        this.editorHeight = 0; // scrollDOM.clientHeight, unscaled
+        this.editorWidth = 0; // scrollDOM.clientWidth, unscaled
+        this.scrollTop = 0; // Last seen scrollDOM.scrollTop, scaled
         this.scrolledToBottom = true;
+        // The CSS-transformation scale of the editor (transformed size /
+        // concrete size)
+        this.scaleX = 1;
+        this.scaleY = 1;
         // The vertical position (document-relative) to which to anchor the
         // scroll position. -1 means anchor to the end of the document.
         this.scrollAnchorPos = 0;
@@ -5331,7 +5357,7 @@ class ViewState {
         this.updateViewportLines();
         this.updateForViewport();
         this.lineGaps = this.ensureLineGaps([]);
-        this.lineGapDeco = Decoration.set(this.lineGaps.map(gap => gap.draw(false)));
+        this.lineGapDeco = Decoration.set(this.lineGaps.map(gap => gap.draw(this, false)));
         this.computeVisibleRanges();
     }
     updateForViewport() {
@@ -5403,8 +5429,23 @@ class ViewState {
         this.contentDOMHeight = domRect.height;
         this.mustMeasureContent = false;
         let result = 0, bias = 0;
+        if (domRect.width && domRect.height) {
+            let scaleX = domRect.width / dom.offsetWidth;
+            let scaleY = domRect.height / dom.offsetHeight;
+            if (scaleX > 0.995 && scaleX < 1.005)
+                scaleX = 1;
+            if (scaleY > 0.995 && scaleY < 1.005)
+                scaleY = 1;
+            if (this.scaleX != scaleX || this.scaleY != scaleY) {
+                this.scaleX = scaleX;
+                this.scaleY = scaleY;
+                result |= 8 /* UpdateFlag.Geometry */;
+                refresh = measureContent = true;
+            }
+        }
         // Vertical padding
-        let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
+        let paddingTop = (parseInt(style.paddingTop) || 0) * this.scaleY;
+        let paddingBottom = (parseInt(style.paddingBottom) || 0) * this.scaleY;
         if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
             this.paddingTop = paddingTop;
             this.paddingBottom = paddingBottom;
@@ -5416,9 +5457,10 @@ class ViewState {
             this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* UpdateFlag.Geometry */;
         }
-        if (this.scrollTop != view.scrollDOM.scrollTop) {
+        let scrollTop = view.scrollDOM.scrollTop * this.scaleY;
+        if (this.scrollTop != scrollTop) {
             this.scrollAnchorHeight = -1;
-            this.scrollTop = view.scrollDOM.scrollTop;
+            this.scrollTop = scrollTop;
         }
         this.scrolledToBottom = isScrolledToBottom(view.scrollDOM);
         // Pixel viewport
@@ -5639,7 +5681,7 @@ class ViewState {
     updateLineGaps(gaps) {
         if (!LineGap.same(gaps, this.lineGaps)) {
             this.lineGaps = gaps;
-            this.lineGapDeco = Decoration.set(gaps.map(gap => gap.draw(this.heightOracle.lineWrapping)));
+            this.lineGapDeco = Decoration.set(gaps.map(gap => gap.draw(this, this.heightOracle.lineWrapping)));
         }
     }
     computeVisibleRanges() {
@@ -6146,7 +6188,7 @@ function applyDOMChange(view, domChange) {
                 change.insert.length == 1 && change.insert.lines == 2 &&
                 dispatchKey(view.contentDOM, "Enter", 13)) ||
                 ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
-                    lastKey == 8 && change.insert.length < change.to - change.from) &&
+                    lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) &&
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
@@ -6190,7 +6232,8 @@ function applyDefaultInsert(view, change, newSel) {
         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 composition = findCompositionNode(view) || view.state.doc.lineAt(sel.head);
+            let composition = findCompositionNode(view, change.insert.length - (change.to - change.from)) ||
+                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)
@@ -7040,13 +7083,18 @@ class EditorView {
             return;
         if (this.measureScheduled > -1)
             this.win.cancelAnimationFrame(this.measureScheduled);
+        if (this.observer.delayedAndroidKey) {
+            this.measureScheduled = -1;
+            this.requestMeasure();
+            return;
+        }
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.forceFlush();
         let updated = null;
-        let sDOM = this.scrollDOM, { scrollTop } = sDOM;
+        let sDOM = this.scrollDOM, scrollTop = sDOM.scrollTop * this.scaleY;
         let { scrollAnchorPos, scrollAnchorHeight } = this.viewState;
-        if (scrollTop != this.viewState.scrollTop)
+        if (Math.abs(scrollTop - this.viewState.scrollTop) > 1)
             scrollAnchorHeight = -1;
         this.viewState.scrollAnchorHeight = -1;
         try {
@@ -7123,7 +7171,8 @@ class EditorView {
                                 this.viewState.lineBlockAt(scrollAnchorPos).top;
                             let diff = newAnchorHeight - scrollAnchorHeight;
                             if (diff > 1 || diff < -1) {
-                                scrollTop = sDOM.scrollTop = scrollTop + diff;
+                                scrollTop = scrollTop + diff;
+                                sDOM.scrollTop = scrollTop / this.scaleY;
                                 scrollAnchorHeight = -1;
                                 continue;
                             }
@@ -7250,6 +7299,16 @@ class EditorView {
         return { top: this.viewState.paddingTop, bottom: this.viewState.paddingBottom };
     }
     /**
+    If the editor is transformed with CSS, this provides the scale
+    along the X axis. Otherwise, it will just be 1. Note that
+    transforms other than translation and scaling are not supported.
+    */
+    get scaleX() { return this.viewState.scaleX; }
+    /**
+    Provide the CSS transformed scale along the Y axis.
+    */
+    get scaleY() { return this.viewState.scaleY; }
+    /**
     Find the text line or block widget at the given vertical
     position (which is interpreted as relative to the [top of the
     document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
@@ -8040,8 +8099,8 @@ class RectangleMarker {
 }
 function getBase(view) {
     let rect = view.scrollDOM.getBoundingClientRect();
-    let left = view.textDirection == exports.Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;
-    return { left: left - view.scrollDOM.scrollLeft, top: rect.top - view.scrollDOM.scrollTop };
+    let left = view.textDirection == exports.Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth * view.scaleX;
+    return { left: left - view.scrollDOM.scrollLeft * view.scaleX, top: rect.top - view.scrollDOM.scrollTop * view.scaleY };
 }
 function wrappedLine(view, pos, inside) {
     let range = state.EditorSelection.cursor(pos);
@@ -8143,6 +8202,8 @@ class LayerView {
         this.view = view;
         this.layer = layer;
         this.drawn = [];
+        this.scaleX = 1;
+        this.scaleY = 1;
         this.measureReq = { read: this.measure.bind(this), write: this.draw.bind(this) };
         this.dom = view.scrollDOM.appendChild(document.createElement("div"));
         this.dom.classList.add("cm-layer");
@@ -8150,6 +8211,7 @@ class LayerView {
             this.dom.classList.add("cm-layer-above");
         if (layer.class)
             this.dom.classList.add(layer.class);
+        this.scale();
         this.dom.setAttribute("aria-hidden", "true");
         this.setOrder(view.state);
         view.requestMeasure(this.measureReq);
@@ -8159,8 +8221,10 @@ class LayerView {
     update(update) {
         if (update.startState.facet(layerOrder) != update.state.facet(layerOrder))
             this.setOrder(update.state);
-        if (this.layer.update(update, this.dom) || update.geometryChanged)
+        if (this.layer.update(update, this.dom) || update.geometryChanged) {
+            this.scale();
             update.view.requestMeasure(this.measureReq);
+        }
     }
     setOrder(state) {
         let pos = 0, order = state.facet(layerOrder);
@@ -8171,6 +8235,14 @@ class LayerView {
     measure() {
         return this.layer.markers(this.view);
     }
+    scale() {
+        let { scaleX, scaleY } = this.view;
+        if (scaleX != this.scaleX || scaleY != this.scaleY) {
+            this.scaleX = scaleX;
+            this.scaleY = scaleY;
+            this.dom.style.transform = `scale(${1 / scaleX}, ${1 / scaleY})`;
+        }
+    }
     draw(markers) {
         if (markers.length != this.drawn.length || markers.some((p, i) => !sameMarker(p, this.drawn[i]))) {
             let old = this.dom.firstChild, oldI = 0;
@@ -8340,23 +8412,25 @@ const drawDropCursor = ViewPlugin.fromClass(class {
         }
     }
     readPos() {
-        let pos = this.view.state.field(dropCursorPos);
-        let rect = pos != null && this.view.coordsAtPos(pos);
+        let { view } = this;
+        let pos = view.state.field(dropCursorPos);
+        let rect = pos != null && view.coordsAtPos(pos);
         if (!rect)
             return null;
-        let outer = this.view.scrollDOM.getBoundingClientRect();
+        let outer = view.scrollDOM.getBoundingClientRect();
         return {
-            left: rect.left - outer.left + this.view.scrollDOM.scrollLeft,
-            top: rect.top - outer.top + this.view.scrollDOM.scrollTop,
+            left: rect.left - outer.left + view.scrollDOM.scrollLeft * view.scaleX,
+            top: rect.top - outer.top + view.scrollDOM.scrollTop * view.scaleY,
             height: rect.bottom - rect.top
         };
     }
     drawCursor(pos) {
         if (this.cursor) {
+            let { scaleX, scaleY } = this.view;
             if (pos) {
-                this.cursor.style.left = pos.left + "px";
-                this.cursor.style.top = pos.top + "px";
-                this.cursor.style.height = pos.height + "px";
+                this.cursor.style.left = pos.left / scaleX + "px";
+                this.cursor.style.top = pos.top / scaleY + "px";
+                this.cursor.style.height = pos.height / scaleY + "px";
             }
             else {
                 this.cursor.style.left = "-100000px";
@@ -8598,7 +8672,9 @@ function specialCharPlugin() {
                     if (code == 9) {
                         let line = doc.lineAt(pos);
                         let size = view.state.tabSize, col = state.countColumn(line.text, size, pos - line.from);
-                        return Decoration.replace({ widget: new TabWidget((size - (col % size)) * this.view.defaultCharacterWidth) });
+                        return Decoration.replace({
+                            widget: new TabWidget((size - (col % size)) * this.view.defaultCharacterWidth / this.view.scaleX)
+                        });
                     }
                     return this.decorationCache[code] ||
                         (this.decorationCache[code] = Decoration.replace({ widget: new SpecialCharWidget(conf, code) }));
@@ -8675,7 +8751,8 @@ const plugin = ViewPlugin.fromClass(class {
     }
     update(update) {
         let { view } = update;
-        let height = view.viewState.editorHeight - view.defaultLineHeight - view.documentPadding.top - 0.5;
+        let height = view.viewState.editorHeight * view.scaleY -
+            view.defaultLineHeight - view.documentPadding.top - 0.5;
         if (height >= 0 && height != this.height) {
             this.height = height;
             this.attrs = { style: `padding-bottom: ${height}px` };
@@ -8972,6 +9049,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
     constructor(view) {
         this.view = view;
         this.inView = true;
+        this.madeAbsolute = false;
         this.lastTransaction = 0;
         this.measureTimeout = -1;
         let config = view.state.facet(tooltipConfig);
@@ -9023,7 +9101,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
             this.observeIntersection();
         let shouldMeasure = updated || update.geometryChanged;
         let newConfig = update.state.facet(tooltipConfig);
-        if (newConfig.position != this.position) {
+        if (newConfig.position != this.position && !this.madeAbsolute) {
             this.position = newConfig.position;
             for (let t of this.manager.tooltipViews)
                 t.dom.style.position = this.position;
@@ -9071,6 +9149,27 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
     }
     readMeasure() {
         let editor = this.view.dom.getBoundingClientRect();
+        let scaleX = 1, scaleY = 1, makeAbsolute = false;
+        if (this.position == "fixed") {
+            let views = this.manager.tooltipViews;
+            // When the dialog's offset parent isn't the body, we are
+            // probably in a transformed container, and should use absolute
+            // positioning instead, since fixed positioning inside a
+            // transform works in a very broken way.
+            makeAbsolute = views.length > 0 && views[0].dom.offsetParent != this.container.ownerDocument.body;
+        }
+        if (makeAbsolute || this.position == "absolute") {
+            if (this.parent) {
+                let rect = this.parent.getBoundingClientRect();
+                if (rect.width && rect.height) {
+                    scaleX = rect.width / this.parent.offsetWidth;
+                    scaleY = rect.height / this.parent.offsetHeight;
+                }
+            }
+            else {
+                ({ scaleX, scaleY } = this.view.viewState);
+            }
+        }
         return {
             editor,
             parent: this.parent ? this.container.getBoundingClientRect() : editor,
@@ -9080,11 +9179,18 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
             }),
             size: this.manager.tooltipViews.map(({ dom }) => dom.getBoundingClientRect()),
             space: this.view.state.facet(tooltipConfig).tooltipSpace(this.view),
+            scaleX, scaleY, makeAbsolute
         };
     }
     writeMeasure(measured) {
         var _a;
-        let { editor, space } = measured;
+        if (measured.makeAbsolute) {
+            this.madeAbsolute = true;
+            this.position = "absolute";
+            for (let t of this.manager.tooltipViews)
+                t.dom.style.position = "absolute";
+        }
+        let { editor, space, scaleX, scaleY } = measured;
         let others = [];
         for (let i = 0; i < this.manager.tooltips.length; i++) {
             let tooltip = this.manager.tooltips[i], tView = this.manager.tooltipViews[i], { dom } = tView;
@@ -9117,7 +9223,7 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
                     continue;
                 }
                 knownHeight.set(tView, height);
-                dom.style.height = (height = spaceVert) + "px";
+                dom.style.height = (height = spaceVert) / scaleY + "px";
             }
             else if (dom.style.height) {
                 dom.style.height = "";
@@ -9129,15 +9235,17 @@ const tooltipPlugin = ViewPlugin.fromClass(class {
                     if (r.left < right && r.right > left && r.top < top + height && r.bottom > top)
                         top = above ? r.top - height - 2 - arrowHeight : r.bottom + arrowHeight + 2;
             if (this.position == "absolute") {
-                dom.style.top = (top - measured.parent.top) + "px";
-                dom.style.left = (left - measured.parent.left) + "px";
+                dom.style.top = (top - measured.parent.top) / scaleY + "px";
+                dom.style.left = (left - measured.parent.left) / scaleX + "px";
             }
             else {
-                dom.style.top = top + "px";
-                dom.style.left = left + "px";
+                dom.style.top = top / scaleY + "px";
+                dom.style.left = left / scaleX + "px";
+            }
+            if (arrow) {
+                let arrowLeft = pos.left + (ltr ? offset.x : -offset.x) - (left + 14 /* Arrow.Offset */ - 7 /* Arrow.Size */);
+                arrow.style.left = arrowLeft / scaleX + "px";
             }
-            if (arrow)
-                arrow.style.left = `${pos.left + (ltr ? offset.x : -offset.x) - (left + 14 /* Arrow.Offset */ - 7 /* Arrow.Size */)}px`;
             if (tView.overlap !== true)
                 others.push({ left, top, right, bottom: top + height });
             dom.classList.toggle("cm-tooltip-above", above);
@@ -9370,7 +9478,7 @@ class HoverPlugin {
         if (tooltip && !isInTooltip(this.lastMove.target) || this.pending) {
             let { pos } = tooltip || this.pending, end = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.end) !== null && _a !== void 0 ? _a : pos;
             if ((pos == end ? this.view.posAtCoords(this.lastMove) != pos
-                : !isOverRange(this.view, pos, end, event.clientX, event.clientY, 6 /* Hover.MaxDist */))) {
+                : !isOverRange(this.view, pos, end, event.clientX, event.clientY))) {
                 this.view.dispatch({ effects: this.setHover.of(null) });
                 this.pending = null;
             }
@@ -9395,19 +9503,12 @@ function isInTooltip(elt) {
     return false;
 }
 function isOverRange(view, from, to, x, y, margin) {
-    let range = document.createRange();
-    let fromDOM = view.domAtPos(from), toDOM = view.domAtPos(to);
-    range.setEnd(toDOM.node, toDOM.offset);
-    range.setStart(fromDOM.node, fromDOM.offset);
-    let rects = range.getClientRects();
-    range.detach();
-    for (let i = 0; i < rects.length; i++) {
-        let rect = rects[i];
-        let dist = Math.max(rect.top - y, y - rect.bottom, rect.left - x, x - rect.right);
-        if (dist <= margin)
-            return true;
-    }
-    return false;
+    let rect = view.scrollDOM.getBoundingClientRect();
+    let docBottom = view.documentTop + view.documentPadding.top + view.contentHeight;
+    if (rect.left > x || rect.right < x || rect.top > y || Math.min(rect.bottom, docBottom) < y)
+        return false;
+    let pos = view.posAtCoords({ x, y }, false);
+    return pos >= from && pos <= to;
 }
 /**
 Set up a hover tooltip, which shows up when the pointer hovers
@@ -9746,7 +9847,7 @@ const gutterView = ViewPlugin.fromClass(class {
         this.dom = document.createElement("div");
         this.dom.className = "cm-gutters";
         this.dom.setAttribute("aria-hidden", "true");
-        this.dom.style.minHeight = this.view.contentHeight + "px";
+        this.dom.style.minHeight = (this.view.contentHeight / this.view.scaleY) + "px";
         this.gutters = view.state.facet(activeGutters).map(conf => new SingleGutterView(view, conf));
         for (let gutter of this.gutters)
             this.dom.appendChild(gutter.dom);
@@ -9856,7 +9957,9 @@ const gutterView = ViewPlugin.fromClass(class {
         let value = view.plugin(plugin);
         if (!value || value.gutters.length == 0 || !value.fixed)
             return null;
-        return view.textDirection == exports.Direction.LTR ? { left: value.dom.offsetWidth } : { right: value.dom.offsetWidth };
+        return view.textDirection == exports.Direction.LTR
+            ? { left: value.dom.offsetWidth * view.scaleX }
+            : { right: value.dom.offsetWidth * view.scaleX };
     })
 });
 function asArray(val) { return (Array.isArray(val) ? val : [val]); }
@@ -9973,10 +10076,12 @@ class GutterElement {
         this.update(view, height, above, markers);
     }
     update(view, height, above, markers) {
-        if (this.height != height)
-            this.dom.style.height = (this.height = height) + "px";
+        if (this.height != height) {
+            this.height = height;
+            this.dom.style.height = height / view.scaleY + "px";
+        }
         if (this.above != above)
-            this.dom.style.marginTop = (this.above = above) ? above + "px" : "";
+            this.dom.style.marginTop = (this.above = above) ? above / view.scaleY + "px" : "";
         if (!sameMarkers(this.markers, markers))
             this.setMarkers(view, markers);
     }

package/dist/index.d.cts

@@ -802,6 +802,16 @@ declare class EditorView {
         bottom: number;
     };
     /**
+    If the editor is transformed with CSS, this provides the scale
+    along the X axis. Otherwise, it will just be 1. Note that
+    transforms other than translation and scaling are not supported.
+    */
+    get scaleX(): number;
+    /**
+    Provide the CSS transformed scale along the Y axis.
+    */
+    get scaleY(): number;
+    /**
     Find the text line or block widget at the given vertical
     position (which is interpreted as relative to the [top of the
     document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
@@ -1653,6 +1663,9 @@ declare function tooltips(config?: {
     On iOS, which at the time of writing still doesn't properly
     support fixed positioning, the library always uses absolute
     positioning.
+    
+    If the tooltip parent element sits in a transformed element, the
+    library also falls back to absolute positioning.
     */
     position?: "fixed" | "absolute";
     /**

package/dist/index.d.ts

@@ -802,6 +802,16 @@ declare class EditorView {
         bottom: number;
     };
     /**
+    If the editor is transformed with CSS, this provides the scale
+    along the X axis. Otherwise, it will just be 1. Note that
+    transforms other than translation and scaling are not supported.
+    */
+    get scaleX(): number;
+    /**
+    Provide the CSS transformed scale along the Y axis.
+    */
+    get scaleY(): number;
+    /**
     Find the text line or block widget at the given vertical
     position (which is interpreted as relative to the [top of the
     document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
@@ -1653,6 +1663,9 @@ declare function tooltips(config?: {
     On iOS, which at the time of writing still doesn't properly
     support fixed positioning, the library always uses absolute
     positioning.
+    
+    If the tooltip parent element sits in a transformed element, the
+    library also falls back to absolute positioning.
     */
     position?: "fixed" | "absolute";
     /**

package/dist/index.js

@@ -99,6 +99,7 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
     for (let cur = dom, stop = false; cur && !stop;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
+            let scaleX = 1, scaleY = 1;
             if (top) {
                 bounding = windowRect(win);
             }
@@ -110,9 +111,11 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
                     continue;
                 }
                 let rect = cur.getBoundingClientRect();
+                scaleX = rect.width / cur.offsetWidth;
+                scaleY = rect.height / cur.offsetHeight;
                 // Make sure scrollbar width isn't included in the rectangle
-                bounding = { left: rect.left, right: rect.left + cur.clientWidth,
-                    top: rect.top, bottom: rect.top + cur.clientHeight };
+                bounding = { left: rect.left, right: rect.left + cur.clientWidth * scaleX,
+                    top: rect.top, bottom: rect.top + cur.clientHeight * scaleY };
             }
             let moveX = 0, moveY = 0;
             if (y == "nearest") {
@@ -160,13 +163,13 @@ function scrollRectIntoView(dom, rect, side, x, y, xMargin, yMargin, ltr) {
                     let movedX = 0, movedY = 0;
                     if (moveY) {
                         let start = cur.scrollTop;
-                        cur.scrollTop += moveY;
-                        movedY = cur.scrollTop - start;
+                        cur.scrollTop += moveY / scaleY;
+                        movedY = (cur.scrollTop - start) * scaleY;
                     }
                     if (moveX) {
                         let start = cur.scrollLeft;
-                        cur.scrollLeft += moveX;
-                        movedX = cur.scrollLeft - start;
+                        cur.scrollLeft += moveX / scaleX;
+                        movedX = (cur.scrollLeft - start) * scaleX;
                     }
                     rect = { left: rect.left - movedX, top: rect.top - movedY,
                         right: rect.right - movedX, bottom: rect.bottom - movedY };
@@ -2777,7 +2780,7 @@ class DocView extends ContentView {
             // messes with the scroll position during DOM mutation (though
             // no relayout is triggered and I cannot imagine how it can
             // recompute the scroll position without a layout)
-            this.dom.style.height = this.view.viewState.contentHeight + "px";
+            this.dom.style.height = this.view.viewState.contentHeight / this.view.scaleY + "px";
             this.dom.style.flexBasis = this.minWidth ? this.minWidth + "px" : "";
             // Chrome will sometimes, when DOM mutations occur directly
             // around the selection, get confused and report a different
@@ -2849,7 +2852,7 @@ class DocView extends ContentView {
     }
     fixCompositionDOM(composition) {
         let fix = (dom, cView) => {
-            cView.flags |= 8 /* ViewFlag.Composition */;
+            cView.flags |= 8 /* ViewFlag.Composition */ | (cView.children.some(c => c.flags & 7 /* ViewFlag.Dirty */) ? 1 /* ViewFlag.ChildDirty */ : 0);
             this.markedForComposition.add(cView);
             let prev = ContentView.get(dom);
             if (prev != cView) {
@@ -3115,7 +3118,7 @@ class DocView extends ContentView {
             let next = i == vs.viewports.length ? null : vs.viewports[i];
             let end = next ? next.from - 1 : this.length;
             if (end > pos) {
-                let height = vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top;
+                let height = (vs.lineBlockAt(end).bottom - vs.lineBlockAt(pos).top) / this.view.scaleY;
                 deco.push(Decoration.replace({
                     widget: new BlockGapWidget(height),
                     block: true,
@@ -3180,7 +3183,7 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function findCompositionNode(view) {
+function findCompositionNode(view, dLen) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
@@ -3192,10 +3195,12 @@ function findCompositionNode(view) {
         to = from + cView.length;
     }
     else {
+        let oldLen = Math.max(0, textNode.nodeValue.length - dLen);
         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;
+                    to = cView.posAtEnd + offset;
+                    from = Math.max(0, to - oldLen);
                     break up;
                 }
                 let reader = new DOMReader([], view.state);
@@ -3209,15 +3214,16 @@ function findCompositionNode(view) {
                 return null;
             let parentView = ContentView.get(node);
             if (parentView) {
-                from = to = parentView.posAtStart + offset;
+                from = parentView.posAtStart + offset;
+                to = from + oldLen;
                 break;
             }
         }
     }
-    return { from, to, node: textNode };
+    return { from, to: to, node: textNode };
 }
 function findCompositionRange(view, changes) {
-    let found = findCompositionNode(view);
+    let found = findCompositionNode(view, changes.newLength - changes.length);
     if (!found)
         return null;
     let { from: fromA, to: toA, node: textNode } = found;
@@ -3781,6 +3787,8 @@ class InputState {
         // issue where the composition vanishes when you press enter.
         if (browser.safari)
             view.contentDOM.addEventListener("input", () => null);
+        if (browser.gecko)
+            firefoxCopyCutHack(view.contentDOM.ownerDocument);
     }
     ensureHandlers(view, plugins) {
         var _a;
@@ -4486,6 +4494,18 @@ handlers.beforeinput = (view, event) => {
         }
     }
 };
+const appliedFirefoxHack = /*@__PURE__*/new Set;
+// In Firefox, when cut/copy handlers are added to the document, that
+// somehow avoids a bug where those events aren't fired when the
+// selection is empty. See https://github.com/codemirror/dev/issues/1082
+// and https://bugzilla.mozilla.org/show_bug.cgi?id=995961
+function firefoxCopyCutHack(doc) {
+    if (!appliedFirefoxHack.has(doc)) {
+        appliedFirefoxHack.add(doc);
+        doc.addEventListener("copy", () => { });
+        doc.addEventListener("cut", () => { });
+    }
+}
 
 const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
@@ -5254,8 +5274,10 @@ class LineGap {
         }
         return true;
     }
-    draw(wrapping) {
-        return Decoration.replace({ widget: new LineGapWidget(this.size, wrapping) }).range(this.from, this.to);
+    draw(viewState, wrapping) {
+        return Decoration.replace({
+            widget: new LineGapWidget(this.size * (wrapping ? viewState.scaleY : viewState.scaleX), wrapping)
+        }).range(this.from, this.to);
     }
 }
 class LineGapWidget extends WidgetType {
@@ -5285,14 +5307,18 @@ class ViewState {
         // These are contentDOM-local coordinates
         this.pixelViewport = { left: 0, right: window.innerWidth, top: 0, bottom: 0 };
         this.inView = true;
-        this.paddingTop = 0;
-        this.paddingBottom = 0;
-        this.contentDOMWidth = 0;
-        this.contentDOMHeight = 0;
-        this.editorHeight = 0;
-        this.editorWidth = 0;
-        this.scrollTop = 0;
+        this.paddingTop = 0; // Padding above the document, scaled
+        this.paddingBottom = 0; // Padding below the document, scaled
+        this.contentDOMWidth = 0; // contentDOM.getBoundingClientRect().width
+        this.contentDOMHeight = 0; // contentDOM.getBoundingClientRect().height
+        this.editorHeight = 0; // scrollDOM.clientHeight, unscaled
+        this.editorWidth = 0; // scrollDOM.clientWidth, unscaled
+        this.scrollTop = 0; // Last seen scrollDOM.scrollTop, scaled
         this.scrolledToBottom = true;
+        // The CSS-transformation scale of the editor (transformed size /
+        // concrete size)
+        this.scaleX = 1;
+        this.scaleY = 1;
         // The vertical position (document-relative) to which to anchor the
         // scroll position. -1 means anchor to the end of the document.
         this.scrollAnchorPos = 0;
@@ -5326,7 +5352,7 @@ class ViewState {
         this.updateViewportLines();
         this.updateForViewport();
         this.lineGaps = this.ensureLineGaps([]);
-        this.lineGapDeco = Decoration.set(this.lineGaps.map(gap => gap.draw(false)));
+        this.lineGapDeco = Decoration.set(this.lineGaps.map(gap => gap.draw(this, false)));
         this.computeVisibleRanges();
     }
     updateForViewport() {
@@ -5398,8 +5424,23 @@ class ViewState {
         this.contentDOMHeight = domRect.height;
         this.mustMeasureContent = false;
         let result = 0, bias = 0;
+        if (domRect.width && domRect.height) {
+            let scaleX = domRect.width / dom.offsetWidth;
+            let scaleY = domRect.height / dom.offsetHeight;
+            if (scaleX > 0.995 && scaleX < 1.005)
+                scaleX = 1;
+            if (scaleY > 0.995 && scaleY < 1.005)
+                scaleY = 1;
+            if (this.scaleX != scaleX || this.scaleY != scaleY) {
+                this.scaleX = scaleX;
+                this.scaleY = scaleY;
+                result |= 8 /* UpdateFlag.Geometry */;
+                refresh = measureContent = true;
+            }
+        }
         // Vertical padding
-        let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
+        let paddingTop = (parseInt(style.paddingTop) || 0) * this.scaleY;
+        let paddingBottom = (parseInt(style.paddingBottom) || 0) * this.scaleY;
         if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
             this.paddingTop = paddingTop;
             this.paddingBottom = paddingBottom;
@@ -5411,9 +5452,10 @@ class ViewState {
             this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* UpdateFlag.Geometry */;
         }
-        if (this.scrollTop != view.scrollDOM.scrollTop) {
+        let scrollTop = view.scrollDOM.scrollTop * this.scaleY;
+        if (this.scrollTop != scrollTop) {
             this.scrollAnchorHeight = -1;
-            this.scrollTop = view.scrollDOM.scrollTop;
+            this.scrollTop = scrollTop;
         }
         this.scrolledToBottom = isScrolledToBottom(view.scrollDOM);
         // Pixel viewport
@@ -5634,7 +5676,7 @@ class ViewState {
     updateLineGaps(gaps) {
         if (!LineGap.same(gaps, this.lineGaps)) {
             this.lineGaps = gaps;
-            this.lineGapDeco = Decoration.set(gaps.map(gap => gap.draw(this.heightOracle.lineWrapping)));
+            this.lineGapDeco = Decoration.set(gaps.map(gap => gap.draw(this, this.heightOracle.lineWrapping)));
         }
     }
     computeVisibleRanges() {
@@ -6141,7 +6183,7 @@ function applyDOMChange(view, domChange) {
                 change.insert.length == 1 && change.insert.lines == 2 &&
                 dispatchKey(view.contentDOM, "Enter", 13)) ||
                 ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
-                    lastKey == 8 && change.insert.length < change.to - change.from) &&
+                    lastKey == 8 && change.insert.length < change.to - change.from && change.to > sel.head) &&
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
@@ -6185,7 +6227,8 @@ function applyDefaultInsert(view, change, newSel) {
         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 composition = findCompositionNode(view) || view.state.doc.lineAt(sel.head);
+            let composition = findCompositionNode(view, change.insert.length - (change.to - change.from)) ||
+                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)
@@ -7035,13 +7078,18 @@ class EditorView {
             return;
         if (this.measureScheduled > -1)
             this.win.cancelAnimationFrame(this.measureScheduled);
+        if (this.observer.delayedAndroidKey) {
+            this.measureScheduled = -1;
+            this.requestMeasure();
+            return;
+        }
         this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.forceFlush();
         let updated = null;
-        let sDOM = this.scrollDOM, { scrollTop } = sDOM;
+        let sDOM = this.scrollDOM, scrollTop = sDOM.scrollTop * this.scaleY;
         let { scrollAnchorPos, scrollAnchorHeight } = this.viewState;
-        if (scrollTop != this.viewState.scrollTop)
+        if (Math.abs(scrollTop - this.viewState.scrollTop) > 1)
             scrollAnchorHeight = -1;
         this.viewState.scrollAnchorHeight = -1;
         try {
@@ -7118,7 +7166,8 @@ class EditorView {
                                 this.viewState.lineBlockAt(scrollAnchorPos).top;
                             let diff = newAnchorHeight - scrollAnchorHeight;
                             if (diff > 1 || diff < -1) {
-                                scrollTop = sDOM.scrollTop = scrollTop + diff;
+                                scrollTop = scrollTop + diff;
+                                sDOM.scrollTop = scrollTop / this.scaleY;
                                 scrollAnchorHeight = -1;
                                 continue;
                             }
@@ -7245,6 +7294,16 @@ class EditorView {
         return { top: this.viewState.paddingTop, bottom: this.viewState.paddingBottom };
     }
     /**
+    If the editor is transformed with CSS, this provides the scale
+    along the X axis. Otherwise, it will just be 1. Note that
+    transforms other than translation and scaling are not supported.
+    */
+    get scaleX() { return this.viewState.scaleX; }
+    /**
+    Provide the CSS transformed scale along the Y axis.
+    */
+    get scaleY() { return this.viewState.scaleY; }
+    /**
     Find the text line or block widget at the given vertical
     position (which is interpreted as relative to the [top of the
     document](https://codemirror.net/6/docs/ref/#view.EditorView.documentTop)).
@@ -8035,8 +8094,8 @@ class RectangleMarker {
 }
 function getBase(view) {
     let rect = view.scrollDOM.getBoundingClientRect();
-    let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;
-    return { left: left - view.scrollDOM.scrollLeft, top: rect.top - view.scrollDOM.scrollTop };
+    let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth * view.scaleX;
+    return { left: left - view.scrollDOM.scrollLeft * view.scaleX, top: rect.top - view.scrollDOM.scrollTop * view.scaleY };
 }
 function wrappedLine(view, pos, inside) {
     let range = EditorSelection.cursor(pos);
@@ -8138,6 +8197,8 @@ class LayerView {
         this.view = view;
         this.layer = layer;
         this.drawn = [];
+        this.scaleX = 1;
+        this.scaleY = 1;
         this.measureReq = { read: this.measure.bind(this), write: this.draw.bind(this) };
         this.dom = view.scrollDOM.appendChild(document.createElement("div"));
         this.dom.classList.add("cm-layer");
@@ -8145,6 +8206,7 @@ class LayerView {
             this.dom.classList.add("cm-layer-above");
         if (layer.class)
             this.dom.classList.add(layer.class);
+        this.scale();
         this.dom.setAttribute("aria-hidden", "true");
         this.setOrder(view.state);
         view.requestMeasure(this.measureReq);
@@ -8154,8 +8216,10 @@ class LayerView {
     update(update) {
         if (update.startState.facet(layerOrder) != update.state.facet(layerOrder))
             this.setOrder(update.state);
-        if (this.layer.update(update, this.dom) || update.geometryChanged)
+        if (this.layer.update(update, this.dom) || update.geometryChanged) {
+            this.scale();
             update.view.requestMeasure(this.measureReq);
+        }
     }
     setOrder(state) {
         let pos = 0, order = state.facet(layerOrder);
@@ -8166,6 +8230,14 @@ class LayerView {
     measure() {
         return this.layer.markers(this.view);
     }
+    scale() {
+        let { scaleX, scaleY } = this.view;
+        if (scaleX != this.scaleX || scaleY != this.scaleY) {
+            this.scaleX = scaleX;
+            this.scaleY = scaleY;
+            this.dom.style.transform = `scale(${1 / scaleX}, ${1 / scaleY})`;
+        }
+    }
     draw(markers) {
         if (markers.length != this.drawn.length || markers.some((p, i) => !sameMarker(p, this.drawn[i]))) {
             let old = this.dom.firstChild, oldI = 0;
@@ -8335,23 +8407,25 @@ const drawDropCursor = /*@__PURE__*/ViewPlugin.fromClass(class {
         }
     }
     readPos() {
-        let pos = this.view.state.field(dropCursorPos);
-        let rect = pos != null && this.view.coordsAtPos(pos);
+        let { view } = this;
+        let pos = view.state.field(dropCursorPos);
+        let rect = pos != null && view.coordsAtPos(pos);
         if (!rect)
             return null;
-        let outer = this.view.scrollDOM.getBoundingClientRect();
+        let outer = view.scrollDOM.getBoundingClientRect();
         return {
-            left: rect.left - outer.left + this.view.scrollDOM.scrollLeft,
-            top: rect.top - outer.top + this.view.scrollDOM.scrollTop,
+            left: rect.left - outer.left + view.scrollDOM.scrollLeft * view.scaleX,
+            top: rect.top - outer.top + view.scrollDOM.scrollTop * view.scaleY,
             height: rect.bottom - rect.top
         };
     }
     drawCursor(pos) {
         if (this.cursor) {
+            let { scaleX, scaleY } = this.view;
             if (pos) {
-                this.cursor.style.left = pos.left + "px";
-                this.cursor.style.top = pos.top + "px";
-                this.cursor.style.height = pos.height + "px";
+                this.cursor.style.left = pos.left / scaleX + "px";
+                this.cursor.style.top = pos.top / scaleY + "px";
+                this.cursor.style.height = pos.height / scaleY + "px";
             }
             else {
                 this.cursor.style.left = "-100000px";
@@ -8593,7 +8667,9 @@ function specialCharPlugin() {
                     if (code == 9) {
                         let line = doc.lineAt(pos);
                         let size = view.state.tabSize, col = countColumn(line.text, size, pos - line.from);
-                        return Decoration.replace({ widget: new TabWidget((size - (col % size)) * this.view.defaultCharacterWidth) });
+                        return Decoration.replace({
+                            widget: new TabWidget((size - (col % size)) * this.view.defaultCharacterWidth / this.view.scaleX)
+                        });
                     }
                     return this.decorationCache[code] ||
                         (this.decorationCache[code] = Decoration.replace({ widget: new SpecialCharWidget(conf, code) }));
@@ -8670,7 +8746,8 @@ const plugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     }
     update(update) {
         let { view } = update;
-        let height = view.viewState.editorHeight - view.defaultLineHeight - view.documentPadding.top - 0.5;
+        let height = view.viewState.editorHeight * view.scaleY -
+            view.defaultLineHeight - view.documentPadding.top - 0.5;
         if (height >= 0 && height != this.height) {
             this.height = height;
             this.attrs = { style: `padding-bottom: ${height}px` };
@@ -8967,6 +9044,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     constructor(view) {
         this.view = view;
         this.inView = true;
+        this.madeAbsolute = false;
         this.lastTransaction = 0;
         this.measureTimeout = -1;
         let config = view.state.facet(tooltipConfig);
@@ -9018,7 +9096,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
             this.observeIntersection();
         let shouldMeasure = updated || update.geometryChanged;
         let newConfig = update.state.facet(tooltipConfig);
-        if (newConfig.position != this.position) {
+        if (newConfig.position != this.position && !this.madeAbsolute) {
             this.position = newConfig.position;
             for (let t of this.manager.tooltipViews)
                 t.dom.style.position = this.position;
@@ -9066,6 +9144,27 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
     }
     readMeasure() {
         let editor = this.view.dom.getBoundingClientRect();
+        let scaleX = 1, scaleY = 1, makeAbsolute = false;
+        if (this.position == "fixed") {
+            let views = this.manager.tooltipViews;
+            // When the dialog's offset parent isn't the body, we are
+            // probably in a transformed container, and should use absolute
+            // positioning instead, since fixed positioning inside a
+            // transform works in a very broken way.
+            makeAbsolute = views.length > 0 && views[0].dom.offsetParent != this.container.ownerDocument.body;
+        }
+        if (makeAbsolute || this.position == "absolute") {
+            if (this.parent) {
+                let rect = this.parent.getBoundingClientRect();
+                if (rect.width && rect.height) {
+                    scaleX = rect.width / this.parent.offsetWidth;
+                    scaleY = rect.height / this.parent.offsetHeight;
+                }
+            }
+            else {
+                ({ scaleX, scaleY } = this.view.viewState);
+            }
+        }
         return {
             editor,
             parent: this.parent ? this.container.getBoundingClientRect() : editor,
@@ -9075,11 +9174,18 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
             }),
             size: this.manager.tooltipViews.map(({ dom }) => dom.getBoundingClientRect()),
             space: this.view.state.facet(tooltipConfig).tooltipSpace(this.view),
+            scaleX, scaleY, makeAbsolute
         };
     }
     writeMeasure(measured) {
         var _a;
-        let { editor, space } = measured;
+        if (measured.makeAbsolute) {
+            this.madeAbsolute = true;
+            this.position = "absolute";
+            for (let t of this.manager.tooltipViews)
+                t.dom.style.position = "absolute";
+        }
+        let { editor, space, scaleX, scaleY } = measured;
         let others = [];
         for (let i = 0; i < this.manager.tooltips.length; i++) {
             let tooltip = this.manager.tooltips[i], tView = this.manager.tooltipViews[i], { dom } = tView;
@@ -9112,7 +9218,7 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
                     continue;
                 }
                 knownHeight.set(tView, height);
-                dom.style.height = (height = spaceVert) + "px";
+                dom.style.height = (height = spaceVert) / scaleY + "px";
             }
             else if (dom.style.height) {
                 dom.style.height = "";
@@ -9124,15 +9230,17 @@ const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
                     if (r.left < right && r.right > left && r.top < top + height && r.bottom > top)
                         top = above ? r.top - height - 2 - arrowHeight : r.bottom + arrowHeight + 2;
             if (this.position == "absolute") {
-                dom.style.top = (top - measured.parent.top) + "px";
-                dom.style.left = (left - measured.parent.left) + "px";
+                dom.style.top = (top - measured.parent.top) / scaleY + "px";
+                dom.style.left = (left - measured.parent.left) / scaleX + "px";
             }
             else {
-                dom.style.top = top + "px";
-                dom.style.left = left + "px";
+                dom.style.top = top / scaleY + "px";
+                dom.style.left = left / scaleX + "px";
+            }
+            if (arrow) {
+                let arrowLeft = pos.left + (ltr ? offset.x : -offset.x) - (left + 14 /* Arrow.Offset */ - 7 /* Arrow.Size */);
+                arrow.style.left = arrowLeft / scaleX + "px";
             }
-            if (arrow)
-                arrow.style.left = `${pos.left + (ltr ? offset.x : -offset.x) - (left + 14 /* Arrow.Offset */ - 7 /* Arrow.Size */)}px`;
             if (tView.overlap !== true)
                 others.push({ left, top, right, bottom: top + height });
             dom.classList.toggle("cm-tooltip-above", above);
@@ -9365,7 +9473,7 @@ class HoverPlugin {
         if (tooltip && !isInTooltip(this.lastMove.target) || this.pending) {
             let { pos } = tooltip || this.pending, end = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.end) !== null && _a !== void 0 ? _a : pos;
             if ((pos == end ? this.view.posAtCoords(this.lastMove) != pos
-                : !isOverRange(this.view, pos, end, event.clientX, event.clientY, 6 /* Hover.MaxDist */))) {
+                : !isOverRange(this.view, pos, end, event.clientX, event.clientY))) {
                 this.view.dispatch({ effects: this.setHover.of(null) });
                 this.pending = null;
             }
@@ -9390,19 +9498,12 @@ function isInTooltip(elt) {
     return false;
 }
 function isOverRange(view, from, to, x, y, margin) {
-    let range = document.createRange();
-    let fromDOM = view.domAtPos(from), toDOM = view.domAtPos(to);
-    range.setEnd(toDOM.node, toDOM.offset);
-    range.setStart(fromDOM.node, fromDOM.offset);
-    let rects = range.getClientRects();
-    range.detach();
-    for (let i = 0; i < rects.length; i++) {
-        let rect = rects[i];
-        let dist = Math.max(rect.top - y, y - rect.bottom, rect.left - x, x - rect.right);
-        if (dist <= margin)
-            return true;
-    }
-    return false;
+    let rect = view.scrollDOM.getBoundingClientRect();
+    let docBottom = view.documentTop + view.documentPadding.top + view.contentHeight;
+    if (rect.left > x || rect.right < x || rect.top > y || Math.min(rect.bottom, docBottom) < y)
+        return false;
+    let pos = view.posAtCoords({ x, y }, false);
+    return pos >= from && pos <= to;
 }
 /**
 Set up a hover tooltip, which shows up when the pointer hovers
@@ -9741,7 +9842,7 @@ const gutterView = /*@__PURE__*/ViewPlugin.fromClass(class {
         this.dom = document.createElement("div");
         this.dom.className = "cm-gutters";
         this.dom.setAttribute("aria-hidden", "true");
-        this.dom.style.minHeight = this.view.contentHeight + "px";
+        this.dom.style.minHeight = (this.view.contentHeight / this.view.scaleY) + "px";
         this.gutters = view.state.facet(activeGutters).map(conf => new SingleGutterView(view, conf));
         for (let gutter of this.gutters)
             this.dom.appendChild(gutter.dom);
@@ -9851,7 +9952,9 @@ const gutterView = /*@__PURE__*/ViewPlugin.fromClass(class {
         let value = view.plugin(plugin);
         if (!value || value.gutters.length == 0 || !value.fixed)
             return null;
-        return view.textDirection == Direction.LTR ? { left: value.dom.offsetWidth } : { right: value.dom.offsetWidth };
+        return view.textDirection == Direction.LTR
+            ? { left: value.dom.offsetWidth * view.scaleX }
+            : { right: value.dom.offsetWidth * view.scaleX };
     })
 });
 function asArray(val) { return (Array.isArray(val) ? val : [val]); }
@@ -9968,10 +10071,12 @@ class GutterElement {
         this.update(view, height, above, markers);
     }
     update(view, height, above, markers) {
-        if (this.height != height)
-            this.dom.style.height = (this.height = height) + "px";
+        if (this.height != height) {
+            this.height = height;
+            this.dom.style.height = height / view.scaleY + "px";
+        }
         if (this.above != above)
-            this.dom.style.marginTop = (this.above = above) ? above + "px" : "";
+            this.dom.style.marginTop = (this.above = above) ? above / view.scaleY + "px" : "";
         if (!sameMarkers(this.markers, markers))
             this.setMarkers(view, markers);
     }

package/package.json

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