@codemirror/view 6.17.1 → 6.18.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { EditorState, Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, findColumn, CharCategory, Annotation, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
+import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, findColumn, CharCategory, Annotation, EditorState, Transaction, Prec, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { keyName, base, shift } from 'w3c-keyname';
 
@@ -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 };
@@ -479,6 +482,8 @@ class ContentView {
         }
     }
     setDOM(dom) {
+        if (this.dom == dom)
+            return;
         if (this.dom)
             this.dom.cmView = null;
         this.dom = dom;
@@ -651,113 +656,6 @@ function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
     replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
 }
 
-const LineBreakPlaceholder = "\uffff";
-class DOMReader {
-    constructor(points, state) {
-        this.points = points;
-        this.text = "";
-        this.lineSeparator = state.facet(EditorState.lineSeparator);
-    }
-    append(text) {
-        this.text += text;
-    }
-    lineBreak() {
-        this.text += LineBreakPlaceholder;
-    }
-    readRange(start, end) {
-        if (!start)
-            return this;
-        let parent = start.parentNode;
-        for (let cur = start;;) {
-            this.findPointBefore(parent, cur);
-            let oldLen = this.text.length;
-            this.readNode(cur);
-            let next = cur.nextSibling;
-            if (next == end)
-                break;
-            let view = ContentView.get(cur), nextView = ContentView.get(next);
-            if (view && nextView ? view.breakAfter :
-                (view ? view.breakAfter : isBlockElement(cur)) ||
-                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
-                this.lineBreak();
-            cur = next;
-        }
-        this.findPointBefore(parent, end);
-        return this;
-    }
-    readTextNode(node) {
-        let text = node.nodeValue;
-        for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, text.length);
-        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
-            let nextBreak = -1, breakSize = 1, m;
-            if (this.lineSeparator) {
-                nextBreak = text.indexOf(this.lineSeparator, off);
-                breakSize = this.lineSeparator.length;
-            }
-            else if (m = re.exec(text)) {
-                nextBreak = m.index;
-                breakSize = m[0].length;
-            }
-            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
-            if (nextBreak < 0)
-                break;
-            this.lineBreak();
-            if (breakSize > 1)
-                for (let point of this.points)
-                    if (point.node == node && point.pos > this.text.length)
-                        point.pos -= breakSize - 1;
-            off = nextBreak + breakSize;
-        }
-    }
-    readNode(node) {
-        if (node.cmIgnore)
-            return;
-        let view = ContentView.get(node);
-        let fromView = view && view.overrideDOMText;
-        if (fromView != null) {
-            this.findPointInside(node, fromView.length);
-            for (let i = fromView.iter(); !i.next().done;) {
-                if (i.lineBreak)
-                    this.lineBreak();
-                else
-                    this.append(i.value);
-            }
-        }
-        else if (node.nodeType == 3) {
-            this.readTextNode(node);
-        }
-        else if (node.nodeName == "BR") {
-            if (node.nextSibling)
-                this.lineBreak();
-        }
-        else if (node.nodeType == 1) {
-            this.readRange(node.firstChild, null);
-        }
-    }
-    findPointBefore(node, next) {
-        for (let point of this.points)
-            if (point.node == node && node.childNodes[point.offset] == next)
-                point.pos = this.text.length;
-    }
-    findPointInside(node, maxLen) {
-        for (let point of this.points)
-            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
-                point.pos = this.text.length + Math.min(maxLen, point.offset);
-    }
-}
-function isBlockElement(node) {
-    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
-}
-class DOMPoint {
-    constructor(node, offset) {
-        this.node = node;
-        this.offset = offset;
-        this.pos = -1;
-    }
-}
-
 let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
 let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
 const ie_edge = /*@__PURE__*//Edge\/(\d+)/.exec(nav.userAgent);
