tiptapify 0.0.35 → 0.1.0

package/src/extensions/components/media/image/ImageDialog.vue

@@ -18,6 +18,7 @@ const { t } = inject('tiptapifyI18n') as any
 const generateImageAttrs = () => ({
   src: '',
   alt: '',
+  title: null,
   height: null,
   width: null
 })
@@ -63,13 +64,17 @@ function updateSizeRatio(dim: string) {
 }
 
 function apply() {
-  let { src, alt, width, height } = attrs.value
+  let { src, alt, title, width, height } = attrs.value
 
-  const imageOptions: { src: string, alt: string, width?: number, height?: number} = {
+  const imageOptions: { src: string, alt: string, title?: string, width?: number, height?: number} = {
     src,
     alt
   }
 
+  if (title) {
+    imageOptions.title = title
+  }
+
   if (width) {
     imageOptions.width = width
   }
@@ -105,6 +110,7 @@ const showTiptapifyImage = (event: CustomEvent) => {
 
   attrs.value.src = event.detail.image?.src
   attrs.value.alt = event.detail.image?.alt
+  attrs.value.title = event.detail.image?.title
   attrs.value.width = event.detail.image?.width
   attrs.value.height = event.detail.image?.height
 
@@ -124,52 +130,68 @@ onUnmounted(() => {
   <TiptapifyDialog ref="dialog" module="image" :max-width="800">
     <template #content>
       <VCardText>
-        <VRow>
-          <VCol cols="12">
-            <VTextField v-model="attrs.src" density="compact" variant="outlined" :label="t('dialog.image.src')" />
-          </VCol>
-
-          <VCol cols="12" md="5">
-            <VTextField v-model="attrs.alt" density="compact" variant="outlined" :label="t('dialog.image.alt')" />
-          </VCol>
-
-          <VCol cols="5" md="3">
+        <div class="tiptapify-grid-row">
+          <div>
+            <VTextField v-model="attrs.src" density="comfortable" :label="t('dialog.image.src')" />
+          </div>
+        </div>
+
+        <div class="tiptapify-grid-row">
+          <div>
+            <VTextField
+                v-model="attrs.alt"
+                density="comfortable"
+                :label="t('dialog.image.alt')" />
+          </div>
+        </div>
+
+        <div class="tiptapify-grid-row">
+          <div>
+            <VTextField
+                v-model="attrs.title"
+                density="comfortable"
+                :label="t('dialog.image.title')" />
+          </div>
+        </div>
+
+        <div class="tiptapify-grid-row">
+          <div class="tiptapify-image-inputs-container">
             <VTextField
                 v-model="attrs.width"
                 type="number"
-                density="compact"
-                variant="outlined"
+                density="comfortable"
                 :precision="0"
                 :min="1"
                 :label="t('dialog.image.width')"
                 @change="setRatio"
                 @update:model-value="updateSizeRatio('width')"
             />
-          </VCol>
-
-          <VCol cols="5" md="3">
             <VTextField
                 v-model="attrs.height"
                 type="number"
-                density="compact"
-                variant="outlined"
+                density="comfortable"
                 :precision="0"
                 :min="1"
                 :label="t('dialog.image.height')"
                 @change="setRatio"
                 @update:model-value="updateSizeRatio('height')"
             />
-          </VCol>
-
-          <VCol cols="2" md="1">
-            <VBtn size="40" :variant="variantBtn" v-model="keepRatio" @click="keepRatio = !keepRatio">
-              <VIcon :icon="keepRatio ? `mdiSvg:${mdi.mdiLock}` : `mdiSvg:${mdi.mdiLockOpen}`" />
+          </div>
+          <div>
+            <VBtn
+                v-model="keepRatio"
+                :color="keepRatio ? 'primary' : 'secondary'"
+                size="48"
+                :variant="variantBtn"
+                @click="keepRatio = !keepRatio"
+            >
+              <VIcon :icon="keepRatio ? `mdiSvg:${mdi.mdiLock}` : `mdiSvg:${mdi.mdiLockOpenVariant}`" />
               <VTooltip activator="parent">
                 {{ t('dialog.image.keep_ratio') }}
               </VTooltip>
             </VBtn>
-          </VCol>
-        </VRow>
+          </div>
+        </div>
       </VCardText>
     </template>
 
@@ -193,4 +215,24 @@ onUnmounted(() => {
       </VCardActions>
     </template>
   </TiptapifyDialog>
-</template>
+</template>
+
+<style lang="scss" scoped>
+.tiptapify-grid-row {
+  margin-top: 8px;
+  gap: 16px;
+  display: grid;
+  grid-template-columns: 9fr 1fr;
+  justify-items: end;
+
+  :nth-child(1) {
+    width: 100%;
+  }
+
+  .tiptapify-image-inputs-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+}
+</style>

package/src/extensions/components/slashCommands/CommandsList.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import * as mdi from '@mdi/js'
+import type { SlashCommand } from '@tiptapify/types/slashCommandsTypes'
 
-const props = defineProps({
-  items: {
-    type: Array,
-    required: true,
-  },
-  command: {
-    type: Function,
-    required: true,
-  },
-})
+const props = defineProps<{
+  items: SlashCommand[]
+  command: (item: SlashCommand) => void
+}>()
 
 const selectedIndex = ref(0)
 
@@ -19,7 +14,7 @@ watch(() => props.items, () => {
   selectedIndex.value = 0
 }, { deep: true })
 
-function onKeyDown({ event }) {
+function onKeyDown({ event }: { event: KeyboardEvent }) {
   if (event.key === 'ArrowUp') {
     upHandler()
     return true
@@ -50,7 +45,7 @@ function enterHandler() {
   selectItem(selectedIndex.value)
 }
 
-function selectItem(index) {
+function selectItem(index: number) {
   const item = props.items[index]
 
   if (item) {
@@ -58,6 +53,11 @@ function selectItem(index) {
   }
 }
 
+function getIcon(iconName: string) {
+  const iconKey = `mdi${iconName}` as keyof typeof mdi
+  return mdi[iconKey] || mdi.mdiImageBrokenVariant
+}
+
 defineExpose({
   onKeyDown,
   upHandler,
@@ -70,17 +70,21 @@ defineExpose({
 <template>
   <div class="dropdown-menu">
     <template v-if="items.length">
-      <VBtn
-          variant="text"
-          v-for="(item, index) in items"
-          :key="index"
-          @click="selectItem(index)"
-          size="small"
+      <button
+        v-for="(item, index) in items"
+        :key="index"
+        class="item"
+        :class="{ 'is-selected': index === selectedIndex }"
+        @click="selectItem(index)"
+        @mouseenter="selectedIndex = index"
       >
-        <VIcon :icon="`mdiSvg:${mdi[`mdi${item.icon}`]}` || `mdiSvg:${mdi.mdiImageBrokenVariant}`" size="16" />
-      </VBtn>
+        <span class="item-icon">
+          <VIcon :icon="`mdiSvg:${getIcon(item.icon)}`" size="18" />
+        </span>
+        <span class="item-title">{{ item.title }}</span>
+      </button>
     </template>
-    <div class="item" v-else>No result</div>
+    <div v-else class="no-result">No result</div>
   </div>
 </template>
 
@@ -96,5 +100,44 @@ defineExpose({
   overflow: auto;
   padding: 0.4rem;
   position: relative;
+  max-height: 300px;
+  min-width: 200px;
+}
+
+.item {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: 0.4rem;
+  cursor: pointer;
+  display: flex;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  transition: background-color 0.15s ease;
+
+  &:hover,
+  &.is-selected {
+    background: var(--gray-1);
+  }
+}
+
+.item-icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  width: 24px;
+}
+
+.item-title {
+  color: var(--black);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.no-result {
+  color: var(--gray-5);
+  font-size: 0.875rem;
+  padding: 0.5rem 0.75rem;
 }
-</style>
+</style>

package/src/extensions/components/slashCommands/PickerDialog.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import type { Editor } from '@tiptap/core'
+import EmojiPicker from '@tiptapify/extensions/components/media/emoji/Picker.vue'
+import CharmapPicker from '@tiptapify/extensions/components/media/charmap/Picker.vue'
+import { PickerEventBus } from '@tiptapify/extensions/PickerEventBus'
+
+const props = defineProps<{
+  editor: Editor
+  t: any
+  type: 'emoji' | 'charmap'
+}>()
+
+const handleClose = () => {
+  PickerEventBus.emit('close', { type: props.type })
+}
+</script>
+
+<template>
+  <div class="tiptapify-picker-dialog" @click.self="handleClose">
+    <div class="tiptapify-picker-dialog__content">
+      <EmojiPicker v-if="type === 'emoji'" :editor="editor" :t="t" />
+      <CharmapPicker v-else-if="type === 'charmap'" :editor="editor" :t="t" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tiptapify-picker-dialog {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.tiptapify-picker-dialog__content {
+  background: rgb(var(--v-theme-surface));
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+}
+</style>

package/src/extensions/components/slashCommands/suggestion.ts

@@ -1,107 +1,154 @@
-import { computePosition, flip, shift } from '@floating-ui/dom'
-import { posToDOMRect, VueRenderer } from '@tiptap/vue-3'
-
-import CommandsList from './CommandsList.vue'
-
-const updatePosition = (editor, element) => {
-  const virtualElement = {
-    getBoundingClientRect: () => posToDOMRect(editor.view, editor.state.selection.from, editor.state.selection.to),
-  }
-
-  computePosition(virtualElement, element, {
-    placement: 'bottom-start',
-    strategy: 'absolute',
-    middleware: [shift(), flip()],
-  }).then(({ x, y, strategy }) => {
-    element.style.width = 'max-content'
-    element.style.position = strategy
-    element.style.left = `${x}px`
-    element.style.top = `${y}px`
-  })
-}
-
-export default {
-  items: ({ query }) => {
-    return [
-      {
-        title: 'H1',
-        icon: 'FormatHeader1',
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run()
-        },
-      },
-      {
-        title: 'H2',
-        icon: 'FormatHeader2',
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run()
-        },
-      },
-      {
-        title: 'Bold',
-        icon: 'FormatBold',
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).setMark('bold').run()
-        },
-      },
-      {
-        title: 'Italic',
-        icon: 'FormatItalic',
-        command: ({ editor, range }) => {
-          editor.chain().focus().deleteRange(range).setMark('italic').run()
-        },
-      },
-    ]
-      .filter(item => item.title.toLowerCase().startsWith(query.toLowerCase()))
-      .slice(0, 10)
+import { SlashCommand, SlashCommandId } from '@tiptapify/types/slashCommandsTypes'
+
+export const slashCommandMap: Record<SlashCommandId, SlashCommand> = {
+  h1: {
+    title: 'H1',
+    icon: 'FormatHeader1',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 1 }).run()
+    },
   },
-
-  render: () => {
-    let component
-
-    return {
-      onStart: props => {
-        component = new VueRenderer(CommandsList, {
-          props,
-          editor: props.editor,
-        })
-
-        if (!props.clientRect) {
-          return
-        }
-
-        component.element.style.position = 'absolute'
-
-        document.body.appendChild(component.element)
-
-        updatePosition(props.editor, component.element)
-      },
-
-      onUpdate(props) {
-        component.updateProps(props)
-
-        if (!props.clientRect) {
-          return
-        }
-
-        updatePosition(props.editor, component.element)
-      },
-
-      onKeyDown(props) {
-        if (props.event.key === 'Escape') {
-          component.destroy()
-          component.element.remove()
-
-          return true
-        }
-
-        return component.ref?.onKeyDown(props)
-      },
-
-      onExit() {
-        component.destroy()
-        component.element.remove()
-      },
-    }
+  h2: {
+    title: 'H2',
+    icon: 'FormatHeader2',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 2 }).run()
+    },
+  },
+  h3: {
+    title: 'H3',
+    icon: 'FormatHeader3',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 3 }).run()
+    },
   },
-}
+  h4: {
+    title: 'H4',
+    icon: 'FormatHeader4',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 4 }).run()
+    },
+  },
+  h5: {
+    title: 'H5',
+    icon: 'FormatHeader5',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 5 }).run()
+    },
+  },
+  h6: {
+    title: 'H6',
+    icon: 'FormatHeader6',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).setNode('heading', { level: 6 }).run()
+    },
+  },
+  bulletList: {
+    title: 'Bullet List',
+    icon: 'FormatListBulleted',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleBulletList().run()
+    },
+  },
+  numberedList: {
+    title: 'Numbered List',
+    icon: 'FormatListNumbered',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleOrderedList().run()
+    },
+  },
+  taskList: {
+    title: 'Task List',
+    icon: 'FormatListCheckbox',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleTaskList().run()
+    },
+  },
+  code: {
+    title: 'Code',
+    icon: 'CodeTags',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleCode().run()
+    },
+  },
+  codeBlock: {
+    title: 'Code Block',
+    icon: 'CodeBracesBox',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleCodeBlock().run()
+    },
+  },
+  quote: {
+    title: 'Quote',
+    icon: 'FormatQuoteClose',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).toggleBlockquote().run()
+    },
+  },
+  image: {
+    title: 'Image',
+    icon: 'Image',
+    command: ({ editor, range }) => {
+      const url = window.prompt('Enter image URL:')
+      if (url) {
+        editor.chain().focus().deleteRange(range).setImage({ src: url }).run()
+      }
+    },
+  },
+  video: {
+    title: 'Video',
+    icon: 'Video',
+    command: ({ editor, range }) => {
+      const url = window.prompt('Enter YouTube video URL:')
+      if (url) {
+        editor.chain().focus().deleteRange(range).setYoutubeVideo({ src: url }).run()
+      }
+    },
+  },
+  table: {
+    title: 'Table',
+    icon: 'Table',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+    },
+  },
+  link: {
+    title: 'Link',
+    icon: 'Link',
+    command: ({ editor, range }) => {
+      const previousUrl = editor.getAttributes('link').href
+      const url = window.prompt('Enter link URL:', previousUrl)
+      if (url === null) return
+      if (url === '') {
+        editor.chain().focus().deleteRange(range).extendMarkRange('link').unsetLink().run()
+        return
+      }
+      editor.chain().focus().deleteRange(range).extendMarkRange('link').setLink({ href: url }).run()
+    },
+  },
+  divider: {
+    title: 'Divider',
+    icon: 'Minus',
+    command: ({ editor, range }) => {
+      editor.chain().focus().deleteRange(range).setHorizontalRule().run()
+    },
+  },
+  emoji: {
+    title: 'Emoji',
+    icon: 'Emoticon',
+    isPicker: true,
+  },
+  specialChars: {
+    title: 'Special Characters',
+    icon: 'FormatText',
+    isPicker: true,
+  },
+}
+
+export const defaultSlashCommandIds: SlashCommandId[] = [
+  'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+  'bulletList', 'numberedList', 'taskList',
+  'code', 'codeBlock', 'quote',
+  'image', 'video', 'table', 'link',
+  'divider', 'emoji', 'specialChars'
+]