OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Support multiple lines

pull/28788/head^2
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
Show Stats 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,
) {
const isExpanded = useIsExpanded(ref as MutableRefObject<HTMLDivElement | null>, HEIGHT_BREAKING_POINT);
const { onFocus, onBlur, selectPreviousSelection } =
useSelection(ref as MutableRefObject<HTMLDivElement | null>);
const { onFocus, onBlur, selectPreviousSelection } = useSelection();
return <div
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.
*/
import { RefObject, useCallback, useEffect, useRef } from "react";
import { useCallback, useEffect, useRef } from "react";
import useFocus from "../../../../../hooks/useFocus";
export function useSelection(ref: RefObject<HTMLDivElement>) {
export function useSelection() {
const selectionRef = useRef({
anchorNode: null,
anchorOffset: 0,
focusNode: null,
focusOffset: 0,
});
const [isFocused, focusProps] = useFocus();
@ -28,9 +30,10 @@ export function useSelection(ref: RefObject<HTMLDivElement>) {
useEffect(() => {
function onSelectionChange() {
const selection = document.getSelection();
console.log('selection', selection);
selectionRef.current = {
anchorNode: selection.anchorNode,
anchorOffset: selection.anchorOffset,
focusNode: selection.focusNode,
focusOffset: selection.focusOffset,
};
}
@ -44,11 +47,11 @@ export function useSelection(ref: RefObject<HTMLDivElement>) {
const selectPreviousSelection = useCallback(() => {
const range = new Range();
range.setStart(ref.current.firstChild, selectionRef.current.anchorOffset);
range.setEnd(ref.current.firstChild, selectionRef.current.focusOffset);
range.setStart(selectionRef.current.anchorNode, selectionRef.current.anchorOffset);
range.setEnd(selectionRef.current.focusNode, selectionRef.current.focusOffset);
document.getSelection().removeAllRanges();
document.getSelection().addRange(range);
}, [selectionRef, ref]);
}, [selectionRef]);
return { ...focusProps, selectPreviousSelection };
}