@@ -2699,6 +2597,7 @@ class DocView extends ContentView {
         this.view = view;
         this.decorations = [];
         this.dynamicDecorationMap = [];
+        this.domChanged = null;
         this.hasComposition = null;
         this.markedForComposition = new Set;
         // Track a minimum width for the editor. When measuring sizes in
@@ -2727,6 +2626,7 @@ class DocView extends ContentView {
     }
     // Update the document view to a given state.
     update(update) {
+        var _a;
         let changedRanges = update.changedRanges;
         if (this.minWidth > 0 && changedRanges.length) {
             if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
@@ -2737,7 +2637,15 @@ class DocView extends ContentView {
                 this.minWidthTo = update.changes.mapPos(this.minWidthTo, 1);
             }
         }
-        let composition = this.view.inputState.composing < 0 ? null : findCompositionRange(this.view, update.changes);
+        let readCompositionAt = -1;
+        if (this.view.inputState.composing >= 0) {
+            if ((_a = this.domChanged) === null || _a === void 0 ? void 0 : _a.newSel)
+                readCompositionAt = this.domChanged.newSel.head;
+            else if (!touchesComposition(update.changes, this.hasComposition) && !update.selectionSet)
+                readCompositionAt = update.state.selection.main.head;
+        }
+        let composition = readCompositionAt > -1 ? findCompositionRange(this.view, update.changes, readCompositionAt) : null;
+        this.domChanged = null;
         if (this.hasComposition) {
             this.markedForComposition.clear();
             let { from, to } = this.hasComposition;
@@ -2777,7 +2685,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,14 +2757,12 @@ 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) {
-                if (prev)
-                    prev.dom = null;
-                cView.setDOM(dom);
-            }
+            if (prev && prev != cView)
+                prev.dom = null;
+            cView.setDOM(dom);
         };
         let pos = this.childPos(composition.range.fromB, 1);
         let cView = this.children[pos.i];
@@ -2879,9 +2785,8 @@ class DocView extends ContentView {
         let force = this.forceSelection;
         this.forceSelection = false;
         let main = this.view.state.selection.main;
-        // FIXME need to handle the case where the selection falls inside a block range
-        let anchor = this.domAtPos(main.anchor);
-        let head = main.empty ? anchor : this.domAtPos(main.head);
+        let anchor = this.moveToLine(this.domAtPos(main.anchor));
+        let head = main.empty ? anchor : this.moveToLine(this.domAtPos(main.head));
         // Always reset on Firefox when next to an uneditable node to
         // avoid invisible cursor bugs (#111)
         if (browser.gecko && main.empty && !this.hasComposition && betweenUneditable(anchor)) {
@@ -2914,12 +2819,12 @@ class DocView extends ContentView {
                         if (nextTo && nextTo != (1 /* NextTo.Before */ | 2 /* NextTo.After */)) {
                             let text = nearbyTextNode(anchor.node, anchor.offset, nextTo == 1 /* NextTo.Before */ ? 1 : -1);
                             if (text)
-                                anchor = new DOMPos(text, nextTo == 1 /* NextTo.Before */ ? 0 : text.nodeValue.length);
+                                anchor = new DOMPos(text.node, text.offset);
                         }
                     }
                     rawSel.collapse(anchor.node, anchor.offset);
-                    if (main.bidiLevel != null && domSel.caretBidiLevel != null)
-                        domSel.caretBidiLevel = main.bidiLevel;
+                    if (main.bidiLevel != null && rawSel.caretBidiLevel !== undefined)
+                        rawSel.caretBidiLevel = main.bidiLevel;
                 }
                 else if (rawSel.extend) {
                     // Selection.extend can be used to create an 'inverted' selection
@@ -2982,6 +2887,26 @@ class DocView extends ContentView {
         if (view.docView.posFromDOM(newRange.anchorNode, newRange.anchorOffset) != cursor.from)
             sel.collapse(anchorNode, anchorOffset);
     }
+    // If a position is in/near a block widget, move it to a nearby text
+    // line, since we don't want the cursor inside a block widget.
+    moveToLine(pos) {
+        // Block widgets will return positions before/after them, which
+        // are thus directly in the document DOM element.
+        let dom = this.dom, newPos;
+        if (pos.node != dom)
+            return pos;
+        for (let i = pos.offset; !newPos && i < dom.childNodes.length; i++) {
+            let view = ContentView.get(dom.childNodes[i]);
+            if (view instanceof LineView)
+                newPos = view.domAtPos(0);
+        }
+        for (let i = pos.offset - 1; !newPos && i >= 0; i--) {
+            let view = ContentView.get(dom.childNodes[i]);
+            if (view instanceof LineView)
+                newPos = view.domAtPos(view.length);
+        }
+        return newPos ? new DOMPos(newPos.node, newPos.offset, true) : pos;
+    }
     nearest(dom) {
         for (let cur = dom; cur;) {
             let domView = ContentView.get(cur);
@@ -3115,7 +3040,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,74 +3105,27 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function findCompositionNode(view, dLen) {
+function findCompositionNode(view, headPos) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
         return null;
-    let cView = ContentView.get(textNode);
-    let from, to;
-    if (cView instanceof TextView) {
-        from = cView.posAtStart;
-        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)) {
-                    to = cView.posAtEnd + offset;
-                    from = Math.max(0, to - oldLen);
-                    break up;
-                }
-                let reader = new DOMReader([], view.state);
-                reader.readNode(sibling);
-                if (reader.text.indexOf(LineBreakPlaceholder) > -1)
-                    return null;
-                offset += reader.text.length;
-            }
-            node = node.parentNode;
-            if (!node)
-                return null;
-            let parentView = ContentView.get(node);
-            if (parentView) {
-                from = parentView.posAtStart + offset;
-                to = from + oldLen;
-                break;
-            }
-        }
-    }
-    return { from, to: to, node: textNode };
+    let from = headPos - textNode.offset;
+    return { from, to: from + textNode.node.nodeValue.length, node: textNode.node };
 }
-function findCompositionRange(view, changes) {
-    let found = findCompositionNode(view, changes.newLength - changes.length);
+function findCompositionRange(view, changes, headPos) {
+    let found = findCompositionNode(view, headPos);
     if (!found)
         return null;
-    let { from: fromA, to: toA, node: textNode } = found;
-    let fromB = changes.mapPos(fromA, -1), toB = changes.mapPos(toA, 1);
-    let text = textNode.nodeValue;
+    let { node: textNode, from, to } = found, text = textNode.nodeValue;
     // Don't try to preserve multi-line compositions
     if (/[\n\r]/.test(text))
         return null;
-    if (toB - fromB != text.length) {
-        // If there is a length mismatch, see if mapping non-inclusively helps
-        let fromB2 = changes.mapPos(fromA, 1), toB2 = changes.mapPos(toA, -1);
-        if (toB2 - fromB2 == text.length)
-            fromB = fromB2, toB = toB2;
-        // See if we can find an instance of the text at either side
-        else if (view.state.doc.sliceString(toB - text.length, toB) == text)
-            fromB = toB - text.length;
-        else if (view.state.doc.sliceString(fromB, fromB + text.length) == text)
-            toB = fromB + text.length;
-        // Not found
-        else
-            return null;
-    }
-    let { main } = view.state.selection;
-    if (view.state.doc.sliceString(fromB, toB) != text || fromB > main.head || toB < main.head)
+    if (view.state.doc.sliceString(found.from, found.to) != text)
         return null;
+    let inv = changes.invertedDesc;
+    let range = new ChangedRange(inv.mapPos(from), inv.mapPos(to), from, to);
     let marks = [];
-    let range = new ChangedRange(fromA, toA, fromB, toB);
     for (let parent = textNode.parentNode;; parent = parent.parentNode) {
         let parentView = ContentView.get(parent);
         if (parentView instanceof MarkView)
@@ -3268,7 +3146,7 @@ function nearbyTextNode(startNode, startOffset, side) {
     if (side <= 0)
         for (let node = startNode, offset = startOffset;;) {
             if (node.nodeType == 3)
-                return node;
+                return { node: node, offset: offset };
             if (node.nodeType == 1 && offset > 0) {
                 node = node.childNodes[offset - 1];
                 offset = maxOffset(node);
@@ -3280,7 +3158,7 @@ function nearbyTextNode(startNode, startOffset, side) {
     if (side >= 0)
         for (let node = startNode, offset = startOffset;;) {
             if (node.nodeType == 3)
-                return node;
+                return { node: node, offset: offset };
             if (node.nodeType == 1 && offset < node.childNodes.length && side >= 0) {
                 node = node.childNodes[offset];
                 offset = 0;
@@ -3317,6 +3195,15 @@ function inUneditable(node, inside) {
     }
     return false;
 }
+function touchesComposition(changes, composition) {
+    let touched = false;
+    if (composition)
+        changes.iterChangedRanges((from, to) => {
+            if (from < composition.to && to > composition.from)
+                touched = true;
+        });
+    return touched;
+}
 
 function groupAt(state, pos, bias = 1) {
     let categorize = state.charCategorizer(pos);
@@ -5271,8 +5158,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 +5191,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 +5236,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 +5308,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 +5336,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 +5560,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() {
@@ -6052,6 +5961,113 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     }
 }, lightDarkIDs);
 
+const LineBreakPlaceholder = "\uffff";
+class DOMReader {
+    constructor(points, state) {
+        this.points = points;
+        this.text = "";
+        this.lineSeparator = state.facet(EditorState.lineSeparator);
+    }
+    append(text) {
+        this.text += text;
+    }
+    lineBreak() {
+        this.text += LineBreakPlaceholder;
+    }
+    readRange(start, end) {
+        if (!start)
+            return this;
+        let parent = start.parentNode;
+        for (let cur = start;;) {
+            this.findPointBefore(parent, cur);
+            let oldLen = this.text.length;
+            this.readNode(cur);
+            let next = cur.nextSibling;
+            if (next == end)
+                break;
+            let view = ContentView.get(cur), nextView = ContentView.get(next);
+            if (view && nextView ? view.breakAfter :
+                (view ? view.breakAfter : isBlockElement(cur)) ||
+                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
+                this.lineBreak();
+            cur = next;
+        }
+        this.findPointBefore(parent, end);
+        return this;
+    }
+    readTextNode(node) {
+        let text = node.nodeValue;
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, text.length);
+        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
+            let nextBreak = -1, breakSize = 1, m;
+            if (this.lineSeparator) {
+                nextBreak = text.indexOf(this.lineSeparator, off);
+                breakSize = this.lineSeparator.length;
+            }
+            else if (m = re.exec(text)) {
+                nextBreak = m.index;
+                breakSize = m[0].length;
+            }
+            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
+            if (nextBreak < 0)
+                break;
+            this.lineBreak();
+            if (breakSize > 1)
+                for (let point of this.points)
+                    if (point.node == node && point.pos > this.text.length)
+                        point.pos -= breakSize - 1;
+            off = nextBreak + breakSize;
+        }
+    }
+    readNode(node) {
+        if (node.cmIgnore)
+            return;
+        let view = ContentView.get(node);
+        let fromView = view && view.overrideDOMText;
+        if (fromView != null) {
+            this.findPointInside(node, fromView.length);
+            for (let i = fromView.iter(); !i.next().done;) {
+                if (i.lineBreak)
+                    this.lineBreak();
+                else
+                    this.append(i.value);
+            }
+        }
+        else if (node.nodeType == 3) {
+            this.readTextNode(node);
+        }
+        else if (node.nodeName == "BR") {
+            if (node.nextSibling)
+                this.lineBreak();
+        }
+        else if (node.nodeType == 1) {
+            this.readRange(node.firstChild, null);
+        }
+    }
+    findPointBefore(node, next) {
+        for (let point of this.points)
+            if (point.node == node && node.childNodes[point.offset] == next)
+                point.pos = this.text.length;
+    }
+    findPointInside(node, maxLen) {
+        for (let point of this.points)
+            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
+                point.pos = this.text.length + Math.min(maxLen, point.offset);
+    }
+}
+function isBlockElement(node) {
+    return node.nodeType == 1 && /^(DIV|P|LI|UL|OL|BLOCKQUOTE|DD|DT|H\d|SECTION|PRE)$/.test(node.nodeName);
+}
+class DOMPoint {
+    constructor(node, offset) {
+        this.node = node;
+        this.offset = offset;
+        this.pos = -1;
+    }
+}
+
 class DOMChange {
     constructor(view, start, end, typeOver) {
         this.typeOver = typeOver;
@@ -6202,8 +6218,14 @@ 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, change.insert.length - (change.to - change.from)) ||
-                view.state.doc.lineAt(sel.head);
+            let compositionRange, composition = newSel && findCompositionNode(view, newSel.main.head);
+            if (composition) {
+                let dLen = change.insert.length - (change.to - change.from);
+                compositionRange = { from: composition.from, to: composition.to - dLen };
+            }
+            else {
+                compositionRange = 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)
@@ -6214,7 +6236,7 @@ function applyDefaultInsert(view, change, newSel) {
                     // changes in the same node work without aborting
                     // composition, so cursors in the composition range are
                     // ignored.
-                    composition && range.to >= composition.from && range.from <= composition.to)
+                    range.to >= compositionRange.from && range.from <= compositionRange.to)
                     return { range };
                 let rangeChanges = startState.changes({ from, to, insert: change.insert }), selOff = range.to - sel.to;
                 return {
@@ -6633,7 +6655,9 @@ class DOMObserver {
             this.lastChange = Date.now();
         this.view.inputState.lastFocusTime = 0;
         this.selectionChanged = false;
-        return new DOMChange(this.view, from, to, typeOver);
+        let change = new DOMChange(this.view, from, to, typeOver);
+        this.view.docView.domChanged = { newSel: change.newSel ? change.newSel.main : null };
+        return change;
     }
     // Apply pending changes, if any
     flush(readSelection = true) {
@@ -7062,9 +7086,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 +7165,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 +7293,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 +8093,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 +8196,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 +8205,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 +8215,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 +8229,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 +8406,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 +8666,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 +8745,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 +9043,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 +9095,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 +9143,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 +9173,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 +9217,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 +9229,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 +9841,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);
@@ -9818,6 +9902,10 @@ const gutterView = /*@__PURE__*/ViewPlugin.fromClass(class {
                 for (let cx of contexts)
                     cx.line(this.view, line, classSet);
             }
+            else if (line.widget) {
+                for (let cx of contexts)
+                    cx.widget(this.view, line);
+            }
         }
         for (let cx of contexts)
             cx.finish();
@@ -9867,7 +9955,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 +10074,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);
     }