How to Build a Notion-like Editor with Nuxt and Tiptap

import type { EditorToolbarItem } from '@nuxt/ui'

export function useEditorToolbar() {
  const toolbarItems: EditorToolbarItem[][] = [[{
    kind: 'undo',
    icon: 'i-lucide-undo',
    tooltip: { text: 'Undo' }
  }, {
    kind: 'redo',
    icon: 'i-lucide-redo',
    tooltip: { text: 'Redo' }
  }]]

  const bubbleToolbarItems: EditorToolbarItem[][] = [[{
    label: 'Turn into',
    trailingIcon: 'i-lucide-chevron-down',
    activeColor: 'neutral',
    activeVariant: 'ghost',
    content: {
      align: 'start'
    },
    items: [{
      kind: 'paragraph',
      label: 'Paragraph',
      icon: 'i-lucide-type'
    }, {
      kind: 'heading',
      level: 1,
      label: 'Heading 1',
      icon: 'i-lucide-heading-1'
    }, {
      kind: 'heading',
      level: 2,
      label: 'Heading 2',
      icon: 'i-lucide-heading-2'
    }, {
      kind: 'heading',
      level: 3,
      label: 'Heading 3',
      icon: 'i-lucide-heading-3'
    }, {
      kind: 'bulletList',
      label: 'Bullet List',
      icon: 'i-lucide-list'
    }, {
      kind: 'orderedList',
      label: 'Numbered List',
      icon: 'i-lucide-list-ordered'
    }, {
      kind: 'blockquote',
      label: 'Blockquote',
      icon: 'i-lucide-text-quote'
    }, {
      kind: 'codeBlock',
      label: 'Code Block',
      icon: 'i-lucide-square-code'
    }]
  }], [{
    kind: 'mark',
    mark: 'bold',
    icon: 'i-lucide-bold',
    tooltip: { text: 'Bold' }
  }, {
    kind: 'mark',
    mark: 'italic',
    icon: 'i-lucide-italic',
    tooltip: { text: 'Italic' }
  }, {
    kind: 'mark',
    mark: 'underline',
    icon: 'i-lucide-underline',
    tooltip: { text: 'Underline' }
  }, {
    kind: 'mark',
    mark: 'strike',
    icon: 'i-lucide-strikethrough',
    tooltip: { text: 'Strikethrough' }
  }, {
    kind: 'mark',
    mark: 'code',
    icon: 'i-lucide-code',
    tooltip: { text: 'Code' }
  }, {
    kind: 'link',
    icon: 'i-lucide-link',
    tooltip: { text: 'Link' }
  }]]

  return {
    toolbarItems,
    bubbleToolbarItems
  }
}

import type { EditorSuggestionMenuItem } from '@nuxt/ui'

export function useEditorSuggestions() {
  const items: EditorSuggestionMenuItem[][] = [[{
    type: 'label',
    label: 'Style'
  }, {
    kind: 'paragraph',
    label: 'Paragraph',
    icon: 'i-lucide-type'
  }, {
    kind: 'heading',
    level: 1,
    label: 'Heading 1',
    icon: 'i-lucide-heading-1'
  }, {
    kind: 'heading',
    level: 2,
    label: 'Heading 2',
    icon: 'i-lucide-heading-2'
  }, {
    kind: 'heading',
    level: 3,
    label: 'Heading 3',
    icon: 'i-lucide-heading-3'
  }, {
    kind: 'bulletList',
    label: 'Bullet List',
    icon: 'i-lucide-list'
  }, {
    kind: 'orderedList',
    label: 'Numbered List',
    icon: 'i-lucide-list-ordered'
  }, {
    kind: 'blockquote',
    label: 'Blockquote',
    icon: 'i-lucide-text-quote'
  }, {
    kind: 'codeBlock',
    label: 'Code Block',
    icon: 'i-lucide-square-code'
  }], [{
    type: 'label',
    label: 'Insert'
  }, {
    kind: 'mention',
    label: 'Mention',
    icon: 'i-lucide-at-sign'
  }, {
    kind: 'emoji',
    label: 'Emoji',
    icon: 'i-lucide-smile-plus'
  }, {
    kind: 'horizontalRule',
    label: 'Horizontal Rule',
    icon: 'i-lucide-separator-horizontal'
  }]]

  return {
    items
  }
}

import type { DropdownMenuItem } from '@nuxt/ui'
import type { Editor, JSONContent } from '@tiptap/vue-3'
import { mapEditorItems } from '@nuxt/ui/utils/editor'

