Editor

A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.

Usage

The Editor component provides a powerful rich text editing experience built on TipTap. It supports multiple content formats (JSON, HTML, Markdown), customizable toolbars, drag-and-drop block reordering, slash commands, mentions, emoji picker, and extensible architecture for adding custom functionality.

This example demonstrates a production-ready Editor component. Check out the source code on GitHub.

Content

Use the v-model directive to control the value of the Editor.

<script setup lang="ts">
const value = ref({
  type: 'doc',
  content: [
    {
      type: 'heading',
      attrs: {
        level: 1
      },
      content: [
        {
          type: 'text',
          text: 'Hello World'
        }
      ]
    },
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'This is a '
        },
        {
          type: 'text',
          marks: [
            {
              type: 'bold'
            }
          ],
          text: 'rich text'
        },
        {
          type: 'text',
          text: ' editor.'
        }
      ]
    }
  ]
})
</script>

<template>
  <UEditor v-model="value" class="w-full min-h-21" />
</template>

Content Type

Use the content-type prop to set the format: json (default), html, or markdown. If not specified, strings are treated as HTML and objects as JSON.

<script setup lang="ts">
const value = ref('<h1>Hello World</h1>\n<p>This is a <strong>rich text</strong> editor.</p>\n')
</script>

<template>
  <UEditor v-model="value" content-type="html" class="w-full min-h-21" />
</template>

Extensions

The Editor includes the following extensions by default:

StarterKit - Core editing features (bold, italic, headings, lists, etc.)
Placeholder - Show placeholder text (when placeholder prop is provided)
Image - Insert and display images
Mention - Add @ mentions support
Markdown - Parse and serialize markdown (when content type is markdown)

Each built-in extension can be configured using its corresponding prop (starter-kit, placeholder, image, mention, markdown) to customize its behavior with TipTap options.

You can use the extensions prop to add additional TipTap extensions to enhance the Editor's capabilities:

<script setup lang="ts">
import { Emoji } from '@tiptap/extension-emoji'
import TextAlign from '@tiptap/extension-text-align'

const value = ref('<h1>Hello World</h1>\n')
</script>

<template>
  <UEditor
    v-model="value"
    :extensions="[
      Emoji,
      TextAlign.configure({
        types: ['heading', 'paragraph']
      })
    ]"
  />
</template>

Check out the image upload example for creating custom TipTap extensions.

Placeholder

Use the placeholder prop to set a placeholder text that shows in empty paragraphs.

<script setup lang="ts">
const value = ref('<h1>Hello World</h1>\n<p></p>\n')
</script>

<template>
  <UEditor v-model="value" placeholder="Start writing..." class="w-full min-h-21" />
</template>

Learn more about Placeholder extension in the TipTap documentation.

Starter Kit

Use the starter-kit prop to configure the built-in TipTap StarterKit extension which includes common editor features like bold, italic, headings, lists, blockquotes, code blocks, and more.

<script setup lang="ts">
const value = ref('<h1>Hello World</h1>\n')
</script>

<template>
  <UEditor
    v-model="value"
    :starter-kit="{
      blockquote: false,
      headings: {
        levels: [1, 2, 3, 4]
      },
      dropcursor: {
        color: 'var(--ui-primary)',
        width: 2
      },
      link: {
        openOnClick: false
      }
    }"
  />
</template>

Learn more about StarterKit extension in the TipTap documentation.

Handlers

Handlers wrap TipTap's built-in commands to provide a unified interface for editor actions. When you add a kind property to a EditorToolbar or EditorSuggestionMenu item, the corresponding handler executes the TipTap command and manages its state (active, disabled, etc.).

Default handlers

The Editor component provides these default handlers, which you can reference in toolbar or suggestion menu items using the kind property:

