tiptapify 0.2.3 → 0.2.5

package/index.d.ts

@@ -64,6 +64,8 @@ import Tiptapify from './src/components/Tiptapify.vue'
 import TiptapifyDialog from './src/components/UI/TiptapifyDialog.vue'
 import * as mdi from '@mdi/js'
 
+export type TiptapifyFooterAlignment = 'start' | 'center' | 'end'
+
 export interface TiptapifyOptions {
   i18n?: string
 }
@@ -95,10 +97,17 @@ export interface TiptapifyAiRequest {
   model?: string
   messages: TiptapifyAiChatMessage[]
   temperature?: number
-  stream?: false
+  stream?: boolean
   [key: string]: unknown
 }
 
+export type TiptapifyAiReasoningEffort = 'low' | 'medium' | 'high' | 'xhigh' | 'max'
+
+export interface TiptapifyAiReasoningEffortOptions {
+  options: TiptapifyAiReasoningEffort[]
+  default?: TiptapifyAiReasoningEffort
+}
+
 export interface TiptapifyAiResponse {
   content: string
 }
@@ -112,7 +121,17 @@ export interface TiptapifyAiOpenAiResponse {
   }>
 }
 
-export type TiptapifyAiProvider = (request: TiptapifyAiRequest, context: TiptapifyAiEditorContext) => Promise<TiptapifyAiResponse | TiptapifyAiOpenAiResponse | string>
+export interface TiptapifyAiStream {
+  signal: AbortSignal
+  onChunk: (chunk: string) => void
+  onReasoning: (chunk: string) => void
+}
+
+export type TiptapifyAiProvider = (
+  request: TiptapifyAiRequest,
+  context: TiptapifyAiEditorContext,
+  stream?: TiptapifyAiStream,
+) => Promise<TiptapifyAiResponse | TiptapifyAiOpenAiResponse | string>
 
 export type TiptapifyAiTokenProvider = () => Promise<string | null> | string | null
 
