prosemirror-view 1.27.0 → 1.28.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## 1.28.0 (2022-09-09)
+
+### Bug fixes
+
+Fix an issue where the editor wouldn't realize it was focused on IE when IE's resize controls are on an element inside the content. Adjust Chrome click-override behavior to only happen for invisible selections
+
+### New features
+
+The new `transformCopied` prop can be used to transform a copied/cut slice before it is serialized to the clipboard. Adjust doc comment
+
+## 1.27.2 (2022-08-19)
+
+### Bug fixes
+
+Fix an issue where `DecorationSet.map`, given a mapping with multiple steps, could in some cases corrupt the decorations.
+
+Stop calling `handleClick` when the mouse moved but failed to fire mousemove events (for example when dragging a scrollbar).
+
+## 1.27.1 (2022-08-16)
+
+### Bug fixes
+
+Fix a bug in `DecorationSet.map` that could cause invalid mapping when step maps contain multiple replaced ranges.
+
+Make sure that when the editor receives focus via tab or calling `.focus()` on its DOM element, the existing selection is restored.
+
+Avoid collapsing of whitespace in Firefox when the editor doesn't have `white-space` set to `pre-wrap`.
+
 ## 1.27.0 (2022-07-20)
 
 ### Bug fixes

package/dist/index.cjs

@@ -531,7 +531,7 @@ function _coordsAtPos(view, pos, side) {
         to++;
       }
 
-      return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
+      return flattenV(singleRect(textRange(node, from, to), 1), takeSide < 0);
     }
   }
 
