prosemirror-view 1.39.2 → 1.40.0

package/src/domchange.ts

@@ -1,5 +1,5 @@
 import {Fragment, DOMParser, TagParseRule, Node, Mark, ResolvedPos} from "prosemirror-model"
-import {Selection, TextSelection} from "prosemirror-state"
+import {Selection, TextSelection, Transaction} from "prosemirror-state"
 
 import {selectionBetween, selectionFromDOM, selectionToDOM} from "./selection"
 import {selectionCollapsed, keyEvent, DOMNode} from "./dom"
@@ -223,7 +223,27 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
 
   let chFrom = change.start, chTo = change.endA
 
-  let tr, storedMarks, markChange
+  let mkTr = (base?: Transaction) => {
+    let tr = base || view.state.tr.replace(chFrom, chTo, parse.doc.slice(change!.start - parse.from,
+                                                                         change!.endB - parse.from))
+    if (parse.sel) {
+      let sel = resolveSelection(view, tr.doc, parse.sel)
+      // Chrome will sometimes, during composition, report the
+      // selection in the wrong place. If it looks like that is
+      // happening, don't update the selection.
+      // Edge just doesn't move the cursor forward when you start typing
+      // in an empty block or between br nodes.
+      if (sel && !(browser.chrome && view.composing && sel.empty &&
+        (change!.start != change!.endB || view.input.lastChromeDelete < Date.now() - 100) &&
+        (sel.head == chFrom || sel.head == tr.mapping.map(chTo) - 1) ||
+        browser.ie && sel.empty && sel.head == chFrom))
+        tr.setSelection(sel)
+    }
+    if (compositionID) tr.setMeta("composition", compositionID)
+    return tr.scrollIntoView()
+  }
+
+  let markChange
   if (inlineChange) {
     if ($from.pos == $to.pos) { // Deletion
       // IE11 sometimes weirdly moves the DOM selection around after
@@ -232,42 +252,29 @@ export function readDOMChange(view: EditorView, from: number, to: number, typeOv
         view.domObserver.suppressSelectionUpdates()
         setTimeout(() => selectionToDOM(view), 20)
       }
-      tr = view.state.tr.delete(chFrom, chTo)
-      storedMarks = doc.resolve(change.start).marksAcross(doc.resolve(change.endA))
+      let tr = mkTr(view.state.tr.delete(chFrom, chTo))
+      let marks = doc.resolve(change.start).marksAcross(doc.resolve(change.endA))
+      if (marks) tr.ensureMarks(marks)
+      view.dispatch(tr)
     } else if ( // Adding or removing a mark
       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
+      let tr = mkTr(view.state.tr)
       if (markChange.type == "add") tr.addMark(chFrom, chTo, markChange.mark)
       else tr.removeMark(chFrom, chTo, markChange.mark)
+      view.dispatch(tr)
     } else if ($from.parent.child($from.index()).isText && $from.index() == $to.index() - ($to.textOffset ? 0 : 1)) {
       // Both positions in the same text node -- simply insert text
       let text = $from.parent.textBetween($from.parentOffset, $to.parentOffset)
-      if (view.someProp("handleTextInput", f => f(view, chFrom, chTo, text))) return
-      tr = view.state.tr.insertText(text, chFrom, chTo)
+      let deflt = () => mkTr(view.state.tr.insertText(text, chFrom, chTo))
+      if (!view.someProp("handleTextInput", f => f(view, chFrom, chTo, text, deflt)))
+        view.dispatch(deflt())
     }
+  } else {
+    view.dispatch(mkTr())
   }
