tiptapify 0.0.7 → 0.0.9

package/src/components/Toolbar/Items.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import Group from "@tiptapify/components/Toolbar/Group.vue";
+import Toggle from "@tiptapify/components/Toolbar/Toggle.vue";
+import { computed, defineProps, PropType, Ref, ref } from 'vue'
+import { useI18n } from "vue-i18n";
+
+import { ToolbarItemSections } from "@tiptapify/components/Toolbar/items";
+
+const props = defineProps({
+  variantBtn: { type: String, default () { return 'elevated' }},
+  items: { type: Object as PropType<ToolbarItemSections>, default() { return {} }},
+})
+
+const { t } = useI18n();
+
+const toolbarItemsRef: Ref<ToolbarItemSections> = ref(computed(() => props.items).value)
+
+</script>
+
+<template>
+  <VToolbarItems class="py-2">
+    <template v-for="(toolbarSection, sectionKey) in toolbarItemsRef" :key="sectionKey">
+      <Group v-if="toolbarSection.group" :variant="variantBtn" :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="variantBtn"
+          v-bind="toolbarItem.props"
+          v-on="toolbarItem.attrs"
+          class="menu-button"
+          size="32"
+          elevation="4"
+          rounded="sm"
+      >
+        <VTooltip :text="t(toolbarItem.tooltip)" location="top" activator="parent" />
+
+        <VIcon v-if="toolbarItem.icon" :icon="toolbarItem.icon" size="16" />
+        <span v-else class="menu-item-title">
+          {{ t(toolbarItem.name) }}
+        </span>
+      </VBtn>
+
+      <div class="menu-divider"></div>
+    </template>
+  </VToolbarItems>
+</template>
+
+<style lang="scss" scoped>
+:deep(.v-btn-group) {
+  height: 32px !important;
+}
+
+.menu-item-title {
+  font-size: 14px;
+}
+
+.menu-button {
+  margin: 0 1px;
+}
+
+.menu-divider {
+  margin: 0 4px;
+}
+
+.menu-divider:nth-last-child(1) {
+  display: none;
+}
+
+.v-toolbar-items {
+  flex-wrap: wrap;
+  row-gap: 5px;
+}
+</style>

package/src/components/Toolbar/defaultExtensionComponents.ts

@@ -0,0 +1,32 @@
+import ImageDialog from "@tiptapify/extensions/components/ImageDialog.vue";
+import LinkDialog from "@tiptapify/extensions/components/LinkDialog.vue";
+import PreviewDialog from "@tiptapify/extensions/components/PreviewDialog.vue";
+import ShowSourceDialog from "@tiptapify/extensions/components/ShowSourceDialog.vue";
+import { extensionsComponents } from "@tiptapify/types/overridable-extensions";
+import { computed } from "vue";
+
+export function getDefaultComponents(variantField: string): extensionsComponents {
+  return {
+    image: {
+      component: ImageDialog,
+      props: {
+        variantField: computed(() => variantField).value,
+      }
+    },
+    link: {
+      component: LinkDialog,
+      props: {
+        variantField: computed(() => variantField).value,
+      }
+    },
+    preview: {
+      component: PreviewDialog,
+    },
+    showSource: {
+      component: ShowSourceDialog,
+      props: {
+        variantField: computed(() => variantField).value,
+      }
+    }
+  }
+}

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

@@ -55,19 +55,6 @@ export function getFormatItems(editor: Editor) {
       attrs: {
         click: () => editor.chain().focus().toggleUnderline().run()
       }
-    },
-    highlight: {
-      name: 'highlight',
-      tooltip: 'format.highlight',
-      icon: mdi.mdiMarker,
-      enabled: true,
-      props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
-        color: computed(() => editor.isActive('highlight') ? 'primary' : ''),
-      },
-      attrs: {
-        click: () => editor.chain().focus().toggleHighlight().run()
-      }
     }
   }
 }

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

@@ -1,13 +1,13 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import TableBuilder from "@tiptapify/extensions/components/TableBuilder.vue";
-import { computed, markRaw, Ref } from "vue";
+import { computed, markRaw } 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/misc.ts

