prosemirror-view 1.24.0-beta.1 → 1.24.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.24.0 (2022-05-30)
+
+### Bug fixes
+
+Fix an issue where bogus table wrappers could be added when copy-pasting table content nodes within an editor.
+
+Fix a crash that could occur when two textblocks were joined in the editor DOM.
+
+Treat ctrl-b/f/p/n on macOS similar to arrow key presses, anticipating cursor motion.
+
+### New features
+
+Include TypeScript type declarations.
+
 ## 1.23.13 (2022-04-26)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1774,9 +1774,10 @@ var CustomNodeViewDesc = function (_NodeViewDesc2) {
       if (this.dirty == NODE_DIRTY) return false;
 
       if (this.spec.update) {
-        var result = this.spec.update(node, outerDeco, innerDeco);
-        if (result) this.updateInner(node, outerDeco, innerDeco, view);
-        return result;
+        var _result = this.spec.update(node, outerDeco, innerDeco);
+
+        if (_result) this.updateInner(node, outerDeco, innerDeco, view);
+        return _result;
       } else if (!this.contentDOM && !node.isLeaf) {
         return false;
       } else {
@@ -2866,13 +2867,13 @@ function captureKeyDown(view, event) {
     return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodesRight(view);
   } else if (code == 13 || code == 27) {
     return true;
-  } else if (code == 37) {
+  } else if (code == 37 || result.mac && code == 66 && mods == "c") {
     return selectHorizontally(view, -1, mods) || skipIgnoredNodesLeft(view);
-  } else if (code == 39) {
+  } else if (code == 39 || result.mac && code == 70 && mods == "c") {
     return selectHorizontally(view, 1, mods) || skipIgnoredNodesRight(view);
-  } else if (code == 38) {
+  } else if (code == 38 || result.mac && code == 80 && mods == "c") {
     return selectVertically(view, -1, mods) || skipIgnoredNodesLeft(view);
-  } else if (code == 40) {
+  } else if (code == 40 || result.mac && code == 78 && mods == "c") {
     return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesRight(view);
   } else if (mods == (mac ? "m" : "c") && (code == 66 || code == 73 || code == 89 || code == 90)) {
     return true;
@@ -2902,7 +2903,8 @@ function serializeForClipboard(view, slice) {
     document: doc
   }));
   var firstChild = wrap.firstChild,
-      needsWrap;
+      needsWrap,
+      wrappers = 0;
 
   while (firstChild && firstChild.nodeType == 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) {
     for (var i = needsWrap.length - 1; i >= 0; i--) {
@@ -2913,17 +2915,13 @@ function serializeForClipboard(view, slice) {
       }
 
       wrap.appendChild(wrapper);
-
-      if (needsWrap[i] != "tbody") {
-        openStart++;
-        openEnd++;
-      }
+      wrappers++;
     }
 
     firstChild = wrap.firstChild;
   }
 
-  if (firstChild && firstChild.nodeType == 1) firstChild.setAttribute("data-pm-slice", "".concat(openStart, " ").concat(openEnd, " ").concat(JSON.stringify(context)));
+  if (firstChild && firstChild.nodeType == 1) firstChild.setAttribute("data-pm-slice", "".concat(openStart, " ").concat(openEnd).concat(wrappers ? " -".concat(wrappers) : "", " ").concat(JSON.stringify(context)));
   var text = view.someProp("clipboardTextSerializer", function (f) {
     return f(slice);
   }) || slice.content.textBetween(0, slice.content.size, "\n\n");
@@ -2969,7 +2967,10 @@ function parseFromClipboard(view, text, html, plainText, $context) {
   }
 
   var contextNode = dom && dom.querySelector("[data-pm-slice]");
