エディタキット

@hypermedia-components/editor-kit は、Hypermedia Components の上にビジュアルビルダーを構築するためのエディタエンジンです: 選択モデル、undo 可能なコマンドプリミティブ、シリアライザ、pointer-events ベースのドラッグ&ドロップコントローラ、オーバーレイ層を提供します。

このキットは意図的にドメインロジックを含みません — パレットも、データバインディングも、永続化もありません。それらはビルダーアプリケーションの持ち分です。キットが所有するのは hc マークアップを安全に編集することだけです。

インストール

npm install @hypermedia-components/editor-kit

ランタイム依存はゼロです。コアのマニフェストは注入するもので、バンドルされません — component 注釈やマニフェスト駆動の動作が欲しい場所で渡します:

import { createEditor } from '@hypermedia-components/editor-kit';
import manifest from '@hypermedia-components/core/manifest.json' with { type: 'json' };

const editor = createEditor({
  root: document.querySelector('#canvas'),
  manifest,
});

設計

4 つの決定が API 全体を形作っています:

キャンバスの DOM がドキュメントモデル。 並行 IR はありません。 Hypermedia Components は状態をすべて HTML 属性に持つため、編集中のマークアップが生成物そのものです — コンパイル工程も、第二の source of truth もありません。
6 つのプリミティブで編集語彙が閉じる: setAttribute、 removeAttribute、setText、insertNode、removeNode、 moveNode。キャンバスの変更はすべてこのいずれかで、各コマンドが自分の逆操作を捕捉します — undo/redo にスナップショットは不要です。
エディタ用の足場は名前空間で分離。 data-hc-editor- 接頭辞の属性と data-hc-editor-only 付き要素はエディタ内部のものとして、シリアライザが剥がします — 生成物に漏れることはありません。
JSON 射影は別エンコーディングであって第二のモデルではない。 fromJson(toJson(el)) は要素を再現します(文書化された正規化 — 空白のみのテキストノードとコメントの除去、属性順のソート — を除く)。どちらの形で保存しても、同じドキュメントです。

クイック例

import {
  createEditor,
  setAttribute,
  insertNode,
  fromJson,
} from '@hypermedia-components/editor-kit';

const editor = createEditor({ root: canvas, manifest });

// すべての変更はスタックを通す…
const button = editor.root.querySelector('.hc-button');
editor.stack.apply(setAttribute(button, 'data-variant', 'primary'));

// …ので undo/redo はそのまま動きます。
editor.stack.undo();
editor.stack.redo();

// 複数ステップの編集を 1 つの undo 単位に:
editor.stack.transact(() => {
  const card = fromJson({ tag: 'div', attrs: { class: 'hc-card' }, children: [] });
  editor.stack.apply(insertNode(editor.root, card, 0));
  editor.stack.apply(setAttribute(card, 'data-variant', 'muted'));
});

// 生成物 HTML(足場は除去済み)と JSON 射影:
const html = editor.serialize();
const json = editor.toJson();

責務の分担

関心事	所有者
選択、undo/redo、シリアライズ、ドラッグ&ドロップ、オーバーレイ	editor-kit
どのコンポーネントがあるか、variant/size、テーマ可能な変数	コアのマニフェスト(注入)
パレット、データバインディング、永続化、エクスポートターゲット(Thymeleaf 等)	あなたのビルダー

プレーン HTML 以外へのエクスポートは serialize() / toJson() の下流で行います — 中立の data-* バインディング注釈をテンプレート言語の属性へ変換する処理は、このパッケージには含まれません。

API — コマンド、選択、シリアライザ、ドラッグ&ドロップ、オーバーレイ。
マニフェスト駆動インスペクタ — attributeValues からプロパティパネルを作る(ライブデモ)。

エディタキット

インストール

設計

クイック例

責務の分担

次へ