export function useEditorDragHandle() {
  // The block the drag handle is next to
  const selectedNode = ref<{ node: JSONContent | null, pos: number }>()

  function getItems(editor: Editor): DropdownMenuItem[][] {
    const pos = selectedNode.value?.pos
    if (pos === undefined) {
      return []
    }

    // Turns the `kind` of each item into an `onSelect` that runs its handler
    return mapEditorItems(editor, [[{
      label: 'Turn into',
      icon: 'i-lucide-repeat-2',
      children: [
        { kind: 'paragraph', label: 'Paragraph', icon: 'i-lucide-type' },
        { kind: 'heading', level: 1, label: 'Heading 1', icon: 'i-lucide-heading-1' },
        { kind: 'heading', level: 2, label: 'Heading 2', icon: 'i-lucide-heading-2' },
        { kind: 'heading', level: 3, label: 'Heading 3', icon: 'i-lucide-heading-3' },
        { kind: 'bulletList', label: 'Bullet List', icon: 'i-lucide-list' },
        { kind: 'orderedList', label: 'Numbered List', icon: 'i-lucide-list-ordered' },
        { kind: 'blockquote', label: 'Blockquote', icon: 'i-lucide-text-quote' },
        { kind: 'codeBlock', label: 'Code Block', icon: 'i-lucide-square-code' }
      ]
    }, {
      kind: 'clearFormatting',
      pos,
      label: 'Reset formatting',
      icon: 'i-lucide-rotate-ccw'
    }], [{
      kind: 'duplicate',
      pos,
      label: 'Duplicate',
      icon: 'i-lucide-copy'
    }, {
      kind: 'moveUp',
      pos,
      label: 'Move up',
      icon: 'i-lucide-arrow-up'
    }, {
      kind: 'moveDown',
      pos,
      label: 'Move down',
      icon: 'i-lucide-arrow-down'
    }], [{
      kind: 'delete',
      pos,
      label: 'Delete',
      icon: 'i-lucide-trash',
      color: 'error'
    }]]) as DropdownMenuItem[][]
  }

  function onNodeChange(event: { node: JSONContent | null, pos: number }) {
    selectedNode.value = event
  }

  return {
    getItems,
    onNodeChange
  }
}

<script setup lang="ts">
const { toolbarItems, bubbleToolbarItems } = useEditorToolbar()
const { items: mentionItems } = useEditorMentions()
const { items: emojiItems, extension: Emoji } = useEditorEmojis()
const { items: suggestionItems } = useEditorSuggestions()
const { getItems: getDragHandleItems, onNodeChange } = useEditorDragHandle()

const content = ref(`# Welcome to your editor

Start writing here. Everything you type is kept as **Markdown**, from *emphasis* to [links](https://ui.nuxt.com) :sparkles:

- Headings, lists and quotes
- **Bold**, *italic* and \`inline code\``)
</script>

<template>
  <UEditor
    v-slot="{ editor, handlers }"
    v-model="content"
    content-type="markdown"
    :extensions="[Emoji]"
    placeholder="Write, type '/' for commands..."
    autofocus
    class="min-h-screen"
    :ui="{ base: 'p-4 sm:p-14', content: 'max-w-4xl mx-auto' }"
  >
    <div class="sticky top-0 z-10 flex items-center justify-end gap-2 px-4 sm:px-14 py-2 border-b border-default bg-default">
      <UEditorToolbar :editor="editor" :items="toolbarItems" />
    </div>

    <UEditorToolbar
      :editor="editor"
      :items="bubbleToolbarItems"
      layout="bubble"
      :should-show="({ view, state }) => view.hasFocus() && !state.selection.empty && !editor.isActive('image')"
    />

    <UEditorMentionMenu :editor="editor" :items="mentionItems" />

    <UEditorEmojiMenu :editor="editor" :items="emojiItems" />

    <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />

    <UEditorDragHandle v-slot="{ ui, onClick }" :editor="editor" @node-change="onNodeChange">
      <UButton
        icon="i-lucide-plus"
        color="neutral"
        variant="ghost"
        size="sm"
        aria-label="Add a block"
        :class="ui.handle()"
        @click="(e: MouseEvent) => {
          e.stopPropagation()

          const node = onClick()
          handlers.suggestion?.execute(editor, { pos: node?.pos }).run()
        }"
      />

      <UDropdownMenu
        v-slot="{ open }"
        :modal="false"
        :items="getDragHandleItems(editor)"
        :content="{ side: 'left' }"
        :ui="{ content: 'w-48' }"
        @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
      >
        <UButton
          icon="i-lucide-grip-vertical"
          color="neutral"
          variant="ghost"
          active-variant="soft"
          size="sm"
          aria-label="Block actions"
          :active="open"
          :class="ui.handle()"
        />
      </UDropdownMenu>
    </UEditorDragHandle>
  </UEditor>
