Features

A tour of the MeldEditor editing experience — slash menu, bubble menu, toolbar, tables, images, mentions, columns, and charts.

Slash commands

Type / anywhere in an empty block to open the command menu. It lists text and headings, lists, blockquote, code, table, table-of-contents, image, mention, columns, and chart blocks. The menu is keyboard-navigable (arrows + Enter) and filters as you type.

The demo below is seeded with the basic text and block formatting you can insert from the menu — headings, bullet/ordered/task lists, blockquote, code block, and a horizontal rule. Type / on a new line to try the rest.

You can add, remove, or replace commands with the extraSlashCommands, disableSlashCommands, and overrideSlashCommands props — see Extensions.

Bubble menu

Select inline text to reveal the bubble menu for bold, italic, underline, strikethrough, inline code, and text alignment. It is on by default; hide it with :show-bubble-menu="false".

Toolbar

Set :show-toolbar="true" to render a persistent formatting toolbar above the document. Override its contents with the toolbarItems prop.

Tables

Insert a table from the slash menu. Hovering a table reveals row and column controls for inserting and deleting rows/columns. Table cells support inline formatting and the bubble menu.

Images

Insert an image from the slash menu (or toolbar). The editor calls your onImageUpload callback with the selected File and inserts the returned URL:

async function onImageUpload(file: File): Promise<string> {
  const url = await uploadToStorage(file)
  return url
}

When no callback is provided, the editor falls back to an inline data URL so images still work locally. Inserted images are resizable, support alignment, and have an optional caption.

Mentions

Provide an onMentionSearch callback to enable @ mentions. The extension only loads when the callback is present. The callback receives the current query and returns the candidate list:

async function onMentionSearch(query: string) {
  return await searchPeople(query) // -> { id: string; label: string }[]
}

Columns

Insert a multi-column layout from the slash menu to place blocks side by side. A column block’s controls let you add or remove columns and flatten the layout back to a single column.

Table of contents

The table-of-contents block lists the document’s headings and scrolls to them on click. It stays in sync as you edit headings.

Charts

Insert a chart block from the slash menu. Charts render via @meldui/charts-vue and offer a picker (series vs. slice) plus a configuration dialog for the chart type, data, and title.

Drag handle & block selection

When the editor is editable, each block shows a Notion-style drag handle on hover (a plus button to insert below and a grip to reorder). Click-and-drag across blocks to select multiple blocks at once, then format or delete them together.

Read-only mode

Set :editable="false" to render a document without editing affordances — the drag handle, table controls, resize handles, and interactive task checkboxes are all suppressed.

<template>
  <MeldEditor :editable="false" @created="(e) => e.commands.setContent(doc)" />
</template>