From a551f8a96132371a6b5efca87e51d2641cdd608f Mon Sep 17 00:00:00 2001
From: wouter-adriaens <wouter@wauwit.be>
Date: Thu, 3 Oct 2024 17:10:43 +0200
Subject: [PATCH] #326 wip editor toolbar

---
 src/components/dumb/OeEditor.vue | 216 ++++++++++++++++++++++---------
 src/components/dumb/index.ts     |   2 +
 src/models/editor.ts             |   7 +
 yarn.lock                        |   5 +
 4 files changed, 166 insertions(+), 64 deletions(-)
 create mode 100644 src/models/editor.ts

diff --git a/src/components/dumb/OeEditor.vue b/src/components/dumb/OeEditor.vue
index 2bd6b2a..ef40872 100644
--- a/src/components/dumb/OeEditor.vue
+++ b/src/components/dumb/OeEditor.vue
@@ -1,35 +1,65 @@
 <template>
-  <div id="toolbar">
-    <button class="ql-undo" title="Undo">
-      <font-awesome-icon :icon="['fas', 'rotate-left']" />
-    </button>
-    <button class="ql-redo" title="Redo">
-      <font-awesome-icon :icon="['fas', 'rotate-right']" />
-    </button>
-    <!-- Add headings dropdown -->
-    <span class="ql-formats">
-      <select class="ql-header">
-        <option value="">Normal</option>
-        <option value="1">Heading 1</option>
-        <option value="2">Heading 2</option>
-        <option value="3">Heading 3</option>
-        <option value="4">Heading 4</option>
-        <option value="5">Heading 5</option>
-        <option value="6">Heading 6</option>
-      </select>
-    </span>
-    <!-- Add a bold button -->
-    <button class="ql-bold"></button>
-    <!-- Add subscript and superscript buttons -->
-    <button class="ql-private" title="Prive">
-      <font-awesome-icon :icon="['fas', 'lock']" />
-    </button>
-
-    <button class="ql-list" value="ordered"></button>
-    <button class="ql-list" value="bullet"></button>
-  </div>
+  <div>
+    <div id="toolbar">
+      <div class="toolbar-group">
+        <button class="ql-undo" title="Undo">
+          <font-awesome-icon :icon="['fas', 'rotate-left']" />
+        </button>
+        <button class="ql-redo" title="Redo">
+          <font-awesome-icon :icon="['fas', 'rotate-right']" />
+        </button>
+
+        <span class="ql-stroke" />
+
+        <!-- Add headings dropdown -->
+        <select class="ql-header">
+          <option value="">Paragraph</option>
+          <option value="1">Heading 1</option>
+          <option value="2">Heading 2</option>
+          <option value="3">Heading 3</option>
+          <option value="4">Heading 4</option>
+          <option value="5">Heading 5</option>
+          <option value="6">Heading 6</option>
+        </select>
+
+        <span class="ql-stroke" />
+
+        <!-- Add a bold button -->
+        <button class="ql-bold"></button>
+        <button class="ql-italic"></button>
+
+        <span class="ql-stroke" />
+
+        <button class="ql-list" value="ordered"></button>
+        <button class="ql-list" value="bullet"></button>
+        <button class="ql-indent" value="-1"></button>
+        <button class="ql-indent" value="+1"></button>
+
+        <span class="ql-stroke" />
+
+        <button class="ql-clean"></button>
+
+        <span class="ql-stroke" />
+
+        <button class="ql-private" title="Prive">
+          <font-awesome-icon :icon="['fas', 'lock']" />
+        </button>
+      </div>
+    </div>
 
-  <QuillyEditor ref="editor" v-model="model" style="height: 400px" :options="options" />
+    <QuillyEditor
+      ref="editor"
+      v-model="model"
+      style="height: 400px"
+      :options="options"
+      @blur="model = quill?.getSemanticHTML()"
+    />
+
+    <br />
+    <h5>Output</h5>
+    <br />
+    <pre>{{ model }}</pre>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -37,24 +67,20 @@ import 'quill/dist/quill.snow.css';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import Quill from 'quill';
 import { htmlEditButton } from 'quill-html-edit-button';
-import Block from 'quill/blots/block';
+import QuillToggleFullscreenButton from 'quill-toggle-fullscreen-button';
 import { onMounted, ref } from 'vue';
 import { QuillyEditor } from 'vue-quilly';
+import { PrivateBlock } from '@models/editor';
 
-class PrivateBlock extends Block {
-  static tagName = 'DIV';
-  static className = 'prive';
-  static blotName = 'private';
-}
-
+// Register custom blocks and modules
 Quill.register(PrivateBlock, true);
-
-const editor = ref<InstanceType<typeof QuillyEditor>>();
-let quill: Quill | null = null;
-
 Quill.register('modules/htmlEditButton', htmlEditButton);
+Quill.register('modules/toggleFullscreen', QuillToggleFullscreenButton);
 
-const model = ref('<p>Hello Quilly!</p>');
+// Quill config
+let quill: Quill;
+
+const editor = ref<InstanceType<typeof QuillyEditor>>();
 const options = {
   theme: 'snow',
   modules: {
@@ -72,44 +98,55 @@ const options = {
         },
       },
     },