</template>

<script setup lang="ts">
import type { NodeViewProps } from '@tiptap/vue-3'
import { NodeViewWrapper } from '@tiptap/vue-3'

const props = defineProps<NodeViewProps>()

const loading = ref(false)
const error = ref<string>()

const upload = useUpload('/api/upload', { formKey: 'file', multiple: false })

async function onUpload(file: File | null | undefined) {
  if (!file) {
    return
  }

  loading.value = true
  error.value = undefined

  try {
    const result = await upload(file)

    const pos = props.getPos()
    if (typeof pos !== 'number') {
      return
    }

    // Replace the upload block with the uploaded image
    props.editor
      .chain()
      .focus()
      .deleteRange({ from: pos, to: pos + 1 })
      .setImage({ src: result.url || `/images/${result.pathname}` })
      .run()
  } catch (e) {
    error.value = (e as { data?: { message?: string } }).data?.message || 'The image could not be uploaded'
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <NodeViewWrapper>
    <UFileUpload
      accept="image/*"
      label="Upload an image"
      :description="error || 'SVG, PNG, JPG or GIF (max. 2MB)'"
      :preview="false"
      class="min-h-48"
      :ui="{ description: error ? 'text-error' : '' }"
      @update:model-value="onUpload"
    >
      <template #leading>
        <UAvatar
          :icon="error ? 'i-lucide-alert-circle' : loading ? 'i-lucide-loader-circle' : 'i-lucide-image'"
          size="xl"
          :ui="{ icon: [loading && 'animate-spin', error && 'text-error'] }"
        />
      </template>
    </UFileUpload>
  </NodeViewWrapper>
</template>

import { Node, mergeAttributes } from '@tiptap/core'
import type { CommandProps, NodeViewRenderer } from '@tiptap/core'
import { VueNodeViewRenderer } from '@tiptap/vue-3'
import ImageUploadNodeComponent from './ImageUploadNode.vue'

declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    imageUpload: {
      insertImageUpload: () => ReturnType
    }
  }
}

export const ImageUpload = Node.create({
  name: 'imageUpload',
  group: 'block',
  atom: true,
  draggable: true,
  addAttributes() {
    return {}
  },
  parseHTML() {
    return [{
      tag: 'div[data-type="image-upload"]'
    }]
  },
  renderHTML({ HTMLAttributes }) {
    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'image-upload' })]
  },
  addNodeView(): NodeViewRenderer {
    return VueNodeViewRenderer(ImageUploadNodeComponent)
  },
  addCommands() {
    return {
      insertImageUpload: () => ({ commands }: CommandProps) => {
        return commands.insertContent({ type: this.name })
      }
    }
  }
})

export default ImageUpload

import type { EditorCustomHandlers, EditorToolbarItem } from '@nuxt/ui'

// The handlers type the custom `kind` of the items, like `imageUpload`
export function useEditorToolbar<T extends EditorCustomHandlers>(_customHandlers?: T) {
  const toolbarItems: EditorToolbarItem<T>[][] = [[{
    kind: 'undo',
    icon: 'i-lucide-undo',
    tooltip: { text: 'Undo' }
  }, {
    kind: 'redo',
    icon: 'i-lucide-redo',
    tooltip: { text: 'Redo' }
  }], [{
    kind: 'imageUpload',
    label: 'Add',
    icon: 'i-lucide-image',
    tooltip: { text: 'Add image' }
  }]]

  const bubbleToolbarItems: EditorToolbarItem<T>[][] = [[{
    label: 'Turn into',
    trailingIcon: 'i-lucide-chevron-down',
    activeColor: 'neutral',
    activeVariant: 'ghost',
    content: {
      align: 'start'
    },
    items: [{
      kind: 'paragraph',
      label: 'Paragraph',
      icon: 'i-lucide-type'
    }, {
      kind: 'heading',
      level: 1,
      label: 'Heading 1',
      icon: 'i-lucide-heading-1'
    }, {
      kind: 'heading',
      level: 2,
      label: 'Heading 2',
      icon: 'i-lucide-heading-2'
    }, {
      kind: 'heading',
      level: 3,
      label: 'Heading 3',
      icon: 'i-lucide-heading-3'
    }, {
      kind: 'bulletList',
      label: 'Bullet List',
      icon: 'i-lucide-list'
    }, {
      kind: 'orderedList',
      label: 'Numbered List',
      icon: 'i-lucide-list-ordered'
    }, {
      kind: 'blockquote',
      label: 'Blockquote',
      icon: 'i-lucide-text-quote'
    }, {
      kind: 'codeBlock',
      label: 'Code Block',
      icon: 'i-lucide-square-code'
    }]
  }], [{
    kind: 'mark',
    mark: 'bold',
    icon: 'i-lucide-bold',
    tooltip: { text: 'Bold' }
  }, {
    kind: 'mark',
    mark: 'italic',
    icon: 'i-lucide-italic',
    tooltip: { text: 'Italic' }
  }, {
    kind: 'mark',
    mark: 'underline',
    icon: 'i-lucide-underline',
    tooltip: { text: 'Underline' }
  }, {
    kind: 'mark',
    mark: 'strike',
    icon: 'i-lucide-strikethrough',
    tooltip: { text: 'Strikethrough' }
  }, {
    kind: 'mark',
    mark: 'code',
    icon: 'i-lucide-code',
    tooltip: { text: 'Code' }
  }, {
    kind: 'link',
    icon: 'i-lucide-link',
    tooltip: { text: 'Link' }
  }]]

  return {
    toolbarItems,
    bubbleToolbarItems
  }
}

