@codemirror/view 0.18.15 → 0.18.19

package/CHANGELOG.md

@@ -1,3 +1,47 @@
+## 0.18.19 (2021-07-12)
+
+### Bug fixes
+
+Fix a regression where `EditorView.editable.of(false)` didn't disable editing on Webkit-based browsers.
+
+## 0.18.18 (2021-07-06)
+
+### Bug fixes
+
+Fix a bug that caused `EditorView.moveVertically` to only move by one line, even when given a custom distance, in some cases.
+
+Hide Safari's native bold/italic/underline controls for the content.
+
+Fix a CSS problem that prevented Safari from breaking words longer than the line in line-wrapping mode.
+
+Avoid a problem where composition would be inappropriately abored on Safari.
+
+Fix drag-selection that scrolls the content by dragging past the visible viewport.
+
+### New features
+
+`posAtCoords` now has an imprecise mode where it'll return an approximate position even for parts of the document that aren't currently rendered.
+
+## 0.18.17 (2021-06-14)
+
+### Bug fixes
+
+Make `drawSelection` behave properly when lines are split by block widgets.
+
+Make sure drawn selections that span a single line break don't leave a gap between the lines.
+
+## 0.18.16 (2021-06-03)
+
+### Bug fixes
+
+Fix a crash that could occur when the document changed during mouse selection.
+
+Fix a bug where composition inside styled content would sometimes be inappropriately aborted by editor DOM updates.
+
+### New features
+
+`MouseSelectionStyle.update` may now return true to indicate it should be queried for a new selection after the update.
+
 ## 0.18.15 (2021-06-01)
 
 ### Bug fixes

package/dist/index.cjs

@@ -216,6 +216,19 @@ function dispatchKey(elt, name, code) {
     elt.dispatchEvent(up);
     return down.defaultPrevented || up.defaultPrevented;
 }
