feat: Allow all marks to coexist with the Code mark (Doist#309)

src/constants/extension-priorities.ts

@@ -33,8 +33,16 @@ const VIEW_EVENT_HANDLERS_PRIORITY = 105
  */
 const BLOCKQUOTE_EXTENSION_PRIORITY = 101
 
+/**
+ * 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
+
 export {
     BLOCKQUOTE_EXTENSION_PRIORITY,
+    CODE_EXTENSION_PRIORITY,
     PASTE_EXTENSION_PRIORITY,
     SMART_MARKDOWN_TYPING_PRIORITY,
     SUGGESTION_EXTENSION_PRIORITY,

src/extensions/rich-text/rich-text-code.ts

@@ -0,0 +1,18 @@
+import { Code } from '@tiptap/extension-code'
+
+import { CODE_EXTENSION_PRIORITY } from '../../constants/extension-priorities'
+
+/**
+ * Custom extension that extends the built-in `Code` extension to allow all marks (e.g., Bold,
+ * Italic, and Strikethrough) to coexist with the `Code` mark (as opposed to disallowing all any
+ * other mark by default).
+ *
+ * @see https://tiptap.dev/api/schema#excludes
+ * @see https://prosemirror.net/docs/ref/#model.MarkSpec.excludes
+ */
+const RichTextCode = Code.extend({
+    priority: CODE_EXTENSION_PRIORITY,
+    excludes: Code.name,
+})
+
+export { RichTextCode }

src/extensions/rich-text/rich-text-kit.ts

@@ -2,7 +2,6 @@ import { Extension } from '@tiptap/core'
 import { Blockquote } from '@tiptap/extension-blockquote'
 import { Bold } from '@tiptap/extension-bold'
 import { BulletList } from '@tiptap/extension-bullet-list'
-import { Code } from '@tiptap/extension-code'
 import { CodeBlock } from '@tiptap/extension-code-block'
 import { Dropcursor } from '@tiptap/extension-dropcursor'
 import { Gapcursor } from '@tiptap/extension-gapcursor'
@@ -26,6 +25,7 @@ import { BoldAndItalics } from './bold-and-italics'
 import { CurvenoteCodemark } from './curvenote-codemark'
 import { PasteEmojis } from './paste-emojis'
 import { PasteMarkdown } from './paste-markdown'
+import { RichTextCode } from './rich-text-code'
 import { RichTextDocument } from './rich-text-document'
 import { RichTextHorizontalRule } from './rich-text-horizontal-rule'
 import { RichTextImage } from './rich-text-image'
@@ -209,7 +209,7 @@ const RichTextKit = Extension.create<RichTextKitOptions>({
 
         if (this.options.code !== false) {
             extensions.push(
-                Code.configure(this.options?.code),
+                RichTextCode.configure(this.options?.code),
 
                 // Enhances the Code extension capabilities with additional features
                 CurvenoteCodemark,

src/helpers/schema.test.ts

@@ -61,7 +61,7 @@ describe('Helper: Schema', () => {
     describe('#computeSchemaId', () => {
         test('returns a string ID that matches the given editor schema', () => {
             expect(computeSchemaId(getSchema([RichTextKit]))).toBe(
-                'link,bold,code,italic,boldAndItalics,strike,paragraph,blockquote,bulletList,codeBlock,doc,hardBreak,heading,horizontalRule,image,listItem,orderedList,text',
+                'link,bold,italic,boldAndItalics,strike,code,paragraph,blockquote,bulletList,codeBlock,doc,hardBreak,heading,horizontalRule,image,listItem,orderedList,text',
             )
         })
     })