@codemirror/view 0.20.3 → 0.20.6

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 0.20.6 (2022-05-20)
+
+### Bug fixes
+
+Make sure the editor re-measures itself when its attributes are updated.
+
+## 0.20.5 (2022-05-18)
+
+### Bug fixes
+
+Fix an issue where gutter elements without any markers in them would not get the `cm-gutterElement` class assigned.
+
+Fix an issue where DOM event handlers registered by plugins were retained indefinitely, even after the editor was reconfigured.
+
+## 0.20.4 (2022-05-03)
+
+### Bug fixes
+
+Prevent Mac-style behavior of inserting a period when the user inserts two spaces.
+
+Fix an issue where the editor would sometimes not restore the DOM selection when refocused with a selection identical to the one it held when it lost focus.
+
 ## 0.20.3 (2022-04-27)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1063,14 +1063,16 @@ function attrsEq(a, b) {
     return true;
 }
 function updateAttrs(dom, prev, attrs) {
+    let changed = null;
     if (prev)
         for (let name in prev)
             if (!(attrs && name in attrs))
-                dom.removeAttribute(name);
+                dom.removeAttribute(changed = name);
     if (attrs)
         for (let name in attrs)
             if (!(prev && prev[name] == attrs[name]))
-                dom.setAttribute(name, attrs[name]);
+                dom.setAttribute(changed = name, attrs[name]);
+    return !!changed;
 }
 
 /**
@@ -1157,9 +1159,6 @@ of content. You'll usually use it wrapped in a
 @nonabstract
 */
 class Decoration extends state.RangeValue {
-    /**
-    @internal
-    */
     constructor(
     /**
     @internal
@@ -1704,7 +1703,6 @@ class NullWidget extends WidgetType {
     updateDOM(elt) { return elt.nodeName.toLowerCase() == this.tag; }
 }
 
-const none = [];
 const clickAddsSelectionRange = state.Facet.define();
 const dragMovesSelection$1 = state.Facet.define();
 const mouseSelectionStyle = state.Facet.define();
@@ -1923,9 +1921,6 @@ View [plugins](https://codemirror.net/6/docs/ref/#view.ViewPlugin) are given ins
 class, which describe what happened, whenever the view is updated.
 */
 class ViewUpdate {
-    /**
-    @internal
-    */
     constructor(
     /**
     The editor view that the update is associated with.
@@ -1938,7 +1933,7 @@ class ViewUpdate {
     /**
     The transactions involved in the update. May be empty.
     */
-    transactions = none) {
+    transactions) {
         this.view = view;
         this.state = state$1;
         this.transactions = transactions;
@@ -1960,6 +1955,12 @@ class ViewUpdate {
         }
     }
     /**
+    @internal
+    */
+    static create(view, state, transactions) {
+        return new ViewUpdate(view, state, transactions);
+    }
+    /**
     Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
     [visible ranges](https://codemirror.net/6/docs/ref/#view.EditorView.visibleRanges) changed in this
     update.
@@ -3320,6 +3321,7 @@ class InputState {
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
+        this.customHandlers = [];
         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 });
@@ -3845,11 +3847,16 @@ handlers.copy = handlers.cut = (view, event) => {
             userEvent: "delete.cut"
         });
 };
-handlers.focus = handlers.blur = view => {
+function updateForFocusChange(view) {
     setTimeout(() => {
         if (view.hasFocus != view.inputState.notifiedFocused)
             view.update([]);
     }, 10);
+}
+handlers.focus = updateForFocusChange;
+handlers.blur = view => {
+    view.observer.clearSelectionRange();
+    updateForFocusChange(view);
 };
 function forceClearComposition(view, rapid) {
     if (view.docView.compositionDeco.size) {
@@ -4742,24 +4749,22 @@ class ViewState {
         this.defaultTextDirection = style.direction == "rtl" ? exports.Direction.RTL : exports.Direction.LTR;
         let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
+        this.contentDOMHeight = dom.clientHeight;
+        this.mustMeasureContent = false;
         let result = 0, bias = 0;
+        // Vertical padding
+        let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
+        if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
+            this.paddingTop = paddingTop;
+            this.paddingBottom = paddingBottom;
+            result |= 8 /* Geometry */ | 2 /* Height */;
+        }
         if (this.editorWidth != view.scrollDOM.clientWidth) {
             if (oracle.lineWrapping)
                 measureContent = true;
             this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* Geometry */;
         }
-        if (measureContent) {
-            this.mustMeasureContent = false;
-            this.contentDOMHeight = dom.clientHeight;
-            // Vertical padding
-            let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
-            if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
-                result |= 8 /* Geometry */;
-                this.paddingTop = paddingTop;
-                this.paddingBottom = paddingBottom;
-            }
-        }
         // Pixel viewport
         let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
@@ -5487,6 +5492,9 @@ class DOMObserver {
         this.selectionRange.set(anchor.node, anchor.offset, head.node, head.offset);
         this.selectionChanged = false;
     }
+    clearSelectionRange() {
+        this.selectionRange.set(null, 0, null, 0);
+    }
     listenForScroll() {
         this.parentCheck = -1;
         let i = 0, changed = null;
@@ -5766,6 +5774,11 @@ function applyDOMChange(view, start, end, typeOver) {
             from: sel.from, to: sel.to,
             insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
         };
+    // Detect insert-period-on-double-space Mac behavior, and transform
+    // it into a regular space insert.
+    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+        change.insert.toString() == ".")
+        change = { from: sel.from, to: sel.to, insert: state.Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
@@ -6040,7 +6053,7 @@ class EditorView {
     update(transactions) {
         if (this.updateState != 0 /* Idle */)
             throw new Error("Calls to EditorView.update are not allowed while an update is in progress");
-        let redrawn = false, update;
+        let redrawn = false, attrsChanged = false, update;
         let state$1 = this.state;
         for (let tr of transactions) {
             if (tr.startState != state$1)
@@ -6054,7 +6067,7 @@ class EditorView {
         // When the phrases change, redraw the editor
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
-        update = new ViewUpdate(this, state$1, transactions);
+        update = ViewUpdate.create(this, state$1, transactions);
         let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* Updating */;
@@ -6078,7 +6091,7 @@ class EditorView {
             redrawn = this.docView.update(update);
             if (this.state.facet(styleModule) != this.styleModules)
                 this.mountStyles();
-            this.updateAttrs();
+            attrsChanged = this.updateAttrs();
             this.showAnnouncements(transactions);
             this.docView.updateSelection(redrawn, transactions.some(tr => tr.isUserEvent("select.pointer")));
         }
@@ -6087,7 +6100,7 @@ class EditorView {
         }
         if (update.startState.facet(theme) != update.state.facet(theme))
             this.viewState.mustMeasureContent = true;
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
+        if (redrawn || attrsChanged || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -6197,7 +6210,7 @@ class EditorView {
                         return BadMeasure;
                     }
                 });
-                let update = new ViewUpdate(this, this.state), redrawn = false, scrolled = false;
+                let update = ViewUpdate.create(this, this.state, []), redrawn = false, scrolled = false;
                 update.flags |= changed;
                 if (!updated)
                     updated = update;
@@ -6267,12 +6280,14 @@ class EditorView {
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
         attrsFromFacet(this, contentAttributes, contentAttrs);
-        this.observer.ignore(() => {
-            updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
-            updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+        let changed = this.observer.ignore(() => {
+            let changedContent = updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+            let changedEditor = updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+            return changedContent || changedEditor;
         });
         this.editorAttrs = editorAttrs;
         this.contentAttrs = contentAttrs;
+        return changed;
     }
     showAnnouncements(trs) {
         let first = true;
@@ -6657,8 +6672,8 @@ 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.
+value to make it read the text direction of every (rendered)
+line separately.
 */
 EditorView.perLineTextDirection = perLineTextDirection;
 /**
@@ -8169,7 +8184,6 @@ class HoverPlugin {
             this.startHover();
     }
     startHover() {
-        var _a;
         clearTimeout(this.restartTimeout);
         let { lastMove } = this;
         let pos = this.view.contentDOM.contains(lastMove.target) ? this.view.posAtCoords(lastMove) : null;
@@ -8183,7 +8197,7 @@ class HoverPlugin {
         let bidi = this.view.bidiSpans(this.view.state.doc.lineAt(pos)).find(s => s.from <= pos && s.to >= pos);
         let rtl = bidi && bidi.dir == exports.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) {
+        if (open === null || open === void 0 ? void 0 : open.then) {
             let pending = this.pending = { pos };
             open.then(result => {
                 if (this.pending == pending) {
@@ -8783,6 +8797,7 @@ class GutterElement {
         this.above = 0;
         this.markers = [];
         this.dom = document.createElement("div");
+        this.dom.className = "cm-gutterElement";
         this.update(view, height, above, markers);
     }
     update(view, height, above, markers) {

package/dist/index.d.ts

@@ -214,6 +214,25 @@ declare abstract class Decoration extends RangeValue {
     your decoration.
     */
     readonly spec: any;
+    protected constructor(
+    /**
+    @internal
+    */
+    startSide: number, 
+    /**
+    @internal
+    */
+    endSide: number, 
+    /**
+    @internal
+    */
+    widget: WidgetType | null, 
+    /**
+    The config object used to create this decoration. You can
+    include additional properties in there to store metadata about
+    your decoration.
+    */
+    spec: any);
     abstract eq(other: Decoration): boolean;
     /**
     Create a mark decoration, which influences the styling of the
@@ -324,10 +343,10 @@ interface PluginSpec<V extends PluginValue> {
     provide?: (plugin: ViewPlugin<V>) => Extension;
     /**
     Allow the plugin to provide decorations. When given, this should
-    a function that take the plugin value and return a [decoration
-    set](https://codemirror.net/6/docs/ref/#view.DecorationSet). See also the caveat about
-    [layout-changing decorations](https://codemirror.net/6/docs/ref/#view.EditorView^decorations)
-    that depend on the view.
+    be a function that take the plugin value and return a
+    [decoration set](https://codemirror.net/6/docs/ref/#view.DecorationSet). See also the caveat about
+    [layout-changing decorations](https://codemirror.net/6/docs/ref/#view.EditorView^decorations) that
+    depend on the view.
     */
     decorations?: (value: V) => DecorationSet;
 }
@@ -398,6 +417,7 @@ declare class ViewUpdate {
     The previous editor state.
     */
     readonly startState: EditorState;
+    private constructor();
     /**
     Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
     [visible ranges](https://codemirror.net/6/docs/ref/#view.EditorView.visibleRanges) changed in this
@@ -968,8 +988,8 @@ declare class EditorView {
     /**
     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.
+    value to make it read the text direction of every (rendered)
+    line separately.
     */
     static perLineTextDirection: Facet<boolean, boolean>;
     /**

package/dist/index.js

@@ -1059,14 +1059,16 @@ function attrsEq(a, b) {
     return true;
 }
 function updateAttrs(dom, prev, attrs) {
+    let changed = null;
     if (prev)
         for (let name in prev)
             if (!(attrs && name in attrs))
-                dom.removeAttribute(name);
+                dom.removeAttribute(changed = name);
     if (attrs)
         for (let name in attrs)
             if (!(prev && prev[name] == attrs[name]))
-                dom.setAttribute(name, attrs[name]);
+                dom.setAttribute(changed = name, attrs[name]);
+    return !!changed;
 }
 
 /**
@@ -1152,9 +1154,6 @@ of content. You'll usually use it wrapped in a
 @nonabstract
 */
 class Decoration extends RangeValue {
-    /**
-    @internal
-    */
     constructor(
     /**
     @internal
@@ -1699,7 +1698,6 @@ class NullWidget extends WidgetType {
     updateDOM(elt) { return elt.nodeName.toLowerCase() == this.tag; }
 }
 
-const none = [];
 const clickAddsSelectionRange = /*@__PURE__*/Facet.define();
 const dragMovesSelection$1 = /*@__PURE__*/Facet.define();
 const mouseSelectionStyle = /*@__PURE__*/Facet.define();
@@ -1918,9 +1916,6 @@ View [plugins](https://codemirror.net/6/docs/ref/#view.ViewPlugin) are given ins
 class, which describe what happened, whenever the view is updated.
 */
 class ViewUpdate {
-    /**
-    @internal
-    */
     constructor(
     /**
     The editor view that the update is associated with.
@@ -1933,7 +1928,7 @@ class ViewUpdate {
     /**
     The transactions involved in the update. May be empty.
     */
-    transactions = none) {
+    transactions) {
         this.view = view;
         this.state = state;
         this.transactions = transactions;
@@ -1955,6 +1950,12 @@ class ViewUpdate {
         }
     }
     /**
+    @internal
+    */
+    static create(view, state, transactions) {
+        return new ViewUpdate(view, state, transactions);
+    }
+    /**
     Tells you whether the [viewport](https://codemirror.net/6/docs/ref/#view.EditorView.viewport) or
     [visible ranges](https://codemirror.net/6/docs/ref/#view.EditorView.visibleRanges) changed in this
     update.
@@ -3314,6 +3315,7 @@ class InputState {
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
+        this.customHandlers = [];
         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 });
@@ -3839,11 +3841,16 @@ handlers.copy = handlers.cut = (view, event) => {
             userEvent: "delete.cut"
         });
 };
-handlers.focus = handlers.blur = view => {
+function updateForFocusChange(view) {
     setTimeout(() => {
         if (view.hasFocus != view.inputState.notifiedFocused)
             view.update([]);
     }, 10);
+}
+handlers.focus = updateForFocusChange;
+handlers.blur = view => {
+    view.observer.clearSelectionRange();
+    updateForFocusChange(view);
 };
 function forceClearComposition(view, rapid) {
     if (view.docView.compositionDeco.size) {
@@ -4735,24 +4742,22 @@ class ViewState {
         this.defaultTextDirection = style.direction == "rtl" ? Direction.RTL : Direction.LTR;
         let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
+        this.contentDOMHeight = dom.clientHeight;
+        this.mustMeasureContent = false;
         let result = 0, bias = 0;
+        // Vertical padding
+        let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
+        if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
+            this.paddingTop = paddingTop;
+            this.paddingBottom = paddingBottom;
+            result |= 8 /* Geometry */ | 2 /* Height */;
+        }
         if (this.editorWidth != view.scrollDOM.clientWidth) {
             if (oracle.lineWrapping)
                 measureContent = true;
             this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* Geometry */;
         }
-        if (measureContent) {
-            this.mustMeasureContent = false;
-            this.contentDOMHeight = dom.clientHeight;
-            // Vertical padding
-            let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
-            if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
-                result |= 8 /* Geometry */;
-                this.paddingTop = paddingTop;
-                this.paddingBottom = paddingBottom;
-            }
-        }
         // Pixel viewport
         let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
@@ -5480,6 +5485,9 @@ class DOMObserver {
         this.selectionRange.set(anchor.node, anchor.offset, head.node, head.offset);
         this.selectionChanged = false;
     }
+    clearSelectionRange() {
+        this.selectionRange.set(null, 0, null, 0);
+    }
     listenForScroll() {
         this.parentCheck = -1;
         let i = 0, changed = null;
@@ -5759,6 +5767,11 @@ function applyDOMChange(view, start, end, typeOver) {
             from: sel.from, to: sel.to,
             insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
         };
+    // Detect insert-period-on-double-space Mac behavior, and transform
+    // it into a regular space insert.
+    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+        change.insert.toString() == ".")
+        change = { from: sel.from, to: sel.to, insert: Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
@@ -6033,7 +6046,7 @@ class EditorView {
     update(transactions) {
         if (this.updateState != 0 /* Idle */)
             throw new Error("Calls to EditorView.update are not allowed while an update is in progress");
-        let redrawn = false, update;
+        let redrawn = false, attrsChanged = false, update;
         let state = this.state;
         for (let tr of transactions) {
             if (tr.startState != state)
@@ -6047,7 +6060,7 @@ class EditorView {
         // When the phrases change, redraw the editor
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);
-        update = new ViewUpdate(this, state, transactions);
+        update = ViewUpdate.create(this, state, transactions);
         let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* Updating */;
@@ -6071,7 +6084,7 @@ class EditorView {
             redrawn = this.docView.update(update);
             if (this.state.facet(styleModule) != this.styleModules)
                 this.mountStyles();
-            this.updateAttrs();
+            attrsChanged = this.updateAttrs();
             this.showAnnouncements(transactions);
             this.docView.updateSelection(redrawn, transactions.some(tr => tr.isUserEvent("select.pointer")));
         }
@@ -6080,7 +6093,7 @@ class EditorView {
         }
         if (update.startState.facet(theme) != update.state.facet(theme))
             this.viewState.mustMeasureContent = true;
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
+        if (redrawn || attrsChanged || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -6190,7 +6203,7 @@ class EditorView {
                         return BadMeasure;
                     }
                 });
-                let update = new ViewUpdate(this, this.state), redrawn = false, scrolled = false;
+                let update = ViewUpdate.create(this, this.state, []), redrawn = false, scrolled = false;
                 update.flags |= changed;
                 if (!updated)
                     updated = update;
@@ -6260,12 +6273,14 @@ class EditorView {
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
         attrsFromFacet(this, contentAttributes, contentAttrs);
-        this.observer.ignore(() => {
-            updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
-            updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+        let changed = this.observer.ignore(() => {
+            let changedContent = updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+            let changedEditor = updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+            return changedContent || changedEditor;
         });
         this.editorAttrs = editorAttrs;
         this.contentAttrs = contentAttrs;
+        return changed;
     }
     showAnnouncements(trs) {
         let first = true;
@@ -6650,8 +6665,8 @@ 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.
+value to make it read the text direction of every (rendered)
+line separately.
 */
 EditorView.perLineTextDirection = perLineTextDirection;
 /**
@@ -8162,7 +8177,6 @@ class HoverPlugin {
             this.startHover();
     }
     startHover() {
-        var _a;
         clearTimeout(this.restartTimeout);
         let { lastMove } = this;
         let pos = this.view.contentDOM.contains(lastMove.target) ? this.view.posAtCoords(lastMove) : null;
@@ -8176,7 +8190,7 @@ class HoverPlugin {
         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) {
+        if (open === null || open === void 0 ? void 0 : open.then) {
             let pending = this.pending = { pos };
             open.then(result => {
                 if (this.pending == pending) {
@@ -8776,6 +8790,7 @@ class GutterElement {
         this.above = 0;
         this.markers = [];
         this.dom = document.createElement("div");
+        this.dom.className = "cm-gutterElement";
         this.update(view, height, above, markers);
     }
     update(view, height, above, markers) {

package/package.json

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