@fishawack/lab-velocity 2.0.0-beta.56 → 2.0.0-beta.58

package/_Build/vue/components/form/Wysiwyg2.vue

@@ -417,6 +417,42 @@
                     ></path>
                 </svg>
             </button>
+            <button
+                v-if="media"
+                type="button"
+                @click="openMediaDialog('image')"
+            >
+                <svg viewBox="0 0 18 18">
+                    <rect
+                        class="ql-stroke"
+                        height="10"
+                        width="12"
+                        x="3"
+                        y="4"
+                    ></rect>
+                    <circle class="ql-fill" cx="6" cy="7" r="1"></circle>
+                    <polyline
+                        class="ql-even ql-stroke"
+                        points="5 12 5 11 7 9 8 10 11 7 13 9 13 12 5 12"
+                    ></polyline>
+                </svg>
+            </button>
+            <button
+                v-if="media"
+                type="button"
+                @click="openMediaDialog('video')"
+            >
+                <svg viewBox="0 0 18 18">
+                    <rect
+                        class="ql-stroke"
+                        height="12"
+                        width="12"
+                        x="3"
+                        y="3"
+                    ></rect>
+                    <path class="ql-fill" d="M7,7v4l4-2Z"></path>
+                </svg>
+            </button>
         </div>
         <editor-content :editor="editor" />
         <el-dialog v-model="dialogVisible" title="URL" width="500">
@@ -431,6 +467,27 @@
                 </div>
             </template>
         </el-dialog>
+        <el-dialog
+            v-model="mediaDialogVisible"
+            :title="mediaType === 'image' ? 'Insert Image' : 'Insert Video'"
+            width="500"
+        >
+            <label
+                >Enter
+                {{ mediaType === "image" ? "image" : "video" }} URL</label
+            >
+            <el-input v-model="mediaUrl" type="url" placeholder="https://" />
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="mediaDialogVisible = false"
+                        >Cancel</el-button
+                    >
+                    <el-button type="primary" @click="insertMedia">
+                        Insert
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
     </XInput>
 </template>
 
@@ -456,6 +513,8 @@ import TableRow from "@tiptap/extension-table-row";
 import Superscript from "@tiptap/extension-superscript";
 import Subscript from "@tiptap/extension-subscript";
 import Link from "@tiptap/extension-link";
+import Image from "@tiptap/extension-image";
+import Video from "./wysiwyg2-video.js";
 
 export default {
     mixins: [input],
@@ -476,6 +535,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        media: {
+            type: Boolean,
+            default: false,
+        },
         baseClass: {
             type: String,
             default: "vel-wysiwyg",
@@ -488,6 +551,9 @@ export default {
         previousUrl: null,
         newUrl: null,
         dialogVisible: false,
+        mediaDialogVisible: false,
+        mediaUrl: null,
+        mediaType: null,
     }),
 
     watch: {
@@ -536,6 +602,22 @@ export default {
                 .setLink({ href: url })
                 .run();
         },
+        openMediaDialog(type) {
+            this.mediaType = type;
+            this.mediaUrl = null;
+            this.mediaDialogVisible = true;
+        },
+        insertMedia() {
+            this.mediaDialogVisible = false;
+            let url = this.mediaUrl;
+            if (!url) return;
+
+            if (this.mediaType === "image") {
+                this.editor.chain().focus().setImage({ src: url }).run();
+            } else {
+                this.editor.chain().focus().setVideo({ src: url }).run();
+            }
+        },
     },
 
     mounted() {
@@ -559,14 +641,17 @@ export default {
                 TableCell,
             );
         }
+        if (this.$props.media) {
+            extensions.push(Image, Video);
+        }
 
         this.editor = new Editor({
             extensions: extensions,
         });
         this.setValue();
 
-        this.editor.on("blur", ({ editor, event }) => {
-            const value = editor.isEmpty ? "" : event.srcElement.innerHTML;
+        this.editor.on("update", ({ editor }) => {
+            const value = editor.isEmpty ? "" : editor.getHTML();
             if (this.hold !== value) {
                 this.hold = value;
                 this.$emit("update:modelValue", this.hold);

package/_Build/vue/components/form/wysiwyg2-video.js

@@ -0,0 +1,41 @@
+import { Node, mergeAttributes } from "@tiptap/core";
+
+export default Node.create({
+    name: "video",
+    group: "block",
+    atom: true,
+
+    addAttributes() {
+        return {
+            src: { default: null },
+            controls: { default: true },
+            width: { default: "100%" },
+        };
+    },
+
+    parseHTML() {
+        return [{ tag: "video" }];
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "video",
+            mergeAttributes(HTMLAttributes, {
+                controls: HTMLAttributes.controls ? "" : null,
+            }),
+        ];
+    },
+
+    addCommands() {
+        return {
+            setVideo:
+                (options) =>
+                ({ commands }) => {
+                    return commands.insertContent({
+                        type: this.name,
+                        attrs: options,
+                    });
+                },
+        };
+    },
+});

package/components/_wysiwyg2.scss

@@ -117,6 +117,16 @@
     a {
         text-decoration: underline;
     }
+    img,
+    video {
+        max-width: 100%;
+        height: auto;
+        border-radius: 4px;
+        width: 75%;
+        display: block;
+        margin: 0 auto;
+        margin-bottom: $spacing;
+    }
 }
 
 .lab-table,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fishawack/lab-velocity",
-    "version": "2.0.0-beta.56",
+    "version": "2.0.0-beta.58",
     "description": "Avalere Health branded style system",
     "scripts": {
         "setup": "npm ci || npm i && npm run content",
@@ -42,6 +42,7 @@
         "vuex-persistedstate": "^4.1.0"
     },
     "dependencies": {
+        "@tiptap/extension-image": "^2.27.2",
         "@tiptap/extension-link": "^2.11.2",
         "@tiptap/extension-subscript": "^2.11.2",
         "@tiptap/extension-superscript": "^2.11.2",