@codemirror/view 0.19.47 → 0.19.48

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.19.48 (2022-03-30)
+
+### Bug fixes
+
+Fix an issue where DOM syncing could crash when a DOM node was moved from a parent to a child node (via widgets reusing existing nodes).
+
+To avoid interfering with things like a vim mode too much, the editor will now only activate the tab-to-move-focus escape hatch after an escape press that wasn't handled by an event handler.
+
+Make sure the view measures itself before the page is printed.
+
+Tweak types of view plugin defining functions to avoid TypeScript errors when the plugin value doesn't have any of the interface's properties.
+
 ## 0.19.47 (2022-03-08)
 
 ### Bug fixes

package/dist/index.cjs

@@ -318,32 +318,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(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(next);
         }
         else if (this.dirty & 1 /* Child */) {
             for (let child of this.children)
@@ -3373,10 +3375,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))
@@ -3444,7 +3446,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
@@ -3494,14 +3496,6 @@ class InputState {
         }
         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;
@@ -3675,6 +3669,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) => {
@@ -3932,14 +3930,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;
@@ -4695,6 +4685,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.
@@ -4851,8 +4846,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;
@@ -5429,6 +5423,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") {
@@ -5463,6 +5458,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();
@@ -5680,6 +5683,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);

package/dist/index.d.ts

@@ -413,12 +413,12 @@ declare class ViewPlugin<V extends PluginValue> {
     Define a plugin from a constructor function that creates the
     plugin's value, given an editor view.
     */
-    static define<V extends PluginValue>(create: (view: EditorView) => V, spec?: PluginSpec<V>): ViewPlugin<V>;
+    static define<V extends PluginValue & object>(create: (view: EditorView) => V, spec?: PluginSpec<V>): ViewPlugin<V>;
     /**
     Create a plugin for a class whose constructor takes a single
     editor view as argument.
     */
-    static fromClass<V extends PluginValue>(cls: {
+    static fromClass<V extends PluginValue & object>(cls: {
         new (view: EditorView): V;
     }, spec?: PluginSpec<V>): ViewPlugin<V>;
 }

package/dist/index.js

@@ -315,32 +315,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(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(next);
         }
         else if (this.dirty & 1 /* Child */) {
             for (let child of this.children)
@@ -3368,10 +3370,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))
@@ -3439,7 +3441,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
@@ -3489,14 +3491,6 @@ class InputState {
         }
         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 +3664,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 +3925,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;
@@ -4689,6 +4679,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.
@@ -4845,8 +4840,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;
@@ -5423,6 +5417,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 +5452,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 +5677,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);

package/package.json

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