prosemirror-view 1.27.2 → 1.28.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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

package/dist/index.cjs

@@ -2590,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);
 }
 
@@ -2887,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--;
@@ -3562,7 +3566,7 @@ var MouseDown = function () {
         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 {
@@ -5588,6 +5592,19 @@ var EditorView = function () {
   }, {
     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;
     }
   }, {

package/dist/index.d.ts

@@ -701,6 +701,11 @@ interface EditorProps<P = any> {
     */
     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

package/dist/index.js

@@ -2203,7 +2203,7 @@ function selectionBetween(view, $anchor, $head, bias) {
         || TextSelection.between($anchor, $head, bias);
 }
 function hasFocusAndSelection(view) {
-    if (view.editable && view.root.activeElement != view.dom)
+    if (view.editable && !view.hasFocus())
         return false;
     return hasSelection(view);
 }
@@ -2532,6 +2532,7 @@ function captureKeyDown(view, event) {
 }
 
 function serializeForClipboard(view, slice) {
+    view.someProp("transformCopied", f => { slice = f(slice); });
     let context = [], { content, openStart, openEnd } = slice;
     while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild.childCount == 1) {
         openStart--;
@@ -3129,7 +3130,7 @@ class MouseDown {
                 // (hidden) cursor is doesn't change the selection, and
                 // thus doesn't get a reaction from ProseMirror. This
                 // works around that.
-                (chrome && !(this.view.state.selection instanceof TextSelection) &&
+                (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, Selection.near(this.view.state.doc.resolve(pos.pos)), "pointer");
             event.preventDefault();
@@ -5073,6 +5074,24 @@ class EditorView {
     Query whether the view has focus.
     */
     hasFocus() {
+        // Work around IE not handling focus correctly if resize handles are shown.
+        // If the cursor is inside an element with resize handles, activeElement
+        // will be that element instead of this.dom.
+        if (ie) {
+            // If activeElement is within this.dom, and there are no other elements
+            // setting `contenteditable` to false in between, treat it as focused.
+            let 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;
     }
     /**

package/package.json

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

package/src/clipboard.ts

@@ -3,6 +3,8 @@ import * as browser from "./browser"
 import {EditorView} from "./index"
 
 export function serializeForClipboard(view: EditorView, slice: Slice) {
+  view.someProp("transformCopied", f => { slice = f(slice!) })
+
   let context = [], {content, openStart, openEnd} = slice
   while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild!.childCount == 1) {
     openStart--

package/src/index.ts

@@ -292,6 +292,21 @@ export class EditorView {
 
   /// Query whether the view has focus.
   hasFocus() {
+    // Work around IE not handling focus correctly if resize handles are shown.
+    // If the cursor is inside an element with resize handles, activeElement
+    // will be that element instead of this.dom.
+    if (browser.ie) {
+      // If activeElement is within this.dom, and there are no other elements
+      // setting `contenteditable` to false in between, treat it as focused.
+      let 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 as HTMLElement).contentEditable == 'false') return false
+        node = node.parentElement
+      }
+      return true
+    }
     return this.root.activeElement == this.dom
   }
 
@@ -636,6 +651,10 @@ export interface EditorProps<P = any> {
   /// 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`](#view.NodeView) object implementing the

package/src/input.ts

@@ -388,7 +388,7 @@ class MouseDown {
                 // (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) &&
+                (browser.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, Selection.near(this.view.state.doc.resolve(pos.pos)), "pointer")

package/src/selection.ts

@@ -181,7 +181,7 @@ export function selectionBetween(view: EditorView, $anchor: ResolvedPos, $head:
 }
 
 export function hasFocusAndSelection(view: EditorView) {
-  if (view.editable && view.root.activeElement != view.dom) return false
+  if (view.editable && !view.hasFocus()) return false
   return hasSelection(view)
 }