import type { EditorCustomHandlers, EditorSuggestionMenuItem } from '@nuxt/ui'

// The handlers type the custom `kind` of the items, like `imageUpload`
export function useEditorSuggestions<T extends EditorCustomHandlers>(_customHandlers?: T) {
  const items: EditorSuggestionMenuItem<T>[][] = [[{
    type: 'label',
    label: 'Style'
  }, {
    kind: 'paragraph',
    label: 'Paragraph',
    icon: 'i-lucide-type'
  }, {
    kind: 'heading',
    level: 1,
    label: 'Heading 1',
    icon: 'i-lucide-heading-1'
  }, {
    kind: 'heading',
    level: 2,
    label: 'Heading 2',
    icon: 'i-lucide-heading-2'
  }, {
    kind: 'heading',
    level: 3,
    label: 'Heading 3',
    icon: 'i-lucide-heading-3'
  }, {
    kind: 'bulletList',
    label: 'Bullet List',
    icon: 'i-lucide-list'
  }, {
    kind: 'orderedList',
    label: 'Numbered List',
    icon: 'i-lucide-list-ordered'
  }, {
    kind: 'blockquote',
    label: 'Blockquote',
    icon: 'i-lucide-text-quote'
  }, {
    kind: 'codeBlock',
    label: 'Code Block',
    icon: 'i-lucide-square-code'
  }], [{
    type: 'label',
    label: 'Insert'
  }, {
    kind: 'mention',
    label: 'Mention',
    icon: 'i-lucide-at-sign'
  }, {
    kind: 'emoji',
    label: 'Emoji',
    icon: 'i-lucide-smile-plus'
  }, {
    kind: 'imageUpload',
    label: 'Image',
    icon: 'i-lucide-image'
  }, {
    kind: 'horizontalRule',
    label: 'Horizontal Rule',
    icon: 'i-lucide-separator-horizontal'
  }]]

  return {
    items
  }
}

<script setup lang="ts">
import type { EditorCustomHandlers } from '@nuxt/ui'
import type { Editor } from '@tiptap/vue-3'
import { ImageUpload } from '~/components/editor/ImageUploadExtension'

const customHandlers = {
  imageUpload: {
    canExecute: (editor: Editor) => editor.can().insertContent({ type: 'imageUpload' }),
    execute: (editor: Editor) => editor.chain().focus().insertContent({ type: 'imageUpload' }),
    isActive: (editor: Editor) => editor.isActive('imageUpload'),
    isDisabled: undefined
  }
} satisfies EditorCustomHandlers

const { toolbarItems, bubbleToolbarItems } = useEditorToolbar(customHandlers)
const { items: mentionItems } = useEditorMentions()
const { items: emojiItems, extension: Emoji } = useEditorEmojis()
const { items: suggestionItems } = useEditorSuggestions(customHandlers)
const { getItems: getDragHandleItems, onNodeChange } = useEditorDragHandle()

const content = ref(`# Welcome to your editor

Start writing here. Everything you type is kept as **Markdown**, from *emphasis* to [links](https://ui.nuxt.com) :sparkles:

- Headings, lists and quotes
- **Bold**, *italic* and \`inline code\``)
</script>

