-
Notifications
You must be signed in to change notification settings - Fork 158
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* Preserve reverted selection info in Content Model * Entity delimiter cursor moving (#2575) * improve * Add test * add test
- Loading branch information
1 parent
e3cc9e8
commit b69795f
Showing
11 changed files
with
1,468 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
157 changes: 157 additions & 0 deletions
157
packages/roosterjs-content-model-core/lib/corePlugin/entity/adjustSelectionAroundEntity.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import { | ||
| getSelectedSegmentsAndParagraphs, | ||
| isBlockEntityContainer, | ||
| isEntityDelimiter, | ||
| isNodeOfType, | ||
| } from 'roosterjs-content-model-dom'; | ||
| import type { | ||
| ContentModelBlockGroup, | ||
| ContentModelEntity, | ||
| ContentModelParagraph, | ||
| ContentModelSegment, | ||
| IEditor, | ||
| } from 'roosterjs-content-model-types'; | ||
|
|
||
| /** | ||
| * @internal | ||
| */ | ||
| export function adjustSelectionAroundEntity( | ||
| editor: IEditor, | ||
| key: 'ArrowLeft' | 'ArrowRight', | ||
| shiftKey: boolean | ||
| ) { | ||
| const selection = editor.isDisposed() ? null : editor.getDOMSelection(); | ||
|
|
||
| if (!selection || selection.type != 'range') { | ||
| return; | ||
| } | ||
|
|
||
| const { range, isReverted } = selection; | ||
| const anchorNode = isReverted ? range.startContainer : range.endContainer; | ||
| const offset = isReverted ? range.startOffset : range.endOffset; | ||
| const delimiter = isNodeOfType(anchorNode, 'ELEMENT_NODE') | ||
| ? anchorNode | ||
| : anchorNode.parentElement; | ||
| const isRtl = | ||
| delimiter && | ||
| editor.getDocument().defaultView?.getComputedStyle(delimiter).direction == 'rtl'; | ||
| const movingBefore = (key == 'ArrowLeft') != !!isRtl; | ||
|
|
||
| if ( | ||
| delimiter && | ||
| ((isEntityDelimiter(delimiter, !movingBefore) && | ||
| ((movingBefore && offset == 0) || (!movingBefore && offset == 1))) || | ||
| isBlockEntityContainer(delimiter)) | ||
| ) { | ||
| editor.formatContentModel(model => { | ||
| const allSel = getSelectedSegmentsAndParagraphs( | ||
| model, | ||
| false /*includingFormatHolder*/, | ||
| true /*includingEntity*/ | ||
| ); | ||
| const sel = allSel[isReverted ? 0 : allSel.length - 1]; | ||
| const index = sel?.[1]?.segments.indexOf(sel[0]) ?? -1; | ||
|
|
||
| if (sel && sel[1] && index >= 0) { | ||
| const [segment, paragraph, path] = sel; | ||
| const isShrinking = shiftKey && !range.collapsed && movingBefore != !!isReverted; | ||
| const entitySegment = isShrinking | ||
| ? segment | ||
| : paragraph.segments[movingBefore ? index - 1 : index + 1]; | ||
|
|
||
| const pairedDelimiter = findPairedDelimiter( | ||
| entitySegment, | ||
| path, | ||
| paragraph, | ||
| movingBefore | ||
| ); | ||
|
|
||
| if (pairedDelimiter) { | ||
| const newRange = getNewRange( | ||
| range, | ||
| isShrinking, | ||
| movingBefore, | ||
| pairedDelimiter, | ||
| shiftKey | ||
| ); | ||
|
|
||
| editor.setDOMSelection({ | ||
| type: 'range', | ||
| range: newRange, | ||
| isReverted: newRange.collapsed ? false : isReverted, | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| return false; | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| function getNewRange( | ||
| originalRange: Range, | ||
| isShrinking: boolean, | ||
| movingBefore: boolean, | ||
| pairedDelimiter: HTMLElement, | ||
| shiftKey: boolean | ||
| ) { | ||
| const newRange = originalRange.cloneRange(); | ||
|
|
||
| if (isShrinking) { | ||
| if (movingBefore) { | ||
| newRange.setEndBefore(pairedDelimiter); | ||
| } else { | ||
| newRange.setStartAfter(pairedDelimiter); | ||
| } | ||
| } else { | ||
| if (movingBefore) { | ||
| newRange.setStartBefore(pairedDelimiter); | ||
| } else { | ||
| newRange.setEndAfter(pairedDelimiter); | ||
| } | ||
| if (!shiftKey) { | ||
| if (movingBefore) { | ||
| newRange.setEndBefore(pairedDelimiter); | ||
| } else { | ||
| newRange.setStartAfter(pairedDelimiter); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| return newRange; | ||
| } | ||
|
|
||
| function findPairedDelimiter( | ||
| entitySegment: ContentModelSegment, | ||
| path: ContentModelBlockGroup[], | ||
| paragraph: ContentModelParagraph, | ||
| movingBefore: boolean | ||
| ) { | ||
| let entity: ContentModelEntity | null = null; | ||
|
|
||
| if (entitySegment?.segmentType == 'Entity') { | ||
| // Inline entity | ||
| entity = entitySegment; | ||
| } else { | ||
| // Block entity | ||
| const blocks = path[0].blocks; | ||
| const paraIndex = blocks.indexOf(paragraph); | ||
| const entityBlock = | ||
| paraIndex >= 0 ? blocks[movingBefore ? paraIndex - 1 : paraIndex + 1] : null; | ||
|
|
||
| if (entityBlock?.blockType == 'Entity') { | ||
| entity = entityBlock; | ||
| } | ||
| } | ||
|
|
||
| const pairedDelimiter = entity | ||
| ? movingBefore | ||
| ? entity.wrapper.previousElementSibling | ||
| : entity.wrapper.nextElementSibling | ||
| : null; | ||
|
|
||
| return isNodeOfType(pairedDelimiter, 'ELEMENT_NODE') && | ||
| isEntityDelimiter(pairedDelimiter, movingBefore) | ||
| ? pairedDelimiter | ||
| : null; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.