@@ -130,6 +149,10 @@ export interface TiptapifyAiOptions {
   defaultPrompt?: string
   systemPrompt?: string
   temperature?: number
+  stream?: boolean
+  thinking?: boolean
+  reasoningEffort?: TiptapifyAiReasoningEffortOptions
+  showReasoning?: boolean
   chatCompletionOptions?: Record<string, unknown>
   createMessages?: (context: TiptapifyAiEditorContext) => TiptapifyAiChatMessage[]
   tokenProvider?: TiptapifyAiTokenProvider

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -70,47 +70,47 @@
   "packageManager": "pnpm@11.8.0",
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@tiptap/core": "^3.27.1",
-    "@tiptap/extension-blockquote": "^3.27.1",
-    "@tiptap/extension-bold": "^3.27.1",
-    "@tiptap/extension-bubble-menu": "^3.27.1",
-    "@tiptap/extension-code": "^3.27.1",
-    "@tiptap/extension-code-block": "^3.27.1",
-    "@tiptap/extension-code-block-lowlight": "^3.27.1",
-    "@tiptap/extension-color": "^3.27.1",
-    "@tiptap/extension-document": "^3.27.1",
-    "@tiptap/extension-floating-menu": "^3.27.1",
-    "@tiptap/extension-font-family": "^3.27.1",
-    "@tiptap/extension-hard-break": "^3.27.1",
-    "@tiptap/extension-heading": "^3.27.1",
-    "@tiptap/extension-highlight": "^3.27.1",
-    "@tiptap/extension-horizontal-rule": "^3.27.1",
-    "@tiptap/extension-image": "^3.27.1",
-    "@tiptap/extension-invisible-characters": "^3.27.1",
-    "@tiptap/extension-italic": "^3.27.1",
-    "@tiptap/extension-link": "^3.27.1",
-    "@tiptap/extension-list": "^3.27.1",
-    "@tiptap/extension-list-item": "^3.27.1",
-    "@tiptap/extension-paragraph": "^3.27.1",
-    "@tiptap/extension-placeholder": "^3.27.1",
-    "@tiptap/extension-strike": "^3.27.1",
-    "@tiptap/extension-subscript": "^3.27.1",
-    "@tiptap/extension-superscript": "^3.27.1",
-    "@tiptap/extension-table": "^3.27.1",
-    "@tiptap/extension-task-item": "^3.27.1",
-    "@tiptap/extension-task-list": "^3.27.1",
-    "@tiptap/extension-text": "^3.27.1",
-    "@tiptap/extension-text-align": "^3.27.1",
-    "@tiptap/extension-text-style": "^3.27.1",
-    "@tiptap/extension-typography": "^3.27.1",
-    "@tiptap/extension-underline": "^3.27.1",
-    "@tiptap/extension-youtube": "^3.27.1",
-    "@tiptap/extensions": "^3.27.1",
-    "@tiptap/pm": "^3.27.1",
-    "@tiptap/suggestion": "^3.27.1",
-    "@tiptap/vue-3": "^3.27.1",
+    "@tiptap/core": "^3.31.0",
+    "@tiptap/extension-blockquote": "^3.31.0",
+    "@tiptap/extension-bold": "^3.31.0",
+    "@tiptap/extension-bubble-menu": "^3.31.0",
+    "@tiptap/extension-code": "^3.31.0",
+    "@tiptap/extension-code-block": "^3.31.0",
+    "@tiptap/extension-code-block-lowlight": "^3.31.0",
+    "@tiptap/extension-color": "^3.31.0",
+    "@tiptap/extension-document": "^3.31.0",
+    "@tiptap/extension-floating-menu": "^3.31.0",
+    "@tiptap/extension-font-family": "^3.31.0",
+    "@tiptap/extension-hard-break": "^3.31.0",
+    "@tiptap/extension-heading": "^3.31.0",
+    "@tiptap/extension-highlight": "^3.31.0",
+    "@tiptap/extension-horizontal-rule": "^3.31.0",
+    "@tiptap/extension-image": "^3.31.0",
+    "@tiptap/extension-invisible-characters": "^3.31.0",
+    "@tiptap/extension-italic": "^3.31.0",
+    "@tiptap/extension-link": "^3.31.0",
+    "@tiptap/extension-list": "^3.31.0",
+    "@tiptap/extension-list-item": "^3.31.0",
+    "@tiptap/extension-paragraph": "^3.31.0",
+    "@tiptap/extension-placeholder": "^3.31.0",
+    "@tiptap/extension-strike": "^3.31.0",
+    "@tiptap/extension-subscript": "^3.31.0",
+    "@tiptap/extension-superscript": "^3.31.0",
+    "@tiptap/extension-table": "^3.31.0",
+    "@tiptap/extension-task-item": "^3.31.0",
+    "@tiptap/extension-task-list": "^3.31.0",
+    "@tiptap/extension-text": "^3.31.0",
+    "@tiptap/extension-text-align": "^3.31.0",
+    "@tiptap/extension-text-style": "^3.31.0",
+    "@tiptap/extension-typography": "^3.31.0",
+    "@tiptap/extension-underline": "^3.31.0",
+    "@tiptap/extension-youtube": "^3.31.0",
+    "@tiptap/extensions": "^3.31.0",
+    "@tiptap/pm": "^3.31.0",
+    "@tiptap/suggestion": "^3.31.0",
+    "@tiptap/vue-3": "^3.31.0",
     "emoji.json": "^16.0.0",
-    "highlight.js": "^11.11.1",
+    "highlight.js": "^11.12.0",
     "linkifyjs": "^4.3.3",
     "lowlight": "^3.3.0"
   },
@@ -142,11 +142,11 @@
     "typescript": "^6.0.3",
     "typescript-eslint": "^8.61.1",
     "unplugin-vue-components": "^32.1.0",
-    "vite": "^8.0.16",
+    "vite": "^8.2.2",
     "vite-plugin-vuetify": "^2.1.3",
-    "vite-svg-loader": "^5.1.1",
-    "vitest": "^4.1.9",
+    "vite-svg-loader": "^5.1.3",
+    "vitest": "^4.1.11",
     "vue-eslint-parser": "^10.4.1",