@@ -1462,7 +1462,7 @@ var NodeViewDesc = function (_ViewDesc4) {
       var composition = view.composing ? this.localCompositionInfo(view, pos) : null;
       var localComposition = composition && composition.pos > -1 ? composition : null;
       var compositionInChild = composition && composition.pos < 0;
-      var updater = new ViewTreeUpdater(this, localComposition && localComposition.node);
+      var updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view);
       iterDeco(this.node, this.innerDeco, function (widget, i, insideNode) {
         if (widget.spec.marks) updater.syncToMarks(widget.spec.marks, inline, view);else if (widget.type.side >= 0 && !insideNode) updater.syncToMarks(i == _this6.node.childCount ? prosemirrorModel.Mark.none : _this6.node.child(i).marks, inline, view);
         updater.placeWidget(widget, view, off);
@@ -1974,10 +1974,11 @@ function rm(dom) {
 }
 
 var ViewTreeUpdater = function () {
-  function ViewTreeUpdater(top, lock) {
+  function ViewTreeUpdater(top, lock, view) {
     _classCallCheck(this, ViewTreeUpdater);
 
     this.lock = lock;
+    this.view = view;
     this.index = 0;
     this.stack = [];
     this.changed = false;
@@ -2158,7 +2159,7 @@ var ViewTreeUpdater = function () {
         lastChild = parent.children[parent.children.length - 1];
       }
 
-      if (!lastChild || !(lastChild instanceof TextViewDesc) || /\n$/.test(lastChild.node.text)) {
+      if (!lastChild || !(lastChild instanceof TextViewDesc) || /\n$/.test(lastChild.node.text) || this.view.requiresGeckoHackNode && /\s$/.test(lastChild.node.text)) {
         if ((safari || chrome) && lastChild && lastChild.dom.contentEditable == "false") this.addHackNode("IMG", parent);
         this.addHackNode("BR", this.top);
       }
@@ -2589,7 +2590,7 @@ function selectionBetween(view, $anchor, $head, bias) {
 }
 
 function hasFocusAndSelection(view) {
-  if (view.editable && view.root.activeElement != view.dom) return false;
+  if (view.editable && !view.hasFocus()) return false;
   return hasSelection(view);
 }
 
@@ -2886,10 +2887,14 @@ function captureKeyDown(view, event) {
 }
 
 function serializeForClipboard(view, slice) {
+  view.someProp("transformCopied", function (f) {
+    slice = f(slice);
+  });
   var context = [],
-      content = slice.content,
-      openStart = slice.openStart,
-      openEnd = slice.openEnd;
+      _slice = slice,
+      content = _slice.content,
+      openStart = _slice.openStart,
+      openEnd = _slice.openEnd;
 
   while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild.childCount == 1) {
     openStart--;
@@ -3164,6 +3169,10 @@ function addContext(slice, context) {
 
 var handlers = {};
 var editHandlers = {};
+var passiveHandlers = {
+  touchstart: true,
+  touchmove: true
+};
 
 var InputState = _createClass(function InputState() {
   _classCallCheck(this, InputState);
@@ -3182,6 +3191,8 @@ var InputState = _createClass(function 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;
@@ -3197,7 +3208,9 @@ function initInput(view) {
     var handler = handlers[event];
     view.dom.addEventListener(event, view.input.eventHandlers[event] = function (event) {
       if (eventBelongsToView(view, event) && !runCustomHandler(view, event) && (view.editable || !(event.type in editHandlers))) handler(view, event);
-    });
+    }, passiveHandlers[event] ? {
+      passive: true
+    } : undefined);
   };
 
   for (var event in handlers) {
@@ -3547,12 +3560,13 @@ var MouseDown = function () {
       if (!this.view.dom.contains(event.target)) return;
       var pos = this.pos;
       if (this.view.state.doc != this.startDoc) pos = this.view.posAtCoords(eventCoords(event));
+      this.updateAllowDefault(event);
 
       if (this.allowDefault || !pos) {
         setSelectionOrigin(this.view, "pointer");
       } else if (handleSingleClick(this.view, pos.pos, pos.inside, event, this.selectNode)) {
         event.preventDefault();
-      } else if (event.button == 0 && (this.flushed || safari && this.mightDrag && !this.mightDrag.node.isAtom || chrome && !(this.view.state.selection instanceof prosemirrorState.TextSelection) && Math.min(Math.abs(pos.pos - this.view.state.selection.from), Math.abs(pos.pos - this.view.state.selection.to)) <= 2)) {
+      } else if (event.button == 0 && (this.flushed || safari && this.mightDrag && !this.mightDrag.node.isAtom || chrome && !this.view.state.selection.visible && Math.min(Math.abs(pos.pos - this.view.state.selection.from), Math.abs(pos.pos - this.view.state.selection.to)) <= 2)) {
         updateSelection(this.view, prosemirrorState.Selection.near(this.view.state.doc.resolve(pos.pos)), "pointer");
         event.preventDefault();
       } else {
@@ -3562,20 +3576,31 @@ var MouseDown = function () {
   }, {
     key: "move",
     value: function move(event) {
-      if (!this.allowDefault && (Math.abs(this.event.x - event.clientX) > 4 || Math.abs(this.event.y - event.clientY) > 4)) this.allowDefault = true;
+      this.updateAllowDefault(event);
       setSelectionOrigin(this.view, "pointer");
       if (event.buttons == 0) this.done();
     }
+  }, {
+    key: "updateAllowDefault",
+    value: function updateAllowDefault(event) {
+      if (!this.allowDefault && (Math.abs(this.event.x - event.clientX) > 4 || Math.abs(this.event.y - event.clientY) > 4)) this.allowDefault = true;
+    }
   }]);
 
   return MouseDown;
 }();
 
-handlers.touchdown = function (view) {
+handlers.touchstart = function (view) {
+  view.input.lastTouch = Date.now();
   forceDOMFlush(view);
   setSelectionOrigin(view, "pointer");
 };
 
+handlers.touchmove = function (view) {
+  view.input.lastTouch = Date.now();
+  setSelectionOrigin(view, "pointer");
+};
+
 handlers.contextmenu = function (view) {
   return forceDOMFlush(view);
 };
@@ -3813,7 +3838,6 @@ editHandlers.drop = function (view, _event) {
   var eventPos = view.posAtCoords(eventCoords(event));
   if (!eventPos) return;
   var $mouse = view.state.doc.resolve(eventPos.pos);
-  if (!$mouse) return;
   var slice = dragging && dragging.slice;
 
   if (slice) {
@@ -3861,6 +3885,8 @@ editHandlers.drop = function (view, _event) {
 };
 
 handlers.focus = function (view) {
+  view.input.lastFocus = Date.now();
+
   if (!view.focused) {
     view.domObserver.stop();
     view.dom.classList.add("ProseMirror-focused");
@@ -4400,24 +4426,32 @@ var DecorationGroup = function () {
 function mapChildren(oldChildren, newLocal, mapping, node, offset, oldOffset, options) {
   var children = oldChildren.slice();
 
-  var shift = function shift(oldStart, oldEnd, newStart, newEnd) {
-    for (var i = 0; i < children.length; i += 3) {
-      var end = children[i + 1],
-          dSize = void 0;
-      if (end < 0 || oldStart > end + oldOffset) continue;
-      var 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;
+  var _loop4 = function _loop4(i, _baseOffset) {
+    var moved = 0;
+    mapping.maps[i].forEach(function (oldStart, oldEnd, newStart, newEnd) {
+      var dSize = newEnd - newStart - (oldEnd - oldStart);
+
+      for (var _i12 = 0; _i12 < children.length; _i12 += 3) {
+        var end = children[_i12 + 1];
+        if (end < 0 || oldStart > end + _baseOffset - moved) continue;
+        var start = children[_i12] + _baseOffset - moved;
+
+        if (oldEnd >= start) {
+          children[_i12 + 1] = oldStart <= start ? -2 : -1;
+        } else if (newStart >= offset && dSize) {
+          children[_i12] += dSize;
+          children[_i12 + 1] += dSize;
+        }
       }
-    }
+
+      moved += dSize;
+    });
+    _baseOffset = mapping.maps[i].map(_baseOffset, -1);
+    baseOffset = _baseOffset;
   };
 
-  for (var i = 0; i < mapping.maps.length; i++) {
-    mapping.maps[i].forEach(shift);
+  for (var i = 0, baseOffset = oldOffset; i < mapping.maps.length; i++) {
+    _loop4(i, baseOffset);
   }
 
   var mustRebuild = false;
@@ -4509,8 +4543,8 @@ function mapAndGatherRemainingDecorations(children, oldChildren, decorations, ma
       if (mapped) decorations.push(mapped);else if (options.onRemove) options.onRemove(set.local[i].spec);
     }
 
-    for (var _i12 = 0; _i12 < set.children.length; _i12 += 3) {
-      gather(set.children[_i12 + 2], set.children[_i12] + oldOffset + 1);
+    for (var _i13 = 0; _i13 < set.children.length; _i13 += 3) {
+      gather(set.children[_i13 + 2], set.children[_i13] + oldOffset + 1);
     }
   }
 
@@ -4816,7 +4850,8 @@ var DOMObserver = function () {
   }, {
     key: "flush",
     value: function flush() {
-      if (!this.view.docView || this.flushingSoon > -1) return;
+      var view = this.view;
+      if (!view.docView || this.flushingSoon > -1) return;
       var mutations = this.observer ? this.observer.takeRecords() : [];
 
       if (this.queue.length) {
@@ -4824,14 +4859,14 @@ var DOMObserver = function () {
         this.queue.length = 0;
       }
 
-      var sel = this.view.domSelection();
-      var newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel);
+      var sel = view.domSelection();
+      var newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
       var from = -1,
           to = -1,
           typeOver = false,
           added = [];
 
-      if (this.view.editable) {
+      if (view.editable) {
         for (var i = 0; i < mutations.length; i++) {
           var result = this.registerMutation(mutations[i], added);
 
@@ -4855,14 +4890,21 @@ var DOMObserver = function () {
         }
       }
 
-      if (from > -1 || newSel) {
+      var readSel = null;
+
+      if (from < 0 && newSel && view.input.lastFocus > Date.now() - 200 && view.input.lastTouch < Date.now() - 300 && selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) && readSel.eq(prosemirrorState.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);
       }
     }
@@ -4887,8 +4929,8 @@ var DOMObserver = function () {
             next = mut.nextSibling;
 
         if (ie && ie_version <= 11 && mut.addedNodes.length) {
-          for (var _i13 = 0; _i13 < mut.addedNodes.length; _i13++) {
-            var _mut$addedNodes$_i = mut.addedNodes[_i13],
+          for (var _i14 = 0; _i14 < mut.addedNodes.length; _i14++) {
+            var _mut$addedNodes$_i = mut.addedNodes[_i14],
                 previousSibling = _mut$addedNodes$_i.previousSibling,
                 nextSibling = _mut$addedNodes$_i.nextSibling;
             if (!previousSibling || Array.prototype.indexOf.call(mut.addedNodes, previousSibling) < 0) prev = previousSibling;
@@ -4922,12 +4964,19 @@ var DOMObserver = function () {
   return DOMObserver;
 }();
 
-var cssChecked = false;
+var cssChecked = new WeakMap();
+var cssCheckWarned = false;
 
 function checkCSS(view) {
-  if (cssChecked) return;
-  cssChecked = true;
-  if (getComputedStyle(view.dom).whiteSpace == "normal") 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.");
+  if (cssChecked.has(view)) return;
+  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;
+  }
 }
 
 function parseBetween(view, from_, to_) {
@@ -5048,16 +5097,6 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
   to = view.state.doc.resolve(to).after(shared + 1);
   var sel = view.state.selection;
   var parse = parseBetween(view, from, to);
-
-  if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from && parse.sel.head == parse.sel.anchor) {
-    var text = view.cursorWrapper.deco.type.toDOM.nextSibling;
-    var size = text && text.nodeValue ? text.nodeValue.length : 1;
-    parse.sel = {
-      anchor: parse.sel.anchor + size,
-      head: parse.sel.anchor + size
-    };
-  }
-
   var doc = view.state.doc,
       compare = doc.slice(parse.from, parse.to);
   var preferredPos, preferredSide;
@@ -5100,6 +5139,14 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     }
   }
 
+  if (chrome && view.cursorWrapper && parse.sel && parse.sel.anchor == view.cursorWrapper.deco.from && parse.sel.head == parse.sel.anchor) {
+    var size = change.endB - change.start;
+    parse.sel = {
+      anchor: parse.sel.anchor + size,
+      head: parse.sel.anchor + size
+    };
+  }
+
   view.input.domChangeCount++;
 
   if (view.state.selection.from < view.state.selection.to && change.start == change.endB && view.state.selection instanceof prosemirrorState.TextSelection) {
@@ -5170,12 +5217,11 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
       tr = view.state.tr;
       if (markChange.type == "add") tr.addMark(chFrom, chTo, markChange.mark);else tr.removeMark(chFrom, chTo, markChange.mark);
     } else if ($from.parent.child($from.index()).isText && $from.index() == $to.index() - ($to.textOffset ? 0 : 1)) {
-      var _text = $from.parent.textBetween($from.parentOffset, $to.parentOffset);
-
+      var text = $from.parent.textBetween($from.parentOffset, $to.parentOffset);
       if (view.someProp("handleTextInput", function (f) {
-        return f(view, chFrom, chTo, _text);
+        return f(view, chFrom, chTo, text);
       })) return;
-      tr = view.state.tr.insertText(_text, chFrom, chTo);
+      tr = view.state.tr.insertText(text, chFrom, chTo);
     }
   }
 
@@ -5209,8 +5255,8 @@ function isMarkChange(cur, prev) {
     added = prevMarks[i].removeFromSet(added);
   }
 
-  for (var _i14 = 0; _i14 < curMarks.length; _i14++) {
-    removed = curMarks[_i14].removeFromSet(removed);
+  for (var _i15 = 0; _i15 < curMarks.length; _i15++) {
+    removed = curMarks[_i15].removeFromSet(removed);
   }
 
   if (added.length == 1 && removed.length == 0) {
@@ -5233,8 +5279,8 @@ function isMarkChange(cur, prev) {
 
   var updated = [];
 
-  for (var _i15 = 0; _i15 < prev.childCount; _i15++) {
-    updated.push(update(prev.child(_i15)));
+  for (var _i16 = 0; _i16 < prev.childCount; _i16++) {
+    updated.push(update(prev.child(_i16)));
   }
 
   if (prosemirrorModel.Fragment.from(updated).eq(cur)) return {
@@ -5327,6 +5373,7 @@ var EditorView = function () {
     this.input = new InputState();
     this.prevDirectPlugins = [];
     this.pluginViews = [];
+    this.requiresGeckoHackNode = false;
     this.dragging = null;
     this._props = props;
     this.state = props.state;
@@ -5410,8 +5457,6 @@ var EditorView = function () {
   }, {
     key: "updateStateInner",
     value: function updateStateInner(state, reconfigured) {
-      var _this16 = this;
-
       var prev = this.state,
           redraw = false,
           updateSel = false;
@@ -5474,19 +5519,26 @@ var EditorView = function () {
       if (scroll == "reset") {
         this.dom.scrollTop = 0;
       } else if (scroll == "to selection") {
-        var startDOM = this.domSelection().focusNode;
-        if (this.someProp("handleScrollToSelection", function (f) {
-          return f(_this16);
-        })) ;else if (state.selection instanceof prosemirrorState.NodeSelection) {
-          var 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);
       }
     }
+  }, {
+    key: "scrollToSelection",
+    value: function scrollToSelection() {
+      var _this16 = this;
+
+      var startDOM = this.domSelection().focusNode;
+      if (this.someProp("handleScrollToSelection", function (f) {
+        return f(_this16);
+      })) ;else if (this.state.selection instanceof prosemirrorState.NodeSelection) {
+        var 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);
+      }
+    }
   }, {
     key: "destroyPluginViews",
     value: function destroyPluginViews() {
@@ -5508,13 +5560,13 @@ var EditorView = function () {
           if (plugin.spec.view) this.pluginViews.push(plugin.spec.view(this));
         }
 
-        for (var _i16 = 0; _i16 < this.state.plugins.length; _i16++) {
-          var _plugin = this.state.plugins[_i16];
+        for (var _i17 = 0; _i17 < this.state.plugins.length; _i17++) {
+          var _plugin = this.state.plugins[_i17];
           if (_plugin.spec.view) this.pluginViews.push(_plugin.spec.view(this));
         }
       } else {
-        for (var _i17 = 0; _i17 < this.pluginViews.length; _i17++) {
-          var pluginView = this.pluginViews[_i17];
+        for (var _i18 = 0; _i18 < this.pluginViews.length; _i18++) {
+          var pluginView = this.pluginViews[_i18];
           if (pluginView.update) pluginView.update(this, prevState);
         }
       }
@@ -5532,14 +5584,27 @@ var EditorView = function () {
       }
 
       var plugins = this.state.plugins;
-      if (plugins) for (var _i18 = 0; _i18 < plugins.length; _i18++) {
-        var _prop2 = plugins[_i18].props[propName];
+      if (plugins) for (var _i19 = 0; _i19 < plugins.length; _i19++) {
+        var _prop2 = plugins[_i19].props[propName];
         if (_prop2 != null && (value = f ? f(_prop2) : _prop2)) return value;
       }
     }
   }, {
     key: "hasFocus",
     value: function hasFocus() {
+      if (ie) {
+        var node = this.root.activeElement;
+        if (node == this.dom) return true;
+        if (!node || !this.dom.contains(node)) return false;
+
+        while (node && this.dom != node && this.dom.contains(node)) {
+          if (node.contentEditable == 'false') return false;
+          node = node.parentElement;
+        }
+
+        return true;
+      }
+
       return this.root.activeElement == this.dom;
     }
   }, {
@@ -5558,7 +5623,7 @@ var EditorView = function () {
       var cached = this._root;
 
       if (cached == null) {
-        var _loop4 = function _loop4(search) {
+        var _loop5 = function _loop5(search) {
           if (search.nodeType == 9 || search.nodeType == 11 && search.host) {
             if (!search.getSelection) Object.getPrototypeOf(search).getSelection = function () {
               return search.ownerDocument.getSelection();
@@ -5570,7 +5635,7 @@ var EditorView = function () {
         };
 
         for (var search = this.dom.parentNode; search; search = search.parentNode) {
-          var _ret3 = _loop4(search);
+          var _ret3 = _loop5(search);
 
           if (_typeof(_ret3) === "object") return _ret3.v;
         }

package/dist/index.d.ts

@@ -696,11 +696,16 @@ interface EditorProps<P = any> {
     */
     clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean) => Slice;
     /**
-    Can be used to transform pasted content before it is applied to
-    the document.
+    Can be used to transform pasted or dragged-and-dropped content
+    before it is applied to the document.
     */
     transformPasted?: (this: P, slice: Slice) => Slice;
     /**
+    Can be used to transform copied or cut content before it is
+    serialized to the clipboard.
+    */
+    transformCopied?: (this: P, slice: Slice) => Slice;
+    /**
     Allows you to pass custom rendering and behavior logic for
     nodes. Should map node names to constructor functions that
     produce a [`NodeView`](https://prosemirror.net/docs/ref/#view.NodeView) object implementing the