prosemirror-view 1.18.7 → 1.18.11

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## 1.18.11 (2021-07-22)
+
+### Bug fixes
+
+Work around an issue where Chrome and Safari will replace some spaces with non-breaking spaces when putting HTML on the clipboard.
+
+When pasting as plain text (shift-mod-v) apply the marks at the selection to the inserted content.
+
+Fix flaky behavior when starting a composition with a selection that spans multiple blocks.
+
+## 1.18.10 (2021-07-15)
+
+### Bug fixes
+
+Fix an issue where dragging from just outside a draggable node on Chrome would cause odd dragging behavior.
+
+## 1.18.9 (2021-07-11)
+
+### Bug fixes
+
+Fix a bug in the previous release where `handleClickOn` wasn't fired anymore for clicks with the middle or right mouse button.
+
+## 1.18.8 (2021-06-23)
+
+### Bug fixes
+
+Work around a Safari bug where it draws the cursor at the start of the line when it is after an uneditable node at the end of the line.
+
+Fix an issue where the DOM could get out of sync when editing decorated text.
+
+Work around an issue where Firefox draws the cursor on the wrong line when after a newline.
+
+Fix a bug where double-clicking with the left mouse button and then pressing another mouse button was treated as a triple click.
+
 ## 1.18.7 (2021-05-20)
 
 ### Bug fixes

package/dist/index.es.js

