tiptapify 0.0.36 → 0.1.1

package/src/extensions/slash-commands.ts

@@ -1,7 +1,42 @@
 import { Extension } from '@tiptap/core'
+import { Editor } from '@tiptap/core'
 import Suggestion from '@tiptap/suggestion'
+import { VueRenderer, posToDOMRect } from '@tiptap/vue-3'
+import { computePosition, flip, shift } from '@floating-ui/dom'
+import { useLocale } from '@tiptapify/i18n'
+import CommandsList from '@tiptapify/extensions/components/slashCommands/CommandsList.vue'
+import PickerDialog from '@tiptapify/extensions/components/slashCommands/PickerDialog.vue'
+import { PickerEventBus } from '@tiptapify/extensions/PickerEventBus'
+import { defaultSlashCommandIds, slashCommandMap } from '@tiptapify/extensions/components/slashCommands/suggestion'
+import { SlashCommandId } from '@tiptapify/types/slashCommandsTypes'
 
-export default Extension.create(
+const updatePosition = (editor: Editor, element: HTMLElement) => {
+  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 type SlashCommandsExtensionOptions = {
+  suggestion?: {
+    char?: string
+    command?: ({ editor, range, props }: { editor: Editor, range: any, props: any }) => void
+    allowedCommands?: SlashCommandId[]
+    render?: () => any
+  }
+}
+
+export default Extension.create<SlashCommandsExtensionOptions>(
   {
     name: 'slash-commands',
 
@@ -9,20 +44,145 @@ export default Extension.create(
       return {
         suggestion: {
           char: '/',
-          command: ({ editor, range, props }) => {
-            props.command({editor, range})
-          },
+          allowedCommands: defaultSlashCommandIds,
         },
       }
     },
 
     addProseMirrorPlugins() {
+      const allowedCommands = this.options.suggestion?.allowedCommands ?? defaultSlashCommandIds
+      const customCommand = this.options.suggestion?.command
+      const char = this.options.suggestion?.char ?? '/'
+
+      let component: VueRenderer | null = null
+      let pickerComponent: VueRenderer | null = null
+
+      const items = ({ query }: { query: string }) => {
+        const lowerQuery = query.toLowerCase()
+        return allowedCommands
+          .map(id => {
+            const cmd = slashCommandMap[id]
+            if (cmd.isPicker) {
+              return {
+                ...cmd,
+                id,
+                pickerType: id === 'emoji' ? 'emoji' : 'charmap'
+              }
+            }
+            return { ...cmd, id }
+          })
+          .filter((cmd: any) => {
+            if (!query) return true
+            return cmd.title.toLowerCase().includes(lowerQuery) || cmd.id.toLowerCase().includes(lowerQuery)
+          })
+          .slice(0, 20)
+      }
+
+      const closePicker = () => {
+        if (pickerComponent) {
+          pickerComponent.element.remove()
+          pickerComponent.destroy()
+          pickerComponent = null
+        }
+      }
+
+      PickerEventBus.on('close', () => {
+        closePicker()
+      })
+
+      const command = ({ editor, range, props }: { editor: Editor, range: any, props: any }) => {
+        if (customCommand) {
+          customCommand({ editor, range, props })
+        } else if (props.command) {
+          props.command({ editor, range })
+        } else if (props.isPicker && props.pickerType) {
+          editor.chain().focus().deleteRange(range).run()
+          closePicker()
+
+          const { t } = useLocale()
+
+          pickerComponent = new VueRenderer(PickerDialog, {
+            props: {
+              editor,
+              t,
+              type: props.pickerType,
+            },
+            editor,
+          })
+
+          const element = pickerComponent.element as HTMLElement
+          element.style.position = 'fixed'
+          element.style.zIndex = '9999'
+          element.style.inset = '0'
+          element.style.display = 'flex'
+          element.style.alignItems = 'center'
+          element.style.justifyContent = 'center'
+
+          document.body.appendChild(element)
+        }
+      }
+
       return [
-        Suggestion(
-          {
-            editor: this.editor,
-            ...this.options.suggestion,
+        Suggestion({
+          editor: this.editor,
+          char,
+          command,
+          items,
+          render: () => ({
+            onStart: (props: any) => {
+              component = new VueRenderer(CommandsList, {
+                props,
+                editor: props.editor,
+              })
+
+              if (!props.clientRect) {
+                return
+              }
+
+              const element = component.element as HTMLElement
+              element.style.position = 'absolute'
+
+              document.body.appendChild(element)
+
+              updatePosition(props.editor, element)
+            },
+
+            onUpdate: (props: any) => {
+              if (component) {
+                component.updateProps(props)
+              }
+
+              if (!props.clientRect) {
+                return
+              }
+
+              const element = component?.element as HTMLElement | undefined
+              if (element) {
+                updatePosition(props.editor, element)
+              }
+            },
+
+            onKeyDown: (props: any) => {
+              if (props.event.key === 'Escape') {
+                closePicker()
+                return true
+              }
+              return component?.ref?.onKeyDown(props)
+            },
+
+            onExit: () => {
+              closePicker()
+              if (component) {
+                component.destroy()
+                const element = component.element as HTMLElement | null
+                if (element?.parentNode) {
+                  element.parentNode.removeChild(element)
+                }
+                component = null
+              }
+            },
           }),
+        }),
       ]
     },
-  })
+  })

package/src/i18n/locales/ar.json

@@ -131,12 +131,13 @@
       "src_invalid": "عنوان URL المدخل غير صالح"
     },
     "image": {
-      "title": "إضافة/تعديل صورة",
+      "title": "العنوان",
       "src": "المصدر",
       "keep_ratio": "الحفاظ على نسبة العرض إلى الارتفاع",
       "alt": "نص بديل",
       "width": "العرض",
-      "height": "الارتفاع"
+      "height": "الارتفاع",
+      "dialog_title": "إضافة/تعديل صورة"
     },
     "link": {
       "title": "إضافة/تعديل رابط",

package/src/i18n/locales/ch.json

@@ -131,12 +131,13 @@
       "src_invalid": "输入的URL无效"
     },
     "image": {
-      "title": "添加/修改图片",
+      "title": "标题",
       "src": "源",
       "keep_ratio": "保持比例",
       "alt": "替代文本",
       "width": "宽度",
-      "height": "高度"
+      "height": "高度",
+      "dialog_title": "添加/修改图片"
     },
     "link": {
       "title": "添加/修改链接",

package/src/i18n/locales/cz.json

@@ -131,12 +131,13 @@
       "src_invalid": "Zadaná URL adresa je neplatná"
     },
     "image": {
-      "title": "Přidání/úprava obrázku",
+      "title": "Název",
       "src": "Zdroj",
       "keep_ratio": "Udržet poměr stran",
       "alt": "alt",
       "width": "Šířka",
-      "height": "Výška"
+      "height": "Výška",
+      "dialog_title": "Přidání/úprava obrázku"
     },
     "link": {
       "title": "Přidání/úprava odkazu",

package/src/i18n/locales/de.json

@@ -131,12 +131,13 @@
       "src_invalid": "Die eingegebene URL ist ungültig"
     },
     "image": {
-      "title": "Bild hinzufügen/ändern",
+      "title": "Titel",
       "src": "Quelle",
       "keep_ratio": "Seitenverhältnis beibehalten",
       "alt": "alt",
       "width": "Breite",
-      "height": "Höhe"
+      "height": "Höhe",
+      "dialog_title": "Bild hinzufügen/ändern"
     },
     "link": {
       "title": "Link hinzufügen/ändern",

package/src/i18n/locales/es.json

@@ -131,12 +131,13 @@
       "src_invalid": "La URL ingresada es inválida"
     },
     "image": {
-      "title": "Agregar/modificar imagen",
+      "title": "Título",
       "src": "Fuente",
       "keep_ratio": "Mantener proporción",
       "alt": "alt",
       "width": "Ancho",
-      "height": "Alto"
+      "height": "Alto",
+      "dialog_title": "Agregar/modificar imagen"
     },
     "link": {
       "title": "Agregar/modificar enlace",

package/src/i18n/locales/fi.json

@@ -131,12 +131,13 @@
       "src_invalid": "Syötetty URL ei ole kelvollinen"
     },
     "image": {
-      "title": "Lisää/muokkaa kuvaa",
+      "title": "Otsikko",
       "src": "Lähde",
       "keep_ratio": "Säilytä suhde",
       "alt": "Vaihtoehtoinen teksti",
       "width": "Leveys",
-      "height": "Korkeus"
+      "height": "Korkeus",
+      "dialog_title": "Lisää/muokkaa kuvaa"
     },
     "link": {
       "title": "Lisää/muokkaa linkkiä",

package/src/i18n/locales/fr.json

@@ -131,12 +131,13 @@
       "src_invalid": "L'URL saisie est invalide"
     },
     "image": {
-      "title": "Ajouter/modifier l'image",
+      "title": "Titre",
       "src": "Source",
       "keep_ratio": "Conserver le ratio d'aspect",
       "alt": "alt",
       "width": "Largeur",
-      "height": "Hauteur"
+      "height": "Hauteur",
+      "dialog_title": "Ajouter/modifier l'image"
     },
     "link": {
       "title": "Ajouter/modifier le lien",

package/src/i18n/locales/hu.json

@@ -131,12 +131,13 @@
       "src_invalid": "A megadott URL érvénytelen"
     },
     "image": {
-      "title": "Kép hozzáadása/szerkesztése",
+      "title": "Cím",
       "src": "Forrás",
       "keep_ratio": "Arány megtartása",
       "alt": "Alternatív szöveg",
       "width": "Szélesség",
-      "height": "Magasság"
+      "height": "Magasság",
+      "dialog_title": "Kép hozzáadása/szerkesztése"
     },
     "link": {
       "title": "Hivatkozás hozzáadása/szerkesztése",

package/src/i18n/locales/it.json

@@ -131,12 +131,13 @@
       "src_invalid": "L'URL inserito non è valido"
     },
     "image": {
-      "title": "Aggiungi/modifica immagine",
+      "title": "Titolo",
       "src": "Origine",
       "keep_ratio": "Mantieni rapporto d'aspetto",
       "alt": "alt",
       "width": "Larghezza",
-      "height": "Altezza"
+      "height": "Altezza",
+      "dialog_title": "Aggiungi/modifica immagine"
     },
     "link": {
       "title": "Aggiungi/modifica collegamento",

package/src/i18n/locales/ja.json

@@ -131,12 +131,13 @@
       "src_invalid": "入力された URL は無効です"
     },
     "image": {
-      "title": "画像を追加/編集",
+      "title": "タイトル",
       "src": "ソース",
       "keep_ratio": "アスペクト比を維持",
       "alt": "代替テキスト",
       "width": "幅",
-      "height": "高さ"
+      "height": "高さ",
+      "dialog_title": "画像を追加/編集"
     },
     "link": {
       "title": "リンクを追加/編集",

package/src/i18n/locales/ko.json

@@ -131,12 +131,13 @@
       "src_invalid": "입력한 URL 이 유효하지 않습니다"
     },
     "image": {
-      "title": "이미지 추가/편집",
+      "title": "제목",
       "src": "소스",
       "keep_ratio": "종횡비 유지",
       "alt": "대체 텍스트",
       "width": "너비",
-      "height": "높이"
+      "height": "높이",
+      "dialog_title": "이미지 추가/편집"
     },
     "link": {
       "title": "링크 추가/편집",

package/src/i18n/locales/la.json

@@ -131,12 +131,13 @@
       "src_invalid": "Ievadītais URL nav derīgs"
     },
     "image": {
-      "title": "Pievienot/mainīt attēlu",
+      "title": "Titulus",
       "src": "Avots",
       "keep_ratio": "Saglabāt attiecības",
       "alt": "Alt",
       "width": "Platums",
-      "height": "Augstums"
+      "height": "Augstums",
+      "dialog_title": "Pievienot/mainīt attēlu"
     },
     "link": {
       "title": "Pievienot/mainīt saiti",

package/src/i18n/locales/lt.json

@@ -131,12 +131,13 @@
       "src_invalid": "Įvestas URL netinkamas"
     },
     "image": {
-      "title": "Pridėti/keisti paveikslą",
+      "title": "Pavadinimas",
       "src": "Šaltinis",
       "keep_ratio": "Išlaikyti proporciją",
       "alt": "alt",
       "width": "Plotis",
-      "height": "Aukštis"
+      "height": "Aukštis",
+      "dialog_title": "Pridėti/keisti paveikslą"
     },
     "link": {
       "title": "Pridėti/keisti nuorodą",

package/src/i18n/locales/nl.json

@@ -131,12 +131,13 @@
       "src_invalid": "De ingevoerde URL is ongeldig"
     },
     "image": {
-      "title": "Afbeelding toevoegen/wijzigen",
+      "title": "Titel",
       "src": "Bron",
       "keep_ratio": "Verhouding behouden",
       "alt": "alt",
       "width": "Breedte",
-      "height": "Hoogte"
+      "height": "Hoogte",
+      "dialog_title": "Afbeelding toevoegen/wijzigen"
     },
     "link": {
       "title": "Link toevoegen/wijzigen",

package/src/i18n/locales/pl.json

@@ -131,12 +131,13 @@
       "src_invalid": "Wprowadzony URL jest nieprawidłowy"
     },
     "image": {
-      "title": "Dodaj/zmień obraz",
+      "title": "Tytuł",
       "src": "Źródło",
       "keep_ratio": "Zachowaj proporcję",
       "alt": "alt",
       "width": "Szerokość",
-      "height": "Wysokość"
+      "height": "Wysokość",
+      "dialog_title": "Dodaj/zmień obraz"
     },
     "link": {
       "title": "Dodaj/zmień link",

package/src/i18n/locales/pt.json

@@ -131,12 +131,13 @@
       "src_invalid": "A URL inserida é inválida"
     },
     "image": {
-      "title": "Adicionar/modificar imagem",
+      "title": "Título",
       "src": "Fonte",
       "keep_ratio": "Manter proporção",
       "alt": "alt",
       "width": "Largura",
-      "height": "Altura"
+      "height": "Altura",
+      "dialog_title": "Adicionar/modificar imagem"
     },
     "link": {
       "title": "Adicionar/modificar link",

package/src/i18n/locales/ru.json

@@ -131,12 +131,13 @@
       "src_invalid": "Введён некорректный URL"
     },
     "image": {
-      "title": "Добавление/изменение изображения",
+      "title": "Заголовок",
       "src": "Источник",
       "keep_ratio": "Сохранять пропорции",
       "alt": "alt",
       "width": "Ширина",
-      "height": "Высота"
+      "height": "Высота",
+      "dialog_title": "Добавление/изменение изображения"
     },
     "link": {
       "title": "Добавление/изменение ссылки",

package/src/i18n/locales/se.json

@@ -131,12 +131,13 @@
       "src_invalid": "Den angivna URL:en är ogiltig"
     },
     "image": {
-      "title": "Lägg till/ändra bild",
+      "title": "Rubrik",
       "src": "Källa",
       "keep_ratio": "Behåll proportioner",
       "alt": "alt",
       "width": "Bredd",
-      "height": "Höjd"
+      "height": "Höjd",
+      "dialog_title": "Lägg till/ändra bild"
     },
     "link": {
       "title": "Lägg till/ändra länk",

package/src/i18n/locales/th.json

@@ -131,12 +131,13 @@
       "src_invalid": "URL ที่ป้อนไม่ถูกต้อง"
     },
     "image": {
-      "title": "เพิ่ม/แก้ไขรูปภาพ",
+      "title": "หัวข้อ",
       "src": "แหล่งที่มา",
       "keep_ratio": "รักษาสัดส่วน",
       "alt": "ข้อความทางเลือก",
       "width": "ความกว้าง",
-      "height": "ความสูง"
+      "height": "ความสูง",
+      "dialog_title": "เพิ่ม/แก้ไขรูปภาพ"
     },
     "link": {
       "title": "เพิ่ม/แก้ไขลิงก์",

package/src/i18n/locales/tr.json

@@ -131,12 +131,13 @@
       "src_invalid": "Girilen URL geçersiz"
     },
     "image": {
-      "title": "Görsel ekle/düzenle",
+      "title": "Başlık",
       "src": "Kaynak",
       "keep_ratio": "En boy oranını koru",
       "alt": "Alternatif metin",
       "width": "Genişlik",
-      "height": "Yükseklik"
+      "height": "Yükseklik",
+      "dialog_title": "Görsel ekle/düzenle"
     },
     "link": {
       "title": "Bağlantı ekle/düzenle",

package/src/i18n/locales/{ua.json → uk.json}

@@ -131,12 +131,13 @@
       "src_invalid": "Введений некоректний URL"
     },
     "image": {
-      "title": "Додавання/зміна зображення",
+      "title": "Заголовок",
       "src": "Джерело",
       "keep_ratio": "Зберігати пропорції",
       "alt": "alt",
       "width": "Ширина",
-      "height": "Висота"
+      "height": "Висота",
+      "dialog_title": "Додавання/зміна зображення"
     },
     "link": {
       "title": "Додавання/зміна посилання",

package/src/i18n/locales/vi.json

@@ -131,12 +131,13 @@
       "src_invalid": "URL đã nhập không hợp lệ"
     },
     "image": {
-      "title": "Thêm/sửa hình ảnh",
+      "title": "Tiêu đề",
       "src": "Nguồn",
       "keep_ratio": "Giữ tỷ lệ khung hình",
       "alt": "Văn bản thay thế",
       "width": "Chiều rộng",
-      "height": "Chiều cao"
+      "height": "Chiều cao",
+      "dialog_title": "Thêm/sửa hình ảnh"
     },
     "link": {
       "title": "Thêm/sửa liên kết",

package/src/types/slashCommandsTypes.ts

@@ -0,0 +1,19 @@
+import { Editor } from '@tiptap/core'
+
+export type SlashCommandCallback = (params: { editor: Editor, range: any }) => void
+
+export type SlashCommand = {
+  title: string
+  icon: string
+  command?: SlashCommandCallback
+  isPicker?: boolean
+}
+
+export type SlashCommandId = 
+  | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  | 'bulletList' | 'numberedList' | 'taskList'
+  | 'code' | 'codeBlock' | 'quote'
+  | 'image' | 'video' | 'table' | 'link'
+  | 'divider' | 'emoji' | 'specialChars'
+
+export type SlashCommandsConfig = SlashCommandId[] | true | false

package/src/types/toolbarTypes.ts

@@ -25,4 +25,4 @@ export type section = {
 
 export type toolbarSections = Array<section>
 
-export type itemsPropType = { [key: string]: Array<string> } | Array<string>
+export type itemsPropType = { [key: string]: string[] } | string[]