API

Full props, events, slots, and exposed-instance reference for MeldEditor.

Types

interface MentionItem {
  id: string
  label: string
}

interface SlashCommandItem {
  title: string
  description: string
  icon: Component | string
  category?: string
  keywords?: string[]
  command: (editor: Editor) => void
}

interface ToolbarItem {
  key: string
  icon: Component
  label: string
  action: (editor: Editor) => void
  isActive?: (editor: Editor) => boolean
  shortcut?: string
  separator?: 'before' | 'after'
}

interface DefaultExtensionOptions {
  taskList?: boolean | Record<string, unknown>
  image?: boolean | Record<string, unknown>
  table?: boolean | Record<string, unknown>
  textAlign?: boolean | Record<string, unknown>
  placeholder?: boolean | string
  slashCommands?: boolean
  mention?: boolean
  chart?: boolean
  columns?: boolean
}

See Extensions for the full CustomComponentRegistration shape.

Exposed instance

MeldEditor exposes the live TipTap Editor through a template ref:

<script setup lang="ts">
import { ref } from 'vue'
import { MeldEditor } from '@meldui/editor'

const editorRef = ref<InstanceType<typeof MeldEditor>>()

function save() {
  const json = editorRef.value?.editor?.getJSON()
  const html = editorRef.value?.editor?.getHTML()
  // persist json / html
}
</script>

<template>
  <MeldEditor ref="editorRef" />
</template>

The exposed editor is the standard TipTap instance, so its full commands and API are available (getJSON(), getHTML(), getText(), chain(), setEditable(), and so on). The created event provides the same instance if you prefer to capture it on mount.

Props

Prop	Type	Default	Description
`showToolbar`	`boolean`	`false`	Show the persistent formatting toolbar above the document.
`showBubbleMenu`	`boolean`	`true`	Show the selection bubble menu for inline formatting.
`editable`	`boolean`	`true`	Whether the document can be edited. When false, all editing affordances are suppressed.
`placeholder`	`string`	`Write, type '/' for commands…`	Placeholder text shown in an empty document.
`editorClass`	`string`	`''`	Extra CSS classes applied to the editor's outer container.
`onImageUpload`	`(file: File) => Promise<string>`	-	Called with a selected image file; resolve the uploaded image URL. Falls back to an inline data URL when omitted.
`onMentionSearch`	`(query: string) => Promise<MentionItem[]>`	-	Resolve mention candidates for a query. The mention extension only loads when this is provided.
`customComponents`	`CustomComponentRegistration[]`	-	Register custom Vue components as document block nodes.
`defaultExtensions`	`DefaultExtensionOptions`	-	Opt out of (or configure) individual built-in extensions.
`extraExtensions`	`(Extension \| Mark \| Node)[]`	-	Append additional TipTap extensions to the default set.
`overrideExtensions`	`(Extension \| Mark \| Node)[]`	-	Replace the entire default extension set. Custom components are still appended.
`extraSlashCommands`	`SlashCommandItem[]`	-	Append commands to the slash menu.
`disableSlashCommands`	`string[]`	-	Hide built-in slash commands by title.
`overrideSlashCommands`	`SlashCommandItem[]`	-	Replace the entire slash-command list.
`toolbarItems`	`ToolbarItem[]`	-	Override the toolbar's contents.

Events

Event	Payload	Description
`created`	`editor: Editor`	Fired with the underlying TipTap editor instance. Use it to set initial content.
`update:json`	`json: Record<string, unknown>`	The document JSON, emitted on every change.
`focus`	`event: FocusEvent`	The editor gained focus.
`blur`	`event: FocusEvent`	The editor lost focus.

Slots

Slot	Props	Description
`header`	`{ editor, editable }`	App-level action bar rendered above the toolbar.
`toolbar`	`{ editor, items }`	Replaces the default toolbar. Receives the resolved toolbar items.
`before-content`	`{ editor }`	Rendered just above the editable content area.
`bubble-menu`	`{ editor }`	Replaces the default selection bubble menu.
`after-content`	`{ editor }`	Rendered just below the editable content area.