Handler	Description	Usage
`mark`	Toggle text marks (bold, italic, strike, code, underline)	Requires `mark` property in item
`textAlign`	Set text alignment (left, center, right, justify)	Requires `align` property in item
`heading`	Toggle heading levels (1-6)	Requires `level` property in item
`link`	Add, edit, or remove links	Prompts for URL if not provided
`image`	Insert images	Prompts for URL if not provided
`blockquote`	Toggle blockquotes
`bulletList`	Toggle bullet lists	Handles list conversions
`orderedList`	Toggle ordered lists	Handles list conversions
`codeBlock`	Toggle code blocks
`horizontalRule`	Insert horizontal rules
`paragraph`	Set paragraph format
`undo`	Undo last change
`redo`	Redo last undone change
`clearFormatting`	Remove all formatting	Works with selection or position
`duplicate`	Duplicate a node	Requires `pos` property in item
`delete`	Delete a node	Requires `pos` property in item
`moveUp`	Move a node up	Requires `pos` property in item
`moveDown`	Move a node down	Requires `pos` property in item
`suggestion`	Trigger suggestion menu	Inserts `/` character
`mention`	Trigger mention menu	Inserts `@` character
`emoji`	Trigger emoji picker	Inserts `:` character

Here's how to use default handlers in toolbar or suggestion menu items:

<script setup lang="ts">
import type { EditorToolbarItem } from '@nuxt/ui'

const value = ref('<h1>Hello World</h1>\n')

