Rich text: add character shortcuts for wrapping selection #42469
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ellatrix
added
[Type] Enhancement
|
Size Change: +287 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
ellatrix
force-pushed
the
try/before-input-rules
branch
2 times, most recently
from
6b5c2fc
to
4a768d1
Compare
ellatrix
added
the
[Feature] Writing Flow
draganescu
reviewed
Jul 25, 2022
packages/block-editor/src/components/rich-text/use-before-input-rules.js
Outdated
Show resolved
Hide resolved
draganescu
approved these changes
Jul 25, 2022
mtias
reviewed
Jul 26, 2022
| */ | ||
| const wrapSelectionSettings = [ | ||
| '`', | ||
| '()', |
There was a problem hiding this comment.
I'm a bit worried with expanding these to characters that are natural openers because I suspect it's a typical action to select a word and type the first letter of what should replace it — parentheses and quotation marks, in particular, would have a much higher incidence of cases where the intention is indeed to replace the selected text with the mark, not to wrap it in them.
There was a problem hiding this comment.
Should we try it and see if it's discovered? If it's doing something unexpected, we can always remove some of the characters easily?
There was a problem hiding this comment.
I'm fine with it either way, just curious how people will react to it.
There was a problem hiding this comment.
I think it's worth trying to see how it feels in practice, but I think I'd rather add them a bit more incrementally so we can focus feature announcements on the ones we are more certain about first without the ones that could be problematic tainting the feature.
There was a problem hiding this comment.
Ok, I removed everything but ` and the quotes. Or should we remove the quotes too?
There was a problem hiding this comment.
I remember someone asking for the quotes back when we first added pasting a link over selection, but I can't find that conversation now...
ellatrix
force-pushed
the
try/before-input-rules
branch
from
4a768d1
to
944804e
Compare
mtias
approved these changes
Aug 1, 2022
30 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
A new tiny rich text feature: when you select some text and press the back tick (
`), it will wrap the selection around back ticks and as a result wrap it in a code tag instead of replacing the selection with a back tick.The feature is generalised to work with any characters. So if you press
(for example, it will also wrap the selection with()instead of deleting the selection. Same for"etc.Why?
It's a cool shortcut.
How?
The feature is a simple behavioural hook and completely isolated. It's added to the block editor's RichText implementation. It works by listening to the
beforeinputevent.Testing Instructions
Select some text. Press
`.Screenshots or screencast