<template>
  <UEditor
    v-slot="{ editor, handlers }"
    v-model="content"
    content-type="markdown"
    :extensions="[Emoji, ImageUpload]"
    :handlers="customHandlers"
    placeholder="Write, type '/' for commands..."
    autofocus
    class="min-h-screen"
    :ui="{ base: 'p-4 sm:p-14', content: 'max-w-4xl mx-auto' }"
  >
    <div class="sticky top-0 z-10 flex items-center justify-end gap-2 px-4 sm:px-14 py-2 border-b border-default bg-default">
      <UEditorToolbar :editor="editor" :items="toolbarItems" />
    </div>

    <UEditorToolbar
      :editor="editor"
      :items="bubbleToolbarItems"
      layout="bubble"
      :should-show="({ view, state }) => view.hasFocus() && !state.selection.empty && !editor.isActive('image') && !editor.isActive('imageUpload')"
    />

    <UEditorMentionMenu :editor="editor" :items="mentionItems" />

    <UEditorEmojiMenu :editor="editor" :items="emojiItems" />

    <UEditorSuggestionMenu :editor="editor" :items="suggestionItems" />

    <UEditorDragHandle v-slot="{ ui, onClick }" :editor="editor" @node-change="onNodeChange">
      <UButton
        icon="i-lucide-plus"
        color="neutral"
        variant="ghost"
        size="sm"
        aria-label="Add a block"
        :class="ui.handle()"
        @click="(e: MouseEvent) => {
          e.stopPropagation()

          const node = onClick()
          handlers.suggestion?.execute(editor, { pos: node?.pos }).run()
        }"
      />

      <UDropdownMenu
        v-slot="{ open }"
        :modal="false"
        :items="getDragHandleItems(editor)"
        :content="{ side: 'left' }"
        :ui="{ content: 'w-48' }"
        @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
      >
        <UButton
          icon="i-lucide-grip-vertical"
          color="neutral"
          variant="ghost"
          active-variant="soft"
          size="sm"
          aria-label="Block actions"
          :active="open"
          :class="ui.handle()"
        />
      </UDropdownMenu>
    </UEditorDragHandle>
  </UEditor>
</template>

import { createError, defineEventHandler, readBody } from 'nuxt/server'
import { streamText, createTextStreamResponse } from 'ai'

export default defineEventHandler(async (event) => {
  const { prompt, mode, language } = await readBody<{ prompt?: string, mode?: string, language?: string }>(event)
  if (!prompt) {
    throw createError({ status: 400, message: 'Prompt is required' })
  }
  if (prompt.length > 10_000) {
    throw createError({ status: 413, message: 'Prompt is too long' })
  }

  let instructions: string
  let maxOutputTokens: number

  const preserveMarkdown = 'IMPORTANT: Preserve all markdown formatting (bold, italic, links, etc.) exactly as in the original.'

  switch (mode) {
    case 'fix':
      instructions = `You are a writing assistant. Fix all spelling and grammar errors in the given text. ${preserveMarkdown} Only output the corrected text, nothing else.`
      maxOutputTokens = 500
      break
    case 'extend':
      instructions = `You are a writing assistant. Extend the given text with more details, examples, and explanations while maintaining the same style. ${preserveMarkdown} Only output the extended text, nothing else.`
      maxOutputTokens = 500
      break
    case 'reduce':
      instructions = `You are a writing assistant. Make the given text more concise by removing unnecessary words while keeping the meaning. ${preserveMarkdown} Only output the reduced text, nothing else.`
      maxOutputTokens = 300
      break
    case 'simplify':
      instructions = `You are a writing assistant. Simplify the given text to make it easier to understand, using simpler words and shorter sentences. ${preserveMarkdown} Only output the simplified text, nothing else.`
      maxOutputTokens = 400
      break
    case 'summarize':
      instructions = 'You are a writing assistant. Summarize the given text concisely while keeping the key points. Only output the summary, nothing else.'
      maxOutputTokens = 200
      break
    case 'translate':
      instructions = `You are a writing assistant. Translate the given text to ${language || 'English'}. ${preserveMarkdown} Only output the translated text, nothing else.`
      maxOutputTokens = 500
      break
    case 'continue':
    default:
      instructions = `You are a writing assistant providing inline autocompletions.
CRITICAL RULES:
- Output ONLY the NEW text that comes AFTER the user's input
- NEVER repeat any words from the end of the user's text
- Keep completions short (1 sentence max)
- Match the tone and style of the existing text
- Output plain text only, never use markdown syntax`
      maxOutputTokens = 25
      break
  }

  const result = streamText({
    model: 'deepseek/deepseek-v4.1-flash',
    instructions,
    prompt,
    maxOutputTokens,
    reasoning: 'none',
    providerOptions: {
      gateway: {
        order: ['baseten'],
        zeroDataRetention: true,
        disallowPromptTraining: true
      }
    }
  })

  return createTextStreamResponse({ stream: result.textStream })
})