-
-  if (!tr)
-    tr = view.state.tr.replace(chFrom, chTo, parse.doc.slice(change.start - parse.from, change.endB - parse.from))
-  if (parse.sel) {
-    let sel = resolveSelection(view, tr.doc, parse.sel)
-    // Chrome will sometimes, during composition, report the
-    // selection in the wrong place. If it looks like that is
-    // happening, don't update the selection.
-    // Edge just doesn't move the cursor forward when you start typing
-    // in an empty block or between br nodes.
-    if (sel && !(browser.chrome && view.composing && sel.empty &&
-                 (change.start != change.endB || view.input.lastChromeDelete < Date.now() - 100) &&
-                 (sel.head == chFrom || sel.head == tr.mapping.map(chTo) - 1) ||
-                 browser.ie && sel.empty && sel.head == chFrom))
-      tr.setSelection(sel)
-  }
-  if (storedMarks) tr.ensureMarks(storedMarks)
-  if (compositionID) tr.setMeta("composition", compositionID)
-  view.dispatch(tr.scrollIntoView())
 }
 
 function resolveSelection(view: EditorView, doc: Node, parsedSel: {anchor: number, head: number}) {

package/src/index.ts

@@ -28,7 +28,8 @@ export const __endComposition = endComposition
 /// editable document. Its state and behavior are determined by its
 /// [props](#view.DirectEditorProps).
 export class EditorView {
-  private _props: DirectEditorProps
+  /// @internal
+  _props: DirectEditorProps
   private directPlugins: readonly Plugin[]
   private _root: Document | ShadowRoot | null = null
   /// @internal
@@ -490,11 +491,7 @@ export class EditorView {
   /// [`updateState`](#view.EditorView.updateState) with the result.
   /// This method is bound to the view instance, so that it can be
   /// easily passed around.
-  dispatch(tr: Transaction) {
-    let dispatchTransaction = this._props.dispatchTransaction
-    if (dispatchTransaction) dispatchTransaction.call(this, tr)
-    else this.updateState(this.state.apply(tr))
-  }
+  declare dispatch: (tr: Transaction) => void
 
   /// @internal
   domSelectionRange(): DOMSelectionRange {
@@ -510,6 +507,12 @@ export class EditorView {
   }
 }
 
+EditorView.prototype.dispatch = function(tr: Transaction) {
+  let dispatchTransaction = this._props.dispatchTransaction
+  if (dispatchTransaction) dispatchTransaction.call(this, tr)
+  else this.updateState(this.state.apply(tr))
+}
+
 function computeDocDeco(view: EditorView) {
   let attrs = Object.create(null)
   attrs.class = "ProseMirror"
@@ -635,7 +638,7 @@ export interface EditorProps<P = any> {
   /// Whenever the user directly input text, this handler is called
   /// before the input is applied. If it returns `true`, the default
   /// behavior of actually inserting the text is suppressed.
-  handleTextInput?: (this: P, view: EditorView, from: number, to: number, text: string) => boolean | void
+  handleTextInput?: (this: P, view: EditorView, from: number, to: number, text: string, deflt: () => Transaction) => boolean | void
 
   /// Called for each node around a click, from the inside out. The
   /// `direct` flag will be true for the inner node.

package/src/input.ts

@@ -21,7 +21,7 @@ export class InputState {
   mouseDown: MouseDown | null = null
   lastKeyCode: number | null = null
   lastKeyCodeTime = 0
-  lastClick = {time: 0, x: 0, y: 0, type: ""}
+  lastClick = {time: 0, x: 0, y: 0, type: "", button: 0}
   lastSelectionOrigin: string | null = null
   lastSelectionTime = 0
   lastIOSEnter = 0
@@ -151,8 +151,9 @@ editHandlers.keypress = (view, _event) => {
   let sel = view.state.selection
   if (!(sel instanceof TextSelection) || !sel.$from.sameParent(sel.$to)) {
     let text = String.fromCharCode(event.charCode)
-    if (!/[\r\n]/.test(text) && !view.someProp("handleTextInput", f => f(view, sel.$from.pos, sel.$to.pos, text)))
-      view.dispatch(view.state.tr.insertText(text).scrollIntoView())
+    let deflt = () => view.state.tr.insertText(text).scrollIntoView()
+    if (!/[\r\n]/.test(text) && !view.someProp("handleTextInput", f => f(view, sel.$from.pos, sel.$to.pos, text, deflt)))
+      view.dispatch(deflt())
     event.preventDefault()
   }
 }
@@ -278,11 +279,12 @@ handlers.mousedown = (view, _event) => {
   view.input.shiftKey = event.shiftKey
   let flushed = forceDOMFlush(view)
   let now = Date.now(), type = "singleClick"
-  if (now - view.input.lastClick.time < 500 && isNear(event, view.input.lastClick) && !event[selectNodeModifier]) {
+  if (now - view.input.lastClick.time < 500 && isNear(event, view.input.lastClick) && !event[selectNodeModifier] &&
+      view.input.lastClick.button == event.button) {
     if (view.input.lastClick.type == "singleClick") type = "doubleClick"
     else if (view.input.lastClick.type == "doubleClick") type = "tripleClick"
   }
-  view.input.lastClick = {time: now, x: event.clientX, y: event.clientY, type}
+  view.input.lastClick = {time: now, x: event.clientX, y: event.clientY, type, button: event.button}
 
   let pos = view.posAtCoords(eventCoords(event))
   if (!pos) return
@@ -544,9 +546,9 @@ export function endComposition(view: EditorView, restarting = false) {
   view.domObserver.forceFlush()
   clearComposition(view)
   if (restarting || view.docView && view.docView.dirty) {
-    let sel = selectionFromDOM(view)
-    if (sel && !sel.eq(view.state.selection)) view.dispatch(view.state.tr.setSelection(sel))
-    else if ((view.markCursor || restarting) && !view.state.selection.empty) view.dispatch(view.state.tr.deleteSelection())
+    let sel = selectionFromDOM(view), cur = view.state.selection
+    if (sel && !sel.eq(cur)) view.dispatch(view.state.tr.setSelection(sel))
+    else if ((view.markCursor || restarting) && !cur.$from.node(cur.$from.sharedDepth(cur.to)).inlineContent) view.dispatch(view.state.tr.deleteSelection())
     else view.updateState(view.state)
     return true
   }

package/src/viewdesc.ts

@@ -528,6 +528,8 @@ export class ViewDesc {
 
   get ignoreForCoords() { return false }
 
+  get ignoreForSelection() { return false }
+
   isText(text: string) { return false }
 }
 
@@ -576,6 +578,8 @@ class WidgetViewDesc extends ViewDesc {
 
   get domAtom() { return true }
 
+  get ignoreForSelection() { return !!this.widget.type.spec.relaxedSide }
+
   get side() { return (this.widget.type as any).side as number }
 }