tiptapify 0.0.8 → 0.0.10

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

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

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

@@ -62,7 +62,7 @@ export function getFormatExtraItems(editor: Editor) {
       icon: mdi.mdiCommentQuote,
       enabled: true,
       props: {
-        disabled: computed(() => !editor.can().chain().focus().toggleBlockquote().run()),
+        disabled: computed(() => !editor.can().chain().focus().toggleBlockquote().run() || editor.isActive('codeBlock') || editor.isActive('code')),
         color: computed(() => editor.isActive('blockquote') ? 'primary' : ''),
       },
       attrs: {

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

@@ -1,7 +1,7 @@
 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) {
   return {

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 => {
@@ -72,6 +73,9 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
       icon: mdi.mdiFormatFont,
       modelValue: false,
       enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().unsetFontFamily().run()),
+      },
       attrs: {
         click: () => editor.chain().focus().unsetFontFamily().run()
       },
@@ -98,6 +102,9 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
       icon: mdi.mdiFormatSize,
       modelValue: false,
       enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().unsetFontSize().run()),
+      },
       attrs: {
         click: () => editor.chain().focus().unsetFontSize().run()
       },
@@ -123,6 +130,9 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
       icon: mdi.mdiFormatLineHeight,
       modelValue: null,
       enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().unsetLineHeight().run()),
+      },
       attrs: {
         click: () => editor.chain().focus().unsetLineHeight().run()
       },
@@ -141,6 +151,54 @@ export function getStyleItems(editor: Editor, fontMeasure: string, customHeading
           }
         }
       })
