@codemirror/view 0.19.47 → 0.20.1

package/dist/index.js

@@ -1,8 +1,5 @@
-import { MapMode, Text as Text$1, Facet, StateEffect, ChangeSet, EditorSelection, EditorState, CharCategory, Transaction, Prec, combineConfig, StateField } from '@codemirror/state';
+import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Prec, Transaction, combineConfig, StateField, RangeSetBuilder, codePointAt, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
-import { RangeSet, RangeValue, RangeSetBuilder } from '@codemirror/rangeset';
-export { Range } from '@codemirror/rangeset';
-import { Text, findClusterBreak, findColumn, codePointAt, countColumn } from '@codemirror/text';
 import { keyName, base } from 'w3c-keyname';
 
 function getSelection(root) {
@@ -315,32 +312,34 @@ class ContentView {
     sync(track) {
         if (this.dirty & 2 /* Node */) {
             let parent = this.dom;
-            let pos = parent.firstChild;
+            let prev = null, next;
             for (let child of this.children) {
                 if (child.dirty) {
-                    if (!child.dom && pos) {
-                        let contentView = ContentView.get(pos);
+                    if (!child.dom && (next = prev ? prev.nextSibling : parent.firstChild)) {
+                        let contentView = ContentView.get(next);
                         if (!contentView || !contentView.parent && contentView.constructor == child.constructor)
-                            child.reuseDOM(pos);
+                            child.reuseDOM(next);
                     }
                     child.sync(track);
                     child.dirty = 0 /* Not */;
                 }
-                if (track && !track.written && track.node == parent && pos != child.dom)
+                next = prev ? prev.nextSibling : parent.firstChild;
+                if (track && !track.written && track.node == parent && next != child.dom)
                     track.written = true;
                 if (child.dom.parentNode == parent) {
-                    while (pos && pos != child.dom)
-                        pos = rm(pos);
-                    pos = child.dom.nextSibling;
+                    while (next && next != child.dom)
+                        next = rm$1(next);
                 }
                 else {
-                    parent.insertBefore(child.dom, pos);
+                    parent.insertBefore(child.dom, next);
                 }
+                prev = child.dom;
             }
-            if (pos && track && track.node == parent)
+            next = prev ? prev.nextSibling : parent.firstChild;
+            if (next && track && track.node == parent)
                 track.written = true;
-            while (pos)
-                pos = rm(pos);
+            while (next)
+                next = rm$1(next);
         }
         else if (this.dirty & 1 /* Child */) {
             for (let child of this.children)
@@ -486,7 +485,7 @@ class ContentView {
 }
 ContentView.prototype.breakAfter = 0;
 // Remove a DOM node and return its next sibling.
-function rm(dom) {
+function rm$1(dom) {
     let next = dom.nextSibling;
     dom.parentNode.removeChild(dom);
     return next;
@@ -1074,7 +1073,7 @@ function updateAttrs(dom, prev, attrs) {
 Widgets added to the content are described by subclasses of this
 class. Using a description object like that makes it possible to
 delay creating of the DOM structure for a widget until it is
-needed, and to avoid redrawing widgets even when the decorations
+needed, and to avoid redrawing widgets even if the decorations
 that define them are recreated.
 */
 class WidgetType {
@@ -1087,7 +1086,7 @@ class WidgetType {
     returns `false`, which will cause new instances of the widget to
     always be redrawn.
     */
-    eq(_widget) { return false; }
+    eq(widget) { return false; }
     /**
     Update a DOM element created by a widget of the same type (but
     different, non-`eq` content) to reflect this widget. May return
@@ -1095,7 +1094,7 @@ class WidgetType {
     couldn't (in which case the widget will be redrawn). The default
     implementation just returns false.
     */
-    updateDOM(_dom) { return false; }
+    updateDOM(dom) { return false; }
     /**
     @internal
     */
@@ -1114,7 +1113,7 @@ class WidgetType {
     should be ignored by the editor. The default is to ignore all
     events.
     */
-    ignoreEvent(_event) { return true; }
+    ignoreEvent(event) { return true; }
     /**
     @internal
     */
@@ -1123,7 +1122,7 @@ class WidgetType {
     This is called when the an instance of the widget is removed
     from the editor view.
     */
-    destroy(_dom) { }
+    destroy(dom) { }
 }
 /**
 The different types of blocks that can occur in an editor view.
@@ -1149,7 +1148,8 @@ return BlockType})(BlockType || (BlockType = {}));
 /**
 A decoration provides information on how to draw or style a piece
 of content. You'll usually use it wrapped in a
-[`Range`](https://codemirror.net/6/docs/ref/#rangeset.Range), which adds a start and end position.
+[`Range`](https://codemirror.net/6/docs/ref/#state.Range), which adds a start and end position.
+@nonabstract
 */
 class Decoration extends RangeValue {
     /**
@@ -1188,18 +1188,17 @@ class Decoration extends RangeValue {
     Create a mark decoration, which influences the styling of the
     content in its range. Nested mark decorations will cause nested
     DOM elements to be created. Nesting order is determined by
-    precedence of the [facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations) or
-    (below the facet-provided decorations) [view
-    plugin](https://codemirror.net/6/docs/ref/#view.PluginSpec.decorations). Such elements are split
-    on line boundaries and on the boundaries of higher-precedence
-    decorations.
+    precedence of the [facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), with
+    the higher-precedence decorations creating the inner DOM nodes.
+    Such elements are split on line boundaries and on the boundaries
+    of lower-precedence decorations.
     */
     static mark(spec) {
         return new MarkDecoration(spec);
     }
     /**
-    Create a widget decoration, which adds an element at the given
-    position.
+    Create a widget decoration, which displays a DOM element at the
+    given position.
     */
     static widget(spec) {
         let side = spec.side || 0, block = !!spec.block;
@@ -1510,7 +1509,7 @@ class BlockWidgetView extends ContentView {
         }
     }
     get overrideDOMText() {
-        return this.parent ? this.parent.view.state.doc.slice(this.posAtStart, this.posAtEnd) : Text$1.empty;
+        return this.parent ? this.parent.view.state.doc.slice(this.posAtStart, this.posAtEnd) : Text.empty;
     }
     domBoundsAround() { return null; }
     become(other) {
@@ -1537,11 +1536,11 @@ class BlockWidgetView extends ContentView {
 }
 
 class ContentBuilder {
-    constructor(doc, pos, end, disallowBlockEffectsBelow) {
+    constructor(doc, pos, end, disallowBlockEffectsFor) {
         this.doc = doc;
         this.pos = pos;
         this.end = end;
-        this.disallowBlockEffectsBelow = disallowBlockEffectsBelow;
+        this.disallowBlockEffectsFor = disallowBlockEffectsFor;
         this.content = [];
         this.curLine = null;
         this.breakAtStart = 0;
@@ -1626,7 +1625,13 @@ class ContentBuilder {
         if (this.openStart < 0)
             this.openStart = openStart;
     }
-    point(from, to, deco, active, openStart) {
+    point(from, to, deco, active, openStart, index) {
+        if (this.disallowBlockEffectsFor[index] && deco instanceof PointDecoration) {
+            if (deco.block)
+                throw new RangeError("Block decorations may not be specified via plugins");
+            if (to > this.doc.lineAt(this.pos).to)
+                throw new RangeError("Decorations that replace line breaks may not be specified via plugins");
+        }
         let len = to - from;
         if (deco instanceof PointDecoration) {
             if (deco.block) {
@@ -1670,17 +1675,8 @@ class ContentBuilder {
         if (this.openStart < 0)
             this.openStart = openStart;
     }
-    filterPoint(from, to, value, index) {
-        if (index < this.disallowBlockEffectsBelow && value instanceof PointDecoration) {
-            if (value.block)
-                throw new RangeError("Block decorations may not be specified via plugins");
-            if (to > this.doc.lineAt(this.pos).to)
-                throw new RangeError("Decorations that replace line breaks may not be specified via plugins");
-        }
-        return true;
-    }
-    static build(text, from, to, decorations, pluginDecorationLength) {
-        let builder = new ContentBuilder(text, from, to, pluginDecorationLength);
+    static build(text, from, to, decorations, dynamicDecorationMap) {
+        let builder = new ContentBuilder(text, from, to, dynamicDecorationMap);
         builder.openEnd = RangeSet.spans(decorations, from, to, builder);
         if (builder.openStart < 0)
             builder.openStart = builder.openEnd;
@@ -1710,13 +1706,8 @@ const mouseSelectionStyle = /*@__PURE__*/Facet.define();
 const exceptionSink = /*@__PURE__*/Facet.define();
 const updateListener = /*@__PURE__*/Facet.define();
 const inputHandler = /*@__PURE__*/Facet.define();
-// FIXME remove
-const scrollTo = /*@__PURE__*/StateEffect.define({
-    map: (range, changes) => range.map(changes)
-});
-// FIXME remove
-const centerOn = /*@__PURE__*/StateEffect.define({
-    map: (range, changes) => range.map(changes)
+const perLineTextDirection = /*@__PURE__*/Facet.define({
+    combine: values => values.some(x => x)
 });
 class ScrollTarget {
     constructor(range, y = "nearest", x = "nearest", yMargin = 5, xMargin = 5) {
@@ -1755,83 +1746,6 @@ function logException(state, exception, context) {
         console.error(exception);
 }
 const editable = /*@__PURE__*/Facet.define({ combine: values => values.length ? values[0] : true });
-/**
-Used to [declare](https://codemirror.net/6/docs/ref/#view.PluginSpec.provide) which
-[fields](https://codemirror.net/6/docs/ref/#view.PluginValue) a [view plugin](https://codemirror.net/6/docs/ref/#view.ViewPlugin)
-provides.
-*/
-class PluginFieldProvider {
-    /**
-    @internal
-    */
-    constructor(
-    /**
-    @internal
-    */
-    field, 
-    /**
-    @internal
-    */
-    get) {
-        this.field = field;
-        this.get = get;
-    }
-}
-/**
-Plugin fields are a mechanism for allowing plugins to provide
-values that can be retrieved through the
-[`pluginField`](https://codemirror.net/6/docs/ref/#view.EditorView.pluginField) view method.
-*/
-class PluginField {
-    /**
-    Create a [provider](https://codemirror.net/6/docs/ref/#view.PluginFieldProvider) for this field,
-    to use with a plugin's [provide](https://codemirror.net/6/docs/ref/#view.PluginSpec.provide)
-    option.
-    */
-    from(get) {
-        return new PluginFieldProvider(this, get);
-    }
-    /**
-    Define a new plugin field.
-    */
-    static define() { return new PluginField(); }
-}
-/**
-This field can be used by plugins to provide
-[decorations](https://codemirror.net/6/docs/ref/#view.Decoration).
-
-**Note**: For reasons of data flow (plugins are only updated
-after the viewport is computed), decorations produced by plugins
-are _not_ taken into account when predicting the vertical layout
-structure of the editor. They **must not** introduce block
-widgets (that will raise an error) or replacing decorations that
-cover line breaks (these will be ignored if they occur). Such
-decorations, or others that cause a large amount of vertical
-size shift compared to the undecorated content, should be
-provided through the state-level [`decorations`
-facet](https://codemirror.net/6/docs/ref/#view.EditorView^decorations) instead.
-*/
-PluginField.decorations = /*@__PURE__*/PluginField.define();
-/**
-Used to provide ranges that should be treated as atoms as far as
-cursor motion is concerned. This causes methods like
-[`moveByChar`](https://codemirror.net/6/docs/ref/#view.EditorView.moveByChar) and
-[`moveVertically`](https://codemirror.net/6/docs/ref/#view.EditorView.moveVertically) (and the
-commands built on top of them) to skip across such regions when
-a selection endpoint would enter them. This does _not_ prevent
-direct programmatic [selection
-updates](https://codemirror.net/6/docs/ref/#state.TransactionSpec.selection) from moving into such
-regions.
-*/
-PluginField.atomicRanges = /*@__PURE__*/PluginField.define();
-/**
-Plugins can provide additional scroll margins (space around the
-sides of the scrolling element that should be considered
-invisible) through this field. This can be useful when the
-plugin introduces elements that cover part of that element (for
-example a horizontally fixed gutter).
-*/
-PluginField.scrollMargins = /*@__PURE__*/PluginField.define();
 let nextPluginID = 0;
 const viewPlugin = /*@__PURE__*/Facet.define();
 /**
@@ -1852,27 +1766,29 @@ class ViewPlugin {
     /**
     @internal
     */
-    fields) {
+    domEventHandlers, buildExtensions) {
         this.id = id;
         this.create = create;
-        this.fields = fields;
-        this.extension = viewPlugin.of(this);
+        this.domEventHandlers = domEventHandlers;
+        this.extension = buildExtensions(this);
     }
     /**
     Define a plugin from a constructor function that creates the
     plugin's value, given an editor view.
     */
     static define(create, spec) {
-        let { eventHandlers, provide, decorations } = spec || {};
-        let fields = [];
-        if (provide)
-            for (let provider of Array.isArray(provide) ? provide : [provide])
-                fields.push(provider);
-        if (eventHandlers)
-            fields.push(domEventHandlers.from((value) => ({ plugin: value, handlers: eventHandlers })));
-        if (decorations)
-            fields.push(PluginField.decorations.from(decorations));
-        return new ViewPlugin(nextPluginID++, create, fields);
+        const { eventHandlers, provide, decorations: deco } = spec || {};
+        return new ViewPlugin(nextPluginID++, create, eventHandlers, plugin => {
+            let ext = [viewPlugin.of(plugin)];
+            if (deco)
+                ext.push(decorations.of(view => {
+                    let pluginInst = view.plugin(plugin);
+                    return pluginInst ? deco(pluginInst) : Decoration.none;
+                }));
+            if (provide)
+                ext.push(provide(plugin));
+            return ext;
+        });
     }
     /**
     Create a plugin for a class whose constructor takes a single
@@ -1882,7 +1798,6 @@ class ViewPlugin {
         return ViewPlugin.define(view => new cls(view), spec);
     }
 }
-const domEventHandlers = /*@__PURE__*/PluginField.define();
 class PluginInstance {
     constructor(spec) {
         this.spec = spec;
@@ -1895,12 +1810,6 @@ class PluginInstance {
         // initialized on the first update.
         this.value = null;
     }
-    takeField(type, target) {
-        if (this.spec)
-            for (let { field, get } of this.spec.fields)
-                if (field == type)
-                    target.push(get(this.value));
-    }
     update(view) {
         if (!this.value) {
             if (this.spec) {
@@ -1952,6 +1861,8 @@ const editorAttributes = /*@__PURE__*/Facet.define();
 const contentAttributes = /*@__PURE__*/Facet.define();
 // Provide decorations
 const decorations = /*@__PURE__*/Facet.define();
+const atomicRanges = /*@__PURE__*/Facet.define();
+const scrollMargins = /*@__PURE__*/Facet.define();
 const styleModule = /*@__PURE__*/Facet.define();
 class ChangedRange {
     constructor(fromA, toA, fromB, toB) {
@@ -2052,8 +1963,8 @@ class ViewUpdate {
         return (this.flags & 4 /* Viewport */) > 0;
     }
     /**
-    Indicates whether the height of an element in the editor changed
-    in this update.
+    Indicates whether the height of a block element in the editor
+    changed in this update.
     */
     get heightChanged() {
         return (this.flags & 2 /* Height */) > 0;
@@ -2512,7 +2423,7 @@ class DocView extends ContentView {
         this.view = view;
         this.compositionDeco = Decoration.none;
         this.decorations = [];
-        this.pluginDecorationLength = 0;
+        this.dynamicDecorationMap = [];
         // Track a minimum width for the editor. When measuring sizes in
         // measureVisibleLineHeights, this is updated to point at the width
         // of a given element and its extent in the document. When a change
@@ -2618,7 +2529,7 @@ class DocView extends ContentView {
             if (!next)
                 break;
             let { fromA, toA, fromB, toB } = next;
-            let { content, breakAtStart, openStart, openEnd } = ContentBuilder.build(this.view.state.doc, fromB, toB, this.decorations, this.pluginDecorationLength);
+            let { content, breakAtStart, openStart, openEnd } = ContentBuilder.build(this.view.state.doc, fromB, toB, this.decorations, this.dynamicDecorationMap);
             let { i: toI, off: toOff } = cursor.findPos(toA, 1);
             let { i: fromI, off: fromOff } = cursor.findPos(fromA, -1);
             replaceRange(this, fromI, fromOff, toI, toOff, content, breakAtStart, openStart, openEnd);
@@ -2759,11 +2670,11 @@ class DocView extends ContentView {
             off = start;
         }
     }
-    measureVisibleLineHeights() {
-        let result = [], { from, to } = this.view.viewState.viewport;
+    measureVisibleLineHeights(viewport) {
+        let result = [], { from, to } = viewport;
         let contentWidth = this.view.contentDOM.clientWidth;
         let isWider = contentWidth > Math.max(this.view.scrollDOM.clientWidth, this.minWidth) + 1;
-        let widest = -1;
+        let widest = -1, ltr = this.view.textDirection == Direction.LTR;
         for (let pos = 0, i = 0; i < this.children.length; i++) {
             let child = this.children[i], end = pos + child.length;
             if (end > to)
@@ -2776,8 +2687,7 @@ class DocView extends ContentView {
                     let rects = last ? clientRectsFor(last) : [];
                     if (rects.length) {
                         let rect = rects[rects.length - 1];
-                        let width = this.view.textDirection == Direction.LTR ? rect.right - childRect.left
-                            : childRect.right - rect.left;
+                        let width = ltr ? rect.right - childRect.left : childRect.right - rect.left;
                         if (width > widest) {
                             widest = width;
                             this.minWidth = contentWidth;
@@ -2791,6 +2701,10 @@ class DocView extends ContentView {
         }
         return result;
     }
+    textDirectionAt(pos) {
+        let { i } = this.childPos(pos, 1);
+        return getComputedStyle(this.children[i].dom).direction == "rtl" ? Direction.RTL : Direction.LTR;
+    }
     measureTextSize() {
         for (let child of this.children) {
             if (child instanceof LineView) {
@@ -2842,11 +2756,14 @@ class DocView extends ContentView {
         return Decoration.set(deco);
     }
     updateDeco() {
-        let pluginDecorations = this.view.pluginField(PluginField.decorations);
-        this.pluginDecorationLength = pluginDecorations.length;
+        let allDeco = this.view.state.facet(decorations).map((d, i) => {
+            let dynamic = this.dynamicDecorationMap[i] = typeof d == "function";
+            return dynamic ? d(this.view) : d;
+        });
+        for (let i = allDeco.length; i < allDeco.length + 3; i++)
+            this.dynamicDecorationMap[i] = false;
         return this.decorations = [
-            ...pluginDecorations,
-            ...this.view.state.facet(decorations),
+            ...allDeco,
             this.compositionDeco,
             this.computeBlockGapDeco(),
             this.view.viewState.lineGapDeco
@@ -2861,7 +2778,7 @@ class DocView extends ContentView {
             rect = { left: Math.min(rect.left, other.left), top: Math.min(rect.top, other.top),
                 right: Math.max(rect.right, other.right), bottom: Math.max(rect.bottom, other.bottom) };
         let mLeft = 0, mRight = 0, mTop = 0, mBottom = 0;
-        for (let margins of this.view.pluginField(PluginField.scrollMargins))
+        for (let margins of this.view.state.facet(scrollMargins).map(f => f(this.view)))
             if (margins) {
                 let { left, right, top, bottom } = margins;
                 if (left != null)
@@ -3250,7 +3167,8 @@ function moveToLineBoundary(view, start, forward, includeWrap) {
         : view.coordsAtPos(start.assoc < 0 && start.head > line.from ? start.head - 1 : start.head);
     if (coords) {
         let editorRect = view.dom.getBoundingClientRect();
-        let pos = view.posAtCoords({ x: forward == (view.textDirection == Direction.LTR) ? editorRect.right - 1 : editorRect.left + 1,
+        let direction = view.textDirectionAt(line.from);
+        let pos = view.posAtCoords({ x: forward == (direction == Direction.LTR) ? editorRect.right - 1 : editorRect.left + 1,
             y: (coords.top + coords.bottom) / 2 });
         if (pos != null)
             return EditorSelection.cursor(pos, forward ? -1 : 1);
@@ -3261,8 +3179,9 @@ function moveToLineBoundary(view, start, forward, includeWrap) {
 }
 function moveByChar(view, start, forward, by) {
     let line = view.state.doc.lineAt(start.head), spans = view.bidiSpans(line);
+    let direction = view.textDirectionAt(line.from);
     for (let cur = start, check = null;;) {
-        let next = moveVisually(line, spans, view.textDirection, cur, forward), char = movedOver;
+        let next = moveVisually(line, spans, direction, cur, forward), char = movedOver;
         if (!next) {
             if (line.number == (forward ? view.state.doc.lines : 1))
                 return cur;
@@ -3305,7 +3224,7 @@ function moveVertically(view, start, forward, distance) {
         startY = dir < 0 ? startCoords.top : startCoords.bottom;
     }
     else {
-        let line = view.viewState.lineBlockAt(startPos - docTop);
+        let line = view.viewState.lineBlockAt(startPos);
         if (goal == null)
             goal = Math.min(rect.right - rect.left, view.defaultCharacterWidth * (startPos - line.from));
         startY = (dir < 0 ? line.top : line.bottom) + docTop;
@@ -3320,7 +3239,7 @@ function moveVertically(view, start, forward, distance) {
     }
 }
 function skipAtoms(view, oldPos, pos) {
-    let atoms = view.pluginField(PluginField.atomicRanges);
+    let atoms = view.state.facet(atomicRanges).map(f => f(view));
     for (;;) {
         let moved = false;
         for (let set of atoms) {
@@ -3368,10 +3287,10 @@ class InputState {
         for (let type in handlers) {
             let handler = handlers[type];
             view.contentDOM.addEventListener(type, (event) => {
-                if (type == "keydown" && this.keydown(view, event))
-                    return;
                 if (!eventBelongsToEditor(view, event) || this.ignoreDuringComposition(event))
                     return;
+                if (type == "keydown" && this.keydown(view, event))
+                    return;
                 if (this.mustFlushObserver(event))
                     view.observer.forceFlush();
                 if (this.runCustomHandlers(type, view, event))
@@ -3382,7 +3301,6 @@ class InputState {
             this.registeredEvents.push(type);
         }
         this.notifiedFocused = view.hasFocus;
-        this.ensureHandlers(view);
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
         if (browser.safari)
@@ -3392,20 +3310,23 @@ class InputState {
         this.lastSelectionOrigin = origin;
         this.lastSelectionTime = Date.now();
     }
-    ensureHandlers(view) {
-        let handlers = this.customHandlers = view.pluginField(domEventHandlers);
-        for (let set of handlers) {
-            for (let type in set.handlers)
-                if (this.registeredEvents.indexOf(type) < 0 && type != "scroll") {
-                    this.registeredEvents.push(type);
-                    view.contentDOM.addEventListener(type, (event) => {
-                        if (!eventBelongsToEditor(view, event))
-                            return;
-                        if (this.runCustomHandlers(type, view, event))
-                            event.preventDefault();
-                    });
-                }
-        }
+    ensureHandlers(view, plugins) {
+        var _a;
+        let handlers;
+        for (let plugin of plugins)
+            if (handlers = (_a = plugin.update(view).spec) === null || _a === void 0 ? void 0 : _a.domEventHandlers) {
+                this.customHandlers.push({ plugin: plugin.value, handlers });
+                for (let type in handlers)
+                    if (this.registeredEvents.indexOf(type) < 0 && type != "scroll") {
+                        this.registeredEvents.push(type);
+                        view.contentDOM.addEventListener(type, (event) => {
+                            if (!eventBelongsToEditor(view, event))
+                                return;
+                            if (this.runCustomHandlers(type, view, event))
+                                event.preventDefault();
+                        });
+                    }
+            }
     }
     runCustomHandlers(type, view, event) {
         for (let set of this.customHandlers) {
@@ -3439,7 +3360,7 @@ class InputState {
         // Must always run, even if a custom handler handled the event
         this.lastKeyCode = event.keyCode;
         this.lastKeyTime = Date.now();
-        if (this.screenKeyEvent(view, event))
+        if (event.keyCode == 9 && Date.now() < this.lastEscPress + 2000)
             return true;
         // Chrome for Android usually doesn't fire proper key events, but
         // occasionally does, usually surrounded by a bunch of complicated
@@ -3483,20 +3404,12 @@ class InputState {
         // compositionend and keydown events are sometimes emitted in the
         // wrong order. The key event should still be ignored, even when
         // it happens after the compositionend event.
-        if (browser.safari && Date.now() - this.compositionEndedAt < 500) {
+        if (browser.safari && Date.now() - this.compositionEndedAt < 100) {
             this.compositionEndedAt = 0;
             return true;
         }
         return false;
     }
-    screenKeyEvent(view, event) {
-        let protectedTab = event.keyCode == 9 && Date.now() < this.lastEscPress + 2000;
-        if (event.keyCode == 27)
-            this.lastEscPress = Date.now();
-        else if (modifierCodes.indexOf(event.keyCode) < 0)
-            this.lastEscPress = 0;
-        return protectedTab;
-    }
     mustFlushObserver(event) {
         return (event.type == "keydown" && event.keyCode != 229) ||
             event.type == "compositionend" && !browser.ios;
@@ -3670,6 +3583,10 @@ function doPaste(view, input) {
 }
 handlers.keydown = (view, event) => {
     view.inputState.setSelectionOrigin("select");
+    if (event.keyCode == 27)
+        view.inputState.lastEscPress = Date.now();
+    else if (modifierCodes.indexOf(event.keyCode) < 0)
+        view.inputState.lastEscPress = 0;
 };
 let lastTouch = 0;
 handlers.touchstart = (view, e) => {
@@ -3927,14 +3844,6 @@ handlers.focus = handlers.blur = view => {
             view.update([]);
     }, 10);
 };
-handlers.beforeprint = view => {
-    view.viewState.printing = true;
-    view.requestMeasure();
-    setTimeout(() => {
-        view.viewState.printing = false;
-        view.requestMeasure();
-    }, 2000);
-};
 function forceClearComposition(view, rapid) {
     if (view.docView.compositionDeco.size) {
         view.inputState.rapidCompositionStart = rapid;
@@ -4003,7 +3912,6 @@ class HeightOracle {
     constructor() {
         this.doc = Text.empty;
         this.lineWrapping = false;
-        this.direction = Direction.LTR;
         this.heightSamples = {};
         this.lineHeight = 14;
         this.charWidth = 7;
@@ -4024,8 +3932,8 @@ class HeightOracle {
         return lines * this.lineHeight;
     }
     setDoc(doc) { this.doc = doc; return this; }
-    mustRefreshForStyle(whiteSpace, direction) {
-        return (wrappingWhiteSpace.indexOf(whiteSpace) > -1) != this.lineWrapping || this.direction != direction;
+    mustRefreshForWrapping(whiteSpace) {
+        return (wrappingWhiteSpace.indexOf(whiteSpace) > -1) != this.lineWrapping;
     }
     mustRefreshForHeights(lineHeights) {
         let newHeight = false;
@@ -4041,13 +3949,10 @@ class HeightOracle {
         }
         return newHeight;
     }
-    refresh(whiteSpace, direction, lineHeight, charWidth, lineLength, knownHeights) {
+    refresh(whiteSpace, lineHeight, charWidth, lineLength, knownHeights) {
         let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
-        let changed = Math.round(lineHeight) != Math.round(this.lineHeight) ||
-            this.lineWrapping != lineWrapping ||
-            this.direction != direction;
+        let changed = Math.round(lineHeight) != Math.round(this.lineHeight) || this.lineWrapping != lineWrapping;
         this.lineWrapping = lineWrapping;
-        this.direction = direction;
         this.lineHeight = lineHeight;
         this.charWidth = charWidth;
         this.lineLength = lineLength;
@@ -4128,12 +4033,6 @@ class BlockInfo {
             .concat(Array.isArray(other.type) ? other.type : [other]);
         return new BlockInfo(this.from, this.length + other.length, this.top, this.height + other.height, detail);
     }
-    /**
-    FIXME remove on next breaking release @internal
-    */
-    moveY(offset) {
-        return !offset ? this : new BlockInfo(this.from, this.length, this.top + offset, this.height, Array.isArray(this.type) ? this.type.map(b => b.moveY(offset)) : this.type);
-    }
 }
 var QueryType = /*@__PURE__*/(function (QueryType) {
     QueryType[QueryType["ByPos"] = 0] = "ByPos";
@@ -4257,8 +4156,9 @@ class HeightMapBlock extends HeightMap {
     lineAt(_value, _type, doc, top, offset) {
         return this.blockAt(0, doc, top, offset);
     }
-    forEachLine(_from, _to, doc, top, offset, f) {
-        f(this.blockAt(0, doc, top, offset));
+    forEachLine(from, to, doc, top, offset, f) {
+        if (from <= offset + this.length && to >= offset)
+            f(this.blockAt(0, doc, top, offset));
     }
     updateHeight(oracle, offset = 0, _force = false, measured) {
         if (measured && measured.from <= offset && measured.more)
@@ -4689,6 +4589,11 @@ function visiblePixelRange(dom, paddingTop) {
     return { left: left - rect.left, right: Math.max(left, right) - rect.left,
         top: top - (rect.top + paddingTop), bottom: Math.max(top, bottom) - (rect.top + paddingTop) };
 }
+function fullPixelRange(dom, paddingTop) {
+    let rect = dom.getBoundingClientRect();
+    return { left: 0, right: rect.right - rect.left,
+        top: paddingTop, bottom: rect.bottom - (rect.top + paddingTop) };
+}
 // Line gaps are placeholder widgets used to hide pieces of overlong
 // lines within the viewport, as a kludge to keep the editor
 // responsive when a ridiculously long line is loaded into it.
@@ -4754,6 +4659,7 @@ class ViewState {
         // Flag set when editor content was redrawn, so that the next
         // measure stage knows it must read DOM layout
         this.mustMeasureContent = true;
+        this.defaultTextDirection = Direction.RTL;
         this.visibleRanges = [];
         // Cursor 'assoc' is only significant when the cursor is on a line
         // wrap point, where it must stick to the character that it is
@@ -4764,7 +4670,8 @@ class ViewState {
         // boundary and, if so, reset it to make sure it is positioned in
         // the right place.
         this.mustEnforceCursorAssoc = false;
-        this.heightMap = HeightMap.empty().applyChanges(state.facet(decorations), Text.empty, this.heightOracle.setDoc(state.doc), [new ChangedRange(0, 0, 0, state.doc.length)]);
+        this.stateDeco = state.facet(decorations).filter(d => typeof d != "function");
+        this.heightMap = HeightMap.empty().applyChanges(this.stateDeco, Text.empty, this.heightOracle.setDoc(state.doc), [new ChangedRange(0, 0, 0, state.doc.length)]);
         this.viewport = this.getViewport(0, null);
         this.updateViewportLines();
         this.updateForViewport();
@@ -4792,13 +4699,13 @@ class ViewState {
         });
     }
     update(update, scrollTarget = null) {
-        let prev = this.state;
         this.state = update.state;
-        let newDeco = this.state.facet(decorations);
+        let prevDeco = this.stateDeco;
+        this.stateDeco = this.state.facet(decorations).filter(d => typeof d != "function");
         let contentChanges = update.changedRanges;
-        let heightChanges = ChangedRange.extendWithRanges(contentChanges, heightRelevantDecoChanges(update.startState.facet(decorations), newDeco, update ? update.changes : ChangeSet.empty(this.state.doc.length)));
+        let heightChanges = ChangedRange.extendWithRanges(contentChanges, heightRelevantDecoChanges(prevDeco, this.stateDeco, update ? update.changes : ChangeSet.empty(this.state.doc.length)));
         let prevHeight = this.heightMap.height;
-        this.heightMap = this.heightMap.applyChanges(newDeco, prev.doc, this.heightOracle.setDoc(this.state.doc), heightChanges);
+        this.heightMap = this.heightMap.applyChanges(this.stateDeco, update.startState.doc, this.heightOracle.setDoc(this.state.doc), heightChanges);
         if (this.heightMap.height != prevHeight)
             update.flags |= 2 /* Height */;
         let viewport = heightChanges.length ? this.mapViewport(this.viewport, update.changes) : this.viewport;
@@ -4823,8 +4730,9 @@ class ViewState {
     measure(view) {
         let dom = view.contentDOM, style = window.getComputedStyle(dom);
         let oracle = this.heightOracle;
-        let whiteSpace = style.whiteSpace, direction = style.direction == "rtl" ? Direction.RTL : Direction.LTR;
-        let refresh = this.heightOracle.mustRefreshForStyle(whiteSpace, direction);
+        let whiteSpace = style.whiteSpace;
+        this.defaultTextDirection = style.direction == "rtl" ? Direction.RTL : Direction.LTR;
+        let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
         let result = 0, bias = 0;
         if (this.editorWidth != view.scrollDOM.clientWidth) {
@@ -4845,8 +4753,7 @@ class ViewState {
             }
         }
         // Pixel viewport
-        let pixelViewport = this.printing ? { top: -1e8, bottom: 1e8, left: -1e8, right: 1e8 }
-            : visiblePixelRange(dom, this.paddingTop);
+        let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
         this.pixelViewport = pixelViewport;
         let inView = this.pixelViewport.bottom > this.pixelViewport.top && this.pixelViewport.right > this.pixelViewport.left;
@@ -4864,12 +4771,12 @@ class ViewState {
             result |= 8 /* Geometry */;
         }
         if (measureContent) {
-            let lineHeights = view.docView.measureVisibleLineHeights();
+            let lineHeights = view.docView.measureVisibleLineHeights(this.viewport);
             if (oracle.mustRefreshForHeights(lineHeights))
                 refresh = true;
             if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
                 let { lineHeight, charWidth } = view.docView.measureTextSize();
-                refresh = oracle.refresh(whiteSpace, direction, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
+                refresh = oracle.refresh(whiteSpace, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
                 if (refresh) {
                     view.docView.minWidth = 0;
                     result |= 8 /* Geometry */;
@@ -4880,7 +4787,10 @@ class ViewState {
             else if (dTop < 0 && dBottom < 0)
                 bias = Math.min(dTop, dBottom);
             oracle.heightChanged = false;
-            this.heightMap = this.heightMap.updateHeight(oracle, 0, refresh, new MeasuredHeights(this.viewport.from, lineHeights));
+            for (let vp of this.viewports) {
+                let heights = vp.from == this.viewport.from ? lineHeights : view.docView.measureVisibleLineHeights(vp);
+                this.heightMap = this.heightMap.updateHeight(oracle, 0, refresh, new MeasuredHeights(vp.from, heights));
+            }
             if (oracle.heightChanged)
                 result |= 2 /* Height */;
         }
@@ -4966,12 +4876,12 @@ class ViewState {
     ensureLineGaps(current) {
         let gaps = [];
         // This won't work at all in predominantly right-to-left text.
-        if (this.heightOracle.direction != Direction.LTR)
+        if (this.defaultTextDirection != Direction.LTR)
             return gaps;
         for (let line of this.viewportLines) {
             if (line.length < 4000 /* DoubleMargin */)
                 continue;
-            let structure = lineStructure(line.from, line.to, this.state);
+            let structure = lineStructure(line.from, line.to, this.stateDeco);
             if (structure.total < 4000 /* DoubleMargin */)
                 continue;
             let viewFrom, viewTo;
@@ -5022,7 +4932,7 @@ class ViewState {
         }
     }
     computeVisibleRanges() {
-        let deco = this.state.facet(decorations);
+        let deco = this.stateDeco;
         if (this.lineGaps.length)
             deco = deco.concat(this.lineGapDeco);
         let ranges = [];
@@ -5058,9 +4968,9 @@ class Viewport {
         this.to = to;
     }
 }
-function lineStructure(from, to, state) {
+function lineStructure(from, to, stateDeco) {
     let ranges = [], pos = from, total = 0;
-    RangeSet.spans(state.facet(decorations), from, to, {
+    RangeSet.spans(stateDeco, from, to, {
         span() { },
         point(from, to) {
             if (from > pos) {
@@ -5193,7 +5103,7 @@ function buildTheme(main, spec, scopes) {
         }
     });
 }
-const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
+const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     "&.cm-editor": {
         position: "relative !important",
         boxSizing: "border-box",
@@ -5298,6 +5208,65 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
     "&dark .cm-activeLine": { backgroundColor: "#223039" },
     "&light .cm-specialChar": { color: "red" },
     "&dark .cm-specialChar": { color: "#f78" },
+    ".cm-gutters": {
+        display: "flex",
+        height: "100%",
+        boxSizing: "border-box",
+        left: 0,
+        zIndex: 200
+    },
+    "&light .cm-gutters": {
+        backgroundColor: "#f5f5f5",
+        color: "#6c6c6c",
+        borderRight: "1px solid #ddd"
+    },
+    "&dark .cm-gutters": {
+        backgroundColor: "#333338",
+        color: "#ccc"
+    },
+    ".cm-gutter": {
+        display: "flex !important",
+        flexDirection: "column",
+        flexShrink: 0,
+        boxSizing: "border-box",
+        minHeight: "100%",
+        overflow: "hidden"
+    },
+    ".cm-gutterElement": {
+        boxSizing: "border-box"
+    },
+    ".cm-lineNumbers .cm-gutterElement": {
+        padding: "0 3px 0 5px",
+        minWidth: "20px",
+        textAlign: "right",
+        whiteSpace: "nowrap"
+    },
+    "&light .cm-activeLineGutter": {
+        backgroundColor: "#e2f2ff"
+    },
+    "&dark .cm-activeLineGutter": {
+        backgroundColor: "#222227"
+    },
+    ".cm-panels": {
+        boxSizing: "border-box",
+        position: "sticky",
+        left: 0,
+        right: 0
+    },
+    "&light .cm-panels": {
+        backgroundColor: "#f5f5f5",
+        color: "black"
+    },
+    "&light .cm-panels-top": {
+        borderBottom: "1px solid #ddd"
+    },
+    "&light .cm-panels-bottom": {
+        borderTop: "1px solid #ddd"
+    },
+    "&dark .cm-panels": {
+        backgroundColor: "#333338",
+        color: "white"
+    },
     ".cm-tab": {
         display: "inline-block",
         overflow: "hidden",
@@ -5423,6 +5392,7 @@ class DOMObserver {
             });
             this.resize.observe(view.scrollDOM);
         }
+        window.addEventListener("beforeprint", this.onPrint = this.onPrint.bind(this));
         this.start();
         window.addEventListener("scroll", this.onScroll = this.onScroll.bind(this));
         if (typeof IntersectionObserver == "function") {
@@ -5457,6 +5427,14 @@ class DOMObserver {
                 this.view.requestMeasure();
             }, 50);
     }
+    onPrint() {
+        this.view.viewState.printing = true;
+        this.view.measure();
+        setTimeout(() => {
+            this.view.viewState.printing = false;
+            this.view.requestMeasure();
+        }, 500);
+    }
     updateGaps(gaps) {
         if (this.gapIntersection && (gaps.length != this.gaps.length || this.gaps.some((g, i) => g != gaps[i]))) {
             this.gapIntersection.disconnect();
@@ -5674,6 +5652,7 @@ class DOMObserver {
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("resize", this.onResize);
+        window.removeEventListener("beforeprint", this.onPrint);
         this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
@@ -5745,7 +5724,7 @@ function applyDOMChange(view, start, end, typeOver) {
                 diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
                 diff.toB--;
             change = { from: from + diff.from, to: from + diff.toA,
-                insert: Text$1.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
+                insert: Text.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
         }
         newSel = selectionFromPoints(selPoints, from);
     }
@@ -5936,9 +5915,9 @@ transactions for editing actions.
 */
 class EditorView {
     /**
-    Construct a new view. You'll usually want to put `view.dom` into
-    your document after creating a view, so that the user can see
-    it.
+    Construct a new view. You'll want to either provide a `parent`
+    option, or put `view.dom` into your document after creating a
+    view, so that the user can see the editor.
     */
     constructor(
     /**
@@ -5989,6 +5968,7 @@ class EditorView {
                 this.measure();
         });
         this.inputState = new InputState(this);
+        this.inputState.ensureHandlers(this, this.plugins);
         this.docView = new DocView(this);
         this.mountStyles();
         this.updateAttrs();
@@ -6076,14 +6056,9 @@ class EditorView {
                     let { main } = tr.state.selection;
                     scrollTarget = new ScrollTarget(main.empty ? main : EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1));
                 }
-                for (let e of tr.effects) {
-                    if (e.is(scrollTo))
-                        scrollTarget = new ScrollTarget(e.value);
-                    else if (e.is(centerOn))
-                        scrollTarget = new ScrollTarget(e.value, "center");
-                    else if (e.is(scrollIntoView))
+                for (let e of tr.effects)
+                    if (e.is(scrollIntoView))
                         scrollTarget = e.value;
-                }
             }
             this.viewState.update(update, scrollTarget);
             this.bidiCache = CachedOrder.update(this.bidiCache, update.changes);
@@ -6134,7 +6109,7 @@ class EditorView {
             for (let plugin of this.plugins)
                 plugin.update(this);
             this.docView = new DocView(this);
-            this.inputState.ensureHandlers(this);
+            this.inputState.ensureHandlers(this, this.plugins);
             this.mountStyles();
             this.updateAttrs();
             this.bidiCache = [];
@@ -6166,7 +6141,7 @@ class EditorView {
                     plugin.destroy(this);
             this.plugins = newPlugins;
             this.pluginMap.clear();
-            this.inputState.ensureHandlers(this);
+            this.inputState.ensureHandlers(this, this.plugins);
         }
         else {
             for (let p of this.plugins)
@@ -6304,7 +6279,7 @@ class EditorView {
     }
     mountStyles() {
         this.styleModules = this.state.facet(styleModule);
-        StyleModule.mount(this.root, this.styleModules.concat(baseTheme).reverse());
+        StyleModule.mount(this.root, this.styleModules.concat(baseTheme$1).reverse());
     }
     readMeasured() {
         if (this.updateState == 2 /* Updating */)
@@ -6335,16 +6310,6 @@ class EditorView {
         }
     }
     /**
-    Collect all values provided by the active plugins for a given
-    field.
-    */
-    pluginField(field) {
-        let result = [];
-        for (let plugin of this.plugins)
-            plugin.update(this).takeField(field, result);
-        return result;
-    }
-    /**
     Get the value of a specific plugin, if present. Note that
     plugins that crash can be dropped from a view, so even when you
     know you registered a given plugin, it is recommended to check
@@ -6371,23 +6336,6 @@ class EditorView {
         return { top: this.viewState.paddingTop, bottom: this.viewState.paddingBottom };
     }
     /**
-    Find the line or block widget at the given vertical position.
-    
-    By default, this position is interpreted as a screen position,
-    meaning `docTop` is set to the DOM top position of the editor
-    content (forcing a layout). You can pass a different `docTop`
-    value—for example 0 to interpret `height` as a document-relative
-    position, or a precomputed document top
-    (`view.contentDOM.getBoundingClientRect().top`) to limit layout
-    queries.
-    
-    *Deprecated: use `elementAtHeight` instead.*
-    */
-    blockAtHeight(height, docTop) {
-        let top = ensureTop(docTop, this);
-        return this.elementAtHeight(height - top).moveY(top);
-    }
-    /**
     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)
@@ -6397,23 +6345,6 @@ class EditorView {
         return this.viewState.elementAtHeight(height);
     }
     /**
-    Find information for the visual line (see
-    [`visualLineAt`](https://codemirror.net/6/docs/ref/#view.EditorView.visualLineAt)) at the given
-    vertical position. The resulting block info might hold another
-    array of block info structs in its `type` field if this line
-    consists of more than one block.
-    
-    Defaults to treating `height` as a screen position. See
-    [`blockAtHeight`](https://codemirror.net/6/docs/ref/#view.EditorView.blockAtHeight) for the
-    interpretation of the `docTop` parameter.
-    
-    *Deprecated: use `lineBlockAtHeight` instead.*
-    */
-    visualLineAtHeight(height, docTop) {
-        let top = ensureTop(docTop, this);
-        return this.lineBlockAtHeight(height - top).moveY(top);
-    }
-    /**
     Find the line block (see
     [`lineBlockAt`](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) at the given
     height.
@@ -6423,19 +6354,6 @@ class EditorView {
         return this.viewState.lineBlockAtHeight(height);
     }
     /**
-    Iterate over the height information of the visual lines in the
-    viewport. The heights of lines are reported relative to the
-    given document top, which defaults to the screen position of the
-    document (forcing a layout).
-    
-    *Deprecated: use `viewportLineBlocks` instead.*
-    */
-    viewportLines(f, docTop) {
-        let top = ensureTop(docTop, this);
-        for (let line of this.viewportLineBlocks)
-            f(line.moveY(top));
-    }
-    /**
     Get the extent and vertical position of all [line
     blocks](https://codemirror.net/6/docs/ref/#view.EditorView.lineBlockAt) in the viewport. Positions
     are relative to the [top of the
@@ -6445,24 +6363,9 @@ class EditorView {
         return this.viewState.viewportLines;
     }
     /**
-    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
-    `view.contentDOM.getBoundingClientRect().top` here to get screen
-    coordinates.
-    
-    *Deprecated: use `lineBlockAt` instead.*
-    */
-    visualLineAt(pos, docTop = 0) {
-        return this.lineBlockAt(pos).moveY(docTop + this.viewState.paddingTop);
-    }
-    /**
     Find the line block around the given document position. A line
     block is a range delimited on both sides by either a
-    non-[hidden](https://codemirror.net/6/docs/ref/#view.Decoration^range) line breaks, or the
+    non-[hidden](https://codemirror.net/6/docs/ref/#view.Decoration^replace) line breaks, or the
     start/end of the document. It will usually just hold a line of
     text, but may be broken into multiple textblocks by block
     widgets.
@@ -6478,13 +6381,13 @@ class EditorView {
     }
     /**
     Move a cursor position by [grapheme
-    cluster](https://codemirror.net/6/docs/ref/#text.findClusterBreak). `forward` determines whether
-    the motion is away from the line start, or towards it. Motion in
-    bidirectional text is in visual order, in the editor's [text
-    direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection). When the start
-    position was the last one on the line, the returned position
-    will be across the line break. If there is no further line, the
-    original position is returned.
+    cluster](https://codemirror.net/6/docs/ref/#state.findClusterBreak). `forward` determines whether
+    the motion is away from the line start, or towards it. In
+    bidirectional text, the line is traversed in visual order, using
+    the editor's [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
+    When the start position was the last one on the line, the
+    returned position will be across the line break. If there is no
+    further line, the original position is returned.
     
     By default, this method moves over a single cluster. The
     optional `by` argument can be used to move across more. It will
@@ -6529,10 +6432,6 @@ class EditorView {
     moveVertically(start, forward, distance) {
         return skipAtoms(this, start, moveVertically(this, start, forward, distance));
     }
-    // FIXME remove on next major version
-    scrollPosIntoView(pos) {
-        this.dispatch({ effects: scrollTo.of(EditorSelection.cursor(pos)) });
-    }
     /**
     Find the DOM parent node and offset (child offset if `node` is
     an element, character offset when it is a text node) at the
@@ -6588,9 +6487,25 @@ class EditorView {
     /**
     The text direction
     ([`direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)
-    CSS property) of the editor.
+    CSS property) of the editor's content element.
+    */
+    get textDirection() { return this.viewState.defaultTextDirection; }
+    /**
+    Find the text direction of the block at the given position, as
+    assigned by CSS. If
+    [`perLineTextDirection`](https://codemirror.net/6/docs/ref/#view.EditorView^perLineTextDirection)
+    isn't enabled, or the given position is outside of the viewport,
+    this will always return the same as
+    [`textDirection`](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection). Note that
+    this may trigger a DOM layout.
     */
-    get textDirection() { return this.viewState.heightOracle.direction; }
+    textDirectionAt(pos) {
+        let perLine = this.state.facet(perLineTextDirection);
+        if (!perLine || pos < this.viewport.from || pos > this.viewport.to)
+            return this.textDirection;
+        this.readMeasured();
+        return this.docView.textDirectionAt(pos);
+    }
     /**
     Whether this editor [wraps lines](https://codemirror.net/6/docs/ref/#view.EditorView.lineWrapping)
     (as determined by the
@@ -6609,11 +6524,11 @@ class EditorView {
     bidiSpans(line) {
         if (line.length > MaxBidiLine)
             return trivialOrder(line.length);
-        let dir = this.textDirection;
+        let dir = this.textDirectionAt(line.from);
         for (let entry of this.bidiCache)
             if (entry.from == line.from && entry.dir == dir)
                 return entry.order;
-        let order = computeOrder(line.text, this.textDirection);
+        let order = computeOrder(line.text, dir);
         this.bidiCache.push(new CachedOrder(line.from, line.to, dir, order));
         return order;
     }
@@ -6664,16 +6579,16 @@ class EditorView {
         return scrollIntoView.of(new ScrollTarget(typeof pos == "number" ? EditorSelection.cursor(pos) : pos, options.y, options.x, options.yMargin, options.xMargin));
     }
     /**
-    Facet that can be used to add DOM event handlers. The value
-    should be an object mapping event names to handler functions. The
-    first such function to return true will be assumed to have handled
-    that event, and no other handlers or built-in behavior will be
-    activated for it.
-    These are registered on the [content
-    element](https://codemirror.net/6/docs/ref/#view.EditorView.contentDOM), except for `scroll`
-    handlers, which will be called any time the editor's [scroll
-    element](https://codemirror.net/6/docs/ref/#view.EditorView.scrollDOM) or one of its parent nodes
-    is scrolled.
+    Returns an extension that can be used to add DOM event handlers.
+    The value should be an object mapping event names to handler
+    functions. For any given event, such functions are ordered by
+    extension precedence, and the first handler to return true will
+    be assumed to have handled that event, and no other handlers or
+    built-in behavior will be activated for it. These are registered
+    on the [content element](https://codemirror.net/6/docs/ref/#view.EditorView.contentDOM), except
+    for `scroll` handlers, which will be called any time the
+    editor's [scroll element](https://codemirror.net/6/docs/ref/#view.EditorView.scrollDOM) or one of
+    its parent nodes is scrolled.
     */
     static domEventHandlers(handlers) {
         return ViewPlugin.define(() => ({}), { eventHandlers: handlers });
@@ -6715,20 +6630,6 @@ class EditorView {
     }
 }
 /**
-Effect that can be [added](https://codemirror.net/6/docs/ref/#state.TransactionSpec.effects) to a
-transaction to make it scroll the given range into view.
-
-*Deprecated*. Use [`scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView) instead.
-*/
-EditorView.scrollTo = scrollTo;
-/**
-Effect that makes the editor scroll the given range to the
-center of the visible view.
-
-*Deprecated*. Use [`scrollIntoView`](https://codemirror.net/6/docs/ref/#view.EditorView^scrollIntoView) instead.
-*/
-EditorView.centerOn = centerOn;
-/**
 Facet to add a [style
 module](https://github.com/marijnh/style-mod#documentation) to
 an editor view. The view will ensure that the module is
@@ -6745,6 +6646,13 @@ called and the default behavior is prevented.
 */
 EditorView.inputHandler = inputHandler;
 /**
+By default, the editor assumes all its content has the same
+[text direction](https://codemirror.net/6/docs/ref/#view.Direction). Configure this with a `true`
+value to make it read and store the text direction of every
+(rendered) line separately.
+*/
+EditorView.perLineTextDirection = perLineTextDirection;
+/**
 Allows you to provide a function that should be called when the
 library catches an exception from an extension (mostly from view
 plugins, but may be used by other extensions to route exceptions
@@ -6760,9 +6668,9 @@ EditorView.updateListener = updateListener;
 /**
 Facet that controls whether the editor content DOM is editable.
 When its highest-precedence value is `false`, the element will
-not longer have its `contenteditable` attribute set. (Note that
-this doesn't affect API calls that change the editor content,
-even when those are bound to keys or buttons. See the
+not have its `contenteditable` attribute set. (Note that this
+doesn't affect API calls that change the editor content, even
+when those are bound to keys or buttons. See the
 [`readOnly`](https://codemirror.net/6/docs/ref/#state.EditorState.readOnly) facet for that.)
 */
 EditorView.editable = editable;
@@ -6781,18 +6689,45 @@ the drag should move the content.
 */
 EditorView.dragMovesSelection = dragMovesSelection$1;
 /**
-Facet used to configure whether a given selecting click adds
-a new range to the existing selection or replaces it entirely.
+Facet used to configure whether a given selecting click adds a
+new range to the existing selection or replaces it entirely. The
+default behavior is to check `event.metaKey` on macOS, and
+`event.ctrlKey` elsewhere.
 */
 EditorView.clickAddsSelectionRange = clickAddsSelectionRange;
 /**
 A facet that determines which [decorations](https://codemirror.net/6/docs/ref/#view.Decoration)
-are shown in the view. See also [view
-plugins](https://codemirror.net/6/docs/ref/#view.EditorView^decorations), which have a separate
-mechanism for providing decorations.
+are shown in the view. Decorations can be provided in two
+ways—directly, or via a function that takes an editor view.
+
+Only decoration sets provided directly are allowed to influence
+the editor's vertical layout structure. The ones provided as
+functions are called _after_ the new viewport has been computed,
+and thus **must not** introduce block widgets or replacing
+decorations that cover line breaks.
 */
 EditorView.decorations = decorations;
 /**
+Used to provide ranges that should be treated as atoms as far as
+cursor motion is concerned. This causes methods like
+[`moveByChar`](https://codemirror.net/6/docs/ref/#view.EditorView.moveByChar) and
+[`moveVertically`](https://codemirror.net/6/docs/ref/#view.EditorView.moveVertically) (and the
+commands built on top of them) to skip across such regions when
+a selection endpoint would enter them. This does _not_ prevent
+direct programmatic [selection
+updates](https://codemirror.net/6/docs/ref/#state.TransactionSpec.selection) from moving into such
+regions.
+*/
+EditorView.atomicRanges = atomicRanges;
+/**
+Facet that allows extensions to provide additional scroll
+margins (space around the sides of the scrolling element that
+should be considered invisible). This can be useful when the
+plugin introduces elements that cover part of that element (for
+example a horizontally fixed gutter).
+*/
+EditorView.scrollMargins = scrollMargins;
+/**
 This facet records whether a dark theme is active. The extension
 returned by [`theme`](https://codemirror.net/6/docs/ref/#view.EditorView^theme) automatically
 includes an instance of this when the `dark` option is set to
@@ -6825,10 +6760,6 @@ search match).
 EditorView.announce = /*@__PURE__*/StateEffect.define();
 // Maximum line length for which we compute accurate bidi info
 const MaxBidiLine = 4096;
-// FIXME remove this and its callers on next breaking release
-function ensureTop(given, view) {
-    return (given == null ? view.contentDOM.getBoundingClientRect().top : given) + view.viewState.paddingTop;
-}
 const BadMeasure = {};
 class CachedOrder {
     constructor(from, to, dir, order) {
@@ -6931,7 +6862,7 @@ function getKeymap(state) {
 }
 /**
 Run the key handlers registered for a given scope. The event
-object should be `"keydown"` event. Returns true if any of the
+object should be a `"keydown"` event. Returns true if any of the
 handlers handled it.
 */
 function runScopeHandlers(view, event, scope) {
@@ -7708,9 +7639,1297 @@ function placeholder(content) {
     }, { decorations: v => v.decorations });
 }
 
+// Don't compute precise column positions for line offsets above this
+// (since it could get expensive). Assume offset==column for them.
+const MaxOff = 2000;
+function rectangleFor(state, a, b) {
+    let startLine = Math.min(a.line, b.line), endLine = Math.max(a.line, b.line);
+    let ranges = [];
+    if (a.off > MaxOff || b.off > MaxOff || a.col < 0 || b.col < 0) {
+        let startOff = Math.min(a.off, b.off), endOff = Math.max(a.off, b.off);
+        for (let i = startLine; i <= endLine; i++) {
+            let line = state.doc.line(i);
+            if (line.length <= endOff)
+                ranges.push(EditorSelection.range(line.from + startOff, line.to + endOff));
+        }
+    }
+    else {
+        let startCol = Math.min(a.col, b.col), endCol = Math.max(a.col, b.col);
+        for (let i = startLine; i <= endLine; i++) {
+            let line = state.doc.line(i);
+            let start = findColumn(line.text, startCol, state.tabSize, true);
+            if (start > -1) {
+                let end = findColumn(line.text, endCol, state.tabSize);
+                ranges.push(EditorSelection.range(line.from + start, line.from + end));
+            }
+        }
+    }
+    return ranges;
+}
+function absoluteColumn(view, x) {
+    let ref = view.coordsAtPos(view.viewport.from);
+    return ref ? Math.round(Math.abs((ref.left - x) / view.defaultCharacterWidth)) : -1;
+}
+function getPos(view, event) {
+    let offset = view.posAtCoords({ x: event.clientX, y: event.clientY }, false);
+    let line = view.state.doc.lineAt(offset), off = offset - line.from;
+    let col = off > MaxOff ? -1
+        : off == line.length ? absoluteColumn(view, event.clientX)
+            : countColumn(line.text, view.state.tabSize, offset - line.from);
+    return { line: line.number, col, off };
+}
+function rectangleSelectionStyle(view, event) {
+    let start = getPos(view, event), startSel = view.state.selection;
+    if (!start)
+        return null;
+    return {
+        update(update) {
+            if (update.docChanged) {
+                let newStart = update.changes.mapPos(update.startState.doc.line(start.line).from);
+                let newLine = update.state.doc.lineAt(newStart);
+                start = { line: newLine.number, col: start.col, off: Math.min(start.off, newLine.length) };
+                startSel = startSel.map(update.changes);
+            }
+        },
+        get(event, _extend, multiple) {
+            let cur = getPos(view, event);
+            if (!cur)
+                return startSel;
+            let ranges = rectangleFor(view.state, start, cur);
+            if (!ranges.length)
+                return startSel;
+            if (multiple)
+                return EditorSelection.create(ranges.concat(startSel.ranges));
+            else
+                return EditorSelection.create(ranges);
+        }
+    };
+}
+/**
+Create an extension that enables rectangular selections. By
+default, it will react to left mouse drag with the Alt key held
+down. When such a selection occurs, the text within the rectangle
+that was dragged over will be selected, as one selection
+[range](https://codemirror.net/6/docs/ref/#state.SelectionRange) per line.
+*/
+function rectangularSelection(options) {
+    let filter = (options === null || options === void 0 ? void 0 : options.eventFilter) || (e => e.altKey && e.button == 0);
+    return EditorView.mouseSelectionStyle.of((view, event) => filter(event) ? rectangleSelectionStyle(view, event) : null);
+}
+const keys = {
+    Alt: [18, e => e.altKey],
+    Control: [17, e => e.ctrlKey],
+    Shift: [16, e => e.shiftKey],
+    Meta: [91, e => e.metaKey]
+};
+const showCrosshair = { style: "cursor: crosshair" };
+/**
+Returns an extension that turns the pointer cursor into a
+crosshair when a given modifier key, defaulting to Alt, is held
+down. Can serve as a visual hint that rectangular selection is
+going to happen when paired with
+[`rectangularSelection`](https://codemirror.net/6/docs/ref/#view.rectangularSelection).
+*/
+function crosshairCursor(options = {}) {
+    let [code, getter] = keys[options.key || "Alt"];
+    let plugin = ViewPlugin.fromClass(class {
+        constructor(view) {
+            this.view = view;
+            this.isDown = false;
+        }
+        set(isDown) {
+            if (this.isDown != isDown) {
+                this.isDown = isDown;
+                this.view.update([]);
+            }
+        }
+    }, {
+        eventHandlers: {
+            keydown(e) {
+                this.set(e.keyCode == code || getter(e));
+            },
+            keyup(e) {
+                if (e.keyCode == code || !getter(e))
+                    this.set(false);
+            }
+        }
+    });
+    return [
+        plugin,
+        EditorView.contentAttributes.of(view => { var _a; return ((_a = view.plugin(plugin)) === null || _a === void 0 ? void 0 : _a.isDown) ? showCrosshair : null; })
+    ];
+}
+
+const Outside = "-10000px";
+class TooltipViewManager {
+    constructor(view, facet, createTooltipView) {
+        this.facet = facet;
+        this.createTooltipView = createTooltipView;
+        this.input = view.state.facet(facet);
+        this.tooltips = this.input.filter(t => t);
+        this.tooltipViews = this.tooltips.map(createTooltipView);
+    }
+    update(update) {
+        let input = update.state.facet(this.facet);
+        let tooltips = input.filter(x => x);
+        if (input === this.input) {
+            for (let t of this.tooltipViews)
+                if (t.update)
+                    t.update(update);
+            return false;
+        }
+        let tooltipViews = [];
+        for (let i = 0; i < tooltips.length; i++) {
+            let tip = tooltips[i], known = -1;
+            if (!tip)
+                continue;
+            for (let i = 0; i < this.tooltips.length; i++) {
+                let other = this.tooltips[i];
+                if (other && other.create == tip.create)
+                    known = i;
+            }
+            if (known < 0) {
+                tooltipViews[i] = this.createTooltipView(tip);
+            }
+            else {
+                let tooltipView = tooltipViews[i] = this.tooltipViews[known];
+                if (tooltipView.update)
+                    tooltipView.update(update);
+            }
+        }
+        for (let t of this.tooltipViews)
+            if (tooltipViews.indexOf(t) < 0)
+                t.dom.remove();
+        this.input = input;
+        this.tooltips = tooltips;
+        this.tooltipViews = tooltipViews;
+        return true;
+    }
+}
+/**
+Creates an extension that configures tooltip behavior.
+*/
+function tooltips(config = {}) {
+    return tooltipConfig.of(config);
+}
+function windowSpace() {
+    return { top: 0, left: 0, bottom: innerHeight, right: innerWidth };
+}
+const tooltipConfig = /*@__PURE__*/Facet.define({
+    combine: values => {
+        var _a, _b, _c;
+        return ({
+            position: browser.ios ? "absolute" : ((_a = values.find(conf => conf.position)) === null || _a === void 0 ? void 0 : _a.position) || "fixed",
+            parent: ((_b = values.find(conf => conf.parent)) === null || _b === void 0 ? void 0 : _b.parent) || null,
+            tooltipSpace: ((_c = values.find(conf => conf.tooltipSpace)) === null || _c === void 0 ? void 0 : _c.tooltipSpace) || windowSpace,
+        });
+    }
+});
+const tooltipPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
+    constructor(view) {
+        var _a;
+        this.view = view;
+        this.inView = true;
+        this.lastTransaction = 0;
+        this.measureTimeout = -1;
+        let config = view.state.facet(tooltipConfig);
+        this.position = config.position;
+        this.parent = config.parent;
+        this.classes = view.themeClasses;
+        this.createContainer();
+        this.measureReq = { read: this.readMeasure.bind(this), write: this.writeMeasure.bind(this), key: this };
+        this.manager = new TooltipViewManager(view, showTooltip, t => this.createTooltip(t));
+        this.intersectionObserver = typeof IntersectionObserver == "function" ? new IntersectionObserver(entries => {
+            if (Date.now() > this.lastTransaction - 50 &&
+                entries.length > 0 && entries[entries.length - 1].intersectionRatio < 1)
+                this.measureSoon();
+        }, { threshold: [1] }) : null;
+        this.observeIntersection();
+        (_a = view.dom.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.addEventListener("resize", this.measureSoon = this.measureSoon.bind(this));
+        this.maybeMeasure();
+    }
+    createContainer() {
+        if (this.parent) {
+            this.container = document.createElement("div");
+            this.container.style.position = "relative";
+            this.container.className = this.view.themeClasses;
+            this.parent.appendChild(this.container);
+        }
+        else {
+            this.container = this.view.dom;
+        }
+    }
+    observeIntersection() {
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            for (let tooltip of this.manager.tooltipViews)
+                this.intersectionObserver.observe(tooltip.dom);
+        }
+    }
+    measureSoon() {
+        if (this.measureTimeout < 0)
+            this.measureTimeout = setTimeout(() => {
+                this.measureTimeout = -1;
+                this.maybeMeasure();
+            }, 50);
+    }
+    update(update) {
+        if (update.transactions.length)
+            this.lastTransaction = Date.now();
+        let updated = this.manager.update(update);
+        if (updated)
+            this.observeIntersection();
+        let shouldMeasure = updated || update.geometryChanged;
+        let newConfig = update.state.facet(tooltipConfig);
+        if (newConfig.position != this.position) {
+            this.position = newConfig.position;
+            for (let t of this.manager.tooltipViews)
+                t.dom.style.position = this.position;
+            shouldMeasure = true;
+        }
+        if (newConfig.parent != this.parent) {
+            if (this.parent)
+                this.container.remove();
+            this.parent = newConfig.parent;
+            this.createContainer();
+            for (let t of this.manager.tooltipViews)
+                this.container.appendChild(t.dom);
+            shouldMeasure = true;
+        }
+        else if (this.parent && this.view.themeClasses != this.classes) {
+            this.classes = this.container.className = this.view.themeClasses;
+        }
+        if (shouldMeasure)
+            this.maybeMeasure();
+    }
+    createTooltip(tooltip) {
+        let tooltipView = tooltip.create(this.view);
+        tooltipView.dom.classList.add("cm-tooltip");
+        if (tooltip.arrow && !tooltipView.dom.querySelector(".cm-tooltip > .cm-tooltip-arrow")) {
+            let arrow = document.createElement("div");
+            arrow.className = "cm-tooltip-arrow";
+            tooltipView.dom.appendChild(arrow);
+        }
+        tooltipView.dom.style.position = this.position;
+        tooltipView.dom.style.top = Outside;
+        this.container.appendChild(tooltipView.dom);
+        if (tooltipView.mount)
+            tooltipView.mount(this.view);
+        return tooltipView;
+    }
+    destroy() {
+        var _a, _b;
+        (_a = this.view.dom.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.removeEventListener("resize", this.measureSoon);
+        for (let { dom } of this.manager.tooltipViews)
+            dom.remove();
+        (_b = this.intersectionObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        clearTimeout(this.measureTimeout);
+    }
+    readMeasure() {
+        let editor = this.view.dom.getBoundingClientRect();
+        return {
+            editor,
+            parent: this.parent ? this.container.getBoundingClientRect() : editor,
+            pos: this.manager.tooltips.map((t, i) => {
+                let tv = this.manager.tooltipViews[i];
+                return tv.getCoords ? tv.getCoords(t.pos) : this.view.coordsAtPos(t.pos);
+            }),
+            size: this.manager.tooltipViews.map(({ dom }) => dom.getBoundingClientRect()),
+            space: this.view.state.facet(tooltipConfig).tooltipSpace(this.view),
+        };
+    }
+    writeMeasure(measured) {
+        let { editor, space } = 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;
+            let pos = measured.pos[i], size = measured.size[i];
+            // Hide tooltips that are outside of the editor.
+            if (!pos || pos.bottom <= Math.max(editor.top, space.top) ||
+                pos.top >= Math.min(editor.bottom, space.bottom) ||
+                pos.right < Math.max(editor.left, space.left) - .1 ||
+                pos.left > Math.min(editor.right, space.right) + .1) {
+                dom.style.top = Outside;
+                continue;
+            }
+            let arrow = tooltip.arrow ? tView.dom.querySelector(".cm-tooltip-arrow") : null;
+            let arrowHeight = arrow ? 7 /* Size */ : 0;
+            let width = size.right - size.left, height = size.bottom - size.top;
+            let offset = tView.offset || noOffset, ltr = this.view.textDirection == Direction.LTR;
+            let left = size.width > space.right - space.left ? (ltr ? space.left : space.right - size.width)
+                : ltr ? Math.min(pos.left - (arrow ? 14 /* Offset */ : 0) + offset.x, space.right - width)
+                    : Math.max(space.left, pos.left - width + (arrow ? 14 /* Offset */ : 0) - offset.x);
+            let above = !!tooltip.above;
+            if (!tooltip.strictSide && (above
+                ? pos.top - (size.bottom - size.top) - offset.y < space.top
+                : pos.bottom + (size.bottom - size.top) + offset.y > space.bottom) &&
+                above == (space.bottom - pos.bottom > pos.top - space.top))
+                above = !above;
+            let top = above ? pos.top - height - arrowHeight - offset.y : pos.bottom + arrowHeight + offset.y;
+            let right = left + width;
+            if (tView.overlap !== true)
+                for (let r of others)
+                    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";
+            }
+            else {
+                dom.style.top = top + "px";
+                dom.style.left = left + "px";
+            }
+            if (arrow)
+                arrow.style.left = `${pos.left + (ltr ? offset.x : -offset.x) - (left + 14 /* Offset */ - 7 /* Size */)}px`;
+            if (tView.overlap !== true)
+                others.push({ left, top, right, bottom: top + height });
+            dom.classList.toggle("cm-tooltip-above", above);
+            dom.classList.toggle("cm-tooltip-below", !above);
+            if (tView.positioned)
+                tView.positioned();
+        }
+    }
+    maybeMeasure() {
+        if (this.manager.tooltips.length) {
+            if (this.view.inView)
+                this.view.requestMeasure(this.measureReq);
+            if (this.inView != this.view.inView) {
+                this.inView = this.view.inView;
+                if (!this.inView)
+                    for (let tv of this.manager.tooltipViews)
+                        tv.dom.style.top = Outside;
+            }
+        }
+    }
+}, {
+    eventHandlers: {
+        scroll() { this.maybeMeasure(); }
+    }
+});
+const baseTheme = /*@__PURE__*/EditorView.baseTheme({
+    ".cm-tooltip": {
+        zIndex: 100
+    },
+    "&light .cm-tooltip": {
+        border: "1px solid #bbb",
+        backgroundColor: "#f5f5f5"
+    },
+    "&light .cm-tooltip-section:not(:first-child)": {
+        borderTop: "1px solid #bbb",
+    },
+    "&dark .cm-tooltip": {
+        backgroundColor: "#333338",
+        color: "white"
+    },
+    ".cm-tooltip-arrow": {
+        height: `${7 /* Size */}px`,
+        width: `${7 /* Size */ * 2}px`,
+        position: "absolute",
+        zIndex: -1,
+        overflow: "hidden",
+        "&:before, &:after": {
+            content: "''",
+            position: "absolute",
+            width: 0,
+            height: 0,
+            borderLeft: `${7 /* Size */}px solid transparent`,
+            borderRight: `${7 /* Size */}px solid transparent`,
+        },
+        ".cm-tooltip-above &": {
+            bottom: `-${7 /* Size */}px`,
+            "&:before": {
+                borderTop: `${7 /* Size */}px solid #bbb`,
+            },
+            "&:after": {
+                borderTop: `${7 /* Size */}px solid #f5f5f5`,
+                bottom: "1px"
+            }
+        },
+        ".cm-tooltip-below &": {
+            top: `-${7 /* Size */}px`,
+            "&:before": {
+                borderBottom: `${7 /* Size */}px solid #bbb`,
+            },
+            "&:after": {
+                borderBottom: `${7 /* Size */}px solid #f5f5f5`,
+                top: "1px"
+            }
+        },
+    },
+    "&dark .cm-tooltip .cm-tooltip-arrow": {
+        "&:before": {
+            borderTopColor: "#333338",
+            borderBottomColor: "#333338"
+        },
+        "&:after": {
+            borderTopColor: "transparent",
+            borderBottomColor: "transparent"
+        }
+    }
+});
+const noOffset = { x: 0, y: 0 };
+/**
+Facet to which an extension can add a value to show a tooltip.
+*/
+const showTooltip = /*@__PURE__*/Facet.define({
+    enables: [tooltipPlugin, baseTheme]
+});
+const showHoverTooltip = /*@__PURE__*/Facet.define();
+class HoverTooltipHost {
+    constructor(view) {
+        this.view = view;
+        this.mounted = false;
+        this.dom = document.createElement("div");
+        this.dom.classList.add("cm-tooltip-hover");
+        this.manager = new TooltipViewManager(view, showHoverTooltip, t => this.createHostedView(t));
+    }
+    // Needs to be static so that host tooltip instances always match
+    static create(view) {
+        return new HoverTooltipHost(view);
+    }
+    createHostedView(tooltip) {
+        let hostedView = tooltip.create(this.view);
+        hostedView.dom.classList.add("cm-tooltip-section");
+        this.dom.appendChild(hostedView.dom);
+        if (this.mounted && hostedView.mount)
+            hostedView.mount(this.view);
+        return hostedView;
+    }
+    mount(view) {
+        for (let hostedView of this.manager.tooltipViews) {
+            if (hostedView.mount)
+                hostedView.mount(view);
+        }
+        this.mounted = true;
+    }
+    positioned() {
+        for (let hostedView of this.manager.tooltipViews) {
+            if (hostedView.positioned)
+                hostedView.positioned();
+        }
+    }
+    update(update) {
+        this.manager.update(update);
+    }
+}
+const showHoverTooltipHost = /*@__PURE__*/showTooltip.compute([showHoverTooltip], state => {
+    let tooltips = state.facet(showHoverTooltip).filter(t => t);
+    if (tooltips.length === 0)
+        return null;
+    return {
+        pos: Math.min(...tooltips.map(t => t.pos)),
+        end: Math.max(...tooltips.filter(t => t.end != null).map(t => t.end)),
+        create: HoverTooltipHost.create,
+        above: tooltips[0].above,
+        arrow: tooltips.some(t => t.arrow),
+    };
+});
+class HoverPlugin {
+    constructor(view, source, field, setHover, hoverTime) {
+        this.view = view;
+        this.source = source;
+        this.field = field;
+        this.setHover = setHover;
+        this.hoverTime = hoverTime;
+        this.hoverTimeout = -1;
+        this.restartTimeout = -1;
+        this.pending = null;
+        this.lastMove = { x: 0, y: 0, target: view.dom, time: 0 };
+        this.checkHover = this.checkHover.bind(this);
+        view.dom.addEventListener("mouseleave", this.mouseleave = this.mouseleave.bind(this));
+        view.dom.addEventListener("mousemove", this.mousemove = this.mousemove.bind(this));
+    }
+    update() {
+        if (this.pending) {
+            this.pending = null;
+            clearTimeout(this.restartTimeout);
+            this.restartTimeout = setTimeout(() => this.startHover(), 20);
+        }
+    }
+    get active() {
+        return this.view.state.field(this.field);
+    }
+    checkHover() {
+        this.hoverTimeout = -1;
+        if (this.active)
+            return;
+        let hovered = Date.now() - this.lastMove.time;
+        if (hovered < this.hoverTime)
+            this.hoverTimeout = setTimeout(this.checkHover, this.hoverTime - hovered);
+        else
+            this.startHover();
+    }
+    startHover() {
+        var _a;
+        clearTimeout(this.restartTimeout);
+        let { lastMove } = this;
+        let pos = this.view.contentDOM.contains(lastMove.target) ? this.view.posAtCoords(lastMove) : null;
+        if (pos == null)
+            return;
+        let posCoords = this.view.coordsAtPos(pos);
+        if (posCoords == null || lastMove.y < posCoords.top || lastMove.y > posCoords.bottom ||
+            lastMove.x < posCoords.left - this.view.defaultCharacterWidth ||
+            lastMove.x > posCoords.right + this.view.defaultCharacterWidth)
+            return;
+        let bidi = this.view.bidiSpans(this.view.state.doc.lineAt(pos)).find(s => s.from <= pos && s.to >= pos);
+        let rtl = bidi && bidi.dir == Direction.RTL ? -1 : 1;
+        let open = this.source(this.view, pos, (lastMove.x < posCoords.left ? -rtl : rtl));
+        if ((_a = open) === null || _a === void 0 ? void 0 : _a.then) {
+            let pending = this.pending = { pos };
+            open.then(result => {
+                if (this.pending == pending) {
+                    this.pending = null;
+                    if (result)
+                        this.view.dispatch({ effects: this.setHover.of(result) });
+                }
+            }, e => logException(this.view.state, e, "hover tooltip"));
+        }
+        else if (open) {
+            this.view.dispatch({ effects: this.setHover.of(open) });
+        }
+    }
+    mousemove(event) {
+        var _a;
+        this.lastMove = { x: event.clientX, y: event.clientY, target: event.target, time: Date.now() };
+        if (this.hoverTimeout < 0)
+            this.hoverTimeout = setTimeout(this.checkHover, this.hoverTime);
+        let tooltip = this.active;
+        if (tooltip && !isInTooltip(this.lastMove.target) || this.pending) {
+            let { pos } = tooltip || this.pending, end = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.end) !== null && _a !== void 0 ? _a : pos;
+            if ((pos == end ? this.view.posAtCoords(this.lastMove) != pos
+                : !isOverRange(this.view, pos, end, event.clientX, event.clientY, 6 /* MaxDist */))) {
+                this.view.dispatch({ effects: this.setHover.of(null) });
+                this.pending = null;
+            }
+        }
+    }
+    mouseleave() {
+        clearTimeout(this.hoverTimeout);
+        this.hoverTimeout = -1;
+        if (this.active)
+            this.view.dispatch({ effects: this.setHover.of(null) });
+    }
+    destroy() {
+        clearTimeout(this.hoverTimeout);
+        this.view.dom.removeEventListener("mouseleave", this.mouseleave);
+        this.view.dom.removeEventListener("mousemove", this.mousemove);
+    }
+}
+function isInTooltip(elt) {
+    for (let cur = elt; cur; cur = cur.parentNode)
+        if (cur.nodeType == 1 && cur.classList.contains("cm-tooltip"))
+            return true;
+    return false;
+}
+function isOverRange(view, from, to, x, y, margin) {
+    let range = document.createRange();
+    let fromDOM = view.domAtPos(from), toDOM = view.domAtPos(to);
+    range.setEnd(toDOM.node, toDOM.offset);
+    range.setStart(fromDOM.node, fromDOM.offset);
+    let rects = range.getClientRects();
+    range.detach();
+    for (let i = 0; i < rects.length; i++) {
+        let rect = rects[i];
+        let dist = Math.max(rect.top - y, y - rect.bottom, rect.left - x, x - rect.right);
+        if (dist <= margin)
+            return true;
+    }
+    return false;
+}
+/**
+Set up a hover tooltip, which shows up when the pointer hovers
+over ranges of text. The callback is called when the mouse hovers
+over the document text. It should, if there is a tooltip
+associated with position `pos`, return the tooltip description
+(either directly or in a promise). The `side` argument indicates
+on which side of the position the pointer is—it will be -1 if the
+pointer is before the position, 1 if after the position.
+
+Note that all hover tooltips are hosted within a single tooltip
+container element. This allows multiple tooltips over the same
+range to be "merged" together without overlapping.
+*/
+function hoverTooltip(source, options = {}) {
+    let setHover = StateEffect.define();
+    let hoverState = StateField.define({
+        create() { return null; },
+        update(value, tr) {
+            if (value && (options.hideOnChange && (tr.docChanged || tr.selection)))
+                return null;
+            if (value && tr.docChanged) {
+                let newPos = tr.changes.mapPos(value.pos, -1, MapMode.TrackDel);
+                if (newPos == null)
+                    return null;
+                let copy = Object.assign(Object.create(null), value);
+                copy.pos = newPos;
+                if (value.end != null)
+                    copy.end = tr.changes.mapPos(value.end);
+                value = copy;
+            }
+            for (let effect of tr.effects) {
+                if (effect.is(setHover))
+                    value = effect.value;
+                if (effect.is(closeHoverTooltipEffect))
+                    value = null;
+            }
+            return value;
+        },
+        provide: f => showHoverTooltip.from(f)
+    });
+    return [
+        hoverState,
+        ViewPlugin.define(view => new HoverPlugin(view, source, hoverState, setHover, options.hoverTime || 300 /* Time */)),
+        showHoverTooltipHost
+    ];
+}
+/**
+Get the active tooltip view for a given tooltip, if available.
+*/
+function getTooltip(view, tooltip) {
+    let plugin = view.plugin(tooltipPlugin);
+    if (!plugin)
+        return null;
+    let found = plugin.manager.tooltips.indexOf(tooltip);
+    return found < 0 ? null : plugin.manager.tooltipViews[found];
+}
+/**
+Returns true if any hover tooltips are currently active.
+*/
+function hasHoverTooltips(state) {
+    return state.facet(showHoverTooltip).some(x => x);
+}
+const closeHoverTooltipEffect = /*@__PURE__*/StateEffect.define();
+/**
+Transaction effect that closes all hover tooltips.
+*/
+const closeHoverTooltips = /*@__PURE__*/closeHoverTooltipEffect.of(null);
+/**
+Tell the tooltip extension to recompute the position of the active
+tooltips. This can be useful when something happens (such as a
+re-positioning or CSS change affecting the editor) that could
+invalidate the existing tooltip positions.
+*/
+function repositionTooltips(view) {
+    var _a;
+    (_a = view.plugin(tooltipPlugin)) === null || _a === void 0 ? void 0 : _a.maybeMeasure();
+}
+
+const panelConfig = /*@__PURE__*/Facet.define({
+    combine(configs) {
+        let topContainer, bottomContainer;
+        for (let c of configs) {
+            topContainer = topContainer || c.topContainer;
+            bottomContainer = bottomContainer || c.bottomContainer;
+        }
+        return { topContainer, bottomContainer };
+    }
+});
+/**
+Configures the panel-managing extension.
+*/
+function panels(config) {
+    return config ? [panelConfig.of(config)] : [];
+}
+/**
+Get the active panel created by the given constructor, if any.
+This can be useful when you need access to your panels' DOM
+structure.
+*/
+function getPanel(view, panel) {
+    let plugin = view.plugin(panelPlugin);
+    let index = plugin ? plugin.specs.indexOf(panel) : -1;
+    return index > -1 ? plugin.panels[index] : null;
+}
+const panelPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.input = view.state.facet(showPanel);
+        this.specs = this.input.filter(s => s);
+        this.panels = this.specs.map(spec => spec(view));
+        let conf = view.state.facet(panelConfig);
+        this.top = new PanelGroup(view, true, conf.topContainer);
+        this.bottom = new PanelGroup(view, false, conf.bottomContainer);
+        this.top.sync(this.panels.filter(p => p.top));
+        this.bottom.sync(this.panels.filter(p => !p.top));
+        for (let p of this.panels) {
+            p.dom.classList.add("cm-panel");
+            if (p.mount)
+                p.mount();
+        }
+    }
+    update(update) {
+        let conf = update.state.facet(panelConfig);
+        if (this.top.container != conf.topContainer) {
+            this.top.sync([]);
+            this.top = new PanelGroup(update.view, true, conf.topContainer);
+        }
+        if (this.bottom.container != conf.bottomContainer) {
+            this.bottom.sync([]);
+            this.bottom = new PanelGroup(update.view, false, conf.bottomContainer);
+        }
+        this.top.syncClasses();
+        this.bottom.syncClasses();
+        let input = update.state.facet(showPanel);
+        if (input != this.input) {
+            let specs = input.filter(x => x);
+            let panels = [], top = [], bottom = [], mount = [];
+            for (let spec of specs) {
+                let known = this.specs.indexOf(spec), panel;
+                if (known < 0) {
+                    panel = spec(update.view);
+                    mount.push(panel);
+                }
+                else {
+                    panel = this.panels[known];
+                    if (panel.update)
+                        panel.update(update);
+                }
+                panels.push(panel);
+                (panel.top ? top : bottom).push(panel);
+            }
+            this.specs = specs;
+            this.panels = panels;
+            this.top.sync(top);
+            this.bottom.sync(bottom);
+            for (let p of mount) {
+                p.dom.classList.add("cm-panel");
+                if (p.mount)
+                    p.mount();
+            }
+        }
+        else {
+            for (let p of this.panels)
+                if (p.update)
+                    p.update(update);
+        }
+    }
+    destroy() {
+        this.top.sync([]);
+        this.bottom.sync([]);
+    }
+}, {
+    provide: plugin => EditorView.scrollMargins.of(view => {
+        let value = view.plugin(plugin);
+        return value && { top: value.top.scrollMargin(), bottom: value.bottom.scrollMargin() };
+    })
+});
+class PanelGroup {
+    constructor(view, top, container) {
+        this.view = view;
+        this.top = top;
+        this.container = container;
+        this.dom = undefined;
+        this.classes = "";
+        this.panels = [];
+        this.syncClasses();
+    }
+    sync(panels) {
+        for (let p of this.panels)
+            if (p.destroy && panels.indexOf(p) < 0)
+                p.destroy();
+        this.panels = panels;
+        this.syncDOM();
+    }
+    syncDOM() {
+        if (this.panels.length == 0) {
+            if (this.dom) {
+                this.dom.remove();
+                this.dom = undefined;
+            }
+            return;
+        }
+        if (!this.dom) {
+            this.dom = document.createElement("div");
+            this.dom.className = this.top ? "cm-panels cm-panels-top" : "cm-panels cm-panels-bottom";
+            this.dom.style[this.top ? "top" : "bottom"] = "0";
+            let parent = this.container || this.view.dom;
+            parent.insertBefore(this.dom, this.top ? parent.firstChild : null);
+        }
+        let curDOM = this.dom.firstChild;
+        for (let panel of this.panels) {
+            if (panel.dom.parentNode == this.dom) {
+                while (curDOM != panel.dom)
+                    curDOM = rm(curDOM);
+                curDOM = curDOM.nextSibling;
+            }
+            else {
+                this.dom.insertBefore(panel.dom, curDOM);
+            }
+        }
+        while (curDOM)
+            curDOM = rm(curDOM);
+    }
+    scrollMargin() {
+        return !this.dom || this.container ? 0
+            : Math.max(0, this.top ?
+                this.dom.getBoundingClientRect().bottom - Math.max(0, this.view.scrollDOM.getBoundingClientRect().top) :
+                Math.min(innerHeight, this.view.scrollDOM.getBoundingClientRect().bottom) - this.dom.getBoundingClientRect().top);
+    }
+    syncClasses() {
+        if (!this.container || this.classes == this.view.themeClasses)
+            return;
+        for (let cls of this.classes.split(" "))
+            if (cls)
+                this.container.classList.remove(cls);
+        for (let cls of (this.classes = this.view.themeClasses).split(" "))
+            if (cls)
+                this.container.classList.add(cls);
+    }
+}
+function rm(node) {
+    let next = node.nextSibling;
+    node.remove();
+    return next;
+}
+/**
+Opening a panel is done by providing a constructor function for
+the panel through this facet. (The panel is closed again when its
+constructor is no longer provided.) Values of `null` are ignored.
+*/
+const showPanel = /*@__PURE__*/Facet.define({
+    enables: panelPlugin
+});
+
+/**
+A gutter marker represents a bit of information attached to a line
+in a specific gutter. Your own custom markers have to extend this
+class.
+*/
+class GutterMarker extends RangeValue {
+    /**
+    @internal
+    */
+    compare(other) {
+        return this == other || this.constructor == other.constructor && this.eq(other);
+    }
+    /**
+    Compare this marker to another marker of the same type.
+    */
+    eq(other) { return false; }
+    /**
+    Called if the marker has a `toDOM` method and its representation
+    was removed from a gutter.
+    */
+    destroy(dom) { }
+}
+GutterMarker.prototype.elementClass = "";
+GutterMarker.prototype.toDOM = undefined;
+GutterMarker.prototype.mapMode = MapMode.TrackBefore;
+GutterMarker.prototype.startSide = GutterMarker.prototype.endSide = -1;
+GutterMarker.prototype.point = true;
+/**
+Facet used to add a class to all gutter elements for a given line.
+Markers given to this facet should _only_ define an
+[`elementclass`](https://codemirror.net/6/docs/ref/#view.GutterMarker.elementClass), not a
+[`toDOM`](https://codemirror.net/6/docs/ref/#view.GutterMarker.toDOM) (or the marker will appear
+in all gutters for the line).
+*/
+const gutterLineClass = /*@__PURE__*/Facet.define();
+const defaults = {
+    class: "",
+    renderEmptyElements: false,
+    elementStyle: "",
+    markers: () => RangeSet.empty,
+    lineMarker: () => null,
+    lineMarkerChange: null,
+    initialSpacer: null,
+    updateSpacer: null,
+    domEventHandlers: {}
+};
+const activeGutters = /*@__PURE__*/Facet.define();
+/**
+Define an editor gutter. The order in which the gutters appear is
+determined by their extension priority.
+*/
+function gutter(config) {
+    return [gutters(), activeGutters.of(Object.assign(Object.assign({}, defaults), config))];
+}
+const unfixGutters = /*@__PURE__*/Facet.define({
+    combine: values => values.some(x => x)
+});
+/**
+The gutter-drawing plugin is automatically enabled when you add a
+gutter, but you can use this function to explicitly configure it.
+
+Unless `fixed` is explicitly set to `false`, the gutters are
+fixed, meaning they don't scroll along with the content
+horizontally (except on Internet Explorer, which doesn't support
+CSS [`position:
+sticky`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky)).
+*/
+function gutters(config) {
+    let result = [
+        gutterView,
+    ];
+    if (config && config.fixed === false)
+        result.push(unfixGutters.of(true));
+    return result;
+}
+const gutterView = /*@__PURE__*/ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.view = view;
+        this.prevViewport = view.viewport;
+        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.gutters = view.state.facet(activeGutters).map(conf => new SingleGutterView(view, conf));
+        for (let gutter of this.gutters)
+            this.dom.appendChild(gutter.dom);
+        this.fixed = !view.state.facet(unfixGutters);
+        if (this.fixed) {
+            // FIXME IE11 fallback, which doesn't support position: sticky,
+            // by using position: relative + event handlers that realign the
+            // gutter (or just force fixed=false on IE11?)
+            this.dom.style.position = "sticky";
+        }
+        this.syncGutters(false);
+        view.scrollDOM.insertBefore(this.dom, view.contentDOM);
+    }
+    update(update) {
+        if (this.updateGutters(update)) {
+            // Detach during sync when the viewport changed significantly
+            // (such as during scrolling), since for large updates that is
+            // faster.
+            let vpA = this.prevViewport, vpB = update.view.viewport;
+            let vpOverlap = Math.min(vpA.to, vpB.to) - Math.max(vpA.from, vpB.from);
+            this.syncGutters(vpOverlap < (vpB.to - vpB.from) * 0.8);
+        }
+        if (update.geometryChanged)
+            this.dom.style.minHeight = this.view.contentHeight + "px";
+        if (this.view.state.facet(unfixGutters) != !this.fixed) {
+            this.fixed = !this.fixed;
+            this.dom.style.position = this.fixed ? "sticky" : "";
+        }
+        this.prevViewport = update.view.viewport;
+    }
+    syncGutters(detach) {
+        let after = this.dom.nextSibling;
+        if (detach)
+            this.dom.remove();
+        let lineClasses = RangeSet.iter(this.view.state.facet(gutterLineClass), this.view.viewport.from);
+        let classSet = [];
+        let contexts = this.gutters.map(gutter => new UpdateContext(gutter, this.view.viewport, -this.view.documentPadding.top));
+        for (let line of this.view.viewportLineBlocks) {
+            let text;
+            if (Array.isArray(line.type)) {
+                for (let b of line.type)
+                    if (b.type == BlockType.Text) {
+                        text = b;
+                        break;
+                    }
+            }
+            else {
+                text = line.type == BlockType.Text ? line : undefined;
+            }
+            if (!text)
+                continue;
+            if (classSet.length)
+                classSet = [];
+            advanceCursor(lineClasses, classSet, line.from);
+            for (let cx of contexts)
+                cx.line(this.view, text, classSet);
+        }
+        for (let cx of contexts)
+            cx.finish();
+        if (detach)
+            this.view.scrollDOM.insertBefore(this.dom, after);
+    }
+    updateGutters(update) {
+        let prev = update.startState.facet(activeGutters), cur = update.state.facet(activeGutters);
+        let change = update.docChanged || update.heightChanged || update.viewportChanged ||
+            !RangeSet.eq(update.startState.facet(gutterLineClass), update.state.facet(gutterLineClass), update.view.viewport.from, update.view.viewport.to);
+        if (prev == cur) {
+            for (let gutter of this.gutters)
+                if (gutter.update(update))
+                    change = true;
+        }
+        else {
+            change = true;
+            let gutters = [];
+            for (let conf of cur) {
+                let known = prev.indexOf(conf);
+                if (known < 0) {
+                    gutters.push(new SingleGutterView(this.view, conf));
+                }
+                else {
+                    this.gutters[known].update(update);
+                    gutters.push(this.gutters[known]);
+                }
+            }
+            for (let g of this.gutters) {
+                g.dom.remove();
+                if (gutters.indexOf(g) < 0)
+                    g.destroy();
+            }
+            for (let g of gutters)
+                this.dom.appendChild(g.dom);
+            this.gutters = gutters;
+        }
+        return change;
+    }
+    destroy() {
+        for (let view of this.gutters)
+            view.destroy();
+        this.dom.remove();
+    }
+}, {
+    provide: plugin => EditorView.scrollMargins.of(view => {
+        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 };
+    })
+});
+function asArray(val) { return (Array.isArray(val) ? val : [val]); }
+function advanceCursor(cursor, collect, pos) {
+    while (cursor.value && cursor.from <= pos) {
+        if (cursor.from == pos)
+            collect.push(cursor.value);
+        cursor.next();
+    }
+}
+class UpdateContext {
+    constructor(gutter, viewport, height) {
+        this.gutter = gutter;
+        this.height = height;
+        this.localMarkers = [];
+        this.i = 0;
+        this.cursor = RangeSet.iter(gutter.markers, viewport.from);
+    }
+    line(view, line, extraMarkers) {
+        if (this.localMarkers.length)
+            this.localMarkers = [];
+        advanceCursor(this.cursor, this.localMarkers, line.from);
+        let localMarkers = extraMarkers.length ? this.localMarkers.concat(extraMarkers) : this.localMarkers;
+        let forLine = this.gutter.config.lineMarker(view, line, localMarkers);
+        if (forLine)
+            localMarkers.unshift(forLine);
+        let gutter = this.gutter;
+        if (localMarkers.length == 0 && !gutter.config.renderEmptyElements)
+            return;
+        let above = line.top - this.height;
+        if (this.i == gutter.elements.length) {
+            let newElt = new GutterElement(view, line.height, above, localMarkers);
+            gutter.elements.push(newElt);
+            gutter.dom.appendChild(newElt.dom);
+        }
+        else {
+            gutter.elements[this.i].update(view, line.height, above, localMarkers);
+        }
+        this.height = line.bottom;
+        this.i++;
+    }
+    finish() {
+        let gutter = this.gutter;
+        while (gutter.elements.length > this.i) {
+            let last = gutter.elements.pop();
+            gutter.dom.removeChild(last.dom);
+            last.destroy();
+        }
+    }
+}
+class SingleGutterView {
+    constructor(view, config) {
+        this.view = view;
+        this.config = config;
+        this.elements = [];
+        this.spacer = null;
+        this.dom = document.createElement("div");
+        this.dom.className = "cm-gutter" + (this.config.class ? " " + this.config.class : "");
+        for (let prop in config.domEventHandlers) {
+            this.dom.addEventListener(prop, (event) => {
+                let line = view.lineBlockAtHeight(event.clientY - view.documentTop);
+                if (config.domEventHandlers[prop](view, line, event))
+                    event.preventDefault();
+            });
+        }
+        this.markers = asArray(config.markers(view));
+        if (config.initialSpacer) {
+            this.spacer = new GutterElement(view, 0, 0, [config.initialSpacer(view)]);
+            this.dom.appendChild(this.spacer.dom);
+            this.spacer.dom.style.cssText += "visibility: hidden; pointer-events: none";
+        }
+    }
+    update(update) {
+        let prevMarkers = this.markers;
+        this.markers = asArray(this.config.markers(update.view));
+        if (this.spacer && this.config.updateSpacer) {
+            let updated = this.config.updateSpacer(this.spacer.markers[0], update);
+            if (updated != this.spacer.markers[0])
+                this.spacer.update(update.view, 0, 0, [updated]);
+        }
+        let vp = update.view.viewport;
+        return !RangeSet.eq(this.markers, prevMarkers, vp.from, vp.to) ||
+            (this.config.lineMarkerChange ? this.config.lineMarkerChange(update) : false);
+    }
+    destroy() {
+        for (let elt of this.elements)
+            elt.destroy();
+    }
+}
+class GutterElement {
+    constructor(view, height, above, markers) {
+        this.height = -1;
+        this.above = 0;
+        this.markers = [];
+        this.dom = document.createElement("div");
+        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.above != above)
+            this.dom.style.marginTop = (this.above = above) ? above + "px" : "";
+        if (!sameMarkers(this.markers, markers))
+            this.setMarkers(view, markers);
+    }
+    setMarkers(view, markers) {
+        let cls = "cm-gutterElement", domPos = this.dom.firstChild;
+        for (let iNew = 0, iOld = 0;;) {
+            let skipTo = iOld, marker = iNew < markers.length ? markers[iNew++] : null, matched = false;
+            if (marker) {
+                let c = marker.elementClass;
+                if (c)
+                    cls += " " + c;
+                for (let i = iOld; i < this.markers.length; i++)
+                    if (this.markers[i].compare(marker)) {
+                        skipTo = i;
+                        matched = true;
+                        break;
+                    }
+            }
+            else {
+                skipTo = this.markers.length;
+            }
+            while (iOld < skipTo) {
+                let next = this.markers[iOld++];
+                if (next.toDOM) {
+                    next.destroy(domPos);
+                    let after = domPos.nextSibling;
+                    domPos.remove();
+                    domPos = after;
+                }
+            }
+            if (!marker)
+                break;
+            if (marker.toDOM) {
+                if (matched)
+                    domPos = domPos.nextSibling;
+                else
+                    this.dom.insertBefore(marker.toDOM(view), domPos);
+            }
+            if (matched)
+                iOld++;
+        }
+        this.dom.className = cls;
+        this.markers = markers;
+    }
+    destroy() {
+        this.setMarkers(null, []); // First argument not used unless creating markers
+    }
+}
+function sameMarkers(a, b) {
+    if (a.length != b.length)
+        return false;
+    for (let i = 0; i < a.length; i++)
+        if (!a[i].compare(b[i]))
+            return false;
+    return true;
+}
+/**
+Facet used to provide markers to the line number gutter.
+*/
+const lineNumberMarkers = /*@__PURE__*/Facet.define();
+const lineNumberConfig = /*@__PURE__*/Facet.define({
+    combine(values) {
+        return combineConfig(values, { formatNumber: String, domEventHandlers: {} }, {
+            domEventHandlers(a, b) {
+                let result = Object.assign({}, a);
+                for (let event in b) {
+                    let exists = result[event], add = b[event];
+                    result[event] = exists ? (view, line, event) => exists(view, line, event) || add(view, line, event) : add;
+                }
+                return result;
+            }
+        });
+    }
+});
+class NumberMarker extends GutterMarker {
+    constructor(number) {
+        super();
+        this.number = number;
+    }
+    eq(other) { return this.number == other.number; }
+    toDOM() { return document.createTextNode(this.number); }
+}
+function formatNumber(view, number) {
+    return view.state.facet(lineNumberConfig).formatNumber(number, view.state);
+}
+const lineNumberGutter = /*@__PURE__*/activeGutters.compute([lineNumberConfig], state => ({
+    class: "cm-lineNumbers",
+    renderEmptyElements: false,
+    markers(view) { return view.state.facet(lineNumberMarkers); },
+    lineMarker(view, line, others) {
+        if (others.some(m => m.toDOM))
+            return null;
+        return new NumberMarker(formatNumber(view, view.state.doc.lineAt(line.from).number));
+    },
+    lineMarkerChange: update => update.startState.facet(lineNumberConfig) != update.state.facet(lineNumberConfig),
+    initialSpacer(view) {
+        return new NumberMarker(formatNumber(view, maxLineNumber(view.state.doc.lines)));
+    },
+    updateSpacer(spacer, update) {
+        let max = formatNumber(update.view, maxLineNumber(update.view.state.doc.lines));
+        return max == spacer.number ? spacer : new NumberMarker(max);
+    },
+    domEventHandlers: state.facet(lineNumberConfig).domEventHandlers
+}));
+/**
+Create a line number gutter extension.
+*/
+function lineNumbers(config = {}) {
+    return [
+        lineNumberConfig.of(config),
+        gutters(),
+        lineNumberGutter
+    ];
+}
+function maxLineNumber(lines) {
+    let last = 9;
+    while (last < lines)
+        last = last * 10 + 9;
+    return last;
+}
+const activeLineGutterMarker = /*@__PURE__*/new class extends GutterMarker {
+    constructor() {
+        super(...arguments);
+        this.elementClass = "cm-activeLineGutter";
+    }
+};
+const activeLineGutterHighlighter = /*@__PURE__*/gutterLineClass.compute(["selection"], state => {
+    let marks = [], last = -1;
+    for (let range of state.selection.ranges)
+        if (range.empty) {
+            let linePos = state.doc.lineAt(range.head).from;
+            if (linePos > last) {
+                last = linePos;
+                marks.push(activeLineGutterMarker.range(linePos));
+            }
+        }
+    return RangeSet.of(marks);
+});
+/**
+Returns an extension that adds a `cm-activeLineGutter` class to
+all gutter elements on the [active
+line](https://codemirror.net/6/docs/ref/#view.highlightActiveLine).
+*/
+function highlightActiveLineGutter() {
+    return activeLineGutterHighlighter;
+}
+
 /**
 @internal
 */
 const __test = { HeightMap, HeightOracle, MeasuredHeights, QueryType, ChangedRange, computeOrder, moveVisually };
 
-export { BidiSpan, BlockInfo, BlockType, Decoration, Direction, EditorView, MatchDecorator, PluginField, PluginFieldProvider, ViewPlugin, ViewUpdate, WidgetType, __test, drawSelection, dropCursor, highlightActiveLine, highlightSpecialChars, keymap, logException, placeholder, runScopeHandlers, scrollPastEnd };
+export { BidiSpan, BlockInfo, BlockType, Decoration, Direction, EditorView, GutterMarker, MatchDecorator, ViewPlugin, ViewUpdate, WidgetType, __test, closeHoverTooltips, crosshairCursor, drawSelection, dropCursor, getPanel, getTooltip, gutter, gutterLineClass, gutters, hasHoverTooltips, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, hoverTooltip, keymap, lineNumberMarkers, lineNumbers, logException, panels, placeholder, rectangularSelection, repositionTooltips, runScopeHandlers, scrollPastEnd, showPanel, showTooltip, tooltips };