tiptapify 0.0.35 → 0.1.0

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

@@ -44,16 +44,19 @@
     "image": "صورة",
     "emoji": {
       "title": "رموز تعبيرية",
-      "activities": "أنشطة",
-      "animals_and_nature": "حيوانات وطبيعة",
-      "component": "مكون",
-      "flags": "أعلام",
-      "food_and_drink": "طعام وشراب",
-      "objects": "أشياء",
-      "people_and_body": "أشخاص وجسد",
-      "smileys_and_emotion": "ابتسامات ومشاعر",
-      "symbols": "رموز",
-      "travel_and_places": "سفر وأماكن"
+      "search": "البحث عن رموز تعبيرية...",
+      "categories": {
+        "activities": "أنشطة",
+        "animals_and_nature": "حيوانات وطبيعة",
+        "component": "مكون",
+        "flags": "أعلام",
+        "food_and_drink": "طعام وشراب",
+        "objects": "أشياء",
+        "people_and_body": "أشخاص وجسد",
+        "smileys_and_emotion": "ابتسامات ومشاعر",
+        "symbols": "رموز",
+        "travel_and_places": "سفر وأماكن"
+      }
     },
     "tables": {
       "table": "جدول",
@@ -73,7 +76,26 @@
       "mergeCells": "دمج الخلايا",
       "splitCell": "تقسيم الخلية"
     },
-    "video": "فيديو"
+    "video": "فيديو",
+    "charmap": {
+      "title": "إدراج حرف خاص",
+      "search": "بحث عن أحرف...",
+      "noResults": "لم يتم العثور على أحرف مطابقة",
+      "categories": {
+        "punctuation": "ترقيم",
+        "symbols": "رموز",
+        "math": "رياضيات",
+        "currency": "عملة",
+        "greek": "حروف يونانية",
+        "extended_letters": "حروف موسعة",
+        "diacritics": "علامات تشكيلية",
+        "typography": "طباعة",
+        "cyrillic": "سيريلية",
+        "hebrew": "عبرية",
+        "arrows": "أسهم",
+        "box_drawing": "رسم صناديق"
+      }
+    }
   },
   "action": {
     "undo": "تراجع",
@@ -109,12 +131,13 @@
       "src_invalid": "عنوان URL المدخل غير صالح"
     },
     "image": {
-      "title": "إضافة/تعديل صورة",
+      "title": "العنوان",
       "src": "المصدر",
       "keep_ratio": "الحفاظ على نسبة العرض إلى الارتفاع",
       "alt": "نص بديل",
       "width": "العرض",
-      "height": "الارتفاع"
+      "height": "الارتفاع",
+      "dialog_title": "إضافة/تعديل صورة"
     },
     "link": {
       "title": "إضافة/تعديل رابط",
@@ -150,4 +173,4 @@
     "words": "كلمات",
     "chars": "حروف"
   }
-}
+}

package/src/i18n/locales/ch.json

@@ -44,16 +44,19 @@
     "image": "图片",
     "emoji": {
       "title": "表情符号",
-      "activities": "活动",
-      "animals_and_nature": "动物与自然",
-      "component": "组件",
-      "flags": "旗帜",
-      "food_and_drink": "食物与饮料",
-      "objects": "物品",
-      "people_and_body": "人物与身体",
-      "smileys_and_emotion": "笑脸与情感",
-      "symbols": "符号",
-      "travel_and_places": "旅行与地点"
+      "search": "搜索表情符号...",
+      "categories": {
+        "activities": "活动",
+        "animals_and_nature": "动物与自然",
+        "component": "组件",
+        "flags": "旗帜",
+        "food_and_drink": "食物与饮料",
+        "objects": "物品",
+        "people_and_body": "人物与身体",
+        "smileys_and_emotion": "笑脸与情感",
+        "symbols": "符号",
+        "travel_and_places": "旅行与地点"
+      }
     },
     "tables": {
       "table": "表格",
@@ -73,7 +76,26 @@
       "mergeCells": "合并单元格",
       "splitCell": "拆分单元格"
     },
-    "video": "视频"
+    "video": "视频",
+    "charmap": {
+      "title": "插入特殊字符",
+      "search": "搜索字符...",
+      "noResults": "未找到匹配的字符",
+      "categories": {
+        "punctuation": "标点符号",
+        "symbols": "符号",
+        "math": "数学",
+        "currency": "货币",
+        "greek": "希腊字母",
+        "extended_letters": "扩展字母",
+        "diacritics": "变音符号",
+        "typography": "印刷符号",
+        "cyrillic": "西里尔字母",
+        "hebrew": "希伯来字母",
+        "arrows": "箭头",
+        "box_drawing": "制图符号"
+      }
+    }
   },
   "action": {
     "undo": "撤销",
@@ -109,12 +131,13 @@
       "src_invalid": "输入的URL无效"
     },
     "image": {
-      "title": "添加/修改图片",
+      "title": "标题",
       "src": "源",
       "keep_ratio": "保持比例",
       "alt": "替代文本",
       "width": "宽度",
-      "height": "高度"
+      "height": "高度",
+      "dialog_title": "添加/修改图片"
     },
     "link": {
       "title": "添加/修改链接",
@@ -150,4 +173,4 @@
     "words": "单词",
     "chars": "字符"
   }
