tiptapify 0.2.4 → 0.2.6

package/index.d.ts

@@ -97,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
 }
@@ -114,10 +121,37 @@ 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
 
+export interface TiptapifyAiBackendRequest {
+  prompt: string
+  instruction: string
+  stream?: boolean
+  thinking?: boolean
+  reasoning_effort?: TiptapifyAiReasoningEffort
+  model?: string
+}
+
+export interface TiptapifyAiBackendProviderOptions {
+  endpoint: string
+  headers?: Record<string, string>
+  tokenProvider?: TiptapifyAiTokenProvider
+}
+
+export declare function createAiBackendProvider(options: TiptapifyAiBackendProviderOptions): TiptapifyAiProvider
+
 export interface TiptapifyAiStorage {
   getItem: (key: string) => string | null | Promise<string | null>
   setItem: (key: string, value: string) => void | Promise<void>
@@ -126,12 +160,18 @@ export interface TiptapifyAiStorage {
 
 export interface TiptapifyAiOptions {
   aiProvider?: TiptapifyAiProvider
+  aiEndpoint?: string
+  aiHeaders?: Record<string, string>
   model?: string
   promptExamples?: TiptapifyAiPromptExample[]
   mode?: TiptapifyAiMode
   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.4",
+  "version": "0.2.6",
   "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/Tiptapify.vue

@@ -6,20 +6,22 @@ import { SlashCommandsConfig } from '@tiptapify/types/slashCommandsTypes'
 import { computed, onBeforeUnmount, PropType, provide, ref, ShallowRef } from 'vue'
 import { default as Toolbar } from '@tiptapify/components/Toolbar/Index.vue'
 import { Editor, EditorContent } from '@tiptap/vue-3'
-import { TiptapifyAiOptions, TiptapifyEditor, TiptapifyFooterAlignment, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { TiptapifyAiOptions, TiptapifyAiResolvedOptions, TiptapifyEditor, TiptapifyFooterAlignment, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
 import { useI18n } from 'vue-i18n'
 
 import { getTiptapEditor } from '@tiptapify/components/index'
+import { createAiBackendProvider } from '@tiptapify/extensions/components/ai/backend'
 
 import Footer from '@tiptapify/components/Footer.vue'
 import { useTheme } from 'vuetify/framework'
 
 const props = defineProps({
   locale: { type: String, default () { return 'en' } },
-  content: { type: [String, Object] as PropType<string | Record<string, never>>, required: true },
+  content: { type: [String, Object] as PropType<string | Record<string, never>>, default () { return '' } },
+  modelValue: { type: [String, Object] as PropType<string | Record<string, never>>, default () { return '' } },
   height: { type: [Number, String], default () { return null } },
   variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
   variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
@@ -48,12 +50,14 @@ const props = defineProps({
   loadingHeight: { type: String, default() { return '1px' } },
 })
 
+const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'])
+
 const loadingProgress = ref(0)
 
 const { t } = useI18n()
 
 const appTheme = useTheme()
-const currentTheme = ref(appTheme.global.name)
+const currentTheme = computed(() => appTheme.name.value)
 
 const defaultAiPromptExamples = computed(() => [
   {
@@ -81,19 +85,42 @@ const tiptapifyAi = computed(() => {
 
   const options = props.ai === true ? {} : props.ai
 
-  return {
+  const resolved: TiptapifyAiResolvedOptions = {
     ...options,
     enabled: true,
     promptExamples: options.promptExamples?.length ? options.promptExamples : defaultAiPromptExamples.value,
   }
+
+  // Backend generation: when no `aiProvider` is given but an `aiEndpoint`
+  // is set, synthesize a provider that posts the request to the endpoint.
+  // An explicit `aiProvider` always wins.
+  if (!resolved.aiProvider && resolved.aiEndpoint) {
+    resolved.aiProvider = createAiBackendProvider({
+      endpoint: resolved.aiEndpoint,
+      headers: resolved.aiHeaders,
+      tokenProvider: resolved.tokenProvider,
+    })
+  }
+
+  return resolved
 })
 
 function contentChanged() {
-  emit('content-changed', { html: editor.value?.getHTML(), json: editor.value?.getJSON() })
+  const html = editor.value?.getHTML() ?? ''
+  emit('update:modelValue', html)
+  emit('content-changed', { html, 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,
+    props.content || props.modelValue,
     computed(() => props.placeholder || t('content.placeholder')).value,
     props.slashCommands,
     props.customExtensions,
@@ -109,8 +136,6 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     },
 )
 
-const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'])
-
 provide('tiptapifyEditor', editor)
 provide('tiptapifyI18n', { t })
 provide('tiptapifyAi', tiptapifyAi)
@@ -150,7 +175,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 +222,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 +233,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 +601,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>