feat(rich-text-editor): Add tagLink, subscript, superscript, kbd, and spoiler input #158

tmcentee · 2022-07-07T21:37:44Z

Closes #51.

Describe your changes

This PR adds four new features to the Rich Text editor that were previously Markdown-only. All include keyboard shortcuts as well as manual entry via a new overflow dropdown menu option.

These include the following:

TagLinks `CTRL-[`

Subscript `Ctrl - ;` and Superscript `Ctrl - :`

Spoiler `CTRL-]`

PR Checklist

All new/changed functionality includes unit and (optionally) e2e tests as appropriate
All new/changed functions have /** ... */ docs
I've added the bug/enhancement and other labels as appropriate

Environment(s) tested

Device: Desktop
OS: Windows
Browser: Chrome
Version: 103

netlify · 2022-07-07T21:38:52Z

✅ Deploy Preview for nifty-lalande-39c157 ready!

Name	Link
🔨 Latest commit	`e682c75`
🔍 Latest deploy log	https://app.netlify.com/sites/nifty-lalande-39c157/deploys/62e17e7569a216000808d54d
😎 Deploy Preview	https://deploy-preview-158--nifty-lalande-39c157.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

aalear · 2022-07-13T13:55:08Z

The tag link shouldn't support multiple words. There's existing validation for allowed tag names in parse_tag_link() that could perhaps be reused?

- util method to validate tagName content - test update to cover disabled tag input - renamed shortcut

tmcentee · 2022-07-13T18:27:41Z

@aalear Thanks for the heads-up. I pushed some changes to better validate the links. Now you can only convert the selection if the trimmed content doesn't have any whitespace. (trimmed because double clicking words in Chrome on Windows also selects the space after the word)

b-kelly

Thanks for the PR! I have added some suggestions for changes inline

test/rich-text/commands/index.test.ts

src/rich-text/commands/index.ts

test/rich-text/commands/index.test.ts

…o use

tmcentee · 2022-07-15T16:19:48Z

@b-kelly I think I've addressed everything save for my comment about toggleWrapIn versus replace text for the tagLink node.

I also added <kbd> mark type and test updates.

tmcentee · 2022-07-18T20:49:43Z

I pushed updates to the keyboard shortcuts for superscript and subscript to match most other editor conventions.

b-kelly

Note - blocked by #157, which also exposes toggleWrapIn, adding tests and docs

src/shared/utils.ts

b-kelly

Imo, the rich-text version is ready for merge. Any chance we can get the dropdown menu in markdown mode as well? I'd like to keep the menus as aligned as possible. If this is an outsized request, we can consider getting this PR merged first.

b-kelly · 2022-07-19T19:33:59Z

src/rich-text/key-bindings.ts

