> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: RichText

## Article: RichText

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/rich-text.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# RichText

Formatted text authored as HTML, with inline styling and links. Use it for fields that
need more than a plain string, such as a description or article body where the Wix user
controls formatting like bold, color, alignment, and lists. The runtime value carries the
rendered HTML together with a separate list of the links it contains, so you can drop the
markup straight into the page or work with the links on their own without parsing it.

## Component

In your component code, import the `RichText` type from `@wix/editor-react-types`:

```ts
import type { RichText } from '@wix/editor-react-types';
```

A `RichText` has the following properties:

<PropertyList bordered>
  <Property
    name="text"
    type="string"
    required
    description="The original rich text content."
  />
  <Property
    name="html"
    type="string"
    required
    description="The content as HTML, with links resolved. Render this."
  />
  <Property name="linkList" type="Link[]" required>
    Every link in the content, each a
    [Link](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/link.md).
  </Property>
</PropertyList>

### Usage

Your code either consumes a value of type `RichText` or produces one:

::::tabs
:::Consumers
In a component that receives a `RichText`, render `html` and read `linkList` as
needed:

```tsx
import type { RichText } from '@wix/editor-react-types';

function ProductCard({ description }: { description?: RichText }) {
  return <div dangerouslySetInnerHTML={{ __html: description?.html ?? '' }} />;
}
```
:::
:::Producers
When your code produces a `RichText`, for a context or a function return, set all
three fields consistently: `text` is the raw content, `html` is valid markup with resolved
`href`s, and `linkList` holds a `Link` for each link in that markup:

```ts
import type { RichText, Link } from '@wix/editor-react-types';

const learnMore: Link = { href: 'https://example.com', target: '_blank', rel: 'noopener' };

const description: RichText = {
  text: 'Handmade from recycled materials. Learn more',
  html: '<p>Handmade from recycled materials. <a href="https://example.com" target="_blank" rel="noopener">Learn more</a></p>',
  linkList: [learnMore],
};
```
:::
::::

## Manifest

In your manifest, declare the field with the `richText` dataType:

```json
{ "dataType": "richText" }
```

### Declaration

Declare a `richText` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user should edit the `description` in a panel. It
takes `dataType`, `displayName`, an optional `defaultValue`, and the options that follow:

```json
{
  "description": {
    "dataType": "richText",
    "displayName": "Product Description",
    "defaultValue": {
      "text": "<p>Handmade from recycled materials. <a dataquery=\"#learnMore\">Learn more</a></p>",
      "linkList": [{ "id": "learnMore", "url": "https://example.com" }]
    },
    "richText": {
      "abilities": ["font", "color", "textAlign", "bulletedList"]
    }
  }
}
```

> **Your `defaultValue` sets the source text and links, not the resolved object.** It
> provides `text` as HTML with `dataquery` anchors and a matching `linkList`. Before your
> component runs, the editor builds the complete `RichText` object it receives, including
> the `html`. Do not set `html` in your manifest.

#### Options

A `richText` data property accepts the following options:

<PropertyList bordered>
  <Property
    name="abilities"
    type="RichTextAbilities[]"
    description="Which formatting controls the editor offers the Wix user. Omit it to allow all of them."
  >
    <ExpandableSection name="RichTextAbilities values">
      <PropertyList>
        <Property name="'font'" description="Theme font, also swaps the HTML tag." />
        <Property name="'fontFamily'" description="Font family." />
        <Property name="'fontSize'" description="Font size, with min and max." />
        <Property name="'fontStyle'" description="Italic or normal." />
        <Property name="'fontWeight'" description="Bold, normal, or 100 to 900." />
        <Property name="'textDecoration'" description="Underline or line-through." />
        <Property name="'color'" description="Text color." />
        <Property name="'backgroundColor'" description="Background color." />
        <Property name="'letterSpacing'" description="Letter spacing." />
        <Property name="'textAlign'" description="left, center, right, or justify." />
        <Property name="'direction'" description="rtl or ltr." />
        <Property name="'marginStart' / 'marginEnd'" description="Indent or outdent." />
        <Property name="'bulletedList' / 'numberedList'" description="<ul> or <ol>." />
        <Property name="'seoTag'" description="SEO tags: h1 to h6, p, blockquote." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>
:::
:::Context-item
Exposed through a context, a `richText` field takes just `dataType` and `displayName`:

```json
{
  "description": {
    "dataType": "richText",
    "displayName": "Product Description"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns rich text. It takes
`dataType` and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "richText",
      "displayName": "Description"
    }
  ],
  "returns": {
    "dataType": "richText"
  }
}
```
:::
::::