From f9b75b2d1aa608fd8e93b5815c7eafa50594cb45 Mon Sep 17 00:00:00 2001 From: Shane Friedman Date: Fri, 4 Aug 2023 16:32:33 -0400 Subject: [PATCH] Hook up prosemirror-view's InputState --- src/components/EditorView.tsx | 32 +- src/hooks/useContentEditable.ts | 46 +- .../EditorViewInternal.ts | 8 +- src/prosemirror-internal/capturekeys.ts | 336 ++++++++ src/prosemirror-internal/clipboard.ts | 260 ++++++ src/prosemirror-internal/dom.ts | 31 + src/prosemirror-internal/input.ts | 785 ++++++++++++++++++ src/prosemirror-internal/selection.ts | 206 +++++ 8 files changed, 1654 insertions(+), 50 deletions(-) create mode 100644 src/prosemirror-internal/capturekeys.ts create mode 100644 src/prosemirror-internal/clipboard.ts create mode 100644 src/prosemirror-internal/input.ts create mode 100644 src/prosemirror-internal/selection.ts diff --git a/src/components/EditorView.tsx b/src/components/EditorView.tsx index 31fa3691..05f26137 100644 --- a/src/components/EditorView.tsx +++ b/src/components/EditorView.tsx @@ -4,6 +4,7 @@ import React, { DetailedHTMLProps, ForwardRefExoticComponent, HTMLAttributes, + MutableRefObject, RefAttributes, useMemo, useRef, @@ -18,12 +19,19 @@ import { useContentEditable } from "../hooks/useContentEditable.js"; import { useSyncSelection } from "../hooks/useSyncSelection.js"; import { DecorationSourceInternal } from "../prosemirror-internal/DecorationInternal.js"; import { EditorViewInternal } from "../prosemirror-internal/EditorViewInternal.js"; -import { DOMNode, DOMSelection } from "../prosemirror-internal/dom.js"; +import * as browser from "../prosemirror-internal/browser.js"; +import { + DOMNode, + DOMSelection, + deepActiveElement, + safariShadowSelectionRange, +} from "../prosemirror-internal/dom.js"; import { coordsAtPos, endOfTextblock, posAtCoords, } from "../prosemirror-internal/domcoords.js"; +import { InputState } from "../prosemirror-internal/input.js"; import { DocNodeView } from "./DocNodeView.js"; import { NodeViewComponentProps } from "./NodeViewComponentProps.js"; @@ -110,9 +118,11 @@ export function EditorView(props: Props) { const editable = editableProp ? editableProp(state) : true; + const editorViewRefInternal = useRef(null); + // This is only safe to use in effects/layout effects or // event handlers! - const editorViewAPI = useMemo( + const editorViewAPI: EditorViewInternal = useMemo( // @ts-expect-error - EditorView API not fully implemented yet () => ({ /* Start TODO */ @@ -137,6 +147,9 @@ export function EditorView(props: Props) { handleTripleClick, handleTripleClickOn, }, + focused: editorViewRefInternal.current?.focused ?? false, + markCursor: editorViewRefInternal.current?.markCursor ?? null, + input: editorViewRefInternal.current?.input ?? new InputState(), get dom() { if (!mountRef.current) { throw new Error( @@ -207,10 +220,17 @@ export function EditorView(props: Props) { } return cached || document; }, - domSelection(): DOMSelection { + domSelection() { // eslint-disable-next-line @typescript-eslint/no-non-null-assertion return (this.root as Document).getSelection()!; }, + domSelectionRange() { + return browser.safari && + this.root.nodeType === 11 && + deepActiveElement(this.dom.ownerDocument) == this.dom + ? safariShadowSelectionRange(this) + : this.domSelection(); + }, props: { editable: editableProp, state: stateProp ?? defaultState, @@ -266,8 +286,10 @@ export function EditorView(props: Props) { ] ); - const editorViewRef = useRef(editorViewAPI); - editorViewRef.current = editorViewAPI; + editorViewRefInternal.current = editorViewAPI; + + const editorViewRef = + editorViewRefInternal as MutableRefObject; useContentEditable(editorViewRef); diff --git a/src/hooks/useContentEditable.ts b/src/hooks/useContentEditable.ts index f72cfe65..ddc11d4f 100644 --- a/src/hooks/useContentEditable.ts +++ b/src/hooks/useContentEditable.ts @@ -1,46 +1,13 @@ import { MutableRefObject, useEffect } from "react"; import { EditorViewInternal } from "../prosemirror-internal/EditorViewInternal.js"; +import { initInput } from "../prosemirror-internal/input.js"; export function useContentEditable( viewRef: MutableRefObject ) { useEffect(() => { - const attachedHandlers: Record void> = {}; - for (const [type, handler] of Object.entries( - viewRef.current.someProp("handleDOMEvents") ?? {} - )) { - if (!handler) continue; - const eventHandler = (event: Event) => { - if (event.defaultPrevented) return; - handler(viewRef.current, event); - }; - - attachedHandlers[type] = eventHandler; - - viewRef.current.dom.addEventListener( - type as keyof HTMLElementEventMap, - eventHandler - ); - } - - function onKeyDown(event: KeyboardEvent) { - if (viewRef.current.someProp("handleKeyDown")?.(viewRef.current, event)) { - event.preventDefault(); - } - } - - viewRef.current.dom.addEventListener("keydown", onKeyDown); - - function onKeyPress(event: KeyboardEvent) { - if ( - viewRef.current.someProp("handleKeyPress")?.(viewRef.current, event) - ) { - event.preventDefault(); - } - } - - viewRef.current.dom.addEventListener("keypress", onKeyPress); + initInput(viewRef); function onBeforeInput(event: InputEvent) { switch (event.inputType) { @@ -81,14 +48,5 @@ export function useContentEditable( } viewRef.current.dom.addEventListener("beforeinput", onBeforeInput); - - return () => { - // eslint-disable-next-line react-hooks/exhaustive-deps - viewRef.current.dom.removeEventListener("beforeinput", onBeforeInput); - for (const [type, handler] of Object.entries(attachedHandlers)) { - // eslint-disable-next-line react-hooks/exhaustive-deps - viewRef.current.dom.removeEventListener(type, handler); - } - }; }, [viewRef]); } diff --git a/src/prosemirror-internal/EditorViewInternal.ts b/src/prosemirror-internal/EditorViewInternal.ts index 413ec7c8..a84e8247 100644 --- a/src/prosemirror-internal/EditorViewInternal.ts +++ b/src/prosemirror-internal/EditorViewInternal.ts @@ -1,9 +1,15 @@ +import { Mark } from "prosemirror-model"; import { EditorView as EditorViewT } from "prosemirror-view"; import { NodeViewDesc } from "../descriptors/ViewDesc.js"; -import { DOMSelection } from "./dom.js"; +import { DOMSelection, DOMSelectionRange } from "./dom.js"; +import { InputState } from "./input.js"; export interface EditorViewInternal extends EditorViewT { docView: NodeViewDesc; domSelection: () => DOMSelection; + focused: boolean; + input: InputState; + markCursor: readonly Mark[] | null; + domSelectionRange: () => DOMSelectionRange }; diff --git a/src/prosemirror-internal/capturekeys.ts b/src/prosemirror-internal/capturekeys.ts new file mode 100644 index 00000000..f9ffa520 --- /dev/null +++ b/src/prosemirror-internal/capturekeys.ts @@ -0,0 +1,336 @@ +import {Selection, NodeSelection, TextSelection, AllSelection, EditorState} from "prosemirror-state" +import { EditorViewInternal as EditorView } from "./EditorViewInternal.js" +import * as browser from "./browser" +import {domIndex, selectionCollapsed, hasBlockDesc} from "./dom" +import {selectionToDOM} from "./selection.js" + +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: EditorView, sel: Selection) { + view.dispatch(view.state.tr.setSelection(sel).scrollIntoView()) + return true +} + +function selectHorizontally(view: EditorView, dir: number, mods: string) { + let sel = view.state.selection + if (sel instanceof TextSelection) { + if (!sel.empty || mods.indexOf("s") > -1) { + return false + } else if (view.endOfTextblock(dir > 0 ? "forward" : "backward")) { + let next = moveSelectionBlock(view.state, dir) + if (next && (next instanceof NodeSelection)) return apply(view, next) + return false + } else if (!(browser.mac && mods.indexOf("m") > -1)) { + let $head = sel.$head, node = $head.textOffset ? null : dir < 0 ? $head.nodeBefore : $head.nodeAfter, desc + if (!node || node.isText) return false + let nodePos = dir < 0 ? $head.pos - node.nodeSize : $head.pos + if (!(node.isAtom || (desc = view.docView.descAt(nodePos)) && !desc.contentDOM)) return false + if (NodeSelection.isSelectable(node)) { + return apply(view, new NodeSelection(dir < 0 ? view.state.doc.resolve($head.pos - node.nodeSize) : $head)) + } else if (browser.webkit) { + // Chrome and Safari will introduce extra pointless cursor + // positions around inline uneditable nodes, so we have to + // take over and move the cursor past them (#937) + return apply(view, new TextSelection(view.state.doc.resolve(dir < 0 ? nodePos : nodePos + node.nodeSize))) + } else { + return false + } + } + } else if (sel instanceof NodeSelection && sel.node.isInline) { + return apply(view, new TextSelection(dir > 0 ? sel.$to : sel.$from)) + } else { + let next = moveSelectionBlock(view.state, dir) + if (next) return apply(view, next) + return false + } +} + +function nodeLen(node: Node) { + return node.nodeType == 3 ? node.nodeValue!.length : node.childNodes.length +} + +function isIgnorable(dom: Node) { + if ((dom as HTMLElement).contentEditable == "false") return true + let desc = dom.pmViewDesc + return desc && desc.size == 0 && (dom.nextSibling || dom.nodeName != "BR") +} + +function skipIgnoredNodes(view: EditorView, dir: number) { + return dir < 0 ? skipIgnoredNodesBefore(view) : skipIgnoredNodesAfter(view) +} + +// Make sure the cursor isn't directly after one or more ignored +// nodes, which will confuse the browser's cursor motion logic. +function skipIgnoredNodesBefore(view: EditorView) { + let sel = view.domSelectionRange() + let node = sel.focusNode!, offset = sel.focusOffset + if (!node) return + 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. + if (browser.gecko && node.nodeType == 1 && offset < nodeLen(node) && isIgnorable(node.childNodes[offset])) force = true + for (;;) { + if (offset > 0) { + if (node.nodeType != 1) { + break + } else { + let before = node.childNodes[offset - 1] + if (isIgnorable(before)) { + moveNode = node + moveOffset = --offset + } else if (before.nodeType == 3) { + node = before + offset = node.nodeValue!.length + } else break + } + } else if (isBlockNode(node)) { + break + } else { + let prev = node.previousSibling + while (prev && isIgnorable(prev)) { + moveNode = node.parentNode + moveOffset = domIndex(prev) + prev = prev.previousSibling + } + if (!prev) { + node = node.parentNode! + if (node == view.dom) break + offset = 0 + } else { + node = prev + offset = nodeLen(node) + } + } + } + if (force) setSelFocus(view, node, offset) + else if (moveNode) setSelFocus(view, moveNode, moveOffset!) +} + +// Make sure the cursor isn't directly before one or more ignored +// nodes. +function skipIgnoredNodesAfter(view: EditorView) { + let sel = view.domSelectionRange() + let node = sel.focusNode!, offset = sel.focusOffset + if (!node) return + let len = nodeLen(node) + let moveNode, moveOffset: number | undefined + for (;;) { + if (offset < len) { + if (node.nodeType != 1) break + let after = node.childNodes[offset] + if (isIgnorable(after)) { + moveNode = node + moveOffset = ++offset + } + else break + } else if (isBlockNode(node)) { + break + } else { + let next = node.nextSibling + while (next && isIgnorable(next)) { + moveNode = next.parentNode + moveOffset = domIndex(next) + 1 + next = next.nextSibling + } + if (!next) { + node = node.parentNode! + if (node == view.dom) break + offset = len = 0 + } else { + node = next + offset = 0 + len = nodeLen(node) + } + } + } + if (moveNode) setSelFocus(view, moveNode, moveOffset!) +} + +function isBlockNode(dom: Node) { + let desc = dom.pmViewDesc + return desc && desc.node && desc.node.isBlock +} + +function textNodeAfter(node: Node | null, offset: number): Text | undefined { + while (node && offset == node.childNodes.length && !hasBlockDesc(node)) { + offset = domIndex(node) + 1 + node = node.parentNode + } + while (node && offset < node.childNodes.length) { + node = node.childNodes[offset] + if (node.nodeType == 3) return node as Text + offset = 0 + } +} + +function textNodeBefore(node: Node | null, offset: number): Text | undefined { + while (node && !offset && !hasBlockDesc(node)) { + offset = domIndex(node) + node = node.parentNode + } + while (node && offset) { + node = node.childNodes[offset - 1] + if (node.nodeType == 3) return node as Text + offset = node.childNodes.length + } +} + +function setSelFocus(view: EditorView, node: Node, offset: number) { + if (node.nodeType != 3) { + let before, after + if (after = textNodeAfter(node, offset)) { + node = after + offset = 0 + } else if (before = textNodeBefore(node, offset)) { + node = before + offset = before.nodeValue!.length + } + } + + let sel = view.domSelection() + if (selectionCollapsed(sel)) { + let range = document.createRange() + range.setEnd(node, offset) + range.setStart(node, offset) + sel.removeAllRanges() + sel.addRange(range) + } else if (sel.extend) { + sel.extend(node, offset) + } + view.domObserver.setCurSelection() + let {state} = view + // If no state update ends up happening, reset the selection. + setTimeout(() => { + if (view.state == state) selectionToDOM(view) + }, 50) +} + +function findDirection(view: EditorView, pos: number): "rtl" | "ltr" { + let $pos = view.state.doc.resolve(pos) + if (!(browser.chrome || browser.windows) && $pos.parent.inlineContent) { + let coords = view.coordsAtPos(pos) + if (pos > $pos.start()) { + let before = view.coordsAtPos(pos - 1) + let mid = (before.top + before.bottom) / 2 + if (mid > coords.top && mid < coords.bottom && Math.abs(before.left - coords.left) > 1) + return before.left < coords.left ? "ltr" : "rtl" + } + if (pos < $pos.end()) { + let after = view.coordsAtPos(pos + 1) + let mid = (after.top + after.bottom) / 2 + if (mid > coords.top && mid < coords.bottom && Math.abs(after.left - coords.left) > 1) + return after.left > coords.left ? "ltr" : "rtl" + } + } + let computed = getComputedStyle(view.dom).direction + return computed == "rtl" ? "rtl" : "ltr" +} + +// 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: 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 + let {$from, $to} = sel + + if (!$from.parent.inlineContent || view.endOfTextblock(dir < 0 ? "up" : "down")) { + let next = moveSelectionBlock(view.state, dir) + if (next && (next instanceof NodeSelection)) + return apply(view, next) + } + if (!$from.parent.inlineContent) { + let side = dir < 0 ? $from : $to + let beyond = sel instanceof AllSelection ? Selection.near(side, dir) : Selection.findFrom(side, dir) + return beyond ? apply(view, beyond) : false + } + return false +} + +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 + if (!empty) return false + if (view.endOfTextblock(dir > 0 ? "forward" : "backward")) return true + let nextNode = !$head.textOffset && (dir < 0 ? $head.nodeBefore : $head.nodeAfter) + if (nextNode && !nextNode.isText) { + let tr = view.state.tr + if (dir < 0) tr.delete($head.pos - nextNode.nodeSize, $head.pos) + else tr.delete($head.pos, $head.pos + nextNode.nodeSize) + view.dispatch(tr) + return true + } + return false +} + +function switchEditable(view: EditorView, node: HTMLElement, state: string) { + view.domObserver.stop() + node.contentEditable = state + view.domObserver.start() +} + +// Issue #867 / #1090 / https://bugs.chromium.org/p/chromium/issues/detail?id=903821 +// In which Safari (and at some point in the past, Chrome) does really +// 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: EditorView) { + if (!browser.safari || view.state.selection.$head.parentOffset > 0) return false + let {focusNode, focusOffset} = view.domSelectionRange() + if (focusNode && focusNode.nodeType == 1 && focusOffset == 0 && + 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 +// that have a dangerous default effect, even if the commands they are +// bound to return false, and to make sure that cursor-motion keys +// find a cursor (as opposed to a node selection) when pressed. For +// cursor-motion keys, the code in the handlers also takes care of +// block selections. + +function getMods(event: KeyboardEvent) { + let result = "" + if (event.ctrlKey) result += "c" + if (event.metaKey) result += "m" + if (event.altKey) result += "a" + if (event.shiftKey) result += "s" + return result +} + +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) || skipIgnoredNodes(view, -1) + } else if ((code == 46 && !event.shiftKey) || (browser.mac && code == 68 && mods == "c")) { // Delete, Ctrl-d on Mac + return stopNativeHorizontalDelete(view, 1) || skipIgnoredNodes(view, 1) + } else if (code == 13 || code == 27) { // Enter, Esc + return true + } else if (code == 37 || (browser.mac && code == 66 && mods == "c")) { // Left arrow, Ctrl-b on Mac + let dir = code == 37 ? (findDirection(view, view.state.selection.from) == "ltr" ? -1 : 1) : -1 + return selectHorizontally(view, dir, mods) || skipIgnoredNodes(view, dir) + } else if (code == 39 || (browser.mac && code == 70 && mods == "c")) { // Right arrow, Ctrl-f on Mac + let dir = code == 39 ? (findDirection(view, view.state.selection.from) == "ltr" ? 1 : -1) : 1 + return selectHorizontally(view, dir, mods) || skipIgnoredNodes(view, dir) + } else if (code == 38 || (browser.mac && code == 80 && mods == "c")) { // Up arrow, Ctrl-p on Mac + return selectVertically(view, -1, mods) || skipIgnoredNodes(view, -1) + } else if (code == 40 || (browser.mac && code == 78 && mods == "c")) { // Down arrow, Ctrl-n on Mac + return safariDownArrowBug(view) || selectVertically(view, 1, mods) || skipIgnoredNodesAfter(view) + } else if (mods == (browser.mac ? "m" : "c") && + (code == 66 || code == 73 || code == 89 || code == 90)) { // Mod-[biyz] + return true + } + return false +} diff --git a/src/prosemirror-internal/clipboard.ts b/src/prosemirror-internal/clipboard.ts new file mode 100644 index 00000000..2e406910 --- /dev/null +++ b/src/prosemirror-internal/clipboard.ts @@ -0,0 +1,260 @@ +import {Slice, Fragment, DOMParser, DOMSerializer, ResolvedPos, NodeType, Node} from "prosemirror-model" +import * as browser from "./browser.js" +import { EditorViewInternal as EditorView } from "./EditorViewInternal.js" + +export function serializeForClipboard(view: EditorView, slice: Slice) { + view.someProp("transformCopied", f => { slice = f(slice!, view) }) + + let context = [], {content, openStart, openEnd} = slice + while (openStart > 1 && openEnd > 1 && content.childCount == 1 && content.firstChild!.childCount == 1) { + openStart-- + openEnd-- + let node = content.firstChild! + // @ts-expect-error + context.push(node.type.name, node.attrs != node.type.defaultAttrs ? node.attrs : null) + content = node.content + } + + let serializer = view.someProp("clipboardSerializer") || DOMSerializer.fromSchema(view.state.schema) + let doc = detachedDoc(), wrap = doc.createElement("div") + wrap.appendChild(serializer.serializeFragment(content, {document: doc})) + + let firstChild = wrap.firstChild, needsWrap, wrappers = 0 + while (firstChild && firstChild.nodeType == 1 && (needsWrap = wrapMap[firstChild.nodeName.toLowerCase()])) { + for (let i = needsWrap.length - 1; i >= 0; i--) { + // @ts-expect-error + let wrapper = doc.createElement(needsWrap[i]) + while (wrap.firstChild) wrapper.appendChild(wrap.firstChild) + wrap.appendChild(wrapper) + wrappers++ + } + firstChild = wrap.firstChild + } + + if (firstChild && firstChild.nodeType == 1) + (firstChild as HTMLElement).setAttribute( + "data-pm-slice", `${openStart} ${openEnd}${wrappers ? ` -${wrappers}` : ""} ${JSON.stringify(context)}`) + + let text = view.someProp("clipboardTextSerializer", f => f(slice, view)) || + slice.content.textBetween(0, slice.content.size, "\n\n") + + return {dom: wrap, text} +} + +// Read a slice of content from the clipboard (or drop data). +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) { + view.someProp("transformPastedText", f => { text = f(text, inCode || plainText, view) }) + if (inCode) return text ? new Slice(Fragment.from(view.state.schema.text(text.replace(/\r\n?/g, "\n"))), 0, 0) : Slice.empty + let parsed = view.someProp("clipboardTextParser", f => f(text, $context, plainText, view)) + if (parsed) { + slice = parsed + } else { + let marks = $context.marks() + 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")) + if (block) p.appendChild(serializer.serializeNode(schema.text(block, marks))) + }) + } + } else { + view.someProp("transformPastedHTML", f => { html = f(html!, view) }) + dom = readHTML(html!) + if (browser.webkit) restoreReplacedSpaces(dom) + } + + let contextNode = dom && dom.querySelector("[data-pm-slice]") + let sliceData = contextNode && /^(\d+) (\d+)(?: -(\d+))? (.*)/.exec(contextNode.getAttribute("data-pm-slice") || "") + if (sliceData && sliceData[3]) for (let i = +sliceData[3]; i > 0; i--) { + let child = dom!.firstChild + while (child && child.nodeType != 1) child = child.nextSibling + if (!child) break + dom = child as HTMLElement + } + + if (!slice) { + let parser = view.someProp("clipboardParser") || view.someProp("domParser") || DOMParser.fromSchema(view.state.schema) + slice = parser.parseSlice(dom!, { + preserveWhitespace: !!(asText || sliceData), + context: $context, + // @ts-expect-error + ruleFromNode(dom) { + if (dom.nodeName == "BR" && !dom.nextSibling && + dom.parentNode && !inlineParents.test(dom.parentNode.nodeName)) return {ignore: true} + return null + } + }) + } + if (sliceData) { + // @ts-expect-error + slice = addContext(closeSlice(slice, +sliceData[1], +sliceData[2]), sliceData[4]) + } else { // HTML wasn't created by ProseMirror. Make sure top-level siblings are coherent + 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) {} + slice = closeSlice(slice, openStart, openEnd) + } + } + + view.someProp("transformPasted", f => { slice = f(slice!, view) }) + return slice +} + +const inlineParents = /^(a|abbr|acronym|b|cite|code|del|em|i|ins|kbd|label|output|q|ruby|s|samp|span|strong|sub|sup|time|u|tt|var)$/i + +// Takes a slice parsed with parseSlice, which means there hasn't been +// any content-expression checking done on the top nodes, tries to +// find a parent node in the current context that might fit the nodes, +// and if successful, rebuilds the slice so that it fits into that parent. +// +// 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: 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: readonly NodeType[] | undefined, result: Node[] | null = [] + // @ts-expect-error + fragment.forEach(node => { + if (!result) return + let wrap = match.findWrapping(node.type), inLast + if (!wrap) return result = null + // @ts-expect-error + if (inLast = result.length && lastWrap!.length && addToSibling(wrap, lastWrap!, node, result[result.length - 1], 0)) { + result[result.length - 1] = inLast + } else { + // @ts-expect-error + 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)! + lastWrap = wrap + } + }) + if (result) return Fragment.from(result) + } + return fragment +} + +function withWrappers(node: Node, wrap: readonly NodeType[], from = 0) { + for (let i = wrap.length - 1; i >= from; i--) + // @ts-expect-error + node = wrap[i].create(null, Fragment.from(node)) + return node +} + +// Used to group adjacent nodes wrapped in similar parents by +// normalizeSiblings into the same parent node +function addToSibling(wrap: readonly NodeType[], lastWrap: readonly NodeType[], + // @ts-expect-error + 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) + if (inner) return sibling.copy(sibling.content.replaceChild(sibling.childCount - 1, inner)) + let match = sibling.contentMatchAt(sibling.childCount) + // @ts-expect-error + if (match.matchType(depth == wrap.length - 1 ? node.type : wrap[depth + 1])) + return sibling.copy(sibling.content.append(Fragment.from(withWrappers(node, wrap, depth + 1)))) + } +} + +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)! + return node.copy(fragment.append(fill)) +} + +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 (fragment.childCount > 1) openEnd = 0 + if (depth < to - 1) inner = closeRange(inner, side, from, to, depth + 1, openEnd) + if (depth >= from) + inner = side < 0 ? node.contentMatchAt(0)!.fillBefore(inner, 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: 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) + slice = new Slice(closeRange(slice.content, 1, openEnd, slice.openEnd, 0, 0), slice.openStart, openEnd) + return slice +} + +// Trick from jQuery -- some elements must be wrapped in other +// elements for innerHTML to work. I.e. if you do `div.innerHTML = +// ".."` the table cells are ignored. +const wrapMap: {[node: string]: string[]} = { + thead: ["table"], + tbody: ["table"], + tfoot: ["table"], + caption: ["table"], + colgroup: ["table"], + col: ["table", "colgroup"], + tr: ["table", "tbody"], + td: ["table", "tbody", "tr"], + th: ["table", "tbody", "tr"] +} + +let _detachedDoc: Document | null = null +function detachedDoc() { + return _detachedDoc || (_detachedDoc = document.implementation.createHTMLDocument("title")) +} + +function readHTML(html: string) { + let metas = /^(\s*]*>)*/.exec(html) + if (metas) html = html.slice(metas[0].length) + let elt = detachedDoc().createElement("div") + let firstTag = /<([a-z][^>\s]+)/i.exec(html), wrap + // @ts-expect-error + if (wrap = firstTag && wrapMap[firstTag[1].toLowerCase()]) + html = wrap.map(n => "<" + n + ">").join("") + html + wrap.map(n => "").reverse().join("") + elt.innerHTML = html + // @ts-expect-error + if (wrap) for (let i = 0; i < wrap.length; i++) elt = elt.querySelector(wrap[i]) || elt + return elt +} + +// Webkit browsers do some hard-to-predict replacement of regular +// spaces with non-breaking spaces when putting content on the +// 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: 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] + // @ts-expect-error + if (node.childNodes.length == 1 && node.textContent == "\u00a0" && node.parentNode) + // @ts-expect-error + node.parentNode.replaceChild(dom.ownerDocument.createTextNode(" "), node) + } +} + +function addContext(slice: Slice, context: string) { + if (!slice.size) return slice + let schema = slice.content.firstChild!.type.schema, array + try { array = JSON.parse(context) } + catch(e) { return slice } + let {content, openStart, openEnd} = slice + for (let i = array.length - 2; i >= 0; i -= 2) { + let type = schema.nodes[array[i]] + if (!type || type.hasRequiredAttrs()) break + content = Fragment.from(type.create(array[i + 1], content)) + openStart++; openEnd++ + } + return new Slice(content, openStart, openEnd) +} diff --git a/src/prosemirror-internal/dom.ts b/src/prosemirror-internal/dom.ts index c03510d0..f7b58d2c 100644 --- a/src/prosemirror-internal/dom.ts +++ b/src/prosemirror-internal/dom.ts @@ -3,6 +3,7 @@ * Copied directly from * https://github.com/ProseMirror/prosemirror-view/blob/f6d96de9f2714bcf97d6ca9b0906d8750a142d1b/src/dom.ts */ +import { EditorViewInternal as EditorView } from "./EditorViewInternal.js" export type DOMNode = InstanceType export type DOMSelection = InstanceType @@ -122,3 +123,33 @@ export function caretFromPoint(doc: Document, x: number, y: number): {node: Node if (range) return {node: range.startContainer, offset: range.startOffset} } } + +// $$FORK: originally from domobserver.ts +export function safariShadowSelectionRange(view: EditorView): DOMSelectionRange { + let found: StaticRange | undefined + function read(event: InputEvent) { + event.preventDefault() + event.stopImmediatePropagation() + found = event.getTargetRanges()[0] + } + + // Because Safari (at least in 2018-2022) doesn't provide regular + // access to the selection inside a shadowRoot, we have to perform a + // ridiculous hack to get at it—using `execCommand` to trigger a + // `beforeInput` event so that we can read the target range from the + // event. + view.dom.addEventListener("beforeinput", read, true) + document.execCommand("indent") + view.dom.removeEventListener("beforeinput", read, true) + + let anchorNode = found!.startContainer, anchorOffset = found!.startOffset + let focusNode = found!.endContainer, focusOffset = found!.endOffset + + let currentAnchor = view.domAtPos(view.state.selection.anchor) + // Since such a range doesn't distinguish between anchor and head, + // use a heuristic that flips it around if its end matches the + // current anchor. + if (isEquivalentPosition(currentAnchor.node, currentAnchor.offset, focusNode, focusOffset)) + [anchorNode, anchorOffset, focusNode, focusOffset] = [focusNode, focusOffset, anchorNode, anchorOffset] + return {anchorNode, anchorOffset, focusNode, focusOffset} +} diff --git a/src/prosemirror-internal/input.ts b/src/prosemirror-internal/input.ts new file mode 100644 index 00000000..3a6b6f5a --- /dev/null +++ b/src/prosemirror-internal/input.ts @@ -0,0 +1,785 @@ +import {Selection, NodeSelection, TextSelection} from "prosemirror-state" +import {dropPoint} from "prosemirror-transform" +import {Slice, Node} from "prosemirror-model" + +import * as browser from "./browser" +import {captureKeyDown} from "./capturekeys.js" +import {parseFromClipboard, serializeForClipboard} from "./clipboard.js" +import {selectionBetween, selectionToDOM, selectionFromDOM} from "./selection.js" +import {keyEvent, DOMNode} from "./dom" +import { EditorViewInternal as EditorView } from "./EditorViewInternal.js" +import {ViewDesc} from "../descriptors/ViewDesc.js" +import { MutableRefObject } from "react" + +// 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} = {} +const editHandlers: {[event: string]: (view: EditorView, event: Event) => void} = {} +const passiveHandlers: Record = {touchstart: true, touchmove: true} + +export class InputState { + shiftKey = false + mouseDown: MouseDown | null = null + lastKeyCode: number | null = null + lastKeyCodeTime = 0 + lastClick = {time: 0, x: 0, y: 0, type: ""} + lastSelectionOrigin: string | null = null + lastSelectionTime = 0 + lastIOSEnter = 0 + lastIOSEnterFallbackTimeout = -1 + lastFocus = 0 + lastTouch = 0 + lastAndroidDelete = 0 + composing = false + composingTimeout = -1 + compositionNodes: ViewDesc[] = [] + compositionEndedAt = -2e8 + compositionID = 1 + // Set to a composition ID when there are pending changes at compositionend + compositionPendingChanges = 0 + domChangeCount = 0 + eventHandlers: {[event: string]: (event: Event) => void} = Object.create(null) + hideSelectionGuard: (() => void) | null = null +} + +// $$FORK: modify to work with view ref +export function initInput(view: MutableRefObject) { + for (let event in handlers) { + let handler = handlers[event] + view.current.dom.addEventListener(event, view.current.input.eventHandlers[event] = (event: Event) => { + if (eventBelongsToView(view.current, event) && !runCustomHandler(view.current, event) && + (view.current.editable || !(event.type in editHandlers))) + // @ts-expect-error + handler(view.current, 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 + // you press enter go away. + if (browser.safari) view.current.dom.addEventListener("input", () => null) + + ensureListeners(view.current) +} + +function setSelectionOrigin(view: EditorView, origin: string) { + view.input.lastSelectionOrigin = origin + view.input.lastSelectionTime = Date.now() +} + +export function ensureListeners(view: EditorView) { + view.someProp("handleDOMEvents", currentHandlers => { + for (let type in currentHandlers) if (!view.input.eventHandlers[type]) + view.dom.addEventListener(type, view.input.eventHandlers[type] = event => runCustomHandler(view, event)) + }) +} + +function runCustomHandler(view: EditorView, event: Event) { + return view.someProp("handleDOMEvents", handlers => { + let handler = handlers[event.type] + return handler ? handler(view, event) || event.defaultPrevented : false + }) +} + +function eventBelongsToView(view: EditorView, event: Event) { + if (!event.bubbles) return true + if (event.defaultPrevented) return false + for (let node = event.target as DOMNode; node != view.dom; node = node.parentNode!) + if (!node || node.nodeType == 11 || + (node.pmViewDesc && node.pmViewDesc.stopEvent(event))) + return false + return true +} + +export function dispatchEvent(view: EditorView, event: Event) { + if (!runCustomHandler(view, event) && handlers[event.type] && + (view.editable || !(event.type in editHandlers))) + // @ts-expect-error + handlers[event.type](view, event) +} + +editHandlers.keydown = (view: EditorView, _event: Event) => { + let event = _event as KeyboardEvent + view.input.shiftKey = event.keyCode == 16 || event.shiftKey + if (inOrNearComposition(view, event)) return + view.input.lastKeyCode = event.keyCode + view.input.lastKeyCodeTime = Date.now() + // Suppress enter key events on Chrome Android, because those tend + // to be part of a confused sequence of composition events fired, + // and handling them eagerly tends to corrupt the input. + if (browser.android && browser.chrome && event.keyCode == 13) return + // $$FORK: We don't use a dom observer + // TODO: I have no idea if it's safe to skip this + // if (event.keyCode != 229) view.domObserver.forceFlush() + + // On iOS, if we preventDefault enter key presses, the virtual + // keyboard gets confused. So the hack here is to set a flag that + // makes the DOM change code recognize that what just happens should + // be replaced by whatever the Enter key handlers do. + if (browser.ios && event.keyCode == 13 && !event.ctrlKey && !event.altKey && !event.metaKey) { + let now = Date.now() + view.input.lastIOSEnter = now + view.input.lastIOSEnterFallbackTimeout = setTimeout(() => { + if (view.input.lastIOSEnter == now) { + view.someProp("handleKeyDown", f => f(view, keyEvent(13, "Enter"))) + view.input.lastIOSEnter = 0 + } + }, 200) + } else if (view.someProp("handleKeyDown", f => f(view, event)) || captureKeyDown(view, event)) { + event.preventDefault() + } else { + setSelectionOrigin(view, "key") + } +} + +editHandlers.keyup = (view, event) => { + if ((event as KeyboardEvent).keyCode == 16) view.input.shiftKey = false +} + +editHandlers.keypress = (view, _event) => { + let event = _event as KeyboardEvent + if (inOrNearComposition(view, event) || !event.charCode || + event.ctrlKey && !event.altKey || browser.mac && event.metaKey) return + + if (view.someProp("handleKeyPress", f => f(view, event))) { + event.preventDefault() + return + } + + 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()) + event.preventDefault() + } +} + +function eventCoords(event: MouseEvent) { return {left: event.clientX, top: event.clientY} } + +function isNear(event: MouseEvent, click: {x: number, y: number}) { + let dx = click.x - event.clientX, dy = click.y - event.clientY + return dx * dx + dy * dy < 100 +} + +function runHandlerOnContext( + view: EditorView, + propName: "handleClickOn" | "handleDoubleClickOn" | "handleTripleClickOn", + pos: number, + inside: number, + event: MouseEvent +) { + if (inside == -1) return false + let $pos = view.state.doc.resolve(inside) + for (let i = $pos.depth + 1; i > 0; i--) { + if (view.someProp(propName, f => i > $pos.depth ? f(view, pos, $pos.nodeAfter!, $pos.before(i), event, true) + : f(view, pos, $pos.node(i), $pos.before(i), event, false))) + return true + } + return false +} + +function updateSelection(view: EditorView, selection: Selection, origin: string) { + if (!view.focused) view.focus() + let tr = view.state.tr.setSelection(selection) + if (origin == "pointer") tr.setMeta("pointer", true) + view.dispatch(tr) +} + +function selectClickedLeaf(view: EditorView, inside: number) { + if (inside == -1) return false + let $pos = view.state.doc.resolve(inside), node = $pos.nodeAfter + if (node && node.isAtom && NodeSelection.isSelectable(node)) { + updateSelection(view, new NodeSelection($pos), "pointer") + return true + } + return false +} + +function selectClickedNode(view: EditorView, inside: number) { + if (inside == -1) return false + let sel = view.state.selection, selectedNode, selectAt + if (sel instanceof NodeSelection) selectedNode = sel.node + + let $pos = view.state.doc.resolve(inside) + for (let i = $pos.depth + 1; i > 0; i--) { + let node = i > $pos.depth ? $pos.nodeAfter! : $pos.node(i) + if (NodeSelection.isSelectable(node)) { + if (selectedNode && sel.$from.depth > 0 && + i >= sel.$from.depth && $pos.before(sel.$from.depth + 1) == sel.$from.pos) + selectAt = $pos.before(sel.$from.depth) + else + selectAt = $pos.before(i) + break + } + } + + if (selectAt != null) { + updateSelection(view, NodeSelection.create(view.state.doc, selectAt), "pointer") + return true + } else { + return false + } +} + +function handleSingleClick(view: EditorView, pos: number, inside: number, event: MouseEvent, selectNode: boolean) { + return runHandlerOnContext(view, "handleClickOn", pos, inside, event) || + view.someProp("handleClick", f => f(view, pos, event)) || + (selectNode ? selectClickedNode(view, inside) : selectClickedLeaf(view, inside)) +} + +function handleDoubleClick(view: EditorView, pos: number, inside: number, event: MouseEvent) { + return runHandlerOnContext(view, "handleDoubleClickOn", pos, inside, event) || + view.someProp("handleDoubleClick", f => f(view, pos, event)) +} + +function handleTripleClick(view: EditorView, pos: number, inside: number, event: MouseEvent) { + return runHandlerOnContext(view, "handleTripleClickOn", pos, inside, event) || + view.someProp("handleTripleClick", f => f(view, pos, event)) || + defaultTripleClick(view, inside, event) +} + +// @ts-expect-error +function defaultTripleClick(view: EditorView, inside: number, event: MouseEvent) { + if (event.button != 0) return false + let doc = view.state.doc + if (inside == -1) { + if (doc.inlineContent) { + updateSelection(view, TextSelection.create(doc, 0, doc.content.size), "pointer") + return true + } + return false + } + + let $pos = doc.resolve(inside) + for (let i = $pos.depth + 1; i > 0; i--) { + let node = i > $pos.depth ? $pos.nodeAfter! : $pos.node(i) + let nodePos = $pos.before(i) + if (node.inlineContent) + updateSelection(view, TextSelection.create(doc, nodePos + 1, nodePos + 1 + node.content.size), "pointer") + else if (NodeSelection.isSelectable(node)) + updateSelection(view, NodeSelection.create(doc, nodePos), "pointer") + else + continue + return true + } +} + +function forceDOMFlush(view: EditorView) { + return endComposition(view) +} + +const selectNodeModifier: keyof MouseEvent = browser.mac ? "metaKey" : "ctrlKey" + +handlers.mousedown = (view, _event) => { + let event = _event as MouseEvent + 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 (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} + + let pos = view.posAtCoords(eventCoords(event)) + if (!pos) return + + if (type == "singleClick") { + if (view.input.mouseDown) view.input.mouseDown.done() + view.input.mouseDown = new MouseDown(view, pos, event, !!flushed) + } else if ((type == "doubleClick" ? handleDoubleClick : handleTripleClick)(view, pos.pos, pos.inside, event)) { + event.preventDefault() + } else { + setSelectionOrigin(view, "pointer") + } +} + +class MouseDown { + startDoc: Node + selectNode: boolean + allowDefault: boolean + delayedSelectionSync = false + mightDrag: {node: Node, pos: number, addAttr: boolean, setUneditable: boolean} | null = null + target: HTMLElement | null + + constructor( + readonly view: EditorView, + readonly pos: {pos: number, inside: number}, + readonly event: MouseEvent, + readonly flushed: boolean + ) { + this.startDoc = view.state.doc + this.selectNode = !!event[selectNodeModifier] + this.allowDefault = event.shiftKey + + let targetNode: Node, targetPos + if (pos.inside > -1) { + targetNode = view.state.doc.nodeAt(pos.inside)! + targetPos = pos.inside + } else { + let $pos = view.state.doc.resolve(pos.pos) + targetNode = $pos.parent + targetPos = $pos.depth ? $pos.before() : 0 + } + + const target = flushed ? null : event.target as HTMLElement + const targetDesc = target ? view.docView.nearestDesc(target, true) : null + this.target = targetDesc ? targetDesc.dom as HTMLElement : null + + let {selection} = view.state + if (event.button == 0 && + targetNode.type.spec.draggable && targetNode.type.spec.selectable !== false || + selection instanceof NodeSelection && selection.from <= targetPos && selection.to > targetPos) + this.mightDrag = { + node: targetNode, + pos: targetPos, + addAttr: !!(this.target && !this.target.draggable), + setUneditable: !!(this.target && browser.gecko && !this.target.hasAttribute("contentEditable")) + } + + if (this.target && this.mightDrag && (this.mightDrag.addAttr || this.mightDrag.setUneditable)) { + // $$FORK: We don't use a dom observer + // this.view.domObserver.stop() + if (this.mightDrag.addAttr) this.target.draggable = true + if (this.mightDrag.setUneditable) + setTimeout(() => { + if (this.view.input.mouseDown == this) this.target!.setAttribute("contentEditable", "false") + }, 20) + // this.view.domObserver.start() + } + + view.root.addEventListener("mouseup", this.up = this.up.bind(this) as any) + view.root.addEventListener("mousemove", this.move = this.move.bind(this) as any) + setSelectionOrigin(view, "pointer") + } + + done() { + this.view.root.removeEventListener("mouseup", this.up as any) + this.view.root.removeEventListener("mousemove", this.move as any) + if (this.mightDrag && this.target) { + // $$FORK: We don't use a dom observer + // this.view.domObserver.stop() + if (this.mightDrag.addAttr) this.target.removeAttribute("draggable") + if (this.mightDrag.setUneditable) this.target.removeAttribute("contentEditable") + // this.view.domObserver.start() + } + // if (this.delayedSelectionSync) setTimeout(() => selectionToDOM(this.view)) + this.view.input.mouseDown = null + } + + up(event: MouseEvent) { + this.done() + + if (!this.view.dom.contains(event.target as HTMLElement)) + return + + let pos: {pos: number, inside: number} | null = this.pos + if (this.view.state.doc != this.startDoc) pos = this.view.posAtCoords(eventCoords(event)) + + this.updateAllowDefault(event) + if (this.allowDefault || !pos) { + 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 ignores clicks on draggable elements + (browser.safari && this.mightDrag && !this.mightDrag.node.isAtom) || + // Chrome will sometimes treat a node selection as a + // cursor, but still report that the node is selected + // when asked through getSelection. You'll then get a + // situation where clicking at the point where that + // (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.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() + } else { + setSelectionOrigin(this.view, "pointer") + } + } + + move(event: MouseEvent) { + this.updateAllowDefault(event) + setSelectionOrigin(this.view, "pointer") + if (event.buttons == 0) this.done() + } + + updateAllowDefault(event: MouseEvent) { + if (!this.allowDefault && (Math.abs(this.event.x - event.clientX) > 4 || + Math.abs(this.event.y - event.clientY) > 4)) + this.allowDefault = true + } +} + +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) { + if (view.composing) return true + // See https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/. + // On Japanese input method editors (IMEs), the Enter key is used to confirm character + // selection. On Safari, when Enter is pressed, compositionend and keydown events are + // emitted. The keydown event triggers newline insertion, which we don't want. + // This method returns true if the keydown event should be ignored. + // We only ignore it once, as pressing Enter a second time *should* insert a newline. + // Furthermore, the keydown event timestamp must be close to the compositionEndedAt timestamp. + // This guards against the case where compositionend is triggered without the keyboard + // (e.g. character confirmation may be done with the mouse), and keydown is triggered + // afterwards- we wouldn't want to ignore the keydown event in this case. + if (browser.safari && Math.abs(event.timeStamp - view.input.compositionEndedAt) < 500) { + view.input.compositionEndedAt = -2e8 + return true + } + return false +} + +// Drop active composition after 5 seconds of inactivity on Android +const timeoutComposition = browser.android ? 5000 : -1 + +editHandlers.compositionstart = editHandlers.compositionupdate = view => { + if (!view.composing) { + // $$FORK: We don't use a dom observer + // TODO: I have no idea if it's safe to skip this + // view.domObserver.flush() + let {state} = view, $pos = state.selection.$from + if (state.selection.empty && + (state.storedMarks || + (!$pos.textOffset && $pos.parentOffset && $pos.nodeBefore!.marks.some(m => m.type.spec.inclusive === false)))) { + // Need to wrap the cursor in mark nodes different from the ones in the DOM context + view.markCursor = view.state.storedMarks || $pos.marks() + endComposition(view, true) + view.markCursor = null + } else { + endComposition(view) + // In firefox, if the cursor is after but outside a marked node, + // the inserted text won't inherit the marks. So this moves it + // inside if necessary. + if (browser.gecko && state.selection.empty && $pos.parentOffset && !$pos.textOffset && $pos.nodeBefore!.marks.length) { + let sel = view.domSelectionRange() + for (let node = sel.focusNode, offset = sel.focusOffset; node && node.nodeType == 1 && offset != 0;) { + let before = offset < 0 ? node.lastChild : node.childNodes[offset - 1] + if (!before) break + if (before.nodeType == 3) { + view.domSelection().collapse(before, before.nodeValue!.length) + break + } else { + node = before + offset = -1 + } + } + } + } + view.input.composing = true + } + scheduleComposeEnd(view, timeoutComposition) +} + +editHandlers.compositionend = (view, event) => { + if (view.composing) { + view.input.composing = false + view.input.compositionEndedAt = event.timeStamp + // $$FORK: We don't use a dom observer + // view.input.compositionPendingChanges = view.domObserver.pendingRecords().length ? view.input.compositionID : 0 + // if (view.input.compositionPendingChanges) Promise.resolve().then(() => view.domObserver.flush()) + view.input.compositionID++ + scheduleComposeEnd(view, 20) + } +} + +function scheduleComposeEnd(view: EditorView, delay: number) { + clearTimeout(view.input.composingTimeout) + if (delay > -1) view.input.composingTimeout = setTimeout(() => endComposition(view), delay) +} + +export function clearComposition(view: EditorView) { + if (view.composing) { + view.input.composing = false + view.input.compositionEndedAt = timestampFromCustomEvent() + } + while (view.input.compositionNodes.length > 0) view.input.compositionNodes.pop()!.markParentsDirty() +} + +function timestampFromCustomEvent() { + let event = document.createEvent("Event") + event.initEvent("event", true, true) + return event.timeStamp +} + +/// @internal +export function endComposition(view: EditorView, forceUpdate = false) { + // $$FORK: We don't use a dom observer + // if (browser.android && view.domObserver.flushingSoon >= 0) return + // view.domObserver.forceFlush() + clearComposition(view) + if (forceUpdate || view.docView && view.docView.dirty) { + let sel = selectionFromDOM(view) + if (sel && !sel.eq(view.state.selection)) view.dispatch(view.state.tr.setSelection(sel)) + else view.updateState(view.state) + return true + } + return false +} + +function captureCopy(view: EditorView, dom: HTMLElement) { + // The extra wrapper is somehow necessary on IE/Edge to prevent the + // content from being mangled when it is put onto the clipboard + if (!view.dom.parentNode) return + let wrap = view.dom.parentNode.appendChild(document.createElement("div")) + wrap.appendChild(dom) + wrap.style.cssText = "position: fixed; left: -10000px; top: 10px" + let sel = getSelection()!, range = document.createRange() + range.selectNodeContents(dom) + // Done because IE will fire a selectionchange moving the selection + // to its start when removeAllRanges is called and the editor still + // has focus (which will mess up the editor's selection state). + view.dom.blur() + sel.removeAllRanges() + sel.addRange(range) + setTimeout(() => { + if (wrap.parentNode) wrap.parentNode.removeChild(wrap) + view.focus() + }, 50) +} + +// This is very crude, but unfortunately both these browsers _pretend_ +// that they have a clipboard API—all the objects and methods are +// there, they just don't work, and they are hard to test. +const brokenClipboardAPI = (browser.ie && browser.ie_version < 15) || + (browser.ios && browser.webkit_version < 604) + +handlers.copy = editHandlers.cut = (view, _event) => { + let event = _event as ClipboardEvent + let sel = view.state.selection, cut = event.type == "cut" + if (sel.empty) return + + // IE and Edge's clipboard interface is completely broken + let data = brokenClipboardAPI ? null : event.clipboardData + let slice = sel.content(), {dom, text} = serializeForClipboard(view, slice) + if (data) { + event.preventDefault() + data.clearData() + data.setData("text/html", dom.innerHTML) + data.setData("text/plain", text) + } else { + captureCopy(view, dom) + } + if (cut) view.dispatch(view.state.tr.deleteSelection().scrollIntoView().setMeta("uiEvent", "cut")) +} + +function sliceSingleNode(slice: Slice) { + return slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1 ? slice.content.firstChild : null +} + +function capturePaste(view: EditorView, event: ClipboardEvent) { + if (!view.dom.parentNode) return + let plainText = view.input.shiftKey || view.state.selection.$from.parent.type.spec.code + let target = view.dom.parentNode.appendChild(document.createElement(plainText ? "textarea" : "div")) + if (!plainText) target.contentEditable = "true" + target.style.cssText = "position: fixed; left: -10000px; top: 10px" + target.focus() + let plain = view.input.shiftKey && view.input.lastKeyCode != 45 + setTimeout(() => { + view.focus() + if (target.parentNode) target.parentNode.removeChild(target) + if (plainText) doPaste(view, (target as HTMLTextAreaElement).value, null, plain, event) + else doPaste(view, target.textContent!, target.innerHTML, plain, event) + }, 50) +} + +export function doPaste(view: EditorView, text: string, html: string | null, preferPlain: boolean, event: ClipboardEvent) { + let slice = parseFromClipboard(view, text, html, preferPlain, view.state.selection.$from) + if (view.someProp("handlePaste", f => f(view, event, slice || Slice.empty))) return true + if (!slice) return false + + let singleNode = sliceSingleNode(slice) + let tr = singleNode + ? view.state.tr.replaceSelectionWith(singleNode, preferPlain) + : view.state.tr.replaceSelection(slice) + view.dispatch(tr.scrollIntoView().setMeta("paste", true).setMeta("uiEvent", "paste")) + return true +} + +editHandlers.paste = (view, _event) => { + let event = _event as ClipboardEvent + // Handling paste from JavaScript during composition is very poorly + // handled by browsers, so as a dodgy but preferable kludge, we just + // let the browser do its native thing there, except on Android, + // where the editor is almost always composing. + if (view.composing && !browser.android) return + let data = brokenClipboardAPI ? null : event.clipboardData + let plain = view.input.shiftKey && view.input.lastKeyCode != 45 + if (data && doPaste(view, data.getData("text/plain"), data.getData("text/html"), plain, event)) + event.preventDefault() + else + capturePaste(view, event) +} + +class Dragging { + constructor(readonly slice: Slice, readonly move: boolean) {} +} + +const dragCopyModifier: keyof DragEvent = browser.mac ? "altKey" : "ctrlKey" + +handlers.dragstart = (view, _event) => { + let event = _event as DragEvent + let mouseDown = view.input.mouseDown + if (mouseDown) mouseDown.done() + if (!event.dataTransfer) return + + let sel = view.state.selection + let pos = sel.empty ? null : view.posAtCoords(eventCoords(event)) + if (pos && pos.pos >= sel.from && pos.pos <= (sel instanceof NodeSelection ? sel.to - 1: sel.to)) { + // In selection + } else if (mouseDown && mouseDown.mightDrag) { + view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, mouseDown.mightDrag.pos))) + } else if (event.target && (event.target as HTMLElement).nodeType == 1) { + let desc = view.docView.nearestDesc(event.target as HTMLElement, true) + if (desc && desc.node.type.spec.draggable && desc != view.docView) + view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, desc.posBefore))) + } + let slice = view.state.selection.content(), {dom, text} = serializeForClipboard(view, slice) + event.dataTransfer.clearData() + event.dataTransfer.setData(brokenClipboardAPI ? "Text" : "text/html", dom.innerHTML) + // See https://github.com/ProseMirror/prosemirror/issues/1156 + event.dataTransfer.effectAllowed = "copyMove" + if (!brokenClipboardAPI) event.dataTransfer.setData("text/plain", text) + view.dragging = new Dragging(slice, !event[dragCopyModifier]) +} + +handlers.dragend = view => { + let dragging = view.dragging + window.setTimeout(() => { + if (view.dragging == dragging) view.dragging = null + }, 50) +} + +editHandlers.dragover = editHandlers.dragenter = (_, e) => e.preventDefault() + +editHandlers.drop = (view, _event) => { + let event = _event as DragEvent + let dragging = view.dragging + view.dragging = null + + if (!event.dataTransfer) return + + let eventPos = view.posAtCoords(eventCoords(event)) + if (!eventPos) return + let $mouse = view.state.doc.resolve(eventPos.pos) + let slice = dragging && dragging.slice + if (slice) { + view.someProp("transformPasted", f => { slice = f(slice!, view) }) + } else { + slice = parseFromClipboard(view, event.dataTransfer.getData(brokenClipboardAPI ? "Text" : "text/plain"), + brokenClipboardAPI ? null : event.dataTransfer.getData("text/html"), false, $mouse) + } + let move = !!(dragging && !event[dragCopyModifier]) + if (view.someProp("handleDrop", f => f(view, event, slice || Slice.empty, move))) { + event.preventDefault() + return + } + if (!slice) return + + event.preventDefault() + let insertPos = slice ? dropPoint(view.state.doc, $mouse.pos, slice) : $mouse.pos + if (insertPos == null) insertPos = $mouse.pos + + let tr = view.state.tr + if (move) tr.deleteSelection() + + let pos = tr.mapping.map(insertPos) + let isNode = slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1 + let beforeInsert = tr.doc + if (isNode) + tr.replaceRangeWith(pos, pos, slice.content.firstChild!) + else + tr.replaceRange(pos, pos, slice) + if (tr.doc.eq(beforeInsert)) return + + let $pos = tr.doc.resolve(pos) + if (isNode && NodeSelection.isSelectable(slice.content.firstChild!) && + $pos.nodeAfter && $pos.nodeAfter.sameMarkup(slice.content.firstChild!)) { + tr.setSelection(new NodeSelection($pos)) + } else { + let end = tr.mapping.map(insertPos) + // @ts-expect-error + tr.mapping.maps[tr.mapping.maps.length - 1].forEach((_from, _to, _newFrom, newTo) => end = newTo) + tr.setSelection(selectionBetween(view, $pos, tr.doc.resolve(end))) + } + view.focus() + view.dispatch(tr.setMeta("uiEvent", "drop")) +} + +handlers.focus = view => { + view.input.lastFocus = Date.now() + if (!view.focused) { + // $$FORK: We don't use a dom observer + // view.domObserver.stop() + view.dom.classList.add("ProseMirror-focused") + // $$FORK: We don't use a dom observer + // view.domObserver.start() + view.focused = true + setTimeout(() => { + // $$FORK: We don't use a dom observer + // if (view.docView && view.hasFocus() && !view.domObserver.currentSelection.eq(view.domSelectionRange())) + // TODO: what should happen here? + // if (view.docView && view.hasFocus()) + // selectionToDOM(view) + }, 20) + } +} + +handlers.blur = (view, _event) => { + let event = _event as FocusEvent + if (view.focused) { + // $$FORK: We don't use a dom observer + // view.domObserver.stop() + view.dom.classList.remove("ProseMirror-focused") + // view.domObserver.start() + // TODO: what should happen here? + // if (event.relatedTarget && view.dom.contains(event.relatedTarget as HTMLElement)) + // view.domObserver.currentSelection.clear() + view.focused = false + } +} + +handlers.beforeinput = (view, _event: Event) => { + let event = _event as InputEvent + // We should probably do more with beforeinput events, but support + // is so spotty that I'm still waiting to see where they are going. + + // Very specific hack to deal with backspace sometimes failing on + // Chrome Android when after an uneditable node. + if (browser.chrome && browser.android && event.inputType == "deleteContentBackward") { + // $$FORK: We don't use a dom observer + // view.domObserver.flushSoon() + let {domChangeCount} = view.input + setTimeout(() => { + if (view.input.domChangeCount != domChangeCount) return // Event already had some effect + // This bug tends to close the virtual keyboard, so we refocus + view.dom.blur() + view.focus() + if (view.someProp("handleKeyDown", f => f(view, keyEvent(8, "Backspace")))) return + let {$cursor} = view.state.selection as TextSelection + // Crude approximation of backspace behavior when no command handled it + if ($cursor && $cursor.pos > 0) view.dispatch(view.state.tr.delete($cursor.pos - 1, $cursor.pos).scrollIntoView()) + }, 50) + } +} + +// Make sure all handlers get registered +// @ts-expect-error +for (let prop in editHandlers) handlers[prop] = editHandlers[prop] diff --git a/src/prosemirror-internal/selection.ts b/src/prosemirror-internal/selection.ts new file mode 100644 index 00000000..dae0c845 --- /dev/null +++ b/src/prosemirror-internal/selection.ts @@ -0,0 +1,206 @@ +import {TextSelection, NodeSelection, Selection} from "prosemirror-state" +import {ResolvedPos} from "prosemirror-model" + +import * as browser from "./browser" +import {isEquivalentPosition, domIndex, isOnEdge, selectionCollapsed} from "./dom" +import {EditorViewInternal as EditorView} from "./EditorViewInternal.js" +import {NodeViewDesc} from "../descriptors/ViewDesc.js" + +export function selectionFromDOM(view: EditorView, origin: string | null = null) { + let domSel = view.domSelectionRange(), doc = view.state.doc + if (!domSel.focusNode) return null + let nearestDesc = view.docView.nearestDesc(domSel.focusNode), inWidget = nearestDesc && nearestDesc.size == 0 + let head = view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset, 1) + if (head < 0) return null + let $head = doc.resolve(head), $anchor, selection + if (selectionCollapsed(domSel)) { + $anchor = $head + while (nearestDesc && !nearestDesc.node) nearestDesc = nearestDesc.parent + let nearestDescNode = (nearestDesc as NodeViewDesc).node + if (nearestDesc && nearestDescNode.isAtom && NodeSelection.isSelectable(nearestDescNode) && nearestDesc.parent + && !(nearestDescNode.isInline && isOnEdge(domSel.focusNode, domSel.focusOffset, nearestDesc.dom))) { + let pos = nearestDesc.posBefore + selection = new NodeSelection(head == pos ? $head : doc.resolve(pos)) + } + } else { + let anchor = view.docView.posFromDOM(domSel.anchorNode!, domSel.anchorOffset, 1) + if (anchor < 0) return null + $anchor = doc.resolve(anchor) + } + + if (!selection) { + let bias = origin == "pointer" || (view.state.selection.head < $head.pos && !inWidget) ? 1 : -1 + selection = selectionBetween(view, $anchor, $head, bias) + } + return selection +} + +function editorOwnsSelection(view: EditorView) { + return view.editable ? view.hasFocus() : + hasSelection(view) && document.activeElement && document.activeElement.contains(view.dom) +} + +export function selectionToDOM(view: EditorView, force = false) { + let sel = view.state.selection + syncNodeSelection(view, sel) + + if (!editorOwnsSelection(view)) return + + // The delayed drag selection causes issues with Cell Selections + // in Safari. And the drag selection delay is to workarond issues + // which only present in Chrome. + if (!force && view.input.mouseDown && view.input.mouseDown.allowDefault && browser.chrome) { + let domSel = view.domSelectionRange(), curSel = view.domObserver.currentSelection + if (domSel.anchorNode && curSel.anchorNode && + isEquivalentPosition(domSel.anchorNode, domSel.anchorOffset, + curSel.anchorNode, curSel.anchorOffset)) { + view.input.mouseDown.delayedSelectionSync = true + view.domObserver.setCurSelection() + return + } + } + + view.domObserver.disconnectSelection() + + if (view.cursorWrapper) { + selectCursorWrapper(view) + } else { + let {anchor, head} = sel, resetEditableFrom, resetEditableTo + if (brokenSelectBetweenUneditable && !(sel instanceof TextSelection)) { + if (!sel.$from.parent.inlineContent) + resetEditableFrom = temporarilyEditableNear(view, sel.from) + if (!sel.empty && !sel.$from.parent.inlineContent) + resetEditableTo = temporarilyEditableNear(view, sel.to) + } + view.docView.setSelection(anchor, head, view.root, force) + if (brokenSelectBetweenUneditable) { + if (resetEditableFrom) resetEditable(resetEditableFrom) + if (resetEditableTo) resetEditable(resetEditableTo) + } + if (sel.visible) { + view.dom.classList.remove("ProseMirror-hideselection") + } else { + view.dom.classList.add("ProseMirror-hideselection") + if ("onselectionchange" in document) removeClassOnSelectionChange(view) + } + } + + view.domObserver.setCurSelection() + view.domObserver.connectSelection() +} + +// Kludge to work around Webkit not allowing a selection to start/end +// between non-editable block nodes. We briefly make something +// editable, set the selection, then set it uneditable again. + +const brokenSelectBetweenUneditable = browser.safari || browser.chrome && browser.chrome_version < 63 + +function temporarilyEditableNear(view: EditorView, pos: number) { + let {node, offset} = view.docView.domFromPos(pos, 0) + let after = offset < node.childNodes.length ? node.childNodes[offset] : null + let before = offset ? node.childNodes[offset - 1] : null + if (browser.safari && after && (after as HTMLElement).contentEditable == "false") return setEditable(after as HTMLElement) + if ((!after || (after as HTMLElement).contentEditable == "false") && + (!before || (before as HTMLElement).contentEditable == "false")) { + if (after) return setEditable(after as HTMLElement) + else if (before) return setEditable(before as HTMLElement) + } +} + +function setEditable(element: HTMLElement) { + element.contentEditable = "true" + if (browser.safari && element.draggable) { element.draggable = false; (element as any).wasDraggable = true } + return element +} + +function resetEditable(element: HTMLElement) { + element.contentEditable = "false" + if ((element as any).wasDraggable) { element.draggable = true; (element as any).wasDraggable = null } +} + +function removeClassOnSelectionChange(view: EditorView) { + let doc = view.dom.ownerDocument + doc.removeEventListener("selectionchange", view.input.hideSelectionGuard!) + let domSel = view.domSelectionRange() + let node = domSel.anchorNode, offset = domSel.anchorOffset + doc.addEventListener("selectionchange", view.input.hideSelectionGuard = () => { + if (domSel.anchorNode != node || domSel.anchorOffset != offset) { + doc.removeEventListener("selectionchange", view.input.hideSelectionGuard!) + setTimeout(() => { + if (!editorOwnsSelection(view) || view.state.selection.visible) + view.dom.classList.remove("ProseMirror-hideselection") + }, 20) + } + }) +} + +function selectCursorWrapper(view: EditorView) { + let domSel = view.domSelection(), range = document.createRange() + let node = view.cursorWrapper!.dom, img = node.nodeName == "IMG" + if (img) range.setEnd(node.parentNode!, domIndex(node) + 1) + else range.setEnd(node, 0) + range.collapse(false) + domSel.removeAllRanges() + domSel.addRange(range) + // Kludge to kill 'control selection' in IE11 when selecting an + // invisible cursor wrapper, since that would result in those weird + // resize handles and a selection that considers the absolutely + // positioned wrapper, rather than the root editable node, the + // focused element. + if (!img && !view.state.selection.visible && browser.ie && browser.ie_version <= 11) { + ;(node as any).disabled = true + ;(node as any).disabled = false + } +} + +export function syncNodeSelection(view: EditorView, sel: Selection) { + if (sel instanceof NodeSelection) { + let desc = view.docView.descAt(sel.from) + if (desc != view.lastSelectedViewDesc) { + clearNodeSelection(view) + if (desc) (desc as NodeViewDesc).selectNode() + view.lastSelectedViewDesc = desc + } + } else { + clearNodeSelection(view) + } +} + +// Clear all DOM statefulness of the last node selection. +function clearNodeSelection(view: EditorView) { + if (view.lastSelectedViewDesc) { + if (view.lastSelectedViewDesc.parent) + (view.lastSelectedViewDesc as NodeViewDesc).deselectNode() + view.lastSelectedViewDesc = undefined + } +} + +export function selectionBetween(view: EditorView, $anchor: ResolvedPos, $head: ResolvedPos, bias?: number) { + return view.someProp("createSelectionBetween", f => f(view, $anchor, $head)) + || TextSelection.between($anchor, $head, bias) +} + +export function hasFocusAndSelection(view: EditorView) { + if (view.editable && !view.hasFocus()) return false + return hasSelection(view) +} + +export function hasSelection(view: EditorView) { + let sel = view.domSelectionRange() + if (!sel.anchorNode) return false + try { + // Firefox will raise 'permission denied' errors when accessing + // properties of `sel.anchorNode` when it's in a generated CSS + // element. + return view.dom.contains(sel.anchorNode.nodeType == 3 ? sel.anchorNode.parentNode : sel.anchorNode) && + (view.editable || view.dom.contains(sel.focusNode!.nodeType == 3 ? sel.focusNode!.parentNode : sel.focusNode)) + } catch(_) { + return false + } +} + +export function anchorInRightPlace(view: EditorView) { + let anchorDOM = view.docView.domFromPos(view.state.selection.anchor, 0) + let domSel = view.domSelectionRange() + return isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode!, domSel.anchorOffset) +}