Allow to wrap inline code in other marks

Allow inline code to be wrapped in marks
like bold, italic, strikethrough, etc.

Changelog: added

app/assets/javascripts/content_editor/constants.js

@@ -49,3 +49,10 @@ export const LOADING_ERROR_EVENT = 'loadingError';
 export const PARSE_HTML_PRIORITY_LOWEST = 1;
 export const PARSE_HTML_PRIORITY_DEFAULT = 50;
 export const PARSE_HTML_PRIORITY_HIGHEST = 100;
+
+export const EXTENSION_PRIORITY_LOWER = 75;
+/**
+ * 100 is the default priority in Tiptap
+ * https://tiptap.dev/guide/custom-extensions/#priority
+ */
+export const EXTENSION_PRIORITY_DEFAULT = 100;

app/assets/javascripts/content_editor/extensions/code.js

-export { Code as default } from '@tiptap/extension-code';
+import Code from '@tiptap/extension-code';
+import { EXTENSION_PRIORITY_LOWER } from '../constants';
+
+export default Code.extend({
+  excludes: null,
+  /**
+   * Reduce the rendering priority of the code mark to
+   * ensure the bold, italic, and strikethrough marks
+   * are rendered first.
+   */
+  priority: EXTENSION_PRIORITY_LOWER,
+});

app/assets/javascripts/content_editor/services/markdown_serializer.js

@@ -65,8 +65,8 @@ import {
 const defaultSerializerConfig = {
   marks: {
     [Bold.name]: defaultMarkdownSerializer.marks.strong,
-    [Code.name]: defaultMarkdownSerializer.marks.code,
     [Italic.name]: { open: '_', close: '_', mixable: true, expelEnclosingWhitespace: true },
+    [Code.name]: defaultMarkdownSerializer.marks.code,
     [Subscript.name]: { open: '<sub>', close: '</sub>', mixable: true },
     [Superscript.name]: { open: '<sup>', close: '</sup>', mixable: true },
     [InlineDiff.name]: {

spec/frontend/content_editor/extensions/code_spec.js

+import Code from '~/content_editor/extensions/code';
+import { EXTENSION_PRIORITY_LOWER } from '~/content_editor/constants';
+
+describe('content_editor/extensions/code', () => {
+  it('has a lower loading priority', () => {
+    expect(Code.config.priority).toBe(EXTENSION_PRIORITY_LOWER);
+  });
+});

spec/frontend/content_editor/services/markdown_serializer_spec.js

@@ -164,6 +164,17 @@ describe('markdownSerializer', () => {
     expect(serialize(paragraph(italic('italics')))).toBe('_italics_');
   });
 
+  it('correctly serializes code blocks wrapped by italics and bold marks', () => {
+    const text = 'code block';
+
+    expect(serialize(paragraph(italic(code(text))))).toBe(`_\`${text}\`_`);
+    expect(serialize(paragraph(code(italic(text))))).toBe(`_\`${text}\`_`);
+    expect(serialize(paragraph(bold(code(text))))).toBe(`**\`${text}\`**`);
+    expect(serialize(paragraph(code(bold(text))))).toBe(`**\`${text}\`**`);
+    expect(serialize(paragraph(strike(code(text))))).toBe(`~~\`${text}\`~~`);
+    expect(serialize(paragraph(code(strike(text))))).toBe(`~~\`${text}\`~~`);
+  });
+
   it('correctly serializes inline diff', () => {
     expect(
       serialize(