Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow typing at the end of an inline element #4578

Merged
merged 8 commits into from
Oct 19, 2021
Merged

Allow typing at the end of an inline element #4578

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
473397a
Allow typing at the end of an inline
jameshfisher Oct 8, 2021
8609f2c
add changeset
jameshfisher Oct 8, 2021
6619014
Fix test: insert at the end of an inline should _not_ have special be…
jameshfisher Oct 10, 2021
f9f36cd
The selection is no longer moved in insertText so we don't need this …
jameshfisher Oct 10, 2021
d8dc562
fix:prettier
jameshfisher Oct 12, 2021
a13778f
Revert "The selection is no longer moved in insertText so we don't ne…
jameshfisher Oct 12, 2021
560eb2a
Explain the real reason for this special case - native browser bugs
jameshfisher Oct 12, 2021
3bbc418
Merge branch 'main' into allow-typing-at-end-of-inline
jameshfisher Oct 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/dirty-mayflies-relate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'slate': patch
---

Allow typing at the end of inline elements
5 changes: 3 additions & 2 deletions packages/slate-react/src/components/editable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand Down
21 changes: 0 additions & 21 deletions packages/slate/src/create-editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
7 changes: 4 additions & 3 deletions packages/slate/test/transforms/insertText/selection/inline-end.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,10 @@ export const output = (
<editor>
<block>
one
<inline>two</inline>
four
<cursor />
<inline>
twofour
<cursor />
</inline>
three
</block>
</editor>
Expand Down