@atlaskit/editor-plugin-selection
Version:
Selection plugin for @atlaskit/editor-core
254 lines (244 loc) • 10.6 kB
JavaScript
import { atTheBeginningOfDoc, atTheEndOfDoc, GapCursorSelection, Side, isValidTargetNode } from '@atlaskit/editor-common/selection';
import { isMediaNode, isNodeBeforeMediaNode, isPositionNearTableRow } from '@atlaskit/editor-common/utils';
import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
import { findDomRefAtPos, findPositionOfNodeBefore, removeNodeBefore } from '@atlaskit/editor-prosemirror/utils';
import { gapCursorPluginKey } from '../gap-cursor-plugin-key';
import { Direction, isBackward, isForward } from './direction';
import { isTextBlockNearPos } from './utils';
export var shouldSkipGapCursor = function shouldSkipGapCursor(direction, state, $pos) {
var _$pos$nodeBefore;
var doc = state.doc,
schema = state.schema;
switch (direction) {
case Direction.UP:
if (atTheBeginningOfDoc(state)) {
return false;
}
return isPositionNearTableRow($pos, schema, 'before') || isTextBlockNearPos(doc, schema, $pos, -1) || isNodeBeforeMediaNode($pos, state);
case Direction.DOWN:
return (
// end of a paragraph
atTheEndOfDoc(state) || isTextBlockNearPos(doc, schema, $pos, 1) || isPositionNearTableRow($pos, schema, 'after') || ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.type.name) === 'text' && !$pos.nodeAfter
);
default:
return false;
}
};
// These cases should be handled using the handleMediaGapCursor function
function shouldHandleMediaGapCursor(dir, state) {
var _selection$$from$node;
var selection = state.selection;
var upArrowFromGapCursorIntoMedia = selection instanceof GapCursorSelection && dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore);
var downArrowFromGapCursorIntoMediaGroup = selection instanceof GapCursorSelection && dir === Direction.DOWN && ((_selection$$from$node = selection.$from.nodeAfter) === null || _selection$$from$node === void 0 ? void 0 : _selection$$from$node.type.name) === 'mediaGroup';
return upArrowFromGapCursorIntoMedia || downArrowFromGapCursorIntoMediaGroup;
}
// Handle media gap cursor for up/down arrow into media nodes
// Should check this case by using shouldHandleMediaGapCursor first
function handleMediaGapCursor(dir, state) {
var selection = state.selection,
tr = state.tr;
var $pos = isBackward(dir) ? selection.$from : selection.$to;
if (dir === Direction.UP && selection.$from.nodeBefore && isMediaNode(selection.$from.nodeBefore)) {
var _tr$doc$nodeAt;
var nodeBeforePos = findPositionOfNodeBefore(tr.selection);
if (nodeBeforePos && selection.side === 'right' && ((_tr$doc$nodeAt = tr.doc.nodeAt(nodeBeforePos)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.type.name) === 'mediaSingle') {
tr.setSelection(new NodeSelection(tr.doc.resolve(nodeBeforePos))).scrollIntoView();
} else if (nodeBeforePos || nodeBeforePos === 0) {
tr.setSelection(new GapCursorSelection(tr.doc.resolve(nodeBeforePos), Side.LEFT)).scrollIntoView();
}
}
if (dir === Direction.DOWN && selection.$from.nodeAfter) {
var nodeAfterPos = selection.side === 'right' ? $pos.pos : $pos.pos + selection.$from.nodeAfter.nodeSize;
if (nodeAfterPos) {
tr.setSelection(new GapCursorSelection(tr.doc.resolve(nodeAfterPos), Side.LEFT)).scrollIntoView();
}
}
return tr;
}
export var arrow = function arrow(dir, endOfTextblock) {
return function (state, dispatch, view) {
var doc = state.doc,
selection = state.selection,
tr = state.tr;
var $pos = isBackward(dir) ? selection.$from : selection.$to;
var mustMove = selection.empty;
// start from text selection
if (selection instanceof TextSelection) {
// if cursor is in the middle of a text node, do nothing
if (!endOfTextblock || !endOfTextblock(dir.toString())) {
return false;
}
// UP/DOWN jumps to the nearest texblock skipping gapcursor whenever possible
if (shouldSkipGapCursor(dir, state, $pos)) {
return false;
}
// otherwise resolve previous/next position
$pos = doc.resolve(isBackward(dir) ? $pos.before() : $pos.after());
mustMove = false;
}
if (selection instanceof NodeSelection) {
if (selection.node.isInline) {
return false;
}
if (dir === Direction.UP && !atTheBeginningOfDoc(state) && !isNodeBeforeMediaNode($pos, state) || dir === Direction.DOWN) {
// We dont add gap cursor on node selections going up and down
// Except we do if we're going up for a block node which is the
// first node in the document OR the node before is a media node
return false;
}
}
// Handle media gap cursor for up/down arrow into media nodes
if (shouldHandleMediaGapCursor(dir, state)) {
var updatedTr = handleMediaGapCursor(dir, state);
if (dispatch) {
dispatch(updatedTr);
}
return true;
}
// when jumping between block nodes at the same depth, we need to reverse cursor without changing ProseMirror position
if (selection instanceof GapCursorSelection &&
// next node allow gap cursor position
isValidTargetNode(isBackward(dir) ? $pos.nodeBefore : $pos.nodeAfter) && (
// gap cursor changes block node
isBackward(dir) && selection.side === Side.LEFT || isForward(dir) && selection.side === Side.RIGHT)) {
// reverse cursor position
if (dispatch) {
dispatch(tr.setSelection(new GapCursorSelection($pos, selection.side === Side.RIGHT ? Side.LEFT : Side.RIGHT)).scrollIntoView());
}
return true;
}
if (view) {
var domAtPos = view.domAtPos.bind(view);
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var target = findDomRefAtPos($pos.pos, domAtPos);
if (target && target.textContent === ZERO_WIDTH_SPACE) {
return false;
}
}
var nextSelection = GapCursorSelection.findFrom($pos, isBackward(dir) ? -1 : 1, mustMove);
if (!nextSelection) {
return false;
}
if (!isValidTargetNode(isForward(dir) ? nextSelection.$from.nodeBefore : nextSelection.$from.nodeAfter)) {
// reverse cursor position
if (dispatch) {
dispatch(tr.setSelection(new GapCursorSelection(nextSelection.$from, isForward(dir) ? Side.LEFT : Side.RIGHT)).scrollIntoView());
}
return true;
}
if (dispatch) {
dispatch(tr.setSelection(nextSelection).scrollIntoView());
}
return true;
};
};
export var deleteNode = function deleteNode(dir) {
return function (state, dispatch) {
if (state.selection instanceof GapCursorSelection) {
var _state$selection = state.selection,
$from = _state$selection.$from,
$anchor = _state$selection.$anchor;
var tr = state.tr;
if (isBackward(dir)) {
if (state.selection.side === 'left') {
tr.setSelection(new GapCursorSelection($anchor, Side.RIGHT));
if (dispatch) {
dispatch(tr);
}
return true;
}
tr = removeNodeBefore(state.tr);
} else if ($from.nodeAfter) {
tr = tr.delete($from.pos, $from.pos + $from.nodeAfter.nodeSize);
}
if (dispatch) {
dispatch(tr.setSelection(Selection.near(tr.doc.resolve(tr.mapping.map(state.selection.$from.pos)))).scrollIntoView());
}
return true;
}
return false;
};
};
// This function captures clicks outside of the ProseMirror contentEditable area
// see also description of "handleClick" in gap-cursor pm-plugin
var captureCursorCoords = function captureCursorCoords(event, editorRef, posAtCoords, tr) {
var rect = editorRef.getBoundingClientRect();
// capture clicks before the first block element
if (event.clientY < rect.top) {
return {
position: 0,
side: Side.LEFT
};
}
if (rect.left > 0) {
// calculate start position of a node that is vertically at the same level
var coords = posAtCoords({
left: rect.left,
top: event.clientY
});
if (coords && coords.inside > -1) {
var $from = tr.doc.resolve(coords.inside);
var start = $from.before(1);
var side = event.clientX < rect.left ? Side.LEFT : Side.RIGHT;
var position;
if (side === Side.LEFT) {
position = start;
} else {
var node = tr.doc.nodeAt(start);
if (node) {
position = start + node.nodeSize;
}
}
return {
position: position,
side: side
};
}
}
return null;
};
export var setSelectionTopLevelBlocks = function setSelectionTopLevelBlocks(tr, event, editorRef, posAtCoords, editorFocused) {
var cursorCoords = captureCursorCoords(event, editorRef, posAtCoords, tr);
if (!cursorCoords) {
return;
}
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
var $pos = cursorCoords.position !== undefined ? tr.doc.resolve(cursorCoords.position) : null;
if ($pos === null) {
return;
}
var isGapCursorAllowed = cursorCoords.side === Side.LEFT ? isValidTargetNode($pos.nodeAfter) : isValidTargetNode($pos.nodeBefore);
if (isGapCursorAllowed && GapCursorSelection.valid($pos)) {
// this forces PM to re-render the decoration node if we change the side of the gap cursor, it doesn't do it by default
if (tr.selection instanceof GapCursorSelection) {
tr.setSelection(Selection.near($pos));
} else {
tr.setSelection(new GapCursorSelection($pos, cursorCoords.side));
}
}
// try to set text selection if the editor isnt focused
// if the editor is focused, we are most likely dragging a selection outside.
else if (editorFocused === false) {
var selectionTemp = Selection.findFrom($pos, cursorCoords.side === Side.LEFT ? 1 : -1, true);
if (selectionTemp) {
tr.setSelection(selectionTemp);
}
}
};
export var setCursorForTopLevelBlocks = function setCursorForTopLevelBlocks(event, editorRef, posAtCoords, editorFocused) {
return function (state, dispatch) {
var tr = state.tr;
setSelectionTopLevelBlocks(tr, event, editorRef, posAtCoords, editorFocused);
if (tr.selectionSet && dispatch) {
dispatch(tr);
return true;
}
return false;
};
};
export var hasGapCursorPlugin = function hasGapCursorPlugin(state) {
return Boolean(gapCursorPluginKey.get(state));
};