From 1b165cbe585db03e45a4f82f6aab136519995b95 Mon Sep 17 00:00:00 2001 From: Jawell Date: Tue, 22 Mar 2022 18:40:49 +0200 Subject: [PATCH 1/3] fix node edges selection on firefox --- .../slate-react/src/plugin/react-editor.ts | 57 ++++++++++++++++--- 1 file changed, 48 insertions(+), 9 deletions(-) diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts index 83a429f99e..233c39dee6 100644 --- a/packages/slate-react/src/plugin/react-editor.ts +++ b/packages/slate-react/src/plugin/react-editor.ts @@ -471,10 +471,10 @@ export const ReactEditor = { editor: ReactEditor, domPoint: DOMPoint, options: { - exactMatch: T - suppressThrow: T + exactMatch: boolean + suppressThrow: boolean } - ): T extends true ? Point | null : Point { + ): Point | null { const { exactMatch, suppressThrow } = options const [nearestNode, nearestOffset] = exactMatch ? domPoint @@ -642,16 +642,15 @@ export const ReactEditor = { ) } - const anchor = ReactEditor.toSlatePoint( - editor, - [anchorNode, anchorOffset], - { exactMatch, suppressThrow } - ) + let anchor = ReactEditor.toSlatePoint(editor, [anchorNode, anchorOffset], { + exactMatch, + suppressThrow, + }) if (!anchor) { return null as T extends true ? Range | null : Range } - const focus = isCollapsed + let focus = isCollapsed ? anchor : ReactEditor.toSlatePoint(editor, [focusNode, focusOffset], { exactMatch, @@ -661,6 +660,46 @@ export const ReactEditor = { return null as T extends true ? Range | null : Range } + /** + * suppose we have this document: + * + * { type: 'paragraph', + * children: [ + * { text: 'foo ' }, + * { text: 'bar' }, + * { text: ' baz' } + * ] + * } + * + * a double click on "bar" on chrome will create this range: + * + * anchor -> [0,1] offset 0 + * focus -> [0,1] offset 3 + * + * while on firefox will create this range: + * + * anchor -> [0,0] offset 4 + * focus -> [0,2] offset 0 + * + * let's try to fix it... + */ + + if (IS_FIREFOX && !isCollapsed && anchorNode !== focusNode) { + const isEnd = Editor.isEnd(editor, anchor, anchor.path) + const isStart = Editor.isStart(editor, focus, focus.path) + + if (isEnd) { + const after = Editor.after(editor, anchor as Point) + // Editor.after() might return undefined + anchor = after || anchor + } + + if (isStart) { + const before = Editor.before(editor, focus as Point) + focus = before || focus + } + } + let range: Range = { anchor: anchor as Point, focus: focus as Point } // if the selection is a hanging range that ends in a void // and the DOM focus is an Element From 246db1257990a3bb905a25cc77ed1a5581e5eced Mon Sep 17 00:00:00 2001 From: Jawell Date: Wed, 23 Mar 2022 10:05:49 +0200 Subject: [PATCH 2/3] add changeset --- .changeset/thirty-starfishes-knock.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/thirty-starfishes-knock.md diff --git a/.changeset/thirty-starfishes-knock.md b/.changeset/thirty-starfishes-knock.md new file mode 100644 index 0000000000..33348d9d0a --- /dev/null +++ b/.changeset/thirty-starfishes-knock.md @@ -0,0 +1,5 @@ +--- +'slate-react': major +--- + +Firefox: fix wrong text highlighting with double-click From a1a58a61e00a21d7dc799642d5a40059514da30f Mon Sep 17 00:00:00 2001 From: Joe Anderson Date: Sun, 29 Jan 2023 11:19:08 +0000 Subject: [PATCH 3/3] Fix type signatures --- packages/slate-react/src/plugin/react-editor.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/slate-react/src/plugin/react-editor.ts b/packages/slate-react/src/plugin/react-editor.ts index 97bfe7dd30..783b99e28a 100644 --- a/packages/slate-react/src/plugin/react-editor.ts +++ b/packages/slate-react/src/plugin/react-editor.ts @@ -535,9 +535,9 @@ export const ReactEditor = { domPoint: DOMPoint, options: { exactMatch: boolean - suppressThrow: boolean + suppressThrow: T } - ): Point | null { + ): T extends true ? Point | null : Point { const { exactMatch, suppressThrow } = options const [nearestNode, nearestOffset] = exactMatch ? domPoint @@ -703,7 +703,7 @@ export const ReactEditor = { editor: ReactEditor, domRange: DOMRange | DOMStaticRange | DOMSelection, options: { - exactMatch: T + exactMatch: boolean suppressThrow: T } ): T extends true ? Range | null : Range { @@ -797,18 +797,18 @@ export const ReactEditor = { */ if (IS_FIREFOX && !isCollapsed && anchorNode !== focusNode) { - const isEnd = Editor.isEnd(editor, anchor, anchor.path) - const isStart = Editor.isStart(editor, focus, focus.path) + const isEnd = Editor.isEnd(editor, anchor!, anchor.path) + const isStart = Editor.isStart(editor, focus!, focus.path) if (isEnd) { const after = Editor.after(editor, anchor as Point) // Editor.after() might return undefined - anchor = after || anchor + anchor = (after || anchor!) as T extends true ? Point | null : Point } if (isStart) { const before = Editor.before(editor, focus as Point) - focus = before || focus + focus = (before || focus!) as T extends true ? Point | null : Point } }