@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" | ...
  label="title"
  box?={{ x: 100, y: 360, w: 1155 }}
  source?={{ path, kind, source }}
  metadata?={{ ... }}
  className?="..."
>
  Literal editable text
</Text>

Props

Name	Type	Default	Description
`label` required	`string`		Stable local label used by system interfaces, agents, comments, and inline-editing anchors. Use semantic values such as `title`, `caption`, or `metric-a-value`; it is not a style token.
`as`	`keyof HTMLElementTagNameMap`	`"span"`	Specifies the output DOM element tag. Semantic markup (like `h1`, `p`, `figcaption`) should be prioritized.
`box`	`FixedBox`		Fixed-layout coordinates in the current page geometry. Slide templates can use it to match source deck position and size.
`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" label="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"
  label="title"
  source={{
    path: "press/slide/press.tsx",
    kind: "tsx-text",
    source: { line: 1, column: 16, endLine: 1, endColumn: 31 },
  }}
>
  {dynamicTitle}
</Text>

<Text> visual presentation should come from className and theme CSS: font family, size, line height, and color all belong there. Editable text should stay in JSX children, not inside custom wrapper props such as title or description.

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.