@avakhula/ui 0.0.505 → 0.0.510-alpha-spa.1

package/src/components/Form/TextEditor/TextEditor.vue

@@ -7,6 +7,7 @@
       disable: disable,
     }"
   >
+
     <ib-character-count
       v-if="characterLimit"
       :character-limit="characterLimit"
@@ -23,170 +24,72 @@
       {{ characterLimitErrorMessage }}
     </ib-alert>
 
+    <input :name="name" type="hidden" :disabled="disable" :value="data">
+
     <div class="ib-text-editor-wrapper" :class="{ disable: disable }">
       <div
         class="ib-text-editor"
-        :style="{ height: height ? height + 'px' : '' }"
         ref="wrapper"
       >
         <QuillEditor
+          aria-label="text-editor"
           @textChange="onChange"
           @blur="onBlur"
           @focus="onFocus"
           ref="quill"
-          toolbar="#toolbar"
           v-model:content="data"
           contentType="html"
           :options="config"
           :modules="modules"
         ></QuillEditor>
       </div>
-      <div id="toolbar" class="toolbar" ref="toolbar">
-        <div class="toolbar-group header-toolbar-group">
-          <select class="ql-header">
-            <option value="1"></option>
-            <option value="2"></option>
-            <option value="3"></option>
-            <option value="4"></option>
-            <option value="5"></option>
-            <option value="6"></option>
-            <option selected></option>
-          </select>
-        </div>
-
-        <div class="toolbar-group">
-          <ib-icon-button
-            class="toolbar-item ql-bold"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            class="toolbar-item ql-italic"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            class="toolbar-item ql-underline"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            class="toolbar-item ql-strike"
-            kind="ghost"
-          ></ib-icon-button>
-        </div>
-
-        <div class="toolbar-group">
-          <select class="ql-background"></select>
-          <select class="ql-color"></select>
-        </div>
-
-        <div class="toolbar-group">
-          <ib-icon-button
-            class="toolbar-item ql-code-block"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            class="toolbar-item ql-link"
-            kind="ghost"
-          ></ib-icon-button>
-        </div>
-
-        <div class="toolbar-group">
-          <ib-icon-button
-            class="toolbar-item ql-align"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            class="ql-align toolbar-item"
-            value="center"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            class="ql-align toolbar-item"
-            value="right"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            class="ql-align toolbar-item"
-            value="justify"
-            kind="ghost"
-          ></ib-icon-button>
-        </div>
-
-        <div class="toolbar-group">
-          <ib-icon-button
-            class="ql-list toolbar-item"
-            value="ordered"
-            kind="ghost"
-          ></ib-icon-button>
-          <ib-icon-button
-            class="ql-list toolbar-item"
-            value="bullet"
-            kind="ghost"
-          ></ib-icon-button>
 
-          <ib-icon-button
-            class="ql-alphabet-list alphabet-list toolbar-item"
-            kind="ghost"
-          ></ib-icon-button>
-        </div>
-      </div>
+      <Toolbar
+        id="toolbar"
+        class="toolbar"
+        ref="toolbar"
+        :placeholders="placeholders"
+        :uid="uid"
+        :hidden-elements="hiddenElements"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import { QuillEditor, Quill } from "@vueup/vue-quill";
+
+import {Quill, QuillEditor} from "@vueup/vue-quill";
 import IbIconButton from "../../IconButton/IconButton.vue";
 import IbAlert from "../../Alert/Alert.vue";
 import IbCharacterCount from "../CharactersCount.vue";
-import { AlphabetList, AlphabetListItem } from "./plugins/alphabetList";
+import Toolbar from "./Toolbar.vue";
+import { stripHtml } from "../../../helpers/stripHtml";
+import getPlaceholderModule from 'quill-placeholder-module';
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { setupTextEditor } from "./setupTextEditor";
 
-import {
-  BOLD,
-  ITALIC,
-  UNDERLINE,
-  STRIKE,
-  CODE,
-  LINK,
-  ALIGN_LEFT,
-  ALIGN_CENTER,
-  ALIGN_RIGHT,
-  ALIGN_JUSTIFY,
-  LIST_ORDERED,
-  LIST_BULLET,
-  LIST_ALPHABET,
-} from "./icons/toolbarIcons";
-
-const icons = Quill.import("ui/icons");
-icons.bold = BOLD;
-icons.italic = ITALIC;
-icons.underline = UNDERLINE;
-icons.strike = STRIKE;
-icons["code-block"] = CODE;
-icons.link = LINK;
-icons.align[""] = ALIGN_LEFT;
-icons.align.center = ALIGN_CENTER;
-icons.align.right = ALIGN_RIGHT;
-icons.align.justify = ALIGN_JUSTIFY;
-icons.list.ordered = LIST_ORDERED;
-icons.list.bullet = LIST_BULLET;
-icons["alphabet-list"] = LIST_ALPHABET;
+Quill.register('modules/placeholder', getPlaceholderModule(Quill, {
+  className: 'ql-placeholder-content'
+}))
 
