prosemirror-view 1.27.2 → 1.28.1

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 1.28.1 (2022-09-21)
+
+### Bug fixes
+
+Fix an issue where the editor would reset its scroll position to the top of the document for any state reconfiguration, even if the document was unchanged.
+
+## 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 {
@@ -5419,6 +5423,7 @@ var EditorView = function () {
     key: "update",
     value: function update(props) {
       if (props.handleDOMEvents != this._props.handleDOMEvents) ensureListeners(this);
+      var prevProps = this._props;
       this._props = props;
 
       if (props.plugins) {
@@ -5426,7 +5431,7 @@ var EditorView = function () {
         this.directPlugins = props.plugins;
       }
 
-      this.updateStateInner(props.state, true);
+      this.updateStateInner(props.state, prevProps);
     }
   }, {
     key: "setProps",
@@ -5448,11 +5453,11 @@ var EditorView = function () {
   }, {
     key: "updateState",
     value: function updateState(state) {
-      this.updateStateInner(state, this.state.plugins != state.plugins);
+      this.updateStateInner(state, this._props);
     }
   }, {
     key: "updateStateInner",
-    value: function updateStateInner(state, reconfigured) {
+    value: function updateStateInner(state, prevProps) {
       var prev = this.state,
           redraw = false,
           updateSel = false;
@@ -5463,15 +5468,18 @@ var EditorView = function () {
       }
 
       this.state = state;
+      var pluginsChanged = prev.plugins != state.plugins || this._props.plugins != prevProps.plugins;
 
-      if (reconfigured) {
+      if (pluginsChanged || this._props.plugins != prevProps.plugins || this._props.nodeViews != prevProps.nodeViews) {
         var nodeViews = buildNodeViews(this);
 
         if (changedNodeViews(nodeViews, this.nodeViews)) {
           this.nodeViews = nodeViews;
           redraw = true;
         }
+      }
 
+      if (pluginsChanged || prevProps.handleDOMEvents != this._props.handleDOMEvents) {
         ensureListeners(this);
       }
 
@@ -5479,7 +5487,7 @@ var EditorView = function () {
       updateCursorWrapper(this);
       var innerDeco = viewDecorations(this),
           outerDeco = computeDocDeco(this);
-      var scroll = reconfigured ? "reset" : state.scrollToSelection > prev.scrollToSelection ? "to selection" : "preserve";
+      var scroll = prev.plugins != state.plugins && !prev.doc.eq(state.doc) ? "reset" : state.scrollToSelection > prev.scrollToSelection ? "to selection" : "preserve";
       var updateDoc = redraw || !this.docView.matchesNode(state.doc, outerDeco, innerDeco);
       if (updateDoc || !state.selection.eq(prev.selection)) updateSel = true;
       var oldScrollPos = scroll == "preserve" && updateSel && this.dom.style.overflowAnchor == null && storeScrollPos(this);
@@ -5588,6 +5596,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();
@@ -4906,12 +4907,13 @@ class EditorView {
     update(props) {
         if (props.handleDOMEvents != this._props.handleDOMEvents)
             ensureListeners(this);
+        let prevProps = this._props;
         this._props = props;
         if (props.plugins) {
             props.plugins.forEach(checkStateComponent);
             this.directPlugins = props.plugins;
         }
-        this.updateStateInner(props.state, true);
+        this.updateStateInner(props.state, prevProps);
     }
     /**
     Update the view by updating existing props object with the object
@@ -4932,9 +4934,9 @@ class EditorView {
     other props.
     */
     updateState(state) {
-        this.updateStateInner(state, this.state.plugins != state.plugins);
+        this.updateStateInner(state, this._props);
     }
-    updateStateInner(state, reconfigured) {
+    updateStateInner(state, prevProps) {
         let prev = this.state, redraw = false, updateSel = false;
         // When stored marks are added, stop composition, so that they can
         // be displayed.
@@ -4943,18 +4945,21 @@ class EditorView {
             updateSel = true;
         }
         this.state = state;
-        if (reconfigured) {
+        let pluginsChanged = prev.plugins != state.plugins || this._props.plugins != prevProps.plugins;
+        if (pluginsChanged || this._props.plugins != prevProps.plugins || this._props.nodeViews != prevProps.nodeViews) {
             let nodeViews = buildNodeViews(this);
             if (changedNodeViews(nodeViews, this.nodeViews)) {
                 this.nodeViews = nodeViews;
                 redraw = true;
             }
+        }
+        if (pluginsChanged || prevProps.handleDOMEvents != this._props.handleDOMEvents) {
             ensureListeners(this);
         }
         this.editable = getEditable(this);
         updateCursorWrapper(this);
         let innerDeco = viewDecorations(this), outerDeco = computeDocDeco(this);
-        let scroll = reconfigured ? "reset"
+        let scroll = prev.plugins != state.plugins && !prev.doc.eq(state.doc) ? "reset"
             : state.scrollToSelection > prev.scrollToSelection ? "to selection" : "preserve";
         let updateDoc = redraw || !this.docView.matchesNode(state.doc, outerDeco, innerDeco);
         if (updateDoc || !state.selection.eq(prev.selection))
@@ -5073,6 +5078,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.1",
   "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

@@ -124,12 +124,13 @@ export class EditorView {
   /// the DOM.
   update(props: DirectEditorProps) {
     if (props.handleDOMEvents != this._props.handleDOMEvents) ensureListeners(this)
+    let prevProps = this._props
     this._props = props
     if (props.plugins) {
       props.plugins.forEach(checkStateComponent)
       this.directPlugins = props.plugins
     }
-    this.updateStateInner(props.state, true)
+    this.updateStateInner(props.state, prevProps)
   }
 
   /// Update the view by updating existing props object with the object
@@ -146,10 +147,10 @@ export class EditorView {
   /// Update the editor's `state` prop, without touching any of the
   /// other props.
   updateState(state: EditorState) {
-    this.updateStateInner(state, this.state.plugins != state.plugins)
+    this.updateStateInner(state, this._props)
   }
 
-  private updateStateInner(state: EditorState, reconfigured: boolean) {
+  private updateStateInner(state: EditorState, prevProps: DirectEditorProps) {
     let prev = this.state, redraw = false, updateSel = false
     // When stored marks are added, stop composition, so that they can
     // be displayed.
@@ -158,12 +159,15 @@ export class EditorView {
       updateSel = true
     }
     this.state = state
-    if (reconfigured) {
+    let pluginsChanged = prev.plugins != state.plugins || this._props.plugins != prevProps.plugins
+    if (pluginsChanged || this._props.plugins != prevProps.plugins || this._props.nodeViews != prevProps.nodeViews) {
       let nodeViews = buildNodeViews(this)
       if (changedNodeViews(nodeViews, this.nodeViews)) {
         this.nodeViews = nodeViews
         redraw = true
       }
+    }
+    if (pluginsChanged || prevProps.handleDOMEvents != this._props.handleDOMEvents) {
       ensureListeners(this)
     }
 
@@ -171,7 +175,7 @@ export class EditorView {
     updateCursorWrapper(this)
     let innerDeco = viewDecorations(this), outerDeco = computeDocDeco(this)
 
-    let scroll = reconfigured ? "reset"
+    let scroll = prev.plugins != state.plugins && !prev.doc.eq(state.doc) ? "reset"
         : (state as any).scrollToSelection > (prev as any).scrollToSelection ? "to selection" : "preserve"
     let updateDoc = redraw || !this.docView.matchesNode(state.doc, outerDeco, innerDeco)
     if (updateDoc || !state.selection.eq(prev.selection)) updateSel = true
@@ -292,6 +296,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 +655,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)
 }