Hide/show autocomplete based on selection state
This commit is contained in:
parent
f6a76edfdf
commit
fb6eec0f7d
11 changed files with 114 additions and 43 deletions
|
@ -5,7 +5,8 @@ import {
|
|||
convertFromHTML,
|
||||
DefaultDraftBlockRenderMap,
|
||||
DefaultDraftInlineStyle,
|
||||
CompositeDecorator
|
||||
CompositeDecorator,
|
||||
SelectionState
|
||||
} from 'draft-js';
|
||||
import * as sdk from './index';
|
||||
|
||||
|
@ -168,3 +169,28 @@ export function modifyText(contentState: ContentState, rangeToReplace: Selection
|
|||
|
||||
return Modifier.replaceText(contentState, rangeToReplace, modifyFn(text), inlineStyle, entityKey);
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes the plaintext offsets of the given SelectionState.
|
||||
* Note that this inherently means we make assumptions about what that means (no separator between ContentBlocks, etc)
|
||||
* Used by autocomplete to show completions when the current selection lies within, or at the edges of a command.
|
||||
*/
|
||||
export function getTextSelectionOffsets(selectionState: SelectionState,
|
||||
contentBlocks: Array<ContentBlock>): {start: number, end: number} {
|
||||
let offset = 0, start = 0, end = 0;
|
||||
for(let block of contentBlocks) {
|
||||
if (selectionState.getStartKey() == block.getKey()) {
|
||||
start = offset + selectionState.getStartOffset();
|
||||
}
|
||||
if (selectionState.getEndKey() == block.getKey()) {
|
||||
end = offset + selectionState.getEndOffset();
|
||||
break;
|
||||
}
|
||||
offset += block.getLength();
|
||||
}
|
||||
|
||||
return {
|
||||
start,
|
||||
end
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue