prosemirror-view 1.28.3 → 1.29.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 1.29.0 (2022-10-12)
+
+### Bug fixes
+
+Fix an issue where HTML comments added to the clipboard by the OS throw off the clipboard parser.
+
+Make sure Chrome Android's native behavior on pressing Enter in an empty nested list item is replaced by the result of the editor's Enter key handler.
+
+### New features
+
+The `transformPastedHTML`, `transformPastedText`, `transformPasted`, `transformCopied`, and `clipboardTextSerializer` props are now passed the view instance as last argument.
+
 ## 1.28.3 (2022-10-05)
 
 ### Bug fixes
@@ -20,11 +32,11 @@ Fix an issue where the editor would reset its scroll position to the top of the
 
 ### 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
+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.
 
 ### 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
+The new `transformCopied` prop can be used to transform a copied/cut slice before it is serialized to the clipboard.
 
 ## 1.27.2 (2022-08-19)
 

package/README.md

@@ -1,6 +1,6 @@
 # prosemirror-view
 
-[ [**WEBSITE**](https://prosemirror.net) | [**ISSUES**](https://github.com/prosemirror/prosemirror/issues) | [**FORUM**](https://discuss.prosemirror.net) | [**GITTER**](https://gitter.im/ProseMirror/prosemirror) | [**CHANGELOG**](https://github.com/ProseMirror/prosemirror-view/blob/master/CHANGELOG.md) ]
+[ [**WEBSITE**](https://prosemirror.net) | [**ISSUES**](https://github.com/prosemirror/prosemirror/issues) | [**FORUM**](https://discuss.prosemirror.net) | [**CHANGELOG**](https://github.com/ProseMirror/prosemirror-view/blob/master/CHANGELOG.md) ]
 
 This is a [core module](https://prosemirror.net/docs/ref/#view) of [ProseMirror](https://prosemirror.net).
 ProseMirror is a well-behaved rich semantic content editor based on

package/dist/index.cjs

@@ -2908,7 +2908,7 @@ function captureKeyDown(view, event) {
 
 function serializeForClipboard(view, slice) {
   view.someProp("transformCopied", function (f) {
-    slice = f(slice);
+    slice = f(slice, view);
   });
   var context = [],
       _slice = slice,
@@ -2951,7 +2951,7 @@ function serializeForClipboard(view, slice) {
 
   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);
+    return f(slice, view);
   }) || slice.content.textBetween(0, slice.content.size, "\n\n");
   return {
     dom: wrap,
@@ -2967,11 +2967,11 @@ function parseFromClipboard(view, text, html, plainText, $context) {
 
   if (asText) {
     view.someProp("transformPastedText", function (f) {
-      text = f(text, inCode || plainText);
+      text = f(text, inCode || plainText, view);
     });
     if (inCode) return text ? new prosemirrorModel.Slice(prosemirrorModel.Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : prosemirrorModel.Slice.empty;
     var parsed = view.someProp("clipboardTextParser", function (f) {
-      return f(text, $context, plainText);
+      return f(text, $context, plainText, view);
     });
 
     if (parsed) {
@@ -2988,7 +2988,7 @@ function parseFromClipboard(view, text, html, plainText, $context) {
     }
   } else {
     view.someProp("transformPastedHTML", function (f) {
-      html = f(html);
+      html = f(html, view);
     });
     dom = readHTML(html);
     if (webkit) restoreReplacedSpaces(dom);
@@ -2996,8 +2996,15 @@ function parseFromClipboard(view, text, html, plainText, $context) {
 
   var contextNode = dom && dom.querySelector("[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 (sliceData && sliceData[3]) for (var i = +sliceData[3]; i > 0; i--) {
+    var child = dom.firstChild;
+
+    while (child && child.nodeType != 1) {
+      child = child.nextSibling;
+    }
+
+    if (!child) break;
+    dom = child;
   }
 
   if (!slice) {
@@ -3032,7 +3039,7 @@ function parseFromClipboard(view, text, html, plainText, $context) {
   }
 
   view.someProp("transformPasted", function (f) {
-    slice = f(slice);
+    slice = f(slice, view);
   });
   return slice;
 }
@@ -3862,7 +3869,7 @@ editHandlers.drop = function (view, _event) {
 
   if (slice) {
     view.someProp("transformPasted", function (f) {
-      slice = f(slice);
+      slice = f(slice, view);
     });
   } else {
     slice = parseFromClipboard(view, event.dataTransfer.getData(brokenClipboardAPI ? "Text" : "text/plain"), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);
@@ -5180,7 +5187,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
   var change = findDiff(compare.content, parse.doc.content, parse.from, preferredPos, preferredSide);
 
   if ((ios && view.input.lastIOSEnter > Date.now() - 225 || android) && addedNodes.some(function (n) {
-    return n.nodeName == "DIV" || n.nodeName == "P";
+    return n.nodeName == "DIV" || n.nodeName == "P" || n.nodeName == "LI";
   }) && (!change || change.endA >= change.endB) && view.someProp("handleKeyDown", function (f) {
     return f(view, keyEvent(13, "Enter"));
   })) {

package/dist/index.d.ts

@@ -673,7 +673,7 @@ interface EditorProps<P = any> {
     Can be used to transform pasted HTML text, _before_ it is parsed,
     for example to clean it up.
     */
-    transformPastedHTML?: (this: P, html: string) => string;
+    transformPastedHTML?: (this: P, html: string, view: EditorView) => string;
     /**
     The [parser](https://prosemirror.net/docs/ref/#model.DOMParser) to use when reading content from
     the clipboard. When not given, the value of the
@@ -684,7 +684,7 @@ interface EditorProps<P = any> {
     Transform pasted plain text. The `plain` flag will be true when
     the text is pasted as plain text.
     */
-    transformPastedText?: (this: P, text: string, plain: boolean) => string;
+    transformPastedText?: (this: P, text: string, plain: boolean, view: EditorView) => string;
     /**
     A function to parse text from the clipboard into a document
     slice. Called after
@@ -694,17 +694,17 @@ interface EditorProps<P = any> {
     [`clipboardParser`](https://prosemirror.net/docs/ref/#view.EditorProps.clipboardParser) on it.
     The `plain` flag will be true when the text is pasted as plain text.
     */
-    clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean) => Slice;
+    clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean, view: EditorView) => Slice;
     /**
     Can be used to transform pasted or dragged-and-dropped content
     before it is applied to the document.
     */
-    transformPasted?: (this: P, slice: Slice) => Slice;
+    transformPasted?: (this: P, slice: Slice, view: EditorView) => Slice;
     /**
     Can be used to transform copied or cut content before it is
     serialized to the clipboard.
     */
-    transformCopied?: (this: P, slice: Slice) => Slice;
+    transformCopied?: (this: P, slice: Slice, view: EditorView) => Slice;
     /**
     Allows you to pass custom rendering and behavior logic for
     nodes. Should map node names to constructor functions that
@@ -759,7 +759,7 @@ interface EditorProps<P = any> {
     editor will use [`textBetween`](https://prosemirror.net/docs/ref/#model.Node.textBetween) on the
     selected range.
     */
-    clipboardTextSerializer?: (this: P, content: Slice) => string;
+    clipboardTextSerializer?: (this: P, content: Slice, view: EditorView) => string;
     /**
     A set of [document decorations](https://prosemirror.net/docs/ref/#view.Decoration) to show in the
     view.

package/dist/index.js

@@ -2540,7 +2540,7 @@ function captureKeyDown(view, event) {
 }
 
 function serializeForClipboard(view, slice) {
-    view.someProp("transformCopied", f => { slice = f(slice); });
+    view.someProp("transformCopied", f => { slice = f(slice, view); });
     let context = [], { content, openStart, openEnd } = slice;
     while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild.childCount == 1) {
         openStart--;
@@ -2565,7 +2565,7 @@ function serializeForClipboard(view, slice) {
     }
     if (firstChild && firstChild.nodeType == 1)
         firstChild.setAttribute("data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`);
-    let text = view.someProp("clipboardTextSerializer", f => f(slice)) ||
+    let text = view.someProp("clipboardTextSerializer", f => f(slice, view)) ||
         slice.content.textBetween(0, slice.content.size, "\n\n");
     return { dom: wrap, text };
 }
@@ -2577,10 +2577,10 @@ function parseFromClipboard(view, text, html, plainText, $context) {
         return null;
     let asText = text && (plainText || inCode || !html);
     if (asText) {
-        view.someProp("transformPastedText", f => { text = f(text, inCode || plainText); });
+        view.someProp("transformPastedText", f => { text = f(text, inCode || plainText, view); });
         if (inCode)
             return text ? new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : Slice.empty;
-        let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText));
+        let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText, view));
         if (parsed) {
             slice = parsed;
         }
@@ -2596,7 +2596,7 @@ function parseFromClipboard(view, text, html, plainText, $context) {
         }
     }
     else {
-        view.someProp("transformPastedHTML", f => { html = f(html); });
+        view.someProp("transformPastedHTML", f => { html = f(html, view); });
         dom = readHTML(html);
         if (webkit)
             restoreReplacedSpaces(dom);
@@ -2604,8 +2604,14 @@ function parseFromClipboard(view, text, html, plainText, $context) {
     let contextNode = dom && dom.querySelector("[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;
+        for (let i = +sliceData[3]; i > 0; i--) {
+            let child = dom.firstChild;
+            while (child && child.nodeType != 1)
+                child = child.nextSibling;
+            if (!child)
+                break;
+            dom = child;
+        }
     if (!slice) {
         let parser = view.someProp("clipboardParser") || view.someProp("domParser") || DOMParser.fromSchema(view.state.schema);
         slice = parser.parseSlice(dom, {
@@ -2631,7 +2637,7 @@ function parseFromClipboard(view, text, html, plainText, $context) {
             slice = closeSlice(slice, openStart, openEnd);
         }
     }
-    view.someProp("transformPasted", f => { slice = f(slice); });
+    view.someProp("transformPasted", f => { slice = f(slice, view); });
     return slice;
 }
 const inlineParents = /^(a|abbr|acronym|b|cite|code|del|em|i|ins|kbd|label|output|q|ruby|s|samp|span|strong|sub|sup|time|u|tt|var)$/i;
@@ -3421,7 +3427,7 @@ editHandlers.drop = (view, _event) => {
     let $mouse = view.state.doc.resolve(eventPos.pos);
     let slice = dragging && dragging.slice;
     if (slice) {
-        view.someProp("transformPasted", f => { slice = f(slice); });
+        view.someProp("transformPasted", f => { slice = f(slice, view); });
     }
     else {
         slice = parseFromClipboard(view, event.dataTransfer.getData(brokenClipboardAPI ? "Text" : "text/plain"), brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse);
@@ -4593,7 +4599,7 @@ function readDOMChange(view, from, to, typeOver, addedNodes) {
     view.input.lastKeyCode = null;
     let change = findDiff(compare.content, parse.doc.content, parse.from, preferredPos, preferredSide);
     if ((ios && view.input.lastIOSEnter > Date.now() - 225 || android) &&
-        addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P") &&
+        addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P" || n.nodeName == "LI") &&
         (!change || change.endA >= change.endB) &&
         view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
         view.input.lastIOSEnter = 0;

package/package.json

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

package/src/clipboard.ts

@@ -3,7 +3,7 @@ import * as browser from "./browser"
 import {EditorView} from "./index"
 
 export function serializeForClipboard(view: EditorView, slice: Slice) {
-  view.someProp("transformCopied", f => { slice = f(slice!) })
+  view.someProp("transformCopied", f => { slice = f(slice!, view) })
 
   let context = [], {content, openStart, openEnd} = slice
   while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild!.childCount == 1) {
@@ -33,7 +33,7 @@ export function serializeForClipboard(view: EditorView, slice: Slice) {
     (firstChild as HTMLElement).setAttribute(
       "data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`)
 
-  let text = view.someProp("clipboardTextSerializer", f => f(slice)) ||
+  let text = view.someProp("clipboardTextSerializer", f => f(slice, view)) ||
       slice.content.textBetween(0, slice.content.size, "\n\n")
 
   return {dom: wrap, text}
@@ -46,9 +46,9 @@ export function parseFromClipboard(view: EditorView, text: string, html: string
   if (!html && !text) return null
   let asText = text && (plainText || inCode || !html)
   if (asText) {
-    view.someProp("transformPastedText", f => { text = f(text, inCode || plainText) })
+    view.someProp("transformPastedText", f => { text = f(text, inCode || plainText, view) })
     if (inCode) return text ? new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : Slice.empty
-    let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText))
+    let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText, view))
     if (parsed) {
       slice = parsed
     } else {
@@ -61,15 +61,19 @@ export function parseFromClipboard(view: EditorView, text: string, html: string
       })
     }
   } else {
-    view.someProp("transformPastedHTML", f => { html = f(html!) })
+    view.someProp("transformPastedHTML", f => { html = f(html!, view) })
     dom = readHTML(html!)
     if (browser.webkit) restoreReplacedSpaces(dom)
   }
 
   let contextNode = dom && dom.querySelector("[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 (sliceData && sliceData[3]) for (let i = +sliceData[3]; i > 0; i--) {
+    let child = dom!.firstChild
+    while (child && child.nodeType != 1) child = child.nextSibling
+    if (!child) break
+    dom = child as HTMLElement
+  }
 
   if (!slice) {
     let parser = view.someProp("clipboardParser") || view.someProp("domParser") || DOMParser.fromSchema(view.state.schema)
@@ -97,7 +101,7 @@ export function parseFromClipboard(view: EditorView, text: string, html: string
     }
   }
 
-  view.someProp("transformPasted", f => { slice = f(slice!) })
+  view.someProp("transformPasted", f => { slice = f(slice!, view) })
   return slice
 }
 

package/src/domchange.ts

@@ -111,7 +111,7 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
 
   let change = findDiff(compare.content, parse.doc.content, parse.from, preferredPos, preferredSide)
   if ((browser.ios && view.input.lastIOSEnter > Date.now() - 225 || browser.android) &&
-      addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P") &&
+      addedNodes.some(n => n.nodeName == "DIV" || n.nodeName == "P" || n.nodeName == "LI") &&
       (!change || change.endA >= change.endB) &&
       view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter")))) {
     view.input.lastIOSEnter = 0

package/src/index.ts

@@ -638,7 +638,7 @@ export interface EditorProps<P = any> {
 
   /// Can be used to transform pasted HTML text, _before_ it is parsed,
   /// for example to clean it up.
-  transformPastedHTML?: (this: P, html: string) => string
+  transformPastedHTML?: (this: P, html: string, view: EditorView) => string
 
   /// The [parser](#model.DOMParser) to use when reading content from
   /// the clipboard. When not given, the value of the
@@ -647,7 +647,7 @@ export interface EditorProps<P = any> {
 
   /// Transform pasted plain text. The `plain` flag will be true when
   /// the text is pasted as plain text.
-  transformPastedText?: (this: P, text: string, plain: boolean) => string
+  transformPastedText?: (this: P, text: string, plain: boolean, view: EditorView) => string
 
   /// A function to parse text from the clipboard into a document
   /// slice. Called after
@@ -656,15 +656,15 @@ export interface EditorProps<P = any> {
   /// in `<p>` tags, and call
   /// [`clipboardParser`](#view.EditorProps.clipboardParser) on it.
   /// The `plain` flag will be true when the text is pasted as plain text.
-  clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean) => Slice
+  clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean, view: EditorView) => Slice
 
   /// Can be used to transform pasted or dragged-and-dropped content
   /// before it is applied to the document.
-  transformPasted?: (this: P, slice: Slice) => Slice
+  transformPasted?: (this: P, slice: Slice, view: EditorView) => Slice
 
   /// Can be used to transform copied or cut content before it is
   /// serialized to the clipboard.
-  transformCopied?: (this: P, slice: Slice) => Slice
+  transformCopied?: (this: P, slice: Slice, view: EditorView) => Slice
 
   /// Allows you to pass custom rendering and behavior logic for
   /// nodes. Should map node names to constructor functions that
@@ -711,7 +711,7 @@ export interface EditorProps<P = any> {
   /// selection when copying text to the clipboard. By default, the
   /// editor will use [`textBetween`](#model.Node.textBetween) on the
   /// selected range.
-  clipboardTextSerializer?: (this: P, content: Slice) => string
+  clipboardTextSerializer?: (this: P, content: Slice, view: EditorView) => string
 
   /// A set of [document decorations](#view.Decoration) to show in the
   /// view.

package/src/input.ts

@@ -666,7 +666,7 @@ editHandlers.drop = (view, _event) => {
   let $mouse = view.state.doc.resolve(eventPos.pos)
   let slice = dragging && dragging.slice
   if (slice) {
-    view.someProp("transformPasted", f => { slice = f(slice!) })
+    view.someProp("transformPasted", f => { slice = f(slice!, view) })
   } else {
     slice = parseFromClipboard(view, event.dataTransfer.getData(brokenClipboardAPI ? "Text" : "text/plain"),
                                brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse)