@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
8 lines (7 loc) • 15.4 kB
Source Map (JSON)
{
"version": 3,
"sources": ["../../../src/components/collaborators-overlay/cursor-dom-utils.ts"],
"sourcesContent": ["export interface SelectionRect {\n\tx: number;\n\ty: number;\n\twidth: number;\n\theight: number;\n}\n\nexport interface CursorCoords {\n\tx: number;\n\ty: number;\n\theight: number;\n}\n\nconst MAX_NODE_OFFSET_COUNT = 500;\n\n/**\n * Given a selection, returns the coordinates of the cursor in the block.\n *\n * @param absolutePositionIndex - The absolute position index\n * @param blockElement - The block element (or null if deleted)\n * @param editorDocument - The editor document\n * @param overlayRect - Pre-computed bounding rect of the overlay element\n * @return The position of the cursor\n */\nexport const getCursorPosition = (\n\tabsolutePositionIndex: number | null,\n\tblockElement: HTMLElement | null,\n\teditorDocument: Document,\n\toverlayRect: DOMRect\n): CursorCoords | null => {\n\tif ( absolutePositionIndex === null || ! blockElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\tgetOffsetPositionInBlock(\n\t\t\tblockElement,\n\t\t\tabsolutePositionIndex,\n\t\t\teditorDocument,\n\t\t\toverlayRect\n\t\t) ?? null\n\t);\n};\n\n/**\n * Given a block element and a character offset, returns the coordinates for drawing a visual cursor in the block.\n *\n * @param blockElement - The block element\n * @param charOffset - The character offset\n * @param editorDocument - The editor document\n * @param overlayRect - Pre-computed bounding rect of the overlay element\n * @return The position of the cursor\n */\nconst getOffsetPositionInBlock = (\n\tblockElement: HTMLElement,\n\tcharOffset: number,\n\teditorDocument: Document,\n\toverlayRect: DOMRect\n) => {\n\tconst { node, offset } = findInnerBlockOffset(\n\t\tblockElement,\n\t\tcharOffset,\n\t\teditorDocument\n\t);\n\n\tconst cursorRange = editorDocument.createRange();\n\n\ttry {\n\t\tcursorRange.setStart( node, offset );\n\t} catch ( error ) {\n\t\treturn null;\n\t}\n\n\t// Ensure the range only represents single point in the DOM.\n\tcursorRange.collapse( true );\n\n\tconst cursorRect = cursorRange.getBoundingClientRect();\n\tconst blockRect = blockElement.getBoundingClientRect();\n\n\tlet cursorX = 0;\n\tlet cursorY = 0;\n\n\tif (\n\t\tcursorRect.x === 0 &&\n\t\tcursorRect.y === 0 &&\n\t\tcursorRect.width === 0 &&\n\t\tcursorRect.height === 0\n\t) {\n\t\t// This can happen for empty blocks.\n\t\tcursorX = blockRect.left - overlayRect.left;\n\t\tcursorY = blockRect.top - overlayRect.top;\n\t} else {\n\t\tcursorX = cursorRect.left - overlayRect.left;\n\t\tcursorY = cursorRect.top - overlayRect.top;\n\t}\n\n\tlet cursorHeight = cursorRect.height;\n\tif ( cursorHeight === 0 ) {\n\t\tconst view = editorDocument.defaultView ?? window;\n\t\tcursorHeight =\n\t\t\tparseInt( view.getComputedStyle( blockElement ).lineHeight, 10 ) ||\n\t\t\tblockRect.height;\n\t}\n\n\treturn {\n\t\tx: cursorX,\n\t\ty: cursorY,\n\t\theight: cursorHeight,\n\t};\n};\n\n/**\n * Computes selection highlight rectangles for a text range within a single block.\n *\n * @param blockElement - The block element\n * @param startOffset - Start character offset within the block\n * @param endOffset - End character offset within the block\n * @param editorDocument - The editor document\n * @param overlayRect - Pre-computed bounding rect of the overlay element\n * @return Array of selection rectangles relative to the overlay, or null on failure\n */\nexport const getSelectionRects = (\n\tblockElement: HTMLElement,\n\tstartOffset: number,\n\tendOffset: number,\n\teditorDocument: Document,\n\toverlayRect: DOMRect\n): SelectionRect[] | null => {\n\t// Normalize direction.\n\tlet normalizedStart = startOffset;\n\tlet normalizedEnd = endOffset;\n\tif ( normalizedStart > normalizedEnd ) {\n\t\t[ normalizedStart, normalizedEnd ] = [ normalizedEnd, normalizedStart ];\n\t}\n\n\tconst startPos = findInnerBlockOffset(\n\t\tblockElement,\n\t\tnormalizedStart,\n\t\teditorDocument\n\t);\n\tconst endPos = findInnerBlockOffset(\n\t\tblockElement,\n\t\tnormalizedEnd,\n\t\teditorDocument\n\t);\n\n\tconst range = editorDocument.createRange();\n\ttry {\n\t\trange.setStart( startPos.node, startPos.offset );\n\t\trange.setEnd( endPos.node, endPos.offset );\n\t} catch {\n\t\treturn null;\n\t}\n\n\tconst clientRects = range.getClientRects();\n\tconst rects: SelectionRect[] = [];\n\n\tfor ( const rect of clientRects ) {\n\t\tif ( rect.width === 0 && rect.height === 0 ) {\n\t\t\tcontinue;\n\t\t}\n\t\tconst x = rect.left - overlayRect.left;\n\t\tconst y = rect.top - overlayRect.top;\n\n\t\t// Range.getClientRects() can return duplicate rects at inline\n\t\t// formatting boundaries (e.g. <em>, <strong>). Skip exact matches.\n\t\tconst isDuplicate = rects.some(\n\t\t\t( r ) =>\n\t\t\t\tr.x === x &&\n\t\t\t\tr.y === y &&\n\t\t\t\tr.width === rect.width &&\n\t\t\t\tr.height === rect.height\n\t\t);\n\t\tif ( isDuplicate ) {\n\t\t\tcontinue;\n\t\t}\n\n\t\trects.push( {\n\t\t\tx,\n\t\t\ty,\n\t\t\twidth: rect.width,\n\t\t\theight: rect.height,\n\t\t} );\n\t}\n\n\treturn rects.length > 0 ? rects : null;\n};\n\n/**\n * Computes selection highlight rectangles for the full content of a block.\n * Used for intermediate blocks in a multi-block selection.\n *\n * @param blockElement - The block element\n * @param editorDocument - The editor document\n * @param overlayRect - Pre-computed bounding rect of the overlay element\n * @return Array of selection rectangles relative to the overlay\n */\nexport const getFullBlockSelectionRects = (\n\tblockElement: HTMLElement,\n\teditorDocument: Document,\n\toverlayRect: DOMRect\n): SelectionRect[] => {\n\tconst range = editorDocument.createRange();\n\trange.selectNodeContents( blockElement );\n\tconst clientRects = range.getClientRects();\n\tconst rects: SelectionRect[] = [];\n\n\tfor ( const rect of clientRects ) {\n\t\tif ( rect.width === 0 && rect.height === 0 ) {\n\t\t\tcontinue;\n\t\t}\n\t\trects.push( {\n\t\t\tx: rect.left - overlayRect.left,\n\t\t\ty: rect.top - overlayRect.top,\n\t\t\twidth: rect.width,\n\t\t\theight: rect.height,\n\t\t} );\n\t}\n\n\t// Fallback: if getClientRects returned nothing, use the block's bounding rect.\n\tif ( rects.length === 0 ) {\n\t\tconst blockRect = blockElement.getBoundingClientRect();\n\t\tif ( blockRect.width > 0 && blockRect.height > 0 ) {\n\t\t\trects.push( {\n\t\t\t\tx: blockRect.left - overlayRect.left,\n\t\t\t\ty: blockRect.top - overlayRect.top,\n\t\t\t\twidth: blockRect.width,\n\t\t\t\theight: blockRect.height,\n\t\t\t} );\n\t\t}\n\t}\n\n\treturn rects;\n};\n\n/**\n * Finds all block elements between two blocks in DOM order (exclusive of start and end).\n *\n * @param startBlockId - The clientId of the start block\n * @param endBlockId - The clientId of the end block\n * @param editorDocument - The editor document\n * @return Array of intermediate block HTMLElements in document order\n */\nexport const getBlocksBetween = (\n\tstartBlockId: string,\n\tendBlockId: string,\n\teditorDocument: Document\n): HTMLElement[] => {\n\tconst allBlocks =\n\t\teditorDocument.querySelectorAll< HTMLElement >( '[data-block]' );\n\n\tlet startIndex = -1;\n\tlet endIndex = -1;\n\n\tfor ( let i = 0; i < allBlocks.length; i++ ) {\n\t\tconst blockId = allBlocks[ i ].getAttribute( 'data-block' );\n\t\tif ( blockId === startBlockId ) {\n\t\t\tstartIndex = i;\n\t\t}\n\t\tif ( blockId === endBlockId ) {\n\t\t\tendIndex = i;\n\t\t}\n\t}\n\n\tif ( startIndex === -1 || endIndex === -1 ) {\n\t\treturn [];\n\t}\n\n\t// Normalize order.\n\tif ( startIndex > endIndex ) {\n\t\t[ startIndex, endIndex ] = [ endIndex, startIndex ];\n\t}\n\n\tconst result: HTMLElement[] = [];\n\tfor ( let i = startIndex + 1; i < endIndex; i++ ) {\n\t\tresult.push( allBlocks[ i ] );\n\t}\n\treturn result;\n};\n\n/**\n * Given a block element and a character offset, returns an exact inner node and offset for use in a range.\n *\n * @param blockElement - The block element\n * @param offset - The character offset\n * @param editorDocument - The editor document\n * @return The node and offset of the character at the offset\n */\nexport const findInnerBlockOffset = (\n\tblockElement: HTMLElement,\n\toffset: number,\n\teditorDocument: Document\n) => {\n\tconst treeWalker = editorDocument.createTreeWalker(\n\t\tblockElement,\n\t\tNodeFilter.SHOW_TEXT | NodeFilter.SHOW_ELEMENT // eslint-disable-line no-bitwise\n\t);\n\n\tlet currentOffset = 0;\n\tlet lastTextNode: Node | null = null;\n\n\tlet node: Node | null = null;\n\tlet nodeCount = 1;\n\n\twhile ( ( node = treeWalker.nextNode() ) ) {\n\t\tnodeCount++;\n\n\t\tif ( nodeCount > MAX_NODE_OFFSET_COUNT ) {\n\t\t\t// If we've walked too many nodes, return the last text node or the beginning of the block.\n\t\t\tif ( lastTextNode ) {\n\t\t\t\treturn { node: lastTextNode, offset: 0 };\n\t\t\t}\n\t\t\treturn { node: blockElement, offset: 0 };\n\t\t}\n\n\t\tconst nodeLength = node.nodeValue?.length ?? 0;\n\n\t\tif ( node.nodeType === Node.ELEMENT_NODE ) {\n\t\t\tif ( node.nodeName === 'BR' ) {\n\t\t\t\t// Treat <br> as a single \"\\n\" character.\n\n\t\t\t\tif ( currentOffset + 1 >= offset ) {\n\t\t\t\t\t// If the <br> occurs right on the target offset, return the next text node.\n\t\t\t\t\tconst nodeAfterBr = treeWalker.nextNode();\n\n\t\t\t\t\tif ( nodeAfterBr?.nodeType === Node.TEXT_NODE ) {\n\t\t\t\t\t\treturn { node: nodeAfterBr, offset: 0 };\n\t\t\t\t\t} else if ( lastTextNode ) {\n\t\t\t\t\t\t// If there's no text node after the <br>, return the end offset of the last text node.\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tnode: lastTextNode,\n\t\t\t\t\t\t\toffset: lastTextNode.nodeValue?.length ?? 0,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\t// Just in case, if there's no last text node, return the beginning of the block.\n\t\t\t\t\treturn { node: blockElement, offset: 0 };\n\t\t\t\t}\n\n\t\t\t\t// The <br> is before the target offset. Count it as a single character.\n\t\t\t\tcurrentOffset += 1;\n\t\t\t\tcontinue;\n\t\t\t} else {\n\t\t\t\t// Skip other element types.\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t}\n\n\t\tif ( nodeLength === 0 ) {\n\t\t\t// Skip empty nodes.\n\t\t\tcontinue;\n\t\t}\n\n\t\tif ( currentOffset + nodeLength >= offset ) {\n\t\t\t// This node exceeds the target offset. Return the node and the position of the offset within it.\n\t\t\treturn { node, offset: offset - currentOffset };\n\t\t}\n\n\t\tcurrentOffset += nodeLength;\n\n\t\tif ( node.nodeType === Node.TEXT_NODE ) {\n\t\t\tlastTextNode = node;\n\t\t}\n\t}\n\n\tif ( lastTextNode && lastTextNode.nodeValue?.length ) {\n\t\t// We didn't reach the target offset. Return the last text node's last character.\n\t\treturn { node: lastTextNode, offset: lastTextNode.nodeValue.length };\n\t}\n\n\t// We didn't find any text nodes. Return the beginning of the block.\n\treturn { node: blockElement, offset: 0 };\n};\n\n/**\n * Check if node `a` precedes node `b` in document order.\n *\n * @param a - First node.\n * @param b - Second node.\n * @return True if `a` comes before `b`.\n */\nexport const isNodeBefore = ( a: Node, b: Node ): boolean =>\n\ta.compareDocumentPosition( b ) === Node.DOCUMENT_POSITION_FOLLOWING;\n"],
"mappings": "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",
"names": []
}