+    },
+    highlight: {
+      name: 'highlight',
+      tooltip: 'style.color.highlight',
+      icon: mdi.mdiFormatColorFill,
+      icon2: mdi.mdiColorHelper,
+      enabled: true,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+      },
+      icon2Props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+        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,
+      props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+      },
+      icon2Props: {
+        disabled: computed(() => !editor.can().chain().focus().toggleHighlight().run()),
+        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,11 +50,12 @@ export interface ToolbarItemSections {
 
 export function toolbarItems(
   editor: any,
+  theme: any,
   fontMeasure: string,
   items: { list: Array<string>, exclude: boolean },
   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))
@@ -64,8 +68,6 @@ export function toolbarItems(
     /**
      * todo
      *
-     * font color, backgroundcolor
-     * tables
      * media (image, video)
      */
     style: { group: true, items: styleItems.value },

package/src/components/UI/Dialog.vue

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+
+import * as mdi from "@mdi/js";
+import { nextTick, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps({
+  module: String,
+  fullscreen: { type: Boolean, default () { return false } },
+  maxWidth: { type: Number, default () { return 800 } },
+})
+
+const { t } = useI18n();
+
+defineExpose({ open, close })
+const emits = defineEmits(['closeDialog'])
+
+const dialog = ref<boolean>(false)
+const movableHandler = ref(null)
+
+function open() {
+  dialog.value = true
+}
+
+function close() {
+  dialog.value = false
+}
+
+function emitClose() {
+  emits('closeDialog')
+
+  close()
+}
+
+function dragElement(trigger: HTMLElement, container: HTMLElement) {
+  const coordinates = {
+    moveX: 0,
+    moveY: 0,
+    cursorX: 0,
+    cursorY: 0,
+  }
+
+  trigger.onmousedown = dragMouseDown
+
+  function dragMouseDown(e: MouseEvent) {
+    e.preventDefault()
+
+    coordinates.cursorX = e.clientX
+    coordinates.cursorY = e.clientY
+
+    document.onmouseup = closeDragElement
+    document.onmousemove = elementDrag
+  }
+
+  function elementDrag(e: MouseEvent) {
+    e.preventDefault();
+
+    coordinates.moveX = coordinates.cursorX - e.clientX
+    coordinates.moveY = coordinates.cursorY - e.clientY
+    coordinates.cursorX = e.clientX
+    coordinates.cursorY = e.clientY
+
+    const parentOffsetLeft = container.parentNode.offsetLeft
+    const parentOffsetTop = container.parentNode.offsetTop
+
+    let left = container.offsetLeft - coordinates.moveX
+    if (left < (parentOffsetLeft * -1)) {
+      left = (parentOffsetLeft * -1)
+    }
+    if (left >= parentOffsetLeft) {
+      left = parentOffsetLeft
+    }
+
+    let top = container.offsetTop - coordinates.moveY
+    if (top < (parentOffsetTop * -1)) {
+      top = (parentOffsetTop * -1)
+    }
+    if (top >= parentOffsetTop) {
+      top = parentOffsetTop
+    }
+
+    container.style.left = `${left}px`
+    container.style.top = `${top}px`
+  }
+
+  function closeDragElement() {
+    document.onmouseup = null
+    document.onmousemove = null
+  }
+}
+
+watch(() => dialog.value, async () => {
+  await nextTick()
+
+  if (!movableHandler.value) {
+    return
+  }
+
+  if (dialog.value && !props.fullscreen) {
+    dragElement(movableHandler.value.$el as HTMLElement, movableHandler.value.$el.parentNode as HTMLElement)
+  }
+})
+</script>
+
+<template>
+  <VDialog v-model="dialog" :max-width="maxWidth" :fullscreen="fullscreen" absolute @click:outside="emitClose">
+    <VCard>
+      <VCardTitle ref="movableHandler" :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`" style="user-select: none;">
+        <VLabel>
+          {{ t(`dialog.${module}.title`) }}
+        </VLabel>
+
+        <VSpacer />
+
+        <VBtn density="compact" class="tiptapify-dialog-close" variant="elevated" elevation="4" icon @click="emitClose">
+          <VIcon size="x-small" :icon="mdi.mdiClose" />
+        </VBtn>
+      </VCardTitle>
+
+      <VDivider />
+
+      <slot name="content" />
+
+      <slot name="actions" />
+    </VCard>
+  </VDialog>
+</template>
+
+<style lang="scss" scoped>
+  :deep(.v-overlay__content) {
+    position: fixed;
+  }
+
+  .tiptapify-movable-handler, :deep(.tiptapify-movable-handler > *) {
+    cursor: move;
+  }
+
+  .tiptapify-dialog-close:hover {
+    cursor: pointer;
+  }
+</style>

package/src/components/editorExtensions.ts

@@ -69,7 +69,7 @@ export function editorExtensions (placeholder: string, slashCommands: boolean) {
     Dropcursor,
     Typography,
     Underline,
-    Highlight,
+    Highlight.configure({ multicolor: true }),
     TiptapifyLink.configure({
       openOnClick: false,
       defaultProtocol: 'https'
@@ -89,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

@@ -1,20 +1,16 @@
 <script setup lang="ts">
 
-import * as mdi from '@mdi/js'
 import { Editor } from "@tiptap/vue-3";
+import Dialog from "@tiptapify/components/UI/Dialog.vue";
 
 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()
 
@@ -27,7 +23,7 @@ const generateImageAttrs = () => ({
 
 const attrs = ref(generateImageAttrs())
 
-const dialog = ref<boolean>(false)
+const dialog = ref(null)
 
 const isDisabled = computed(() => {
   const { src } = attrs.value
@@ -64,7 +60,7 @@ function clear() {
 }
 
 function close() {
-  dialog.value = false
+  dialog.value.close()
 
   attrs.value = generateImageAttrs()
 }
@@ -75,7 +71,7 @@ const showTiptapifyImage = (event: CustomEvent) => {
   attrs.value.width = event.detail.image?.width
   attrs.value.height = event.detail.image?.height
 
-  dialog.value = true;
+  dialog.value.open()
 }
 
 onMounted(() => {
@@ -88,55 +84,47 @@ onUnmounted(() => {
 </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>
-
+  <Dialog ref="dialog" module="image" :max-width="800">
+    <template #content>
       <VCardText>
         <VRow>
           <VCol cols="12">
-            <VTextField v-model="attrs.src" :variant="variantField" :label="ucFirst(t('dialog.image.src'))" />
+            <VTextField v-model="attrs.src" density="compact" variant="outlined" :label="t('dialog.image.src')" />
           </VCol>
 
           <VCol cols="12" md="6">
-            <VTextField v-model="attrs.alt" :variant="variantField" :label="ucFirst(t('dialog.image.alt'))" />
+            <VTextField v-model="attrs.alt" density="compact" variant="outlined" :label="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'))" />
+            <VTextField v-model="attrs.width" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="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'))" />
+            <VTextField v-model="attrs.height" type="number" density="compact" variant="outlined" :precision="0" :min="1" :label="t('dialog.image.height')" />
           </VCol>
         </VRow>
       </VCardText>
+    </template>
 
+    <template #actions>
       <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')) }}
+              {{ t('dialog.clear') }}
             </VBtn>
           </VCol>
           <VCol class="d-flex justify-end">
             <VBtn :variant="variantBtn" @click="close" class="mr-2">
-              {{ ucFirst(t('dialog.close')) }}
+              {{ t('dialog.close') }}
             </VBtn>
             <VBtn color="primary" :variant="variantBtn" :disabled="isDisabled" @click="apply">
-              {{ ucFirst(t('dialog.apply')) }}
+              {{ t('dialog.apply') }}
             </VBtn>
           </VCol>
         </VRow>
       </VCardActions>
-    </VCard>
-  </VDialog>
+    </template>
+  </Dialog>
 </template>