custom-element

@burger-editor/custom-element

BurgerEditor用のWeb Componentsを提供するパッケージです。TipTapエディタを統合したWYSIWYGエディタカスタム要素を含みます。

クイックスタート

インストール

yarn add @burger-editor/custom-element

基本的な使い方

1. カスタム要素の定義

import { defineBgeWysiwygEditorElement } from '@burger-editor/custom-element';

// カスタム要素を定義（通常はアプリケーション起動時に1回実行）
defineBgeWysiwygEditorElement();

2. HTMLでの使用

<bge-wysiwyg-editor
	name="my-editor"
	item-name="wysiwyg"
	commands="bold,italic,underline,link,blockquote,bullet-list,ordered-list,h3,h4,h5,h6">
</bge-wysiwyg-editor>

3. TypeScriptでの使用

import { BgeWysiwygEditorElement } from '@burger-editor/custom-element';

const editor = document.querySelector('bge-wysiwyg-editor') as BgeWysiwygEditorElement;

// 内容を取得
console.log(editor.value);

// 内容を設定
editor.innerHTML = '<p>新しい内容</p>';

// TipTapエディタに直接アクセス
editor.editor.chain().focus().toggleBold().run();

ドキュメント

基本ドキュメント

• API Reference - プロパティ、メソッド、属性の詳細仕様
• Custom Events - transactionとbge:structure-changeイベントの仕様

開発者向けドキュメント

• Architecture - 内部構造、設計思想、データフローの説明
• Customization Guide - UI拡張方法とよくある間違い

コントリビュータ向け情報

• Tiptap拡張機能の追加方法 - 新しいコマンドやフォーマットの追加手順

実験的機能

テキスト編集モード

experimental.textOnlyModeを有効化すると、3つのモード（デザインモード/テキスト編集モード/HTMLモード）を切り替えられるようになります。

モード一覧:

• デザインモード ('wysiwyg'): TipTapエディタでリッチテキスト編集
• テキスト編集モード ('text-only'): HTML構造を保持したままテキストのみ編集
• HTMLモード ('html'): HTMLソースコードを直接編集

defineBgeWysiwygEditorElement({
	experimental: {
		textOnlyMode: true,
	},
});

詳細はAPI Referenceを参照してください。

技術スタック

• TipTap - リッチテキストエディタフレームワーク
• Web Components - ブラウザ標準のカスタム要素API

ブラウザサポート

Web Components（Custom Elements v1）をサポートするモダンブラウザで動作します：

• Chrome 54+
• Firefox 63+
• Safari 10.1+
• Edge 79+

開発環境

# パッケージのビルド
yarn build

# テストの実行
yarn test

# Lintの実行
yarn lint

関連パッケージ

• @burger-editor/client - Svelteベースのクライアント側UI
• @burger-editor/core - エディタエンジン
• @burger-editor/css - スタイルシート
• @burger-editor/blocks - ブロック定義

ライセンス

Dual Licensed under MIT OR Apache-2.0