import { Extension } from '@tiptap/core'
import { Decoration, DecorationSet } from '@tiptap/pm/view'
import { Plugin, PluginKey } from '@tiptap/pm/state'
import type { Editor } from '@tiptap/vue-3'
import { useDebounceFn } from '@vueuse/core'

export interface CompletionOptions {
  /**
   * Debounce delay in ms before triggering completion
   * @defaultValue 250
   */
  debounce?: number
  /**
   * Whether to automatically trigger completion while typing
   * @defaultValue true
   */
  autoTrigger?: boolean
  /**
   * Characters that prevent completion while typing the word they start (slash commands, emojis, mentions)
   * @defaultValue ['/', ':', '@']
   */
  triggerCharacters?: string[]
  /**
   * Called when completion should be triggered, receives the editor instance.
   * Return `false` to skip showing a suggestion.
   */
  onTrigger?: (editor: Editor) => boolean | undefined
  /**
   * Called when suggestion is accepted
   */
  onAccept?: () => void
  /**
   * Called when suggestion is dismissed
   */
  onDismiss?: () => void
}

export interface CompletionStorage {
  suggestion: string
  position: number | undefined
  visible: boolean
  debouncedTrigger: ((editor: Editor) => void) | null
  setSuggestion: (text: string) => void
  clearSuggestion: () => void
}

export const completionPluginKey = new PluginKey('completion')

function dismiss(editor: Editor, storage: CompletionStorage, options: CompletionOptions) {
  storage.clearSuggestion()
  // Force decoration update
  editor.view.dispatch(editor.state.tr.setMeta('completionUpdate', true))
  options.onDismiss?.()
}

export const Completion = Extension.create<CompletionOptions, CompletionStorage>({
  name: 'completion',

  addOptions() {
    return {
      debounce: 250,
      autoTrigger: true,
      triggerCharacters: ['/', ':', '@'],
      onTrigger: undefined,
      onAccept: undefined,
      onDismiss: undefined
    }
  },

  addStorage() {
    return {
      suggestion: '',
      position: undefined as number | undefined,
      visible: false,
      debouncedTrigger: null as ((editor: Editor) => void) | null,
      setSuggestion(text: string) {
        this.suggestion = text
      },
      clearSuggestion() {
        this.suggestion = ''
        this.position = undefined
        this.visible = false
      }
    }
  },

  addProseMirrorPlugins() {
    const storage = this.storage

    return [
      new Plugin({
        key: completionPluginKey,
        props: {
          decorations(state) {
            if (!storage.visible || !storage.suggestion || storage.position === undefined) {
              return DecorationSet.empty
            }

            const widget = Decoration.widget(storage.position, () => {
              const span = document.createElement('span')
              span.className = 'completion-suggestion'
              span.textContent = storage.suggestion
              span.style.cssText = 'color: var(--ui-text-muted); opacity: 0.6; pointer-events: none;'
              return span
            }, { side: 1 })

            return DecorationSet.create(state.doc, [widget])
          }
        }
      })
    ]
  },

  addKeyboardShortcuts() {
    return {
      Tab: ({ editor }) => {
        if (!this.storage.visible || !this.storage.suggestion || this.storage.position === undefined) {
          return false
        }

        // Store values before clearing
        const suggestion = this.storage.suggestion
        const position = this.storage.position

        // Clear suggestion first
        this.storage.clearSuggestion()

        // Force decoration update
        editor.view.dispatch(editor.state.tr.setMeta('completionUpdate', true))

        // Insert the suggestion text
        editor.chain().focus().insertContentAt(position, suggestion).run()

        this.options.onAccept?.()
        return true
      },
      Escape: ({ editor }) => {
        if (!this.storage.visible) {
          return false
        }

        dismiss(editor as Editor, this.storage, this.options)
        return true
      }
    }
  },

  onUpdate({ editor }) {
    // Clear suggestion on any edit
    if (this.storage.visible) {
      dismiss(editor as Editor, this.storage, this.options)
    }

    if (this.options.autoTrigger) {
      this.storage.debouncedTrigger?.(editor as Editor)
    }
  },

  onSelectionUpdate({ editor }) {
    if (this.storage.visible) {
      dismiss(editor as Editor, this.storage, this.options)
    }
  },

  onCreate() {
    const storage = this.storage
    const options = this.options

    // Create debounced trigger function for this instance
    this.storage.debouncedTrigger = useDebounceFn((editor: Editor) => {
      if (!options.onTrigger) return

      const { state } = editor
      const { selection } = state
      const { $from } = selection

      // Only suggest at end of block with content
      const isAtEndOfBlock = $from.parentOffset === $from.parent.content.size
      const hasContent = $from.parent.textContent.trim().length > 0
      const textContent = $from.parent.textContent

      // Don't trigger if sentence is complete (ends with punctuation)
      const endsWithPunctuation = /[.!?]\s*$/.test(textContent)

      // Don't trigger while typing a word that starts with a trigger character
      const lastWord = textContent.split(/\s/).pop() || ''
      const endsWithTrigger = (options.triggerCharacters || []).some(char => lastWord.startsWith(char))

      if (!isAtEndOfBlock || !hasContent || endsWithPunctuation || endsWithTrigger) {
        return
      }

      // Pass editor to let the handler extract content (e.g., as markdown)
      if (options.onTrigger(editor) === false) {
        return
      }

      // Set position and mark as visible
      storage.position = selection.from
      storage.visible = true
    }, options.debounce || 250)
  },

  onDestroy() {
    this.storage.debouncedTrigger = null
  }
})

