tiptapify 0.0.35 → 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
@@ -155,11 +161,11 @@ Found a bug or have ideas on improvement? Feel free to [create a ticket](https:/
 - [x] filter option in emoji extension
 - [x] option to provide custom extension
 - [x] iframe extension
-- [ ] charmap 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.35",
+  "version": "0.1.0",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -30,7 +30,11 @@
     "dev": "vite",
     "build": "vite build",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build:emojis": "tsx build-emojis.ts"
+    "build:charmap": "tsx build-charmap.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",
@@ -57,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/Toolbar/media.ts

@@ -1,4 +1,5 @@
 import { default as EmojiButton } from "@tiptapify/extensions/components/media/emoji/Button.vue";
+import { default as CharmapButton } from "@tiptapify/extensions/components/media/charmap/Button.vue";
 import { default as LinkButton } from "@tiptapify/extensions/components/media/link/Button.vue";
 import { default as ImageButton } from "@tiptapify/extensions/components/media/image/Button.vue";
 import { default as IframeButton } from "@tiptapify/extensions/components/media/iframe/Button.vue";
@@ -30,6 +31,10 @@ export default {
       name: 'emoji',
       component: markRaw(EmojiButton),
     },
+    {
+      name: 'charmap',
+      component: markRaw(CharmapButton),
+    },
     {
       name: 'table',
       component: markRaw(TableButton),

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())