Rich Text

Rich-text fields accept and return HTML strings. intratool uses TipTap as its editor, but TipTap JSON is an internal editing representation and is not part of the API or database contract.

Use the canonical markup below so content can be opened, changed, and serialized by the editor without losing structure. Individual fields can expose only a subset of the general editor features; the affected resource page remains authoritative for whether a field accepts rich text and whether it is nullable.

API Values

Send the complete HTML document fragment as a JSON string. A request library handles JSON escaping; the value itself remains HTML.

{
  "text": "<p>Welcome to the <strong>project</strong>.</p>"
}

Responses return the same field as an HTML string. Do not send TipTap JSON documents, arrays of nodes, Markdown, or editor state.

Document Structure

Wrap every prose block in a paragraph. Use an empty paragraph only for an intentional blank line between non-empty blocks, and use <br> only for a line break within the same paragraph.

<p>First paragraph.</p>
<p></p>
<p>Second paragraph.<br>Same paragraph, new line.</p>

Do not submit bare text such as First paragraph. when the field accepts rich text. An entirely empty editor is represented as null when the resource field is nullable; an empty paragraph is not a substitute for a required value.

Inline Formatting

Format	Canonical HTML
Bold	<strong>Bold text</strong>
Italic	<em>Italic text</em>
Underline	<u>Underlined text</u>
Strikethrough	<s>Removed text</s>
Text color	<span style="color: #f44336">Red text</span>
Background color	<mark data-color="#ffff00" style="background-color: #ffff00; color: inherit">Highlighted text</mark>
Font size	<span style="font-size: 150%">Large text</span>
Small text	<small>Small text</small>
Emoji	✅ as a Unicode character

Formatting marks can be nested inside a paragraph. Keep the block structure outside the marks.

<p><strong>Important:</strong> Submit the <em>signed</em> document.</p>

Blocks and Alignment

Headings use <h1> through <h6>. Paragraphs and headings can select one of the supported Text Alignments through text-align.

Text Alignments

• left - Aligns content with the left edge.

• center - Centers the content horizontally.

• right - Aligns content with the right edge.

• justify - Distributes content across the available width.

<h2 style="text-align: center">Safety Instructions</h2>
<p style="text-align: justify">Read every step before starting the machine.</p>
<blockquote><p>Stop the machine before opening the cover.</p></blockquote>
<hr>

A horizontal rule can additionally use one of the height classes hr-height-2 through hr-height-5 and a hexadecimal background color, for example <hr class="hr-height-2" style="background-color: #607d8b">.

Lists

Use <ul> for unordered lists and <ol> for ordered lists. Wrap textual list-item content in paragraphs, including nested list items.

<ul>
  <li><p>Inspect the work area.</p></li>
  <li>
    <p>Check the equipment.</p>
    <ol>
      <li><p>Confirm the serial number.</p></li>
      <li><p>Record the condition.</p></li>
    </ol>
  </li>
</ul>

An ordered list can set a non-default starting number with the start attribute, for example <ol start="3">.

Links and Shared Items

Use a normal anchor for a text link. Use the resource's API-provided static_url for an internal link instead of constructing a frontend path; internal URLs should be relative and open in the same window. External URLs should use a new window and the protective relation values shown below.

<p><a href="/handbuch/eintrag/j7x2q9m4" target="_self">Open the manual entry</a></p>
<p><a href="https://example.com/safety" target="_blank" rel="noopener noreferrer">External safety guide</a></p>

Add data-show-url-context when intratool should render more than a normal link. Select one of the supported URL Context Display Types; the target URL must resolve through URL Context.

URL Context Display Types

• inline - Renders the resolved context within the surrounding text flow.

• card - Renders the resolved context as a standalone card.

• embedded - Embeds the resolved context in the rich-text content.

<p>See <a href="/handbuch/eintrag/j7x2q9m4" target="_self" data-show-url-context="inline">Safety instructions</a>.</p>
<a href="/handbuch/eintrag/j7x2q9m4" target="_self" data-show-url-context="card">Safety instructions</a>
<a href="/handbuch/eintrag/j7x2q9m4" target="_self" data-show-url-context="embedded">Safety instructions</a>

Use a SharedItem when the linked resource needs a stable share URL. Create the Shared Item for the target resource and store the returned static_url; do not construct grant-token URLs or copy temporary access URLs into rich text.

Files and Media

Use URLs returned for FilemanagerFiles, or the static_url returned for a SharedItem when the file must be shared through rich text. Do not store filesystem paths, storage keys, or base64 data as persistent file references.

Use an anchor for a downloadable or previewable file, <img> for an image, and a <source> child for audio or video.

<p><a href="{fileOrSharedItemUrl}" target="_self">Safety checklist.pdf</a></p>
<p><img src="{imageContentUrl}" alt="Completed safety inspection"></p>
<audio controls=""><source src="{audioContentUrl}" type="audio/mpeg"></audio>
<video poster="{posterContentUrl}" controls=""><source src="{videoContentUrl}" type="video/mp4"></video>

Images can select one supported Image Size Class and can additionally select one Image Float Class.

Image Size Classes

• image-fullwidth - Uses the full available width.

• image-three-quarters - Uses three quarters of the available width.

• image-two-thirds - Uses two thirds of the available width.

• image-half - Uses half of the available width.

• image-one-third - Uses one third of the available width.

• image-one-quarter - Uses one quarter of the available width.

Image Float Classes

• float-left - Floats the image to the left of surrounding content.

• float-right - Floats the image to the right of surrounding content.

<p><img class="image-half float-right" src="{imageContentUrl}" alt="Machine controls"></p>

The file URL must return the actual media content when used in src. Use the file-content or playback URL supplied by the API; a Filemanager page URL or a Shared Item landing-page URL is not a media source by itself.

For a Shared Item media source, append exactly one supported Media Target URL Parameter.

Media Target URL Parameters

• showFileContent=1 - Returns image content.

• downloadFileContent=1 - Returns audio or video content.

• filePoster=1 - Returns a video poster.

Tables

Use standard table markup with <th> for header cells and <td> for data cells. Wrap the content of every cell in a paragraph.

<table>
  <tbody>
    <tr>
      <th><p>Item</p></th>
      <th><p>Status</p></th>
    </tr>
    <tr>
      <td><p>Emergency stop</p></td>
      <td><p><strong>Checked</strong></p></td>
    </tr>
  </tbody>
</table>

Merged cells can use colspan and rowspan. Preserve an existing colwidth attribute when round-tripping editor-generated column widths, but do not add viewer-only responsive wrappers to the stored HTML.

Dynamic Content

Fields that support System Variables can place a variable inside ordinary rich-text nodes. Keep the complete variable expression together instead of splitting it across formatting tags.

<p>Hello <strong>{{ system.user.first_name }}</strong>, your task is ready.</p>

Unsupported Markup

Send only the documented elements and attributes. Scripts, event-handler attributes, iframes, arbitrary CSS, and application-rendering wrappers are outside the rich-text contract, and a later edit in TipTap can normalize or remove unsupported markup.