+let _plainTextSupported = null;
+function contentEditablePlainTextSupported() {
+    if (_plainTextSupported == null) {
+        _plainTextSupported = false;
+        let dummy = document.createElement("div");
+        try {
+            dummy.contentEditable = "plaintext-only";
+            _plainTextSupported = dummy.contentEditable == "plaintext-only";
+        }
+        catch (_) { }
+    }
+    return _plainTextSupported;
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -1957,6 +1970,8 @@ class DocView extends ContentView {
         // 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);
+        // Always reset on Firefox when next to an uneditable node to
+        // avoid invisible cursor bugs (#111)
         if (browser.gecko && main.empty && betweenUneditable(anchor)) {
             let dummy = document.createTextNode("");
             this.view.observer.ignore(() => anchor.node.insertBefore(dummy, anchor.node.childNodes[anchor.offset] || null));
@@ -1966,9 +1981,6 @@ class DocView extends ContentView {
         let domSel = this.view.observer.selectionRange;
         // If the selection is already here, or in an equivalent position, don't touch it
         if (force || !domSel.focusNode ||
-            // Always reset on Firefox when next to an uneditable node to
-            // avoid invisible cursor bugs (#111)
-            (browser.gecko && main.empty && nextToUneditable(domSel.focusNode, domSel.focusOffset)) ||
             !isEquivalentPosition(anchor.node, anchor.offset, domSel.anchorNode, domSel.anchorOffset) ||
             !isEquivalentPosition(head.node, head.offset, domSel.focusNode, domSel.focusOffset)) {
             this.view.observer.ignore(() => {
@@ -2011,6 +2023,8 @@ class DocView extends ContentView {
         this.impreciseHead = head.precise ? null : new DOMPos(domSel.focusNode, domSel.focusOffset);
     }
     enforceCursorAssoc() {
+        if (this.view.composing)
+            return;
         let cursor = this.view.state.selection.main;
         let sel = getSelection(this.root);
         if (!cursor.empty || !cursor.assoc || !sel.modify)
@@ -2061,7 +2075,10 @@ class DocView extends ContentView {
     coordsAt(pos, side) {
         for (let off = this.length, i = this.children.length - 1;; i--) {
             let child = this.children[i], start = off - child.breakAfter - child.length;
-            if (pos > start || pos == start && (child.type == exports.BlockType.Text || !i || this.children[i - 1].breakAfter))
+            if (pos > start ||
+                (pos == start && child.type != exports.BlockType.WidgetBefore && child.type != exports.BlockType.WidgetAfter &&
+                    (!i || side == 2 || this.children[i - 1].breakAfter ||
+                        (this.children[i - 1].type == exports.BlockType.WidgetBefore && side > -2))))
                 return child.coordsAt(pos - start, side);
             off = start;
         }
@@ -2133,11 +2150,11 @@ class DocView extends ContentView {
     }
     updateDeco() {
         return this.decorations = [
-            this.computeBlockGapDeco(),
-            this.view.viewState.lineGapDeco,
-            this.compositionDeco,
+            ...this.view.pluginField(PluginField.decorations),
             ...this.view.state.facet(decorations),
-            ...this.view.pluginField(PluginField.decorations)
+            this.compositionDeco,
+            this.computeBlockGapDeco(),
+            this.view.viewState.lineGapDeco
         ];
     }
     scrollPosIntoView(pos, side) {
@@ -2719,7 +2736,7 @@ function domPosInText(node, x, y) {
     }
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
-function posAtCoords(view, { x, y }, bias = -1) {
+function posAtCoords(view, { x, y }, precise, bias = -1) {
     let content = view.contentDOM.getBoundingClientRect(), block;
     let halfLine = view.defaultLineHeight / 2;
     for (let bounced = false;;) {
@@ -2728,7 +2745,7 @@ function posAtCoords(view, { x, y }, bias = -1) {
             bias = block.top > y ? -1 : 1;
             y = Math.min(block.bottom - halfLine, Math.max(block.top + halfLine, y));
             if (bounced)
-                return null;
+                return precise ? null : 0;
             else
                 bounced = true;
         }
@@ -2737,13 +2754,13 @@ function posAtCoords(view, { x, y }, bias = -1) {
         y = bias > 0 ? block.bottom + halfLine : block.top - halfLine;
     }
     let lineStart = block.from;
+    x = Math.max(content.left + 1, Math.min(content.right - 1, x));
     // If this is outside of the rendered viewport, we can't determine a position
     if (lineStart < view.viewport.from)
-        return view.viewport.from == 0 ? 0 : null;
+        return view.viewport.from == 0 ? 0 : posAtCoordsImprecise(view, content, block, x, y);
     if (lineStart > view.viewport.to)
-        return view.viewport.to == view.state.doc.length ? view.state.doc.length : null;
+        return view.viewport.to == view.state.doc.length ? view.state.doc.length : posAtCoordsImprecise(view, content, block, x, y);
     // Clip x to the viewport sides
-    x = Math.max(content.left + 1, Math.min(content.right - 1, x));
     let root = view.root, element = root.elementFromPoint(x, y);
     // There's visible editor content under the point, so we can try
     // using caret(Position|Range)FromPoint as a shortcut
@@ -2770,6 +2787,15 @@ function posAtCoords(view, { x, y }, bias = -1) {
     }
     return view.docView.posFromDOM(node, offset);
 }
+function posAtCoordsImprecise(view, contentRect, block, x, y) {
+    let into = Math.round((x - contentRect.left) * view.defaultCharacterWidth);
+    if (view.lineWrapping && block.height > view.defaultLineHeight * 1.5) {
+        let line = Math.floor((y - block.top) / view.defaultLineHeight);
+        into += line * view.viewState.heightOracle.lineLength;
+    }
+    let content = view.state.sliceDoc(block.from, block.to);
+    return block.from + text.findColumn(content, into, view.state.tabSize);
+}
 // In case of a high line height, Safari's caretRangeFromPoint treats
 // the space between lines as belonging to the last character of the
 // line before. This is used to detect such a result so that it can be
@@ -2832,48 +2858,31 @@ function byGroup(view, pos, start) {
     };
 }
 function moveVertically(view, start, forward, distance) {
-    var _a;
     let startPos = start.head, dir = forward ? 1 : -1;
     if (startPos == (forward ? view.state.doc.length : 0))
         return state.EditorSelection.cursor(startPos);
+    let goal = start.goalColumn, startY;
+    let rect = view.contentDOM.getBoundingClientRect();
     let startCoords = view.coordsAtPos(startPos);
     if (startCoords) {
-        let rect = view.dom.getBoundingClientRect();
-        let goal = (_a = start.goalColumn) !== null && _a !== void 0 ? _a : startCoords.left - rect.left;
-        let resolvedGoal = rect.left + goal;
-        let dist = distance !== null && distance !== void 0 ? distance : (view.defaultLineHeight >> 1);
-        for (let startY = dir < 0 ? startCoords.top : startCoords.bottom, extra = 0; extra < 50; extra += 10) {
-            let pos = posAtCoords(view, { x: resolvedGoal, y: startY + (dist + extra) * dir }, dir);
-            if (pos == null)
-                break;
-            if (pos != startPos)
-                return state.EditorSelection.cursor(pos, undefined, undefined, goal);
-        }
-    }
-    // Outside of the drawn viewport, use a crude column-based approach
-    let { doc } = view.state, line = doc.lineAt(startPos), tabSize = view.state.tabSize;
-    let goal = start.goalColumn, goalCol = 0;
-    if (goal == null) {
-        for (const iter = doc.iterRange(line.from, startPos); !iter.next().done;)
-            goalCol = text.countColumn(iter.value, goalCol, tabSize);
-        goal = goalCol * view.defaultCharacterWidth;
+        if (goal == null)
+            goal = startCoords.left - rect.left;
+        startY = dir < 0 ? startCoords.top : startCoords.bottom;
     }
     else {
-        goalCol = Math.round(goal / view.defaultCharacterWidth);
-    }
-    if (dir < 0 && line.from == 0)
-        return state.EditorSelection.cursor(0);
-    else if (dir > 0 && line.to == doc.length)
-        return state.EditorSelection.cursor(line.to);
-    let otherLine = doc.line(line.number + dir);
-    let result = otherLine.from;
-    let seen = 0;
-    for (const iter = doc.iterRange(otherLine.from, otherLine.to); seen >= goalCol && !iter.next().done;) {
-        const { offset, leftOver } = text.findColumn(iter.value, seen, goalCol, tabSize);
-        seen = goalCol - leftOver;
-        result += offset;
-    }
-    return state.EditorSelection.cursor(result, undefined, undefined, goal);
+        let line = view.viewState.lineAt(startPos, view.dom.getBoundingClientRect().top);
+        if (goal == null)
+            goal = Math.min(rect.right - rect.left, view.defaultCharacterWidth * (startPos - line.from));
+        startY = dir < 0 ? line.top : line.bottom;
+    }
+    let resolvedGoal = rect.left + goal;
+    let dist = distance !== null && distance !== void 0 ? distance : (view.defaultLineHeight >> 1);
+    for (let extra = 0;; extra += 10) {
+        let curY = startY + (dist + extra) * dir;
+        let pos = posAtCoords(view, { x: resolvedGoal, y: curY }, false, dir);
+        if (curY < rect.top || curY > rect.bottom || (dir < 0 ? pos < startPos : pos > startPos))
+            return state.EditorSelection.cursor(pos, undefined, undefined, goal);
+    }
 }
 function skipAtoms(view, oldPos, pos) {
     let atoms = view.pluginField(PluginField.atomicRanges);
@@ -3053,7 +3062,8 @@ class InputState {
     update(update) {
         if (this.mouseSelection)
             this.mouseSelection.update(update);
-        this.lastKeyCode = this.lastSelectionTime = 0;
+        if (update.transactions.length)
+            this.lastKeyCode = this.lastSelectionTime = 0;
     }
     destroy() {
         if (this.mouseSelection)
@@ -3066,8 +3076,8 @@ class MouseSelection {
     constructor(inputState, view, startEvent, style) {
         this.inputState = inputState;
         this.view = view;
-        this.startEvent = startEvent;
         this.style = style;
+        this.lastEvent = startEvent;
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
         doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -3087,11 +3097,11 @@ class MouseSelection {
             return this.destroy();
         if (this.dragging !== false)
             return;
-        this.select(event);
+        this.select(this.lastEvent = event);
     }
     up(event) {
         if (this.dragging == null)
-            this.select(this.startEvent);
+            this.select(this.lastEvent);
         if (!this.dragging)
             event.preventDefault();
         this.destroy();
@@ -3114,7 +3124,8 @@ class MouseSelection {
     update(update) {
         if (update.docChanged && this.dragging)
             this.dragging = this.dragging.map(update.changes);
-        this.style.update(update);
+        if (this.style.update(update))
+            setTimeout(() => this.select(this.lastEvent), 20);
     }
 }
 function addsSelectionRange(view, event) {
@@ -3274,9 +3285,7 @@ function findPositionSide(view, pos, x, y) {
     return before && insideY(y, before) ? -1 : 1;
 }
 function queryPos(view, event) {
-    let pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
-    if (pos == null)
-        return null;
+    let pos = view.posAtCoords({ x: event.clientX, y: event.clientY }, false);
     return { pos, bias: findPositionSide(view, pos, event.clientX, event.clientY) };
 }
 const BadMouseDetail = browser.ie && browser.ie_version <= 11;
@@ -3300,11 +3309,12 @@ function basicMouseSelection(view, event) {
                 if (start)
                     start.pos = update.changes.mapPos(start.pos);
                 startSel = startSel.map(update.changes);
+                lastEvent = null;
             }
         },
         get(event, extend, multiple) {
             let cur;
-            if (event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
+            if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
                 cur = last;
             else {
                 cur = last = queryPos(view, event);
@@ -4676,6 +4686,7 @@ const baseTheme = buildTheme("." + baseThemeID, {
     },
     ".cm-lineWrapping": {
         whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
         overflowWrap: "anywhere"
     },
     "&light .cm-content": { caretColor: "black" },
@@ -5008,7 +5019,8 @@ class DOMObserver {
                 this.ignore(() => this.view.docView.sync());
                 this.view.docView.dirty = 0 /* Not */;
             }
-            this.view.docView.updateSelection();
+            if (newSel)
+                this.view.docView.updateSelection();
         }
         this.clearSelection();
     }
@@ -5436,8 +5448,10 @@ class EditorView {
             scrollTo = transactions.some(tr => tr.scrollIntoView) ? state$1.selection.main : null;
             this.viewState.update(update, scrollTo);
             this.bidiCache = CachedOrder.update(this.bidiCache, update.changes);
-            if (!update.empty)
+            if (!update.empty) {
                 this.updatePlugins(update);
+                this.inputState.update(update);
+            }
             redrawn = this.docView.update(update);
             if (this.state.facet(styleModule) != this.styleModules)
                 this.mountStyles();
@@ -5511,10 +5525,12 @@ class EditorView {
     /**
     @internal
     */
-    measure() {
+    measure(flush = true) {
         if (this.measureScheduled > -1)
             cancelAnimationFrame(this.measureScheduled);
         this.measureScheduled = -1; // Prevent requestMeasure calls from scheduling another animation frame
+        if (flush)
+            this.observer.flush();
         let updated = null;
         try {
             for (let i = 0;; i++) {
@@ -5544,8 +5560,10 @@ class EditorView {
                 else
                     updated.flags |= changed;
                 this.updateState = 2 /* Updating */;
-                if (!update.empty)
+                if (!update.empty) {
                     this.updatePlugins(update);
+                    this.inputState.update(update);
+                }
                 this.updateAttrs();
                 if (changed)
                     this.docView.update(update);
@@ -5593,7 +5611,7 @@ class EditorView {
             spellcheck: "false",
             autocorrect: "off",
             autocapitalize: "off",
-            contenteditable: String(this.state.facet(editable)),
+            contenteditable: !this.state.facet(editable) ? "false" : contentEditablePlainTextSupported() ? "plaintext-only" : "true",
             class: "cm-content",
             style: `${browser.tabSize}: ${this.state.tabSize}`,
             role: "textbox",
@@ -5622,7 +5640,7 @@ class EditorView {
         if (this.updateState == 2 /* Updating */)
             throw new Error("Reading the editor layout isn't allowed during an update");
         if (this.updateState == 0 /* Idle */ && this.measureScheduled > -1)
-            this.measure();
+            this.measure(false);
     }
     /**
     Schedule a layout measurement, optionally providing callbacks to
@@ -5709,11 +5727,9 @@ class EditorView {
         this.viewState.forEachLine(from, to, f, ensureTop(docTop, this.contentDOM));
     }
     /**
-    Find the extent and height of the visual line (the content shown
-    in the editor as a line, which may be smaller than a document
-    line when broken up by block widgets, or bigger than a document
-    line when line breaks are covered by replaced decorations) at
-    the given position.
+    Find the extent and height of the visual line (a range delimited
+    on both sides by either non-[hidden](https://codemirror.net/6/docs/ref/#view.Decoration^range)
+    line breaks, or the start/end of the document) at the given position.
     
     Vertical positions are computed relative to the `docTop`
     argument, which defaults to 0 for this method. You can pass
@@ -5805,13 +5821,9 @@ class EditorView {
     posAtDOM(node, offset = 0) {
         return this.docView.posFromDOM(node, offset);
     }
-    /**
-    Get the document position at the given screen coordinates.
-    Returns null if no valid position could be found.
-    */
-    posAtCoords(coords) {
+    posAtCoords(coords, precise = true) {
         this.readMeasured();
-        return posAtCoords(this, coords);
+        return posAtCoords(this, coords, precise);
     }
     /**
     Get the screen coordinates at the given document position.
@@ -6401,7 +6413,17 @@ function getBase(view) {
 function wrappedLine(view, pos, inside) {
     let range = state.EditorSelection.cursor(pos);
     return { from: Math.max(inside.from, view.moveToLineBoundary(range, false, true).from),
-        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from) };
+        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from),
+        type: exports.BlockType.Text };
+}
+function blockAt(view, pos) {
+    let line = view.visualLineAt(pos);
+    if (Array.isArray(line.type))
+        for (let l of line.type) {
+            if (l.to > pos || l.to == pos && (l.to == line.to || l.type == exports.BlockType.Text))
+                return l;
+        }
+    return line;
 }
 function measureRange(view, range) {
     if (range.to <= view.viewport.from || range.from >= view.viewport.to)
@@ -6412,22 +6434,25 @@ function measureRange(view, range) {
     let lineStyle = window.getComputedStyle(content.firstChild);
     let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft);
     let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
-    let visualStart = view.visualLineAt(from);
-    let visualEnd = view.visualLineAt(to);
+    let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
+    let visualStart = startBlock.type == exports.BlockType.Text ? startBlock : null;
+    let visualEnd = endBlock.type == exports.BlockType.Text ? endBlock : null;
     if (view.lineWrapping) {
-        visualStart = wrappedLine(view, from, visualStart);
-        visualEnd = wrappedLine(view, to, visualEnd);
+        if (visualStart)
+            visualStart = wrappedLine(view, from, visualStart);
+        if (visualEnd)
+            visualEnd = wrappedLine(view, to, visualEnd);
     }
-    if (visualStart.from == visualEnd.from) {
+    if (visualStart && visualEnd && visualStart.from == visualEnd.from) {
         return pieces(drawForLine(range.from, range.to, visualStart));
     }
     else {
-        let top = drawForLine(range.from, null, visualStart);
-        let bottom = drawForLine(null, range.to, visualEnd);
+        let top = visualStart ? drawForLine(range.from, null, visualStart) : drawForWidget(startBlock, false);
+        let bottom = visualEnd ? drawForLine(null, range.to, visualEnd) : drawForWidget(endBlock, true);
         let between = [];
-        if (visualStart.to < visualEnd.from - 1)
+        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
             between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
-        else if (top.bottom < bottom.top && bottom.top - top.bottom < 4)
+        else if (top.bottom < bottom.top && blockAt(view, (top.bottom + bottom.top) / 2).type == exports.BlockType.Text)
             top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
         return pieces(top).concat(between).concat(pieces(bottom));
     }
@@ -6444,8 +6469,12 @@ function measureRange(view, range) {
     function drawForLine(from, to, line) {
         let top = 1e9, bottom = -1e9, horizontal = [];
         function addSpan(from, fromOpen, to, toOpen, dir) {
-            let fromCoords = view.coordsAtPos(from, from == line.to ? -1 : 1);
-            let toCoords = view.coordsAtPos(to, to == line.from ? 1 : -1);
+            // Passing 2/-2 is a kludge to force the view to return
+            // coordinates on the proper side of block widgets, since
+            // normalizing the side there, though appropriate for most
+            // coordsAtPos queries, would break selection drawing.
+            let fromCoords = view.coordsAtPos(from, (from == line.to ? -2 : 2));
+            let toCoords = view.coordsAtPos(to, (to == line.from ? 2 : -2));
             top = Math.min(fromCoords.top, toCoords.top, top);
             bottom = Math.max(fromCoords.bottom, toCoords.bottom, bottom);
             if (dir == exports.Direction.LTR)
@@ -6475,6 +6504,10 @@ function measureRange(view, range) {
             addSpan(start, from == null, end, to == null, view.textDirection);
         return { top, bottom, horizontal };
     }
+    function drawForWidget(block, top) {
+        let y = contentRect.top + (top ? block.top : block.bottom);
+        return { top: y, bottom: y, horizontal: [] };
+    }
 }
 function measureCursor(view, cursor, primary) {
     let pos = view.coordsAtPos(cursor.head, cursor.assoc || 1);

package/dist/index.d.ts

@@ -501,8 +501,14 @@ interface MouseSelectionStyle {
     progress. When the document changes, it may be necessary to map
     some data (like the original selection or start position)
     through the changes.
+    
+    This may return `true` to indicate that the `get` method should
+    get queried again after the update, because something in the
+    update could change its result. Be wary of infinite loops when
+    using this (where `get` returns a new selection, which will
+    trigger `update`, which schedules another `get` in response).
     */
-    update: (update: ViewUpdate) => void;
+    update: (update: ViewUpdate) => boolean | void;
 }
 declare type MakeSelectionStyle = (view: EditorView, event: MouseEvent) => MouseSelectionStyle | null;
 
@@ -782,11 +788,9 @@ declare class EditorView {
     */
     viewportLines(f: (line: BlockInfo) => void, docTop?: number): void;
     /**
-    Find the extent and height of the visual line (the content shown
-    in the editor as a line, which may be smaller than a document
-    line when broken up by block widgets, or bigger than a document
-    line when line breaks are covered by replaced decorations) at
-    the given position.
+    Find the extent and height of the visual line (a range delimited
+    on both sides by either non-[hidden](https://codemirror.net/6/docs/ref/#view.Decoration^range)
+    line breaks, or the start/end of the document) at the given position.
     
     Vertical positions are computed relative to the `docTop`
     argument, which defaults to 0 for this method. You can pass
@@ -866,6 +870,10 @@ declare class EditorView {
     Get the document position at the given screen coordinates.
     Returns null if no valid position could be found.
     */
+    posAtCoords(coords: {
+        x: number;
+        y: number;
+    }, precise: false): number;
     posAtCoords(coords: {
         x: number;
         y: number;

package/dist/index.js

@@ -2,7 +2,7 @@ import { MapMode, Text as Text$1, Facet, ChangeSet, Transaction, EditorSelection
 import { StyleModule } from 'style-mod';
 import { RangeValue, RangeSet, RangeSetBuilder } from '@codemirror/rangeset';
 export { Range } from '@codemirror/rangeset';
-import { Text, findClusterBreak, countColumn, findColumn, codePointAt } from '@codemirror/text';
+import { Text, findClusterBreak, findColumn, codePointAt, countColumn } from '@codemirror/text';
 import { keyName, base } from 'w3c-keyname';
 
 function getSelection(root) {
@@ -213,6 +213,19 @@ function dispatchKey(elt, name, code) {
     elt.dispatchEvent(up);
     return down.defaultPrevented || up.defaultPrevented;
 }
+let _plainTextSupported = null;
+function contentEditablePlainTextSupported() {
+    if (_plainTextSupported == null) {
+        _plainTextSupported = false;
+        let dummy = document.createElement("div");
+        try {
+            dummy.contentEditable = "plaintext-only";
+            _plainTextSupported = dummy.contentEditable == "plaintext-only";
+        }
+        catch (_) { }
+    }
+    return _plainTextSupported;
+}
 
 class DOMPos {
     constructor(node, offset, precise = true) {
@@ -1953,6 +1966,8 @@ class DocView extends ContentView {
         // 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);
+        // Always reset on Firefox when next to an uneditable node to
+        // avoid invisible cursor bugs (#111)
         if (browser.gecko && main.empty && betweenUneditable(anchor)) {
             let dummy = document.createTextNode("");
             this.view.observer.ignore(() => anchor.node.insertBefore(dummy, anchor.node.childNodes[anchor.offset] || null));
@@ -1962,9 +1977,6 @@ class DocView extends ContentView {
         let domSel = this.view.observer.selectionRange;
         // If the selection is already here, or in an equivalent position, don't touch it
         if (force || !domSel.focusNode ||
-            // Always reset on Firefox when next to an uneditable node to
-            // avoid invisible cursor bugs (#111)
-            (browser.gecko && main.empty && nextToUneditable(domSel.focusNode, domSel.focusOffset)) ||
             !isEquivalentPosition(anchor.node, anchor.offset, domSel.anchorNode, domSel.anchorOffset) ||
             !isEquivalentPosition(head.node, head.offset, domSel.focusNode, domSel.focusOffset)) {
             this.view.observer.ignore(() => {
@@ -2007,6 +2019,8 @@ class DocView extends ContentView {
         this.impreciseHead = head.precise ? null : new DOMPos(domSel.focusNode, domSel.focusOffset);
     }
     enforceCursorAssoc() {
+        if (this.view.composing)
+            return;
         let cursor = this.view.state.selection.main;
         let sel = getSelection(this.root);
         if (!cursor.empty || !cursor.assoc || !sel.modify)
@@ -2057,7 +2071,10 @@ class DocView extends ContentView {
     coordsAt(pos, side) {
         for (let off = this.length, i = this.children.length - 1;; i--) {
             let child = this.children[i], start = off - child.breakAfter - child.length;
-            if (pos > start || pos == start && (child.type == BlockType.Text || !i || this.children[i - 1].breakAfter))
+            if (pos > start ||
+                (pos == start && child.type != BlockType.WidgetBefore && child.type != BlockType.WidgetAfter &&
+                    (!i || side == 2 || this.children[i - 1].breakAfter ||
+                        (this.children[i - 1].type == BlockType.WidgetBefore && side > -2))))
                 return child.coordsAt(pos - start, side);
             off = start;
         }
@@ -2129,11 +2146,11 @@ class DocView extends ContentView {
     }
     updateDeco() {
         return this.decorations = [
-            this.computeBlockGapDeco(),
-            this.view.viewState.lineGapDeco,
-            this.compositionDeco,
+            ...this.view.pluginField(PluginField.decorations),
             ...this.view.state.facet(decorations),
-            ...this.view.pluginField(PluginField.decorations)
+            this.compositionDeco,
+            this.computeBlockGapDeco(),
+            this.view.viewState.lineGapDeco
         ];
     }
     scrollPosIntoView(pos, side) {
@@ -2714,7 +2731,7 @@ function domPosInText(node, x, y) {
     }
     return { node, offset: closestOffset > -1 ? closestOffset : generalSide > 0 ? node.nodeValue.length : 0 };
 }
-function posAtCoords(view, { x, y }, bias = -1) {
+function posAtCoords(view, { x, y }, precise, bias = -1) {
     let content = view.contentDOM.getBoundingClientRect(), block;
     let halfLine = view.defaultLineHeight / 2;
     for (let bounced = false;;) {
@@ -2723,7 +2740,7 @@ function posAtCoords(view, { x, y }, bias = -1) {
             bias = block.top > y ? -1 : 1;
             y = Math.min(block.bottom - halfLine, Math.max(block.top + halfLine, y));
             if (bounced)
-                return null;
+                return precise ? null : 0;
             else
                 bounced = true;
         }
@@ -2732,13 +2749,13 @@ function posAtCoords(view, { x, y }, bias = -1) {
         y = bias > 0 ? block.bottom + halfLine : block.top - halfLine;
     }
     let lineStart = block.from;
+    x = Math.max(content.left + 1, Math.min(content.right - 1, x));
     // If this is outside of the rendered viewport, we can't determine a position
     if (lineStart < view.viewport.from)
-        return view.viewport.from == 0 ? 0 : null;
+        return view.viewport.from == 0 ? 0 : posAtCoordsImprecise(view, content, block, x, y);
     if (lineStart > view.viewport.to)
-        return view.viewport.to == view.state.doc.length ? view.state.doc.length : null;
+        return view.viewport.to == view.state.doc.length ? view.state.doc.length : posAtCoordsImprecise(view, content, block, x, y);
     // Clip x to the viewport sides
-    x = Math.max(content.left + 1, Math.min(content.right - 1, x));
     let root = view.root, element = root.elementFromPoint(x, y);
     // There's visible editor content under the point, so we can try
     // using caret(Position|Range)FromPoint as a shortcut
@@ -2765,6 +2782,15 @@ function posAtCoords(view, { x, y }, bias = -1) {
     }
     return view.docView.posFromDOM(node, offset);
 }
+function posAtCoordsImprecise(view, contentRect, block, x, y) {
+    let into = Math.round((x - contentRect.left) * view.defaultCharacterWidth);
+    if (view.lineWrapping && block.height > view.defaultLineHeight * 1.5) {
+        let line = Math.floor((y - block.top) / view.defaultLineHeight);
+        into += line * view.viewState.heightOracle.lineLength;
+    }
+    let content = view.state.sliceDoc(block.from, block.to);
+    return block.from + findColumn(content, into, view.state.tabSize);
+}
 // In case of a high line height, Safari's caretRangeFromPoint treats
 // the space between lines as belonging to the last character of the
 // line before. This is used to detect such a result so that it can be
@@ -2827,48 +2853,31 @@ function byGroup(view, pos, start) {
     };
 }
 function moveVertically(view, start, forward, distance) {
-    var _a;
     let startPos = start.head, dir = forward ? 1 : -1;
     if (startPos == (forward ? view.state.doc.length : 0))
         return EditorSelection.cursor(startPos);
+    let goal = start.goalColumn, startY;
+    let rect = view.contentDOM.getBoundingClientRect();
     let startCoords = view.coordsAtPos(startPos);
     if (startCoords) {
-        let rect = view.dom.getBoundingClientRect();
-        let goal = (_a = start.goalColumn) !== null && _a !== void 0 ? _a : startCoords.left - rect.left;
-        let resolvedGoal = rect.left + goal;
-        let dist = distance !== null && distance !== void 0 ? distance : (view.defaultLineHeight >> 1);
-        for (let startY = dir < 0 ? startCoords.top : startCoords.bottom, extra = 0; extra < 50; extra += 10) {
-            let pos = posAtCoords(view, { x: resolvedGoal, y: startY + (dist + extra) * dir }, dir);
-            if (pos == null)
-                break;
-            if (pos != startPos)
-                return EditorSelection.cursor(pos, undefined, undefined, goal);
-        }
-    }
-    // Outside of the drawn viewport, use a crude column-based approach
-    let { doc } = view.state, line = doc.lineAt(startPos), tabSize = view.state.tabSize;
-    let goal = start.goalColumn, goalCol = 0;
-    if (goal == null) {
-        for (const iter = doc.iterRange(line.from, startPos); !iter.next().done;)
-            goalCol = countColumn(iter.value, goalCol, tabSize);
-        goal = goalCol * view.defaultCharacterWidth;
+        if (goal == null)
+            goal = startCoords.left - rect.left;
+        startY = dir < 0 ? startCoords.top : startCoords.bottom;
     }
     else {
-        goalCol = Math.round(goal / view.defaultCharacterWidth);
-    }
-    if (dir < 0 && line.from == 0)
-        return EditorSelection.cursor(0);
-    else if (dir > 0 && line.to == doc.length)
-        return EditorSelection.cursor(line.to);
-    let otherLine = doc.line(line.number + dir);
-    let result = otherLine.from;
-    let seen = 0;
-    for (const iter = doc.iterRange(otherLine.from, otherLine.to); seen >= goalCol && !iter.next().done;) {
-        const { offset, leftOver } = findColumn(iter.value, seen, goalCol, tabSize);
-        seen = goalCol - leftOver;
-        result += offset;
-    }
-    return EditorSelection.cursor(result, undefined, undefined, goal);
+        let line = view.viewState.lineAt(startPos, view.dom.getBoundingClientRect().top);
+        if (goal == null)
+            goal = Math.min(rect.right - rect.left, view.defaultCharacterWidth * (startPos - line.from));
+        startY = dir < 0 ? line.top : line.bottom;
+    }
+    let resolvedGoal = rect.left + goal;
+    let dist = distance !== null && distance !== void 0 ? distance : (view.defaultLineHeight >> 1);
+    for (let extra = 0;; extra += 10) {
+        let curY = startY + (dist + extra) * dir;
+        let pos = posAtCoords(view, { x: resolvedGoal, y: curY }, false, dir);
+        if (curY < rect.top || curY > rect.bottom || (dir < 0 ? pos < startPos : pos > startPos))
+            return EditorSelection.cursor(pos, undefined, undefined, goal);
+    }
 }
 function skipAtoms(view, oldPos, pos) {
     let atoms = view.pluginField(PluginField.atomicRanges);
@@ -3048,7 +3057,8 @@ class InputState {
     update(update) {
         if (this.mouseSelection)
             this.mouseSelection.update(update);
-        this.lastKeyCode = this.lastSelectionTime = 0;
+        if (update.transactions.length)
+            this.lastKeyCode = this.lastSelectionTime = 0;
     }
     destroy() {
         if (this.mouseSelection)
@@ -3061,8 +3071,8 @@ class MouseSelection {
     constructor(inputState, view, startEvent, style) {
         this.inputState = inputState;
         this.view = view;
-        this.startEvent = startEvent;
         this.style = style;
+        this.lastEvent = startEvent;
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
         doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -3082,11 +3092,11 @@ class MouseSelection {
             return this.destroy();
         if (this.dragging !== false)
             return;
-        this.select(event);
+        this.select(this.lastEvent = event);
     }
     up(event) {
         if (this.dragging == null)
-            this.select(this.startEvent);
+            this.select(this.lastEvent);
         if (!this.dragging)
             event.preventDefault();
         this.destroy();
@@ -3109,7 +3119,8 @@ class MouseSelection {
     update(update) {
         if (update.docChanged && this.dragging)
             this.dragging = this.dragging.map(update.changes);
-        this.style.update(update);
+        if (this.style.update(update))
+            setTimeout(() => this.select(this.lastEvent), 20);
     }
 }
 function addsSelectionRange(view, event) {
@@ -3269,9 +3280,7 @@ function findPositionSide(view, pos, x, y) {
     return before && insideY(y, before) ? -1 : 1;
 }
 function queryPos(view, event) {
-    let pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
-    if (pos == null)
-        return null;
+    let pos = view.posAtCoords({ x: event.clientX, y: event.clientY }, false);
     return { pos, bias: findPositionSide(view, pos, event.clientX, event.clientY) };
 }
 const BadMouseDetail = browser.ie && browser.ie_version <= 11;
@@ -3295,11 +3304,12 @@ function basicMouseSelection(view, event) {
                 if (start)
                     start.pos = update.changes.mapPos(start.pos);
                 startSel = startSel.map(update.changes);
+                lastEvent = null;
             }
         },
         get(event, extend, multiple) {
             let cur;
-            if (event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
+            if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
                 cur = last;
             else {
                 cur = last = queryPos(view, event);
@@ -4670,6 +4680,7 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
     },
     ".cm-lineWrapping": {
         whiteSpace: "pre-wrap",
+        wordBreak: "break-word",
         overflowWrap: "anywhere"
     },
     "&light .cm-content": { caretColor: "black" },
@@ -5002,7 +5013,8 @@ class DOMObserver {
                 this.ignore(() => this.view.docView.sync());
                 this.view.docView.dirty = 0 /* Not */;
             }
-            this.view.docView.updateSelection();
+            if (newSel)
+                this.view.docView.updateSelection();
         }
         this.clearSelection();
     }
@@ -5430,8 +5442,10 @@ class EditorView {
             scrollTo = transactions.some(tr => tr.scrollIntoView) ? state.selection.main : null;
             this.viewState.update(update, scrollTo);
             this.bidiCache = CachedOrder.update(this.bidiCache, update.changes);
-            if (!update.empty)
+            if (!update.empty) {
                 this.updatePlugins(update);
+                this.inputState.update(update);
+            }
             redrawn = this.docView.update(update);
             if (this.state.facet(styleModule) != this.styleModules)
                 this.mountStyles();
@@ -5505,10 +5519,12 @@ class EditorView {
     /**
     @internal
     */
-    measure() {
+    measure(flush = true) {
         if (this.measureScheduled > -1)
             cancelAnimationFrame(this.measureScheduled);
         this.measureScheduled = -1; // Prevent requestMeasure calls from scheduling another animation frame
+        if (flush)
+            this.observer.flush();
         let updated = null;
         try {
             for (let i = 0;; i++) {
@@ -5538,8 +5554,10 @@ class EditorView {
                 else
                     updated.flags |= changed;
                 this.updateState = 2 /* Updating */;
-                if (!update.empty)
+                if (!update.empty) {
                     this.updatePlugins(update);
+                    this.inputState.update(update);
+                }
                 this.updateAttrs();
                 if (changed)
                     this.docView.update(update);
@@ -5587,7 +5605,7 @@ class EditorView {
             spellcheck: "false",
             autocorrect: "off",
             autocapitalize: "off",
-            contenteditable: String(this.state.facet(editable)),
+            contenteditable: !this.state.facet(editable) ? "false" : contentEditablePlainTextSupported() ? "plaintext-only" : "true",
             class: "cm-content",
             style: `${browser.tabSize}: ${this.state.tabSize}`,
             role: "textbox",
@@ -5616,7 +5634,7 @@ class EditorView {
         if (this.updateState == 2 /* Updating */)
             throw new Error("Reading the editor layout isn't allowed during an update");
         if (this.updateState == 0 /* Idle */ && this.measureScheduled > -1)
-            this.measure();
+            this.measure(false);
     }
     /**
     Schedule a layout measurement, optionally providing callbacks to
@@ -5703,11 +5721,9 @@ class EditorView {
         this.viewState.forEachLine(from, to, f, ensureTop(docTop, this.contentDOM));
     }
     /**
-    Find the extent and height of the visual line (the content shown
-    in the editor as a line, which may be smaller than a document
-    line when broken up by block widgets, or bigger than a document
-    line when line breaks are covered by replaced decorations) at
-    the given position.
+    Find the extent and height of the visual line (a range delimited
+    on both sides by either non-[hidden](https://codemirror.net/6/docs/ref/#view.Decoration^range)
+    line breaks, or the start/end of the document) at the given position.
     
     Vertical positions are computed relative to the `docTop`
     argument, which defaults to 0 for this method. You can pass
@@ -5799,13 +5815,9 @@ class EditorView {
     posAtDOM(node, offset = 0) {
         return this.docView.posFromDOM(node, offset);
     }
-    /**
-    Get the document position at the given screen coordinates.
-    Returns null if no valid position could be found.
-    */
-    posAtCoords(coords) {
+    posAtCoords(coords, precise = true) {
         this.readMeasured();
-        return posAtCoords(this, coords);
+        return posAtCoords(this, coords, precise);
     }
     /**
     Get the screen coordinates at the given document position.
@@ -6395,7 +6407,17 @@ function getBase(view) {
 function wrappedLine(view, pos, inside) {
     let range = EditorSelection.cursor(pos);
     return { from: Math.max(inside.from, view.moveToLineBoundary(range, false, true).from),
-        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from) };
+        to: Math.min(inside.to, view.moveToLineBoundary(range, true, true).from),
+        type: BlockType.Text };
+}
+function blockAt(view, pos) {
+    let line = view.visualLineAt(pos);
+    if (Array.isArray(line.type))
+        for (let l of line.type) {
+            if (l.to > pos || l.to == pos && (l.to == line.to || l.type == BlockType.Text))
+                return l;
+        }
+    return line;
 }
 function measureRange(view, range) {
     if (range.to <= view.viewport.from || range.from >= view.viewport.to)
@@ -6406,22 +6428,25 @@ function measureRange(view, range) {
     let lineStyle = window.getComputedStyle(content.firstChild);
     let leftSide = contentRect.left + parseInt(lineStyle.paddingLeft);
     let rightSide = contentRect.right - parseInt(lineStyle.paddingRight);
-    let visualStart = view.visualLineAt(from);
-    let visualEnd = view.visualLineAt(to);
+    let startBlock = blockAt(view, from), endBlock = blockAt(view, to);
+    let visualStart = startBlock.type == BlockType.Text ? startBlock : null;
+    let visualEnd = endBlock.type == BlockType.Text ? endBlock : null;
     if (view.lineWrapping) {
-        visualStart = wrappedLine(view, from, visualStart);
-        visualEnd = wrappedLine(view, to, visualEnd);
+        if (visualStart)
+            visualStart = wrappedLine(view, from, visualStart);
+        if (visualEnd)
+            visualEnd = wrappedLine(view, to, visualEnd);
     }
-    if (visualStart.from == visualEnd.from) {
+    if (visualStart && visualEnd && visualStart.from == visualEnd.from) {
         return pieces(drawForLine(range.from, range.to, visualStart));
     }
     else {
-        let top = drawForLine(range.from, null, visualStart);
-        let bottom = drawForLine(null, range.to, visualEnd);
+        let top = visualStart ? drawForLine(range.from, null, visualStart) : drawForWidget(startBlock, false);
+        let bottom = visualEnd ? drawForLine(null, range.to, visualEnd) : drawForWidget(endBlock, true);
         let between = [];
-        if (visualStart.to < visualEnd.from - 1)
+        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
             between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
-        else if (top.bottom < bottom.top && bottom.top - top.bottom < 4)
+        else if (top.bottom < bottom.top && blockAt(view, (top.bottom + bottom.top) / 2).type == BlockType.Text)
             top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
         return pieces(top).concat(between).concat(pieces(bottom));
     }
@@ -6438,8 +6463,12 @@ function measureRange(view, range) {
     function drawForLine(from, to, line) {
         let top = 1e9, bottom = -1e9, horizontal = [];
         function addSpan(from, fromOpen, to, toOpen, dir) {
-            let fromCoords = view.coordsAtPos(from, from == line.to ? -1 : 1);
-            let toCoords = view.coordsAtPos(to, to == line.from ? 1 : -1);
+            // Passing 2/-2 is a kludge to force the view to return
+            // coordinates on the proper side of block widgets, since
+            // normalizing the side there, though appropriate for most
+            // coordsAtPos queries, would break selection drawing.
+            let fromCoords = view.coordsAtPos(from, (from == line.to ? -2 : 2));
+            let toCoords = view.coordsAtPos(to, (to == line.from ? 2 : -2));
             top = Math.min(fromCoords.top, toCoords.top, top);
             bottom = Math.max(fromCoords.bottom, toCoords.bottom, bottom);
             if (dir == Direction.LTR)
@@ -6469,6 +6498,10 @@ function measureRange(view, range) {
             addSpan(start, from == null, end, to == null, view.textDirection);
         return { top, bottom, horizontal };
     }
+    function drawForWidget(block, top) {
+        let y = contentRect.top + (top ? block.top : block.bottom);
+        return { top: y, bottom: y, horizontal: [] };
+    }
 }
 function measureCursor(view, cursor, primary) {
     let pos = view.coordsAtPos(cursor.head, cursor.assoc || 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.18.15",
+  "version": "0.18.19",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -28,7 +28,7 @@
   "dependencies": {
     "@codemirror/rangeset": "^0.18.2",
     "@codemirror/state": "^0.18.0",
-    "@codemirror/text": "^0.18.0",
+    "@codemirror/text": "^0.18.1",
     "style-mod": "^4.0.0",
     "w3c-keyname": "^2.2.4"
   },