Canvas Editorでページ型の文書編集を描画する

contenteditableではなくcanvasを使う

READMEはCanvas EditorをCanvas/SVGベースのリッチテキストエディタと説明しています。通常のcontenteditableではなく描画層を使い、文書をページとして扱う設計です。ヘッダー、フッター、ページ番号、余白、透かし、背景、目次といったページ指向の機能が機能一覧に含まれます。

描画方式は見た目を揃えやすい一方、DOMへ直接入力するエディタと同じ実装方法ではありません。選択範囲、IME、コピー、アクセシビリティ、検索、レスポンシブ表示は対象ブラウザで確認すべき項目です。READMEの機能列挙は対応の手掛かりであり、各言語や入力法の保証ではありません。

編集機能を要件へ分解する

編集機能には元に戻す・やり直し、文字装飾、配置、見出し、リスト、表、画像、リンク、コードブロック、改ページ、LaTeX、日付ピッカー、各種フォームコントロールがあります。コメント、グループ注釈、単語数、目次生成も記載されています。

すべてを一度に採用せず、業務文書で必要な要素を一つずつ試します。表の行追加、画像のサイズ変更、数式の再描画、コメントの保存など、編集前後のドキュメント構造と描画結果を保存します。READMEがAPI全体を公式ドキュメントへ委ねている部分は、利用する版の型定義とサンプルを根拠に実装します。

npmから最小Editorを作る

パッケージは`@hufe921/canvas-editor`としてnpm、pnpm、Yarnから導入できます。Quick StartではEditorクラスを読み込み、canvas-editorのdivと、`main`配列に`value`を持つ文書構造を渡します。例の本文は`Hello, Canvas Editor!`です。

導入試験では空のページへ最小構成を描画し、コンテナの寸法、初期テキスト、編集イベント、破棄処理を確認します。Canvasのサイズが内容に応じて不意に変わらないよう、アプリ側のレイアウトを固定して試験します。API名や文書スキーマはREADMEの例から必要以上に推測しません。

印刷、画像、PDFの出力を比べる

READMEはcanvasから画像またはPDFをレンダリングする印刷とPDFエクスポートを挙げています。ページ余白、改ページ、ヘッダー、フッター、ページ番号、背景が出力に影響するため、画面表示だけでは十分な確認になりません。

検証では同じ文書を画面、画像、PDF、実プリンターの順に出力し、文字の欠落、表の分割、数式、画像解像度、ページ番号を比較します。PDF出力が実験ブランチの機能なのか、公開版のAPIなのかを対象版のドキュメントで確定します。出力が業務要件を満たさない場合は、編集機能が動いても採用範囲を狭めます。

プラグインと実験ブランチ

公式の`canvas-editor-plugin`コレクションがあり、`feature/svg`、`feature/pdf`、`feature/ai`、実験的なCRDTベース共同編集の`feature/CRDT`がREADMEに掲載されています。ブランチ名があることは、mainの安定版へ統合済みであることを意味しません。

共同編集やAI処理が必要な場合は、ブランチのコミット、依存、保存形式、同時編集時の競合処理を別の検証対象にします。プラグインはエディタ本体のライフサイクルや描画状態へ影響するため、機能を追加した後のコピー、Undo、出力も再試験します。公式サイトとDiscussionsは補助資料として読み、未検証の説明を断定にしません。

Node 24と品質チェック

開発にはNode.js 24.13.1以上、pnpmが推奨されています。`pnpm install`と`npm run dev`で開発環境を起動し、`npm run build`はデモ、`npm run lib`は公開ライブラリのビルドです。lint、type:check、Vitest、Cypressの品質確認もREADMEにあります。

変更前後でlintと型チェックを通し、文書操作の単体テストと実ブラウザのE2Eを分けて実行します。MITライセンスの条件はLICENSEで確認し、実験ブランチを採用する場合は版と差分を記録します。描画結果、出力PDF、テストログを保存して初めて、Editorの導入が自分の文書要件に合うか判断できます。

Canvas Editor固有の確認として、`@hufe921/canvas-editor`の最小Editorに本文、表、画像、LaTeXを入れます。canvas表示、画像出力、PDF出力、印刷結果を並べ、改ページ、余白、数式、画像の欠落を調べます。`pnpm install`後のlint、`type:check`、Vitest、Cypressを実行し、実験ブランチの機能はmainの結果と別に記録します。

Canvas Editorの文書検証では、日本語入力、長い行、複数ページ、選択範囲、UndoとRedoも確認します。表示とPDFが一致しない項目は、利用者が読む画面と印刷物のどちらを正とするかを決めて記録します。保存した文書構造が再読込後に同じ表示になるかも確認します。IME変換中の文字欠落、改ページ直前の表、画像の配置ずれも記録します。

Canvas Editorでページ型の文書編集を描画するの採用判断では、対象版のREADMEにある入力と出力を固定し、担当者が同じ手順を再実行できる状態で結果を残します。動いたという記録だけでなく、失敗条件、戻し方、ライセンス確認の結果も対象プロジェクトに結び付けて管理します。

編集部の結論

Canvas Editorは、ブラウザ上でページ型の文書を編集し、印刷やPDF出力まで扱いたい開発者向けです。まず最小のEditorへ本文、表、画像、数式を入れ、canvas表示とPDF・印刷結果を比較してください。実験的なCRDTやPDFブランチを本番前提にせず、対象版の型チェック、Vitest、Cypressまで通してから機能範囲を決めます。

公式情報源

1. Official documentation
2. Official README
3. Project repository