Logo

Midnight Owl UI

Text Editor

Stable v1.0.2

A rich text editor built on Tiptap/ProseMirror, with an array-driven toolbar and the same label, size, and validation states as the rest of the form components.

Interactive Playground

Experiment with sizing, the toolbar, and validation states.

Configuration
Top
Geometry
Small (sm)
Character Limit
States
0 / 200
Live Source Code
<TextEditor
  v-model="content"
  id="description-editor"
  label="Description"
  placeholder="Write something..."
  :maxLength="200"
  showCount
/>

Implementation Examples

1. Minimal Toolbar Subset

Pass a plain array — :toolbar="['bold', 'italic', 'link']" — for lightweight fields that only need a few actions. Pass [] to hide the toolbar entirely. 

<TextEditor
  v-model="comment"
  label="Comment"
  :toolbar="['bold', 'italic', 'link']"
  size="xs"
/>

2. Full Rich Text

The default toolbar (DEFAULT_TEXT_EDITOR_TOOLBAR) covers headings, marks, alignment, lists, blockquotes, code blocks, links, and undo/redo — backed by Tiptap's ProseMirror schema, which patches the DOM directly instead of diffing a virtual DOM, so typing stays smooth even with the full toolbar enabled. 

<TextEditor
  v-model="content"
  label="Release Notes"
/>

API Reference

Props

Name
Type / Signature
Default
Description
v-model
string
""
The bound HTML content of the editor.
id
string
auto-generated
DOM id applied to the editor content area and linked to the label. Falls back to a unique generated id when omitted.
label
string
undefined
Top or left-aligned input label.
labelPosition
"top" | "left"
"top"
Alignment of the label relative to the editor.
placeholder
string
undefined
Text shown in the first paragraph when the editor is empty.
size
"xs" | "sm" | "md" | "lg" | "xl"
"sm"
Dimensional size affecting toolbar button size, content padding, and font size.
toolbar
ToolbarItem[]
DEFAULT_TEXT_EDITOR_TOOLBAR
Which toolbar buttons to render, in order. Pass a subset (e.g. ["bold", "italic", "link"]) for a lightweight field, "|" to insert a group separator, or [] to hide the toolbar entirely. Import DEFAULT_TEXT_EDITOR_TOOLBAR to extend the built-in set instead of retyping it.
minHeight
string
undefined
Overrides the content area min-height (a CSS length). Falls back to a size-based default.
maxLength
number
undefined
Maximum character count, counted on the plain text (HTML tags excluded). Typing past the limit is blocked, same as maxLength on Textarea.
showCount
boolean
false
Displays a character counter at the bottom right. Automatically enabled if maxLength is provided.
disabled
boolean
false
Disables editing and grays out the component.
required
boolean
false
Appends a red asterisk to the label.
error
string | boolean | string[]
false
Applies red error styling and displays error message(s) below.

Available Toolbar Items

Key(s)
Description
heading1 … heading6
Toggle block heading levels 1 through 6.
bold, italic, underline, strike
Core inline text marks.
highlight
Wraps the selection in a <mark> highlight.
code
Toggles inline code formatting.
alignLeft, alignCenter, alignRight, alignJustify
Sets text-align on the current paragraph or heading.
bulletList, orderedList
Toggle list types.
blockquote, codeBlock
Toggle block-level quote and fenced code block.
link
Opens a popover to add, edit, or remove a link on the selection.
horizontalRule
Inserts a horizontal rule at the cursor.
clearFormat
Strips marks and node formatting from the selection.
undo, redo
History navigation, disabled automatically when unavailable.
"|"
Not a button — renders a vertical divider between groups.

Events

Event Name
Payload Signature
Description
@input
(value: string)
Fired with the updated HTML on every content change.
@change
(value: string)
Fired with the final HTML when the editor loses focus.
@focus
()
Fired when the editor receives focus.
@blur
()
Fired when the editor loses focus.