prosemirror-view 1.26.4 → 1.27.1

package/src/index.ts

@@ -53,6 +53,10 @@ export class EditorView {
   private pluginViews: PluginView[] = []
   /// @internal
   domObserver!: DOMObserver
+  /// Holds `true` when a hack node is needed in Firefox to prevent the
+  /// [space is eaten issue](https://github.com/ProseMirror/prosemirror/issues/651)
+  /// @internal
+  requiresGeckoHackNode: boolean = false
 
   /// The view's current [state](#state.EditorState).
   public state: EditorState
@@ -214,20 +218,25 @@ export class EditorView {
     if (scroll == "reset") {
       this.dom.scrollTop = 0
     } else if (scroll == "to selection") {
-      let startDOM = this.domSelection().focusNode!
-      if (this.someProp("handleScrollToSelection", f => f(this))) {
-        // Handled
-      } else if (state.selection instanceof NodeSelection) {
-        let target = this.docView.domAfterPos(state.selection.from)
-        if (target.nodeType == 1) scrollRectIntoView(this, (target as HTMLElement).getBoundingClientRect(), startDOM)
-      } else {
-        scrollRectIntoView(this, this.coordsAtPos(state.selection.head, 1), startDOM)
-      }
+      this.scrollToSelection()
     } else if (oldScrollPos) {
       resetScrollPos(oldScrollPos)
     }
   }
 
+  /// @internal
+  scrollToSelection() {
+    let startDOM = this.domSelection().focusNode!
+    if (this.someProp("handleScrollToSelection", f => f(this))) {
+      // Handled
+    } else if (this.state.selection instanceof NodeSelection) {
+      let target = this.docView.domAfterPos(this.state.selection.from)
+      if (target.nodeType == 1) scrollRectIntoView(this, (target as HTMLElement).getBoundingClientRect(), startDOM)
+    } else {
+      scrollRectIntoView(this, this.coordsAtPos(this.state.selection.head, 1), startDOM)
+    }
+  }
+
   private destroyPluginViews() {
     let view
     while (view = this.pluginViews.pop()) if (view.destroy) view.destroy()
@@ -528,7 +537,11 @@ export interface DOMEventMap extends HTMLElementEventMap {
 /// searching through the plugins (in order of appearance) until one of
 /// them returns true. For some props, the first plugin that yields a
 /// value gets precedence.
-export interface EditorProps {
+///
+/// The optional type parameter refers to the type of `this` in prop
+/// functions, and is used to pass in the plugin type when defining a
+/// [plugin](#state.Plugin).
+export interface EditorProps<P = any> {
   /// Can be an object mapping DOM event type names to functions that
   /// handle them. Such functions will be called before any handling
   /// ProseMirror does of events fired on the editable DOM element.
@@ -537,59 +550,59 @@ export interface EditorProps {
   /// `preventDefault` yourself (or not, if you want to allow the
   /// default behavior).
   handleDOMEvents?: {
-    [event in keyof DOMEventMap]?: (view: EditorView, event: DOMEventMap[event]) => boolean | void
+    [event in keyof DOMEventMap]?: (this: P, view: EditorView, event: DOMEventMap[event]) => boolean | void
   }
 
   /// Called when the editor receives a `keydown` event.
-  handleKeyDown?: (view: EditorView, event: KeyboardEvent) => boolean | void
+  handleKeyDown?: (this: P, view: EditorView, event: KeyboardEvent) => boolean | void
 
   /// Handler for `keypress` events.
-  handleKeyPress?: (view: EditorView, event: KeyboardEvent) => boolean | void
+  handleKeyPress?: (this: P, view: EditorView, event: KeyboardEvent) => boolean | void
 
   /// 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?: (view: EditorView, from: number, to: number, text: string) => boolean | void
+  handleTextInput?: (this: P, view: EditorView, from: number, to: number, text: string) => boolean | void
 
   /// 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, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
+  handleClickOn?: (this: P, 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.
-  handleClick?: (view: EditorView, pos: number, event: MouseEvent) => boolean | void
+  handleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
 
   /// Called for each node around a double click.
-  handleDoubleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
+  handleDoubleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
 
   /// Called when the editor is double-clicked, after `handleDoubleClickOn`.
-  handleDoubleClick?: (view: EditorView, pos: number, event: MouseEvent) => boolean | void
+  handleDoubleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
 
   /// Called for each node around a triple click.
-  handleTripleClickOn?: (view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
+  handleTripleClickOn?: (this: P, view: EditorView, pos: number, node: Node, nodePos: number, event: MouseEvent, direct: boolean) => boolean | void
 
   /// Called when the editor is triple-clicked, after `handleTripleClickOn`.
-  handleTripleClick?: (view: EditorView, pos: number, event: MouseEvent) => boolean | void
+  handleTripleClick?: (this: P, view: EditorView, pos: number, event: MouseEvent) => boolean | void
 
   /// Can be used to override the behavior of pasting. `slice` is the
   /// pasted content parsed by the editor, but you can directly access
   /// the event to get at the raw content.
-  handlePaste?: (view: EditorView, event: ClipboardEvent, slice: Slice) => boolean | void
+  handlePaste?: (this: P, view: EditorView, event: ClipboardEvent, slice: Slice) => boolean | void
 
   /// Called when something is dropped on the editor. `moved` will be
   /// true if this drop moves from the current selection (which should
   /// thus be deleted).
-  handleDrop?: (view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void
+  handleDrop?: (this: P, view: EditorView, event: DragEvent, slice: Slice, moved: boolean) => boolean | void
 
   /// Called when the view, after updating its state, tries to scroll
   /// the selection into view. A handler function may return false to
   /// indicate that it did not handle the scrolling and further
   /// handlers or the default behavior should be tried.
-  handleScrollToSelection?: (view: EditorView) => boolean
+  handleScrollToSelection?: (this: P, view: EditorView) => boolean
 
   /// Can be used to override the way a selection is created when
   /// reading a DOM selection between the given anchor and head.
-  createSelectionBetween?: (view: EditorView, anchor: ResolvedPos, head: ResolvedPos) => Selection | null
+  createSelectionBetween?: (this: P, view: EditorView, anchor: ResolvedPos, head: ResolvedPos) => Selection | null
 
   /// The [parser](#model.DOMParser) to use when reading editor changes
   /// from the DOM. Defaults to calling
@@ -599,7 +612,7 @@ export interface EditorProps {
 
   /// Can be used to transform pasted HTML text, _before_ it is parsed,
   /// for example to clean it up.
-  transformPastedHTML?: (html: string) => string
+  transformPastedHTML?: (this: P, html: string) => string
 
   /// The [parser](#model.DOMParser) to use when reading content from
   /// the clipboard. When not given, the value of the
@@ -608,7 +621,7 @@ export interface EditorProps {
 
   /// Transform pasted plain text. The `plain` flag will be true when
   /// the text is pasted as plain text.
-  transformPastedText?: (text: string, plain: boolean) => string
+  transformPastedText?: (this: P, text: string, plain: boolean) => string
 
   /// A function to parse text from the clipboard into a document
   /// slice. Called after
@@ -617,11 +630,11 @@ export interface EditorProps {
   /// 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?: (text: string, $context: ResolvedPos, plain: boolean) => Slice
+  clipboardTextParser?: (this: P, text: string, $context: ResolvedPos, plain: boolean) => Slice
 
-  /// Can be used to transform pasted content before it is applied to
-  /// the document.
-  transformPasted?: (slice: Slice) => 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
 
   /// Allows you to pass custom rendering and behavior logic for
   /// nodes. Should map node names to constructor functions that
@@ -668,15 +681,15 @@ export interface EditorProps {
   /// selection when copying text to the clipboard. By default, the
   /// editor will use [`textBetween`](#model.Node.textBetween) on the
   /// selected range.
-  clipboardTextSerializer?: (content: Slice) => string
+  clipboardTextSerializer?: (this: P, content: Slice) => string
 
   /// A set of [document decorations](#view.Decoration) to show in the
   /// view.
-  decorations?: (state: EditorState) => DecorationSource | null | undefined
+  decorations?: (this: P, state: EditorState) => DecorationSource | null | undefined
 
   /// When this returns false, the content of the view is not directly
   /// editable.
-  editable?: (state: EditorState) => boolean
+  editable?: (this: P, state: EditorState) => boolean
 
   /// Control the DOM attributes of the editable element. May be either
   /// an object or a function going from an editor state to an object.

package/src/input.ts

@@ -13,7 +13,8 @@ import {ViewDesc} from "./viewdesc"
 // A collection of DOM events that occur within the editor, and callback functions
 // to invoke when the event fires.
 const handlers: {[event: string]: (view: EditorView, event: Event) => void} = {}
-let editHandlers: {[event: string]: (view: EditorView, event: Event) => void} = {}
+const editHandlers: {[event: string]: (view: EditorView, event: Event) => void} = {}
+const passiveHandlers: Record<string, boolean> = {touchstart: true, touchmove: true}
 
 export class InputState {
   shiftKey = false
@@ -25,6 +26,8 @@ export class InputState {
   lastSelectionTime = 0
   lastIOSEnter = 0
   lastIOSEnterFallbackTimeout = -1
+  lastFocus = 0
+  lastTouch = 0
   lastAndroidDelete = 0
   composing = false
   composingTimeout = -1
@@ -42,7 +45,7 @@ export function initInput(view: EditorView) {
       if (eventBelongsToView(view, event) && !runCustomHandler(view, event) &&
           (view.editable || !(event.type in editHandlers)))
         handler(view, event)
-    })
+    }, passiveHandlers[event] ? {passive: true} : undefined)
   }
   // On Safari, for reasons beyond my understanding, adding an input
   // event handler makes an issue where the composition vanishes when
@@ -403,11 +406,17 @@ class MouseDown {
   }
 }
 
-handlers.touchdown = view => {
+handlers.touchstart = view => {
+  view.input.lastTouch = Date.now()
   forceDOMFlush(view)
   setSelectionOrigin(view, "pointer")
 }
 
+handlers.touchmove = view => {
+  view.input.lastTouch = Date.now()
+  setSelectionOrigin(view, "pointer")
+}
+
 handlers.contextmenu = view => forceDOMFlush(view)
 
 function inOrNearComposition(view: EditorView, event: Event) {
@@ -650,7 +659,6 @@ editHandlers.drop = (view, _event) => {
   let eventPos = view.posAtCoords(eventCoords(event))
   if (!eventPos) return
   let $mouse = view.state.doc.resolve(eventPos.pos)
-  if (!$mouse) return
   let slice = dragging && dragging.slice
   if (slice) {
     view.someProp("transformPasted", f => { slice = f(slice!) })
@@ -695,6 +703,7 @@ editHandlers.drop = (view, _event) => {
 }
 
 handlers.focus = view => {
+  view.input.lastFocus = Date.now()
   if (!view.focused) {
     view.domObserver.stop()
     view.dom.classList.add("ProseMirror-focused")

package/src/viewdesc.ts

@@ -262,8 +262,8 @@ export class ViewDesc {
     }
   }
 
-  domFromPos(pos: number, side: number): {node: DOMNode, offset: number} {
-    if (!this.contentDOM) return {node: this.dom, offset: 0}
+  domFromPos(pos: number, side: number): {node: DOMNode, offset: number, atom?: number} {
+    if (!this.contentDOM) return {node: this.dom, offset: 0, atom: pos + 1}
     // First find the position in the child array
     let i = 0, offset = 0
     for (let curPos = 0; i < this.children.length; i++) {
@@ -709,7 +709,7 @@ export class NodeViewDesc extends ViewDesc {
     let composition = view.composing ? this.localCompositionInfo(view, pos) : null
     let localComposition = composition && composition.pos > -1 ? composition : null
     let compositionInChild = composition && composition.pos < 0
-    let updater = new ViewTreeUpdater(this, localComposition && localComposition.node)
+    let updater = new ViewTreeUpdater(this, localComposition && localComposition.node, view)
     iterDeco(this.node, this.innerDeco, (widget, i, insideNode) => {
       if (widget.spec.marks)
         updater.syncToMarks(widget.spec.marks, inline, view)
@@ -1109,7 +1109,7 @@ class ViewTreeUpdater {
   preMatch: {index: number, matched: Map<ViewDesc, number>, matches: readonly ViewDesc[]}
   top: ViewDesc
 
-  constructor(top: NodeViewDesc, readonly lock: DOMNode | null) {
+  constructor(top: NodeViewDesc, readonly lock: DOMNode | null, private readonly view: EditorView) {
     this.top = top
     this.preMatch = preMatch(top.node.content, top)
   }
@@ -1196,7 +1196,7 @@ class ViewTreeUpdater {
     if (child.dirty == NODE_DIRTY && child.dom == child.contentDOM) child.dirty = CONTENT_DIRTY
     if (!child.update(node, outerDeco, innerDeco, view)) return false
     this.destroyBetween(this.index, index)
-    this.index = index + 1
+    this.index++
     return true
   }
 
@@ -1273,7 +1273,8 @@ class ViewTreeUpdater {
 
     if (!lastChild || // Empty textblock
         !(lastChild instanceof TextViewDesc) ||
-        /\n$/.test(lastChild.node.text!)) {
+        /\n$/.test(lastChild.node.text!) ||
+        (this.view.requiresGeckoHackNode && /\s$/.test(lastChild.node.text!))) {
       // Avoid bugs in Safari's cursor drawing (#1165) and Chrome's mouse selection (#1152)
       if ((browser.safari || browser.chrome) && lastChild && (lastChild.dom as HTMLElement).contentEditable == "false")
         this.addHackNode("IMG", parent)