tiptapify 0.1.6 → 0.2.1

package/index.d.ts

@@ -32,6 +32,7 @@ import type {
   SingleCommands,
 } from '@tiptap/core'
 
+import '@tiptap/extensions'
 import '@tiptap/extension-text-style'
 import '@tiptap/extension-list'
 import '@tiptap/extensions'
@@ -67,6 +68,74 @@ export interface TiptapifyOptions {
   i18n?: string
 }
 
+export type TiptapifyAiMode = 'insert' | 'replace' | 'append'
+
+export interface TiptapifyAiPromptExample {
+  title: string
+  prompt: string
+}
+
+export type TiptapifyAiChatRole = 'system' | 'user' | 'assistant' | 'developer' | 'tool'
+
+export interface TiptapifyAiChatMessage {
+  role: TiptapifyAiChatRole
+  content: string
+}
+
+export interface TiptapifyAiEditorContext {
+  prompt: string
+  selectedText: string
+  text: string
+  html: string
+  json: object
+  mode: TiptapifyAiMode
+}
+
+export interface TiptapifyAiRequest {
+  model?: string
+  messages: TiptapifyAiChatMessage[]
+  temperature?: number
+  stream?: false
+  [key: string]: unknown
+}
+
+export interface TiptapifyAiResponse {
+  content: string
+}
+
+export interface TiptapifyAiOpenAiResponse {
+  choices?: Array<{
+    message?: {
+      content?: string
+    }
+    text?: string
+  }>
+}
+
+export type TiptapifyAiProvider = (request: TiptapifyAiRequest, context: TiptapifyAiEditorContext) => Promise<TiptapifyAiResponse | TiptapifyAiOpenAiResponse | string>
+
+export type TiptapifyAiTokenProvider = () => Promise<string | null> | string | null
+
+export interface TiptapifyAiStorage {
+  getItem: (key: string) => string | null | Promise<string | null>
+  setItem: (key: string, value: string) => void | Promise<void>
+  removeItem: (key: string) => void | Promise<void>
+}
+
+export interface TiptapifyAiOptions {
+  aiProvider?: TiptapifyAiProvider
+  model?: string
+  promptExamples?: TiptapifyAiPromptExample[]
+  mode?: TiptapifyAiMode
+  defaultPrompt?: string
+  systemPrompt?: string
+  temperature?: number
+  chatCompletionOptions?: Record<string, unknown>
+  createMessages?: (context: TiptapifyAiEditorContext) => TiptapifyAiChatMessage[]
+  tokenProvider?: TiptapifyAiTokenProvider
+  storage?: TiptapifyAiStorage
+}
+
 declare const TiptapifyPlugin: {
   install: (app: never, options?: TiptapifyOptions) => void
 }
@@ -115,4 +184,4 @@ declare module '@vue/runtime-core' {
   interface GlobalComponents {
     Tiptapify: typeof Tiptapify
   }
-}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiptapify",
   "types": "./index.d.ts",
-  "version": "0.1.6",
+  "version": "0.2.1",
   "description": "Tiptap3 editor with Vuetify3 menu implementation",
   "exports": {
     ".": {
@@ -149,4 +149,4 @@
     "vue-eslint-parser": "^10.4.1",
     "vue-tsc": "^3.3.5"
   }
-}
+}

package/src/components/Tiptapify.vue

