From eeeb8a288fdb46065ee1688efd5b4971c502e34c Mon Sep 17 00:00:00 2001
From: Jens Pelzetter <jens@jp-digital.de>
Date: Sat, 21 Aug 2021 11:59:48 +0200
Subject: [PATCH] Paragraphy styles for text editor.

---
 .../components/librecms/cmsEditor.xhtml       | 21 ++++++++++++++--
 .../main/scss/content-sections/cms-admin.scss | 12 +++++++++
 .../typescript/content-sections/cms-editor.ts | 25 +++++++++++++++++--
 3 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
index 5fabb8131..38a72ab09 100644
--- a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
+++ b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
@@ -537,7 +537,7 @@
                         </button>
                     </div>
                     <div class="modal-body">
-                        <div class="cms-tiptap-editor-buttons mb-1">
+                        <div class="cms-tiptap-editor-buttons d-flex mb-1">
                             <div class="border-end border-dark cms-tiptap-editor-textformatting">
                                 <button class="btn btn-outline-dark tiptap-emph"
                                     title="#{CmsAdminMessages['cms_editor.buttons.emph']}"
@@ -587,7 +587,7 @@
                                     <button class="btn btn-outline-dark tiptap-h#{level}"
                                             title="#{CmsAdminMessages['cms_editor.buttons.h'.concat(level)]}"
                                             type="button">
-                                        <span aria-hidden="true">H#{level}</sup></span>
+                                        <span aria-hidden="true">H#{level}</span>
                                     </button>
                                 </ui:repeat>
                                 <!-- <button class="btn btn-outline-dark tiptap-h2"
@@ -596,6 +596,23 @@
                                     <bootstrap:svgIcon icon="type-h2" />
                                 </button> -->
                             </div>
+                            <div class="border-end border-dark cms-tiptap-editor-paragraphs">
+                                <button class="btn btn-outline-dark tiptap-paragraph"
+                                        title="#{CmsAdminMessages['cms_editor.buttons.paragraph']}"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="type" />
+                                </button>
+                                <button class="btn btn-outline-dark tiptap-blockquote"
+                                        title="#{CmsAdminMessages['cms_editor.buttons.blockquote']}"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="blockquote-left" />
+                                </button>
+                                <button class="btn btn-outline-dark tiptap-codeblock"
+                                        title="#{CmsAdminMessages['cms_editor.buttons.codeblock']}"
+                                        type="button">
+                                    <bootstrap:svgIcon icon="code-square" />
+                                </button>
+                            </div>                            
                         </div>
                         <div class="cms-tiptap-editor border">
                             
diff --git a/ccm-cms/src/main/scss/content-sections/cms-admin.scss b/ccm-cms/src/main/scss/content-sections/cms-admin.scss
index d7a0672c4..4fb0e40c1 100644
--- a/ccm-cms/src/main/scss/content-sections/cms-admin.scss
+++ b/ccm-cms/src/main/scss/content-sections/cms-admin.scss
@@ -1,4 +1,16 @@
 @import "custom";
 @import "../../../../node_modules/bootstrap/scss/bootstrap";
 
+.cms-tiptap-editor {
+    blockquote {
+        background-color: #eee;        
+        margin: 0.33em;
+        padding: 0.2em;
+    }
 
+    pre {
+        border: 1px solid #ccc;
+        margin: 0.33em;
+        padding: 0.2em;
+    }
+}
diff --git a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
index 03cdbebee..c5eaa0fc3 100644
--- a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
+++ b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
@@ -324,14 +324,35 @@ function initEditorButtons(editor: Editor, buttonsElem: Element) {
             editor.chain().focus().toggleSuperscript().run();
         });
 
-    for(let i = 1; i <= 6; i++) {
+    for (let i = 1; i <= 6; i++) {
         buttonsElem
             .querySelector(`.tiptap-h${i}`)
             ?.addEventListener("click", event => {
                 event.preventDefault();
-                editor.chain().focus().toggleHeading({level: i}).run();
+                editor.chain().focus().toggleHeading({ level: i }).run();
             });
     }
+
+    buttonsElem
+        .querySelector(".tiptap-paragraph")
+        ?.addEventListener("click", event => {
+            event.preventDefault();
+            editor.chain().focus().clearNodes().run();
+        });
+    
+    buttonsElem
+        .querySelector(".tiptap-blockquote")
+        ?.addEventListener("click", event => {
+            event.preventDefault();
+            editor.chain().focus().toggleBlockquote().run();
+        });
+    
+    buttonsElem
+        .querySelector(".tiptap-codeblock")
+        ?.addEventListener("click", event => {
+            event.preventDefault();
+            editor.chain().focus().toggleCodeBlock().run();
+        });
 }
 
 async function showEditDialog(event: Event) {