-}
+}

package/src/i18n/locales/cz.json

@@ -44,16 +44,19 @@
     "image": "Obrázek",
     "emoji": {
       "title": "Emoji",
-      "activities": "Aktivity",
-      "animals_and_nature": "Zvířata a příroda",
-      "component": "Komponenta",
-      "flags": "Vlajky",
-      "food_and_drink": "Jídlo a nápoje",
-      "objects": "Objekty",
-      "people_and_body": "Lidé a tělo",
-      "smileys_and_emotion": "Úsměvy a emoce",
-      "symbols": "Symboly",
-      "travel_and_places": "Cestování a místa"
+      "search": "Hledat emoji...",
+      "categories": {
+        "activities": "Aktivity",
+        "animals_and_nature": "Zvířata a příroda",
+        "component": "Komponenta",
+        "flags": "Vlajky",
+        "food_and_drink": "Jídlo a nápoje",
+        "objects": "Objekty",
+        "people_and_body": "Lidé a tělo",
+        "smileys_and_emotion": "Úsměvy a emoce",
+        "symbols": "Symboly",
+        "travel_and_places": "Cestování a místa"
+      }
     },
     "tables": {
       "table": "Tabulka",
@@ -73,7 +76,26 @@
       "mergeCells": "Sloučit buňky",
       "splitCell": "Rozdělit buňku"
     },
-    "video": "Video"
+    "video": "Video",
+    "charmap": {
+      "title": "Vložit speciální znak",
+      "search": "Hledat znaky...",
+      "noResults": "Nebyly nalezeny žádné odpovídající znaky",
+      "categories": {
+        "punctuation": "Interpunkce",
+        "symbols": "Symboly",
+        "math": "Matematika",
+        "currency": "Měna",
+        "greek": "Řecká písmena",
+        "extended_letters": "Rozšířená písmena",
+        "diacritics": "Diakritika",
+        "typography": "Typografie",
+        "cyrillic": "Azbuky",
+        "hebrew": "Hebrejština",
+        "arrows": "Šipky",
+        "box_drawing": "Kreslení rámečků"
+      }
+    }
   },
   "action": {
     "undo": "Zpět",
@@ -109,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",
@@ -150,4 +173,4 @@
     "words": "slova",
     "chars": "znaky"
   }
-}
+}

package/src/i18n/locales/de.json

@@ -44,16 +44,19 @@
     "image": "Bild",
     "emoji": {
       "title": "Emoji",
-      "activities": "Aktivitäten",
-      "animals_and_nature": "Tiere & Natur",
-      "component": "Komponente",
-      "flags": "Flaggen",
-      "food_and_drink": "Essen und Trinken",
-      "objects": "Objekte",
-      "people_and_body": "Menschen & Körper",
-      "smileys_and_emotion": "Smileys und Emotionen",
-      "symbols": "Symbole",
-      "travel_and_places": "Reisen und Orte"
+      "search": "Emoji suchen...",
+      "categories": {
+        "activities": "Aktivitäten",
+        "animals_and_nature": "Tiere & Natur",
+        "component": "Komponente",
+        "flags": "Flaggen",
+        "food_and_drink": "Essen und Trinken",
+        "objects": "Objekte",
+        "people_and_body": "Menschen & Körper",
+        "smileys_and_emotion": "Smileys und Emotionen",
+        "symbols": "Symbole",
+        "travel_and_places": "Reisen und Orte"
+      }
     },
     "tables": {
       "table": "Tabelle",
@@ -73,7 +76,26 @@
       "mergeCells": "Zellen zusammenführen",
       "splitCell": "Zelle teilen"
     },
-    "video": "Video"
+    "video": "Video",
+    "charmap": {
+      "title": "Sonderzeichen einfügen",
+      "search": "Zeichen suchen...",
+      "noResults": "Keine passenden Zeichen gefunden",
+      "categories": {
+        "punctuation": "Zeichensetzung",
+        "symbols": "Symbole",
+        "math": "Mathematik",
+        "currency": "Währung",
+        "greek": "Griechische Buchstaben",
+        "extended_letters": "Erweiterte Buchstaben",
+        "diacritics": "Diakritika",
+        "typography": "Typografie",
+        "cyrillic": "Kyrillisch",
+        "hebrew": "Hebräisch",
+        "arrows": "Pfeile",
+        "box_drawing": "Rahmenzeichen"
+      }
+    }
   },
   "action": {
     "undo": "Rückgängig",
@@ -109,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",
@@ -150,4 +173,4 @@
     "words": "Wörter",
     "chars": "Zeichen"
   }