export default Completion

import { useCompletion } from '@ai-sdk/vue'
import type { MappablePosition } from '@tiptap/core'
import type { Editor } from '@tiptap/vue-3'
import { Completion } from '~/components/editor/CompletionExtension'
import type { CompletionStorage } from '~/components/editor/CompletionExtension'

type TransformMode = 'fix' | 'extend' | 'reduce' | 'simplify' | 'summarize' | 'translate'
type CompletionMode = 'continue' | TransformMode

// Only the end of the document is sent as context to continue writing
const MAX_CONTEXT_LENGTH = 2000

export interface UseEditorCompletionOptions {
  api?: string
}

export function useEditorCompletion(editorRef: Ref<{ editor: Editor | undefined } | null | undefined>, options: UseEditorCompletionOptions = {}) {
  // Range toolbar actions replace with their result, kept in sync with edits made while the request runs
  let target: { from: MappablePosition, to: MappablePosition } | undefined
  const mode = ref<CompletionMode>('continue')
  const language = ref<string>()

  function getCompletionStorage() {
    const storage = editorRef.value?.editor?.storage as Record<string, CompletionStorage> | undefined
    return storage?.completion
  }

  const { completion, complete, isLoading, stop, setCompletion } = useCompletion({
    api: options.api || '/api/completion',
    streamProtocol: 'text',
    body: computed(() => ({
      mode: mode.value,
      language: language.value
    })),
    onFinish: (_prompt, completionText) => {
      const editor = editorRef.value?.editor

      // Transform modes replace the selection with the full result
      if (mode.value !== 'continue' && target && completionText && editor) {
        const range = { from: target.from.position, to: target.to.position }
        editor.chain()
          .focus()
          .insertContentAt(range, parseResult(editor, range, completionText))
          .run()
      }

      target = undefined
    },
    onError: (error) => {
      console.error('AI completion error:', error)
      target = undefined
      getCompletionStorage()?.clearSuggestion()

      // Remove the ghost text already displayed
      const editor = editorRef.value?.editor
      editor?.view.dispatch(editor.state.tr.setMeta('completionUpdate', true))
    }
  })

  // Stream "continue" results into the inline suggestion, or into the document for the toolbar action
  watch(completion, (newCompletion, oldCompletion) => {
    const editor = editorRef.value?.editor
    if (!editor || !newCompletion || mode.value !== 'continue') return

    const storage = getCompletionStorage()
    if (storage?.visible && storage.position !== undefined) {
      storage.setSuggestion(withLeadingSpace(editor, storage.position, newCompletion))
      editor.view.dispatch(editor.state.tr.setMeta('completionUpdate', true))
    } else if (target) {
      // The target moves past each inserted chunk
      const pos = target.to.position
      let delta = newCompletion.slice(oldCompletion?.length || 0)
      if (!oldCompletion) {
        delta = withLeadingSpace(editor, pos, delta)
      }

      editor.chain().focus().command(({ tr }) => {
        tr.insertText(delta, pos)
        return true
      }).run()
    }
  })

  // Map the target through every transaction, `editor.utils` handles collaborators' edits too.
  // Positions are recreated each time since the Yjs relative position isn't updated by local edits.
  watch(() => editorRef.value?.editor, (editor) => {
    editor?.on('transaction', ({ transaction }) => {
      if (!target) return
      setTarget(
        editor,
        editor.utils.getUpdatedPosition(target.from, transaction).position.position,
        editor.utils.getUpdatedPosition(target.to, transaction).position.position
      )
    })
  }, { immediate: true })

  function setTarget(editor: Editor, from: number, to: number) {
    target = {
      from: editor.utils.createMappablePosition(from),
      to: editor.utils.createMappablePosition(to)
    }
  }

  // Add a space before the text if it would stick to the previous word
  function withLeadingSpace(editor: Editor, pos: number, text: string) {
    const charBefore = editor.state.doc.textBetween(Math.max(0, pos - 1), pos)
    return charBefore && !/\s/.test(charBefore) && !/^\s/.test(text) ? ` ${text}` : text
  }

  function getMarkdown(editor: Editor, from: number, to: number) {
    const { doc } = editor.state
    if (editor.markdown) {
      return editor.markdown.serialize(doc.cut(from, to).toJSON())
    }
    // Fallback to plain text
    return doc.textBetween(from, to, '\n')
  }

  // Parse the result as markdown. Inside a single block, only insert its inline content so the block keeps its type.
  function parseResult(editor: Editor, { from, to }: { from: number, to: number }, text: string) {
    const textblock = getTextblock(editor, from, to)
    // Code is inserted as is
    if (textblock?.type.spec.code) {
      return [{ type: 'text', text }]
    }

    const blocks = editor.markdown?.parse(text).content
    if (!blocks) return text

    if (textblock && blocks.length === 1 && blocks[0]?.type === 'paragraph') {
      return blocks[0].content ?? []
    }
    return blocks
  }

  // Within a single block, only send its inline content so list or quote markers aren't inserted again
  function getSelectionMarkdown(editor: Editor) {
    const { $from, $to, from, to } = editor.state.selection
    const textblock = getTextblock(editor, from, to)
    if (!editor.markdown || !textblock) {
      return getMarkdown(editor, from, to)
    }
    if (textblock.type.spec.code) {
      return editor.state.doc.textBetween(from, to)
    }

    const content = textblock.cut($from.parentOffset, $to.parentOffset).content.toJSON()
    return editor.markdown.serialize({ type: 'doc', content: [{ type: 'paragraph', content }] })
  }

  // The text block containing the whole range, if any
  function getTextblock(editor: Editor, from: number, to: number) {
    const { doc } = editor.state
    const $from = doc.resolve(from)
    return $from.parent.isTextblock && $from.sameParent(doc.resolve(to)) ? $from.parent : undefined
  }

  function completeContinue(editor: Editor, pos: number) {
    mode.value = 'continue'
    complete(getMarkdown(editor, 0, pos).slice(-MAX_CONTEXT_LENGTH))
  }

  function triggerContinue(editor: Editor) {
    if (isLoading.value) return

    getCompletionStorage()?.clearSuggestion()

    // Continue after the selection, or from the cursor
    const { to } = editor.state.selection
    setTarget(editor, to, to)
    completeContinue(editor, to)
  }

  function triggerTransform(editor: Editor, transformMode: TransformMode, lang?: string) {
    const { from, to, empty } = editor.state.selection
    if (isLoading.value || empty) return

    getCompletionStorage()?.clearSuggestion()

    mode.value = transformMode
    language.value = lang
    setTarget(editor, from, to)
    complete(getSelectionMarkdown(editor))
  }

  // Configure Completion extension
  const extension = Completion.configure({
    onTrigger: (editor) => {
      if (isLoading.value) return false
      completeContinue(editor, editor.state.selection.from)
    },
    onAccept: () => {
      setCompletion('')
    },
    onDismiss: () => {
      stop()
      setCompletion('')
    }
  })

  function createTransformHandler(transformMode: TransformMode) {
    return {
      canExecute: (editor: Editor) => !editor.state.selection.empty && !isLoading.value,
      execute: (editor: Editor, cmd?: { language?: string }) => {
        triggerTransform(editor, transformMode, cmd?.language)
        return editor.chain()
      },
      isActive: (_editor: Editor, cmd?: { language?: string }) => !!(isLoading.value && mode.value === transformMode && language.value === cmd?.language),
      isDisabled: (editor: Editor) => editor.state.selection.empty || !!isLoading.value
    }
  }

  // Create handlers for toolbar
  const handlers = {
    aiContinue: {
      canExecute: () => !isLoading.value,
      execute: (editor: Editor) => {
        triggerContinue(editor)
        return editor.chain()
      },
      isActive: () => !!(isLoading.value && mode.value === 'continue'),
      isDisabled: () => !!isLoading.value
    },
    aiFix: createTransformHandler('fix'),
    aiExtend: createTransformHandler('extend'),
    aiReduce: createTransformHandler('reduce'),
    aiSimplify: createTransformHandler('simplify'),
    aiSummarize: createTransformHandler('summarize'),
    aiTranslate: createTransformHandler('translate')
  }

  return {
    extension,
    handlers,
    isLoading,
    mode
  }
}