@@ -1,6 +1,6 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
-import { computed, Ref } from "vue";
+import { computed } from "vue";
 
 export function getMiscItems(editor: Editor) {
   return {

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

@@ -1,14 +1,15 @@
 import * as mdi from "@mdi/js";
 import { Editor } from "@tiptap/vue-3";
 import { fonts } from "@tiptapify/components/Toolbar/fonts";
-import { computed, ref } from "vue";
+import StyleColor from "@tiptapify/extensions/components/StyleColor.vue";
+import { computed, markRaw, ref } from "vue";
 
 interface MDIIcons {
   [key: string]: string
 }
 const mdiIcons = mdi as MDIIcons
 
-export function getStyleItems(editor: Editor, fontMeasure: string, customHeadingLevels: Array<number> = []) {
+export function getStyleItems(editor: Editor, theme: any, fontMeasure: string, customHeadingLevels: Array<number> = []) {
   const headingLevels = ref([1, 2, 3, 4, 5, 6])
   if (customHeadingLevels.length) {
     customHeadingLevels.forEach(level => {
@@ -141,6 +142,46 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
           }
         }
       })
+    },
+    highlight: {
+      name: 'highlight',
+      tooltip: 'style.color.highlight',
+      icon: mdi.mdiFormatColorFill,
+      icon2: mdi.mdiColorHelper,
+      enabled: true,
+      icon2Props: {
+        color: computed(() => {
+          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
+          return editor.getAttributes('highlight').color || defaultColor
+        }),
+        style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
+      },
+      component: markRaw(StyleColor),
+      componentProps: {
+        fontColor: false,
+        backgroundColor: true,
+        color: computed(() => editor.getAttributes('highlight').color || ''),
+      }
+    },
+    color: {
+      name: 'color',
+      tooltip: 'style.color.text',
+      icon: mdi.mdiFormatColorText,
+      icon2: mdi.mdiColorHelper,
+      enabled: true,
+      icon2Props: {
+        color: computed(() => {
+          const defaultColor = theme.global.current.value.dark ? '#fff' : '#000'
+          return editor.getAttributes('textStyle').color || defaultColor
+        }),
+        style: 'filter: drop-shadow(rgba(0, 0, 0, .75) 1px 1px 2px);'
+      },
+      component: markRaw(StyleColor),
+      componentProps: {
+        fontColor: true,
+        backgroundColor: false,
+        color: computed(() => editor.getAttributes('textStyle').color || ''),
+      }
     }
   }
 }

package/src/components/Toolbar/items.ts

@@ -6,7 +6,7 @@ import { getListItems } from "@tiptapify/components/Toolbar/items/list";
 import { getMediaItems } from "@tiptapify/components/Toolbar/items/media";
 import { getMiscItems } from "@tiptapify/components/Toolbar/items/misc";
 import { getStyleItems } from "@tiptapify/components/Toolbar/items/style";
-import { ComputedRef, Ref, ref } from "vue";
+import { ComputedRef, ref } from "vue";
 
 interface ToolbarItemAttrs {
   [key: string]: Function | any
@@ -20,12 +20,15 @@ export interface ToolbarItem {
   name: string|number,
   tooltip: string,
   icon: string|ComputedRef<string>,
+  icon2?: string|ComputedRef<string>,
   noI18n?: boolean,
   enabled: boolean,
   component?: any,
   modelValue?: any,
   group?: boolean,
   toggle?: boolean,
+  icon2Props?: ToolbarItemProps,
+  componentProps?: ToolbarItemProps,
   props?: ToolbarItemProps,
   attrs?: ToolbarItemAttrs,
   children?: ToolbarItems|ToolbarItem[],
@@ -47,26 +50,24 @@ export interface ToolbarItemSections {
 
 export function toolbarItems(
   editor: any,
+  theme: 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 styleItems = ref(getStyleItems(editor.value, theme, fontMeasure, customHeadingLevels))
   const formatItems = ref(getFormatItems(editor.value))
   const formatExtraItems = ref(getFormatExtraItems(editor.value))
   const alignmentItems = ref(getAlignmentItems(editor.value))
   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 = {
     /**
      * todo
      *
-     * font color, backgroundcolor
-     * tables
      * media (image, video)
      */
     style: { group: true, items: styleItems.value },

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'
@@ -68,12 +69,13 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     Dropcursor,
     Typography,
     Underline,
-    Highlight,
-    Link.configure({
+    Highlight.configure({ multicolor: true }),
+    TiptapifyLink.configure({
       openOnClick: false,
-      defaultProtocol: 'https',
+      defaultProtocol: 'https'
     }),
     Image,
+    TiptapifyImage,
     Superscript,
     Subscript,
     TableKit,
@@ -87,12 +89,8 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
         },
       })
       .configure({ lowlight }),
-    Selection.configure({
-      className: 'selection',
-    }),
-    TextAlign.configure({
-      types: ['heading', 'paragraph'],
-    }),
+    Selection.configure({ className: 'selection' }),
+    TextAlign.configure({ types: ['heading', 'paragraph'] }),
     Placeholder.configure({ placeholder }),
     CharacterCount,
     ViewSource,

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>