prosemirror-view 1.23.13 → 1.24.0-beta.3

package/package.json

@@ -1,9 +1,16 @@
 {
   "name": "prosemirror-view",
-  "version": "1.23.13",
+  "version": "1.24.0-beta.3",
   "description": "ProseMirror's view component",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "sideEffects": false,
   "style": "style/prosemirror.css",
   "license": "MIT",
   "maintainers": [
@@ -23,18 +30,11 @@
     "prosemirror-transform": "^1.1.0"
   },
   "devDependencies": {
-    "ist": "^1.0.0",
-    "mocha": "^9.1.2",
-    "moduleserve": "^0.7.0",
-    "prosemirror-test-builder": "^1.0.0",
-    "rollup": "^2.26.3",
-    "@rollup/plugin-buble": "^0.21.3"
+    "@prosemirror/buildhelper": "^0.1.5",
+    "prosemirror-test-builder": "^1.0.0"
   },
   "scripts": {
-    "test": "FIXME autorun browser tests",
-    "test-server": "node test/link-mocha-css.js && moduleserve test --port 8090",
-    "build": "rollup -c",
-    "watch": "rollup -c -w",
-    "prepare": "npm run build"
+    "test": "pm-runtests",
+    "prepare": "pm-buildhelper src/index.ts"
   }
 }

package/src/README.md

@@ -14,6 +14,8 @@ this module.
 
 @NodeView
 
+@DOMEventMap
+
 ### Decorations
 
 Decorations make it possible to influence the way the document is

package/src/browser.ts

@@ -0,0 +1,23 @@
+const nav = typeof navigator != "undefined" ? navigator : null
+const doc = typeof document != "undefined" ? document : null
+const agent = (nav && nav.userAgent) || ""
+
+const ie_edge = /Edge\/(\d+)/.exec(agent)
+const ie_upto10 = /MSIE \d/.exec(agent)
+const ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(agent)
+
+export const ie = !!(ie_upto10 || ie_11up || ie_edge)
+export const ie_version = ie_upto10 ? (document as any).documentMode : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0
+export const gecko = !ie && /gecko\/(\d+)/i.test(agent)
+export const gecko_version = gecko && +(/Firefox\/(\d+)/.exec(agent) || [0, 0])[1]
+
+const _chrome = !ie && /Chrome\/(\d+)/.exec(agent)
+export const chrome = !!_chrome
+export const chrome_version = _chrome ? +_chrome[1] : 0
+export const safari = !ie && !!nav && /Apple Computer/.test(nav.vendor)
+// Is true for both iOS and iPadOS for convenience
+export const ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2)
+export const mac = ios || (nav ? /Mac/.test(nav.platform) : false)
+export const android = /Android \d/.test(agent)
+export const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style
+export const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0

package/src/{capturekeys.js → capturekeys.ts}

@@ -1,21 +1,22 @@
-import {Selection, NodeSelection, TextSelection, AllSelection} from "prosemirror-state"
-import browser from "./browser"
-import {domIndex, selectionCollapsed} from "./dom"
+import {Selection, NodeSelection, TextSelection, AllSelection, EditorState} from "prosemirror-state"
+import {EditorView} from "./index"
+import * as browser from "./browser"
+import {domIndex, selectionCollapsed, DOMSelection} from "./dom"
 import {selectionToDOM} from "./selection"
 
