@codemirror/view 6.11.3 → 6.12.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 6.12.0 (2023-05-18)
+
+### Bug fixes
+
+Remove an accidentally included `console.log`.
+
+### New features
+
+`EditorViewConfig.dispatch` is now passed the view object as a second argument.
+
 ## 6.11.3 (2023-05-17)
 
 ### Bug fixes

package/dist/index.cjs

@@ -822,6 +822,9 @@ function textCoords(text, pos, side) {
 }
 // Also used for collapsed ranges that don't have a placeholder widget!
 class WidgetView extends ContentView {
+    static create(widget, length, side) {
+        return new (widget.customView || WidgetView)(widget, length, side);
+    }
     constructor(widget, length, side) {
         super();
         this.widget = widget;
@@ -829,9 +832,6 @@ class WidgetView extends ContentView {
         this.side = side;
         this.prevWidget = null;
     }
-    static create(widget, length, side) {
-        return new (widget.customView || WidgetView)(widget, length, side);
-    }
     split(from) {
         let result = WidgetView.create(this.widget, this.length - from, this.side);
         this.length -= from;
@@ -2216,6 +2216,10 @@ Represents a contiguous range of text that has a single direction
 (as in left-to-right or right-to-left).
 */
 class BidiSpan {
+    /**
+    The direction of this span.
+    */
+    get dir() { return this.level % 2 ? RTL : LTR; }
     /**
     @internal
     */
@@ -2241,10 +2245,6 @@ class BidiSpan {
         this.level = level;
     }
     /**
-    The direction of this span.
-    */
-    get dir() { return this.level % 2 ? RTL : LTR; }
-    /**
     @internal
     */
     side(end, dir) { return (this.dir == dir) == end ? this.to : this.from; }
@@ -2482,7 +2482,6 @@ class DOMReader {
     constructor(points, state$1) {
         this.points = points;
         this.text = "";
-        console.log("make reader");
         this.lineSeparator = state$1.facet(state.EditorState.lineSeparator);
     }
     append(text) {
@@ -2586,6 +2585,7 @@ class DOMPoint {
 }
 
 class DocView extends ContentView {
+    get length() { return this.view.state.doc.length; }
     constructor(view) {
         super();
         this.view = view;
@@ -2616,7 +2616,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
     // used as a hint to compute a new viewport that includes that
     // position, if we know the editor is going to scroll that position
@@ -3477,6 +3476,10 @@ function skipAtoms(view, oldPos, pos) {
 
 // This will also be where dragging info and such goes
 class InputState {
+    setSelectionOrigin(origin) {
+        this.lastSelectionOrigin = origin;
+        this.lastSelectionTime = Date.now();
+    }
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
@@ -3573,10 +3576,6 @@ class InputState {
         if (browser.safari)
             view.contentDOM.addEventListener("input", () => null);
     }
-    setSelectionOrigin(origin) {
-        this.lastSelectionOrigin = origin;
-        this.lastSelectionTime = Date.now();
-    }
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
@@ -6500,6 +6499,53 @@ line number gutter. It handles events and dispatches state
 transactions for editing actions.
 */
 class EditorView {
+    /**
+    The current editor state.
+    */
+    get state() { return this.viewState.state; }
+    /**
+    To be able to display large documents without consuming too much
+    memory or overloading the browser, CodeMirror only draws the
+    code that is visible (plus a margin around it) to the DOM. This
+    property tells you the extent of the current drawn viewport, in
+    document positions.
+    */
+    get viewport() { return this.viewState.viewport; }
+    /**
+    When there are, for example, large collapsed ranges in the
+    viewport, its size can be a lot bigger than the actual visible
+    content. Thus, if you are doing something like styling the
+    content in the viewport, it is preferable to only do so for
+    these ranges, which are the subset of the viewport that is
+    actually drawn.
+    */
+    get visibleRanges() { return this.viewState.visibleRanges; }
+    /**
+    Returns false when the editor is entirely scrolled out of view
+    or otherwise hidden.
+    */
+    get inView() { return this.viewState.inView; }
+    /**
+    Indicates whether the user is currently composing text via
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
+    */
+    get composing() { return this.inputState.composing > 0; }
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted() { return this.inputState.composing >= 0; }
+    /**
+    The document or shadow root that the view lives in.
+    */
+    get root() { return this._root; }
+    /**
+    @internal
+    */
+    get win() { return this.dom.ownerDocument.defaultView || window; }
     /**
     Construct a new view. You'll want to either provide a `parent`
     option, or put `view.dom` into your document after creating a
@@ -6553,56 +6599,10 @@ class EditorView {
         if (config.parent)
             config.parent.appendChild(this.dom);
     }
-    /**
-    The current editor state.
-    */
-    get state() { return this.viewState.state; }
-    /**
-    To be able to display large documents without consuming too much
-    memory or overloading the browser, CodeMirror only draws the
-    code that is visible (plus a margin around it) to the DOM. This
-    property tells you the extent of the current drawn viewport, in
-    document positions.
-    */
-    get viewport() { return this.viewState.viewport; }
-    /**
-    When there are, for example, large collapsed ranges in the
-    viewport, its size can be a lot bigger than the actual visible
-    content. Thus, if you are doing something like styling the
-    content in the viewport, it is preferable to only do so for
-    these ranges, which are the subset of the viewport that is
-    actually drawn.
-    */
-    get visibleRanges() { return this.viewState.visibleRanges; }
-    /**
-    Returns false when the editor is entirely scrolled out of view
-    or otherwise hidden.
-    */
-    get inView() { return this.viewState.inView; }
-    /**
-    Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
-    one change has been made in the current composition.
-    */
-    get composing() { return this.inputState.composing > 0; }
-    /**
-    Indicates whether the user is currently in composing state. Note
-    that on some platforms, like Android, this will be the case a
-    lot, since just putting the cursor on a word starts a
-    composition there.
-    */
-    get compositionStarted() { return this.inputState.composing >= 0; }
-    /**
-    The document or shadow root that the view lives in.
-    */
-    get root() { return this._root; }
-    /**
-    @internal
-    */
-    get win() { return this.dom.ownerDocument.defaultView || window; }
     dispatch(...input) {
-        this._dispatch(input.length == 1 && input[0] instanceof state.Transaction ? input[0]
-            : this.state.update(...input));
+        let tr = input.length == 1 && input[0] instanceof state.Transaction ? input[0]
+            : this.state.update(...input);
+        this._dispatch(tr, this);
     }
     /**
     Update the view for the given array of transactions. This will
@@ -8907,6 +8907,10 @@ const showTooltip = state.Facet.define({
 });
 const showHoverTooltip = state.Facet.define();
 class HoverTooltipHost {
+    // Needs to be static so that host tooltip instances always match
+    static create(view) {
+        return new HoverTooltipHost(view);
+    }
     constructor(view) {
         this.view = view;
         this.mounted = false;
@@ -8914,10 +8918,6 @@ class HoverTooltipHost {
         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");

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _codemirror_state from '@codemirror/state';
 import { RangeSet, RangeValue, Range, EditorState, Extension, Transaction, ChangeSet, EditorSelection, EditorStateConfig, TransactionSpec, SelectionRange, Line, StateEffect, Facet } from '@codemirror/state';
 import { StyleModule, StyleSpec } from 'style-mod';
 
-declare type Attrs = {
+type Attrs = {
     [name: string]: string;
 };
 
@@ -15,7 +15,7 @@ interface Rect {
     readonly top: number;
     readonly bottom: number;
 }
-declare type ScrollStrategy = "nearest" | "start" | "end" | "center";
+type ScrollStrategy = "nearest" | "start" | "end" | "center";
 
 interface MarkDecorationSpec {
     /**
@@ -198,7 +198,7 @@ A decoration set represents a collection of decorated ranges,
 organized for efficient access and mapping. See
 [`RangeSet`](https://codemirror.net/6/docs/ref/#state.RangeSet) for its methods.
 */
-declare type DecorationSet = RangeSet<Decoration>;
+type DecorationSet = RangeSet<Decoration>;
 /**
 The different types of blocks that can occur in an editor view.
 */
@@ -297,7 +297,7 @@ apply to the editor, and if it can, perform it as a side effect
 (which usually means [dispatching](https://codemirror.net/6/docs/ref/#view.EditorView.dispatch) a
 transaction) and return `true`.
 */
-declare type Command = (target: EditorView) => boolean;
+type Command = (target: EditorView) => boolean;
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -399,7 +399,7 @@ interface MeasureRequest<T> {
     */
     key?: any;
 }
-declare type AttrSource = Attrs | ((view: EditorView) => Attrs | null);
+type AttrSource = Attrs | ((view: EditorView) => Attrs | null);
 /**
 View [plugins](https://codemirror.net/6/docs/ref/#view.ViewPlugin) are given instances of this
 class, which describe what happened, whenever the view is updated.
@@ -488,7 +488,7 @@ interface MouseSelectionStyle {
     */
     update: (update: ViewUpdate) => boolean | void;
 }
-declare type MakeSelectionStyle = (view: EditorView, event: MouseEvent) => MouseSelectionStyle | null;
+type MakeSelectionStyle = (view: EditorView, event: MouseEvent) => MouseSelectionStyle | null;
 
 /**
 Record used to represent information about a block-level element
@@ -605,7 +605,7 @@ interface EditorViewConfig extends EditorStateConfig {
     if provided, should probably call the view's [`update`
     method](https://codemirror.net/6/docs/ref/#view.EditorView.update).
     */
-    dispatch?: (tr: Transaction) => void;
+    dispatch?: (tr: Transaction, view: EditorView) => void;
 }
 /**
 An editor view represents the editor's user interface. It holds
@@ -1183,7 +1183,7 @@ to hold the appropriate event object type. For unknown events, it
 is inferred to `any`, and should be explicitly set if you want type
 checking.
 */
-declare type DOMEventHandlers<This> = {
+type DOMEventHandlers<This> = {
     [event in keyof DOMEventMap]?: (this: This, event: DOMEventMap[event], view: EditorView) => boolean | void;
 };
 
@@ -1285,7 +1285,7 @@ handlers handled it.
 */
 declare function runScopeHandlers(view: EditorView, event: KeyboardEvent, scope: string): boolean;
 
-declare type SelectionConfig = {
+type SelectionConfig = {
     /**
     The length of a full cursor blink cycle, in milliseconds.
     Defaults to 1200. Can be set to 0 to disable blinking.
@@ -1751,7 +1751,7 @@ invalidate the existing tooltip positions.
 */
 declare function repositionTooltips(view: EditorView): void;
 
-declare type PanelConfig = {
+type PanelConfig = {
     /**
     By default, panels will be placed inside the editor's DOM
     structure. You can use this option to override where panels with
@@ -1805,7 +1805,7 @@ declare function getPanel(view: EditorView, panel: PanelConstructor): Panel | nu
 A function that initializes a panel. Used in
 [`showPanel`](https://codemirror.net/6/docs/ref/#view.showPanel).
 */
-declare type PanelConstructor = (view: EditorView) => Panel;
+type PanelConstructor = (view: EditorView) => Panel;
 /**
 Opening a panel is done by providing a constructor function for
 the panel through this facet. (The panel is closed again when its
@@ -1846,7 +1846,7 @@ Markers given to this facet should _only_ define an
 in all gutters for the line).
 */
 declare const gutterLineClass: Facet<RangeSet<GutterMarker>, readonly RangeSet<GutterMarker>[]>;
-declare type Handlers = {
+type Handlers = {
     [event: string]: (view: EditorView, line: BlockInfo, event: Event) => boolean;
 };
 interface GutterConfig {

package/dist/index.js

@@ -818,6 +818,9 @@ function textCoords(text, pos, side) {
 }
 // Also used for collapsed ranges that don't have a placeholder widget!
 class WidgetView extends ContentView {
+    static create(widget, length, side) {
+        return new (widget.customView || WidgetView)(widget, length, side);
+    }
     constructor(widget, length, side) {
         super();
         this.widget = widget;
@@ -825,9 +828,6 @@ class WidgetView extends ContentView {
         this.side = side;
         this.prevWidget = null;
     }
-    static create(widget, length, side) {
-        return new (widget.customView || WidgetView)(widget, length, side);
-    }
     split(from) {
         let result = WidgetView.create(this.widget, this.length - from, this.side);
         this.length -= from;
@@ -2210,6 +2210,10 @@ Represents a contiguous range of text that has a single direction
 (as in left-to-right or right-to-left).
 */
 class BidiSpan {
+    /**
+    The direction of this span.
+    */
+    get dir() { return this.level % 2 ? RTL : LTR; }
     /**
     @internal
     */
@@ -2235,10 +2239,6 @@ class BidiSpan {
         this.level = level;
     }
     /**
-    The direction of this span.
-    */
-    get dir() { return this.level % 2 ? RTL : LTR; }
-    /**
     @internal
     */
     side(end, dir) { return (this.dir == dir) == end ? this.to : this.from; }
@@ -2476,7 +2476,6 @@ class DOMReader {
     constructor(points, state) {
         this.points = points;
         this.text = "";
-        console.log("make reader");
         this.lineSeparator = state.facet(EditorState.lineSeparator);
     }
     append(text) {
@@ -2580,6 +2579,7 @@ class DOMPoint {
 }
 
 class DocView extends ContentView {
+    get length() { return this.view.state.doc.length; }
     constructor(view) {
         super();
         this.view = view;
@@ -2610,7 +2610,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
     // used as a hint to compute a new viewport that includes that
     // position, if we know the editor is going to scroll that position
@@ -3471,6 +3470,10 @@ function skipAtoms(view, oldPos, pos) {
 
 // This will also be where dragging info and such goes
 class InputState {
+    setSelectionOrigin(origin) {
+        this.lastSelectionOrigin = origin;
+        this.lastSelectionTime = Date.now();
+    }
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
@@ -3567,10 +3570,6 @@ class InputState {
         if (browser.safari)
             view.contentDOM.addEventListener("input", () => null);
     }
-    setSelectionOrigin(origin) {
-        this.lastSelectionOrigin = origin;
-        this.lastSelectionTime = Date.now();
-    }
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
@@ -6493,6 +6492,53 @@ line number gutter. It handles events and dispatches state
 transactions for editing actions.
 */
 class EditorView {
+    /**
+    The current editor state.
+    */
+    get state() { return this.viewState.state; }
+    /**
+    To be able to display large documents without consuming too much
+    memory or overloading the browser, CodeMirror only draws the
+    code that is visible (plus a margin around it) to the DOM. This
+    property tells you the extent of the current drawn viewport, in
+    document positions.
+    */
+    get viewport() { return this.viewState.viewport; }
+    /**
+    When there are, for example, large collapsed ranges in the
+    viewport, its size can be a lot bigger than the actual visible
+    content. Thus, if you are doing something like styling the
+    content in the viewport, it is preferable to only do so for
+    these ranges, which are the subset of the viewport that is
+    actually drawn.
+    */
+    get visibleRanges() { return this.viewState.visibleRanges; }
+    /**
+    Returns false when the editor is entirely scrolled out of view
+    or otherwise hidden.
+    */
+    get inView() { return this.viewState.inView; }
+    /**
+    Indicates whether the user is currently composing text via
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
+    */
+    get composing() { return this.inputState.composing > 0; }
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted() { return this.inputState.composing >= 0; }
+    /**
+    The document or shadow root that the view lives in.
+    */
+    get root() { return this._root; }
+    /**
+    @internal
+    */
+    get win() { return this.dom.ownerDocument.defaultView || window; }
     /**
     Construct a new view. You'll want to either provide a `parent`
     option, or put `view.dom` into your document after creating a
@@ -6546,56 +6592,10 @@ class EditorView {
         if (config.parent)
             config.parent.appendChild(this.dom);
     }
-    /**
-    The current editor state.
-    */
-    get state() { return this.viewState.state; }
-    /**
-    To be able to display large documents without consuming too much
-    memory or overloading the browser, CodeMirror only draws the
-    code that is visible (plus a margin around it) to the DOM. This
-    property tells you the extent of the current drawn viewport, in
-    document positions.
-    */
-    get viewport() { return this.viewState.viewport; }
-    /**
-    When there are, for example, large collapsed ranges in the
-    viewport, its size can be a lot bigger than the actual visible
-    content. Thus, if you are doing something like styling the
-    content in the viewport, it is preferable to only do so for
-    these ranges, which are the subset of the viewport that is
-    actually drawn.
-    */
-    get visibleRanges() { return this.viewState.visibleRanges; }
-    /**
-    Returns false when the editor is entirely scrolled out of view
-    or otherwise hidden.
-    */
-    get inView() { return this.viewState.inView; }
-    /**
-    Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
-    one change has been made in the current composition.
-    */
-    get composing() { return this.inputState.composing > 0; }
-    /**
-    Indicates whether the user is currently in composing state. Note
-    that on some platforms, like Android, this will be the case a
-    lot, since just putting the cursor on a word starts a
-    composition there.
-    */
-    get compositionStarted() { return this.inputState.composing >= 0; }
-    /**
-    The document or shadow root that the view lives in.
-    */
-    get root() { return this._root; }
-    /**
-    @internal
-    */
-    get win() { return this.dom.ownerDocument.defaultView || window; }
     dispatch(...input) {
-        this._dispatch(input.length == 1 && input[0] instanceof Transaction ? input[0]
-            : this.state.update(...input));
+        let tr = input.length == 1 && input[0] instanceof Transaction ? input[0]
+            : this.state.update(...input);
+        this._dispatch(tr, this);
     }
     /**
     Update the view for the given array of transactions. This will
@@ -8900,6 +8900,10 @@ const showTooltip = /*@__PURE__*/Facet.define({
 });
 const showHoverTooltip = /*@__PURE__*/Facet.define();
 class HoverTooltipHost {
+    // Needs to be static so that host tooltip instances always match
+    static create(view) {
+        return new HoverTooltipHost(view);
+    }
     constructor(view) {
         this.view = view;
         this.mounted = false;
@@ -8907,10 +8911,6 @@ class HoverTooltipHost {
         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");

package/package.json

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