tiptapify 0.0.36 → 0.1.0

package/README.md

@@ -1,13 +1,19 @@
 # Tiptapify
 
+[![npm](https://img.shields.io/npm/v/tiptapify.svg)](https://www.npmjs.com/package/tiptapify)
+[![npm](https://img.shields.io/npm/dw/tiptapify.svg)](https://www.npmjs.com/package/tiptapify)
+[![GitHub](https://img.shields.io/github/license/ivoyt/tiptapify)](./LICENSE)
+
 ---
 
-[Tiptap](https://tiptap.dev) 3 editor for Vue3 with [Vuetify](https://vuetifyjs.com) toolbar implementation
+[Tiptap 3 Editor](https://tiptap.dev) [Vuetify](https://vuetifyjs.com) toolbar implementation
 
 ## Status
-*Alpha*
+*Beta*
+
+## Live Demo
 
-*Not production ready (yet) - may contain bugs and internal logic may change*
+[View Documentation & Demo](https://ivoyt.github.io/tiptapify)
 
 ## Requirements
 - Vue 3.x
@@ -156,10 +162,10 @@ Found a bug or have ideas on improvement? Feel free to [create a ticket](https:/
 - [x] option to provide custom extension
 - [x] iframe extension
 - [x] charmap extension
+- [x] demo
+- [x] documentation
 - [ ] extended video extensions
 - [ ] print hotkey in a tooltip
-- [ ] demo
-- [ ] documentation
 - [ ] AI features
 
 ## Licence

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.0.36",
+  "version": "0.1.0",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -31,7 +31,10 @@
     "build": "vite build",
     "test": "echo \"Error: no test specified\" && exit 1",
     "build:charmap": "tsx build-charmap.ts",
-    "build:emojis": "tsx build-emojis.ts"
+    "build:emojis": "tsx build-emojis.ts",
+    "docs:dev": "pnpm --filter tiptapify-docs docs:dev",
+    "docs:build": "pnpm --filter tiptapify-docs docs:build",
+    "docs:preview": "pnpm --filter tiptapify-docs docs:preview"
   },
   "keywords": [
     "vue",
@@ -58,7 +61,7 @@
   "author": "Igor Voytovich",
   "license": "MIT",
   "repository": "https://github.com/IVoyt/tiptapify",
-  "packageManager": "pnpm@10.32.1",
+  "packageManager": "pnpm@10.33.4",
   "dependencies": {
     "@tiptap/core": "^3.20.4",
     "@tiptap/extension-blockquote": "^3.20.4",

package/src/components/Tiptapify.vue

@@ -2,6 +2,7 @@
 
 import defaults from "@tiptapify/constants/defaults";
 import { itemsPropType, toolbarSections } from "@tiptapify/types/toolbarTypes";
+import { SlashCommandsConfig } from "@tiptapify/types/slashCommandsTypes";
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef, watch } from "vue";
 import { default as Toolbar } from "@tiptapify/components/Toolbar/Index.vue";
 import { Editor, EditorContent } from '@tiptap/vue-3'
@@ -20,7 +21,7 @@ const { t, i18n, setLocale } = useLocale();
 const props = defineProps({
   locale: { type: String, default () { return 'en' } },
   content: String|Object,
-  height: { type: Number, default () { return null } },
+  height: { type: [Number,String], default () { return null } },
   variantBtn: { type: String, default () { return defaults.variantBtn } },
   variantField: { type: String, default () { return defaults.variantField } },
   toolbar: { type: Boolean, default () { return true } },
@@ -28,7 +29,7 @@ const props = defineProps({
   itemsExclude: { type: Boolean, default() { return false } },
   bubbleMenu: { type: Boolean, default () { return true } },
   floatingMenu: { type: Boolean, default () { return true } },
-  slashCommands: { type: Boolean, default () { return true } },
+  slashCommands: { type: [Boolean, Array] as PropType<SlashCommandsConfig>, default () { return true } },
   placeholder: { type: String, default () { return '' } },
   showWordsCount: { type: Boolean, default () { return true } },
   showCharactersCount: { type: Boolean, default () { return true } },
@@ -71,6 +72,7 @@ watch(() => editor.value, (editorInstance) => {
     editor.value.interactiveStyles = interactiveStyles.value
     emit('editor-ready', {
       editor: editorInstance,
+      setLocale,
       getHTML: () => editorInstance.getHTML(),
       getJSON: () => editorInstance.getJSON(),
     });
@@ -421,5 +423,96 @@ onBeforeUnmount(() => {
   ul.list-style-square {
     list-style-type: square !important;
   }
+
+  img {
+    display: block;
+  }
+
+  [data-node="image"].has-focus {
+    [data-resize-handle] {
+      position: absolute;
+      background: rgba(0, 0, 0, 0.5);
+      border: 1px solid rgba(255, 255, 255, 0.8);
+      border-radius: 2px;
+      z-index: 10;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.8);
+      }
+
+      /* Corner handles */
+      &[data-resize-handle='top-left'],
+      &[data-resize-handle='top-right'],
+      &[data-resize-handle='bottom-left'],
+      &[data-resize-handle='bottom-right'] {
+        width: 8px;
+        height: 8px;
+      }
+
+      &[data-resize-handle='top-left'] {
+        top: -4px;
+        left: -4px;
+        cursor: nwse-resize;
+      }
+
+      &[data-resize-handle='top-right'] {
+        top: -4px;
+        right: -4px;
+        cursor: nesw-resize;
+      }
+
+      &[data-resize-handle='bottom-left'] {
+        bottom: -4px;
+        left: -4px;
+        cursor: nesw-resize;
+      }
+
+      &[data-resize-handle='bottom-right'] {
+        bottom: -4px;
+        right: -4px;
+        cursor: nwse-resize;
+      }
+
+      /* Edge handles */
+      &[data-resize-handle='top'],
+      &[data-resize-handle='bottom'] {
+        height: 6px;
+        left: 8px;
+        right: 8px;
+      }
+
+      &[data-resize-handle='top'] {
+        top: -3px;
+        cursor: ns-resize;
+      }
+
+      &[data-resize-handle='bottom'] {
+        bottom: -3px;
+        cursor: ns-resize;
+      }
+
+      &[data-resize-handle='left'],
+      &[data-resize-handle='right'] {
+        width: 6px;
+        top: 8px;
+        bottom: 8px;
+      }
+
+      &[data-resize-handle='left'] {
+        left: -3px;
+        cursor: ew-resize;
+      }
+
+      &[data-resize-handle='right'] {
+        right: -3px;
+        cursor: ew-resize;
+      }
+    }
+
+    [data-resize-state='true'] [data-resize-wrapper] {
+      outline: 1px solid rgba(0, 0, 0, 0.25);
+      border-radius: 0.125rem;
+    }
+  }
 }
 </style>

package/src/components/Toolbar/Index.vue

@@ -54,6 +54,16 @@ function prepareToolbarItems() {
     }
   } else if (propsItems.value.length > 0) {
     for (const propsItem of propsItems.value as string[]) {
+      if (propsItem === '|') {
+        if (typeof _toolbarItems['__separator__'] === 'undefined') {
+          _toolbarItems['__separator__'] = {
+            section: '__separator__',
+            group: false,
+            components: []
+          }
+        }
+        continue
+      }
       const item = propsItem.split(':')
       if (!availableItemsKeys.includes(item[0])) {
         throw new Error(`The ${propsItem} is unknown extension. Please use one of the following: ${availableItemsKeys.join(', ')}`)

package/src/components/Toolbar/Items.vue

@@ -15,21 +15,25 @@ defineProps({
 <template>
   <VToolbarItems class="py-2">
     <template v-for="item in items" :key="item.section">
-      <VBtnGroup v-if="item.group" elevation="4">
-        <template v-for="sectionItem in item.components" :key="sectionItem.name">
-          <component :is="sectionItem.component" v-bind="{ ...sectionItem.props ?? {} }" />
-        </template>
-      </VBtnGroup>
+      <template v-if="item.section === '__separator__'">
+        <div class="menu-divider"></div>
+      </template>
       <template v-else>
-        <component
-          v-for="sectionItem in item.components"
-          :key="sectionItem.name"
-          :is="sectionItem.component"
-          v-bind="{ variantBtn, ...sectionItem.props ?? {} }"
-        />
+        <VBtnGroup v-if="item.group" elevation="4">
+          <template v-for="sectionItem in item.components" :key="sectionItem.name">
+            <component :is="sectionItem.component" v-bind="{ ...sectionItem.props ?? {} }" />
+          </template>
+        </VBtnGroup>
+        <template v-else>
+          <component
+            v-for="sectionItem in item.components"
+            :key="sectionItem.name"
+            :is="sectionItem.component"
+            v-bind="{ variantBtn, ...sectionItem.props ?? {} }"
+          />
+        </template>
+        <div class="menu-divider"></div>
       </template>
-
-      <div class="menu-divider"></div>
     </template>
   </VToolbarItems>
 </template>

package/src/components/editorExtensions.ts

@@ -31,8 +31,8 @@ import { TiptapifyImage } from '@tiptapify/extensions/components/media/image'
 import { TiptapifyLink } from '@tiptapify/extensions/components/media/link'
 import { TiptapifyVideo } from '@tiptapify/extensions/components/media/video'
 import CodeBlockComponent from '@tiptapify/extensions/components/CodeBlockComponent.vue'
-import SlashCommands from '@tiptapify/extensions/slash-commands'
-import suggestion from '@tiptapify/extensions/components/slashCommands/suggestion'
+import SlashCommands, { SlashCommandsExtensionOptions } from '@tiptapify/extensions/slash-commands'
+import { SlashCommandsConfig, SlashCommandId } from '@tiptapify/types/slashCommandsTypes'
 import { toolbarSections } from "@tiptapify/types/toolbarTypes";
 
 // load all languages with "all" or common languages with "common"
@@ -51,7 +51,7 @@ const lowlight = createLowlight(common)
 // register language example
 // lowlight.register('ts', ts)
 
-export function editorExtensions (placeholder: string, slashCommands: boolean, customExtensions: toolbarSections) {
+export function editorExtensions (placeholder: string, slashCommands: SlashCommandsConfig, customExtensions: toolbarSections) {
   const extensions = [
     TextStyleKit,
     Document,
@@ -78,7 +78,12 @@ export function editorExtensions (placeholder: string, slashCommands: boolean, c
       openOnClick: false,
       defaultProtocol: 'https'
     }),
-    Image,
+    Image.configure({
+      resize: {
+        enabled: true,
+        alwaysPreserveAspectRatio: true,
+      },
+    }),
     Youtube.configure({
       controls: true,
       nocookie: true,
@@ -110,8 +115,12 @@ export function editorExtensions (placeholder: string, slashCommands: boolean, c
     BulletListSquare
   ]
 
-  if (slashCommands) {
-    extensions.push(SlashCommands.configure({ suggestion }))
+  if (slashCommands !== false) {
+    const config: SlashCommandsExtensionOptions = {}
+    if (Array.isArray(slashCommands)) {
+      config.suggestion = { allowedCommands: slashCommands }
+    }
+    extensions.push(SlashCommands.configure(config))
   }
 
   if (customExtensions.length) {

package/src/components/index.ts

@@ -1,12 +1,13 @@
 import { Editor, useEditor } from "@tiptap/vue-3";
 import { editorExtensions } from "@tiptapify/components/editorExtensions";
 import { toolbarSections } from "@tiptapify/types/toolbarTypes";
+import { SlashCommandsConfig } from "@tiptapify/types/slashCommandsTypes";
 import { ShallowRef } from "vue";
 
 export function getTiptapEditor (
   content: any,
   placeholder: string,
-  slashCommands: boolean = true,
+  slashCommands: SlashCommandsConfig = true,
   customExtensions: toolbarSections,
   onUpdate: Function = () => {}
 ): ShallowRef<Editor | undefined> {

package/src/extensions/PickerEventBus.ts

@@ -0,0 +1,32 @@
+import { reactive } from 'vue'
+
+type PickerCloseEvent = {
+  type: 'emoji' | 'charmap'
+}
+
+type PickerEvents = {
+  close: PickerCloseEvent
+}
+
+type EventCallback<T> = (data: T) => void
+
+class PickerEventBusClass {
+  private listeners: Map<keyof PickerEvents, Set<EventCallback<any>>> = new Map()
+
+  on<K extends keyof PickerEvents>(event: K, callback: EventCallback<PickerEvents[K]>) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set())
+    }
+    this.listeners.get(event)!.add(callback)
+  }
+
+  off<K extends keyof PickerEvents>(event: K, callback: EventCallback<PickerEvents[K]>) {
+    this.listeners.get(event)?.delete(callback)
+  }
+
+  emit<K extends keyof PickerEvents>(event: K, data: PickerEvents[K]) {
+    this.listeners.get(event)?.forEach(callback => callback(data))
+  }
+}
+
+export const PickerEventBus = reactive(new PickerEventBusClass())

package/src/extensions/components/media/charmap/Button.vue

@@ -1,72 +1,18 @@
 <script lang="ts" setup>
-import { Editor } from '@tiptap/vue-3'
-import tiptapifyCharMap from "@tiptapify/extensions/charmap"
-import { computed, inject, Ref, ref, watch } from 'vue'
 import * as mdi from '@mdi/js'
+import { inject, Ref } from 'vue'
+import CharmapPicker from './Picker.vue';
 
 defineProps({
   variantBtn: { type: String, default: 'flat' },
 })
 
-const editor = inject('tiptapifyEditor') as Ref<Editor>
+const editor = inject('tiptapifyEditor') as Ref<any>
 const { t } = inject('tiptapifyI18n') as any
-
-const filter = ref(null)
-const tab = ref('punctuation')
-const sorted = tiptapifyCharMap.sort((previous, current) => {
-  if (previous.order < current.order) {
-    return -1
-  }
-  if (previous.order > current.order) {
-    return 1
-  }
-
-  return 0
-})
-
-if (!tab.value && sorted.length > 0) {
-  tab.value = sorted[0].name
-}
-const chars = computed(() => sorted.map(item => { return { group: item.name, emojis: item.items } }))
-const charMapRef = ref(JSON.parse(JSON.stringify(chars.value)))
-
-const handleCharacterClick = (charItem: any) => {
-  editor.value.chain().focus().insertContent(charItem.char).run()
-}
-
-const filterChars = (filterValue: string) => {
-  resetFilter()
-  if (!filterValue) {
-    return
-  }
-
-  const filtered: any[] = []
-
-  const groupItems = charMapRef.value.find((item: any) => item.group === tab.value)
-  if (groupItems?.emojis) {
-    groupItems.emojis.forEach((item: any) => {
-      if (item.name.toLowerCase().match(filterValue)) {
-        filtered.push(item)
-      }
-    })
-
-    groupItems.emojis = filtered
-  }
-}
-
-const resetFilter = () => {
-  charMapRef.value = JSON.parse(JSON.stringify(chars.value))
-}
-
-watch(() => tab.value, () => {
-  resetFilter()
-  filter.value = null
-})
-
 </script>
 
 <template>
-  <VBtn :id="`tiptapify-charmap-button-${editor.instanceId}`" :variant="variantBtn" size="32" @click="console.log('click charmap')">
+  <VBtn :id="`tiptapify-charmap-button-${editor.instanceId}`" :variant="variantBtn" size="32">
     <VTooltip activator="parent">
       {{ t('media.charmap.title') }}
     </VTooltip>
@@ -75,91 +21,7 @@ watch(() => tab.value, () => {
 
   <VMenu :activator="`#tiptapify-charmap-button-${editor.instanceId}`" :close-on-content-click="false">
     <VSheet class="pa-2" max-width="580">
-      <div class="d-flex flex-row">
-        <VTabs v-model="tab" mandatory direction="vertical" color="primary" density="compact">
-          <VTab
-              v-for="item of charMapRef"
-              :text="item.group"
-              :value="item.group"
-              :key="item.group"
-              density="compact"
-              rounded
-              size="small"
-          >
-            {{ t(`media.charmap.categories.${item.group}`) }}
-          </VTab>
-        </VTabs>
-
-        <div class="d-flex flex-column">
-          <VTextField
-              v-model="filter"
-              :label="t('media.charmap.search')"
-              density="compact"
-              variant="solo"
-              :prepend-inner-icon="`mdiSvg:${mdi.mdiMagnify}`"
-              class="mb-2 tiptapify-charmap-search"
-              hide-details
-              clearable
-              @update:model-value="filterChars($event)"
-              @click:clear="resetFilter"
-          />
-          <div class="tiptapify-charmap-container">
-            <VWindow v-model="tab" direction="vertical">
-              <VWindowItem v-for="item of charMapRef" :value="item.group" :transition="false" :reverse-transition="false">
-                <div
-                    v-for="charItem in item.emojis"
-                    class="tiptapify-charmap-container-item"
-                    @click="handleCharacterClick(charItem)"
-                    :title="charItem.name"
-                >
-                  <div class="tiptapify-charmap-container-item__overlay">
-                    <span>
-                      {{ charItem.char }}
-                    </span>
-                  </div>
-                </div>
-              </VWindowItem>
-            </VWindow>
-          </div>
-        </div>
-      </div>
+      <CharmapPicker :editor="editor" :t="t" />
     </VSheet>
   </VMenu>
 </template>
-
-<style scoped lang="scss">
-.tiptapify-charmap-container {
-  width: 360px;
-  height: 550px;
-  overflow-y: auto;
-
-  border: 1px solid rgba(var(--v-theme-on-background), calc(var(--v-border-opacity)));
-  border-radius: 8px;
-  box-shadow: 0 0 5px rgba(var(--v-theme-on-background), calc(var(--v-border-opacity))) inset;
-}
-
-.tiptapify-charmap-container-item__overlay {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 5px;
-  z-index: 1;
-}
-
-.tiptapify-charmap-container-item {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  width: 32px;
-  height: 32px;
-  transition: background-color 0.2s ease-in-out;
-}
-
-.tiptapify-charmap-container-item:hover .tiptapify-emoji-container-item__overlay {
-  background-color: rgba(var(--v-theme-on-background), calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier)));
-}
-</style>