imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Support multiple lines

Browse source
This commit is contained in:
Florian Duros 2022-12-02 17:01:18 +01:00
parent 7fcc65a3fe
commit 5db885e337
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
2 changed files with 10 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/views/rooms/wysiwyg_composer/components/Editor.tsx
View file

@ -34,8 +34,7 @@ export const Editor = memo(
function Editor({ disabled, placeholder, leftComponent, rightComponent }: EditorProps, ref, function Editor({ disabled, placeholder, leftComponent, rightComponent }: EditorProps, ref,
) { ) {
const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT); const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
const { onFocus, onBlur, selectPreviousSelection } = const { onFocus, onBlur, selectPreviousSelection } = useSelection();
useSelection(ref as MutableRefObject<HTMLDivElement | null>);
return <div return <div
data-testid="WysiwygComposerEditor" data-testid="WysiwygComposerEditor"

15
src/components/views/rooms/wysiwyg_composer/hooks/useSelection.ts
View file

@ -14,13 +14,15 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import { RefObject, useCallback, useEffect, useRef } from "react"; import { useCallback, useEffect, useRef } from "react";
import useFocus from "../../../../../hooks/useFocus"; import useFocus from "../../../../../hooks/useFocus";
export function useSelection(ref: RefObject<HTMLDivElement>) { export function useSelection() {
const selectionRef = useRef({ const selectionRef = useRef({
anchorNode: null,
anchorOffset: 0, anchorOffset: 0,
focusNode: null,
focusOffset: 0, focusOffset: 0,
}); });
const [isFocused, focusProps] = useFocus(); const [isFocused, focusProps] = useFocus();
@ -28,9 +30,10 @@ export function useSelection(ref: RefObject<HTMLDivElement>) {
useEffect(() => { useEffect(() => {
function onSelectionChange() { function onSelectionChange() {
const selection = document.getSelection(); const selection = document.getSelection();
console.log('selection', selection);
selectionRef.current = { selectionRef.current = {
anchorNode: selection.anchorNode,
anchorOffset: selection.anchorOffset, anchorOffset: selection.anchorOffset,
focusNode: selection.focusNode,
focusOffset: selection.focusOffset, focusOffset: selection.focusOffset,
}; };
} }
@ -44,11 +47,11 @@ export function useSelection(ref: RefObject<HTMLDivElement>) {
const selectPreviousSelection = useCallback(() => { const selectPreviousSelection = useCallback(() => {
const range = new Range(); const range = new Range();
range.setStart(ref.current.firstChild, selectionRef.current.anchorOffset); range.setStart(selectionRef.current.anchorNode, selectionRef.current.anchorOffset);
range.setEnd(ref.current.firstChild, selectionRef.current.focusOffset); range.setEnd(selectionRef.current.focusNode, selectionRef.current.focusOffset);
document.getSelection().removeAllRanges(); document.getSelection().removeAllRanges();
document.getSelection().addRange(range); document.getSelection().addRange(range);
}, [selectionRef, ref]); }, [selectionRef]);
return { ...focusProps, selectPreviousSelection }; return { ...focusProps, selectPreviousSelection };
} }