@@ -6,7 +6,7 @@ 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 { TiptapifyEditor, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
+import { TiptapifyAiOptions, TiptapifyEditor, variantBtnTypes, variantFieldTypes } from '@tiptapify/types/editor'
 import MenuBubble from '@tiptapify/components/MenuBubble.vue'
 import MenuFloating from '@tiptapify/components/MenuFloating.vue'
 
@@ -32,10 +32,12 @@ const props = defineProps({
   placeholder: { type: String, default () { return '' } },
   showWordsCount: { type: Boolean, default () { return true } },
   showCharactersCount: { type: Boolean, default () { return true } },
+  limit: { type: Number as PropType<number | null>, default () { return null } },
   defaultFontFamily: { type: String, default () { return 'Inter' } },
   fontMeasure: { type: String, default () { return 'px' } },
   rounded: { type: String, default () { return '0' } },
   customExtensions: { type: Array as PropType<toolbarSections>, default() { return [] } },
+  ai: { type: [Boolean, Object] as PropType<boolean | TiptapifyAiOptions>, default() { return false } },
   interactiveStyles: { type: Boolean, default() { return true } },
   loading: { type: Boolean, default() { return false } },
   loadingColor: { type: String, default() { return 'default' } },
@@ -49,6 +51,39 @@ const { t } = useI18n()
 const appTheme = useTheme()
 const currentTheme = ref(appTheme.global.name)
 
+const defaultAiPromptExamples = computed(() => [
+  {
+    title: t('ai.defaultExamples.improve.title'),
+    prompt: t('ai.defaultExamples.improve.prompt'),
+  },
+  {
+    title: t('ai.defaultExamples.proofReading.title'),
+    prompt: t('ai.defaultExamples.proofReading.prompt'),
+  },
+  {
+    title: t('ai.defaultExamples.summarize.title'),
+    prompt: t('ai.defaultExamples.summarize.prompt'),
+  },
+  {
+    title: t('ai.defaultExamples.expand.title'),
+    prompt: t('ai.defaultExamples.expand.prompt'),
+  },
+])
+
+const tiptapifyAi = computed(() => {
+  if (props.ai === false) {
+    return false
+  }
+
+  const options = props.ai === true ? {} : props.ai
+
+  return {
+    ...options,
+    enabled: true,
+    promptExamples: options.promptExamples?.length ? options.promptExamples : defaultAiPromptExamples.value,
+  }
+})
+
 function contentChanged() {
   emit('content-changed', { html: editor.value?.getHTML(), json: editor.value?.getJSON() })
 }
@@ -58,6 +93,7 @@ const editor: ShallowRef<Editor | undefined> = getTiptapEditor(
     computed(() => props.placeholder || t('content.placeholder')).value,
     props.slashCommands,
     props.customExtensions,
+    props.limit,
     contentChanged,
     (editorInstance: Editor) => {
       (<TiptapifyEditor>editorInstance).interactiveStyles = props.interactiveStyles
@@ -73,6 +109,7 @@ const emit = defineEmits(['update:modelValue', 'editor-ready', 'content-changed'
 
 provide('tiptapifyEditor', editor)
 provide('tiptapifyI18n', { t })
+provide('tiptapifyAi', tiptapifyAi)
 
 editor.value?.chain().setFontFamily(props.defaultFontFamily).run()
 

package/src/components/Toolbar/ai.ts

@@ -0,0 +1,13 @@
+import { default as AiButton } from '@tiptapify/extensions/components/ai/Button.vue'
+import { markRaw } from 'vue'
+
+export default {
+  section: 'ai',
+  group: true,
+  components: [
+    {
+      name: 'ai',
+      component: markRaw(AiButton),
+    }
+  ]
+}

package/src/components/Toolbar/items.ts

@@ -1,4 +1,5 @@
 import actions from '@tiptapify/components/Toolbar/actions'
+import ai from '@tiptapify/components/Toolbar/ai'
 import alignment from '@tiptapify/components/Toolbar/alignment'
 import format from '@tiptapify/components/Toolbar/format'
 import formatExtra from '@tiptapify/components/Toolbar/formatExtra'
@@ -15,6 +16,7 @@ const items = {
   alignment,
   list,
   actions,
+  ai,
   misc,
 }
 

package/src/components/editorExtensions.ts

@@ -1,4 +1,5 @@
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import { Gapcursor } from '@tiptap/extensions'
 import { TextStyleKit } from '@tiptap/extension-text-style'
 import { BulletList, OrderedList, ListItem, ListKeymap, TaskList, TaskItem } from '@tiptap/extension-list'
 import { Selection, Focus, Placeholder, UndoRedo, Dropcursor, CharacterCount } from '@tiptap/extensions'
@@ -52,8 +53,11 @@ const lowlight = createLowlight(common)
 // register language example
 // lowlight.register('ts', ts)
 
-export function editorExtensions (placeholder: string, slashCommands: SlashCommandsConfig, customExtensions: toolbarSections) {
+export function editorExtensions (placeholder: string, slashCommands: SlashCommandsConfig, customExtensions: toolbarSections, limit: number | null = null) {
+  const characterCount = limit && limit > 0 ? CharacterCount.configure({ limit }) : CharacterCount
+
   const extensions = [
+    Gapcursor,
     TextStyleKit,
     Document,
     Text,
@@ -109,7 +113,7 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
     Selection.configure({ className: 'selection' }),
     TextAlign.configure({ types: ['heading', 'paragraph'] }),
     Placeholder.configure({ placeholder }),
-    CharacterCount,
+    characterCount,
     InvisibleCharacters.configure({
       visible: false,
     }),
@@ -137,4 +141,4 @@ export function editorExtensions (placeholder: string, slashCommands: SlashComma
   }
 
   return extensions
-}
+}

package/src/components/index.ts

@@ -9,15 +9,16 @@ export function getTiptapEditor (
   placeholder: string,
   slashCommands: SlashCommandsConfig = true,
   customExtensions: toolbarSections,
+  limit: number | null = null,
   onUpdate: Function = () => {},
   onCreate?: (editor: Editor) => void,
 ): ShallowRef<Editor | undefined> {
-  const extensions = editorExtensions(placeholder, slashCommands, customExtensions)
+  const extensions = editorExtensions(placeholder, slashCommands, customExtensions, limit)
 
   return useEditor({
     content,
     extensions,
     onUpdate: ({ editor }) => onUpdate(),
-    onCreate: onCreate ? ({ editor }) => onCreate(editor) : undefined,
+    onCreate: onCreate ? ({ editor }) => onCreate(editor as Editor) : undefined,
   })
-}
+}

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

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+
+import * as mdi from '@mdi/js'
+import BtnIcon from '@tiptapify/components/UI/BtnIcon.vue'
+import AiDialog from '@tiptapify/extensions/components/ai/Dialog.vue'
+import defaults from '@tiptapify/constants/defaults'
+import { TiptapifyAiResolvedOptions, variantBtnTypes } from '@tiptapify/types/editor'
+import { computed, ComputedRef, inject, PropType, useTemplateRef } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
+
+defineProps({
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+})
+
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+const ai = inject('tiptapifyAi') as ComputedRef<TiptapifyAiResolvedOptions | false>
+const dialog = useTemplateRef('dialog')
+
+const isAvailable = computed(() => Boolean(ai?.value && ai.value.aiProvider))
+const mdiIcons = mdi as Record<string, string>
+const icon = computed(() => `mdiSvg:${mdiIcons.mdiSparklesOutline ?? mdiIcons.mdiSparkles ?? mdi.mdiCreationOutline}`)
+
+function showDialog() {
+  if (!isAvailable.value) {
+    return
+  }
+
+  dialog.value?.showDialog()
+}
+
+</script>
+
+<template>
+  <VBtn color="" :variant="variantBtn" size="32" :disabled="!isAvailable" @click="showDialog">
+    <VTooltip activator="parent">
+      {{ isAvailable ? t('ai.title') : t('ai.unavailable') }}
+    </VTooltip>
+    <BtnIcon :icon="icon" />
+  </VBtn>
+
+  <AiDialog ref="dialog" />
+</template>

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

@@ -0,0 +1,262 @@
+<script lang="ts" setup>
+
+import TiptapifyDialog from '@tiptapify/components/UI/TiptapifyDialog.vue'
+import defaults from '@tiptapify/constants/defaults'
+import {
+  TiptapifyAiEditorContext,
+  TiptapifyAiMode,
+  TiptapifyAiOpenAiResponse,
+  TiptapifyAiRequest,
+  TiptapifyAiResponse,
+  TiptapifyAiResolvedOptions,
+  TiptapifyEditor,
+  variantBtnTypes,
+  variantFieldTypes
+} from '@tiptapify/types/editor'
+import { computed, ComputedRef, inject, PropType, Ref, ref, useTemplateRef } from 'vue'
+import { ComposerTranslation } from 'vue-i18n'
+
+defineProps({
+  variantBtn: { type: String as PropType<variantBtnTypes>, default() { return defaults.variantBtn } },
+  variantField: { type: String as PropType<variantFieldTypes>, default() { return defaults.variantField } },
+})
+
+const editor = inject('tiptapifyEditor') as Ref<TiptapifyEditor>
+const ai = inject('tiptapifyAi') as ComputedRef<TiptapifyAiResolvedOptions | false>
+const { t } = inject('tiptapifyI18n') as { t: ComposerTranslation }
+
+const dialog = useTemplateRef('dialog')
+const prompt = ref('')
+const result = ref('')
+const error = ref('')
+const loading = ref(false)
+const requestRange = ref<{ from: number, to: number } | null>(null)
+const requestMode = ref<TiptapifyAiMode>('insert')
+
+const aiProvider = computed(() => ai?.value ? ai.value.aiProvider : undefined)
+const promptExamples = computed(() => ai?.value ? ai.value.promptExamples : [])
+const isGenerateDisabled = computed(() => !aiProvider.value || !prompt.value.trim() || loading.value)
+const isApplyDisabled = computed(() => !result.value.trim() || loading.value)
+
+defineExpose({ showDialog })
+
+function showDialog() {
+  prompt.value = ai?.value && ai.value.defaultPrompt ? ai.value.defaultPrompt : ''
+  result.value = ''
+  error.value = ''
+  requestRange.value = null
+  requestMode.value = 'insert'
+
+  dialog.value?.open()
+}
+
+function close() {
+  prompt.value = ''
+  result.value = ''
+  error.value = ''
+  requestRange.value = null
+  requestMode.value = 'insert'
+
+  dialog.value?.close()
+}
+
+function applyExample(examplePrompt: string) {
+  prompt.value = examplePrompt
+}
+
+function getSelectedText(from: number, to: number) {
+  if (from === to) {
+    return ''
+  }
+
+  return editor.value.state.doc.textBetween(from, to, '\n')
+}
+
+function buildDefaultMessages(context: TiptapifyAiEditorContext) {
+  const systemPrompt = ai.value && ai.value.systemPrompt
+    ? ai.value.systemPrompt
+    : 'You are an assistant inside a rich text editor. Return only the final text to insert.'
+  const contextText = context.selectedText || context.text
+  const contextLabel = context.selectedText ? 'Selected text' : 'Editor text'
+
+  return [
+    {
+      role: 'system' as const,
+      content: systemPrompt,
+    },
+    {
+      role: 'user' as const,
+      content: contextText
+        ? `${contextLabel}:\n${contextText}\n\nUser request:\n${context.prompt}`
+        : context.prompt,
+    },
+  ]
+}
+
+function buildOpenAiRequest(context: TiptapifyAiEditorContext): TiptapifyAiRequest {
+  const options = ai.value || {}
+  const request: TiptapifyAiRequest = {
+    ...options.chatCompletionOptions,
+    messages: options.createMessages ? options.createMessages(context) : buildDefaultMessages(context),
+    stream: false,
+  }
+
+  if (options.model) {
+    request.model = options.model
+  }
+
+  if (typeof options.temperature === 'number') {
+    request.temperature = options.temperature
+  }
+
+  return request
+}
+
+function isTiptapifyAiResponse(response: unknown): response is TiptapifyAiResponse {
+  return typeof response === 'object' && response !== null && typeof (response as TiptapifyAiResponse).content === 'string'
+}
+
+function isOpenAiResponse(response: unknown): response is TiptapifyAiOpenAiResponse {
+  return typeof response === 'object' && response !== null && Array.isArray((response as TiptapifyAiOpenAiResponse).choices)
+}
+
+function getResponseContent(response: TiptapifyAiResponse | TiptapifyAiOpenAiResponse | string) {
+  let content = ''
+
+  if (typeof response === 'string') {
+    content = response
+  } else if (isTiptapifyAiResponse(response)) {
+    content = response.content
+  } else if (isOpenAiResponse(response)) {
+    content = response.choices?.[0]?.message?.content ?? response.choices?.[0]?.text ?? ''
+  }
+
+  return content.trimStart()
+}
+
+async function generate() {
+  if (isGenerateDisabled.value || !aiProvider.value) {
+    return
+  }
+
+  error.value = ''
+  result.value = ''
+  loading.value = true
+
+  const { from, to } = editor.value.state.selection
+  const selectedText = getSelectedText(from, to)
+  requestRange.value = selectedText ? { from, to } : null
+  requestMode.value = ai.value ? ai.value.mode ?? (selectedText ? 'replace' : 'insert') : 'insert'
+
+  const context: TiptapifyAiEditorContext = {
+    prompt: prompt.value.trim(),
+    selectedText,
+    text: selectedText || editor.value.getText(),
+    html: editor.value.getHTML(),
+    json: editor.value.getJSON(),
+    mode: requestMode.value,
+  }
+  const request = buildOpenAiRequest(context)
+
+  try {
+    const response = await aiProvider.value(request, context)
+    result.value = getResponseContent(response)
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : t('ai.error')
+  } finally {
+    loading.value = false
+  }
+}
+
+function apply() {
+  if (isApplyDisabled.value) {
+    return
+  }
+
+  const chain = editor.value.chain().focus()
+  if (requestRange.value) {
+    chain.deleteRange(requestRange.value)
+  }
+
+  if (!requestRange.value && requestMode.value === 'append') {
+    chain.insertContentAt(editor.value.state.doc.content.size, result.value).run()
+  } else {
+    chain.insertContent(result.value).run()
+  }
+
+  close()
+}
+
+</script>
+
+<template>
+  <TiptapifyDialog ref="dialog" module="ai" :title="t('ai.title')" :max-width="720" @close-dialog="close">
+    <template #content>
+      <VCardText>
+        <VAlert v-if="!aiProvider" type="warning" variant="tonal" density="compact" class="mb-4">
+          {{ t('ai.unavailable') }}
+        </VAlert>
+
+        <VTextarea
+          v-model="prompt"
+          :label="t('ai.prompt')"
+          :variant="variantField"
+          :disabled="loading || !aiProvider"
+          rows="4"
+          auto-grow
+          autofocus
+        />
+
+        <div v-if="promptExamples.length" class="mb-4">
+          <VLabel class="mb-2 d-block">
+            {{ t('ai.examples') }}
+          </VLabel>
+          <div class="d-flex flex-wrap ga-2">
+            <VChip
+              v-for="example in promptExamples"
+              :key="`${example.title}:${example.prompt}`"
+              variant="tonal"
+              :disabled="loading || !aiProvider"
+              @click="applyExample(example.prompt)"
+            >
+              {{ example.title }}
+            </VChip>
+          </div>
+        </div>
+
+        <VTextarea
+          v-model="result"
+          :label="t('ai.result')"
+          :variant="variantField"
+          :loading="loading"
+          :disabled="loading"
+          rows="5"
+          auto-grow
+        />
+
+        <VAlert v-if="loading" type="info" variant="tonal" density="compact" class="mt-4">
+          {{ t('ai.loading') }}
+        </VAlert>
+
+        <VAlert v-if="error" type="error" variant="tonal" density="compact" class="mt-4">
+          {{ error }}
+        </VAlert>
+      </VCardText>
+    </template>
+
+    <template #actions>
+      <VCardActions>
+        <VSpacer />
+        <VBtn :variant="variantBtn" @click="close">
+          {{ t('dialog.close') }}
+        </VBtn>
+        <VBtn color="primary" :variant="variantBtn" :disabled="isGenerateDisabled" :loading="loading" @click="generate">
+          {{ t('ai.generate') }}
+        </VBtn>
+        <VBtn color="primary" :variant="variantBtn" :disabled="isApplyDisabled" @click="apply">
+          {{ t('ai.apply') }}
+        </VBtn>
+      </VCardActions>
+    </template>
+  </TiptapifyDialog>
+</template>

package/src/extensions/components/style/StyleColor.vue

@@ -94,14 +94,28 @@ function hexToRgb(hex: string): Color {
 function hoverColor(color: string) {
   colorSelected.value = false
 
-  const interactiveStyles = editor.value.interactiveStyles
-
-  if (props.fontColor && interactiveStyles) {
-    editor.value.chain().focus().setColor(color).run()
+  if (props.fontColor) {
+    editor.value
+      .chain()
+      .focus()
+      .setColor(color)
+      .command(({ tr }) => {
+        tr.setMeta('addToHistory', false)
+        return true
+      })
+      .run()
   }
 
-  if (props.backgroundColor && interactiveStyles) {
-    editor.value.chain().focus().setHighlight({ color: color }).run()
+  if (props.backgroundColor) {
+    editor.value
+      .chain()
+      .focus()
+      .setHighlight({ color })
+      .command(({ tr }) => {
+        tr.setMeta('addToHistory', false)
+        return true
+      })
+      .run()
   }
 }
 
@@ -115,20 +129,52 @@ function resetColor() {
   }
 
   if (props.fontColor) {
-    editor.value.chain().focus().setColor(initialColor.value).run()
+    editor.value
+      .chain()
+      .focus()
+      .setColor(initialColor.value)
+      .command(({ tr }) => {
+        tr.setMeta('addToHistory', false)
+        return true
+      })
+      .run()
   }
 
   if (props.backgroundColor) {
     if (initialColor.value) {
-      editor.value.chain().focus().setHighlight({ color: initialColor.value }).run()
+      editor.value
+        .chain()
+        .focus()
+        .setHighlight({ color: initialColor.value })
+        .command(({ tr }) => {
+          tr.setMeta('addToHistory', false)
+          return true
+        })
+        .run()
     } else {
-      editor.value.chain().focus().unsetHighlight().run()
+      editor.value
+        .chain()
+        .focus()
+        .unsetHighlight()
+        .command(({ tr }) => {
+          tr.setMeta('addToHistory', false)
+          return true
+        })
+        .run()
     }
   }
 }
 
-function setColor() {
+function setColor(color: string) {
   colorSelected.value = true
+
+  if (props.fontColor) {
+    editor.value.chain().focus().setColor(color).run()
+  }
+
+  if (props.backgroundColor) {
+    editor.value.chain().focus().setHighlight({ color }).run()
+  }
 }
 
 function unsetColor() {
@@ -155,7 +201,7 @@ function isColorActive(color: string): boolean {
           :class="isColorActive(colorCode) ? 'tiptapify-style-color-item-active' : ''"
           @mouseenter="hoverColor(colorCode)"
           @mouseleave="resetColor()"
-          @click="setColor"
+          @click="setColor(colorCode)"
         >
           <div
             class="tiptapify-style-color-picker"
@@ -188,7 +234,7 @@ function isColorActive(color: string): boolean {
         </VCardItem>
 
         <VCardActions>
-          <VBtn variant="flat" color="primary" @click="setColor">
+          <VBtn variant="flat" color="primary" @click="setColor(customColor)">
             OK
           </VBtn>
           <VBtn variant="flat" color="grey-400" @click="colorPicker = !colorPicker; customColor = initialColor; resetColor()">