Text

Rich text component with Tiptap editor support

Required Props: id, text, tagName

Structure

All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.

Properties

Property	Type	Description	Examples
`text`*required	string	HTML Content - supports rich text formatting like <strong>, <em>, <u>, <br>, etc.	`Welcome to PageHubCreate <strong>amazing</strong> websites with <em>ease</em>Get started <u>today</u> and build your <strong>dream</strong> site`+1 more
`tagName`*required	string h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| p \| span \| div \| Textfit	HTML tag, Next Link, or Textfit. When url is set, internal paths may render as Link.	`h1`
`richText`	object	-	-
`textFitMode`	string oneline \| multiline \| box \| boxoneline	AutoTextSize mode when tagName is Textfit. oneline = fill width single line, multiline = fill width with wrapping, box = fill width+height with wrapping, boxoneline = fill width+height single line. Default: `"oneline"`	-
`activeTab`	number	Active tab index for tabbed content patterns	-
`click`	object	-	-
`action`	object	Unified action system. Makes the Text node a link. Use `type: "link"` with an `href` string that encodes destination HTML-style: `https://...` (external), `/relative` (host routing), `ref:<pageId>[/path\|?query\|#hash]` (internal page), `#anchor` (in-page scroll), `mailto:addr?subject=…&body=…` (email), `tel:+15551234` (phone). Optional `target: _self \| _blank` (only honored for url/page hrefs). Other types: copy-to-clipboard ({ text }), download-file ({ url, filename? }). Optional `conversion: { provider, eventName, sendTo?, value?, currency? }` fires a Google Ads / GA4 / Meta conversion (same shape as Button/Link). Example: { "type": "link", "href": "https://example.com", "target": "_blank" }. NEVER use <a> tags in text HTML — use this prop instead.	-
`canDelete`	boolean	- Default: `true`	-
`canEditName`	boolean	Allow renaming in layers (often true)	-
`custom`	object	Editor metadata (displayName, ...)	-
`className`	string	Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.	`flex flex-col gap-space-sm py-space-lg px-container-x md:flex-rowbg-primary text-primary-content rounded-box py-3.5 px-6 font-semibold`
`url`	string	Optional href; page refs resolved at runtime	-
`urlTarget`	string	Link target e.g. _blank	-
`role`	string	-	-
`aria-label`	string	-	-
`aria-hidden`	string	-	-
`aria-describedby`	string	-	-
`aria-live`	string polite \| assertive \| off	-	-
`background`	object	-	-
`root`	object	-	-
`handlers`	object	Custom JS event handlers. Record<string, string> mapping a React event name (onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, …; must match /^on[A-Z]/) to a JS code string evaluated as a function body with `event` in scope. Runs after any `action` on the same event. Execution is suppressed in the editor. Static export emits each entry as a native HTML event attribute (onclick="…"). Event keys in `attrs` are ignored by React — put them here instead.	-

Examples

Company Logo Text

A company logo displayed as text in the header

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>{{company.name}}</p>",
  "tagName": "h1",
  "className": "text-2xl font-bold text-primary"
}

Hero Title

A large hero title with responsive sizing

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>Welcome to {{company.name}}</p>",
  "tagName": "h1",
  "className": "text-5xl font-bold text-center md:text-6xl"
}

Hero Subtitle

A subtitle with constrained width for hero sections

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>Professional {{company.type}} services in {{company.location}}</p>",
  "tagName": "p",
  "className": "text-lg text-center max-w-2xl"
}

Footer Copyright Text

Small footer text with alternate styling

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>&copy; {{year}} {{company.name}} All rights reserved.</p>",
  "tagName": "p",
  "className": "text-sm text-center text-base-content"
}

Section Heading

A section heading with proper hierarchy and spacing

{
  "canDelete": true,
  "canEditName": true,
  "text": "<p>Our Services</p>",
  "tagName": "h2",
  "className": "text-3xl font-bold text-center mb-6 text-base-content md:text-4xl"
}