luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: lint

Browse Source
This commit is contained in:
DiamondThree
2022-08-11 15:39:22 +08:00
parent 9b0f608b6b
commit 9ad7332b30
1 changed files with 57 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
libs/components/editor-blocks/src/components/text-manage/TextManage.tsx
View File

@@ -42,13 +42,13 @@ const TextBlockContainer = styled(Text)(({ theme }) => ({
})); }));
const findSlice = (arr: string[], p: string, q: string) => { const findSlice = (arr: string[], p: string, q: string) => {
let should_include = false; let shouldInclude = false;
return arr.filter(block => { return arr.filter(block => {
if (block === p || block === q) { if (block === p || block === q) {
should_include = !should_include; shouldInclude = !shouldInclude;
return true; return true;
} else { } else {
return should_include; return shouldInclude;
} }
}); });
}; };
@@ -112,11 +112,8 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
(ref as MutableRefObject<ExtendedTextUtils>) || defaultRef; (ref as MutableRefObject<ExtendedTextUtils>) || defaultRef;
const properties = block.getProperties(); const properties = block.getProperties();
// const [is_select, set_is_select] = useState<boolean>();
// useOnSelect(block.id, (is_select: boolean) => { const onTextViewSetSelection = (selection: Range | Point) => {
// set_is_select(is_select);
// });
const on_text_view_set_selection = (selection: Range | Point) => {
if (selection instanceof Point) { if (selection instanceof Point) {
//do some thing //do some thing
} else { } else {
@@ -125,18 +122,18 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
}; };
// block = await editor.commands.blockCommands.createNextBlock(block.id,) // block = await editor.commands.blockCommands.createNextBlock(block.id,)
const on_text_view_active = useCallback( const onTextViewActive = useCallback(
(point: CursorTypes) => { (point: CursorTypes) => {
// TODO code to be optimized // TODO code to be optimized
if (textRef.current) { if (textRef.current) {
const end_selection = textRef.current.getEndSelection(); const endSelection = textRef.current.getEndSelection();
const start_selection = textRef.current.getStartSelection(); const startSelection = textRef.current.getStartSelection();
if (point === 'start') { if (point === 'start') {
textRef.current.setSelection(start_selection); textRef.current.setSelection(startSelection);
return; return;
} }
if (point === 'end') { if (point === 'end') {
textRef.current.setSelection(end_selection); textRef.current.setSelection(endSelection);
return; return;
} }
try { try {
@@ -151,24 +148,24 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
} else { } else {
blockTop = blockDomStyle.top + 5; blockTop = blockDomStyle.top + 5;
} }
const end_position = ReactEditor.toDOMRange( const endPosition = ReactEditor.toDOMRange(
textRef.current.editor, textRef.current.editor,
end_selection endSelection
) )
.getClientRects() .getClientRects()
.item(0); .item(0);
const start_position = ReactEditor.toDOMRange( const startPosition = ReactEditor.toDOMRange(
textRef.current.editor, textRef.current.editor,
start_selection startSelection
) )
.getClientRects() .getClientRects()
.item(0); .item(0);
if (end_position.left <= point.x) { if (endPosition.left <= point.x) {
textRef.current.setSelection(end_selection); textRef.current.setSelection(endSelection);
return; return;
} }
if (start_position.left >= point.x) { if (startPosition.left >= point.x) {
textRef.current.setSelection(start_selection); textRef.current.setSelection(startSelection);
return; return;
} }
let range: globalThis.Range; let range: globalThis.Range;
@@ -186,7 +183,7 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
range = document.createRange(); range = document.createRange();
range.setStart(caret.offsetNode, caret.offset); range.setStart(caret.offsetNode, caret.offset);
} }
const slate_rang = ReactEditor.toSlateRange( const slateRang = ReactEditor.toSlateRange(
textRef.current.editor, textRef.current.editor,
range, range,
{ {
@@ -194,19 +191,19 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
suppressThrow: true, suppressThrow: true,
} }
); );
textRef.current.setSelection(slate_rang); textRef.current.setSelection(slateRang);
} }
} catch (e) { } catch (e) {
console.log('e: ', e); console.log('e: ', e);
textRef.current.setSelection(end_selection); textRef.current.setSelection(endSelection);
} }
} }
}, },
[textRef] [textRef]
); );
useOnSelectActive(block.id, on_text_view_active); useOnSelectActive(block.id, onTextViewActive);
useOnSelectSetSelection<'Range'>(block.id, on_text_view_set_selection); useOnSelectSetSelection<'Range'>(block.id, onTextViewSetSelection);
useEffect(() => { useEffect(() => {
if (textRef.current) { if (textRef.current) {
@@ -232,17 +229,17 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
(block.id === lastSelectNodeId && type === 'Range') || (block.id === lastSelectNodeId && type === 'Range') ||
(type === 'Range' && info) (type === 'Range' && info)
) { ) {
on_text_view_active('end'); onTextViewActive('end');
} else { } else {
on_text_view_active('start'); onTextViewActive('start');
} }
} }
} catch (e) { } catch (e) {
console.warn('error occured in set active in initialization'); console.warn('error occured in set active in initialization');
} }
}, [block.id, editor.selectionManager, on_text_view_active, textRef]); }, [block.id, editor.selectionManager, onTextViewActive, textRef]);
const on_text_change: TextProps['handleChange'] = async ( const onTextChange: TextProps['handleChange'] = async (
value, value,
textStyle textStyle
) => { ) => {
@@ -263,39 +260,34 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
}); });
} }
}; };
const get_now_and_pre_rang_position = () => { const getNowAndPreRangPosition = () => {
window.getSelection().getRangeAt(0); const nowRange = window.getSelection().getRangeAt(0);
// const now_range = let prePosition = null;
// editor.selectionManager.currentSelectInfo?.browserSelection.getRangeAt( const nowPosition = nowRange.getClientRects().item(0);
// 0
// );
const now_range = window.getSelection().getRangeAt(0);
let pre_position = null;
const now_position = now_range.getClientRects().item(0);
try { try {
if (now_range.startOffset !== 0) { if (nowRange.startOffset !== 0) {
const pre_rang = document.createRange(); const preRang = document.createRange();
pre_rang.setStart( preRang.setStart(
now_range.startContainer, nowRange.startContainer,
now_range.startOffset + 1 nowRange.startOffset + 1
); );
pre_rang.setEnd( preRang.setEnd(
now_range.endContainer, nowRange.endContainer,
now_range.endOffset + 1 nowRange.endOffset + 1
); );
pre_position = pre_rang.getClientRects().item(0); prePosition = preRang.getClientRects().item(0);
} }
} catch (e) { } catch (e) {
// console.log(e); // console.log(e);
} }
return { nowPosition: now_position, prePosition: pre_position }; return { nowPosition: nowPosition, prePosition: prePosition };
}; };
const onKeyboardUp = (event: React.KeyboardEvent<Element>) => { const onKeyboardUp = (event: React.KeyboardEvent<Element>) => {
// if default event is prevented do noting // if default event is prevented do noting
// if U want to disable up/down/enter use capture event for preventing // if U want to disable up/down/enter use capture event for preventing
if (!event.isDefaultPrevented()) { if (!event.isDefaultPrevented()) {
const positions = get_now_and_pre_rang_position(); const positions = getNowAndPreRangPosition();
const prePosition = positions.prePosition; const prePosition = positions.prePosition;
const nowPosition = positions.nowPosition; const nowPosition = positions.nowPosition;
if (prePosition) { if (prePosition) {
@@ -336,7 +328,7 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
// editor.selectionManager.activeNextNode(block.id, 'start'); // editor.selectionManager.activeNextNode(block.id, 'start');
// return; // return;
if (!event.isDefaultPrevented()) { if (!event.isDefaultPrevented()) {
const positions = get_now_and_pre_rang_position(); const positions = getNowAndPreRangPosition();
const prePosition = positions.prePosition; const prePosition = positions.prePosition;
const nowPosition = positions.nowPosition; const nowPosition = positions.nowPosition;
// Create the last element range of slate_editor // Create the last element range of slate_editor
@@ -392,7 +384,7 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
return false; return false;
} }
}; };
const on_select_all = () => { const onSelectAll = () => {
const isSelectAll = const isSelectAll =
textRef.current.isEmpty() || textRef.current.isSelectAll(); textRef.current.isEmpty() || textRef.current.isSelectAll();
if (isSelectAll) { if (isSelectAll) {
@@ -402,22 +394,20 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
return false; return false;
}; };
const on_undo = () => { const onUndo = () => {
editor.undo(); editor.undo();
}; };
const on_redo = () => { const onRedo = () => {
editor.redo(); editor.redo();
}; };
const on_keyboard_esc = () => { const onKeyboardEsc = () => {
if (editor.selectionManager.getSelectedNodesIds().length === 0) { if (editor.selectionManager.getSelectedNodesIds().length === 0) {
const active_node_id = const activeNodeId =
editor.selectionManager.getActivatedNodeId(); editor.selectionManager.getActivatedNodeId();
if (active_node_id) { if (activeNodeId) {
editor.selectionManager.setSelectedNodesIds([ editor.selectionManager.setSelectedNodesIds([activeNodeId]);
active_node_id,
]);
ReactEditor.blur(textRef.current.editor); ReactEditor.blur(textRef.current.editor);
} }
} else { } else {
@@ -425,7 +415,7 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
} }
}; };
const on_shift_click = async (e: MouseEvent) => { const onShiftClick = async (e: MouseEvent) => {
if (e.shiftKey) { if (e.shiftKey) {
const activeId = editor.selectionManager.getActivatedNodeId(); const activeId = editor.selectionManager.getActivatedNodeId();
if (activeId === block.id) { if (activeId === block.id) {
@@ -474,16 +464,16 @@ export const TextManage = forwardRef<ExtendedTextUtils, CreateTextView>(
className={`${otherOptions.className}`} className={`${otherOptions.className}`}
currentValue={properties.text.value} currentValue={properties.text.value}
textStyle={properties.textStyle} textStyle={properties.textStyle}
handleChange={on_text_change} handleChange={onTextChange}
handleUp={onKeyboardUp} handleUp={onKeyboardUp}
handleDown={onKeyboardDown} handleDown={onKeyboardDown}
handleLeft={onKeyboardLeft} handleLeft={onKeyboardLeft}
handleRight={onKeyboardRight} handleRight={onKeyboardRight}
handleSelectAll={on_select_all} handleSelectAll={onSelectAll}
handleMouseDown={on_shift_click} handleMouseDown={onShiftClick}
handleUndo={on_undo} handleUndo={onUndo}
handleRedo={on_redo} handleRedo={onRedo}
handleEsc={on_keyboard_esc} handleEsc={onKeyboardEsc}
{...otherOptions} {...otherOptions}
/> />
); );