Fix selection

This commit is contained in:
Florian Duros 2022-10-26 14:53:44 +02:00
parent d001ddebbc
commit f1610dae3d
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
7 changed files with 31 additions and 11 deletions

View file

@ -19,6 +19,7 @@ import React, { MutableRefObject, ReactNode } from 'react';
import { useComposerFunctions } from '../hooks/useComposerFunctions';
import { usePlainTextInitialization } from '../hooks/usePlainTextInitialization';
import { usePlainTextListeners } from '../hooks/usePlainTextListeners';
import { useSetCursorPosition } from '../hooks/useSetCursorPosition';
import { ComposerFunctions } from '../types';
import { Editor } from "./Editor";
@ -40,6 +41,7 @@ export function PlainTextComposer({
const { ref, onInput, onPaste, onKeyDown } = usePlainTextListeners(onChange, onSend);
const composerFunctions = useComposerFunctions(ref);
usePlainTextInitialization(initialContent, ref);
useSetCursorPosition(disabled, ref);
return <div className={className} onInput={onInput} onPaste={onPaste} onKeyDown={onKeyDown}>
<Editor ref={ref} disabled={disabled} />

View file

@ -48,12 +48,13 @@ export const WysiwygComposer = memo(function WysiwygComposer(
}
}, [onChange, content, disabled]);
useSetCursorPosition(isWysiwygReady, ref);
const isReady = isWysiwygReady && !disabled;
useSetCursorPosition(!isReady, ref);
return (
<div className={className}>
<FormattingButtons composer={wysiwyg} formattingStates={formattingStates} />
<Editor ref={ref} disabled={!isWysiwygReady || disabled} />
<Editor ref={ref} disabled={!isReady} />
{ children?.(ref, wysiwyg) }
</div>
);

View file

@ -18,10 +18,10 @@ import { RefObject, useEffect } from "react";
import { setCursorPositionAtTheEnd } from "./utils";
export function useSetCursorPosition(isComposerReady: boolean, ref: RefObject<HTMLElement>) {
export function useSetCursorPosition(disabled: boolean, ref: RefObject<HTMLElement>) {
useEffect(() => {
if (ref.current && isComposerReady) {
if (ref.current && !disabled) {
setCursorPositionAtTheEnd(ref.current);
}
}, [ref, isComposerReady]);
}, [ref, disabled]);
}

View file

@ -46,9 +46,9 @@ export function setCursorPositionAtTheEnd(element: HTMLElement) {
const range = document.createRange();
range.selectNodeContents(element);
range.collapse(false);
const sel = document.getSelection();
sel.removeAllRanges();
sel.addRange(range);
const selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(range);
element.focus();
}