@@ -694,7 +694,7 @@ var prototypeAccessors = { beforePosition: { configurable: true },size: { config
 ViewDesc.prototype.matchesWidget = function matchesWidget () { return false };
 ViewDesc.prototype.matchesMark = function matchesMark () { return false };
 ViewDesc.prototype.matchesNode = function matchesNode () { return false };
-ViewDesc.prototype.matchesHack = function matchesHack () { return false };
+ViewDesc.prototype.matchesHack = function matchesHack (_nodeName) { return false };
 
 prototypeAccessors.beforePosition.get = function () { return false };
 
@@ -960,9 +960,17 @@ ViewDesc.prototype.setSelection = function setSelection (anchor, head, root, for
     if (node.nodeType == 3) {
       brKludge = offset$1 && node.nodeValue[offset$1 - 1] == "\n";
       // Issue #1128
-      if (brKludge && offset$1 == node.nodeValue.length &&
-          node.nextSibling && node.nextSibling.nodeName == "BR")
-        { anchorDOM = headDOM = {node: node.parentNode, offset: domIndex(node) + 1}; }
+      if (brKludge && offset$1 == node.nodeValue.length) {
+        for (var scan = node, after = (void 0); scan; scan = scan.parentNode) {
+          if (after = scan.nextSibling) {
+            if (after.nodeName == "BR")
+              { anchorDOM = headDOM = {node: after.parentNode, offset: domIndex(after) + 1}; }
+            break
+          }
+          var desc = scan.pmViewDesc;
+          if (desc && desc.node && desc.node.isBlock) { break }
+        }
+      }
     } else {
       var prev = node.childNodes[offset$1 - 1];
       brKludge = prev && (prev.nodeName == "BR" || prev.contentEditable == "false");
@@ -971,8 +979,8 @@ ViewDesc.prototype.setSelection = function setSelection (anchor, head, root, for
   // Firefox can act strangely when the selection is in front of an
   // uneditable node. See #1163 and https://bugzilla.mozilla.org/show_bug.cgi?id=1709536
   if (result.gecko && domSel.focusNode && domSel.focusNode != headDOM.node && domSel.focusNode.nodeType == 1) {
-    var after = domSel.focusNode.childNodes[domSel.focusOffset];
-    if (after && after.contentEditable == "false") { force = true; }
+    var after$1 = domSel.focusNode.childNodes[domSel.focusOffset];
+    if (after$1 && after$1.contentEditable == "false") { force = true; }
   }
 
   if (!(force || brKludge && result.safari) &&
@@ -1031,7 +1039,7 @@ ViewDesc.prototype.markDirty = function markDirty (from, to) {
         else { child.markDirty(from - startInside, to - startInside); }
         return
       } else {
-        child.dirty = NODE_DIRTY;
+        child.dirty = child.dom == child.contentDOM && child.dom.parentNode == this.contentDOM ? CONTENT_DIRTY : NODE_DIRTY;
       }
     }
     offset = end;
@@ -1290,8 +1298,10 @@ var NodeViewDesc = /*@__PURE__*/(function (ViewDesc) {
     var this$1 = this;
 
     var inline = this.node.inlineContent, off = pos;
-    var composition = inline && view.composing && this.localCompositionNode(view, pos);
-    var updater = new ViewTreeUpdater(this, composition && composition.node);
+    var composition = view.composing && this.localCompositionInfo(view, pos);
+    var localComposition = composition && composition.pos > -1 ? composition : null;
+    var compositionInChild = composition && composition.pos < 0;
+    var updater = new ViewTreeUpdater(this, localComposition && localComposition.node);
     iterDeco(this.node, this.innerDeco, function (widget, i, insideNode) {
       if (widget.spec.marks)
         { updater.syncToMarks(widget.spec.marks, inline, view); }
@@ -1303,13 +1313,15 @@ var NodeViewDesc = /*@__PURE__*/(function (ViewDesc) {
     }, function (child, outerDeco, innerDeco, i) {
       // Make sure the wrapping mark descs match the node's marks.
       updater.syncToMarks(child.marks, inline, view);
-      // Either find an existing desc that exactly matches this node,
-      // and drop the descs before it.
-      updater.findNodeMatch(child, outerDeco, innerDeco, i) ||
-        // Or try updating the next desc to reflect this node.
-        updater.updateNextNode(child, outerDeco, innerDeco, view, i) ||
-        // Or just add it as a new desc.
+      // Try several strategies for drawing this node
+      var compIndex;
+      if (updater.findNodeMatch(child, outerDeco, innerDeco, i)) ; else if (compositionInChild && view.state.selection.from > off &&
+                 view.state.selection.to < off + child.nodeSize &&
+                 (compIndex = updater.findIndexWithChild(composition.node)) > -1 &&
+                 updater.updateNodeAt(child, outerDeco, innerDeco, compIndex, view)) ; else if (updater.updateNextNode(child, outerDeco, innerDeco, view, i)) ; else {
+        // Add it as a new view
         updater.addNode(child, outerDeco, innerDeco, view, off);
+      }
       off += child.nodeSize;
     });
     // Drop all remaining descs after the current position.
@@ -1320,16 +1332,15 @@ var NodeViewDesc = /*@__PURE__*/(function (ViewDesc) {
     // Sync the DOM if anything changed
     if (updater.changed || this.dirty == CONTENT_DIRTY) {
       // May have to protect focused DOM from being changed if a composition is active
-      if (composition) { this.protectLocalComposition(view, composition); }
+      if (localComposition) { this.protectLocalComposition(view, localComposition); }
       renderDescs(this.contentDOM, this.children, view);
       if (result.ios) { iosHacks(this.dom); }
     }
   };
 
-  NodeViewDesc.prototype.localCompositionNode = function localCompositionNode (view, pos) {
+  NodeViewDesc.prototype.localCompositionInfo = function localCompositionInfo (view, pos) {
     // Only do something if both the selection and a focused text node
-    // are inside of this node, and the node isn't already part of a
-    // view that's a child of this view
+    // are inside of this node
     var ref = view.state.selection;
     var from = ref.from;
     var to = ref.to;
@@ -1338,13 +1349,16 @@ var NodeViewDesc = /*@__PURE__*/(function (ViewDesc) {
     var textNode = nearbyTextNode(sel.focusNode, sel.focusOffset);
     if (!textNode || !this.dom.contains(textNode.parentNode)) { return }
 
-    // Find the text in the focused node in the node, stop if it's not
-    // there (may have been modified through other means, in which
-    // case it should overwritten)
-    var text = textNode.nodeValue;
-    var textPos = findTextInFragment(this.node.content, text, from - pos, to - pos);
-
-    return textPos < 0 ? null : {node: textNode, pos: textPos, text: text}
+    if (this.node.inlineContent) {
+      // Find the text in the focused node in the node, stop if it's not
+      // there (may have been modified through other means, in which
+      // case it should overwritten)
+      var text = textNode.nodeValue;
+      var textPos = findTextInFragment(this.node.content, text, from - pos, to - pos);
+      return textPos < 0 ? null : {node: textNode, pos: textPos, text: text}
+    } else {
+      return {node: textNode, pos: -1}
+    }
   };
 
   NodeViewDesc.prototype.protectLocalComposition = function protectLocalComposition (view, ref) {
@@ -1482,6 +1496,12 @@ var TextViewDesc = /*@__PURE__*/(function (NodeViewDesc) {
     return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom, view)
   };
 
+  TextViewDesc.prototype.markDirty = function markDirty (from, to) {
+    NodeViewDesc.prototype.markDirty.call(this, from, to);
+    if (this.dom != this.nodeDOM && (from == 0 || to == this.nodeDOM.nodeValue.length))
+      { this.dirty = NODE_DIRTY; }
+  };
+
   prototypeAccessors$4.domAtom.get = function () { return false };
 
   Object.defineProperties( TextViewDesc.prototype, prototypeAccessors$4 );
@@ -1503,7 +1523,7 @@ var TrailingHackViewDesc = /*@__PURE__*/(function (ViewDesc) {
   var prototypeAccessors$5 = { domAtom: { configurable: true } };
 
   TrailingHackViewDesc.prototype.parseRule = function parseRule () { return {ignore: true} };
-  TrailingHackViewDesc.prototype.matchesHack = function matchesHack () { return this.dirty == NOT_DIRTY };
+  TrailingHackViewDesc.prototype.matchesHack = function matchesHack (nodeName) { return this.dirty == NOT_DIRTY && this.dom.nodeName == nodeName };
   prototypeAccessors$5.domAtom.get = function () { return true };
 
   Object.defineProperties( TrailingHackViewDesc.prototype, prototypeAccessors$5 );
@@ -1791,6 +1811,29 @@ ViewTreeUpdater.prototype.findNodeMatch = function findNodeMatch (node, outerDec
   return true
 };
 
+ViewTreeUpdater.prototype.updateNodeAt = function updateNodeAt (node, outerDeco, innerDeco, index, view) {
+  var child = this.top.children[index];
+  if (!child.update(node, outerDeco, innerDeco, view)) { return false }
+  this.destroyBetween(this.index, index);
+  this.index = index + 1;
+  return true
+};
+
+ViewTreeUpdater.prototype.findIndexWithChild = function findIndexWithChild (domNode) {
+  for (;;) {
+    var parent = domNode.parentNode;
+    if (!parent) { return -1 }
+    if (parent == this.top.contentDOM) {
+      var desc = domNode.pmViewDesc;
+      if (desc) { for (var i = this.index; i < this.top.children.length; i++) {
+        if (this.top.children[i] == desc) { return i }
+      } }
+      return -1
+    }
+    domNode = parent;
+  }
+};
+
 // : (Node, [Decoration], DecorationSource, EditorView, Fragment, number) → bool
 // Try to update the next node, if any, to the given data. Checks
 // pre-matches to avoid overwriting nodes that could still be used.
@@ -1847,13 +1890,20 @@ ViewTreeUpdater.prototype.addTextblockHacks = function addTextblockHacks () {
   if (!lastChild || // Empty textblock
       !(lastChild instanceof TextViewDesc) ||
       /\n$/.test(lastChild.node.text)) {
-    if (this.index < this.top.children.length && this.top.children[this.index].matchesHack()) {
-      this.index++;
-    } else {
-      var dom = document.createElement("br");
-      this.top.children.splice(this.index++, 0, new TrailingHackViewDesc(this.top, nothing, dom, null));
-      this.changed = true;
-    }
+    // Avoid a bug in Safari's cursor drawing (#1165)
+    if (result.safari && lastChild && lastChild.dom.contentEditable == "false")
+      { this.addHackNode("IMG"); }
+    this.addHackNode("BR");
+  }
+};
+
+ViewTreeUpdater.prototype.addHackNode = function addHackNode (nodeName) {
+  if (this.index < this.top.children.length && this.top.children[this.index].matchesHack(nodeName)) {
+    this.index++;
+  } else {
+    var dom = document.createElement(nodeName);
+    this.top.children.splice(this.index++, 0, new TrailingHackViewDesc(this.top, nothing, dom, null));
+    this.changed = true;
   }
 };
 
@@ -2873,14 +2923,19 @@ function parseFromClipboard(view, text, html, plainText, $context) {
     if (parsed) {
       slice = parsed;
     } else {
+      var marks = $context.marks();
+      var ref = view.state;
+      var schema = ref.schema;
+      var serializer = DOMSerializer.fromSchema(schema);
       dom = document.createElement("div");
       text.trim().split(/(?:\r\n?|\n)+/).forEach(function (block) {
-        dom.appendChild(document.createElement("p")).textContent = block;
+        dom.appendChild(document.createElement("p")).appendChild(serializer.serializeNode(schema.text(block, marks)));
       });
     }
   } else {
     view.someProp("transformPastedHTML", function (f) { html = f(html); });
     dom = readHTML(html);
+    if (result.webkit) { restoreReplacedSpaces(dom); }
   }
 
   var contextNode = dom && dom.querySelector("[data-pm-slice]");
@@ -3013,6 +3068,20 @@ function readHTML(html) {
   return elt
 }
 
+// Webkit browsers do some hard-to-predict replacement of regular
+// spaces with non-breaking spaces when putting content on the
+// clipboard. This tries to convert such non-breaking spaces (which
+// will be wrapped in a plain span on Chrome, a span with class
+// Apple-converted-space on Safari) back to regular spaces.
+function restoreReplacedSpaces(dom) {
+  var nodes = dom.querySelectorAll(result.chrome ? "span:not([class]):not([style])" : "span.Apple-converted-space");
+  for (var i = 0; i < nodes.length; i++) {
+    var node = nodes[i];
+    if (node.childNodes.length == 1 && node.textContent == "\u00a0" && node.parentNode)
+      { node.parentNode.replaceChild(dom.ownerDocument.createTextNode(" "), node); }
+  }
+}
+
 function addContext(slice, context) {
   if (!slice.size) { return slice }
   var schema = slice.content.firstChild.type.schema, array;
@@ -3364,7 +3433,7 @@ function dispatchEvent(view, event) {
 editHandlers.keydown = function (view, event) {
   view.shiftKey = event.keyCode == 16 || event.shiftKey;
   if (inOrNearComposition(view, event)) { return }
-  view.domObserver.forceFlush();
+  if (event.keyCode != 229) { view.domObserver.forceFlush(); }
   view.lastKeyCode = event.keyCode;
   view.lastKeyCodeTime = Date.now();
   // On iOS, if we preventDefault enter key presses, the virtual
@@ -3490,10 +3559,11 @@ function handleDoubleClick(view, pos, inside, event) {
 function handleTripleClick(view, pos, inside, event) {
   return runHandlerOnContext(view, "handleTripleClickOn", pos, inside, event) ||
     view.someProp("handleTripleClick", function (f) { return f(view, pos, event); }) ||
-    defaultTripleClick(view, inside)
+    defaultTripleClick(view, inside, event)
 }
 
-function defaultTripleClick(view, inside) {
+function defaultTripleClick(view, inside, event) {
+  if (event.button != 0) { return false }
   var doc = view.state.doc;
   if (inside == -1) {
     if (doc.inlineContent) {
@@ -3575,7 +3645,8 @@ var MouseDown = function MouseDown(view, pos, event, flushed) {
 
   var ref = view.state;
   var selection = ref.selection;
-  if (targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
+  if (event.button == 0 &&
+      targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false ||
       selection instanceof NodeSelection && selection.from <= targetPos && selection.to > targetPos)
     { this.mightDrag = {node: targetNode,
                       pos: targetPos,
@@ -3622,19 +3693,20 @@ MouseDown.prototype.up = function up (event) {
     setSelectionOrigin(this.view, "pointer");
   } else if (handleSingleClick(this.view, pos.pos, pos.inside, event, this.selectNode)) {
     event.preventDefault();
-  } else if (this.flushed ||
-             // Safari ignores clicks on draggable elements
-             (result.safari && this.mightDrag && !this.mightDrag.node.isAtom) ||
-             // Chrome will sometimes treat a node selection as a
-             // cursor, but still report that the node is selected
-             // when asked through getSelection. You'll then get a
-             // situation where clicking at the point where that
-             // (hidden) cursor is doesn't change the selection, and
-             // thus doesn't get a reaction from ProseMirror. This
-             // works around that.
-             (result.chrome && !(this.view.state.selection instanceof 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 ignores clicks on draggable elements
+              (result.safari && this.mightDrag && !this.mightDrag.node.isAtom) ||
+              // Chrome will sometimes treat a node selection as a
+              // cursor, but still report that the node is selected
+              // when asked through getSelection. You'll then get a
+              // situation where clicking at the point where that
+              // (hidden) cursor is doesn't change the selection, and
+              // thus doesn't get a reaction from ProseMirror. This
+              // works around that.
+              (result.chrome && !(this.view.state.selection instanceof TextSelection) &&
+               Math.min(Math.abs(pos.pos - this.view.state.selection.from),
+                        Math.abs(pos.pos - this.view.state.selection.to)) <= 2))) {
     updateSelection(this.view, Selection.near(this.view.state.doc.resolve(pos.pos)), "pointer");
     event.preventDefault();
   } else {
@@ -3848,8 +3920,8 @@ handlers.dragstart = function (view, e) {
     view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos)));
   } else if (e.target && e.target.nodeType == 1) {
     var desc = view.docView.nearestDesc(e.target, true);
-    if (!desc || !desc.node.type.spec.draggable || desc == view.docView) { return }
-    view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, desc.posBefore)));
+    if (desc && desc.node.type.spec.draggable && desc != view.docView)
+      { view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, desc.posBefore))); }
   }
   var slice = view.state.selection.content();
   var ref = serializeForClipboard(view, slice);