From 42885f9d66c1449c36891ab7042c6b013ca56253 Mon Sep 17 00:00:00 2001
From: alexcibotari <alexandru.cibotari@gmail.com>
Date: Sat, 30 Nov 2024 19:17:08 +0100
Subject: [PATCH] Add RichText Code

---
 package-lock.json                                  | 14 ++++++++++++++
 package.json                                       |  1 +
 .../rich-text-editor.component.html                | 10 ++++++++++
 .../rich-text-editor/rich-text-editor.component.ts |  2 ++
 src/styles/_rich-text-editor.scss                  |  8 ++++++++
 5 files changed, 35 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index cdabc512..c19448cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@stoplight/elements": "^8.5.0",
         "@tiptap/extension-bold": "^2.7.1",
         "@tiptap/extension-bullet-list": "^2.7.1",
+        "@tiptap/extension-code": "^2.7.1",
         "@tiptap/extension-document": "^2.7.1",
         "@tiptap/extension-history": "^2.7.1",
         "@tiptap/extension-italic": "^2.7.1",
@@ -6847,6 +6848,19 @@
         "@tiptap/core": "^2.7.0"
       }
     },
+    "node_modules/@tiptap/extension-code": {
+      "version": "2.10.3",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.10.3.tgz",
+      "integrity": "sha512-JyLbfyY3cPctq9sVdpcRWTcoUOoq3/MnGE1eP6eBNyMTHyBPcM9TPhOkgj+xkD1zW/884jfelB+wa70RT/AMxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
     "node_modules/@tiptap/extension-document": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.10.3.tgz",
diff --git a/package.json b/package.json
index a9aa9874..631f9712 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html b/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html
index c71bc1f0..ebd0313c 100644
--- a/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.html
+++ b/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>
diff --git a/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts b/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts
index c551c410..ab2fb2f6 100644
--- a/src/app/features/spaces/contents/shared/rich-text-editor/rich-text-editor.component.ts
+++ b/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: {
diff --git a/src/styles/_rich-text-editor.scss b/src/styles/_rich-text-editor.scss
index e0dfe742..da0ef5c3 100644
--- a/src/styles/_rich-text-editor.scss
+++ b/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;