-
-    // toolbar: {
-    //   container: [
-    //     [{ header: '1' }, { header: '2' }, { font: [] }],
-    //     [{ size: [] }],
-    //     ['bold', 'italic', 'underline', 'strike', 'blockquote'],
-    //     [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
-    //     ['link', 'image', 'video'],
-    //     ['undo', 'redo'],
-    //     ['clean'],
-    //     ['lock'],
-    //   ],
-    //   handlers: {
-    //     undo: () => {
-    //       return quill!.history.undo();
-    //     },
-    //     redo: () => {
-    //       return quill!.history.redo();
-    //     },
-    //   },
-    // },
     history: {
       delay: 2000,
       maxStack: 500,
       userOnly: true,
     },
-    htmlEditButton: {},
+    htmlEditButton: {
+      buttonTitle: 'Source code',
+      msg: 'Source code',
+      okText: 'Opslaan',
+      cancelText: 'Annuleren',
+    },
+    toggleFullscreen: {
+      buttonTitle: 'Fullscreen',
+    },
   },
   placeholder: 'Compose an epic...',
   readOnly: false,
 };
 
+// Model
+const model = ref('<p>Hello Quilly!</p>');
+
 onMounted(() => {
   quill = editor.value?.initialize(Quill) as Quill;
 });
 </script>
 
 <style lang="scss" scoped>
+.ql-toolbar {
+  display: flex;
+  justify-content: space-between;
+
+  :deep(.ql-formats) {
+    margin-right: 0;
+  }
+
+  .toolbar-group {
+    display: flex;
+    width: 100%;
+
+    .ql-stroke {
+      margin: -8px 8px;
+      width: 1px; /* Line thickness */
+      display: inline-block;
+      background-color: #ccc; /* Line color */
+    }
+  }
+}
+
 .ql-container {
   font-size: 16px;
 
@@ -129,4 +166,55 @@ onMounted(() => {
     margin: 1rem 0;
   }
 }
+
+:global(.ql-html-textArea.ql-container) {
+  position: relative !important;
+  left: 0 !important;
+  height: calc(100% - 30px) !important;
+  width: 100%;
+}
+
+:global(.ql-html-buttonGroup) {
+  position: relative !important;
+  left: unset !important;
+  bottom: 0 !important;
+  transform: scale(1) !important;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 15px;
+}
+
+:global(.ql-html-buttonOk),
+:global(.ql-html-buttonCancel) {
+  border-radius: 0;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  background-color: transparent;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  min-height: 3.5rem;
+  font-size: 1.6rem;
+  font-family: Flanders Art Sans, sans-serif;
+  font-weight: 500;
+  padding: 0.5rem 2rem;
+  background-color: var(--vl-theme-action-color, #944ea1);
+  text-decoration: none;
+  border-radius: 0.3rem;
+  color: #fff;
+  text-align: center;
+  outline: 0;
+  max-width: 100%;
+  cursor: pointer;
+}
+
+:global(.ql-html-buttonCancel) {
+  background-color: transparent;
+  color: var(--vl-theme-action-color, #944ea1);
+  border: 0.2rem solid currentColor;
+  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
+}
 </style>
diff --git a/src/components/dumb/index.ts b/src/components/dumb/index.ts
index c696c9e..e326913 100644
--- a/src/components/dumb/index.ts
+++ b/src/components/dumb/index.ts
@@ -13,6 +13,7 @@ import OeAutocomplete from './OeAutocomplete.vue';
 import OeButton from './OeButton.vue';
 import OeContainer from './OeContainer.vue';
 import OeDatepicker from './OeDatepicker.vue';
+import OeEditor from './OeEditor.vue';
 import OeGrid from './OeGrid.vue';
 import OeHeader from './OeHeader.vue';
 import OeInventarisLoadedLink from './OeInventarisLoadedLink.vue';
@@ -40,6 +41,7 @@ export {
   OeButton,
   OeContainer,
   OeDatepicker,
+  OeEditor,
   OeGrid,
   OeHeader,
   OeInventarisLoadedLink,
diff --git a/src/models/editor.ts b/src/models/editor.ts
new file mode 100644
index 0000000..ef05d45
--- /dev/null
+++ b/src/models/editor.ts
@@ -0,0 +1,7 @@
+import Block from 'quill/blots/block';
+
+export class PrivateBlock extends Block {
+  static tagName = 'DIV';
+  static className = 'prive';
+  static blotName = 'private';
+}
diff --git a/yarn.lock b/yarn.lock
index 4697b35..0096e45 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8930,6 +8930,11 @@ quill-html-edit-button@^3.0.0:
   resolved "https://registry.yarnpkg.com/quill-html-edit-button/-/quill-html-edit-button-3.0.0.tgz#b632ae6a5d473ce42f1ad3223e91aff02fe13464"
   integrity sha512-ZUV3rYjEvXz+v/7f8N0Mkp2+0D8VGDj6yCYPfagSLmyshczeMawS7vZJzaJ18dJp35IfjiPnzqyVk3KCI8qN1w==
 
+quill-toggle-fullscreen-button@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/quill-toggle-fullscreen-button/-/quill-toggle-fullscreen-button-0.1.3.tgz#ee8c6d0e43a94115228dd2a694bcf82cd33702b1"
+  integrity sha512-ViRGh3pRxSSe4uNZZpy0LI23A9wAAeCuTmUwz22E/f1dSDmDGvroObomg56HpwbednDCyTvEyWb0gakY2ml7oQ==
+
 quill@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/quill/-/quill-2.0.2.tgz#5b26bc10a74e9f7fdcfdb5156b3133a3ebf0a814"