@fishawack/lab-velocity 0.3.6 → 0.3.8

package/form/{wysiwyg.vue → Wysiwyg.vue}

@@ -11,6 +11,7 @@
 import Quill from "quill";
 import input from "./input.js";
 import XInput from "./input.vue";
+import sanitizeHtml from 'sanitize-html';
 
 export default {
     mixins: [input],
@@ -56,11 +57,28 @@ export default {
                 : this.editor.root.innerHTML;
         },
         setValue() {
-            this.editor.root.innerHTML =
+            const temp =
                 this.simple && this.modelValue // Surround text in p tags to keep it grouped correctly on simple strings. Ignore if modelValue empty otherwise you'll end up with <p>null</p>
                     ? `<p>${this.modelValue}</p>`
                     : this.modelValue;
+            this.editor.root.innerHTML = this.formatCleaner(temp);
         },
+        // Function to remove p tags from inside li tags, breaks the wysiwyg
+        formatCleaner(unformmatted) {
+            const regex = new RegExp(/(\<li\>(?:\n)*(?:.*)(?:\n)*\<\/li\>)/gm);
+            if(regex.test(unformmatted)) {
+                let parser = document.createElement('div');
+                parser.innerHTML = unformmatted;
+                const lists = parser.getElementsByTagName('ul');
+                for(var x = 0; x < lists.length; x++) {
+                    lists[x].innerHTML = sanitizeHtml(lists[x].innerHTML, {
+                        allowedTags: [ 'b', 'i', 'em', 'strong', 'a','li' ]
+                    });
+                }
+                return parser.innerHTML;
+            }
+            return unformmatted;
+        }
     },
 
     mounted() {
@@ -83,6 +101,7 @@ export default {
                         this.simple ? undefined : { list: "ordered" },
                         this.simple ? undefined : { list: "bullet" },
                         "clean",
+                        "link"
                     ],
                 ],
             },

package/index.js

@@ -9,7 +9,7 @@ export { default as DatePicker } from "./form/DatePicker.vue";
 export { default as file } from "./form/file.vue";
 export { default as Select } from "./form/Select.vue";
 export { default as Switch } from "./form/Switch.vue";
-export { default as Wysiwyg } from "./form/wysiwyg.vue";
+export { default as Wysiwyg } from "./form/Wysiwyg.vue";
 
 export { default as SideBar } from "./layout/sideBar.vue";
 export { default as Footer } from "./layout/Footer.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fishawack/lab-velocity",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "description": "Avalere Health branded style system",
   "scripts": {
     "setup": "npm ci || npm i && npm run content",
@@ -41,7 +41,8 @@
   },
   "dependencies": {
     "element-plus": "^2.7.8",
-    "quill": "^2.0.2"
+    "quill": "^1.3.7",
+    "sanitize-html": "^2.13.1"
   },
   "files": [
     "*.scss",