@open-press/core
Text
スタイルを持たない編集可能なテキストオブジェクト。プレゼンテーション、カード、カバー、キャプション、またはカスタムコンポーネントに安定したコメント/インライン編集のアンカーが必要で、新しいスタイル API を発明したくない場合に使用します。
<Text> は、リテラルテキストをシステムのマークアップ、インライン編集、およびコメント付けをサポートする ObjectEntity としてカプセル化するための、スタイルを持たないラッパーを提供します。
設計契約: このコンポーネントは、タイポグラフィ属性(フォント、サイズ、色など)を一切提供しません。視覚的な表現は、className および外部の CSS 式を通じて実装する必要があります。その唯一の目的は、安定したオブジェクト識別子を構築することです。
編集ソース情報がマークされた DOM ノードを作成します。AST 位置の自動および手動マッピングをサポートします。
import { Text } from "@open-press/core"; <Text
as?="span" | "p" | "h1" | ...
label="title"
box?={{ x: 100, y: 360, w: 1155 }}
source?={{ path, kind, source }}
metadata?={{ ... }}
className?="..."
>
字面上の編集可能なテキスト
</Text> プロパティ (Props)
| Name | Type | Default | Description |
|---|---|---|---|
label required | string | System UI、agent、comment、inline editing anchor が使う安定したローカル label です。`title`、`caption`、`metric-a-value` のような意味のある値を使います。style token ではありません。 | |
as | keyof HTMLElementTagNameMap | "span" | 出力される DOM 要素のタグを指定します。セマンティックなマークアップ(例: `h1`, `p`, `figcaption`)を優先して検討する必要があります。 |
box | FixedBox | 現在の page geometry における固定 layout 座標。Slide template で source deck の位置とサイズに合わせるために使えます。 | |
source | EditableSourceRef | ソースマッピング座標の定義。子要素が静的なリテラルコンテンツではない場合(変数の参照など)、インライン編集をサポートするためにこれを手動で提供する必要があります。 | |
metadata | Record<string, string | number | boolean | null> | オブジェクトに付随する構造化情報。セマンティックデータ(例: `{ role: "kicker" }`)のみを受け入れ、スタイル値の入力は禁止されています。 | |
...rest | HTMLAttributes<HTMLElement> | `className` を含む、基盤となる DOM ノードにパススルーされる標準 HTML 属性。 |
例:暗黙的なソースバインディング (リテラルテキスト)
<Text as="h1" label="title" className="slide-title">
Fixed canvas workflow
</Text>システムは SSR コンパイル中に自動的にファイル座標を注入し、編集ツールとコメントをサポートさせます。
例:明示的なソースバインディング (動的変数)
<Text
as="h1"
label="title"
source={{
path: "press/slide/press.tsx",
kind: "tsx-text",
source: { line: 1, column: 16, endLine: 1, endColumn: 31 },
}}
>
{dynamicTitle}
</Text> <Text> の視覚表現は className と theme CSS で指定します。Font family、size、line height、color は CSS 側に置きます。編集可能な文字は JSX children に置き、title や description のような custom wrapper props に隠さないでください。
ソースバインディングの動作
- リテラルノード (Literal Node):
@open-press/coreからインポートされ、内部が純粋なテキストのみの<Text>インスタンス。エンジンは AST のトラバース中にEditableSourceRefを自動的に注入します。 - 式ノード (Expression Node):変数、関数呼び出し、または配列の map によって生成されるコンテンツに依存するノード。自動マッピング機能を持たないため、開発者が明示的に
sourceプロパティを渡すことで編集機能のロックを解除する必要があります。 - 明示的宣言の優先:開発者が手動で
sourceプロパティを提供した場合、エンジンは自動計算メカニズムをスキップしてその値を直接採用します。