@open-press/core

Text

An unstyled editable text object. Use it when presentations, cards, covers, captions, or custom components need a stable annotation/inline-editing anchor and you don't want to invent new styling APIs.

<Text> provides a wrapper layer without built-in styles, used to encapsulate literal text into an ObjectEntity that supports system markup, inline editing, and commenting.

Design Contract: This component does not provide any typographic properties (like font, size, color). Visual presentation must be implemented via className and external CSS expressions. Its sole purpose is to construct stable object identifiers.

Component Impl

# `<Text>`

Creates a DOM node marked with edit source information. Supports automatic and manual AST position mapping.

import { Text } from "@open-press/core";

<Text
  as?="span" | "p" | "h1" | ...
  objectId="title"
  label="Slide title"
  source?={{ path, kind, objectId, source }}
  metadata?={{ ... }}
  className?="..."
>
  Literal editable text
</Text>

Props

Name	Type	Default	Description
`objectId` required	`string`		Locally unique identifier relative to the current Frame or parent entity. Automatically transformed by the rendering engine into a `text:...` prefix format for internal addressing use.
`label` required	`string`		Text summary label for system interfaces and Agents to read, such as `Slide title`, `Caption`.
`as`	`keyof HTMLElementTagNameMap`	`"span"`	Specifies the output DOM element tag. Semantic markup (like `h1`, `p`, `figcaption`) should be prioritized.
`source`	`EditableSourceRef`		Source mapping coordinate definition. Must be manually provided to support inline editing when children are non-static literal content (like variable references).
`metadata`	`Record<string, string \| number \| boolean \| null>`		Structured information attached to the object. Only accepts semantic data (e.g., `{ role: "kicker" }`); passing style values is forbidden.
`...rest`	`HTMLAttributes<HTMLElement>`		Standard HTML attributes passed through to the underlying DOM node, including `className`.

Example: Implicit Source Binding (Literal Text)

<Text as="h1" objectId="title" label="Slide title" className="slide-title">
  Fixed canvas workflow
</Text>

The system will automatically inject file coordinates during SSR compilation to support editing tools and comments.

Example: Explicit Source Binding (Dynamic Variables)

<Text
  as="h1"
  objectId="title"
  label="Slide title"
  source={{
    path: "press/slide/press.tsx",
    kind: "tsx-text",
    objectId: "title",
    source: { line: 1, column: 16, endLine: 1, endColumn: 31 },
  }}
>
  {dynamicTitle}
</Text>

Source Binding Behavior

Literal Node: An <Text> instance imported from @open-press/core and internally containing only plain text. The engine automatically injects the EditableSourceRef during AST traversal.
Expression Node: Content generated depending on variables, function calls, or array maps lacks automatic mapping capabilities. Developers must explicitly pass the source prop to unlock editing features.
Explicit Declaration Priority: If a developer manually provides the source prop, the engine will adopt that value directly and bypass the automatic calculation mechanism.