diff --git a/.changeset/dirty-mayflies-relate.md b/.changeset/dirty-mayflies-relate.md new file mode 100644 index 000000000..990435560 --- /dev/null +++ b/.changeset/dirty-mayflies-relate.md @@ -0,0 +1,5 @@ +--- +'slate': patch +--- + +Allow typing at the end of inline elements diff --git a/packages/slate-react/src/components/editable.tsx b/packages/slate-react/src/components/editable.tsx index f0c45fe62..5575f7d08 100644 --- a/packages/slate-react/src/components/editable.tsx +++ b/packages/slate-react/src/components/editable.tsx @@ -288,7 +288,7 @@ export const Editable = (props: EditableProps) => { event.data && event.data.length === 1 && /[a-z ]/i.test(event.data) && - // Chrome seems to have issues correctly editing the start of nodes. + // Chrome has issues correctly editing the start of nodes: https://bugs.chromium.org/p/chromium/issues/detail?id=1249405 // When there is an inline element, e.g. a link, and you select // right after it (the start of the next node). selection.anchor.offset !== 0 @@ -301,7 +301,8 @@ export const Editable = (props: EditableProps) => { native = false } - // and because of the selection moving in `insertText` (create-editor.ts). + // Chrome also has issues correctly editing the end of nodes: https://bugs.chromium.org/p/chromium/issues/detail?id=1259100 + // Therefore we don't allow native events to insert text at the end of nodes. const { anchor } = selection const inline = Editor.above(editor, { at: anchor, diff --git a/packages/slate/src/create-editor.ts b/packages/slate/src/create-editor.ts index 7e4bd2122..82e07ce2d 100644 --- a/packages/slate/src/create-editor.ts +++ b/packages/slate/src/create-editor.ts @@ -162,27 +162,6 @@ export const createEditor = (): Editor => { const { selection, marks } = editor if (selection) { - // If the cursor is at the end of an inline, move it outside of - // the inline before inserting - if (Range.isCollapsed(selection)) { - const inline = Editor.above(editor, { - match: n => Editor.isInline(editor, n), - mode: 'highest', - }) - - if (inline) { - const [, inlinePath] = inline - - if (Editor.isEnd(editor, selection.anchor, inlinePath)) { - const point = Editor.after(editor, inlinePath)! - Transforms.setSelection(editor, { - anchor: point, - focus: point, - }) - } - } - } - if (marks) { const node = { text, ...marks } Transforms.insertNodes(editor, node) diff --git a/packages/slate/test/transforms/insertText/selection/inline-end.tsx b/packages/slate/test/transforms/insertText/selection/inline-end.tsx index ba5b89c95..de1c7b42a 100644 --- a/packages/slate/test/transforms/insertText/selection/inline-end.tsx +++ b/packages/slate/test/transforms/insertText/selection/inline-end.tsx @@ -20,9 +20,10 @@ export const output = ( one - two - four - + + twofour + + three