-}
+}

package/src/i18n/locales/en.json

@@ -44,16 +44,19 @@
     "image": "Image",
     "emoji": {
       "title": "Emoji",
-      "activities": "Activities",
-      "animals_and_nature": "Animals & nature",
-      "component": "Component",
-      "flags": "Flags",
-      "food_and_drink": "Food and drink",
-      "objects": "Objects",
-      "people_and_body": "People & body",
-      "smileys_and_emotion": "Smileys and emotion",
-      "symbols": "Symbols",
-      "travel_and_places": "Travel and places"
+      "search": "Search emoji...",
+      "categories": {
+        "activities": "Activities",
+        "animals_and_nature": "Animals & nature",
+        "component": "Component",
+        "flags": "Flags",
+        "food_and_drink": "Food and drink",
+        "objects": "Objects",
+        "people_and_body": "People & body",
+        "smileys_and_emotion": "Smileys and emotion",
+        "symbols": "Symbols",
+        "travel_and_places": "Travel and places"
+      }
     },
     "tables": {
       "table": "Table",
@@ -73,7 +76,26 @@
       "mergeCells": "Merge cells",
       "splitCell": "Split cell"
     },
-    "video": "Video"
+    "video": "Video",
+    "charmap": {
+      "title": "Special characters",
+      "search": "Search characters...",
+      "noResults": "No matching characters found",
+      "categories": {
+        "punctuation": "Punctuation",
+        "symbols": "Symbols",
+        "math": "Math",
+        "currency": "Currency",
+        "greek": "Greek letters",
+        "extended_letters": "Extended letters",
+        "diacritics": "Diacritics",
+        "typography": "Typography",
+        "cyrillic": "Cyrillic",
+        "hebrew": "Hebrew",
+        "arrows": "Arrows",
+        "box_drawing": "Box drawing"
+      }
+    }
   },
   "action": {
     "undo": "Undo",
@@ -150,4 +172,4 @@
     "words": "words",
     "chars": "characters"
   }
-}
+}

package/src/i18n/locales/es.json

@@ -44,16 +44,19 @@
     "image": "Imagen",
     "emoji": {
       "title": "Emoji",
-      "activities": "Actividades",
-      "animals_and_nature": "Animales y naturaleza",
-      "component": "Componente",
-      "flags": "Banderas",
-      "food_and_drink": "Comida y bebida",
-      "objects": "Objetos",
-      "people_and_body": "Personas y cuerpo",
-      "smileys_and_emotion": "Caritas y emociones",
-      "symbols": "Símbolos",
-      "travel_and_places": "Viajes y lugares"
+      "search": "Buscar emoji...",
+      "categories": {
+        "activities": "Actividades",
+        "animals_and_nature": "Animales y naturaleza",
+        "component": "Componente",
+        "flags": "Banderas",
+        "food_and_drink": "Comida y bebida",
+        "objects": "Objetos",
+        "people_and_body": "Personas y cuerpo",
+        "smileys_and_emotion": "Caritas y emociones",
+        "symbols": "Símbolos",
+        "travel_and_places": "Viajes y lugares"
+      }
     },
     "tables": {
       "table": "Tabla",
@@ -73,7 +76,26 @@
       "mergeCells": "Fusionar celdas",
       "splitCell": "Dividir celda"
     },
-    "video": "Video"
+    "video": "Video",
+    "charmap": {
+      "title": "Insertar carácter especial",
+      "search": "Buscar caracteres...",
+      "noResults": "No se encontraron caracteres coincidentes",
+      "categories": {
+        "punctuation": "Puntuación",
+        "symbols": "Símbolos",
+        "math": "Matemáticas",
+        "currency": "Divisa",
+        "greek": "Letras griegas",
+        "extended_letters": "Letras extendidas",
+        "diacritics": "Diacríticos",
+        "typography": "Tipografía",
+        "cyrillic": "Cirílico",
+        "hebrew": "Hebreo",
+        "arrows": "Flechas",
+        "box_drawing": "Dibujo de cajas"
+      }
+    }
   },
   "action": {
     "undo": "Deshacer",
@@ -109,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",
@@ -150,4 +173,4 @@
     "words": "palabras",
     "chars": "caracteres"
   }
-}
+}