prosemirror-view
Version:
ProseMirror's view component
1,160 lines (1,156 loc) • 217 kB
JavaScript
import { TextSelection, NodeSelection, Selection, AllSelection } from 'prosemirror-state';
import { DOMSerializer, Fragment, Mark, Slice, DOMParser } from 'prosemirror-model';
import { dropPoint } from 'prosemirror-transform';
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);
const ie = !!(ie_upto10 || ie_11up || ie_edge);
const ie_version = ie_upto10 ? document.documentMode : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0;
const gecko = !ie && /gecko\/(\d+)/i.test(agent);
gecko && +(/Firefox\/(\d+)/.exec(agent) || [0, 0])[1];
const _chrome = !ie && /Chrome\/(\d+)/.exec(agent);
const chrome = !!_chrome;
const chrome_version = _chrome ? +_chrome[1] : 0;
const safari = !ie && !!nav && /Apple Computer/.test(nav.vendor);
// Is true for both iOS and iPadOS for convenience
const ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
const mac = ios || (nav ? /Mac/.test(nav.platform) : false);
const android = /Android \d/.test(agent);
const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [0, 0])[1] : 0;
const domIndex = function (node) {
for (var index = 0;; index++) {
node = node.previousSibling;
if (!node)
return index;
}
};
const parentNode = function (node) {
let parent = node.assignedSlot || node.parentNode;
return parent && parent.nodeType == 11 ? parent.host : parent;
};
let reusedRange = null;
// Note that this will always return the same range, because DOM range
// objects are every expensive, and keep slowing down subsequent DOM
// updates, for some reason.
const textRange = function (node, from, to) {
let range = reusedRange || (reusedRange = document.createRange());
range.setEnd(node, to == null ? node.nodeValue.length : to);
range.setStart(node, from || 0);
return range;
};
// Scans forward and backward through DOM positions equivalent to the
// given one to see if the two are in the same place (i.e. after a
// text node vs at the end of that text node)
const isEquivalentPosition = function (node, off, targetNode, targetOff) {
return targetNode && (scanFor(node, off, targetNode, targetOff, -1) ||
scanFor(node, off, targetNode, targetOff, 1));
};
const atomElements = /^(img|br|input|textarea|hr)$/i;
function scanFor(node, off, targetNode, targetOff, dir) {
for (;;) {
if (node == targetNode && off == targetOff)
return true;
if (off == (dir < 0 ? 0 : nodeSize(node))) {
let parent = node.parentNode;
if (!parent || parent.nodeType != 1 || hasBlockDesc(node) || atomElements.test(node.nodeName) ||
node.contentEditable == "false")
return false;
off = domIndex(node) + (dir < 0 ? 0 : 1);
node = parent;
}
else if (node.nodeType == 1) {
node = node.childNodes[off + (dir < 0 ? -1 : 0)];
if (node.contentEditable == "false")
return false;
off = dir < 0 ? nodeSize(node) : 0;
}
else {
return false;
}
}
}
function nodeSize(node) {
return node.nodeType == 3 ? node.nodeValue.length : node.childNodes.length;
}
function isOnEdge(node, offset, parent) {
for (let atStart = offset == 0, atEnd = offset == nodeSize(node); atStart || atEnd;) {
if (node == parent)
return true;
let index = domIndex(node);
node = node.parentNode;
if (!node)
return false;
atStart = atStart && index == 0;
atEnd = atEnd && index == nodeSize(node);
}
}
function hasBlockDesc(dom) {
let desc;
for (let cur = dom; cur; cur = cur.parentNode)
if (desc = cur.pmViewDesc)
break;
return desc && desc.node && desc.node.isBlock && (desc.dom == dom || desc.contentDOM == dom);
}
// Work around Chrome issue https://bugs.chromium.org/p/chromium/issues/detail?id=447523
// (isCollapsed inappropriately returns true in shadow dom)
const selectionCollapsed = function (domSel) {
let collapsed = domSel.isCollapsed;
if (collapsed && chrome && domSel.rangeCount && !domSel.getRangeAt(0).collapsed)
collapsed = false;
return collapsed;
};
function keyEvent(keyCode, key) {
let event = document.createEvent("Event");
event.initEvent("keydown", true, true);
event.keyCode = keyCode;
event.key = event.code = key;
return event;
}
function windowRect(doc) {
return { left: 0, right: doc.documentElement.clientWidth,
top: 0, bottom: doc.documentElement.clientHeight };
}
function getSide(value, side) {
return typeof value == "number" ? value : value[side];
}
function clientRect(node) {
let rect = node.getBoundingClientRect();
// Adjust for elements with style "transform: scale()"
let scaleX = (rect.width / node.offsetWidth) || 1;
let scaleY = (rect.height / node.offsetHeight) || 1;
// Make sure scrollbar width isn't included in the rectangle
return { left: rect.left, right: rect.left + node.clientWidth * scaleX,
top: rect.top, bottom: rect.top + node.clientHeight * scaleY };
}
function scrollRectIntoView(view, rect, startDOM) {
let scrollThreshold = view.someProp("scrollThreshold") || 0, scrollMargin = view.someProp("scrollMargin") || 5;
let doc = view.dom.ownerDocument;
for (let parent = startDOM || view.dom;; parent = parentNode(parent)) {
if (!parent)
break;
if (parent.nodeType != 1)
continue;
let elt = parent;
let atTop = elt == doc.body;
let bounding = atTop ? windowRect(doc) : clientRect(elt);
let moveX = 0, moveY = 0;
if (rect.top < bounding.top + getSide(scrollThreshold, "top"))
moveY = -(bounding.top - rect.top + getSide(scrollMargin, "top"));
else if (rect.bottom > bounding.bottom - getSide(scrollThreshold, "bottom"))
moveY = rect.bottom - bounding.bottom + getSide(scrollMargin, "bottom");
if (rect.left < bounding.left + getSide(scrollThreshold, "left"))
moveX = -(bounding.left - rect.left + getSide(scrollMargin, "left"));
else if (rect.right > bounding.right - getSide(scrollThreshold, "right"))
moveX = rect.right - bounding.right + getSide(scrollMargin, "right");
if (moveX || moveY) {
if (atTop) {
doc.defaultView.scrollBy(moveX, moveY);
}
else {
let startX = elt.scrollLeft, startY = elt.scrollTop;
if (moveY)
elt.scrollTop += moveY;
if (moveX)
elt.scrollLeft += moveX;
let dX = elt.scrollLeft - startX, dY = elt.scrollTop - startY;
rect = { left: rect.left - dX, top: rect.top - dY, right: rect.right - dX, bottom: rect.bottom - dY };
}
}
if (atTop)
break;
}
}
// Store the scroll position of the editor's parent nodes, along with
// the top position of an element near the top of the editor, which
// will be used to make sure the visible viewport remains stable even
// when the size of the content above changes.
function storeScrollPos(view) {
let rect = view.dom.getBoundingClientRect(), startY = Math.max(0, rect.top);
let refDOM, refTop;
for (let x = (rect.left + rect.right) / 2, y = startY + 1; y < Math.min(innerHeight, rect.bottom); y += 5) {
let dom = view.root.elementFromPoint(x, y);
if (!dom || dom == view.dom || !view.dom.contains(dom))
continue;
let localRect = dom.getBoundingClientRect();
if (localRect.top >= startY - 20) {
refDOM = dom;
refTop = localRect.top;
break;
}
}
return { refDOM: refDOM, refTop: refTop, stack: scrollStack(view.dom) };
}
function scrollStack(dom) {
let stack = [], doc = dom.ownerDocument;
for (let cur = dom; cur; cur = parentNode(cur)) {
stack.push({ dom: cur, top: cur.scrollTop, left: cur.scrollLeft });
if (dom == doc)
break;
}
return stack;
}
// Reset the scroll position of the editor's parent nodes to that what
// it was before, when storeScrollPos was called.
function resetScrollPos({ refDOM, refTop, stack }) {
let newRefTop = refDOM ? refDOM.getBoundingClientRect().top : 0;
restoreScrollStack(stack, newRefTop == 0 ? 0 : newRefTop - refTop);
}
function restoreScrollStack(stack, dTop) {
for (let i = 0; i < stack.length; i++) {
let { dom, top, left } = stack[i];
if (dom.scrollTop != top + dTop)
dom.scrollTop = top + dTop;
if (dom.scrollLeft != left)
dom.scrollLeft = left;
}
}
let preventScrollSupported = null;
// Feature-detects support for .focus({preventScroll: true}), and uses
// a fallback kludge when not supported.
function focusPreventScroll(dom) {
if (dom.setActive)
return dom.setActive(); // in IE
if (preventScrollSupported)
return dom.focus(preventScrollSupported);
let stored = scrollStack(dom);
dom.focus(preventScrollSupported == null ? {
get preventScroll() {
preventScrollSupported = { preventScroll: true };
return true;
}
} : undefined);
if (!preventScrollSupported) {
preventScrollSupported = false;
restoreScrollStack(stored, 0);
}
}
function findOffsetInNode(node, coords) {
let closest, dxClosest = 2e8, coordsClosest, offset = 0;
let rowBot = coords.top, rowTop = coords.top;
for (let child = node.firstChild, childIndex = 0; child; child = child.nextSibling, childIndex++) {
let rects;
if (child.nodeType == 1)
rects = child.getClientRects();
else if (child.nodeType == 3)
rects = textRange(child).getClientRects();
else
continue;
for (let i = 0; i < rects.length; i++) {
let rect = rects[i];
if (rect.top <= rowBot && rect.bottom >= rowTop) {
rowBot = Math.max(rect.bottom, rowBot);
rowTop = Math.min(rect.top, rowTop);
let dx = rect.left > coords.left ? rect.left - coords.left
: rect.right < coords.left ? coords.left - rect.right : 0;
if (dx < dxClosest) {
closest = child;
dxClosest = dx;
coordsClosest = dx && closest.nodeType == 3 ? {
left: rect.right < coords.left ? rect.right : rect.left,
top: coords.top
} : coords;
if (child.nodeType == 1 && dx)
offset = childIndex + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0);
continue;
}
}
if (!closest && (coords.left >= rect.right && coords.top >= rect.top ||
coords.left >= rect.left && coords.top >= rect.bottom))
offset = childIndex + 1;
}
}
if (closest && closest.nodeType == 3)
return findOffsetInText(closest, coordsClosest);
if (!closest || (dxClosest && closest.nodeType == 1))
return { node, offset };
return findOffsetInNode(closest, coordsClosest);
}
function findOffsetInText(node, coords) {
let len = node.nodeValue.length;
let range = document.createRange();
for (let i = 0; i < len; i++) {
range.setEnd(node, i + 1);
range.setStart(node, i);
let rect = singleRect(range, 1);
if (rect.top == rect.bottom)
continue;
if (inRect(coords, rect))
return { node, offset: i + (coords.left >= (rect.left + rect.right) / 2 ? 1 : 0) };
}
return { node, offset: 0 };
}
function inRect(coords, rect) {
return coords.left >= rect.left - 1 && coords.left <= rect.right + 1 &&
coords.top >= rect.top - 1 && coords.top <= rect.bottom + 1;
}
function targetKludge(dom, coords) {
let parent = dom.parentNode;
if (parent && /^li$/i.test(parent.nodeName) && coords.left < dom.getBoundingClientRect().left)
return parent;
return dom;
}
function posFromElement(view, elt, coords) {
let { node, offset } = findOffsetInNode(elt, coords), bias = -1;
if (node.nodeType == 1 && !node.firstChild) {
let rect = node.getBoundingClientRect();
bias = rect.left != rect.right && coords.left > (rect.left + rect.right) / 2 ? 1 : -1;
}
return view.docView.posFromDOM(node, offset, bias);
}
function posFromCaret(view, node, offset, coords) {
// Browser (in caretPosition/RangeFromPoint) will agressively
// normalize towards nearby inline nodes. Since we are interested in
// positions between block nodes too, we first walk up the hierarchy
// of nodes to see if there are block nodes that the coordinates
// fall outside of. If so, we take the position before/after that
// block. If not, we call `posFromDOM` on the raw node/offset.
let outside = -1;
for (let cur = node;;) {
if (cur == view.dom)
break;
let desc = view.docView.nearestDesc(cur, true);
if (!desc)
return null;
if (desc.node.isBlock && desc.parent) {
let rect = desc.dom.getBoundingClientRect();
if (rect.left > coords.left || rect.top > coords.top)
outside = desc.posBefore;
else if (rect.right < coords.left || rect.bottom < coords.top)
outside = desc.posAfter;
else
break;
}
cur = desc.dom.parentNode;
}
return outside > -1 ? outside : view.docView.posFromDOM(node, offset, 1);
}
function elementFromPoint(element, coords, box) {
let len = element.childNodes.length;
if (len && box.top < box.bottom) {
for (let startI = Math.max(0, Math.min(len - 1, Math.floor(len * (coords.top - box.top) / (box.bottom - box.top)) - 2)), i = startI;;) {
let child = element.childNodes[i];
if (child.nodeType == 1) {
let rects = child.getClientRects();
for (let j = 0; j < rects.length; j++) {
let rect = rects[j];
if (inRect(coords, rect))
return elementFromPoint(child, coords, rect);
}
}
if ((i = (i + 1) % len) == startI)
break;
}
}
return element;
}
// Given an x,y position on the editor, get the position in the document.
function posAtCoords(view, coords) {
let doc = view.dom.ownerDocument, node, offset = 0;
if (doc.caretPositionFromPoint) {
try { // Firefox throws for this call in hard-to-predict circumstances (#994)
let pos = doc.caretPositionFromPoint(coords.left, coords.top);
if (pos)
({ offsetNode: node, offset } = pos);
}
catch (_) { }
}
if (!node && doc.caretRangeFromPoint) {
let range = doc.caretRangeFromPoint(coords.left, coords.top);
if (range)
({ startContainer: node, startOffset: offset } = range);
}
let elt = (view.root.elementFromPoint ? view.root : doc)
.elementFromPoint(coords.left, coords.top);
let pos;
if (!elt || !view.dom.contains(elt.nodeType != 1 ? elt.parentNode : elt)) {
let box = view.dom.getBoundingClientRect();
if (!inRect(coords, box))
return null;
elt = elementFromPoint(view.dom, coords, box);
if (!elt)
return null;
}
// Safari's caretRangeFromPoint returns nonsense when on a draggable element
if (safari) {
for (let p = elt; node && p; p = parentNode(p))
if (p.draggable)
node = undefined;
}
elt = targetKludge(elt, coords);
if (node) {
if (gecko && node.nodeType == 1) {
// Firefox will sometimes return offsets into <input> nodes, which
// have no actual children, from caretPositionFromPoint (#953)
offset = Math.min(offset, node.childNodes.length);
// It'll also move the returned position before image nodes,
// even if those are behind it.
if (offset < node.childNodes.length) {
let next = node.childNodes[offset], box;
if (next.nodeName == "IMG" && (box = next.getBoundingClientRect()).right <= coords.left &&
box.bottom > coords.top)
offset++;
}
}
// Suspiciously specific kludge to work around caret*FromPoint
// never returning a position at the end of the document
if (node == view.dom && offset == node.childNodes.length - 1 && node.lastChild.nodeType == 1 &&
coords.top > node.lastChild.getBoundingClientRect().bottom)
pos = view.state.doc.content.size;
// Ignore positions directly after a BR, since caret*FromPoint
// 'round up' positions that would be more accurately placed
// before the BR node.
else if (offset == 0 || node.nodeType != 1 || node.childNodes[offset - 1].nodeName != "BR")
pos = posFromCaret(view, node, offset, coords);
}
if (pos == null)
pos = posFromElement(view, elt, coords);
let desc = view.docView.nearestDesc(elt, true);
return { pos, inside: desc ? desc.posAtStart - desc.border : -1 };
}
function singleRect(target, bias) {
let rects = target.getClientRects();
return !rects.length ? target.getBoundingClientRect() : rects[bias < 0 ? 0 : rects.length - 1];
}
const BIDI = /[\u0590-\u05f4\u0600-\u06ff\u0700-\u08ac]/;
// Given a position in the document model, get a bounding box of the
// character at that position, relative to the window.
function coordsAtPos(view, pos, side) {
let { node, offset, atom } = view.docView.domFromPos(pos, side < 0 ? -1 : 1);
let supportEmptyRange = webkit || gecko;
if (node.nodeType == 3) {
// These browsers support querying empty text ranges. Prefer that in
// bidi context or when at the end of a node.
if (supportEmptyRange && (BIDI.test(node.nodeValue) || (side < 0 ? !offset : offset == node.nodeValue.length))) {
let rect = singleRect(textRange(node, offset, offset), side);
// Firefox returns bad results (the position before the space)
// when querying a position directly after line-broken
// whitespace. Detect this situation and and kludge around it
if (gecko && offset && /\s/.test(node.nodeValue[offset - 1]) && offset < node.nodeValue.length) {
let rectBefore = singleRect(textRange(node, offset - 1, offset - 1), -1);
if (rectBefore.top == rect.top) {
let rectAfter = singleRect(textRange(node, offset, offset + 1), -1);
if (rectAfter.top != rect.top)
return flattenV(rectAfter, rectAfter.left < rectBefore.left);
}
}
return rect;
}
else {
let from = offset, to = offset, takeSide = side < 0 ? 1 : -1;
if (side < 0 && !offset) {
to++;
takeSide = -1;
}
else if (side >= 0 && offset == node.nodeValue.length) {
from--;
takeSide = 1;
}
else if (side < 0) {
from--;
}
else {
to++;
}
return flattenV(singleRect(textRange(node, from, to), takeSide), takeSide < 0);
}
}
let $dom = view.state.doc.resolve(pos - (atom || 0));
// Return a horizontal line in block context
if (!$dom.parent.inlineContent) {
if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
let before = node.childNodes[offset - 1];
if (before.nodeType == 1)
return flattenH(before.getBoundingClientRect(), false);
}
if (atom == null && offset < nodeSize(node)) {
let after = node.childNodes[offset];
if (after.nodeType == 1)
return flattenH(after.getBoundingClientRect(), true);
}
return flattenH(node.getBoundingClientRect(), side >= 0);
}
// Inline, not in text node (this is not Bidi-safe)
if (atom == null && offset && (side < 0 || offset == nodeSize(node))) {
let before = node.childNodes[offset - 1];
let target = before.nodeType == 3 ? textRange(before, nodeSize(before) - (supportEmptyRange ? 0 : 1))
// BR nodes tend to only return the rectangle before them.
// Only use them if they are the last element in their parent
: before.nodeType == 1 && (before.nodeName != "BR" || !before.nextSibling) ? before : null;
if (target)
return flattenV(singleRect(target, 1), false);
}
if (atom == null && offset < nodeSize(node)) {
let after = node.childNodes[offset];
while (after.pmViewDesc && after.pmViewDesc.ignoreForCoords)
after = after.nextSibling;
let target = !after ? null : after.nodeType == 3 ? textRange(after, 0, (supportEmptyRange ? 0 : 1))
: after.nodeType == 1 ? after : null;
if (target)
return flattenV(singleRect(target, -1), true);
}
// All else failed, just try to get a rectangle for the target node
return flattenV(singleRect(node.nodeType == 3 ? textRange(node) : node, -side), side >= 0);
}
function flattenV(rect, left) {
if (rect.width == 0)
return rect;
let x = left ? rect.left : rect.right;
return { top: rect.top, bottom: rect.bottom, left: x, right: x };
}
function flattenH(rect, top) {
if (rect.height == 0)
return rect;
let y = top ? rect.top : rect.bottom;
return { top: y, bottom: y, left: rect.left, right: rect.right };
}
function withFlushedState(view, state, f) {
let viewState = view.state, active = view.root.activeElement;
if (viewState != state)
view.updateState(state);
if (active != view.dom)
view.focus();
try {
return f();
}
finally {
if (viewState != state)
view.updateState(viewState);
if (active != view.dom && active)
active.focus();
}
}
// Whether vertical position motion in a given direction
// from a position would leave a text block.
function endOfTextblockVertical(view, state, dir) {
let sel = state.selection;
let $pos = dir == "up" ? sel.$from : sel.$to;
return withFlushedState(view, state, () => {
let { node: dom } = view.docView.domFromPos($pos.pos, dir == "up" ? -1 : 1);
for (;;) {
let nearest = view.docView.nearestDesc(dom, true);
if (!nearest)
break;
if (nearest.node.isBlock) {
dom = nearest.dom;
break;
}
dom = nearest.dom.parentNode;
}
let coords = coordsAtPos(view, $pos.pos, 1);
for (let child = dom.firstChild; child; child = child.nextSibling) {
let boxes;
if (child.nodeType == 1)
boxes = child.getClientRects();
else if (child.nodeType == 3)
boxes = textRange(child, 0, child.nodeValue.length).getClientRects();
else
continue;
for (let i = 0; i < boxes.length; i++) {
let box = boxes[i];
if (box.bottom > box.top + 1 &&
(dir == "up" ? coords.top - box.top > (box.bottom - coords.top) * 2
: box.bottom - coords.bottom > (coords.bottom - box.top) * 2))
return false;
}
}
return true;
});
}
const maybeRTL = /[\u0590-\u08ac]/;
function endOfTextblockHorizontal(view, state, dir) {
let { $head } = state.selection;
if (!$head.parent.isTextblock)
return false;
let offset = $head.parentOffset, atStart = !offset, atEnd = offset == $head.parent.content.size;
let sel = view.domSelection();
// If the textblock is all LTR, or the browser doesn't support
// Selection.modify (Edge), fall back to a primitive approach
if (!maybeRTL.test($head.parent.textContent) || !sel.modify)
return dir == "left" || dir == "backward" ? atStart : atEnd;
return withFlushedState(view, state, () => {
// This is a huge hack, but appears to be the best we can
// currently do: use `Selection.modify` to move the selection by
// one character, and see if that moves the cursor out of the
// textblock (or doesn't move it at all, when at the start/end of
// the document).
let oldRange = sel.getRangeAt(0), oldNode = sel.focusNode, oldOff = sel.focusOffset;
let oldBidiLevel = sel.caretBidiLevel // Only for Firefox
;
sel.modify("move", dir, "character");
let parentDOM = $head.depth ? view.docView.domAfterPos($head.before()) : view.dom;
let result = !parentDOM.contains(sel.focusNode.nodeType == 1 ? sel.focusNode : sel.focusNode.parentNode) ||
(oldNode == sel.focusNode && oldOff == sel.focusOffset);
// Restore the previous selection
sel.removeAllRanges();
sel.addRange(oldRange);
if (oldBidiLevel != null)
sel.caretBidiLevel = oldBidiLevel;
return result;
});
}
let cachedState = null;
let cachedDir = null;
let cachedResult = false;
function endOfTextblock(view, state, dir) {
if (cachedState == state && cachedDir == dir)
return cachedResult;
cachedState = state;
cachedDir = dir;
return cachedResult = dir == "up" || dir == "down"
? endOfTextblockVertical(view, state, dir)
: endOfTextblockHorizontal(view, state, dir);
}
// View descriptions are data structures that describe the DOM that is
// used to represent the editor's content. They are used for:
//
// - Incremental redrawing when the document changes
//
// - Figuring out what part of the document a given DOM position
// corresponds to
//
// - Wiring in custom implementations of the editing interface for a
// given node
//
// They form a doubly-linked mutable tree, starting at `view.docView`.
const NOT_DIRTY = 0, CHILD_DIRTY = 1, CONTENT_DIRTY = 2, NODE_DIRTY = 3;
// Superclass for the various kinds of descriptions. Defines their
// basic structure and shared methods.
class ViewDesc {
constructor(parent, children, dom,
// This is the node that holds the child views. It may be null for
// descs that don't have children.
contentDOM) {
this.parent = parent;
this.children = children;
this.dom = dom;
this.contentDOM = contentDOM;
this.dirty = NOT_DIRTY;
// An expando property on the DOM node provides a link back to its
// description.
dom.pmViewDesc = this;
}
// Used to check whether a given description corresponds to a
// widget/mark/node.
matchesWidget(widget) { return false; }
matchesMark(mark) { return false; }
matchesNode(node, outerDeco, innerDeco) { return false; }
matchesHack(nodeName) { return false; }
// When parsing in-editor content (in domchange.js), we allow
// descriptions to determine the parse rules that should be used to
// parse them.
parseRule() { return null; }
// Used by the editor's event handler to ignore events that come
// from certain descs.
stopEvent(event) { return false; }
// The size of the content represented by this desc.
get size() {
let size = 0;
for (let i = 0; i < this.children.length; i++)
size += this.children[i].size;
return size;
}
// For block nodes, this represents the space taken up by their
// start/end tokens.
get border() { return 0; }
destroy() {
this.parent = undefined;
if (this.dom.pmViewDesc == this)
this.dom.pmViewDesc = undefined;
for (let i = 0; i < this.children.length; i++)
this.children[i].destroy();
}
posBeforeChild(child) {
for (let i = 0, pos = this.posAtStart;; i++) {
let cur = this.children[i];
if (cur == child)
return pos;
pos += cur.size;
}
}
get posBefore() {
return this.parent.posBeforeChild(this);
}
get posAtStart() {
return this.parent ? this.parent.posBeforeChild(this) + this.border : 0;
}
get posAfter() {
return this.posBefore + this.size;
}
get posAtEnd() {
return this.posAtStart + this.size - 2 * this.border;
}
localPosFromDOM(dom, offset, bias) {
// If the DOM position is in the content, use the child desc after
// it to figure out a position.
if (this.contentDOM && this.contentDOM.contains(dom.nodeType == 1 ? dom : dom.parentNode)) {
if (bias < 0) {
let domBefore, desc;
if (dom == this.contentDOM) {
domBefore = dom.childNodes[offset - 1];
}
else {
while (dom.parentNode != this.contentDOM)
dom = dom.parentNode;
domBefore = dom.previousSibling;
}
while (domBefore && !((desc = domBefore.pmViewDesc) && desc.parent == this))
domBefore = domBefore.previousSibling;
return domBefore ? this.posBeforeChild(desc) + desc.size : this.posAtStart;
}
else {
let domAfter, desc;
if (dom == this.contentDOM) {
domAfter = dom.childNodes[offset];
}
else {
while (dom.parentNode != this.contentDOM)
dom = dom.parentNode;
domAfter = dom.nextSibling;
}
while (domAfter && !((desc = domAfter.pmViewDesc) && desc.parent == this))
domAfter = domAfter.nextSibling;
return domAfter ? this.posBeforeChild(desc) : this.posAtEnd;
}
}
// Otherwise, use various heuristics, falling back on the bias
// parameter, to determine whether to return the position at the
// start or at the end of this view desc.
let atEnd;
if (dom == this.dom && this.contentDOM) {
atEnd = offset > domIndex(this.contentDOM);
}
else if (this.contentDOM && this.contentDOM != this.dom && this.dom.contains(this.contentDOM)) {
atEnd = dom.compareDocumentPosition(this.contentDOM) & 2;
}
else if (this.dom.firstChild) {
if (offset == 0)
for (let search = dom;; search = search.parentNode) {
if (search == this.dom) {
atEnd = false;
break;
}
if (search.previousSibling)
break;
}
if (atEnd == null && offset == dom.childNodes.length)
for (let search = dom;; search = search.parentNode) {
if (search == this.dom) {
atEnd = true;
break;
}
if (search.nextSibling)
break;
}
}
return (atEnd == null ? bias > 0 : atEnd) ? this.posAtEnd : this.posAtStart;
}
// Scan up the dom finding the first desc that is a descendant of
// this one.
nearestDesc(dom, onlyNodes = false) {
for (let first = true, cur = dom; cur; cur = cur.parentNode) {
let desc = this.getDesc(cur), nodeDOM;
if (desc && (!onlyNodes || desc.node)) {
// If dom is outside of this desc's nodeDOM, don't count it.
if (first && (nodeDOM = desc.nodeDOM) &&
!(nodeDOM.nodeType == 1 ? nodeDOM.contains(dom.nodeType == 1 ? dom : dom.parentNode) : nodeDOM == dom))
first = false;
else
return desc;
}
}
}
getDesc(dom) {
let desc = dom.pmViewDesc;
for (let cur = desc; cur; cur = cur.parent)
if (cur == this)
return desc;
}
posFromDOM(dom, offset, bias) {
for (let scan = dom; scan; scan = scan.parentNode) {
let desc = this.getDesc(scan);
if (desc)
return desc.localPosFromDOM(dom, offset, bias);
}
return -1;
}
// Find the desc for the node after the given pos, if any. (When a
// parent node overrode rendering, there might not be one.)
descAt(pos) {
for (let i = 0, offset = 0; i < this.children.length; i++) {
let child = this.children[i], end = offset + child.size;
if (offset == pos && end != offset) {
while (!child.border && child.children.length)
child = child.children[0];
return child;
}
if (pos < end)
return child.descAt(pos - offset - child.border);
offset = end;
}
}
domFromPos(pos, side) {
if (!this.contentDOM)
return { node: this.dom, offset: 0, atom: pos + 1 };
// First find the position in the child array
let i = 0, offset = 0;
for (let curPos = 0; i < this.children.length; i++) {
let child = this.children[i], end = curPos + child.size;
if (end > pos || child instanceof TrailingHackViewDesc) {
offset = pos - curPos;
break;
}
curPos = end;
}
// If this points into the middle of a child, call through
if (offset)
return this.children[i].domFromPos(offset - this.children[i].border, side);
// Go back if there were any zero-length widgets with side >= 0 before this point
for (let prev; i && !(prev = this.children[i - 1]).size && prev instanceof WidgetViewDesc && prev.side >= 0; i--) { }
// Scan towards the first useable node
if (side <= 0) {
let prev, enter = true;
for (;; i--, enter = false) {
prev = i ? this.children[i - 1] : null;
if (!prev || prev.dom.parentNode == this.contentDOM)
break;
}
if (prev && side && enter && !prev.border && !prev.domAtom)
return prev.domFromPos(prev.size, side);
return { node: this.contentDOM, offset: prev ? domIndex(prev.dom) + 1 : 0 };
}
else {
let next, enter = true;
for (;; i++, enter = false) {
next = i < this.children.length ? this.children[i] : null;
if (!next || next.dom.parentNode == this.contentDOM)
break;
}
if (next && enter && !next.border && !next.domAtom)
return next.domFromPos(0, side);
return { node: this.contentDOM, offset: next ? domIndex(next.dom) : this.contentDOM.childNodes.length };
}
}
// Used to find a DOM range in a single parent for a given changed
// range.
parseRange(from, to, base = 0) {
if (this.children.length == 0)
return { node: this.contentDOM, from, to, fromOffset: 0, toOffset: this.contentDOM.childNodes.length };
let fromOffset = -1, toOffset = -1;
for (let offset = base, i = 0;; i++) {
let child = this.children[i], end = offset + child.size;
if (fromOffset == -1 && from <= end) {
let childBase = offset + child.border;
// FIXME maybe descend mark views to parse a narrower range?
if (from >= childBase && to <= end - child.border && child.node &&
child.contentDOM && this.contentDOM.contains(child.contentDOM))
return child.parseRange(from, to, childBase);
from = offset;
for (let j = i; j > 0; j--) {
let prev = this.children[j - 1];
if (prev.size && prev.dom.parentNode == this.contentDOM && !prev.emptyChildAt(1)) {
fromOffset = domIndex(prev.dom) + 1;
break;
}
from -= prev.size;
}
if (fromOffset == -1)
fromOffset = 0;
}
if (fromOffset > -1 && (end > to || i == this.children.length - 1)) {
to = end;
for (let j = i + 1; j < this.children.length; j++) {
let next = this.children[j];
if (next.size && next.dom.parentNode == this.contentDOM && !next.emptyChildAt(-1)) {
toOffset = domIndex(next.dom);
break;
}
to += next.size;
}
if (toOffset == -1)
toOffset = this.contentDOM.childNodes.length;
break;
}
offset = end;
}
return { node: this.contentDOM, from, to, fromOffset, toOffset };
}
emptyChildAt(side) {
if (this.border || !this.contentDOM || !this.children.length)
return false;
let child = this.children[side < 0 ? 0 : this.children.length - 1];
return child.size == 0 || child.emptyChildAt(side);
}
domAfterPos(pos) {
let { node, offset } = this.domFromPos(pos, 0);
if (node.nodeType != 1 || offset == node.childNodes.length)
throw new RangeError("No node after pos " + pos);
return node.childNodes[offset];
}
// View descs are responsible for setting any selection that falls
// entirely inside of them, so that custom implementations can do
// custom things with the selection. Note that this falls apart when
// a selection starts in such a node and ends in another, in which
// case we just use whatever domFromPos produces as a best effort.
setSelection(anchor, head, root, force = false) {
// If the selection falls entirely in a child, give it to that child
let from = Math.min(anchor, head), to = Math.max(anchor, head);
for (let i = 0, offset = 0; i < this.children.length; i++) {
let child = this.children[i], end = offset + child.size;
if (from > offset && to < end)
return child.setSelection(anchor - offset - child.border, head - offset - child.border, root, force);
offset = end;
}
let anchorDOM = this.domFromPos(anchor, anchor ? -1 : 1);
let headDOM = head == anchor ? anchorDOM : this.domFromPos(head, head ? -1 : 1);
let domSel = root.getSelection();
let brKludge = false;
// On Firefox, using Selection.collapse to put the cursor after a
// BR node for some reason doesn't always work (#1073). On Safari,
// the cursor sometimes inexplicable visually lags behind its
// reported position in such situations (#1092).
if ((gecko || safari) && anchor == head) {
let { node, offset } = anchorDOM;
if (node.nodeType == 3) {
brKludge = !!(offset && node.nodeValue[offset - 1] == "\n");
// Issue #1128
if (brKludge && offset == node.nodeValue.length) {
for (let scan = node, after; scan; scan = scan.parentNode) {
if (after = scan.nextSibling) {
if (after.nodeName == "BR")
anchorDOM = headDOM = { node: after.parentNode, offset: domIndex(after) + 1 };
break;
}
let desc = scan.pmViewDesc;
if (desc && desc.node && desc.node.isBlock)
break;
}
}
}
else {
let prev = node.childNodes[offset - 1];
brKludge = prev && (prev.nodeName == "BR" || prev.contentEditable == "false");
}
}
// Firefox can act strangely when the selection is in front of an
// uneditable node. See #1163 and https://bugzilla.mozilla.org/show_bug.cgi?id=1709536
if (gecko && domSel.focusNode && domSel.focusNode != headDOM.node && domSel.focusNode.nodeType == 1) {
let after = domSel.focusNode.childNodes[domSel.focusOffset];
if (after && after.contentEditable == "false")
force = true;
}
if (!(force || brKludge && safari) &&
isEquivalentPosition(anchorDOM.node, anchorDOM.offset, domSel.anchorNode, domSel.anchorOffset) &&
isEquivalentPosition(headDOM.node, headDOM.offset, domSel.focusNode, domSel.focusOffset))
return;
// Selection.extend can be used to create an 'inverted' selection
// (one where the focus is before the anchor), but not all
// browsers support it yet.
let domSelExtended = false;
if ((domSel.extend || anchor == head) && !brKludge) {
domSel.collapse(anchorDOM.node, anchorDOM.offset);
try {
if (anchor != head)
domSel.extend(headDOM.node, headDOM.offset);
domSelExtended = true;
}
catch (err) {
// In some cases with Chrome the selection is empty after calling
// collapse, even when it should be valid. This appears to be a bug, but
// it is difficult to isolate. If this happens fallback to the old path
// without using extend.
if (!(err instanceof DOMException))
throw err;
// declare global: DOMException
}
}
if (!domSelExtended) {
if (anchor > head) {
let tmp = anchorDOM;
anchorDOM = headDOM;
headDOM = tmp;
}
let range = document.createRange();
range.setEnd(headDOM.node, headDOM.offset);
range.setStart(anchorDOM.node, anchorDOM.offset);
domSel.removeAllRanges();
domSel.addRange(range);
}
}
ignoreMutation(mutation) {
return !this.contentDOM && mutation.type != "selection";
}
get contentLost() {
return this.contentDOM && this.contentDOM != this.dom && !this.dom.contains(this.contentDOM);
}
// Remove a subtree of the element tree that has been touched
// by a DOM change, so that the next update will redraw it.
markDirty(from, to) {
for (let offset = 0, i = 0; i < this.children.length; i++) {
let child = this.children[i], end = offset + child.size;
if (offset == end ? from <= end && to >= offset : from < end && to > offset) {
let startInside = offset + child.border, endInside = end - child.border;
if (from >= startInside && to <= endInside) {
this.dirty = from == offset || to == end ? CONTENT_DIRTY : CHILD_DIRTY;
if (from == startInside && to == endInside &&
(child.contentLost || child.dom.parentNode != this.contentDOM))
child.dirty = NODE_DIRTY;
else
child.markDirty(from - startInside, to - startInside);
return;
}
else {
child.dirty = child.dom == child.contentDOM && child.dom.parentNode == this.contentDOM && !child.children.length
? CONTENT_DIRTY : NODE_DIRTY;
}
}
offset = end;
}
this.dirty = CONTENT_DIRTY;
}
markParentsDirty() {
let level = 1;
for (let node = this.parent; node; node = node.parent, level++) {
let dirty = level == 1 ? CONTENT_DIRTY : CHILD_DIRTY;
if (node.dirty < dirty)
node.dirty = dirty;
}
}
get domAtom() { return false; }
get ignoreForCoords() { return false; }
}
// A widget desc represents a widget decoration, which is a DOM node
// drawn between the document nodes.
class WidgetViewDesc extends ViewDesc {
constructor(parent, widget, view, pos) {
let self, dom = widget.type.toDOM;
if (typeof dom == "function")
dom = dom(view, () => {
if (!self)
return pos;
if (self.parent)
return self.parent.posBeforeChild(self);
});
if (!widget.type.spec.raw) {
if (dom.nodeType != 1) {
let wrap = document.createElement("span");
wrap.appendChild(dom);
dom = wrap;
}
dom.contentEditable = "false";
dom.classList.add("ProseMirror-widget");
}
super(parent, [], dom, null);
this.widget = widget;
this.widget = widget;
self = this;
}
matchesWidget(widget) {
return this.dirty == NOT_DIRTY && widget.type.eq(this.widget.type);
}
parseRule() { return { ignore: true }; }
stopEvent(event) {
let stop = this.widget.spec.stopEvent;
return stop ? stop(event) : false;
}
ignoreMutation(mutation) {
return mutation.type != "selection" || this.widget.spec.ignoreSelection;
}
destroy() {
this.widget.type.destroy(this.dom);
super.destroy();
}
get domAtom() { return true; }
get side() { return this.widget.type.side; }
}
class CompositionViewDesc extends ViewDesc {
constructor(parent, dom, textDOM, text) {
super(parent, [], dom, null);
this.textDOM = textDOM;
this.text = text;
}
get size() { return this.text.length; }
localPosFromDOM(dom, offset) {
if (dom != this.textDOM)
return this.posAtStart + (offset ? this.size : 0);
return this.posAtStart + offset;
}
domFromPos(pos) {
return { node: this.textDOM, offset: pos };
}
ignoreMutation(mut) {
return mut.type === 'characterData' && mut.target.nodeValue == mut.oldValue;
}
}
// A mark desc represents a mark. May have multiple children,
// depending on how the mark is split. Note that marks are drawn using
// a fixed nesting order, for simplicity and predictability, so in
// some cases they will be split more often than would appear
// necessary.
class MarkViewDesc extends ViewDesc {
constructor(parent, mark, dom, contentDOM) {
super(parent, [], dom, contentDOM);
this.mark = mark;
}
static create(parent, mark, inline, view) {
let custom = view.nodeViews[mark.type.name];
let spec = custom && custom(mark, view, inline);
if (!spec || !spec.dom)
spec = DOMSerializer.renderSpec(document, mark.type.spec.toDOM(mark, inline));
return new MarkViewDesc(parent, mark, spec.dom, spec.contentDOM || spec.dom);
}
parseRule() {
if ((this.dirty & NODE_DIRTY) || this.mark.type.spec.reparseInView)
return null;
return { mark: this.mark.type.name, attrs: this.mark.attrs, contentElement: this.contentDOM || undefined };
}
matchesMark(mark) { return this.dirty != NODE_DIRTY && this.mark.eq(mark); }
markDirty(from, to) {
super.markDirty(from, to);
// Move dirty info to nearest node view
if (this.dirty != NOT_DIRTY) {
let parent = this.parent;
while (!parent.node)
parent = parent.parent;
if (parent.dirty < this.dirty)
parent.dirty = this.dirty;
this.dirty = NOT_DIRTY;
}
}
slice(from, to, view) {
let copy = MarkViewDesc.create(this.parent, this.mark, true, view);
let nodes = this.children, size = this.size;
if (to < size)
nodes = replaceNodes(nodes, to, size, view);
if (from > 0)
nodes = replaceNodes(nodes, 0, from, view);
for (let i = 0; i < nodes.length; i++)
nodes[i].parent = copy;
copy.children = nodes;
return copy;
}
}
// Node view descs are the main, most common type of view desc, and
// correspond to an actual node in the document. Unlike mark descs,
// they populate their child array themselves.
class NodeViewDesc extends ViewDesc {
constructor(parent, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, view, pos) {
super(parent, [], dom, contentDOM);
this.node = node;
this.outerDeco = outerDeco;
this.innerDeco = innerDeco;
this.nodeDOM = nodeDOM;
if (contentDOM)
this.updateChildren(view, pos);
}
// By default, a node is rendered using the `toDOM` method from the
// node type spec. But client code can use the `nodeViews` spec to
// supply a custom node view, which can influence various aspects of
// the way the node works.
//
// (Using subclassing for this was intentionally decided against,
// since it'd require exposing a whole slew of finicky
// implementation details to the user code that they probabl