-  var sliceData = contextNode && /^(\d+) (\d+) (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "");
+  var sliceData = contextNode && /^(\d+) (\d+)(?: -(\d+))? (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "");
+  if (sliceData && sliceData[3]) for (var i = +sliceData[3]; i > 0 && dom.firstChild; i--) {
+    dom = dom.firstChild;
+  }
 
   if (!slice) {
     var parser = view.someProp("clipboardParser") || view.someProp("domParser") || prosemirrorModel.DOMParser.fromSchema(view.state.schema);
@@ -2986,7 +2987,7 @@ function parseFromClipboard(view, text, html, plainText, $context) {
   }
 
   if (sliceData) {
-    slice = addContext(closeSlice(slice, +sliceData[1], +sliceData[2]), sliceData[3]);
+    slice = addContext(closeSlice(slice, +sliceData[1], +sliceData[2]), sliceData[4]);
   } else {
     slice = prosemirrorModel.Slice.maxOpen(normalizeSiblings(slice.content, $context), true);
 
@@ -4330,9 +4331,10 @@ var DecorationGroup = function () {
       var found = [];
 
       for (var i = 0; i < this.members.length; i++) {
-        var result = this.members[i].forChild(offset, child);
-        if (result == empty) continue;
-        if (result instanceof DecorationGroup) found = found.concat(result.members);else found.push(result);
+        var _result2 = this.members[i].forChild(offset, child);
+
+        if (_result2 == empty) continue;
+        if (_result2 instanceof DecorationGroup) found = found.concat(_result2.members);else found.push(_result2);
       }
 
       return DecorationGroup.from(found);
@@ -4825,12 +4827,12 @@ var DOMObserver = function () {
 
       if (this.view.editable) {
         for (var i = 0; i < mutations.length; i++) {
-          var result = this.registerMutation(mutations[i], added);
+          var _result3 = this.registerMutation(mutations[i], added);
 
-          if (result) {
-            from = from < 0 ? result.from : Math.min(result.from, from);
-            to = to < 0 ? result.to : Math.max(result.to, to);
-            if (result.typeOver) typeOver = true;
+          if (_result3) {
+            from = from < 0 ? _result3.from : Math.min(_result3.from, from);
+            to = to < 0 ? _result3.to : Math.max(_result3.to, to);
+            if (_result3.typeOver) typeOver = true;
           }
         }
       }
@@ -5111,7 +5113,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
 
   var $from = parse.doc.resolveNoCache(change.start - parse.from);
   var $to = parse.doc.resolveNoCache(change.endB - parse.from);
-  var inlineChange = $from.sameParent($to) && $from.parent.inlineContent;
+  var $fromA = doc.resolve(change.start);
+  var inlineChange = $from.sameParent($to) && $from.parent.inlineContent && $fromA.end() >= change.endA;
   var nextSel;
 
   if ((ios && view.input.lastIOSEnter > Date.now() - 225 && (!inlineChange || addedNodes.some(function (n) {
@@ -5144,7 +5147,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
 
   var chFrom = change.start,
       chTo = change.endA;
-  var tr, storedMarks, markChange, $from1;
+  var tr, storedMarks, markChange;
 
   if (inlineChange) {
     if ($from.pos == $to.pos) {
@@ -5157,7 +5160,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
 
       tr = view.state.tr["delete"](chFrom, chTo);
       storedMarks = doc.resolve(change.start).marksAcross(doc.resolve(change.endA));
-    } else if (change.endA == change.endB && ($from1 = doc.resolve(change.start)) && (markChange = isMarkChange($from.parent.content.cut($from.parentOffset, $to.parentOffset), $from1.parent.content.cut($from1.parentOffset, change.endA - $from1.start())))) {
+    } else if (change.endA == change.endB && (markChange = isMarkChange($from.parent.content.cut($from.parentOffset, $to.parentOffset), $fromA.parent.content.cut($fromA.parentOffset, change.endA - $fromA.start())))) {
       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)) {

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import { EditorState, Transaction, Selection, Plugin } from 'prosemirror-state';
-import { Mark, Node as Node$1, ParseRule, Slice, ResolvedPos, DOMParser, DOMSerializer } from 'prosemirror-model';
+import { Mark, Node, ParseRule, Slice, ResolvedPos, DOMParser, DOMSerializer } from 'prosemirror-model';
 import { Mapping } from 'prosemirror-transform';
 
-declare type DOMNode = Node;
+declare type DOMNode = InstanceType<typeof window.Node>;
 
 declare type WidgetConstructor = ((view: EditorView, getPos: () => number | undefined) => DOMNode) | DOMNode;
 /**
@@ -147,7 +147,7 @@ interface DecorationSource {
     Map the set of decorations in response to a change in the
     document.
     */
-    map: (mapping: Mapping, node: Node$1) => DecorationSource;
+    map: (mapping: Mapping, node: Node) => DecorationSource;
 }
 /**
 A collection of [decorations](https://prosemirror.net/docs/ref/#view.Decoration), organized in such
@@ -160,7 +160,7 @@ declare class DecorationSet implements DecorationSource {
     Create a set of decorations, using the structure of the given
     document.
     */
-    static create(doc: Node$1, decorations: Decoration[]): DecorationSet;
+    static create(doc: Node, decorations: Decoration[]): DecorationSet;
     /**
     Find all decorations in this set which touch the given range
     (including decorations that start or end directly at the
@@ -169,13 +169,13 @@ declare class DecorationSet implements DecorationSource {
     considered. When `predicate` isn't given, all decorations are
     assumed to match.
     */
-    find(start?: number, end?: number, predicate?: (spec: any) => boolean): readonly Decoration[];
+    find(start?: number, end?: number, predicate?: (spec: any) => boolean): Decoration[];
     private findInner;
     /**
     Map the set of decorations in response to a change in the
     document.
     */
-    map(mapping: Mapping, doc: Node$1, options?: {
+    map(mapping: Mapping, doc: Node, options?: {
         /**
         When given, this function will be called for each decoration
         that gets dropped as a result of the mapping, passing the
@@ -188,7 +188,7 @@ declare class DecorationSet implements DecorationSource {
     producing a new set. Needs access to the current document to
     create the appropriate tree structure.
     */
-    add(doc: Node$1, decorations: Decoration[]): DecorationSet;
+    add(doc: Node, decorations: Decoration[]): DecorationSet;
     private addInner;
     /**
     Create a new set that contains the decorations in this set, minus
@@ -246,7 +246,7 @@ interface NodeView {
     view has a `contentDOM` property (or no `dom` property), updating
     its child nodes will be handled by ProseMirror.
     */
-    update?: (node: Node$1, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
+    update?: (node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean;
     /**
     Can be used to override the way the node's selected status (as a
     node selection) is displayed.
@@ -294,11 +294,11 @@ declare class ViewDesc {
     dom: DOMNode;
     contentDOM: HTMLElement | null;
     dirty: number;
-    node: Node$1 | null;
+    node: Node | null;
     constructor(parent: ViewDesc | undefined, children: ViewDesc[], dom: DOMNode, contentDOM: HTMLElement | null);
     matchesWidget(widget: Decoration): boolean;
     matchesMark(mark: Mark): boolean;
-    matchesNode(node: Node$1, outerDeco: readonly Decoration[], innerDeco: DecorationSource): boolean;
+    matchesNode(node: Node, outerDeco: readonly Decoration[], innerDeco: DecorationSource): boolean;
     matchesHack(nodeName: string): boolean;
     parseRule(): ParseRule | null;
     stopEvent(event: Event): boolean;
@@ -536,7 +536,15 @@ declare class EditorView {
     */
     dispatch(tr: Transaction): void;
 }
-declare type NodeViewConstructor = (node: Node$1, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView;
+declare type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView;
+/**
+Helper type that maps event names to event object types, but
+includes events that TypeScript's HTMLElementEventMap doesn't know
+about.
+*/
+interface DOMEventMap extends HTMLElementEventMap {
+    [event: string]: Event;
+}
 /**
 Props are configuration values that can be passed to an editor view
 or included in a plugin. This interface lists the supported props.
@@ -563,7 +571,7 @@ interface EditorProps {
     default behavior).
     */
     handleDOMEvents?: {
-        [event: string]: (view: EditorView, event: Event) => boolean | void;
+        [event in string]: (view: EditorView, event: DOMEventMap[event]) => boolean | void;
     };
     /**
     Called when the editor receives a `keydown` event.
@@ -583,7 +591,7 @@ interface EditorProps {
     Called for each node around a click, from the inside out. The
     `direct` flag will be true for the inner node.
     */
-    handleClickOn?: (view: EditorView, pos: number, node: Node$1, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
+    handleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
     /**
     Called when the editor is clicked, after `handleClickOn` handlers
     have been called.
@@ -592,7 +600,7 @@ interface EditorProps {
     /**
     Called for each node around a double click.
     */
-    handleDoubleClickOn?: (view: EditorView, pos: number, node: Node$1, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
+    handleDoubleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
     /**
     Called when the editor is double-clicked, after `handleDoubleClickOn`.
     */
@@ -600,7 +608,7 @@ interface EditorProps {
     /**
     Called for each node around a triple click.
     */
-    handleTripleClickOn?: (view: EditorView, pos: number, node: Node$1, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
+    handleTripleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void;
     /**
     Called when the editor is triple-clicked, after `handleTripleClickOn`.
     */
@@ -788,4 +796,4 @@ interface DirectEditorProps extends EditorProps {
     dispatchTransaction?: (tr: Transaction) => void;
 }
 
-export { Decoration, DecorationAttrs, DecorationSet, DecorationSource, DirectEditorProps, EditorProps, EditorView, NodeView };
+export { DOMEventMap, Decoration, DecorationAttrs, DecorationSet, DecorationSource, DirectEditorProps, EditorProps, EditorView, NodeView };

package/dist/index.js

@@ -2509,16 +2509,16 @@ function captureKeyDown(view, event) {
     else if (code == 13 || code == 27) { // Enter, Esc
         return true;
     }
-    else if (code == 37) { // Left arrow
+    else if (code == 37 || (result.mac && code == 66 && mods == "c")) { // Left arrow, Ctrl-b on Mac
         return selectHorizontally(view, -1, mods) || skipIgnoredNodesLeft(view);
     }
-    else if (code == 39) { // Right arrow
+    else if (code == 39 || (result.mac && code == 70 && mods == "c")) { // Right arrow, Ctrl-f on Mac
         return selectHorizontally(view, 1, mods) || skipIgnoredNodesRight(view);
     }
-    else if (code == 38) { // Up arrow
+    else if (code == 38 || (result.mac && code == 80 && mods == "c")) { // Up arrow, Ctrl-p on Mac
         return selectVertically(view, -1, mods) || skipIgnoredNodesLeft(view);
     }
-    else if (code == 40) { // Down arrow
+    else if (code == 40 || (result.mac && code == 78 && mods == "c")) { // Down arrow, Ctrl-n on Mac
         return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesRight(view);
     }
     else if (mods == (mac ? "m" : "c") &&
@@ -2540,22 +2540,19 @@ function serializeForClipboard(view, slice) {
     let serializer = view.someProp("clipboardSerializer") || DOMSerializer.fromSchema(view.state.schema);
     let doc = detachedDoc(), wrap = doc.createElement("div");
     wrap.appendChild(serializer.serializeFragment(content, { document: doc }));
-    let firstChild = wrap.firstChild, needsWrap;
+    let firstChild = wrap.firstChild, needsWrap, wrappers = 0;
     while (firstChild && firstChild.nodeType == 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) {
         for (let i = needsWrap.length - 1; i >= 0; i--) {
             let wrapper = doc.createElement(needsWrap[i]);
             while (wrap.firstChild)
                 wrapper.appendChild(wrap.firstChild);
             wrap.appendChild(wrapper);
-            if (needsWrap[i] != "tbody") {
-                openStart++;
-                openEnd++;
-            }
+            wrappers++;
         }
         firstChild = wrap.firstChild;
     }
     if (firstChild && firstChild.nodeType == 1)
-        firstChild.setAttribute("data-pm-slice", `${openStart} ${openEnd} ${JSON.stringify(context)}`);
+        firstChild.setAttribute("data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`);
     let text = view.someProp("clipboardTextSerializer", f => f(slice)) ||
         slice.content.textBetween(0, slice.content.size, "\n\n");
     return { dom: wrap, text };
@@ -2593,7 +2590,10 @@ function parseFromClipboard(view, text, html, plainText, $context) {
             restoreReplacedSpaces(dom);
     }
     let contextNode = dom && dom.querySelector("[data-pm-slice]");
-    let sliceData = contextNode && /^(\d+) (\d+) (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "");
+    let sliceData = contextNode && /^(\d+) (\d+)(?: -(\d+))? (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "");
+    if (sliceData && sliceData[3])
+        for (let i = +sliceData[3]; i > 0 && dom.firstChild; i--)
+            dom = dom.firstChild;
     if (!slice) {
         let parser = view.someProp("clipboardParser") || view.someProp("domParser") || DOMParser.fromSchema(view.state.schema);
         slice = parser.parseSlice(dom, {
@@ -2608,7 +2608,7 @@ function parseFromClipboard(view, text, html, plainText, $context) {
         });
     }
     if (sliceData) {
-        slice = addContext(closeSlice(slice, +sliceData[1], +sliceData[2]), sliceData[3]);
+        slice = addContext(closeSlice(slice, +sliceData[1], +sliceData[2]), sliceData[4]);
     }
     else { // HTML wasn't created by ProseMirror. Make sure top-level siblings are coherent
         slice = Slice.maxOpen(normalizeSiblings(slice.content, $context), true);
@@ -4566,7 +4566,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     }
     let $from = parse.doc.resolveNoCache(change.start - parse.from);
     let $to = parse.doc.resolveNoCache(change.endB - parse.from);
-    let inlineChange = $from.sameParent($to) && $from.parent.inlineContent;
+    let $fromA = doc.resolve(change.start);
+    let inlineChange = $from.sameParent($to) && $from.parent.inlineContent && $fromA.end() >= change.endA;
     let nextSel;
     // If this looks like the effect of pressing Enter (or was recorded
     // as being an iOS enter press), just dispatch an Enter key instead.
@@ -4609,7 +4610,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
         }, 20);
     }
     let chFrom = change.start, chTo = change.endA;
-    let tr, storedMarks, markChange, $from1;
+    let tr, storedMarks, markChange;
     if (inlineChange) {
         if ($from.pos == $to.pos) { // Deletion
             // IE11 sometimes weirdly moves the DOM selection around after
@@ -4622,8 +4623,8 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
             storedMarks = doc.resolve(change.start).marksAcross(doc.resolve(change.endA));
         }
         else if ( // Adding or removing a mark
-        change.endA == change.endB && ($from1 = doc.resolve(change.start)) &&
-            (markChange = isMarkChange($from.parent.content.cut($from.parentOffset, $to.parentOffset), $from1.parent.content.cut($from1.parentOffset, change.endA - $from1.start())))) {
+        change.endA == change.endB &&
+            (markChange = isMarkChange($from.parent.content.cut($from.parentOffset, $to.parentOffset), $fromA.parent.content.cut($fromA.parentOffset, change.endA - $fromA.start())))) {
             tr = view.state.tr;
             if (markChange.type == "add")
                 tr.addMark(chFrom, chTo, markChange.mark);

package/package.json

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

package/src/README.md

@@ -14,6 +14,8 @@ this module.
 
 @NodeView
 
+@DOMEventMap
+
 ### Decorations
 
 Decorations make it possible to influence the way the document is

package/src/capturekeys.ts

@@ -256,13 +256,13 @@ export function captureKeyDown(view: EditorView, event: KeyboardEvent) {
     return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodesRight(view)
   } else if (code == 13 || code == 27) { // Enter, Esc
     return true
-  } else if (code == 37) { // Left arrow
+  } else if (code == 37 || (result.mac && code == 66 && mods == "c")) { // Left arrow, Ctrl-b on Mac
     return selectHorizontally(view, -1, mods) || skipIgnoredNodesLeft(view)
-  } else if (code == 39) { // Right arrow
+  } else if (code == 39 || (result.mac && code == 70 && mods == "c")) { // Right arrow, Ctrl-f on Mac
     return selectHorizontally(view, 1, mods) || skipIgnoredNodesRight(view)
-  } else if (code == 38) { // Up arrow
+  } else if (code == 38 || (result.mac && code == 80 && mods == "c")) { // Up arrow, Ctrl-p on Mac
     return selectVertically(view, -1, mods) || skipIgnoredNodesLeft(view)
-  } else if (code == 40) { // Down arrow
+  } else if (code == 40 || (result.mac && code == 78 && mods == "c")) { // Down arrow, Ctrl-n on Mac
     return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesRight(view)
   } else if (mods == (browser.mac ? "m" : "c") &&
              (code == 66 || code == 73 || code == 89 || code == 90)) { // Mod-[biyz]

package/src/clipboard.ts

@@ -16,22 +16,20 @@ export function serializeForClipboard(view: EditorView, slice: Slice) {
   let doc = detachedDoc(), wrap = doc.createElement("div")
   wrap.appendChild(serializer.serializeFragment(content, {document: doc}))
 
-  let firstChild = wrap.firstChild, needsWrap
+  let firstChild = wrap.firstChild, needsWrap, wrappers = 0
   while (firstChild && firstChild.nodeType == 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) {
     for (let i = needsWrap.length - 1; i >= 0; i--) {
       let wrapper = doc.createElement(needsWrap[i])
       while (wrap.firstChild) wrapper.appendChild(wrap.firstChild)
       wrap.appendChild(wrapper)
-      if (needsWrap[i] != "tbody") {
-        openStart++
-        openEnd++
-      }
+      wrappers++
     }
     firstChild = wrap.firstChild
   }
 
   if (firstChild && firstChild.nodeType == 1)
-    (firstChild as HTMLElement).setAttribute("data-pm-slice", `${openStart} ${openEnd} ${JSON.stringify(context)}`)
+    (firstChild as HTMLElement).setAttribute(
+      "data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`)
 
   let text = view.someProp("clipboardTextSerializer", f => f(slice)) ||
       slice.content.textBetween(0, slice.content.size, "\n\n")
@@ -67,7 +65,10 @@ export function parseFromClipboard(view: EditorView, text: string, html: string
   }
 
   let contextNode = dom && dom.querySelector("[data-pm-slice]")
-  let sliceData = contextNode && /^(\d+) (\d+) (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "")
+  let sliceData = contextNode && /^(\d+) (\d+)(?: -(\d+))? (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "")
+  if (sliceData && sliceData[3]) for (let i = +sliceData[3]; i > 0 && dom!.firstChild; i--)
+    dom = dom!.firstChild as HTMLElement
+
   if (!slice) {
     let parser = view.someProp("clipboardParser") || view.someProp("domParser") || DOMParser.fromSchema(view.state.schema)
     slice = parser.parseSlice(dom!, {
@@ -81,7 +82,7 @@ export function parseFromClipboard(view: EditorView, text: string, html: string
     })
   }
   if (sliceData) {
-    slice = addContext(closeSlice(slice, +sliceData[1], +sliceData[2]), sliceData[3])
+    slice = addContext(closeSlice(slice, +sliceData[1], +sliceData[2]), sliceData[4])
   } else { // HTML wasn't created by ProseMirror. Make sure top-level siblings are coherent
     slice = Slice.maxOpen(normalizeSiblings(slice.content, $context), true)
     if (slice.openStart || slice.openEnd) {

package/src/decoration.ts

@@ -283,7 +283,7 @@ export class DecorationSet implements DecorationSource {
   /// `start` and `end` are omitted, all decorations in the set are
   /// considered. When `predicate` isn't given, all decorations are
   /// assumed to match.
-  find(start?: number, end?: number, predicate?: (spec: any) => boolean): readonly Decoration[] {
+  find(start?: number, end?: number, predicate?: (spec: any) => boolean): Decoration[] {
     let result: Decoration[] = []
     this.findInner(start == null ? 0 : start, end == null ? 1e9 : end, result, 0, predicate)
     return result

package/src/dom.ts

@@ -1,7 +1,7 @@
 import * as browser from "./browser"
 
-export type DOMNode = Node
-export type DOMSelection = Selection
+export type DOMNode = InstanceType<typeof window.Node>
+export type DOMSelection = InstanceType<typeof window.Selection>
 
 export const domIndex = function(node: Node) {
   for (var index = 0;; index++) {

package/src/domchange.ts

@@ -167,7 +167,8 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
 
   let $from = parse.doc.resolveNoCache(change.start - parse.from)
   let $to = parse.doc.resolveNoCache(change.endB - parse.from)
-  let inlineChange = $from.sameParent($to) && $from.parent.inlineContent
+  let $fromA = doc.resolve(change.start)
+  let inlineChange = $from.sameParent($to) && $from.parent.inlineContent && $fromA.end() >= change.endA
   let nextSel
   // If this looks like the effect of pressing Enter (or was recorded
   // as being an iOS enter press), just dispatch an Enter key instead.
@@ -213,7 +214,7 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
 
   let chFrom = change.start, chTo = change.endA
 
-  let tr, storedMarks, markChange, $from1
+  let tr, storedMarks, markChange
   if (inlineChange) {
     if ($from.pos == $to.pos) { // Deletion
       // IE11 sometimes weirdly moves the DOM selection around after
@@ -225,9 +226,9 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
       tr = view.state.tr.delete(chFrom, chTo)
       storedMarks = doc.resolve(change.start).marksAcross(doc.resolve(change.endA))
     } else if ( // Adding or removing a mark
-      change.endA == change.endB && ($from1 = doc.resolve(change.start)) &&
+      change.endA == change.endB &&
       (markChange = isMarkChange($from.parent.content.cut($from.parentOffset, $to.parentOffset),
-                                 $from1.parent.content.cut($from1.parentOffset, change.endA - $from1.start())))
+                                 $fromA.parent.content.cut($fromA.parentOffset, change.endA - $fromA.start())))
     ) {
       tr = view.state.tr
       if (markChange.type == "add") tr.addMark(chFrom, chTo, markChange.mark)

package/src/index.ts

@@ -498,6 +498,13 @@ function checkStateComponent(plugin: Plugin) {
 type NodeViewConstructor = (node: Node, view: EditorView, getPos: () => number | undefined,
                             decorations: readonly Decoration[], innerDecorations: DecorationSource) => NodeView
 
+/// Helper type that maps event names to event object types, but
+/// includes events that TypeScript's HTMLElementEventMap doesn't know
+/// about.
+export interface DOMEventMap extends HTMLElementEventMap {
+  [event: string]: Event
+}
+
 /// Props are configuration values that can be passed to an editor view
 /// or included in a plugin. This interface lists the supported props.
 ///
@@ -519,7 +526,9 @@ export interface EditorProps {
   /// from such a function, you are responsible for calling
   /// `preventDefault` yourself (or not, if you want to allow the
   /// default behavior).
-  handleDOMEvents?: {[event: string]: (view: EditorView, event: Event) => boolean | void}
+  handleDOMEvents?: {
+    [event in string]: (view: EditorView, event: DOMEventMap[event]) => boolean | void
+  }
 
   /// Called when the editor receives a `keydown` event.
   handleKeyDown?: (view: EditorView, event: KeyboardEvent) => boolean | void