const items: EditorToolbarItem[] = [
  { kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
  { kind: 'mark', mark: 'italic', icon: 'i-lucide-italic' },
  { kind: 'heading', level: 1, icon: 'i-lucide-heading-1' },
  { kind: 'heading', level: 2, icon: 'i-lucide-heading-2' },
  { kind: 'textAlign', align: 'left', icon: 'i-lucide-align-left' },
  { kind: 'textAlign', align: 'center', icon: 'i-lucide-align-center' },
  { kind: 'bulletList', icon: 'i-lucide-list' },
  { kind: 'orderedList', icon: 'i-lucide-list-ordered' },
  { kind: 'blockquote', icon: 'i-lucide-quote' },
  { kind: 'link', icon: 'i-lucide-link' }
]
</script>

<template>
  <UEditor v-slot="{ editor }" v-model="value">
    <UEditorToolbar :editor="editor" :items="items" />
  </UEditor>
</template>

Custom handlers

Use the handlers prop to extend or override the default handlers. Custom handlers are merged with the default handlers, allowing you to add new actions or modify existing behavior.

Each handler implements the EditorHandler interface:

interface EditorHandler {
  /* Checks if the command can be executed in the current editor state */
  canExecute: (editor: Editor, item?: any) => boolean
  /* Executes the command and returns a Tiptap chain */
  execute: (editor: Editor, item?: any) => any
  /* Determines if the item should appear active (used for toggle states) */
  isActive: (editor: Editor, item?: any) => boolean
  /* Optional additional check to disable the item (combined with `canExecute`) */
  isDisabled?: (editor: Editor, item?: any) => boolean
}

Here's an example of creating custom handlers:

<script setup lang="ts">
import type { Editor } from '@tiptap/vue-3'
import type { EditorCustomHandlers, EditorToolbarItem } from '@nuxt/ui'

const value = ref('<h1>Hello World</h1>\n')

const customHandlers = {
  highlight: {
    canExecute: (editor: Editor) => editor.can().toggleHighlight(),
    execute: (editor: Editor) => editor.chain().focus().toggleHighlight(),
    isActive: (editor: Editor) => editor.isActive('highlight'),
    isDisabled: (editor: Editor) => !editor.isEditable
  }
} satisfies EditorCustomHandlers

const items = [
  // Built-in handler
  { kind: 'mark', mark: 'bold', icon: 'i-lucide-bold' },
  // Custom handler
  { kind: 'highlight', icon: 'i-lucide-highlighter' }
] satisfies EditorToolbarItem<typeof customHandlers>[]
</script>

<template>
  <UEditor v-slot="{ editor }" v-model="value" :handlers="customHandlers">
    <UEditorToolbar :editor="editor" :items="items" />
  </UEditor>
</template>

Check out the image upload example for a complete implementation with custom handlers.

Examples

You can use the EditorToolbar component to add a fixed, bubble, or floating toolbar to the Editor with common formatting actions.

<script setup lang="ts">
import type { EditorToolbarItem } from '@nuxt/ui'

const value = ref(`# Toolbar

Select some text to see the formatting toolbar appear above your selection.`)

const items: EditorToolbarItem[][] = [
  [
    {
      icon: 'i-lucide-heading',
      content: {
        align: 'start'
      },
      items: [
        {
          kind: 'heading',
          level: 1,
          icon: 'i-lucide-heading-1',
          label: 'Heading 1'
        },
        {
          kind: 'heading',
          level: 2,
          icon: 'i-lucide-heading-2',
          label: 'Heading 2'
        },
        {
          kind: 'heading',
          level: 3,
          icon: 'i-lucide-heading-3',
          label: 'Heading 3'
        },
        {
          kind: 'heading',
          level: 4,
          icon: 'i-lucide-heading-4',
          label: 'Heading 4'
        }
      ]
    }
  ],
  [
    {
      kind: 'mark',
      mark: 'bold',
      icon: 'i-lucide-bold'
    },
    {
      kind: 'mark',
      mark: 'italic',
      icon: 'i-lucide-italic'
    },
    {
      kind: 'mark',
      mark: 'underline',
      icon: 'i-lucide-underline'
    },
    {
      kind: 'mark',
      mark: 'strike',
      icon: 'i-lucide-strikethrough'
    },
    {
      kind: 'mark',
      mark: 'code',
      icon: 'i-lucide-code'
    }
  ]
]
</script>

<template>
  <UEditor
    v-slot="{ editor }"
    v-model="value"
    content-type="markdown"
    placeholder="Start typing..."
    class="w-full min-h-21"
  >
    <UEditorToolbar :editor="editor" :items="items" layout="bubble" />
  </UEditor>
</template>

With drag handle

You can use the EditorDragHandle component to add a draggable handle for reordering blocks.

<script setup lang="ts">
const value = ref(`# Drag Handle

Hover over the left side of this block to see the drag handle appear and reorder blocks.`)
</script>

<template>
  <UEditor
    v-slot="{ editor }"
    v-model="value"
    content-type="markdown"
    placeholder="Start typing..."
    class="w-full min-h-21"
  >
    <UEditorDragHandle :editor="editor" />
  </UEditor>
</template>

With suggestion menu

You can use the EditorSuggestionMenu component to add slash commands for quick formatting and insertions.

<script setup lang="ts">
import type { EditorSuggestionMenuItem } from '@nuxt/ui'

const value = ref(`# Suggestion Menu

Type / to open the suggestion menu and browse available formatting commands.`)

const items: EditorSuggestionMenuItem[][] = [
  [
    {
      type: 'label',
      label: 'Text'
    },
    {
      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'
    }
  ],
  [
    {
      type: 'label',
      label: 'Lists'
    },
    {
      kind: 'bulletList',
      label: 'Bullet List',
      icon: 'i-lucide-list'
    },
    {
      kind: 'orderedList',
      label: 'Numbered List',
      icon: 'i-lucide-list-ordered'
    }
  ],
  [
    {
      type: 'label',
      label: 'Insert'
    },
    {
      kind: 'blockquote',
      label: 'Blockquote',
      icon: 'i-lucide-text-quote'
    },
    {
      kind: 'codeBlock',
      label: 'Code Block',
      icon: 'i-lucide-square-code'
    },
    {
      kind: 'horizontalRule',
      label: 'Divider',
      icon: 'i-lucide-separator-horizontal'
    }
  ]
]

// SSR-safe function to append menus to body (avoids z-index issues in docs)
const appendToBody = false ? () => document.body : undefined
</script>

<template>
  <UEditor
    v-slot="{ editor }"
    v-model="value"
    content-type="markdown"
    placeholder="Type / for commands..."
    class="w-full min-h-21"
  >
    <UEditorSuggestionMenu :editor="editor" :items="items" :append-to="appendToBody" />
  </UEditor>
</template>

With mention menu

You can use the EditorMentionMenu component to add @ mentions for tagging users or entities.

<script setup lang="ts">
import type { EditorMentionMenuItem } from '@nuxt/ui'

const value = ref(`# Mention Menu

Type @ to mention someone and select from the list of available users.`)

const items: EditorMentionMenuItem[] = [
  {
    label: 'benjamincanac',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/739984?v=4'
    }
  },
  {
    label: 'atinux',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/904724?v=4'
    }
  },
  {
    label: 'danielroe',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/28706372?v=4'
    }
  },
  {
    label: 'pi0',
    avatar: {
      src: 'https://avatars.githubusercontent.com/u/5158436?v=4'
    }
  }
]

