prosemirror-view 1.18.7 → 1.18.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prosemirror-view",
-  "version": "1.18.7",
+  "version": "1.18.11",
   "description": "ProseMirror's view component",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -18,7 +18,7 @@
     "url": "git://github.com/prosemirror/prosemirror-view.git"
   },
   "dependencies": {
-    "prosemirror-model": "^1.1.0",
+    "prosemirror-model": "^1.14.3",
     "prosemirror-state": "^1.0.0",
     "prosemirror-transform": "^1.1.0"
   },

package/src/clipboard.js

@@ -1,4 +1,5 @@
 import {Slice, Fragment, DOMParser, DOMSerializer} from "prosemirror-model"
+import browser from "./browser"
 
 export function serializeForClipboard(view, slice) {
   let context = [], {content, openStart, openEnd} = slice
@@ -46,14 +47,17 @@ export function parseFromClipboard(view, text, html, plainText, $context) {
     if (parsed) {
       slice = parsed
     } else {
+      let marks = $context.marks()
+      let {schema} = view.state, serializer = DOMSerializer.fromSchema(schema)
       dom = document.createElement("div")
       text.trim().split(/(?:\r\n?|\n)+/).forEach(block => {
-        dom.appendChild(document.createElement("p")).textContent = block
+        dom.appendChild(document.createElement("p")).appendChild(serializer.serializeNode(schema.text(block, marks)))
       })
     }
   } else {
     view.someProp("transformPastedHTML", f => { html = f(html) })
     dom = readHTML(html)
+    if (browser.webkit) restoreReplacedSpaces(dom)
   }
 
   let contextNode = dom && dom.querySelector("[data-pm-slice]")
@@ -178,6 +182,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) {
+  let nodes = dom.querySelectorAll(browser.chrome ? "span:not([class]):not([style])" : "span.Apple-converted-space")
+  for (let i = 0; i < nodes.length; i++) {
+    let 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
   let schema = slice.content.firstChild.type.schema, array

package/src/input.js

@@ -100,7 +100,7 @@ export function dispatchEvent(view, event) {
 editHandlers.keydown = (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
@@ -220,10 +220,11 @@ function handleDoubleClick(view, pos, inside, event) {
 function handleTripleClick(view, pos, inside, event) {
   return runHandlerOnContext(view, "handleTripleClickOn", pos, inside, event) ||
     view.someProp("handleTripleClick", f => 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
   let doc = view.state.doc
   if (inside == -1) {
     if (doc.inlineContent) {
@@ -303,7 +304,8 @@ class MouseDown {
     this.target = targetDesc ? targetDesc.dom : null
 
     let {selection} = view.state
-    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,
@@ -350,19 +352,20 @@ class MouseDown {
       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
-               (browser.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.
-               (browser.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
+                (browser.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.
+                (browser.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 {
@@ -577,8 +580,8 @@ handlers.dragstart = (view, e) => {
     view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos)))
   } else if (e.target && e.target.nodeType == 1) {
     let 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)))
   }
   let slice = view.state.selection.content(), {dom, text} = serializeForClipboard(view, slice)
   e.dataTransfer.clearData()

package/src/viewdesc.js

@@ -113,7 +113,7 @@ class ViewDesc {
   matchesWidget() { return false }
   matchesMark() { return false }
   matchesNode() { return false }
-  matchesHack() { return false }
+  matchesHack(_nodeName) { return false }
 
   get beforePosition() { return false }
 
@@ -374,9 +374,17 @@ class ViewDesc {
       if (node.nodeType == 3) {
         brKludge = offset && node.nodeValue[offset - 1] == "\n"
         // Issue #1128
-        if (brKludge && offset == node.nodeValue.length &&
-            node.nextSibling && node.nextSibling.nodeName == "BR")
-          anchorDOM = headDOM = {node: node.parentNode, offset: domIndex(node) + 1}
+        if (brKludge && offset == node.nodeValue.length) {
+          for (let scan = node, after; scan; scan = scan.parentNode) {
+            if (after = scan.nextSibling) {
+              if (after.nodeName == "BR")
+                anchorDOM = headDOM = {node: after.parentNode, offset: domIndex(after) + 1}
+              break
+            }
+            let desc = scan.pmViewDesc
+            if (desc && desc.node && desc.node.isBlock) break
+          }
+        }
       } else {
         let prev = node.childNodes[offset - 1]
         brKludge = prev && (prev.nodeName == "BR" || prev.contentEditable == "false")
@@ -445,7 +453,7 @@ class ViewDesc {
           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
@@ -668,8 +676,10 @@ class NodeViewDesc extends ViewDesc {
   // `this.children`.
   updateChildren(view, pos) {
     let inline = this.node.inlineContent, off = pos
-    let composition = inline && view.composing && this.localCompositionNode(view, pos)
-    let updater = new ViewTreeUpdater(this, composition && composition.node)
+    let composition = view.composing && this.localCompositionInfo(view, pos)
+    let localComposition = composition && composition.pos > -1 ? composition : null
+    let compositionInChild = composition && composition.pos < 0
+    let updater = new ViewTreeUpdater(this, localComposition && localComposition.node)
     iterDeco(this.node, this.innerDeco, (widget, i, insideNode) => {
       if (widget.spec.marks)
         updater.syncToMarks(widget.spec.marks, inline, view)
@@ -681,13 +691,21 @@ class NodeViewDesc extends ViewDesc {
     }, (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
+      let compIndex
+      if (updater.findNodeMatch(child, outerDeco, innerDeco, i)) {
+        // Found precise match with existing node view
+      } 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)) {
+        // Updated the specific node that holds the composition
+      } else if (updater.updateNextNode(child, outerDeco, innerDeco, view, i)) {
+        // Could update an existing node to reflect this node
+      } 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.
@@ -698,29 +716,31 @@ class NodeViewDesc extends 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 (browser.ios) iosHacks(this.dom)
     }
   }
 
-  localCompositionNode(view, pos) {
+  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
     let {from, to} = view.state.selection
     if (!(view.state.selection instanceof TextSelection) || from < pos || to > pos + this.node.content.size) return
     let sel = view.root.getSelection()
     let 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)
-    let text = textNode.nodeValue
-    let textPos = findTextInFragment(this.node.content, text, from - pos, to - pos)
-
-    return textPos < 0 ? null : {node: textNode, pos: textPos, 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)
+      let text = textNode.nodeValue
+      let textPos = findTextInFragment(this.node.content, text, from - pos, to - pos)
+      return textPos < 0 ? null : {node: textNode, pos: textPos, text}
+    } else {
+      return {node: textNode, pos: -1}
+    }
   }
 
   protectLocalComposition(view, {node, pos, text}) {
@@ -844,6 +864,12 @@ class TextViewDesc extends NodeViewDesc {
     return new TextViewDesc(this.parent, node, this.outerDeco, this.innerDeco, dom, dom, view)
   }
 
+  markDirty(from, to) {
+    super.markDirty(from, to)
+    if (this.dom != this.nodeDOM && (from == 0 || to == this.nodeDOM.nodeValue.length))
+      this.dirty = NODE_DIRTY
+  }
+
   get domAtom() { return false }
 }
 
@@ -851,7 +877,7 @@ class TextViewDesc extends NodeViewDesc {
 // around contentEditable terribleness.
 class TrailingHackViewDesc extends ViewDesc {
   parseRule() { return {ignore: true} }
-  matchesHack() { return this.dirty == NOT_DIRTY }
+  matchesHack(nodeName) { return this.dirty == NOT_DIRTY && this.dom.nodeName == nodeName }
   get domAtom() { return true }
 }
 
@@ -1132,6 +1158,29 @@ class ViewTreeUpdater {
     return true
   }
 
+  updateNodeAt(node, outerDeco, innerDeco, index, view) {
+    let 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
+  }
+
+  findIndexWithChild(domNode) {
+    for (;;) {
+      let parent = domNode.parentNode
+      if (!parent) return -1
+      if (parent == this.top.contentDOM) {
+        let desc = domNode.pmViewDesc
+        if (desc) for (let 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.
@@ -1188,13 +1237,20 @@ class ViewTreeUpdater {
     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 {
-        let 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 (browser.safari && lastChild && lastChild.dom.contentEditable == "false")
+        this.addHackNode("IMG")
+      this.addHackNode("BR")
+    }
+  }
+
+  addHackNode(nodeName) {
+    if (this.index < this.top.children.length && this.top.children[this.index].matchesHack(nodeName)) {
+      this.index++
+    } else {
+      let dom = document.createElement(nodeName)
+      this.top.children.splice(this.index++, 0, new TrailingHackViewDesc(this.top, nothing, dom, null))
+      this.changed = true
     }
   }
 }