FormSimpleEditorField
SimpleEditorField
リッチテキストエディタフィールドコンポーネント
概要
TipTap ベースのリッチテキストエディタ。ツールバーから書式設定（太字、斜体、取り消し線、コード）、ブロックタイプ（見出し、引用、コードブロック）、リスト形式を選択できる。URL のリンクプレビューにも対応。
Props
| Prop | 型 | 必須 | デフォルト | 説明 |
|---|---|---|---|---|
content | string | — | "" | 初期 HTML コンテンツ |
placeholder | string | — | — | プレースホルダー |
onChange | (html: string) => void | — | — | HTML 変更コールバック |
disabled | boolean | — | false | 編集無効化 |
onResolveOgp | (url: string) => Promise<OgpData> | — | — | URL の OGP 解決 |
OgpData
type OgpData = {
url: string;
title?: string;
description?: string;
image?: string;
siteName?: string;
};ツールバー機能
- インライン書式: 太字、斜体、取り消し線、インラインコード
- ブロックタイプ: 段落、見出し 1〜3、引用、コードブロック
- リスト: 箇条書き（disc/circle/square）、番号付き（1/a/A/i/I）
使用例
import { SimpleEditorField } from "@unitto/ui";
<SimpleEditorField
content="<p>初期テキスト</p>"
placeholder="本文を入力してください..."
onChange={(html) => console.log(html)}
onResolveOgp={async (url) => {
const res = await fetch(`/api/ogp?url=${url}`);
return res.json();
}}
/>