-function moveSelectionBlock(state, dir) {
+function moveSelectionBlock(state: EditorState, dir: number) {
   let {$anchor, $head} = state.selection
   let $side = dir > 0 ? $anchor.max($head) : $anchor.min($head)
   let $start = !$side.parent.inlineContent ? $side : $side.depth ? state.doc.resolve(dir > 0 ? $side.after() : $side.before()) : null
   return $start && Selection.findFrom($start, dir)
 }
 
-function apply(view, sel) {
+function apply(view: EditorView, sel: Selection) {
   view.dispatch(view.state.tr.setSelection(sel).scrollIntoView())
   return true
 }
 
-function selectHorizontally(view, dir, mods) {
+function selectHorizontally(view: EditorView, dir: number, mods: string) {
   let sel = view.state.selection
   if (sel instanceof TextSelection) {
     if (!sel.empty || mods.indexOf("s") > -1) {
@@ -49,22 +50,22 @@ function selectHorizontally(view, dir, mods) {
   }
 }
 
-function nodeLen(node) {
-  return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length
+function nodeLen(node: Node) {
+  return node.nodeType == 3 ? node.nodeValue!.length : node.childNodes.length
 }
 
-function isIgnorable(dom) {
+function isIgnorable(dom: Node) {
   let desc = dom.pmViewDesc
   return desc && desc.size == 0 && (dom.nextSibling || dom.nodeName != "BR")
 }
 
 // Make sure the cursor isn't directly after one or more ignored
 // nodes, which will confuse the browser's cursor motion logic.
-function skipIgnoredNodesLeft(view) {
-  let sel = view.root.getSelection()
-  let node = sel.focusNode, offset = sel.focusOffset
+function skipIgnoredNodesLeft(view: EditorView) {
+  let sel = view.domSelection()
+  let node = sel.focusNode!, offset = sel.focusOffset
   if (!node) return
-  let moveNode, moveOffset, force = false
+  let moveNode, moveOffset: number | undefined, force = false
   // Gecko will do odd things when the selection is directly in front
   // of a non-editable node, so in that case, move it into the next
   // node if possible. Issue prosemirror/prosemirror#832.
@@ -80,7 +81,7 @@ function skipIgnoredNodesLeft(view) {
           moveOffset = --offset
         } else if (before.nodeType == 3) {
           node = before
-          offset = node.nodeValue.length
+          offset = node.nodeValue!.length
         } else break
       }
     } else if (isBlockNode(node)) {
@@ -93,7 +94,7 @@ function skipIgnoredNodesLeft(view) {
         prev = prev.previousSibling
       }
       if (!prev) {
-        node = node.parentNode
+        node = node.parentNode!
         if (node == view.dom) break
         offset = 0
       } else {
@@ -103,17 +104,17 @@ function skipIgnoredNodesLeft(view) {
     }
   }
   if (force) setSelFocus(view, sel, node, offset)
-  else if (moveNode) setSelFocus(view, sel, moveNode, moveOffset)
+  else if (moveNode) setSelFocus(view, sel, moveNode, moveOffset!)
 }
 
 // Make sure the cursor isn't directly before one or more ignored
 // nodes.
-function skipIgnoredNodesRight(view) {
-  let sel = view.root.getSelection()
-  let node = sel.focusNode, offset = sel.focusOffset
+function skipIgnoredNodesRight(view: EditorView) {
+  let sel = view.domSelection()
+  let node = sel.focusNode!, offset = sel.focusOffset
   if (!node) return
   let len = nodeLen(node)
-  let moveNode, moveOffset
+  let moveNode, moveOffset: number | undefined
   for (;;) {
     if (offset < len) {
       if (node.nodeType != 1) break
@@ -133,7 +134,7 @@ function skipIgnoredNodesRight(view) {
         next = next.nextSibling
       }
       if (!next) {
-        node = node.parentNode
+        node = node.parentNode!
         if (node == view.dom) break
         offset = len = 0
       } else {
@@ -143,15 +144,15 @@ function skipIgnoredNodesRight(view) {
       }
     }
   }
-  if (moveNode) setSelFocus(view, sel, moveNode, moveOffset)
+  if (moveNode) setSelFocus(view, sel, moveNode, moveOffset!)
 }
 
-function isBlockNode(dom) {
+function isBlockNode(dom: Node) {
   let desc = dom.pmViewDesc
   return desc && desc.node && desc.node.isBlock
 }
 
-function setSelFocus(view, sel, node, offset) {
+function setSelFocus(view: EditorView, sel: DOMSelection, node: Node, offset: number) {
   if (selectionCollapsed(sel)) {
     let range = document.createRange()
     range.setEnd(node, offset)
@@ -169,11 +170,10 @@ function setSelFocus(view, sel, node, offset) {
   }, 50)
 }
 
-// : (EditorState, number)
 // Check whether vertical selection motion would involve node
 // selections. If so, apply it (if not, the result is left to the
 // browser)
-function selectVertically(view, dir, mods) {
+function selectVertically(view: EditorView, dir: number, mods: string) {
   let sel = view.state.selection
   if (sel instanceof TextSelection && !sel.empty || mods.indexOf("s") > -1) return false
   if (browser.mac && mods.indexOf("m") > -1) return false
@@ -192,7 +192,7 @@ function selectVertically(view, dir, mods) {
   return false
 }
 
-function stopNativeHorizontalDelete(view, dir) {
+function stopNativeHorizontalDelete(view: EditorView, dir: number) {
   if (!(view.state.selection instanceof TextSelection)) return true
   let {$head, $anchor, empty} = view.state.selection
   if (!$head.sameParent($anchor)) return true
@@ -209,7 +209,7 @@ function stopNativeHorizontalDelete(view, dir) {
   return false
 }
 
-function switchEditable(view, node, state) {
+function switchEditable(view: EditorView, node: HTMLElement, state: string) {
   view.domObserver.stop()
   node.contentEditable = state
   view.domObserver.start()
@@ -220,15 +220,16 @@ function switchEditable(view, node, state) {
 // wrong things when the down arrow is pressed when the cursor is
 // directly at the start of a textblock and has an uneditable node
 // after it
-function safariDownArrowBug(view) {
-  if (!browser.safari || view.state.selection.$head.parentOffset > 0) return
-  let {focusNode, focusOffset} = view.root.getSelection()
+function safariDownArrowBug(view: EditorView) {
+  if (!browser.safari || view.state.selection.$head.parentOffset > 0) return false
+  let {focusNode, focusOffset} = view.domSelection()
   if (focusNode && focusNode.nodeType == 1 && focusOffset == 0 &&
-      focusNode.firstChild && focusNode.firstChild.contentEditable == "false") {
-    let child = focusNode.firstChild
-    switchEditable(view, child, true)
-    setTimeout(() => switchEditable(view, child, false), 20)
+      focusNode.firstChild && (focusNode.firstChild as HTMLElement).contentEditable == "false") {
+    let child = focusNode.firstChild as HTMLElement
+    switchEditable(view, child, "true")
+    setTimeout(() => switchEditable(view, child, "false"), 20)
   }
+  return false
 }
 
 // A backdrop key mapping used to make sure we always suppress keys
@@ -238,7 +239,7 @@ function safariDownArrowBug(view) {
 // cursor-motion keys, the code in the handlers also takes care of
 // block selections.
 
-function getMods(event) {
+function getMods(event: KeyboardEvent) {
   let result = ""
   if (event.ctrlKey) result += "c"
   if (event.metaKey) result += "m"
@@ -247,7 +248,7 @@ function getMods(event) {
   return result
 }
 
-export function captureKeyDown(view, event) {
+export function captureKeyDown(view: EditorView, event: KeyboardEvent) {
   let code = event.keyCode, mods = getMods(event)
   if (code == 8 || (browser.mac && code == 72 && mods == "c")) { // Backspace, Ctrl-h on Mac
     return stopNativeHorizontalDelete(view, -1) || skipIgnoredNodesLeft(view)

package/src/{clipboard.js → clipboard.ts}

@@ -1,12 +1,13 @@
-import {Slice, Fragment, DOMParser, DOMSerializer} from "prosemirror-model"
-import browser from "./browser"
+import {Slice, Fragment, DOMParser, DOMSerializer, ResolvedPos, NodeType, Node} from "prosemirror-model"
+import * as browser from "./browser"
+import {EditorView} from "./index"
 
-export function serializeForClipboard(view, slice) {
+export function serializeForClipboard(view: EditorView, slice: Slice) {
   let context = [], {content, openStart, openEnd} = slice
-  while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild.childCount == 1) {
+  while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild!.childCount == 1) {
     openStart--
     openEnd--
-    let node = content.firstChild
+    let node = content.firstChild!
     context.push(node.type.name, node.attrs != node.type.defaultAttrs ? node.attrs : null)
     content = node.content
   }
@@ -30,7 +31,7 @@ export function serializeForClipboard(view, slice) {
   }
 
   if (firstChild && firstChild.nodeType == 1)
-    firstChild.setAttribute("data-pm-slice", `${openStart} ${openEnd} ${JSON.stringify(context)}`)
+    (firstChild as HTMLElement).setAttribute("data-pm-slice", `${openStart} ${openEnd} ${JSON.stringify(context)}`)
 
   let text = view.someProp("clipboardTextSerializer", f => f(slice)) ||
       slice.content.textBetween(0, slice.content.size, "\n\n")
@@ -38,10 +39,10 @@ export function serializeForClipboard(view, slice) {
   return {dom: wrap, text}
 }
 
-// : (EditorView, string, string, ?bool, ResolvedPos) → ?Slice
 // Read a slice of content from the clipboard (or drop data).
-export function parseFromClipboard(view, text, html, plainText, $context) {
-  let dom, inCode = $context.parent.type.spec.code, slice
+export function parseFromClipboard(view: EditorView, text: string, html: string | null, plainText: boolean, $context: ResolvedPos) {
+  let inCode = $context.parent.type.spec.code
+  let dom: HTMLElement | undefined, slice: Slice | undefined
   if (!html && !text) return null
   let asText = text && (plainText || inCode || !html)
   if (asText) {
@@ -55,26 +56,27 @@ export function parseFromClipboard(view, text, html, plainText, $context) {
       let {schema} = view.state, serializer = DOMSerializer.fromSchema(schema)
       dom = document.createElement("div")
       text.split(/(?:\r\n?|\n)+/).forEach(block => {
-        let p = dom.appendChild(document.createElement("p"))
+        let p = dom!.appendChild(document.createElement("p"))
         if (block) p.appendChild(serializer.serializeNode(schema.text(block, marks)))
       })
     }
   } else {
-    view.someProp("transformPastedHTML", f => { html = f(html) })
-    dom = readHTML(html)
+    view.someProp("transformPastedHTML", f => { html = f(html!) })
+    dom = readHTML(html!)
     if (browser.webkit) restoreReplacedSpaces(dom)
   }
 
   let contextNode = dom && dom.querySelector("[data-pm-slice]")
-  let sliceData = contextNode && /^(\d+) (\d+) (.*)/.exec(contextNode.getAttribute("data-pm-slice"))
+  let sliceData = contextNode && /^(\d+) (\d+) (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "")
   if (!slice) {
     let parser = view.someProp("clipboardParser") || view.someProp("domParser") || DOMParser.fromSchema(view.state.schema)
-    slice = parser.parseSlice(dom, {
+    slice = parser.parseSlice(dom!, {
       preserveWhitespace: !!(asText || sliceData),
       context: $context,
       ruleFromNode(dom) {
         if (dom.nodeName == "BR" && !dom.nextSibling &&
             dom.parentNode && !inlineParents.test(dom.parentNode.nodeName)) return {ignore: true}
+        return null
       }
     })
   }
@@ -84,15 +86,15 @@ export function parseFromClipboard(view, text, html, plainText, $context) {
     slice = Slice.maxOpen(normalizeSiblings(slice.content, $context), true)
     if (slice.openStart || slice.openEnd) {
       let openStart = 0, openEnd = 0
-      for (let node = slice.content.firstChild; openStart < slice.openStart && !node.type.spec.isolating;
-           openStart++, node = node.firstChild) {}
-      for (let node = slice.content.lastChild; openEnd < slice.openEnd && !node.type.spec.isolating;
-           openEnd++, node = node.lastChild) {}
+      for (let node = slice.content.firstChild; openStart < slice.openStart && !node!.type.spec.isolating;
+           openStart++, node = node!.firstChild) {}
+      for (let node = slice.content.lastChild; openEnd < slice.openEnd && !node!.type.spec.isolating;
+           openEnd++, node = node!.lastChild) {}
       slice = closeSlice(slice, openStart, openEnd)
     }
   }
 
-  view.someProp("transformPasted", f => { slice = f(slice) })
+  view.someProp("transformPasted", f => { slice = f(slice!) })
   return slice
 }
 
@@ -106,23 +108,23 @@ const inlineParents = /^(a|abbr|acronym|b|cite|code|del|em|i|ins|kbd|label|outpu
 // This addresses the problem that Transform.replace expects a
 // coherent slice, and will fail to place a set of siblings that don't
 // fit anywhere in the schema.
-function normalizeSiblings(fragment, $context) {
+function normalizeSiblings(fragment: Fragment, $context: ResolvedPos) {
   if (fragment.childCount < 2) return fragment
   for (let d = $context.depth; d >= 0; d--) {
     let parent = $context.node(d)
     let match = parent.contentMatchAt($context.index(d))
-    let lastWrap, result = []
+    let lastWrap: readonly NodeType[] | undefined, result: Node[] | null = []
     fragment.forEach(node => {
       if (!result) return
       let wrap = match.findWrapping(node.type), inLast
       if (!wrap) return result = null
-      if (inLast = result.length && lastWrap.length && addToSibling(wrap, lastWrap, node, result[result.length - 1], 0)) {
+      if (inLast = result.length && lastWrap!.length && addToSibling(wrap, lastWrap!, node, result[result.length - 1], 0)) {
         result[result.length - 1] = inLast
       } else {
-        if (result.length) result[result.length - 1] = closeRight(result[result.length - 1], lastWrap.length)
+        if (result.length) result[result.length - 1] = closeRight(result[result.length - 1], lastWrap!.length)
         let wrapped = withWrappers(node, wrap)
         result.push(wrapped)
-        match = match.matchType(wrapped.type, wrapped.attrs)
+        match = match.matchType(wrapped.type)!
         lastWrap = wrap
       }
     })
@@ -131,7 +133,7 @@ function normalizeSiblings(fragment, $context) {
   return fragment
 }
 
-function withWrappers(node, wrap, from = 0) {
+function withWrappers(node: Node, wrap: readonly NodeType[], from = 0) {
   for (let i = wrap.length - 1; i >= from; i--)
     node = wrap[i].create(null, Fragment.from(node))
   return node
@@ -139,9 +141,10 @@ function withWrappers(node, wrap, from = 0) {
 
 // Used to group adjacent nodes wrapped in similar parents by
 // normalizeSiblings into the same parent node
-function addToSibling(wrap, lastWrap, node, sibling, depth) {
+function addToSibling(wrap: readonly NodeType[], lastWrap: readonly NodeType[],
+                      node: Node, sibling: Node, depth: number): Node | undefined {
   if (depth < wrap.length && depth < lastWrap.length && wrap[depth] == lastWrap[depth]) {
-    let inner = addToSibling(wrap, lastWrap, node, sibling.lastChild, depth + 1)
+    let inner = addToSibling(wrap, lastWrap, node, sibling.lastChild!, depth + 1)
     if (inner) return sibling.copy(sibling.content.replaceChild(sibling.childCount - 1, inner))
     let match = sibling.contentMatchAt(sibling.childCount)
     if (match.matchType(depth == wrap.length - 1 ? node.type : wrap[depth + 1]))
@@ -149,23 +152,23 @@ function addToSibling(wrap, lastWrap, node, sibling, depth) {
   }
 }
 
-function closeRight(node, depth) {
+function closeRight(node: Node, depth: number) {
   if (depth == 0) return node
-  let fragment = node.content.replaceChild(node.childCount - 1, closeRight(node.lastChild, depth - 1))
-  let fill = node.contentMatchAt(node.childCount).fillBefore(Fragment.empty, true)
+  let fragment = node.content.replaceChild(node.childCount - 1, closeRight(node.lastChild!, depth - 1))
+  let fill = node.contentMatchAt(node.childCount).fillBefore(Fragment.empty, true)!
   return node.copy(fragment.append(fill))
 }
 
-function closeRange(fragment, side, from, to, depth, openEnd) {
-  let node = side < 0 ? fragment.firstChild : fragment.lastChild, inner = node.content
+function closeRange(fragment: Fragment, side: number, from: number, to: number, depth: number, openEnd: number) {
+  let node = side < 0 ? fragment.firstChild! : fragment.lastChild!, inner = node.content
   if (depth < to - 1) inner = closeRange(inner, side, from, to, depth + 1, openEnd)
   if (depth >= from)
-    inner = side < 0 ? node.contentMatchAt(0).fillBefore(inner, fragment.childCount > 1 || openEnd <= depth).append(inner)
-      : inner.append(node.contentMatchAt(node.childCount).fillBefore(Fragment.empty, true))
+    inner = side < 0 ? node.contentMatchAt(0)!.fillBefore(inner, fragment.childCount > 1 || openEnd <= depth)!.append(inner)
+      : inner.append(node.contentMatchAt(node.childCount)!.fillBefore(Fragment.empty, true)!)
   return fragment.replaceChild(side < 0 ? 0 : fragment.childCount - 1, node.copy(inner))
 }
 
-function closeSlice(slice, openStart, openEnd) {
+function closeSlice(slice: Slice, openStart: number, openEnd: number) {
   if (openStart < slice.openStart)
     slice = new Slice(closeRange(slice.content, -1, openStart, slice.openStart, 0, slice.openEnd), openStart, slice.openEnd)
   if (openEnd < slice.openEnd)
@@ -176,7 +179,7 @@ function closeSlice(slice, openStart, openEnd) {
 // Trick from jQuery -- some elements must be wrapped in other
 // elements for innerHTML to work. I.e. if you do `div.innerHTML =
 // "<td>..</td>"` the table cells are ignored.
-const wrapMap = {
+const wrapMap: {[node: string]: string[]} = {
   thead: ["table"],
   tbody: ["table"],
   tfoot: ["table"],
@@ -188,12 +191,12 @@ const wrapMap = {
   th: ["table", "tbody", "tr"]
 }
 
-let _detachedDoc = null
+let _detachedDoc: Document | null = null
 function detachedDoc() {
   return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title"))
 }
 
-function readHTML(html) {
+function readHTML(html: string) {
   let metas = /^(\s*<meta [^>]*>)*/.exec(html)
   if (metas) html = html.slice(metas[0].length)
   let elt = detachedDoc().createElement("div")
@@ -210,7 +213,7 @@ function readHTML(html) {
 // clipboard. This tries to convert such non-breaking spaces (which
 // will be wrapped in a plain span on Chrome, a span with class
 // Apple-converted-space on Safari) back to regular spaces.
-function restoreReplacedSpaces(dom) {
+function restoreReplacedSpaces(dom: HTMLElement) {
   let nodes = dom.querySelectorAll(browser.chrome ? "span:not([class]):not([style])" : "span.Apple-converted-space")
   for (let i = 0; i < nodes.length; i++) {
     let node = nodes[i]
@@ -219,9 +222,9 @@ function restoreReplacedSpaces(dom) {
   }
 }
 
-function addContext(slice, context) {
+function addContext(slice: Slice, context: string) {
   if (!slice.size) return slice
-  let schema = slice.content.firstChild.type.schema, array
+  let schema = slice.content.firstChild!.type.schema, array
   try { array = JSON.parse(context) }
   catch(e) { return slice }
   let {content, openStart, openEnd} = slice