Add RichText Code

package.json

@@ -63,6 +63,7 @@
     "@tiptap/extension-list-item": "^2.7.1",
     "@tiptap/extension-bullet-list": "^2.7.1",
     "@tiptap/extension-ordered-list": "^2.7.1",
+    "@tiptap/extension-code": "^2.7.1",
     "uuid": "^10.0.0",
     "zone.js": "~0.14.2"
   },

src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html

@@ -82,6 +82,16 @@
           </svg>
         </button>
         <span class="vertical-divider">&nbsp; </span>
+        <button
+          class="rounded h-7 w-7 flex justify-center items-center ml-1"
+          [ngClass]="{ selected: editor.isActive('code') }"
+          (click)="editor.chain().focus().toggleCode().run()">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
+            <path
+              d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z" />
+          </svg>
+        </button>
+        <span class="vertical-divider">&nbsp; </span>
         <span class="spacer"></span>
         @if (field.translatable) {
           <span class="vertical-divider">&nbsp; </span>

src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts

@@ -16,6 +16,7 @@ import History from '@tiptap/extension-history';
 import ListItem from '@tiptap/extension-list-item';
 import OrderedList from '@tiptap/extension-ordered-list';
 import BulletList from '@tiptap/extension-bullet-list';
+import Code from '@tiptap/extension-code';
 
 @Component({
   selector: 'll-rich-text-editor',
@@ -47,6 +48,7 @@ export class RichTextEditorComponent implements OnDestroy {
       }),
       OrderedList,
       BulletList,
+      Code,
     ],
     editorProps: {
       attributes: {

src/styles/_rich-text-editor.scss

@@ -24,6 +24,14 @@ ll-rich-text-editor {
       margin-top: 0;
     }
 
+    /* Code and preformatted text styles */
+    code {
+      background-color: var(--sys-on-secondary-container);
+      border-radius: 0.5rem;
+      color: var(--sys-on-secondary);
+      font-size: 0.85rem;
+      padding: 0.3em 0.3em;
+    }
     /* List styles */
     ul {
       list-style: disc;