tiptapify 0.0.7 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptapify",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {

package/src/components/MenuBubble.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
-import LinkDialog from "@tiptapify/extensions/components/LinkDialog.vue";
 import { computed, defineProps, inject, Ref, ref } from "vue";
 import { BubbleMenu } from '@tiptap/vue-3/menus'
 import * as mdi from '@mdi/js'
@@ -12,8 +11,6 @@ defineProps({
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const bubbleMenuLinkButton = ref(null)
-
 const items = ref([
   {
     name: 'bold',
@@ -76,7 +73,7 @@ const items = ref([
       color: computed(() => editor.value.isActive('link') ? 'primary' : ''),
       disabled: computed(() => editor.value.isActive('code') || editor.value.isActive('codeBlock')),
     },
-    click: () => linkAction(),
+    click: () => editor.value.commands.showLink()
   },
   {
     name: 'format clear',
@@ -84,12 +81,6 @@ const items = ref([
     click: () => editor.value.chain().focus().unsetAllMarks().clearNodes().run(),
   }
 ])
-
-function linkAction() {
-  return editor.value.isActive('link')
-      ? editor.value.chain().focus().unsetLink().run()
-      : bubbleMenuLinkButton.value?.open()
-}
 </script>
 
 <template>
@@ -98,6 +89,10 @@ function linkAction() {
       :editor="editor"
       :options="{ placement: 'bottom' }"
       :shouldShow="({ editor, view, state, from, to }) => {
+        if (editor.isActive('image') || editor.isActive('code') || editor.isActive('codeBlock')) {
+          return false
+        }
+
         const docSize = editor.state.doc.content.size
         const isAllSelected = from === 0 && to === docSize
 
@@ -120,8 +115,6 @@ function linkAction() {
       </VCard>
     </div>
   </BubbleMenu>
-
-  <LinkDialog ref="bubbleMenuLinkButton" />
 </template>
 
 <style scoped lang="scss">

package/src/components/Tiptapify.vue

@@ -13,7 +13,8 @@ import { useTheme } from "vuetify/framework";
 
 const props = defineProps({
   content: String|Object,
-  variant: { type: String, default () { return 'elevated' } },
+  variantBtn: { type: String, default () { return 'elevated' } },
+  variantField: { type: String, default () { return 'solo' } },
   toolbar: { type: Boolean, default () { return true } },
   items: { type: Array<string>, default() { return [] }},
   itemsExclude: { type: Boolean, default() { return false } },
@@ -62,7 +63,8 @@ onBeforeUnmount(() => {
         <template v-if="toolbar">
           <Toolbar
               v-if="editor"
-              :variant="variant"
+              :variant-btn="variantBtn"
+              :variant-field="variantField"
               :font-measure="fontMeasure"
               :items="items"
               :items-exclude="itemsExclude"
@@ -72,9 +74,9 @@ onBeforeUnmount(() => {
 
         <div :class="`border border-t-0 rounded-b-${rounded}`">
           <div class="pa-2 tiptapify-container">
-            <MenuFloating v-if="floatingMenu" :variant="variant" :theme="theme" />
+            <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="theme" />
 
-            <MenuBubble v-if="bubbleMenu" :variant="variant" :theme="theme" />
+            <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="theme" />
 
             <EditorContent :editor="editor" class="tiptapify-editor" />
           </div>

package/src/components/Toolbar/Index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Editor } from "@tiptap/vue-3";
+import ImageDialog from "@tiptapify/extensions/components/ImageDialog.vue";
 import LinkDialog from "@tiptapify/extensions/components/LinkDialog.vue";
 import ShowSourceDialog from "@tiptapify/extensions/components/ShowSourceDialog.vue";
 import PreviewDialog from "@tiptapify/extensions/components/PreviewDialog.vue";
@@ -11,7 +12,8 @@ import { useI18n } from "vue-i18n";
 import { toolbarItems, ToolbarItemSections } from "@tiptapify/components/Toolbar/items";
 
 const props = defineProps({
-  variant: { type: String, default () { return 'flat' }},
+  variantBtn: { type: String, default () { return 'elevated' }},
+  variantField: { type: String, default () { return 'solo' }},
   items: { type: Array<string>, default() { return [] }},
   itemsExclude: { type: Boolean, default() { return false } },
   headingLevels: { type: Array<number>, default() { return [] }},
@@ -26,14 +28,11 @@ const { t } = useI18n();
 
 const editor = inject('tiptapifyEditor') as Ref<Editor>
 
-const toolbarLinkButton = ref(null)
-
 const items = toolbarItems(
     editor,
     computed(() => props.fontMeasure).value,
     { list: computed(() => props.items).value, exclude: computed(() => props.itemsExclude).value },
-    computed(() => props.headingLevels).value,
-    toolbarLinkButton
+    computed(() => props.headingLevels).value
 )
 const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
 
@@ -44,15 +43,15 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
     <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 rounded-t-${rounded}`">
       <VToolbarItems class="py-2">
         <template v-for="(toolbarSection, sectionKey) in toolbarItemsRef" :key="sectionKey">
-          <Group v-if="toolbarSection.group" :variant="variant" :toolbar-section="toolbarSection" />
+          <Group v-if="toolbarSection.group" :variant="variantBtn" :toolbar-section="toolbarSection" />
 
-          <Toggle v-else-if="toolbarSection.toggle" :variant="variant" :toolbar-section="toolbarSection" />
+          <Toggle v-else-if="toolbarSection.toggle" :variant="variantBtn" :toolbar-section="toolbarSection" />
 
           <VBtn
               v-else
               v-for="(toolbarItem, itemKey) in toolbarSection.items"
               :key="itemKey"
-              :variant="variant"
+              :variant="variantBtn"
               v-bind="toolbarItem.props"
               v-on="toolbarItem.attrs"
               class="menu-button"
@@ -73,9 +72,10 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
       </VToolbarItems>
     </VToolbar>
 
-    <LinkDialog ref="toolbarLinkButton" />
+    <ImageDialog :variant-field="variantField" />
+    <LinkDialog :variant-field="variantField" />
     <PreviewDialog />
-    <ShowSourceDialog />
+    <ShowSourceDialog :variant-field="variantField" />
   </div>
 </template>
 

package/src/components/Toolbar/items/media.ts

@@ -3,11 +3,11 @@ import { Editor } from "@tiptap/vue-3";
 import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
 import { computed, markRaw, Ref } from "vue";
 
-export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
+export function getMediaItems(editor: Editor) {
   return {
     link: {
-      name: 'format.link',
-      tooltip: 'format.link',
+      name: 'media.link',
+      tooltip: 'media.link',
       icon: computed(() => editor.isActive('link') ? mdi.mdiLinkOff : mdi.mdiLink),
       enabled: true,
       props: {
@@ -15,16 +15,25 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
         disabled: computed(() => editor.isActive('code') || editor.isActive('codeBlock')),
       },
       attrs: {
-        click: computed(() => {
-          return editor.isActive('link')
-            ? editor.chain().focus().unsetLink().run
-            : toolbarLinkButton?.value?.open
-        })
+        click: () => editor.commands.showLink()
+      }
+    },
+    image: {
+      name: 'media.image',
+      tooltip: 'media.image',
+      icon: mdi.mdiImage,
+      enabled: true,
+      props: {
+        color: computed(() => editor.isActive('image') ? 'primary' : ''),
+        disabled: computed(() => editor.isActive('code') || editor.isActive('codeBlock')),
+      },
+      attrs: {
+        click: () => editor.commands.showTiptapifyImage()
       }
     },
     table: {
       name: 'tables',
-      tooltip: 'format.tables.table',
+      tooltip: 'media.tables.table',
       icon: mdi.mdiTable,
       modelValue: false,
       enabled: true,
@@ -35,7 +44,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
       children: [
         {
           name: 'insert table',
-          tooltip: 'format.tables.insertTable',
+          tooltip: 'media.tables.insertTable',
           icon: mdi.mdiTablePlus,
           enabled: true,
           props: {
@@ -49,8 +58,8 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
           component: markRaw(TableBuilder),
         },
         {
-          name: 'insert table',
-          tooltip: 'format.tables.deleteTable',
+          name: 'delete table',
+          tooltip: 'media.tables.deleteTable',
           icon: mdi.mdiTableMinus,
           enabled: true,
           props: {
@@ -62,7 +71,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
         },
         {
           name: 'table row',
-          tooltip: 'format.tables.row',
+          tooltip: 'media.tables.row',
           icon: mdi.mdiTableRow,
           enabled: true,
           props: {
@@ -80,7 +89,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
           children: [
             {
               name: 'insert row before',
-              tooltip: 'format.tables.insertRowBefore',
+              tooltip: 'media.tables.insertRowBefore',
               icon: mdi.mdiTableRowPlusBefore,
               enabled: true,
               props: {
@@ -92,7 +101,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
             },
             {
               name: 'insert row after',
-              tooltip: 'format.tables.insertRowAfter',
+              tooltip: 'media.tables.insertRowAfter',
               icon: mdi.mdiTableRowPlusAfter,
               enabled: true,
               props: {
@@ -104,7 +113,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
             },
             {
               name: 'delete row',
-              tooltip: 'format.tables.deleteRow',
+              tooltip: 'media.tables.deleteRow',
               icon: mdi.mdiTableRowRemove,
               enabled: true,
               props: {
@@ -118,7 +127,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
         },
         {
           name: 'column',
-          tooltip: 'format.tables.col',
+          tooltip: 'media.tables.col',
           icon: mdi.mdiTableColumn,
           enabled: true,
           props: {
@@ -136,7 +145,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
           children: [
             {
               name: 'insert col before',
-              tooltip: 'format.tables.insertColBefore',
+              tooltip: 'media.tables.insertColBefore',
               icon: mdi.mdiTableColumnPlusBefore,
               enabled: true,
               props: {
@@ -148,7 +157,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
             },
             {
               name: 'insert column after',
-              tooltip: 'format.tables.insertColAfter',
+              tooltip: 'media.tables.insertColAfter',
               icon: mdi.mdiTableColumnPlusAfter,
               enabled: true,
               props: {
@@ -160,7 +169,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
             },
             {
               name: 'delete column',
-              tooltip: 'format.tables.deleteCol',
+              tooltip: 'media.tables.deleteCol',
               icon: mdi.mdiTableColumnRemove,
               enabled: true,
               props: {
@@ -174,7 +183,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
         },
         {
           name: 'merge cells',
-          tooltip: 'format.tables.mergeCells',
+          tooltip: 'media.tables.mergeCells',
           icon: mdi.mdiTableMergeCells,
           enabled: true,
           props: {
@@ -186,7 +195,7 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: Ref) {
         },
         {
           name: 'split cell',
-          tooltip: 'format.tables.splitCell',
+          tooltip: 'media.tables.splitCell',
           icon: mdi.mdiTableSplitCell,
           enabled: true,
           props: {

package/src/components/Toolbar/items.ts

@@ -49,8 +49,7 @@ export function toolbarItems(
   editor: any,
   fontMeasure: string,
   items: { list: Array<string>, exclude: boolean },
-  customHeadingLevels: Array<number>,
-  toolbarLinkButton: Ref,
+  customHeadingLevels: Array<number>
 ): ToolbarItemSections {
   const styleItems = ref(getStyleItems(editor.value, fontMeasure, customHeadingLevels))
   const formatItems = ref(getFormatItems(editor.value))
@@ -59,7 +58,7 @@ export function toolbarItems(
   const listItems = ref(getListItems(editor.value))
   const actionsItems = ref(getActionsItems(editor.value))
   const miscItems = ref(getMiscItems(editor.value))
-  const mediaItems = ref(getMediaItems(editor.value, toolbarLinkButton))
+  const mediaItems = ref(getMediaItems(editor.value))
 
   const allMenuItems: ToolbarItemSections = {
     /**

package/src/components/editorExtensions.ts

@@ -23,7 +23,8 @@ import { Underline } from '@tiptap/extension-underline'
 import { TableKit } from '@tiptap/extension-table'
 import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight'
 
-import { Link } from '@tiptap/extension-link'
+import { TiptapifyLink } from '@tiptapify/extensions/link'
+import { TiptapifyImage } from '@tiptapify/extensions/image'
 import CodeBlockComponent from '@tiptapify/components/CodeBlockComponent.vue'
 import { ViewSource } from '@tiptapify/extensions/view-source'
 import { Preview } from '@tiptapify/extensions/preview'
@@ -69,11 +70,12 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     Typography,
     Underline,
     Highlight,
-    Link.configure({
+    TiptapifyLink.configure({
       openOnClick: false,
-      defaultProtocol: 'https',
+      defaultProtocol: 'https'
     }),
     Image,
+    TiptapifyImage,
     Superscript,
     Subscript,
     TableKit,

package/src/extensions/components/ImageDialog.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+
+import * as mdi from '@mdi/js'
+import { Editor } from "@tiptap/vue-3";
+
+import { useI18n } from 'vue-i18n'
+import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
+
+import helpers from '@tiptapify/utils/helpers'
+
+defineProps({
+  variantBtn: { type: String, default() { return 'elevated' }},
+  variantField: { type: String, default() { return 'solo' }}
+})
+
+const { ucFirst } = helpers
+
+const editor = inject('tiptapifyEditor') as Ref<Editor>
+const { t } = useI18n()
+
+const generateImageAttrs = () => ({
+  src: '',
+  alt: '',
+  height: null,
+  width: null
+})
+
+const attrs = ref(generateImageAttrs())
+
+const dialog = ref<boolean>(false)
+
+const isDisabled = computed(() => {
+  const { src } = attrs.value
+  return !src
+})
+
+function apply() {
+  let { src, alt, width, height } = attrs.value
+
+  const imageOptions: { src: string, alt: string, width?: number, height?: number} = {
+    src,
+    alt
+  }
+
+  if (width) {
+    imageOptions.width = width
+  }
+
+  if (height) {
+    imageOptions.height = height
+  }
+
+  if (src) {
+    editor.value.chain().focus().setImage(imageOptions).run()
+  }
+
+  close()
+}
+
+function clear() {
+  editor.value.commands.deleteSelection()
+
+  close()
+}
+
+function close() {
+  dialog.value = false
+
+  attrs.value = generateImageAttrs()
+}
+
+const showTiptapifyImage = (event: CustomEvent) => {
+  attrs.value.src = event.detail.image?.src
+  attrs.value.alt = event.detail.image?.alt
+  attrs.value.width = event.detail.image?.width
+  attrs.value.height = event.detail.image?.height
+
+  dialog.value = true;
+}
+
+onMounted(() => {
+  window.addEventListener('tiptapify-show-tiptapifyImage', showTiptapifyImage as EventListener)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('tiptapify-show-tiptapifyImage', showTiptapifyImage as EventListener)
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" max-width="800" absolute @click:outside="close">
+    <VCard>
+      <VToolbar class="px-6" density="compact">
+        <span class="headline">{{ ucFirst(t('dialog.image.title')) }}</span>
+
+        <VSpacer />
+
+        <VBtn class="mx-0" icon @click="close">
+          <VIcon :icon="mdi.mdiClose" />
+        </VBtn>
+      </VToolbar>
+
+      <VCardText>
+        <VRow>
+          <VCol cols="12">
+            <VTextField v-model="attrs.src" :variant="variantField" :label="ucFirst(t('dialog.image.src'))" />
+          </VCol>
+
+          <VCol cols="12" md="6">
+            <VTextField v-model="attrs.alt" :variant="variantField" :label="ucFirst(t('dialog.image.alt'))" />
+          </VCol>
+
+          <VCol cols="12" md="3">
+            <VTextField v-model="attrs.width" type="number" :variant="variantField" :precision="0" :min="1" :label="ucFirst(t('dialog.image.width'))" />
+          </VCol>
+
+          <VCol cols="12" md="3">
+            <VTextField v-model="attrs.height" type="number" :variant="variantField" :precision="0" :min="1" :label="ucFirst(t('dialog.image.height'))" />
+          </VCol>
+        </VRow>
+      </VCardText>
+
+      <VCardActions>
+        <VRow>
+          <VCol class="d-flex justify-start">
+            <VBtn color="warning" v-if="editor.isActive('image')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
+              {{ ucFirst(t('dialog.clear')) }}
+            </VBtn>
+          </VCol>
+          <VCol class="d-flex justify-end">
+            <VBtn :variant="variantBtn" @click="close" class="mr-2">
+              {{ ucFirst(t('dialog.close')) }}
+            </VBtn>
+            <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
+              {{ ucFirst(t('dialog.apply')) }}
+            </VBtn>
+          </VCol>
+        </VRow>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>

package/src/extensions/components/LinkDialog.vue

@@ -4,78 +4,82 @@ import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
 
 import { useI18n } from 'vue-i18n'
-import { computed, inject, Ref, ref, watch } from 'vue'
+import { computed, inject, onMounted, onUnmounted, Ref, ref } from 'vue'
 
 import helpers from '@tiptapify/utils/helpers'
 
-defineExpose({ open })
+defineProps({
+  variantBtn: { type: String, default() { return 'elevated' }},
+  variantField: { type: String, default() { return 'solo' }}
+})
 
 const { ucFirst } = helpers
 
-interface Props {
-  value?: string
-  target?: '_self' | '_blank'
-  destroy?: () => void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  value: undefined,
-  target: '_blank',
-  destroy: undefined
-})
-
 const editor = inject('tiptapifyEditor') as Ref<Editor>
-
 const { t } = useI18n()
 
 const generateLinkAttrs = () => ({
   href: '',
-  target: '_blank'
+  target: '_blank',
+  cssClass: '',
+  rel: ''
 })
 
+const relAttrs = ['alternate', 'author', 'bookmark', 'external', 'help', 'license', 'next', 'nofollow', 'noreferrer', 'noopener', 'prev', 'search', 'tag']
+
 const attrs = ref(generateLinkAttrs())
 
 const dialog = ref<boolean>(false)
 
 const isDisabled = computed(() => {
-  const { href, target } = attrs.value
-  if (!href) return true
-
-  return props.value === href && props.target === target
+  const { href } = attrs.value
+  return !href
 })
 
 function apply() {
-  const { href, target } = attrs.value
+  let { href, target, rel, cssClass } = attrs.value
+  target = target ? '_blank' : '_self'
+  rel = rel.join(' ')
 
   if (href) {
-    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target }).run()
+    editor.value.chain().focus().extendMarkRange('link').setLink({ href, target, rel, class: cssClass }).run()
   }
+
   close()
 }
 
-function open() {
-  dialog.value = true
+function clear() {
+  editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
+
+  close()
 }
 
 function close() {
   dialog.value = false
+
   attrs.value = generateLinkAttrs()
+}
 
-  setTimeout(() => props.destroy?.(), 300)
+const showLink = (event: CustomEvent) => {
+  attrs.value.href = event.detail.link?.href
+  attrs.value.target = event.detail.link?.target === '_blank'
+  attrs.value.rel = event.detail.link?.rel?.split(' ')
+  attrs.value.cssClass = event.detail.link?.class
+
+  dialog.value = true;
 }
 
-watch(dialog, val => {
-  if (!val) return
+onMounted(() => {
+  window.addEventListener('tiptapify-show-link', showLink as EventListener)
+})
 
-  attrs.value = {
-    href: props.value,
-    target: props.target
-  }
+onUnmounted(() => {
+  window.removeEventListener('tiptapify-show-link', showLink as EventListener)
 })
 </script>
 
 <template>
-  <VDialog v-model="dialog" max-width="400" absolute @click:outside="close">
+  <VDialog v-model="dialog" max-width="800" absolute @click:outside="close">
     <VCard>
       <VToolbar class="px-6" density="compact">
         <span class="headline">{{ ucFirst(t('dialog.link.title')) }}</span>
@@ -88,13 +92,50 @@ watch(dialog, val => {
       </VToolbar>
 
       <VCardText>
-        <VTextField v-model="attrs.href" :label="ucFirst(t('dialog.link.placeholder'))" autofocus />
+        <VRow>
+          <VCol cols="12" md="9">
+            <VTextField v-model="attrs.href" :variant="variantField" :label="ucFirst(t('dialog.link.href'))" autofocus />
+          </VCol>
+
+          <VCol cols="12" md="3">
+            <VCheckbox v-model="attrs.target" color="primary" :label="ucFirst(t('dialog.link.target'))" />
+          </VCol>
+
+          <VCol cols="12">
+            <VSelect
+                v-model="attrs.rel"
+                :items="relAttrs"
+                :label="ucFirst(t('dialog.link.rel'))"
+                :variant="variantField"
+                multiple
+                chips
+                closable-chips
+                clearable
+            />
+          </VCol>
+
+          <VCol cols="12">
+            <VTextField v-model="attrs.cssClass" :variant="variantField" :label="ucFirst(t('dialog.link.class'))" />
+          </VCol>
+        </VRow>
       </VCardText>
 
       <VCardActions>
-        <VBtn :disabled="isDisabled" @click="apply">
-          {{ ucFirst(t('dialog.apply')) }}
-        </VBtn>
+        <VRow>
+          <VCol class="d-flex justify-start">
+            <VBtn color="warning" v-if="editor.isActive('link')" :variant="variantBtn" :disabled="isDisabled" @click="clear">
+              {{ ucFirst(t('dialog.clear')) }}
+            </VBtn>
+          </VCol>
+          <VCol class="d-flex justify-end">
+            <VBtn :variant="variantBtn" @click="close" class="mr-2">
+              {{ ucFirst(t('dialog.close')) }}
+            </VBtn>
+            <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
+              {{ ucFirst(t('dialog.apply')) }}
+            </VBtn>
+          </VCol>
+        </VRow>
       </VCardActions>
     </VCard>
   </VDialog>

package/src/extensions/components/PreviewDialog.vue

@@ -10,7 +10,6 @@ const content = ref()
 const dialog = ref(false)
 
 const showDialog = (event: CustomEvent) => {
-  console.log('preview event', event)
   content.value = event.detail.html
   dialog.value = true;
 }