// SSR-safe function to append menus to body (avoids z-index issues in docs)
const appendToBody = false ? () => document.body : undefined
</script>

<template>
  <UEditor
    v-slot="{ editor }"
    v-model="value"
    content-type="markdown"
    placeholder="Type @ to mention someone..."
    class="w-full min-h-21"
  >
    <UEditorMentionMenu :editor="editor" :items="items" :append-to="appendToBody" />
  </UEditor>
</template>

With emoji menu

You can use the EditorEmojiMenu component to add emoji picker support.

<script setup lang="ts">
import type { EditorEmojiMenuItem } from '@nuxt/ui'
import { Emoji, gitHubEmojis } from '@tiptap/extension-emoji'

const value = ref(`# Emoji Menu

Type : to insert emojis and select from the list of available emojis.`)

const items: EditorEmojiMenuItem[] = gitHubEmojis.filter(
  (emoji) => !emoji.name.startsWith('regional_indicator_')
)

// SSR-safe function to append menus to body (avoids z-index issues in docs)
const appendToBody = false ? () => document.body : undefined
</script>

<template>
  <UEditor
    v-slot="{ editor }"
    v-model="value"
    :extensions="[Emoji]"
    content-type="markdown"
    placeholder="Type : to add emojis..."
    class="w-full min-h-21"
  >
    <UEditorEmojiMenu :editor="editor" :items="items" :append-to="appendToBody" />
  </UEditor>
</template>

With image upload

This example demonstrates how to create an image upload feature using the extensions prop to register a custom TipTap node and the handlers prop to define how the toolbar button triggers the upload flow.

Create a Vue component that uses the FileUpload component:

EditorImageUploadNode.vue

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

const props = defineProps<NodeViewProps>()

const file = ref<File | null>(null)
const loading = ref(false)

watch(file, async (newFile) => {
  if (!newFile) return

  loading.value = true

  const reader = new FileReader()
  reader.onload = async (e) => {
    const dataUrl = e.target?.result as string
    if (!dataUrl) {
      loading.value = false
      return
    }

    // Simulate upload delay
    await new Promise(resolve => setTimeout(resolve, 1000))

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

    props.editor
      .chain()
      .focus()
      .deleteRange({ from: pos, to: pos + 1 })
      .setImage({ src: dataUrl })
      .run()

    loading.value = false
  }
  reader.readAsDataURL(newFile)
})
</script>

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

Create a custom TipTap extension to register the node:

EditorImageUpload.ts

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

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

export default 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 })
      }
    }
  }
})

If you encounter a Adding different instances of a keyed plugin error when creating a custom extension, you may need to add prosemirror-state to the vite optimizeDeps include list in your nuxt.config.ts file.

nuxt.config.ts

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ['prosemirror-state']
    }
  }
})

Use the custom extension in the Editor:

<script setup lang="ts">
import type { EditorCustomHandlers, EditorToolbarItem } from '@nuxt/ui'
import type { Editor } from '@tiptap/vue-3'
import ImageUpload from './EditorImageUpload'

const value = ref(`# Image Upload

This editor demonstrates how to create a custom TipTap extension with handlers. Click the image button in the toolbar to upload a file — it will show a custom [FileUpload](/docs/components/file-upload) interface before inserting the image.

Try uploading an image below:

`)

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 items = [
  [
    {
      icon: 'i-lucide-heading',
      content: {
        align: 'start'
      },
      items: [
        {
          kind: 'heading',
          level: 1,
          icon: 'i-lucide-heading-1',
          label: 'Heading 1'
        },
        {
          kind: 'heading',
          level: 2,
          icon: 'i-lucide-heading-2',
          label: 'Heading 2'
        },
        {
          kind: 'heading',
          level: 3,
          icon: 'i-lucide-heading-3',
          label: 'Heading 3'
        },
        {
          kind: 'heading',
          level: 4,
          icon: 'i-lucide-heading-4',
          label: 'Heading 4'
        }
      ]
    }
  ],
  [
    {
      kind: 'mark',
      mark: 'bold',
      icon: 'i-lucide-bold'
    },
    {
      kind: 'mark',
      mark: 'italic',
      icon: 'i-lucide-italic'
    },
    {
      kind: 'mark',
      mark: 'underline',
      icon: 'i-lucide-underline'
    },
    {
      kind: 'mark',
      mark: 'strike',
      icon: 'i-lucide-strikethrough'
    },
    {
      kind: 'mark',
      mark: 'code',
      icon: 'i-lucide-code'
    }
  ],
  [
    {
      kind: 'imageUpload',
      icon: 'i-lucide-image',
      label: 'Add image'
    }
  ]
] satisfies EditorToolbarItem<typeof customHandlers>[][]
</script>

