diff --git a/.changeset/blue-flies-decide.md b/.changeset/blue-flies-decide.md new file mode 100644 index 0000000000..3a47432a27 --- /dev/null +++ b/.changeset/blue-flies-decide.md @@ -0,0 +1,5 @@ +--- +'slate': patch +--- + +Fix firefox double-click marks issue diff --git a/packages/slate/src/editor/marks.ts b/packages/slate/src/editor/marks.ts index c995c940df..a2d70ae6e2 100644 --- a/packages/slate/src/editor/marks.ts +++ b/packages/slate/src/editor/marks.ts @@ -4,6 +4,7 @@ import { Range } from '../interfaces/range' import { Path } from '../interfaces/path' import { Text } from '../interfaces/text' import { Element } from '../interfaces/element' +import { Point } from '../interfaces' export const marks: EditorInterface['marks'] = (editor, options = {}) => { const { marks, selection } = editor @@ -11,13 +12,32 @@ export const marks: EditorInterface['marks'] = (editor, options = {}) => { if (!selection) { return null } + let { anchor, focus } = selection if (marks) { return marks } if (Range.isExpanded(selection)) { - const [match] = Editor.nodes(editor, { match: Text.isText }) + /** + * COMPAT: Make sure hanging ranges (caused by double clicking in Firefox) + * do not adversely affect the returned marks. + */ + const isEnd = Editor.isEnd(editor, anchor, anchor.path) + if (isEnd) { + const after = Editor.after(editor, anchor as Point) + if (after) { + anchor = after + } + } + + const [match] = Editor.nodes(editor, { + match: Text.isText, + at: { + anchor, + focus, + }, + }) if (match) { const [node] = match as NodeEntry @@ -28,8 +48,8 @@ export const marks: EditorInterface['marks'] = (editor, options = {}) => { } } - const { anchor } = selection const { path } = anchor + let [node] = Editor.leaf(editor, path) if (anchor.offset === 0) { diff --git a/packages/slate/test/interfaces/Editor/marks/firefox-double-click.tsx b/packages/slate/test/interfaces/Editor/marks/firefox-double-click.tsx new file mode 100644 index 0000000000..36334ffc58 --- /dev/null +++ b/packages/slate/test/interfaces/Editor/marks/firefox-double-click.tsx @@ -0,0 +1,28 @@ +/** @jsx jsx */ +import { Editor } from 'slate' +import { jsx } from '../../..' + +/** + * This test verifies that when double clicking a marked word in Firefox, + * Editor.marks for the resulting selection includes the marked word. Double + * clicking a marked word in Firefox results in a selection that starts at the + * end of the previous text node and ends at the end of the marked text node. + */ + +export const input = ( + + + plain + + bold + + + plain + + block two + +) +export const test = editor => { + return Editor.marks(editor) +} +export const output = { bold: true }