@codemirror/view 0.20.7 → 6.0.2

package/.github/workflows/dispatch.yml

@@ -11,6 +11,6 @@ jobs:
         with:
           # You should create a personal access token and store it in your repository
           token: ${{ secrets.DISPATCH_AUTH }}
-          repo: codemirror.next
+          repo: dev
           owner: codemirror
           event_type: push

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 6.0.2 (2022-06-23)
+
+### Bug fixes
+
+Fix a CSS issue that broke horizontal scroll width stabilization.
+
+Fix a bug where `defaultLineHeight` could get an incorrect value in very narrow editors.
+
+## 6.0.1 (2022-06-17)
+
+### Bug fixes
+
+Avoid DOM selection corruption when the editor doesn't have focus but has selection and updates its content.
+
+Fall back to dispatching by key code when a key event produces a non-ASCII character (so that Cyrillic and Arabic keyboards can still use bindings specified with Latin characters).
+
+## 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/README.md

@@ -1,13 +1,13 @@
 # @codemirror/view [![NPM version](https://img.shields.io/npm/v/@codemirror/view.svg)](https://www.npmjs.org/package/@codemirror/view)
 
-[ [**WEBSITE**](https://codemirror.net/6/) | [**DOCS**](https://codemirror.net/6/docs/ref/#view) | [**ISSUES**](https://github.com/codemirror/codemirror.next/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/view/blob/main/CHANGELOG.md) ]
+[ [**WEBSITE**](https://codemirror.net/) | [**DOCS**](https://codemirror.net/docs/ref/#view) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/view/blob/main/CHANGELOG.md) ]
 
 This package implements the DOM view component for the
-[CodeMirror](https://codemirror.net/6/) code editor.
+[CodeMirror](https://codemirror.net/) code editor.
 
-The [project page](https://codemirror.net/6/) has more information, a
-number of [examples](https://codemirror.net/6/examples/) and the
-[documentation](https://codemirror.net/6/docs/).
+The [project page](https://codemirror.net/) has more information, a
+number of [examples](https://codemirror.net/examples/) and the
+[documentation](https://codemirror.net/docs/).
 
 This code is released under an
 [MIT license](https://github.com/codemirror/view/tree/main/LICENSE).

package/dist/index.cjs

@@ -2545,7 +2545,7 @@ class DocView extends ContentView {
     }
     // Sync the DOM selection to this.state.selection
     updateSelection(mustRead = false, fromPointer = false) {
-        if (mustRead)
+        if (mustRead || !this.view.observer.selectionRange.focusNode)
             this.view.observer.readSelectionRange();
         if (!(fromPointer || this.mayControlSelection()) ||
             browser.ios && this.view.inputState.rapidCompositionStart)
@@ -2580,7 +2580,8 @@ class DocView extends ContentView {
                     this.dom.focus({ preventScroll: true });
                 }
                 let rawSel = getSelection(this.root);
-                if (main.empty) {
+                if (!rawSel) ;
+                else if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
                     if (browser.gecko) {
                         let nextTo = nextToUneditable(anchor.node, anchor.offset);
@@ -2622,7 +2623,7 @@ class DocView extends ContentView {
             return;
         let cursor = this.view.state.selection.main;
         let sel = getSelection(this.root);
-        if (!cursor.empty || !cursor.assoc || !sel.modify)
+        if (!sel || !cursor.empty || !cursor.assoc || !sel.modify)
             return;
         let line = LineView.find(this, cursor.head);
         if (!line)
@@ -2638,8 +2639,9 @@ class DocView extends ContentView {
         sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
     }
     mayControlSelection() {
-        return this.view.state.facet(editable) ? this.root.activeElement == this.dom
-            : hasSelection(this.dom, this.view.observer.selectionRange);
+        let active = this.root.activeElement;
+        return active == this.dom ||
+            hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
     }
     nearest(dom) {
         for (let cur = dom; cur;) {
@@ -2724,6 +2726,7 @@ class DocView extends ContentView {
         // If no workable line exists, force a layout of a measurable element
         let dummy = document.createElement("div"), lineHeight, charWidth;
         dummy.className = "cm-line";
+        dummy.style.width = "99999px";
         dummy.textContent = "abc def ghi jkl mno pqr stu";
         this.view.observer.ignore(() => {
             this.dom.appendChild(dummy);
@@ -3536,7 +3539,7 @@ function isInPrimarySelection(view, event) {
     // On boundary clicks, check whether the coordinates are inside the
     // selection's client rectangles
     let sel = getSelection(view.root);
-    if (sel.rangeCount == 0)
+    if (!sel || sel.rangeCount == 0)
         return true;
     let rects = sel.getRangeAt(0).getClientRects();
     for (let i = 0; i < rects.length; i++) {
@@ -5164,6 +5167,7 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     ".cm-content": {
         margin: 0,
         flexGrow: 2,
+        flexShrink: 0,
         minHeight: "100%",
         display: "block",
         whiteSpace: "pre",
@@ -5179,7 +5183,8 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
         whiteSpace_fallback: "pre-wrap",
         whiteSpace: "break-spaces",
         wordBreak: "break-word",
-        overflowWrap: "anywhere"
+        overflowWrap: "anywhere",
+        flexShrink: 1
     },
     "&light .cm-content": { caretColor: "black" },
     "&dark .cm-content": { caretColor: "white" },
@@ -5495,12 +5500,12 @@ class DOMObserver {
             this.flush(false);
     }
     readSelectionRange() {
-        let { root } = this.view, domSel = getSelection(root);
+        let { root } = this.view;
         // The Selection object is broken in shadow roots in Safari. See
-        // https://github.com/codemirror/codemirror.next/issues/414
+        // https://github.com/codemirror/dev/issues/414
         let range = browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM &&
-            safariSelectionRangeHack(this.view) || domSel;
-        if (this.selectionRange.eq(range))
+            safariSelectionRangeHack(this.view) || getSelection(root);
+        if (!range || this.selectionRange.eq(range))
             return false;
         this.selectionRange.setRange(range);
         return this.selectionChanged = true;
@@ -5959,11 +5964,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 +5997,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 +6672,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
@@ -6960,7 +6971,8 @@ function buildKeymap(bindings, platform = currentPlatform) {
     return bound;
 }
 function runHandlers(map, event, view, scope) {
-    let name = w3cKeyname.keyName(event), isChar = name.length == 1 && name != " ";
+    let name = w3cKeyname.keyName(event);
+    let charCode = state.codePointAt(name, 0), isChar = state.codePointSize(charCode) == name.length && name != " ";
     let prefix = "", fallthrough = false;
     if (storedPrefix && storedPrefix.view == view && storedPrefix.scope == scope) {
         prefix = storedPrefix.prefix + " ";
@@ -6981,10 +6993,13 @@ function runHandlers(map, event, view, scope) {
     if (scopeObj) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
-        if (isChar && (event.shiftKey || event.altKey || event.metaKey) &&
+        if (isChar && (event.shiftKey || event.altKey || event.metaKey || charCode > 127) &&
             (baseName = w3cKeyname.base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
+            else if (event.shiftKey && w3cKeyname.shift[event.keyCode] != baseName &&
+                runFor(scopeObj[prefix + modifiers(w3cKeyname.shift[event.keyCode], event, false)]))
+                return true;
         }
         else if (isChar && event.shiftKey) {
             if (runFor(scopeObj[prefix + modifiers(name, event, true)]))

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

@@ -1,6 +1,6 @@
-import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Prec, Transaction, combineConfig, StateField, RangeSetBuilder, codePointAt, countColumn } from '@codemirror/state';
+import { Text, RangeSet, MapMode, RangeValue, Facet, StateEffect, ChangeSet, findClusterBreak, EditorSelection, EditorState, findColumn, CharCategory, Prec, Transaction, codePointAt, codePointSize, combineConfig, StateField, RangeSetBuilder, countColumn } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
-import { keyName, base } from 'w3c-keyname';
+import { keyName, base, shift } from 'w3c-keyname';
 
 function getSelection(root) {
     let target;
@@ -2539,7 +2539,7 @@ class DocView extends ContentView {
     }
     // Sync the DOM selection to this.state.selection
     updateSelection(mustRead = false, fromPointer = false) {
-        if (mustRead)
+        if (mustRead || !this.view.observer.selectionRange.focusNode)
             this.view.observer.readSelectionRange();
         if (!(fromPointer || this.mayControlSelection()) ||
             browser.ios && this.view.inputState.rapidCompositionStart)
@@ -2574,7 +2574,8 @@ class DocView extends ContentView {
                     this.dom.focus({ preventScroll: true });
                 }
                 let rawSel = getSelection(this.root);
-                if (main.empty) {
+                if (!rawSel) ;
+                else if (main.empty) {
                     // Work around https://bugzilla.mozilla.org/show_bug.cgi?id=1612076
                     if (browser.gecko) {
                         let nextTo = nextToUneditable(anchor.node, anchor.offset);
@@ -2616,7 +2617,7 @@ class DocView extends ContentView {
             return;
         let cursor = this.view.state.selection.main;
         let sel = getSelection(this.root);
-        if (!cursor.empty || !cursor.assoc || !sel.modify)
+        if (!sel || !cursor.empty || !cursor.assoc || !sel.modify)
             return;
         let line = LineView.find(this, cursor.head);
         if (!line)
@@ -2632,8 +2633,9 @@ class DocView extends ContentView {
         sel.modify("move", cursor.assoc < 0 ? "forward" : "backward", "lineboundary");
     }
     mayControlSelection() {
-        return this.view.state.facet(editable) ? this.root.activeElement == this.dom
-            : hasSelection(this.dom, this.view.observer.selectionRange);
+        let active = this.root.activeElement;
+        return active == this.dom ||
+            hasSelection(this.dom, this.view.observer.selectionRange) && !(active && this.dom.contains(active));
     }
     nearest(dom) {
         for (let cur = dom; cur;) {
@@ -2718,6 +2720,7 @@ class DocView extends ContentView {
         // If no workable line exists, force a layout of a measurable element
         let dummy = document.createElement("div"), lineHeight, charWidth;
         dummy.className = "cm-line";
+        dummy.style.width = "99999px";
         dummy.textContent = "abc def ghi jkl mno pqr stu";
         this.view.observer.ignore(() => {
             this.dom.appendChild(dummy);
@@ -3530,7 +3533,7 @@ function isInPrimarySelection(view, event) {
     // On boundary clicks, check whether the coordinates are inside the
     // selection's client rectangles
     let sel = getSelection(view.root);
-    if (sel.rangeCount == 0)
+    if (!sel || sel.rangeCount == 0)
         return true;
     let rects = sel.getRangeAt(0).getClientRects();
     for (let i = 0; i < rects.length; i++) {
@@ -5157,6 +5160,7 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
     ".cm-content": {
         margin: 0,
         flexGrow: 2,
+        flexShrink: 0,
         minHeight: "100%",
         display: "block",
         whiteSpace: "pre",
@@ -5172,7 +5176,8 @@ const baseTheme$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
         whiteSpace_fallback: "pre-wrap",
         whiteSpace: "break-spaces",
         wordBreak: "break-word",
-        overflowWrap: "anywhere"
+        overflowWrap: "anywhere",
+        flexShrink: 1
     },
     "&light .cm-content": { caretColor: "black" },
     "&dark .cm-content": { caretColor: "white" },
@@ -5488,12 +5493,12 @@ class DOMObserver {
             this.flush(false);
     }
     readSelectionRange() {
-        let { root } = this.view, domSel = getSelection(root);
+        let { root } = this.view;
         // The Selection object is broken in shadow roots in Safari. See
-        // https://github.com/codemirror/codemirror.next/issues/414
+        // https://github.com/codemirror/dev/issues/414
         let range = browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM &&
-            safariSelectionRangeHack(this.view) || domSel;
-        if (this.selectionRange.eq(range))
+            safariSelectionRangeHack(this.view) || getSelection(root);
+        if (!range || this.selectionRange.eq(range))
             return false;
         this.selectionRange.setRange(range);
         return this.selectionChanged = true;
@@ -5952,11 +5957,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 +5990,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 +6665,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
@@ -6953,7 +6964,8 @@ function buildKeymap(bindings, platform = currentPlatform) {
     return bound;
 }
 function runHandlers(map, event, view, scope) {
-    let name = keyName(event), isChar = name.length == 1 && name != " ";
+    let name = keyName(event);
+    let charCode = codePointAt(name, 0), isChar = codePointSize(charCode) == name.length && name != " ";
     let prefix = "", fallthrough = false;
     if (storedPrefix && storedPrefix.view == view && storedPrefix.scope == scope) {
         prefix = storedPrefix.prefix + " ";
@@ -6974,10 +6986,13 @@ function runHandlers(map, event, view, scope) {
     if (scopeObj) {
         if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
             return true;
-        if (isChar && (event.shiftKey || event.altKey || event.metaKey) &&
+        if (isChar && (event.shiftKey || event.altKey || event.metaKey || charCode > 127) &&
             (baseName = base[event.keyCode]) && baseName != name) {
             if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
                 return true;
+            else if (event.shiftKey && shift[event.keyCode] != baseName &&
+                runFor(scopeObj[prefix + modifiers(shift[event.keyCode], event, false)]))
+                return true;
         }
         else if (isChar && event.shiftKey) {
             if (runFor(scopeObj[prefix + modifiers(name, event, true)]))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.20.7",
+  "version": "6.0.2",
   "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"
   },