<template>
  <UEditor
    v-slot="{ editor }"
    v-model="value"
    :extensions="[ImageUpload]"
    :handlers="customHandlers"
    content-type="markdown"
    placeholder="Start typing..."
    :ui="{ base: 'p-8 sm:px-16' }"
    class="w-full min-h-80"
  >
    <UEditorToolbar
      :editor="editor"
      :items="items"
      class="border-b border-muted py-2 px-8 sm:px-16 overflow-x-auto"
    />
  </UEditor>
</template>

Learn more about creating custom extensions in the TipTap documentation.

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`modelValue`		`null \| string \| JSONContent \| JSONContent[]`
`contentType`	`'json'`	`"markdown" \| "json" \| "html"` The content type the content is provided as.
`starterKit`	`{ headings: { levels: [1, 2, 3, 4] }, link: { openOnClick: false }, dropcursor: { color: 'var(--ui-primary)', width: 2 } }`	`Partial<StarterKitOptions>` The starter kit options to configure the editor. https://tiptap.dev/docs/editor/extensions/functionality/starterkit
`placeholder`		`string \| Partial<PlaceholderOptions>` The placeholder text to show in empty paragraphs. `{ showOnlyWhenEditable: false, showOnlyCurrent: true }` Can be a string or PlaceholderOptions from `@tiptap/extension-placeholder`. https://tiptap.dev/docs/editor/extensions/functionality/placeholder
`markdown`		`Partial<MarkdownExtensionOptions>` The markdown extension options to configure markdown parsing and serialization. https://tiptap.dev/docs/editor/extensions/functionality/markdown
`image`		`Partial<ImageOptions>` The image extension options to configure image handling. https://tiptap.dev/docs/editor/extensions/nodes/image
`mention`		`Partial<MentionOptions<any, MentionNodeAttrs>>` The mention extension options to configure mention handling. https://tiptap.dev/docs/editor/extensions/nodes/mention
`handlers`		`EditorCustomHandlers` Custom item handlers to override or extend the default handlers. These handlers are provided to all child components (toolbar, suggestion menu, etc.).
`extensions`		`Extensions` The extensions to use
`injectCSS`		`boolean` Whether to inject base CSS styles
`injectNonce`		`string` A nonce to use for CSP while injecting styles
`autofocus`		`null \| number \| false \| true \| "start" \| "end" \| "all"` The editor's initial focus position
`editable`		`boolean` Whether the editor is editable
`textDirection`		`"ltr" \| "rtl" \| "auto"` The default text direction for all content in the editor. When set to 'ltr' or 'rtl', all nodes will have the corresponding dir attribute. When set to 'auto', the dir attribute will be set based on content detection. When undefined, no dir attribute will be added.
`editorProps`		`EditorProps<any>` The editor's props
`parseOptions`		`ParseOptions`
`coreExtensionOptions`		`{ clipboardTextSerializer?: { blockSeparator?: string \| undefined; } \| undefined; delete?: { async?: boolean \| undefined; filterTransaction?: ((transaction: Transaction) => boolean) \| undefined; } \| undefined; }` The editor's core extension options
`enableInputRules`		`false \| true \| (string \| AnyExtension)[]` Whether to enable input rules behavior
`enablePasteRules`		`false \| true \| (string \| AnyExtension)[]` Whether to enable paste rules behavior
`enableCoreExtensions`		`boolean \| Partial<Record<"editable" \| "textDirection" \| "clipboardTextSerializer" \| "commands" \| "focusEvents" \| "keymap" \| "tabindex" \| "drop" \| "paste" \| "delete", false>>` Determines whether core extensions are enabled. If set to `false`, all core extensions will be disabled. To disable specific core extensions, provide an object where the keys are the extension names and the values are `false`. Extensions not listed in the object will remain enabled.
`enableContentCheck`		`boolean` If `true`, the editor will check the content for errors on initialization. Emitting the `contentError` event if the content is invalid. Which can be used to show a warning or error message to the user.
`emitContentError`		`boolean` If `true`, the editor will emit the `contentError` event if invalid content is encountered but `enableContentCheck` is `false`. This lets you preserve the invalid editor content while still showing a warning or error message to the user.
`onBeforeCreate`		`(props: { editor: Editor; }): void` Called before the editor is constructed.
`onCreate`		`(props: { editor: Editor; }): void` Called after the editor is constructed.
`onMount`		`(props: { editor: Editor; }): void` Called when the editor is mounted.
`onUnmount`		`(props: { editor: Editor; }): void` Called when the editor is unmounted.
`onContentError`		`(props: { editor: Editor; error: Error; disableCollaboration: () => void; }): void` Called when the editor encounters an error while parsing the content. Only enabled if `enableContentCheck` is `true`.
`onUpdate`		`(props: { editor: Editor; transaction: Transaction; appendedTransactions: Transaction[]; }): void` Called when the editor's content is updated.
`onSelectionUpdate`		`(props: { editor: Editor; transaction: Transaction; }): void` Called when the editor's selection is updated.
`onTransaction`		`(props: { editor: Editor; transaction: Transaction; appendedTransactions: Transaction[]; }): void` Called after a transaction is applied to the editor.
`onFocus`		`(props: { editor: Editor; event: FocusEvent; transaction: Transaction; }): void` Called on focus events.
`onBlur`		`(props: { editor: Editor; event: FocusEvent; transaction: Transaction; }): void` Called on blur events.
`onDestroy`		`(props: void): void` Called when the editor is destroyed.
`onPaste`		`(e: ClipboardEvent, slice: Slice): void` Called when content is pasted into the editor.
`onDrop`		`(e: DragEvent, slice: Slice, moved: boolean): void` Called when content is dropped into the editor.
`onDelete`		`(props: { editor: Editor; deletedRange: Range; newRange: Range; transaction: Transaction; combinedTransform: Transform; partial: boolean; from: number; to: number; } & ({ ...; } \| { ...; })): void` Called when content is deleted from the editor.
`ui`		`{ root?: ClassNameValue; content?: ClassNameValue; base?: ClassNameValue; }`

