@codemirror/view 0.20.7 → 6.0.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 6.0.0 (2022-06-08)
+
+### New features
+
+The new static `EditorView.findFromDOM` method can be used to retrieve an editor instance from its DOM structure.
+
+Instead of passing a constructed state to the `EditorView` constructor, it is now also possible to inline the configuration options to the state in the view config object.
+
 ## 0.20.7 (2022-05-30)
 
 ### Bug fixes

package/dist/index.cjs

@@ -5959,11 +5959,7 @@ class EditorView {
     option, or put `view.dom` into your document after creating a
     view, so that the user can see the editor.
     */
-    constructor(
-    /**
-    Initialization options.
-    */
-    config = {}) {
+    constructor(config = {}) {
         this.plugins = [];
         this.pluginMap = new Map;
         this.editorAttrs = {};
@@ -5996,7 +5992,7 @@ class EditorView {
         this._dispatch = config.dispatch || ((tr) => this.update([tr]));
         this.dispatch = this.dispatch.bind(this);
         this.root = (config.root || getRoot(config.parent) || document);
-        this.viewState = new ViewState(config.state || state.EditorState.create());
+        this.viewState = new ViewState(config.state || state.EditorState.create(config));
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec));
         for (let plugin of this.plugins)
             plugin.update(this);
@@ -6671,6 +6667,16 @@ class EditorView {
     static baseTheme(spec) {
         return state.Prec.lowest(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
     }
+    /**
+    Retrieve an editor view instance from the view's DOM
+    representation.
+    */
+    static findFromDOM(dom) {
+        var _a;
+        let content = dom.querySelector(".cm-content");
+        let cView = content && ContentView.get(content) || ContentView.get(dom);
+        return ((_a = cView === null || cView === void 0 ? void 0 : cView.rootView) === null || _a === void 0 ? void 0 : _a.view) || null;
+    }
 }
 /**
 Facet to add a [style

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _codemirror_state from '@codemirror/state';
-import { RangeSet, RangeValue, Range, EditorState, Extension, Transaction, ChangeSet, EditorSelection, TransactionSpec, SelectionRange, Line, StateEffect, Facet } 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 = {
@@ -559,10 +559,16 @@ declare class BidiSpan {
     get dir(): Direction;
 }
 
-interface EditorConfig {
+/**
+The type of object given to the [`EditorView`](https://codemirror.net/6/docs/ref/#view.EditorView)
+constructor.
+*/
+interface EditorViewConfig extends EditorStateConfig {
     /**
-    The view's initial state. Defaults to an extension-less state
-    with an empty document.
+    The view's initial state. If not given, a new state is created
+    by passing this configuration object to
+    [`EditorState.create`](https://codemirror.net/6/docs/ref/#state.EditorState^create), using its
+    `doc`, `selection`, and `extensions` field (if provided).
     */
     state?: EditorState;
     /**
@@ -676,11 +682,7 @@ declare class EditorView {
     option, or put `view.dom` into your document after creating a
     view, so that the user can see the editor.
     */
-    constructor(
-    /**
-    Initialization options.
-    */
-    config?: EditorConfig);
+    constructor(config?: EditorViewConfig);
     /**
     All regular editor state updates should go through this. It
     takes a transaction or transaction spec and updates the view to
@@ -1131,6 +1133,11 @@ declare class EditorView {
     search match).
     */
     static announce: _codemirror_state.StateEffectType<string>;
+    /**
+    Retrieve an editor view instance from the view's DOM
+    representation.
+    */
+    static findFromDOM(dom: HTMLElement): EditorView | null;
 }
 /**
 Helper type that maps event names to event object types, or the
@@ -1783,4 +1790,4 @@ line](https://codemirror.net/6/docs/ref/#view.highlightActiveLine).
 */
 declare function highlightActiveLineGutter(): Extension;
 
-export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, GutterMarker, KeyBinding, MatchDecorator, MouseSelectionStyle, Panel, PanelConstructor, PluginSpec, PluginValue, Rect, Tooltip, TooltipView, ViewPlugin, ViewUpdate, WidgetType, 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 };
+export { BidiSpan, BlockInfo, BlockType, Command, DOMEventHandlers, DOMEventMap, Decoration, DecorationSet, Direction, EditorView, EditorViewConfig, GutterMarker, KeyBinding, MatchDecorator, MouseSelectionStyle, Panel, PanelConstructor, PluginSpec, PluginValue, Rect, Tooltip, TooltipView, ViewPlugin, ViewUpdate, WidgetType, 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 };

package/dist/index.js

@@ -5952,11 +5952,7 @@ class EditorView {
     option, or put `view.dom` into your document after creating a
     view, so that the user can see the editor.
     */
-    constructor(
-    /**
-    Initialization options.
-    */
-    config = {}) {
+    constructor(config = {}) {
         this.plugins = [];
         this.pluginMap = new Map;
         this.editorAttrs = {};
@@ -5989,7 +5985,7 @@ class EditorView {
         this._dispatch = config.dispatch || ((tr) => this.update([tr]));
         this.dispatch = this.dispatch.bind(this);
         this.root = (config.root || getRoot(config.parent) || document);
-        this.viewState = new ViewState(config.state || EditorState.create());
+        this.viewState = new ViewState(config.state || EditorState.create(config));
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec));
         for (let plugin of this.plugins)
             plugin.update(this);
@@ -6664,6 +6660,16 @@ class EditorView {
     static baseTheme(spec) {
         return Prec.lowest(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
     }
+    /**
+    Retrieve an editor view instance from the view's DOM
+    representation.
+    */
+    static findFromDOM(dom) {
+        var _a;
+        let content = dom.querySelector(".cm-content");
+        let cView = content && ContentView.get(content) || ContentView.get(dom);
+        return ((_a = cView === null || cView === void 0 ? void 0 : cView.rootView) === null || _a === void 0 ? void 0 : _a.view) || null;
+    }
 }
 /**
 Facet to add a [style

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.20.7",
+  "version": "6.0.0",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -26,7 +26,7 @@
   "sideEffects": false,
   "license": "MIT",
   "dependencies": {
-    "@codemirror/state": "^0.20.0",
+    "@codemirror/state": "^6.0.0",
     "style-mod": "^4.0.0",
     "w3c-keyname": "^2.2.4"
   },