tiptapify 0.0.6 → 0.0.8

package/src/components/Toolbar/Index.vue

@@ -1,16 +1,19 @@
 <script setup lang="ts">
-import LinkDialog from "@tiptapify/components/extensions/components/LinkDialog.vue";
-import ShowSource from "@tiptapify/components/extensions/components/ShowSource.vue";
+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";
 import Group from "@tiptapify/components/Toolbar/Group.vue";
 import Toggle from "@tiptapify/components/Toolbar/Toggle.vue";
-import { useEditor } from "@tiptapify/composable/useEditor";
-import { computed, defineProps, Ref, ref } from 'vue'
+import { computed, defineProps, inject, Ref, ref } from 'vue'
 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 [] }},
@@ -23,17 +26,13 @@ const props = defineProps({
 
 const { t } = useI18n();
 
-const { editor } = useEditor()
-const editorInstance = ref(editor.getInstance())
-
-const toolbarLinkButton = ref(null)
+const editor = inject('tiptapifyEditor') as Ref<Editor>
 
 const items = toolbarItems(
-    editorInstance,
+    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"
@@ -64,8 +63,8 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
 
             <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="16" />
             <span v-else class="menu-item-title">
-                {{ t(toolbarItem.name) }}
-              </span>
+              {{ t(toolbarItem.name) }}
+            </span>
           </VBtn>
 
           <div class="menu-divider"></div>
@@ -73,8 +72,10 @@ const toolbarItemsRef: Ref<ToolbarItemSections> = ref(items)
       </VToolbarItems>
     </VToolbar>
 
-    <LinkDialog ref="toolbarLinkButton" />
-    <ShowSource />
+    <ImageDialog :variant-field="variantField" />
+    <LinkDialog :variant-field="variantField" />
+    <PreviewDialog />
+    <ShowSourceDialog :variant-field="variantField" />
   </div>
 </template>
 

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

@@ -1,12 +1,13 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
+import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
+import { computed, markRaw, Ref } from "vue";
 
-export function getMediaItems(editor: Editor, toolbarLinkButton: any) {
+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: {
@@ -14,12 +15,197 @@ export function getMediaItems(editor: Editor, toolbarLinkButton: any) {
         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: 'media.tables.table',
+      icon: mdi.mdiTable,
+      modelValue: false,
+      enabled: true,
+      props: {
+        color: computed(() => editor.isActive('table') ? 'primary' : ''),
+        disabled: computed(() => !editor.can().chain().focus().insertTable().run()),
+      },
+      children: [
+        {
+          name: 'insert table',
+          tooltip: 'media.tables.insertTable',
+          icon: mdi.mdiTablePlus,
+          enabled: true,
+          props: {
+            disabled: computed(() => !editor.can().chain().focus().insertTable().run()),
+            activator: 'parent',
+            openOnClick: true,
+            openOnHover: false,
+            closeOnContentClick: false,
+            submenu: true
+          },
+          component: markRaw(TableBuilder),
+        },
+        {
+          name: 'delete table',
+          tooltip: 'media.tables.deleteTable',
+          icon: mdi.mdiTableMinus,
+          enabled: true,
+          props: {
+            disabled: computed(() => !editor.can().chain().focus().deleteTable().run()),
+          },
+          attrs: {
+            click: () => editor.chain().focus().deleteTable().run()
+          }
+        },
+        {
+          name: 'table row',
+          tooltip: 'media.tables.row',
+          icon: mdi.mdiTableRow,
+          enabled: true,
+          props: {
+            disabled: computed(
+              () =>
+                !editor.can().chain().focus().addRowBefore().run() &&
+                !editor.can().chain().focus().addRowAfter().run() &&
+                !editor.can().chain().focus().deleteRow().run()
+            ),
+            openOnHover: true,
+            openOnClick: true,
+            activator: 'parent',
+            submenu: true
+          },
+          children: [
+            {
+              name: 'insert row before',
+              tooltip: 'media.tables.insertRowBefore',
+              icon: mdi.mdiTableRowPlusBefore,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().addRowBefore().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().addRowBefore().run()
+              }
+            },
+            {
+              name: 'insert row after',
+              tooltip: 'media.tables.insertRowAfter',
+              icon: mdi.mdiTableRowPlusAfter,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().addRowAfter().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().addRowAfter().run()
+              }
+            },
+            {
+              name: 'delete row',
+              tooltip: 'media.tables.deleteRow',
+              icon: mdi.mdiTableRowRemove,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().deleteRow().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().deleteRow().run()
+              }
+            },
+          ]
+        },
+        {
+          name: 'column',
+          tooltip: 'media.tables.col',
+          icon: mdi.mdiTableColumn,
+          enabled: true,
+          props: {
+            disabled: computed(
+              () =>
+                !editor.can().chain().focus().addColumnBefore().run() &&
+                !editor.can().chain().focus().addColumnAfter().run() &&
+                !editor.can().chain().focus().deleteColumn().run()
+            ),
+            openOnHover: true,
+            openOnClick: true,
+            activator: 'parent',
+            submenu: true
+          },
+          children: [
+            {
+              name: 'insert col before',
+              tooltip: 'media.tables.insertColBefore',
+              icon: mdi.mdiTableColumnPlusBefore,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().addColumnBefore().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().addColumnBefore().run()
+              }
+            },
+            {
+              name: 'insert column after',
+              tooltip: 'media.tables.insertColAfter',
+              icon: mdi.mdiTableColumnPlusAfter,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().addColumnAfter().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().addColumnAfter().run()
+              }
+            },
+            {
+              name: 'delete column',
+              tooltip: 'media.tables.deleteCol',
+              icon: mdi.mdiTableColumnRemove,
+              enabled: true,
+              props: {
+                disabled: computed(() => !editor.can().chain().focus().deleteColumn().run()),
+              },
+              attrs: {
+                click: () => editor.chain().focus().deleteColumn().run()
+              }
+            }
+          ]
+        },
+        {
+          name: 'merge cells',
+          tooltip: 'media.tables.mergeCells',
+          icon: mdi.mdiTableMergeCells,
+          enabled: true,
+          props: {
+            disabled: computed(() => !editor.can().chain().focus().mergeCells().run()),
+          },
+          attrs: {
+            click: () => editor.chain().focus().mergeCells().run()
+          }
+        },
+        {
+          name: 'split cell',
+          tooltip: 'media.tables.splitCell',
+          icon: mdi.mdiTableSplitCell,
+          enabled: true,
+          props: {
+            disabled: computed(() => !editor.can().chain().focus().splitCell().run()),
+          },
+          attrs: {
+            click: () => editor.chain().focus().splitCell().run()
+          }
+        }
+      ]
     }
   }
 }

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