Slots

Slot	Type
`default`	`{ editor: Editor; handlers: EditorHandlers<EditorCustomHandlers>; }`

Emits

Event	Type
`update:modelValue`	`[value: Content]`

Expose

When accessing the component via a template ref, you can use the following:

Name	Type
`editor`	`Ref<Editor \| undefined>`

The exposed editor instance is the TipTap Editor API. Check the TipTap documentation for all available methods and properties.

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    editor: {
      slots: {
        root: '',
        content: 'relative size-full flex-1',
        base: [
          'w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20',
          '[&_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none',
          '[&_li_.is-empty]:before:content-none',
          '[&_p]:leading-7',
          '[&_a]:text-primary [&_a]:border-b [&_a]:border-transparent [&_a]:hover:border-primary [&_a]:font-medium',
          '[&_a]:transition-colors',
          '[&_.mention]:text-primary [&_.mention]:font-medium',
          '[&_:is(h1,h2,h3,h4)]:text-highlighted [&_:is(h1,h2,h3,h4)]:font-bold',
          '[&_h1]:text-3xl',
          '[&_h2]:text-2xl',
          '[&_h3]:text-xl',
          '[&_h4]:text-lg',
          '[&_blockquote]:border-s-4 [&_blockquote]:border-accented [&_blockquote]:ps-4 [&_blockquote]:italic',
          '[&_[data-type=horizontalRule]]:my-8 [&_[data-type=horizontalRule]]:py-2',
          '[&_hr]:border-t [&_hr]:border-default',
          '[&_pre]:text-sm/6 [&_pre]:border [&_pre]:border-muted [&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:px-4 [&_pre]:py-3 [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:overflow-x-auto',
          '[&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:font-inherit [&_pre_code]:rounded-none [&_pre_code]:inline [&_pre_code]:border-0 [&_pre_code]:bg-transparent',
          '[&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono [&_code]:font-medium [&_code]:rounded-md [&_code]:inline-block [&_code]:border [&_code]:border-muted [&_code]:text-highlighted [&_code]:bg-muted',
          '[&_:is(ul,ol)]:ps-6',
          '[&_ul]:list-disc [&_ul]:marker:text-(--ui-border-accented)',
          '[&_ol]:list-decimal [&_ol]:marker:text-muted',
          '[&_li]:my-1.5 [&_li]:ps-1.5',
          '[&_img]:rounded-md [&_img]:block [&_img]:max-w-full [&_img.ProseMirror-selectednode]:outline-2 [&_img.ProseMirror-selectednode]:outline-primary',
          '[&_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20'
        ]
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        editor: {
          slots: {
            root: '',
            content: 'relative size-full flex-1',
            base: [
              'w-full outline-none *:my-5 *:first:mt-0 *:last:mb-0 sm:px-8 selection:bg-primary/20',
              '[&_:is(p,h1,h2,h3,h4).is-empty]:before:content-[attr(data-placeholder)] [&_:is(p,h1,h2,h3,h4).is-empty]:before:text-dimmed [&_:is(p,h1,h2,h3,h4).is-empty]:before:float-left [&_:is(p,h1,h2,h3,h4).is-empty]:before:h-0 [&_:is(p,h1,h2,h3,h4).is-empty]:before:pointer-events-none',
              '[&_li_.is-empty]:before:content-none',
              '[&_p]:leading-7',
              '[&_a]:text-primary [&_a]:border-b [&_a]:border-transparent [&_a]:hover:border-primary [&_a]:font-medium',
              '[&_a]:transition-colors',
              '[&_.mention]:text-primary [&_.mention]:font-medium',
              '[&_:is(h1,h2,h3,h4)]:text-highlighted [&_:is(h1,h2,h3,h4)]:font-bold',
              '[&_h1]:text-3xl',
              '[&_h2]:text-2xl',
              '[&_h3]:text-xl',
              '[&_h4]:text-lg',
              '[&_blockquote]:border-s-4 [&_blockquote]:border-accented [&_blockquote]:ps-4 [&_blockquote]:italic',
              '[&_[data-type=horizontalRule]]:my-8 [&_[data-type=horizontalRule]]:py-2',
              '[&_hr]:border-t [&_hr]:border-default',
              '[&_pre]:text-sm/6 [&_pre]:border [&_pre]:border-muted [&_pre]:bg-muted [&_pre]:rounded-md [&_pre]:px-4 [&_pre]:py-3 [&_pre]:whitespace-pre-wrap [&_pre]:break-words [&_pre]:overflow-x-auto',
              '[&_pre_code]:p-0 [&_pre_code]:text-inherit [&_pre_code]:font-inherit [&_pre_code]:rounded-none [&_pre_code]:inline [&_pre_code]:border-0 [&_pre_code]:bg-transparent',
              '[&_code]:px-1.5 [&_code]:py-0.5 [&_code]:text-sm [&_code]:font-mono [&_code]:font-medium [&_code]:rounded-md [&_code]:inline-block [&_code]:border [&_code]:border-muted [&_code]:text-highlighted [&_code]:bg-muted',
              '[&_:is(ul,ol)]:ps-6',
              '[&_ul]:list-disc [&_ul]:marker:text-(--ui-border-accented)',
              '[&_ol]:list-decimal [&_ol]:marker:text-muted',
              '[&_li]:my-1.5 [&_li]:ps-1.5',
              '[&_img]:rounded-md [&_img]:block [&_img]:max-w-full [&_img.ProseMirror-selectednode]:outline-2 [&_img.ProseMirror-selectednode]:outline-primary',
              '[&_.ProseMirror-selectednode:not(img):not(pre):not([data-node-view-wrapper])]:bg-primary/20'
            ]
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

ChatPromptSubmit

A Button for submitting chat prompts with automatic status handling.

EditorDragHandle

A draggable handle for reordering and selecting blocks in the editor.