@@ -70,6 +71,19 @@ export function allKeymaps(
        ...bindLetterKeymap("Mod-h", toggleHeadingLevel()),
        ...bindLetterKeymap("Mod-r", insertHorizontalRuleCommand),
        ...bindLetterKeymap("Mod-m", setBlockType(schema.nodes.code_block)),
+        ...bindLetterKeymap(
+            "Mod-[",


reviewer's note: mod+[/] are commonly used in IDEs to (un)indent a line. This shouldn't pose too much of an issue though, as we can chain commands together, placing the code indent command first, falling back to creating a taglink.

No action necessary.

tmcentee · 2022-07-26T18:53:47Z

@b-kelly

If this is an outsized request, we can consider getting this PR merged first.

I think we should get this merged and follow up with the Markdown menu items. I don't have a ton of time this sprint to dig into it myself.

…iler entries/shortcuts (#158) fixes #51

Tyler McEntee and others added 5 commits July 6, 2022 18:17

saving progress on tag

2727669

Adding overflow dropdown for tag command

c0c828b

chore: fix minor typos (#156)

8350275

Updating localization for tagLink

9b01814

Adding new mark buttons for sup/sub and spoiler wrap.

9106c38

tmcentee added the mode - rich text Affects the editor's rich text (wysiwyg) mode label Jul 7, 2022

tmcentee self-assigned this Jul 7, 2022

Tyler McEntee added 2 commits July 7, 2022 16:39

Undo commonmark changes

9164fea

Fix broken active methods. Renamed test var.

4ab904f

tmcentee added the enhancement New feature or request label Jul 8, 2022

Adding tests for wrapping node with spoiler/blockquote

f3b402c

tmcentee requested a review from b-kelly July 8, 2022 13:57

tmcentee marked this pull request as ready for review July 8, 2022 13:57

Forgot docstring

201d174

tmcentee changed the title ~~Issue 51: Rich Text Input Parity for some Markdown-only nodes~~ feat(rich-text-editor): Add tagLink, subscript, superscript, and spoiler input to rich-text editor Jul 12, 2022

tmcentee changed the title ~~feat(rich-text-editor): Add tagLink, subscript, superscript, and spoiler input to rich-text editor~~ feat(rich-text-editor): Add tagLink, subscript, superscript, and spoiler input Jul 12, 2022

tmcentee closed this Jul 13, 2022

tmcentee reopened this Jul 13, 2022

Tyler McEntee added 2 commits July 13, 2022 09:21

Merge branch 'main' into tmcentee/editor-51/new-rich-text-nodes

c54909d

Updated tagLink validation.

b7af4cc

- util method to validate tagName content - test update to cover disabled tag input - renamed shortcut

b-kelly added the needs design Needs a design pass to clean up the UI or UX label Jul 13, 2022

b-kelly added 4 commits July 13, 2022 15:17

Merge branch 'main' into tmcentee/editor-51/new-rich-text-nodes

16edd14

readd items mistakenly removed during merge

13993ee

tweak name

ad31959

documentation

33ef1d7

b-kelly requested changes Jul 13, 2022

View reviewed changes

tag -> tagLink

61048ab

Tyler McEntee added 5 commits July 14, 2022 15:31

adding basic docstrings for exported functions

950198b

update strings in marks test

836f92b

Created new NodeSelection test helper methods. Updated tagLink test t…

cad22e5

…o use

Added more thorough tagLink target validation with tests

19419c4

Adding <kbd> mark type to Rich Text input

3d31a91

tmcentee requested a review from b-kelly July 15, 2022 16:19

tmcentee changed the title ~~feat(rich-text-editor): Add tagLink, subscript, superscript, and spoiler input~~ feat(rich-text-editor): Add tagLink, subscript, superscript, kbd, and spoiler input Jul 18, 2022

Changing keyboard shortcuts for sub/sup to match Google Docs

2838e95

Tyler McEntee added 2 commits July 18, 2022 16:20

Added trailing space logic to adjust text selection on tag creation

79b1113

Adding meta tag input. Reworked keyboard shortcuts

6b42611

b-kelly reviewed Jul 19, 2022

View reviewed changes

src/shared/utils.ts Outdated Show resolved Hide resolved

b-kelly added 5 commits July 19, 2022 15:23

Merge branch 'main' into tmcentee/editor-51/new-rich-text-nodes

c4b2117

update to use TagLinkOptions.validate adding in main branch

75f443b

cleanup

f1b0648

fix failing tests

2582885

cleanup

e49a2f8

b-kelly requested changes Jul 25, 2022

View reviewed changes

b-kelly force-pushed the tmcentee/editor-51/new-rich-text-nodes branch from 124e993 to e49a2f8 Compare July 25, 2022 17:42

Merge branch 'main' into tmcentee/editor-51/new-rich-text-nodes

802cec6

b-kelly added 3 commits July 27, 2022 13:54

Merge branch 'main' into tmcentee/editor-51/new-rich-text-nodes

8c1b168

cleanup

28e25d7

move overflow dropdown

e682c75

b-kelly merged commit 77fa060 into main Aug 4, 2022

b-kelly deleted the tmcentee/editor-51/new-rich-text-nodes branch August 4, 2022 14:18

b-kelly pushed a commit that referenced this pull request Aug 4, 2022

feat(rich-text-editor): add rich-text tagLink, sub, sup, kbd, and spo…

4936bbe

…iler entries/shortcuts (#158) fixes #51

aalear mentioned this pull request Aug 16, 2022

feat: support copy/pasting tag link nodes in rich text mode #177

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(rich-text-editor): Add tagLink, subscript, superscript, kbd, and spoiler input #158

feat(rich-text-editor): Add tagLink, subscript, superscript, kbd, and spoiler input #158

tmcentee commented Jul 7, 2022 •

edited by b-kelly

netlify bot commented Jul 7, 2022 •

edited

aalear commented Jul 13, 2022 •

edited

tmcentee commented Jul 13, 2022

b-kelly left a comment

tmcentee commented Jul 15, 2022

tmcentee commented Jul 18, 2022

b-kelly left a comment

b-kelly left a comment

b-kelly Jul 19, 2022

tmcentee commented Jul 26, 2022 •

edited

feat(rich-text-editor): Add tagLink, subscript, superscript, kbd, and spoiler input #158

feat(rich-text-editor): Add tagLink, subscript, superscript, kbd, and spoiler input #158

Conversation

tmcentee commented Jul 7, 2022 • edited by b-kelly

TagLinks CTRL-[

Subscript Ctrl - ; and Superscript Ctrl - :

Spoiler CTRL-]

netlify bot commented Jul 7, 2022 • edited

✅ Deploy Preview for nifty-lalande-39c157 ready!

aalear commented Jul 13, 2022 • edited

tmcentee commented Jul 13, 2022

b-kelly left a comment

Choose a reason for hiding this comment

tmcentee commented Jul 15, 2022

tmcentee commented Jul 18, 2022

b-kelly left a comment

Choose a reason for hiding this comment

b-kelly left a comment

Choose a reason for hiding this comment

b-kelly Jul 19, 2022

Choose a reason for hiding this comment

tmcentee commented Jul 26, 2022 • edited

tmcentee commented Jul 7, 2022 •

edited by b-kelly

TagLinks `CTRL-[`

Subscript `Ctrl - ;` and Superscript `Ctrl - :`

Spoiler `CTRL-]`

netlify bot commented Jul 7, 2022 •

edited

aalear commented Jul 13, 2022 •

edited

tmcentee commented Jul 26, 2022 •

edited