-Quill.register({
-  "formats/alphabet-list": AlphabetList,
-  "formats/alphabet-list/item": AlphabetListItem,
-});
-
-Quill.register(icons);
 Quill.debug("error");
+setupTextEditor();
 
 export default {
   name: "IbTextEditor",
   props: {
+    name: {
+      type: String,
+      required: true
+    },
     placeholder: {
       type: String,
       default: "",
     },
+    placeholders: {
+      type: Array,
+      default: () => []
+    },
     modelValue: {
       type: String,
     },
@@ -230,14 +133,13 @@ export default {
       type: String,
       default: "",
     },
-    height: {
-      type: String,
-    },
+    hiddenElements: {
+        type: Array,
+        default: () => ['font-size', 'image']
+    }
   },
+  emits: ['onOverLimitHandler', 'update:modelValue', 'change', 'blur'],
   mounted() {
-    // Reset default styles for toolbar
-    this.$refs.toolbar.classList.remove("ql-toolbar");
-
     // Change default placeholder for link input
     const input = this.$refs.wrapper.querySelector("input[data-link]");
     input.dataset.link = "Enter Link";
@@ -256,24 +158,61 @@ export default {
       this.data = val;
     },
     data(val) {
-      this.$emit("update:modelValue", val);
+      const cleanedData = this.cleanPlaceholderSpans(val);
+      this.$emit("update:modelValue", cleanedData);
     },
+    characterOverLimit(value) {
+      this.$emit('onOverLimitHandler', value);
+    }
   },
   methods: {
     onChange() {
+      let data = this.cleanPlaceholderSpans(this.data);
+      this.data = this.patchListStylePosition(data);
+
       this.updateCharacterLength();
       this.$emit("change", this.data);
     },
     onBlur(instance) {
-      this.$emit("blur", this.data, instance);
+      this.$emit("blur", this.cleanPlaceholderSpans(this.data), instance);
       this.isFocus = false;
     },
     onFocus() {
       this.isFocus = true;
     },
     updateCharacterLength() {
-      this.characterLength = this.$refs.quill.getText().length - 1;
+      this.characterLength = stripHtml(this.data).length;
     },
+    cleanPlaceholderSpans(html) {
+      if (!html) return html;
+
+      let prevHtml;
+      do {
+        prevHtml = html;
+        html = html.replace(/<span contenteditable="false">([\s\S]*?)<\/span>/g, (_, content) => {
+          return content.replace(/[\u200B-\u200F\uFEFF]/g, '');
+        });
+      } while (prevHtml !== html);
+
+      return html;
+    },
+    patchListStylePosition(html) {
+      const tmp = document.createElement('div');
+      tmp.innerHTML = html;
+
+      tmp.querySelectorAll('ul[style*="text-align"], ol[style*="text-align"], li[style*="text-align"]').forEach(el => {
+        const style = el.getAttribute('style') ?? '';
+
+        if (!/list-style-position\s*:\s*inside/i.test(style)) {
+          const newStyle =
+            (style.trim().endsWith(';') || style.trim() === '' ? style : style + ';') +
+            ' list-style-position: inside;';
+          el.setAttribute('style', newStyle);
+        }
+      });
+
+      return tmp.innerHTML;
+    }
   },
   computed: {
     config() {
@@ -281,6 +220,17 @@ export default {
         placeholder: this.data.length ? "" : this.placeholder,
         readOnly: this.readOnly ? this.readOnly : this.disable,
         enable: this.enable,
+        modules: {
+          toolbar: {
+              container: '#toolbar',
+              handlers: { 'image': this.imageButtonClickHandler }
+          },
+          placeholder: {
+            delimiters: ['{{', '}}'],
+            placeholders: this.placeholders
+          }
+        },
+
       };
 
       return Object.assign(config, this.options);
@@ -290,16 +240,20 @@ export default {
         !!this.characterLimit && this.characterLength > this.characterLimit
       );
     },
+    uid() {
+      return Math.random().toString(36).substr(2, 9);
+    },
   },
   components: {
     QuillEditor,
     IbIconButton,
     IbAlert,
     IbCharacterCount,
+    Toolbar,
   },
 };
 </script>
 
-<style lang="scss">
-@import "./textEditor.scss";
+<style lang="scss" scoped>
+@use "./textEditor.scss" as *;
 </style>