Editor

Rich text: a token-styled toolbar around a Tiptap editor

A rich-text surface for the cases a BlessTextarea can't cover — headings, lists, code, quotes. The library ships the frame: a toolbar in the system's style and content typography from tokens. The engine is Tiptap, which you install and configure yourself; the component only needs the editor from useEditor() and renders your <EditorContent> in its default slot.

Reach for it only when users must produce formatted text. For comments, notes and messages a textarea is lighter and easier to store.

tools is the toolbar, in order, with "|" as a separator; the #toolbar slot ({ editor }) replaces it entirely for custom buttons. The toolbar is a single tab stop — ← / → move between tools, Home / End jump — and each tool reports aria-pressed; an applied format fills with the accent, like a pressed Toggle. Inside the writing area, Tiptap's own shortcuts apply (⌘B, ⌘I, …). minHeight sets the writing area; its typography reads the --bless-* tokens.

Basic

0 chars

<script setup lang="ts">
import { BlessEditor } from "blessing-ui";
import { EditorContent, useEditor } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";

const editor = useEditor({
  extensions: [StarterKit],
  editorProps: { attributes: { "aria-label": "Script notes" } },
  content:
    "<h2>第3話 脚本メモ</h2><p>加藤恵は<strong>メインヒロイン</strong>。<em>フラグの立たない</em>出会いから始まる。</p><ul><li>冒頭：坂道</li><li>帽子が飛ぶ</li></ul>",
});
</script>

<template>
  <div style="max-width: 640px">
    <BlessEditor :editor>
      <EditorContent :editor />
      <template #footer>{{ editor?.getText().length ?? 0 }} chars</template>
    </BlessEditor>
  </div>
</template>

Install

Tiptap is an optional peer — the library only types against it and never imports it.

pnpm add @tiptap/vue-3 @tiptap/starter-kit @tiptap/pm

Usage

import { BlessEditor } from "blessing-ui";

API

Props

Name	Type	Default	Description
editor*	BlessEditorLike | null	—	the Tiptap editor from useEditor(); the content goes in the default slot as <EditorContent :editor />
tools	BlessEditorTool[]	[ "bold", "italic", "strike", "code", "|", "h1", "h2", "|", "bulletList", "orderedList", "blockquote", "codeBlock", "hr", "|", "undo", "redo", ]
label	string	"Formatting"
disabled	boolean	—
minHeight	string	"160px"	min height of the writing area

Slots

Name	Scope	Description
toolbar	{ editor: BlessEditorLike | null | undefined; }
default	—
footer	{ editor: BlessEditorLike | null | undefined; }