syncfusion-react-blockeditor

React の Syncfusion React Block Editor

コンポーネントの概要

Syncfusion React BlockEditorComponent は、モダンなブロックアーキテクチャを使用してコンテンツを作成、編集、書式設定できる、強力なブロックベースのリッチテキストエディターです。コンテンツの各要素（段落、見出し、リスト、テーブル、コードスニペット）は、それぞれ独立して管理できるブロックです。

主な機能

BlockEditorComponent には、次の機能があります。

• ブロックベースのアーキテクチャ - コンテンツを個別に並べ替え可能なブロックとして構成
• 組み込みブロックタイプ - 段落、見出し、リスト、テーブル、コード、コールアウト、引用、折りたたみ可能なセクション
• 直感的なメニュー - スラッシュコマンド、コンテキストメニュー、インラインツールバー
• ドラッグ＆ドロップ - 視覚的なハンドルを使ってブロックを簡単に並べ替え
• コンテンツのエクスポート - JSON、HTML、プレーンテキストとしてエクスポート
• アクセシビリティ - キーボードナビゲーションとスクリーンリーダーをサポートする WCAG 2.1 準拠
• カスタマイズ - カスタムスタイル、テーマ、RTL サポート、グローバリゼーション
• 共同編集 - Yjs によるリアルタイムの複数ユーザー編集に対応し、ユーザーのプレゼンスとリモートカーソル、ドキュメントのバージョン履歴、スナップショット管理を提供

ドキュメントのナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• インストールと npm パッケージのセットアップ
• 基本的なコンポーネントの実装
• CSS のインポートとテーマの設定
• 最初のブロックエディターの作成
• ブロックを使った初期コンテンツの設定

組み込みブロックタイプ

📄 参照先： references/built-in-blocks.md

• ブロックタイプのリファレンス（Paragraph、Heading、List、Table、Code、Quote、Callout）
• ネストされたブロックタイプ（CollapsibleHeading、CollapsibleParagraph）
• ブロックのインデントと CSS クラスのスタイル設定
• コンテンツの設定とプロパティ

メニューとコマンド

📄 参照先： references/block-editor-menus.md

• スラッシュコマンドメニューのカスタマイズ
• Table と Link のオプションを含むコンテキストメニューの設定
• Transform、コード、リンク、色をサポートするインラインツールバーの設定
• ブロックアクションメニューのカスタマイズとツールチップ
• メニューイベントとフィルタリング

ドラッグ＆ドロップとコンテンツ管理

📄 参照先： references/drag-drop-and-content.md

• ドラッグ＆ドロップによるブロックの並べ替え（enableDragAndDrop）
• コンテンツの挿入とネスト
• ドラッグイベント（blockDragStart、blockDragging、blockDropped）
• プログラムによるブロックの移動

メンションとラベル

📄 参照先： references/mentions-and-labels.md

• @mention 機能のための users プロパティと UserModel インターフェイス
• ラベル機能のための labelSettings プロパティと LabelItemModel インターフェイス
• インラインコンテンツの ContentType.Mention / ContentType.Label
• IMentionContentSettings / ILabelContentSettings

メソッドと API

📄 参照先： references/methods-and-api.md

• ブロック管理メソッド（追加、削除、更新、移動）
• 選択とカーソルの制御
• データのエクスポート／インポート（JSON、HTML）
• コンテンツの書式設定とレンダリング

スタイル設定と外観

📄 参照先： references/styling-and-appearance.md

• CSS テーマ設定とインポート
• --sf CSS 変数および Block Editor の CSS クラス／ID を使ったテーマのカスタマイズ
• カスタム CSS クラスを使ったブロックのスタイル設定
• タイポグラフィと書式設定のオプション
• ダークモードとレスポンシブデザイン
• Syncfusion Theme Studio を使用したテーマの完全なカスタマイズ

高度な機能

📄 参照先： references/advanced-features.md

• ペースト時のクリーンアップとコンテンツのサニタイズ
• 元に戻す／やり直し機能
• キーボードショートカットのカスタマイズ
• 読み取り専用モードの設定
• XSS 保護と HTML のサニタイズ
• RTL サポートと国際化

共同編集

📄 参照: references/collaborative-editing.md

• クイックスタートガイド：y-websocket と WebSocket サーバーを使用したリアルタイム共同編集の6ステップ設定
• Vite React ブロックエディターのセットアップ、Yjs の依存関係のインストール、ポート1234での WebSocket サーバーの作成
• 共有 Yjs ドキュメント、アダプター、プロバイダーを含む collaboration.ts 設定ファイルの作成
• Yjs を利用したリアルタイム共同編集（CRDT ベースの同期と競合解決）
• Collaboration モジュールと VersionHistory モジュールの注入
• collaborationSettings プロパティ（provider、adapter、enableAwareness、versionHistory）
• Yjs プロバイダーの選択（y-websocket、y-webrtc、y-indexeddb、Hocuspocus、Liveblocks、PartyKit）
• ユーザーのプレゼンス、リモートカーソル、テキスト選択のオーバーレイ（enableAwareness）
• users と currentUserId による現在のユーザーの設定
• URL ハッシュベースのルーム管理によるルーム単位の共同編集
• バージョン履歴：スナップショットの作成、一覧表示、名前変更、復元、比較、エクスポート、インポート
• IVersionStorage インターフェイスと IndexedDBVersionStorage を使用したカスタムスナップショットストレージの実装
• バージョン履歴イベント：snapshotCreated、snapshotRestored

