@codemirror/view 6.17.1 → 6.18.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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

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,
@@ -5276,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 {
@@ -5307,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;
@@ -5348,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() {
@@ -5420,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;
@@ -5433,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
@@ -5656,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() {
@@ -7067,9 +7092,9 @@ class EditorView {
         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 {
@@ -7146,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;
                             }
@@ -7273,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)).
@@ -8063,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);
@@ -8166,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");
@@ -8173,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);
@@ -8182,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);
@@ -8194,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;
@@ -8363,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";
@@ -8621,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) }));
@@ -8698,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` };
@@ -8995,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);
@@ -9046,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;
@@ -9094,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,
@@ -9103,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;
@@ -9140,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 = "";
@@ -9152,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);
@@ -9762,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);
@@ -9872,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]); }
@@ -9989,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,
@@ -5271,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 {
@@ -5302,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;
@@ -5343,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() {
@@ -5415,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;
@@ -5428,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
@@ -5651,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() {
@@ -7062,9 +7087,9 @@ class EditorView {
         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 {
@@ -7141,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;
                             }
@@ -7268,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)).
@@ -8058,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);
@@ -8161,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");
@@ -8168,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);
@@ -8177,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);
@@ -8189,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;
@@ -8358,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";
@@ -8616,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) }));
@@ -8693,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` };
@@ -8990,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);
@@ -9041,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;
@@ -9089,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,
@@ -9098,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;
@@ -9135,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 = "";
@@ -9147,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);
@@ -9757,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);
@@ -9867,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]); }
@@ -9984,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.1",
+  "version": "6.18.0",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",