prosemirror-view 1.26.4 → 1.27.1

package/dist/index.js

@@ -422,7 +422,7 @@ const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
 // Given a position in the document model, get a bounding box of the
 // character at that position, relative to the window.
 function coordsAtPos(view, pos, side) {
-    let { node, offset } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
+    let { node, offset, atom } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
     let supportEmptyRange = webkit || gecko;
     if (node.nodeType == 3) {
         // These browsers support querying empty text ranges. Prefer that in
@@ -458,17 +458,18 @@ function coordsAtPos(view, pos, side) {
             else {
                 to++;
             }
-            return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
+            return flattenV(singleRect(textRange(node, from, to), 1), takeSide < 0);
         }
     }
+    let $dom = view.state.doc.resolve(pos - (atom || 0));
     // Return a horizontal line in block context
-    if (!view.state.doc.resolve(pos).parent.inlineContent) {
-        if (offset && (side < 0 || offset == nodeSize(node))) {
+    if (!$dom.parent.inlineContent) {
+        if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
             let before = node.childNodes[offset - 1];
             if (before.nodeType == 1)
                 return flattenH(before.getBoundingClientRect(), false);
         }
-        if (offset < nodeSize(node)) {
+        if (atom == null && offset < nodeSize(node)) {
             let after = node.childNodes[offset];
             if (after.nodeType == 1)
                 return flattenH(after.getBoundingClientRect(), true);
@@ -476,7 +477,7 @@ function coordsAtPos(view, pos, side) {
         return flattenH(node.getBoundingClientRect(), side >= 0);
     }
     // Inline, not in text node (this is not Bidi-safe)
-    if (offset && (side < 0 || offset == nodeSize(node))) {
+    if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
         let before = node.childNodes[offset - 1];
         let target = before.nodeType == 3 ? textRange(before, nodeSize(before) - (supportEmptyRange ? 0 : 1))
             // BR nodes tend to only return the rectangle before them.
@@ -485,7 +486,7 @@ function coordsAtPos(view, pos, side) {
         if (target)
             return flattenV(singleRect(target, 1), false);
     }
-    if (offset < nodeSize(node)) {
+    if (atom == null && offset < nodeSize(node)) {
         let after = node.childNodes[offset];
         while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords)
             after = after.nextSibling;
@@ -797,7 +798,7 @@ class ViewDesc {
     }
     domFromPos(pos, side) {
         if (!this.contentDOM)
-            return { node: this.dom, offset: 0 };
+            return { node: this.dom, offset: 0, atom: pos + 1 };
         // First find the position in the child array
         let i = 0, offset = 0;
         for (let curPos = 0; i < this.children.length; i++) {
@@ -1241,7 +1242,7 @@ class NodeViewDesc extends ViewDesc {
         let composition = view.composing ? this.localCompositionInfo(view, pos) : null;
         let localComposition = composition && composition.pos > -1 ? composition : null;
         let compositionInChild = composition && composition.pos < 0;
-        let updater = new ViewTreeUpdater(this, localComposition && localComposition.node);
+        let updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view);
         iterDeco(this.node, this.innerDeco, (widget, i, insideNode) => {
             if (widget.spec.marks)
                 updater.syncToMarks(widget.spec.marks, inline, view);
@@ -1623,8 +1624,9 @@ function rm(dom) {
 // Helper class for incrementally updating a tree of mark descs and
 // the widget and node descs inside of them.
 class ViewTreeUpdater {
-    constructor(top, lock) {
+    constructor(top, lock, view) {
         this.lock = lock;
+        this.view = view;
         // Index into `this.top`'s child array, represents the current
         // update position.
         this.index = 0;
@@ -1723,7 +1725,7 @@ class ViewTreeUpdater {
         if (!child.update(node, outerDeco, innerDeco, view))
             return false;
         this.destroyBetween(this.index, index);
-        this.index = index + 1;
+        this.index++;
         return true;
     }
     findIndexWithChild(domNode) {
@@ -1798,7 +1800,8 @@ class ViewTreeUpdater {
         }
         if (!lastChild || // Empty textblock
             !(lastChild instanceof TextViewDesc) ||
-            /\n$/.test(lastChild.node.text)) {
+            /\n$/.test(lastChild.node.text) ||
+            (this.view.requiresGeckoHackNode && /\s$/.test(lastChild.node.text))) {
             // Avoid bugs in Safari's cursor drawing (#1165) and Chrome's mouse selection (#1152)
             if ((safari || chrome) && lastChild && lastChild.dom.contentEditable == "false")
                 this.addHackNode("IMG", parent);
@@ -2771,7 +2774,8 @@ function addContext(slice, context) {
 // A collection of DOM events that occur within the editor, and callback functions
 // to invoke when the event fires.
 const handlers = {};
-let editHandlers = {};
+const editHandlers = {};
+const passiveHandlers = { touchstart: true, touchmove: true };
 class InputState {
     constructor() {
         this.shiftKey = false;
@@ -2783,6 +2787,8 @@ class InputState {
         this.lastSelectionTime = 0;
         this.lastIOSEnter = 0;
         this.lastIOSEnterFallbackTimeout = -1;
+        this.lastFocus = 0;
+        this.lastTouch = 0;
         this.lastAndroidDelete = 0;
         this.composing = false;
         this.composingTimeout = -1;
@@ -2800,7 +2806,7 @@ function initInput(view) {
             if (eventBelongsToView(view, event) && !runCustomHandler(view, event) &&
                 (view.editable || !(event.type in editHandlers)))
                 handler(view, event);
-        });
+        }, passiveHandlers[event] ? { passive: true } : undefined);
     }
     // On Safari, for reasons beyond my understanding, adding an input
     // event handler makes an issue where the composition vanishes when
@@ -3140,10 +3146,15 @@ class MouseDown {
             this.done();
     }
 }
-handlers.touchdown = view => {
+handlers.touchstart = view => {
+    view.input.lastTouch = Date.now();
     forceDOMFlush(view);
     setSelectionOrigin(view, "pointer");
 };
+handlers.touchmove = view => {
+    view.input.lastTouch = Date.now();
+    setSelectionOrigin(view, "pointer");
+};
 handlers.contextmenu = view => forceDOMFlush(view);
 function inOrNearComposition(view, event) {
     if (view.composing)
@@ -3395,8 +3406,6 @@ editHandlers.drop = (view, _event) => {
     if (!eventPos)
         return;
     let $mouse = view.state.doc.resolve(eventPos.pos);
-    if (!$mouse)
-        return;
     let slice = dragging && dragging.slice;
     if (slice) {
         view.someProp("transformPasted", f => { slice = f(slice); });
@@ -3441,6 +3450,7 @@ editHandlers.drop = (view, _event) => {
     view.dispatch(tr.setMeta("uiEvent", "drop"));
 };
 handlers.focus = view => {
+    view.input.lastFocus = Date.now();
     if (!view.focused) {
         view.domObserver.stop();
         view.dom.classList.add("ProseMirror-focused");
@@ -3955,23 +3965,26 @@ function mapChildren(oldChildren, newLocal, mapping, node, offset, oldOffset, op
     let children = oldChildren.slice();
     // Mark the children that are directly touched by changes, and
     // move those that are after the changes.
-    let shift = (oldStart, oldEnd, newStart, newEnd) => {
-        for (let i = 0; i < children.length; i += 3) {
-            let end = children[i + 1], dSize;
-            if (end < 0 || oldStart > end + oldOffset)
-                continue;
-            let start = children[i] + oldOffset;
-            if (oldEnd >= start) {
-                children[i + 1] = oldStart <= start ? -2 : -1;
-            }
-            else if (newStart >= offset && (dSize = (newEnd - newStart) - (oldEnd - oldStart))) {
-                children[i] += dSize;
-                children[i + 1] += dSize;
+    for (let i = 0; i < mapping.maps.length; i++) {
+        let moved = 0;
+        mapping.maps[i].forEach((oldStart, oldEnd, newStart, newEnd) => {
+            let dSize = (newEnd - newStart) - (oldEnd - oldStart);
+            for (let i = 0; i < children.length; i += 3) {
+                let end = children[i + 1];
+                if (end < 0 || oldStart > end + oldOffset - moved)
+                    continue;
+                let start = children[i] + oldOffset - moved;
+                if (oldEnd >= start) {
+                    children[i + 1] = oldStart <= start ? -2 : -1;
+                }
+                else if (newStart >= offset && dSize) {
+                    children[i] += dSize;
+                    children[i + 1] += dSize;
+                }
             }
-        }
-    };
-    for (let i = 0; i < mapping.maps.length; i++)
-        mapping.maps[i].forEach(shift);
+            moved += dSize;
+        });
+    }
     // Find the child nodes that still correspond to a single node,
     // recursively call mapInner on them and update their positions.
     let mustRebuild = false;
@@ -4299,17 +4312,18 @@ class DOMObserver {
         }
     }
     flush() {
-        if (!this.view.docView || this.flushingSoon > -1)
+        let { view } = this;
+        if (!view.docView || this.flushingSoon > -1)
             return;
         let mutations = this.observer ? this.observer.takeRecords() : [];
         if (this.queue.length) {
             mutations = this.queue.concat(mutations);
             this.queue.length = 0;
         }
-        let sel = this.view.domSelection();
-        let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel);
+        let sel = view.domSelection();
+        let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
         let from = -1, to = -1, typeOver = false, added = [];
-        if (this.view.editable) {
+        if (view.editable) {
             for (let i = 0; i < mutations.length; i++) {
                 let result = this.registerMutation(mutations[i], added);
                 if (result) {
@@ -4330,16 +4344,29 @@ class DOMObserver {
                     a.remove();
             }
         }
-        if (from > -1 || newSel) {
+        let readSel = null;
+        // If it looks like the browser has reset the selection to the
+        // start of the document after focus, restore the selection from
+        // the state
+        if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 &&
+            view.input.lastTouch < Date.now() - 300 &&
+            selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) &&
+            readSel.eq(Selection.near(view.state.doc.resolve(0), 1))) {
+            view.input.lastFocus = 0;
+            selectionToDOM(view);
+            this.currentSelection.set(sel);
+            view.scrollToSelection();
+        }
+        else if (from > -1 || newSel) {
             if (from > -1) {
-                this.view.docView.markDirty(from, to);
-                checkCSS(this.view);
+                view.docView.markDirty(from, to);
+                checkCSS(view);
             }
             this.handleDOMChange(from, to, typeOver, added);
-            if (this.view.docView && this.view.docView.dirty)
-                this.view.updateState(this.view.state);
+            if (view.docView && view.docView.dirty)
+                view.updateState(view.state);
             else if (!this.currentSelection.eq(sel))
-                selectionToDOM(this.view);
+                selectionToDOM(view);
             this.currentSelection.set(sel);
         }
     }
@@ -4396,13 +4423,19 @@ class DOMObserver {
         }
     }
 }
-let cssChecked = false;
+let cssChecked = new WeakMap();
+let cssCheckWarned = false;
 function checkCSS(view) {
-    if (cssChecked)
+    if (cssChecked.has(view))
         return;
-    cssChecked = true;
-    if (getComputedStyle(view.dom).whiteSpace == "normal")
+    cssChecked.set(view, null);
+    if (['normal', 'nowrap', 'pre-line'].indexOf(getComputedStyle(view.dom).whiteSpace) !== -1) {
+        view.requiresGeckoHackNode = gecko;
+        if (cssCheckWarned)
+            return;
         console["warn"]("ProseMirror expects the CSS white-space property to be set, preferably to 'pre-wrap'. It is recommended to load style/prosemirror.css from the prosemirror-view package.");
+        cssCheckWarned = true;
+    }
 }
 
 // Note that all referencing and parsing is done with the
@@ -4500,7 +4533,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     let parse = parseBetween(view, from, to);
     // Chrome sometimes leaves the cursor before the inserted text when
     // composing after a cursor wrapper. This moves it forward.
-    if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from) {
+    if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from &&
+        parse.sel.head == parse.sel.anchor) {
         let text = view.cursorWrapper.deco.type.toDOM.nextSibling;
         let size = text && text.nodeValue ? text.nodeValue.length : 1;
         parse.sel = { anchor: parse.sel.anchor + size, head: parse.sel.anchor + size };
@@ -4808,6 +4842,12 @@ class EditorView {
         this.prevDirectPlugins = [];
         this.pluginViews = [];
         /**
+        Holds `true` when a hack node is needed in Firefox to prevent the
+        [space is eaten issue](https://github.com/ProseMirror/prosemirror/issues/651)
+        @internal
+        */
+        this.requiresGeckoHackNode = false;
+        /**
         When editor content is being dragged, this object contains
         information about the dragged slice and whether it is being
         copied or moved. At any other time, it is null.
@@ -4958,21 +4998,27 @@ class EditorView {
             this.dom.scrollTop = 0;
         }
         else if (scroll == "to selection") {
-            let startDOM = this.domSelection().focusNode;
-            if (this.someProp("handleScrollToSelection", f => f(this))) ;
-            else if (state.selection instanceof NodeSelection) {
-                let target = this.docView.domAfterPos(state.selection.from);
-                if (target.nodeType == 1)
-                    scrollRectIntoView(this, target.getBoundingClientRect(), startDOM);
-            }
-            else {
-                scrollRectIntoView(this, this.coordsAtPos(state.selection.head, 1), startDOM);
-            }
+            this.scrollToSelection();
         }
         else if (oldScrollPos) {
             resetScrollPos(oldScrollPos);
         }
     }
+    /**
+    @internal
+    */
+    scrollToSelection() {
+        let startDOM = this.domSelection().focusNode;
+        if (this.someProp("handleScrollToSelection", f => f(this))) ;
+        else if (this.state.selection instanceof NodeSelection) {
+            let target = this.docView.domAfterPos(this.state.selection.from);
+            if (target.nodeType == 1)
+                scrollRectIntoView(this, target.getBoundingClientRect(), startDOM);
+        }
+        else {
+            scrollRectIntoView(this, this.coordsAtPos(this.state.selection.head, 1), startDOM);
+        }
+    }
     destroyPluginViews() {
         let view;
         while (view = this.pluginViews.pop())

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-view",
-  "version": "1.26.4",
+  "version": "1.27.1",
   "description": "ProseMirror's view component",
   "type": "module",
   "main": "dist/index.cjs",

package/src/decoration.ts

@@ -550,20 +550,24 @@ function mapChildren(
 
   // Mark the children that are directly touched by changes, and
   // move those that are after the changes.
-  let shift = (oldStart: number, oldEnd: number, newStart: number, newEnd: number) => {
-    for (let i = 0; i < children.length; i += 3) {
-      let end = children[i + 1] as number, dSize
-      if (end < 0 || oldStart > end + oldOffset) continue
-      let start = (children[i] as number) + oldOffset
-      if (oldEnd >= start) {
-        children[i + 1] = oldStart <= start ? -2 : -1
-      } else if (newStart >= offset && (dSize = (newEnd - newStart) - (oldEnd - oldStart))) {
-        ;(children[i] as number) += dSize
-        ;(children[i + 1] as number) += dSize
+  for (let i = 0; i < mapping.maps.length; i++) {
+    let moved = 0
+    mapping.maps[i].forEach((oldStart: number, oldEnd: number, newStart: number, newEnd: number) => {
+      let dSize = (newEnd - newStart) - (oldEnd - oldStart)
+      for (let i = 0; i < children.length; i += 3) {
+        let end = children[i + 1] as number
+        if (end < 0 || oldStart > end + oldOffset - moved) continue
+        let start = (children[i] as number) + oldOffset - moved
+        if (oldEnd >= start) {
+          children[i + 1] = oldStart <= start ? -2 : -1
+        } else if (newStart >= offset && dSize) {
+          ;(children[i] as number) += dSize
+          ;(children[i + 1] as number) += dSize
+        }
       }
-    }
+      moved += dSize
+    })
   }
-  for (let i = 0; i < mapping.maps.length; i++) mapping.maps[i].forEach(shift)
 
   // Find the child nodes that still correspond to a single node,
   // recursively call mapInner on them and update their positions.

package/src/domchange.ts

@@ -99,7 +99,8 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
 
   // Chrome sometimes leaves the cursor before the inserted text when
   // composing after a cursor wrapper. This moves it forward.
-  if (browser.chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from) {
+  if (browser.chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from &&
+      parse.sel.head == parse.sel.anchor) {
     let text = (view.cursorWrapper.deco.type as any).toDOM.nextSibling as DOMNode
     let size = text && text.nodeValue ? text.nodeValue.length : 1
     parse.sel = {anchor: parse.sel.anchor + size, head: parse.sel.anchor + size}

package/src/domcoords.ts

@@ -315,7 +315,7 @@ const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/
 // Given a position in the document model, get a bounding box of the
 // character at that position, relative to the window.
 export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
-  let {node, offset} = view.docView.domFromPos(pos, side < 0 ? -1 : 1)
+  let {node, offset, atom} = view.docView.domFromPos(pos, side < 0 ? -1 : 1)
 
   let supportEmptyRange = browser.webkit || browser.gecko
   if (node.nodeType == 3) {
@@ -341,17 +341,18 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
       else if (side >= 0 && offset == node.nodeValue!.length) { from--; takeSide = 1 }
       else if (side < 0) { from-- }
       else { to ++ }
-      return flattenV(singleRect(textRange(node as Text, from, to), takeSide), takeSide < 0)
+      return flattenV(singleRect(textRange(node as Text, from, to), 1), takeSide < 0)
     }
   }
 
+  let $dom = view.state.doc.resolve(pos - (atom || 0))
   // Return a horizontal line in block context
-  if (!view.state.doc.resolve(pos).parent.inlineContent) {
-    if (offset && (side < 0 || offset == nodeSize(node))) {
+  if (!$dom.parent.inlineContent) {
+    if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
       let before = node.childNodes[offset - 1]
       if (before.nodeType == 1) return flattenH((before as HTMLElement).getBoundingClientRect(), false)
     }
-    if (offset < nodeSize(node)) {
+    if (atom == null && offset < nodeSize(node)) {
       let after = node.childNodes[offset]
       if (after.nodeType == 1) return flattenH((after as HTMLElement).getBoundingClientRect(), true)
     }
@@ -359,7 +360,7 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
   }
 
   // Inline, not in text node (this is not Bidi-safe)
-  if (offset && (side < 0 || offset == nodeSize(node))) {
+  if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
     let before = node.childNodes[offset - 1]
     let target = before.nodeType == 3 ? textRange(before as Text, nodeSize(before) - (supportEmptyRange ? 0 : 1))
         // BR nodes tend to only return the rectangle before them.
@@ -367,7 +368,7 @@ export function coordsAtPos(view: EditorView, pos: number, side: number): Rect {
         : before.nodeType == 1 && (before.nodeName != "BR" || !before.nextSibling) ? before : null
     if (target) return flattenV(singleRect(target as Range | HTMLElement, 1), false)
   }
-  if (offset < nodeSize(node)) {
+  if (atom == null && offset < nodeSize(node)) {
     let after = node.childNodes[offset]
     while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords) after = after.nextSibling!
     let target = !after ? null : after.nodeType == 3 ? textRange(after as Text, 0, (supportEmptyRange ? 0 : 1))

package/src/domobserver.ts

@@ -1,6 +1,7 @@
+import {Selection} from "prosemirror-state"
 import * as browser from "./browser"
-import {domIndex, isEquivalentPosition} from "./dom"
-import {hasFocusAndSelection, selectionToDOM} from "./selection"
+import {domIndex, isEquivalentPosition, selectionCollapsed, DOMSelection} from "./dom"
+import {hasFocusAndSelection, selectionToDOM, selectionFromDOM} from "./selection"
 import {EditorView} from "./index"
 
 const observeOptions = {
@@ -20,7 +21,7 @@ class SelectionState {
   focusNode: Node | null = null
   focusOffset: number = 0
 
-  set(sel: Selection) {
+  set(sel: DOMSelection) {
     this.anchorNode = sel.anchorNode; this.anchorOffset = sel.anchorOffset
     this.focusNode = sel.focusNode; this.focusOffset = sel.focusOffset
   }
@@ -29,7 +30,7 @@ class SelectionState {
     this.anchorNode = this.focusNode = null
   }
 
-  eq(sel: Selection) {
+  eq(sel: DOMSelection) {
     return sel.anchorNode == this.anchorNode && sel.anchorOffset == this.anchorOffset &&
       sel.focusNode == this.focusNode && sel.focusOffset == this.focusOffset
   }
@@ -138,7 +139,7 @@ export class DOMObserver {
     this.currentSelection.set(this.view.domSelection())
   }
 
-  ignoreSelectionChange(sel: Selection) {
+  ignoreSelectionChange(sel: DOMSelection) {
     if (sel.rangeCount == 0) return true
     let container = sel.getRangeAt(0).commonAncestorContainer
     let desc = this.view.docView.nearestDesc(container)
@@ -152,18 +153,19 @@ export class DOMObserver {
   }
 
   flush() {
-    if (!this.view.docView || this.flushingSoon > -1) return
+    let {view} = this
+    if (!view.docView || this.flushingSoon > -1) return
     let mutations = this.observer ? this.observer.takeRecords() : []
     if (this.queue.length) {
       mutations = this.queue.concat(mutations)
       this.queue.length = 0
     }
 
-    let sel = this.view.domSelection()
-    let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel)
+    let sel = view.domSelection()
+    let newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel)
 
     let from = -1, to = -1, typeOver = false, added: Node[] = []
-    if (this.view.editable) {
+    if (view.editable) {
       for (let i = 0; i < mutations.length; i++) {
         let result = this.registerMutation(mutations[i], added)
         if (result) {
@@ -183,14 +185,26 @@ export class DOMObserver {
       }
     }
 
-    if (from > -1 || newSel) {
+    let readSel: Selection | null = null
+    // If it looks like the browser has reset the selection to the
+    // start of the document after focus, restore the selection from
+    // the state
+    if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 &&
+        view.input.lastTouch < Date.now() - 300 &&
+        selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) &&
+        readSel.eq(Selection.near(view.state.doc.resolve(0), 1))) {
+      view.input.lastFocus = 0
+      selectionToDOM(view)
+      this.currentSelection.set(sel)
+      view.scrollToSelection()
+    } else if (from > -1 || newSel) {
       if (from > -1) {
-        this.view.docView.markDirty(from, to)
-        checkCSS(this.view)
+        view.docView.markDirty(from, to)
+        checkCSS(view)
       }
       this.handleDOMChange(from, to, typeOver, added)
-      if (this.view.docView && this.view.docView.dirty) this.view.updateState(this.view.state)
-      else if (!this.currentSelection.eq(sel)) selectionToDOM(this.view)
+      if (view.docView && view.docView.dirty) view.updateState(view.state)
+      else if (!this.currentSelection.eq(sel)) selectionToDOM(view)
       this.currentSelection.set(sel)
     }
   }
@@ -243,11 +257,16 @@ export class DOMObserver {
   }
 }
 
-let cssChecked = false
+let cssChecked: WeakMap<EditorView, null> = new WeakMap()
+let cssCheckWarned: boolean = false
 
 function checkCSS(view: EditorView) {
-  if (cssChecked) return
-  cssChecked = true
-  if (getComputedStyle(view.dom).whiteSpace == "normal")
+  if (cssChecked.has(view)) return
+  cssChecked.set(view, null)
+  if (['normal', 'nowrap', 'pre-line'].indexOf(getComputedStyle(view.dom).whiteSpace) !== -1) {
+    view.requiresGeckoHackNode = browser.gecko
+    if (cssCheckWarned) return
     console["warn"]("ProseMirror expects the CSS white-space property to be set, preferably to 'pre-wrap'. It is recommended to load style/prosemirror.css from the prosemirror-view package.")
+    cssCheckWarned = true
+  }
 }