アクセシビリティ

📄 参照: references/accessibility.md

• WCAG 2.1 への準拠
• キーボードナビゲーションのパターン
• スクリーンリーダーのサポートと ARIA 属性
• フォーカス管理
• 色のコントラストと視覚的なインジケーター

クイックスタートの例

import { BlockEditorComponent } from '@syncfusion/ej2-react-blockeditor';
import { BlockModel, ContentType } from '@syncfusion/ej2-react-blockeditor';
import '@syncfusion/ej2-react-blockeditor/styles/material.css';

function App() {
  // Define initial blocks
  const blocksData: BlockModel[] = [
    {
      id: 'block-1',
      blockType: 'Heading',
      properties: { level: 1 },
      content: [
        {
          contentType: ContentType.Text,
          content: 'Welcome to Block Editor'
        }
      ]
    },
    {
      id: 'block-2',
      blockType: 'Paragraph',
      content: [
        {
          contentType: ContentType.Text,
          content: 'This is your first paragraph. Click the "+" button to add more blocks.'
        }
      ]
    }
  ];

  return (
    <BlockEditorComponent
      id="block-editor"
      blocks={blocksData}
    />
  );
}

export default App;

よく使われるパターン

1. プログラムでブロックを追加する

const editorRef = React.useRef<BlockEditorComponent>(null);

const addNewBlock = () => {
  const newBlock: BlockModel = {
    blockType: 'Paragraph',
    content: [
      {
        contentType: ContentType.Text,
        content: 'New paragraph block'
      }
    ]
  };
  
  editorRef.current?.addBlock(newBlock);
};

2. メニュー項目の選択を処理する

const commandMenuSettings = {
  itemSelect: (args) => {
    console.log('Selected command:', args.command.label, args.command.id);
    // Handle custom actions based on selected command
  }
};

3. コンテンツを JSON としてエクスポートする

const exportContent = () => {
  const jsonContent = editorRef.current?.getDataAsJson();
  console.log('Exported content:', jsonContent);
};

4. 読み取り専用モードを有効にする

<BlockEditorComponent
  id="block-editor"
  blocks={blocksData}
  readOnly={true}
/>

主なプロパティ

⚠️ Props toolbarSettings、containerCssClass、showBlockHandle は BlockEditor API に存在しないため、使用しないでください。

Prop	Type	Description
id	string	コンポーネントの一意の識別子
blocks	BlockModel[]	コンテンツを定義するブロックオブジェクトの配列
readOnly	boolean	読み取り専用モードを有効にします（デフォルト：false）
width	string | number	エディターコンテナーの幅（デフォルト：'100%'）
height	string | number	エディターコンテナーの高さ
commandMenuSettings	CommandMenuSettingsModel	スラッシュコマンド（/）メニューをカスタマイズします
contextMenuSettings	ContextMenuSettingsModel	右クリックのコンテキストメニューを設定します
inlineToolbarSettings	InlineToolbarSettingsModel	インラインテキスト選択ツールバーを設定します
blockActionMenuSettings	BlockActionMenuSettingsModel	ブロックアクション（⋮）メニューを設定します
transformSettings	TransformSettingsModel	ブロックタイプ変換メニューを設定します
imageBlockSettings	ImageBlockSettingsModel	画像のアップロードとレンダリングを設定します
codeBlockSettings	CodeBlockSettingsModel	コードブロックの言語を設定します
pasteCleanupSettings	PasteCleanupSettingsModel	貼り付け時のサニタイズ動作を制御します
users	UserModel[]	@mention 機能と、アバターの色を含む共同編集時のプレゼンスに使用するユーザーリスト
labelSettings	LabelSettingsModel	ラベル機能のラベル項目とトリガー文字を設定します
enableDragAndDrop	boolean	ドラッグ＆ドロップによる並べ替えを有効／無効にします（デフォルト：true）
undoRedoStack	number	元に戻す／やり直す履歴の最大ステップ数
keyConfig	{ [key: string]: string }	カスタムキーボードショートカットのマッピング
locale	string	ローカライズ言語コード（デフォルト：'en-US'）
blockChanged	EmitType<BlockChangedEventArgs>	ブロックの内容が変更されたときに発火します
collaborationSettings	CollaborationSettingsModel	Yjs プロバイダー、アウェアネス、バージョン履歴によるリアルタイム共同編集を設定します
currentUserId	string	共同編集とカーソル識別に使用する現在のユーザーの一意の識別子

一般的なユースケース

コンテンツ管理システム - ブロックベースの編集、カスタムブロックタイプ、コンテンツのエクスポートに対応した CMS を構築します

ドキュメントエディター - 書式設定、テンプレート、バージョン管理に対応した共同編集可能なドキュメントエディターを作成します

ノートアプリ - 階層化、タグ付け、検索機能を備えた個人用ノートアプリを実装します

ブログエディター - ブログ執筆者が豊富な書式設定、メディアの埋め込み、プレビュー機能を使って記事を作成できるようにします

ナレッジベース - ブロックの整理、検索、相互リンクされた参照を備えた社内ドキュメントを構築します

アンケート／フォームビルダー - 条件付きブロックと回答の収集に対応した動的なアンケートを作成します

---