feat: Allow all marks to coexist with the Code mark

[frankieyan]

Overview

This allows other marks to co-exist with the inline code mark, allowing it to be rendered with formatting and links, like this: click me

PR Checklist

Closes #305

• Pull request title follows the Conventional Commits Specification
• Added/updated unit test cases and/or end-to-end test cases
• Added/updated documentation to Storybook or README.md

Test plan

• Open the deploy preview link below, and go to the rich text kit's demo
• Paste this content into the editor using cmd + shift + v (paste markdown):

[Testing `some code` in a link](https://google.ca/)

• The entire line is wrapped in the link, and the inline block is rendered properly
• Type some text as an inline code, then use the formatting toolbar to apply bold, italics, and a link to it. Each option is applied correctly
• Select your linked inline code and its surrounding content, then hit cmd + shift + c. Paste what you've copied somewhere and ensure the resulting markdown is correct

Demo

Before	After

[netlify]

✅ Deploy Preview for doist-typist ready!

Name	Link
🔨 Latest commit	edc2239
🔍 Latest deploy log	https://app.netlify.com/sites/doist-typist/deploys/648cd8858ce8b500088aa5e5
😎 Deploy Preview	https://deploy-preview-309--doist-typist.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.

[rfgamaral]

Can't wait for this to be merged and the change to be applied to Twist, good job 👍

Besides all the comments I left in the code, I'd like to propose a slightly different PR title (which is what will be added to CHANGELOG.md):

• feat: Allow all marks to coexist with the Code mark

[rfgamaral]

I just realized that allowing all marks with the Code mark creates a small issue when applying marks programatically (through keyboard shortcuts or a toolbar). See how Code wraps around some marks like Italic and Strike, when it shouldn't:

Although the style in the editor looks acceptable, inspecting the DOM reveals that the <em> and <s> elements are inside <code>, thus the Markdown output that you see above.

And as you can see from the demo, the order the toolbar buttons are pressed is not relevant, because the order they are applied come from the priority and/or the alphabetical mark name (when they have the same priority).

To fix this, I propose the following to be added to extension-priorities.ts:

/**
 * Priority for the `RichTextCode` extension. This needs to be lower than the default for most
 * built-in and official extensions (i.e. `100`), so that other marks wrap the `Code` mark, and not
 * the other way around (i.e. prevents `<code><em>code</em></code>` from happening).
 */
const CODE_EXTENSION_PRIORITY = 99

And priority: CODE_EXTENSION_PRIORITY be added to RichTextCode (before excludes, for consistency 😅).

[frankieyan]

Thank you Ricardo, nice find with mark ordering bug 🙌

[rfgamaral]

Ready to be 🚢'ed.

Can't wait to start using this on Twist 😁

[doistbot]

🎉 This PR is included in version 1.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