-    "vue-tsc": "^3.3.5"
+    "vue-tsc": "^3.3.11"
   }
 }

package/src/components/Footer.vue

@@ -38,8 +38,9 @@ const percentage = computed(() => {
   return Math.round((100 / props.limit) * editor.value.storage.characterCount.characters())
 })
 const limitText = computed(() => {
-  const current = editor.value.storage.characterCount.characters()
-  return `${t('footer.limit')}<br>${current} / ${props.limit}`
+  const current = editor.value.storage.characterCount.characters().toLocaleString('en-US').replace(/,/g, ' ')
+  const limit = props.limit.toLocaleString('en-US').replace(/,/g, ' ')
+  return `${t('footer.limit')}<br>${current} / ${limit}`
 })
 
 function printStatusItemText(text: string): string {
@@ -69,7 +70,7 @@ function showFooter() {
                 :class="{
                   'character-count': true,
                   'character-count--alert': percentage > 75,
-                  'character-count--warning': editor.storage.characterCount.characters() === limit,
+                  'character-count--warning': editor.storage.characterCount.characters() >= limit,
                 }"
               >
                 <circle r="8" cx="10" cy="10" fill="#e9ecef" />
@@ -92,7 +93,7 @@ function showFooter() {
         </template>
         <template v-for="statusItem in statusItems" :key="statusItem.text">
           <span v-if="statusItem.enabled" class="tiptapify-footer--status-item">
-            {{ printStatusItemText(statusItem.text) }}: {{ statusItem.value }}
+            {{ printStatusItemText(statusItem.text) }}: {{ statusItem.value.toLocaleString('en-US').replace(/,/g, ' ') }}
           </span>
 
           <VDivider class="tiptapify-footer--divider" vertical />

package/src/components/Tiptapify.vue

@@ -92,6 +92,14 @@ function contentChanged() {
   emit('content-changed', { html: editor.value?.getHTML(), json: editor.value?.getJSON() })
 }
 
+function onContainerClick(event: MouseEvent) {
+  if ((event.target as Element).closest('.ProseMirror')) {
+    return
+  }
+
+  editor.value?.chain().focus().run()
+}
+
 const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     props.content,
     computed(() => props.placeholder || t('content.placeholder')).value,
@@ -150,7 +158,7 @@ onBeforeUnmount(() => {
 
       <VProgressLinear v-model="loadingProgress" :color="loadingColor" :height="loadingHeight" :indeterminate="loading" />
 
-      <div class="pa-2 tiptapify-container resizable" :style="computeResizableHeight">
+      <div class="pa-2 tiptapify-container resizable" :style="computeResizableHeight" @click="onContainerClick">
         <MenuFloating v-if="floatingMenu" :variant="variantBtn" :theme="currentTheme" />
 
         <MenuBubble v-if="bubbleMenu" :variant="variantBtn" :theme="currentTheme" />
@@ -197,6 +205,7 @@ onBeforeUnmount(() => {
   --yellow: rgba(250, 204, 21, .4);
   --yellow-light: #FFFAE5;
   --red: #FF5C33;
+  --red-soft: #B24A40;
   --red-light: #FFEBE5;
   --shadow: 0px 12px 33px 0px rgba(0, 0, 0, .06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, .04);
   --border: 1px solid var(--gray-2);
@@ -207,6 +216,21 @@ onBeforeUnmount(() => {
   overflow: auto;
 }
 
+.tiptapify-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.tiptapify-container .tiptapify-editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.tiptapify-container .tiptapify-editor > .ProseMirror {
+  flex: 1;
+}
+
 /* Basic editor styles */
 .tiptap {
   :first-child {
@@ -560,4 +584,62 @@ onBeforeUnmount(() => {
     }
   }
 }
+
+/*
+ * Dialog layout primitives.
+ *
+ * Dialogs lay their fields out with a self-contained 12-column grid instead
+ * of VRow/VCol. The bundled Vuetify 3 components emit v3 grid classes
+ * (.v-col-*, .v-col-md-*), but Vuetify 4 renamed them (.v-col--cols-*), so
+ * the consumer's Vuetify stylesheet does not size the columns and every
+ * field collapses onto a single row. Keeping the layout inside tiptapify
+ * makes it work with Vuetify 3 and 4 alike, regardless of the CSS the
+ * consumer loads.
+ *
+ * The 960px breakpoint preserves the Vuetify 3 "md" threshold
+ * (Vuetify 4 lowered it to 840px).
+ */
+.tiptapify-dialog-grid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+
+  > .tiptapify-dialog-col {
+    grid-column: 1 / -1;
+    min-width: 0;
+  }
+
+  @media (min-width: 960px) {
+    > .tiptapify-dialog-col--3 {
+      grid-column: span 3;
+    }
+
+    > .tiptapify-dialog-col--4 {
+      grid-column: span 4;
+    }
+
+    > .tiptapify-dialog-col--6 {
+      grid-column: span 6;
+    }
+
+    > .tiptapify-dialog-col--8 {
+      grid-column: span 8;
+    }
+  }
+}
+
+.tiptapify-dialog-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+
+  > .tiptapify-dialog-actions__start,
+  > .tiptapify-dialog-actions__end {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
 </style>

package/src/components/Toolbar/Index.vue

@@ -178,10 +178,10 @@ Object.keys(props.customExtensions).forEach((key: any) => {
   <div v-if="editor" class="tiptapify-toolbar">
     <VToolbar elevation="1" :theme="theme" height="auto" :class="`ps-1 pr-1 rounded-t-${rounded}`">
       <VSlideGroup v-if="toolbarScrollable">
-        <Items :items="toolbarItems" />
+        <Items :items="toolbarItems" :variant-btn="variantBtn" />
       </VSlideGroup>
 
-      <Items v-else :items="toolbarItems" />
+      <Items v-else :items="toolbarItems" :variant-btn="variantBtn" />
     </VToolbar>
   </div>
 </template>

package/src/components/Toolbar/Items.vue

@@ -20,9 +20,9 @@ defineProps({
         <div class="menu-divider" />
       </template>
       <template v-else>
-        <VBtnGroup v-if="item.group" elevation="4">
+        <VBtnGroup v-if="item.group" elevation="4" :class="{ 'tiptapify-btn-group--elevated': variantBtn === 'elevated' }">
           <template v-for="sectionItem in item.components" :key="sectionItem.name">
-            <component :is="sectionItem.component" v-bind="{ ...sectionItem.props ?? {} }" />
+            <component :is="sectionItem.component" v-bind="{ variantBtn, ...sectionItem.props ?? {} }" />
           </template>
         </VBtnGroup>
         <template v-else>
@@ -40,6 +40,13 @@ defineProps({
 </template>
 
 <style lang="scss" scoped>
+.tiptapify-btn-group--elevated {
+  box-shadow:
+      0 3px 1px -2px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)),
+      0 2px 2px 0 var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)),
+      0 1px 5px 0 var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, 0.12));
+}
+
 :deep(.v-btn-group) {
   height: 32px !important;
 }

package/src/components/UI/TiptapifyDialog.vue

@@ -144,7 +144,8 @@ onBeforeUnmount(() => {
     <VCard>
       <VCardTitle
         ref="movableHandler"
-        :class="`d-flex ${!fullscreen ? 'tiptapify-movable-handler' : ''}`"
+        class="tiptapify-dialog-header"
+        :class="!fullscreen ? 'tiptapify-movable-handler' : ''"
         style="user-select: none;"
       >
         <VLabel>
@@ -168,6 +169,11 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="scss" scoped>
+  .tiptapify-dialog-header {
+    align-items: center;
+    display: flex;
+  }
+
   :deep(.v-overlay__content) {
     position: fixed;
   }

package/src/extensions/components/ai/Button.vue

@@ -38,5 +38,5 @@ function showDialog() {
     <BtnIcon :icon="icon" />
   </VBtn>
 
-  <AiDialog ref="dialog" />
+  <AiDialog ref="dialog" :variant-btn="variantBtn" />
 </template>