@@ -1,6 +1,6 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
-import { computed } from "vue";
+import { computed, Ref } from "vue";
 
 export function getMiscItems(editor: Editor) {
   return {
@@ -34,6 +34,15 @@ export function getMiscItems(editor: Editor) {
         click: () => editor.commands.showSource()
       }
     },
+    preview: {
+      name: 'preview',
+      tooltip: 'misc.preview',
+      icon: mdi.mdiFileEyeOutline,
+      enabled: true,
+      attrs: {
+        click: () => editor.commands.showPreview()
+      }
+    },
     formatClear: {
       name: 'format clear',
       tooltip: 'format.formatClear',

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

@@ -70,7 +70,7 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
       name: 'font-family',
       tooltip: 'style.fontFamily',
       icon: mdi.mdiFormatFont,
-      modelValue: null,
+      modelValue: false,
       enabled: true,
       attrs: {
         click: () => editor.chain().focus().unsetFontFamily().run()
@@ -96,7 +96,7 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
       name: 'font-size',
       tooltip: 'style.fontSize',
       icon: mdi.mdiFormatSize,
-      modelValue: computed(() => editor.getAttributes('textStyle').fontSize || null),
+      modelValue: false,
       enabled: true,
       attrs: {
         click: () => editor.chain().focus().unsetFontSize().run()

package/src/components/Toolbar/items.ts

@@ -22,6 +22,7 @@ export interface ToolbarItem {
   icon: string|ComputedRef<string>,
   noI18n?: boolean,
   enabled: boolean,
+  component?: any,
   modelValue?: any,
   group?: boolean,
   toggle?: boolean,
@@ -48,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))
@@ -58,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,11 +23,13 @@ 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/components/extensions/view-source'
-import SlashCommands from '@tiptapify/components/extensions/slash-commands'
-import suggestion from '@tiptapify/components/extensions/components/slashCommands/suggestion'
+import { ViewSource } from '@tiptapify/extensions/view-source'
+import { Preview } from '@tiptapify/extensions/preview'
+import SlashCommands from '@tiptapify/extensions/slash-commands'
+import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
 
 // load all languages with "all" or common languages with "common"
 import { common, createLowlight } from 'lowlight'
@@ -68,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,
@@ -94,7 +97,8 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     }),
     Placeholder.configure({ placeholder }),
     CharacterCount,
-    ViewSource
+    ViewSource,
+    Preview
   ]
 
   if (slashCommands) {

package/src/components/index.ts

@@ -0,0 +1,13 @@
+import { Editor, useEditor } from "@tiptap/vue-3";
+import { editorExtensions } from "@tiptapify/components/editorExtensions";
+import { ShallowRef } from "vue";
+
+export function getTiptapEditor (content: any, placeholder: string, slashCommands: boolean = true): ShallowRef<Editor | undefined> {
+  const extensions = editorExtensions(placeholder, slashCommands)
+  const editor: ShallowRef<Editor | undefined> = useEditor({
+    content,
+    extensions,
+  })
+
+  return editor
+}

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>