/** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * */ import { $createTextNode, $getCharacterOffsets, $getNodeByKey, $getPreviousSelection, $isElementNode, $isRangeSelection, $isRootNode, $isTextNode, $isTokenOrSegmented, BaseSelection, LexicalEditor, LexicalNode, Point, RangeSelection, TextNode, } from 'lexical'; import invariant from 'lexical/shared/invariant'; import {CSS_TO_STYLES} from './constants'; import { getCSSFromStyleObject, getStyleObjectFromCSS, getStyleObjectFromRawCSS, } from './utils'; /** * Generally used to append text content to HTML and JSON. Grabs the text content and "slices" * it to be generated into the new TextNode. * @param selection - The selection containing the node whose TextNode is to be edited. * @param textNode - The TextNode to be edited. * @returns The updated TextNode. */ export function $sliceSelectedTextNodeContent( selection: BaseSelection, textNode: TextNode, ): LexicalNode { const anchorAndFocus = selection.getStartEndPoints(); if ( textNode.isSelected(selection) && !textNode.isSegmented() && !textNode.isToken() && anchorAndFocus !== null ) { const [anchor, focus] = anchorAndFocus; const isBackward = selection.isBackward(); const anchorNode = anchor.getNode(); const focusNode = focus.getNode(); const isAnchor = textNode.is(anchorNode); const isFocus = textNode.is(focusNode); if (isAnchor || isFocus) { const [anchorOffset, focusOffset] = $getCharacterOffsets(selection); const isSame = anchorNode.is(focusNode); const isFirst = textNode.is(isBackward ? focusNode : anchorNode); const isLast = textNode.is(isBackward ? anchorNode : focusNode); let startOffset = 0; let endOffset = undefined; if (isSame) { startOffset = anchorOffset > focusOffset ? focusOffset : anchorOffset; endOffset = anchorOffset > focusOffset ? anchorOffset : focusOffset; } else if (isFirst) { const offset = isBackward ? focusOffset : anchorOffset; startOffset = offset; endOffset = undefined; } else if (isLast) { const offset = isBackward ? anchorOffset : focusOffset; startOffset = 0; endOffset = offset; } textNode.__text = textNode.__text.slice(startOffset, endOffset); return textNode; } } return textNode; } /** * Determines if the current selection is at the end of the node. * @param point - The point of the selection to test. * @returns true if the provided point offset is in the last possible position, false otherwise. */ export function $isAtNodeEnd(point: Point): boolean { if (point.type === 'text') { return point.offset === point.getNode().getTextContentSize(); } const node = point.getNode(); invariant( $isElementNode(node), 'isAtNodeEnd: node must be a TextNode or ElementNode', ); return point.offset === node.getChildrenSize(); } /** * Trims text from a node in order to shorten it, eg. to enforce a text's max length. If it deletes text * that is an ancestor of the anchor then it will leave 2 indents, otherwise, if no text content exists, it deletes * the TextNode. It will move the focus to either the end of any left over text or beginning of a new TextNode. * @param editor - The lexical editor. * @param anchor - The anchor of the current selection, where the selection should be pointing. * @param delCount - The amount of characters to delete. Useful as a dynamic variable eg. textContentSize - maxLength; */ export function $trimTextContentFromAnchor( editor: LexicalEditor, anchor: Point, delCount: number, ): void { // Work from the current selection anchor point let currentNode: LexicalNode | null = anchor.getNode(); let remaining: number = delCount; if ($isElementNode(currentNode)) { const descendantNode = currentNode.getDescendantByIndex(anchor.offset); if (descendantNode !== null) { currentNode = descendantNode; } } while (remaining > 0 && currentNode !== null) { if ($isElementNode(currentNode)) { const lastDescendant: null | LexicalNode = currentNode.getLastDescendant(); if (lastDescendant !== null) { currentNode = lastDescendant; } } let nextNode: LexicalNode | null = currentNode.getPreviousSibling(); let additionalElementWhitespace = 0; if (nextNode === null) { let parent: LexicalNode | null = currentNode.getParentOrThrow(); let parentSibling: LexicalNode | null = parent.getPreviousSibling(); while (parentSibling === null) { parent = parent.getParent(); if (parent === null) { nextNode = null; break; } parentSibling = parent.getPreviousSibling(); } if (parent !== null) { additionalElementWhitespace = parent.isInline() ? 0 : 2; nextNode = parentSibling; } } let text = currentNode.getTextContent(); // If the text is empty, we need to consider adding in two line breaks to match // the content if we were to get it from its parent. if (text === '' && $isElementNode(currentNode) && !currentNode.isInline()) { // TODO: should this be handled in core? text = '\n\n'; } const currentNodeSize = text.length; if (!$isTextNode(currentNode) || remaining >= currentNodeSize) { const parent = currentNode.getParent(); currentNode.remove(); if ( parent != null && parent.getChildrenSize() === 0 && !$isRootNode(parent) ) { parent.remove(); } remaining -= currentNodeSize + additionalElementWhitespace; currentNode = nextNode; } else { const key = currentNode.getKey(); // See if we can just revert it to what was in the last editor state const prevTextContent: string | null = editor .getEditorState() .read(() => { const prevNode = $getNodeByKey(key); if ($isTextNode(prevNode) && prevNode.isSimpleText()) { return prevNode.getTextContent(); } return null; }); const offset = currentNodeSize - remaining; const slicedText = text.slice(0, offset); if (prevTextContent !== null && prevTextContent !== text) { const prevSelection = $getPreviousSelection(); let target = currentNode; if (!currentNode.isSimpleText()) { const textNode = $createTextNode(prevTextContent); currentNode.replace(textNode); target = textNode; } else { currentNode.setTextContent(prevTextContent); } if ($isRangeSelection(prevSelection) && prevSelection.isCollapsed()) { const prevOffset = prevSelection.anchor.offset; target.select(prevOffset, prevOffset); } } else if (currentNode.isSimpleText()) { // Split text const isSelected = anchor.key === key; let anchorOffset = anchor.offset; // Move offset to end if it's less than the remaining number, otherwise // we'll have a negative splitStart. if (anchorOffset < remaining) { anchorOffset = currentNodeSize; } const splitStart = isSelected ? anchorOffset - remaining : 0; const splitEnd = isSelected ? anchorOffset : offset; if (isSelected && splitStart === 0) { const [excessNode] = currentNode.splitText(splitStart, splitEnd); excessNode.remove(); } else { const [, excessNode] = currentNode.splitText(splitStart, splitEnd); excessNode.remove(); } } else { const textNode = $createTextNode(slicedText); currentNode.replace(textNode); } remaining = 0; } } } /** * Gets the TextNode's style object and adds the styles to the CSS. * @param node - The TextNode to add styles to. */ export function $addNodeStyle(node: TextNode): void { const CSSText = node.getStyle(); const styles = getStyleObjectFromRawCSS(CSSText); CSS_TO_STYLES.set(CSSText, styles); } function $patchStyle( target: TextNode | RangeSelection, patch: Record< string, | string | null | ((currentStyleValue: string | null, _target: typeof target) => string) >, ): void { const prevStyles = getStyleObjectFromCSS( 'getStyle' in target ? target.getStyle() : target.style, ); const newStyles = Object.entries(patch).reduce>( (styles, [key, value]) => { if (typeof value === 'function') { styles[key] = value(prevStyles[key], target); } else if (value === null) { delete styles[key]; } else { styles[key] = value; } return styles; }, {...prevStyles} || {}, ); const newCSSText = getCSSFromStyleObject(newStyles); target.setStyle(newCSSText); CSS_TO_STYLES.set(newCSSText, newStyles); } /** * Applies the provided styles to the TextNodes in the provided Selection. * Will update partially selected TextNodes by splitting the TextNode and applying * the styles to the appropriate one. * @param selection - The selected node(s) to update. * @param patch - The patch to apply, which can include multiple styles. \\{CSSProperty: value\\} . Can also accept a function that returns the new property value. */ export function $patchStyleText( selection: BaseSelection, patch: Record< string, | string | null | (( currentStyleValue: string | null, target: TextNode | RangeSelection, ) => string) >, ): void { const selectedNodes = selection.getNodes(); const selectedNodesLength = selectedNodes.length; const anchorAndFocus = selection.getStartEndPoints(); if (anchorAndFocus === null) { return; } const [anchor, focus] = anchorAndFocus; const lastIndex = selectedNodesLength - 1; let firstNode = selectedNodes[0]; let lastNode = selectedNodes[lastIndex]; if (selection.isCollapsed() && $isRangeSelection(selection)) { $patchStyle(selection, patch); return; } const firstNodeText = firstNode.getTextContent(); const firstNodeTextLength = firstNodeText.length; const focusOffset = focus.offset; let anchorOffset = anchor.offset; const isBefore = anchor.isBefore(focus); let startOffset = isBefore ? anchorOffset : focusOffset; let endOffset = isBefore ? focusOffset : anchorOffset; const startType = isBefore ? anchor.type : focus.type; const endType = isBefore ? focus.type : anchor.type; const endKey = isBefore ? focus.key : anchor.key; // This is the case where the user only selected the very end of the // first node so we don't want to include it in the formatting change. if ($isTextNode(firstNode) && startOffset === firstNodeTextLength) { const nextSibling = firstNode.getNextSibling(); if ($isTextNode(nextSibling)) { // we basically make the second node the firstNode, changing offsets accordingly anchorOffset = 0; startOffset = 0; firstNode = nextSibling; } } // This is the case where we only selected a single node if (selectedNodes.length === 1) { if ($isTextNode(firstNode) && firstNode.canHaveFormat()) { startOffset = startType === 'element' ? 0 : anchorOffset > focusOffset ? focusOffset : anchorOffset; endOffset = endType === 'element' ? firstNodeTextLength : anchorOffset > focusOffset ? anchorOffset : focusOffset; // No actual text is selected, so do nothing. if (startOffset === endOffset) { return; } // The entire node is selected or a token/segment, so just format it if ( $isTokenOrSegmented(firstNode) || (startOffset === 0 && endOffset === firstNodeTextLength) ) { $patchStyle(firstNode, patch); firstNode.select(startOffset, endOffset); } else { // The node is partially selected, so split it into two nodes // and style the selected one. const splitNodes = firstNode.splitText(startOffset, endOffset); const replacement = startOffset === 0 ? splitNodes[0] : splitNodes[1]; $patchStyle(replacement, patch); replacement.select(0, endOffset - startOffset); } } // multiple nodes selected. } else { if ( $isTextNode(firstNode) && startOffset < firstNode.getTextContentSize() && firstNode.canHaveFormat() ) { if (startOffset !== 0 && !$isTokenOrSegmented(firstNode)) { // the entire first node isn't selected and it isn't a token or segmented, so split it firstNode = firstNode.splitText(startOffset)[1]; startOffset = 0; if (isBefore) { anchor.set(firstNode.getKey(), startOffset, 'text'); } else { focus.set(firstNode.getKey(), startOffset, 'text'); } } $patchStyle(firstNode as TextNode, patch); } if ($isTextNode(lastNode) && lastNode.canHaveFormat()) { const lastNodeText = lastNode.getTextContent(); const lastNodeTextLength = lastNodeText.length; // The last node might not actually be the end node // // If not, assume the last node is fully-selected unless the end offset is // zero. if (lastNode.__key !== endKey && endOffset !== 0) { endOffset = lastNodeTextLength; } // if the entire last node isn't selected and it isn't a token or segmented, split it if (endOffset !== lastNodeTextLength && !$isTokenOrSegmented(lastNode)) { [lastNode] = lastNode.splitText(endOffset); } if (endOffset !== 0 || endType === 'element') { $patchStyle(lastNode as TextNode, patch); } } // style all the text nodes in between for (let i = 1; i < lastIndex; i++) { const selectedNode = selectedNodes[i]; const selectedNodeKey = selectedNode.getKey(); if ( $isTextNode(selectedNode) && selectedNode.canHaveFormat() && selectedNodeKey !== firstNode.getKey() && selectedNodeKey !== lastNode.getKey() && !selectedNode.isToken() ) { $patchStyle(selectedNode, patch); } } } }