> 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: Text Variations

## Article: Text Variations

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/text-variations.md

## Article Content:

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


# Text Variations
Text variation data types provide specialized text handling beyond simple string values. These types support predefined options, rich formatting, text direction, and pattern validation.

## TextEnum

The `textEnum` data type allows users to choose from a predefined set of options rather than entering free text. The editor displays this as a dropdown or radio buttons.

> **Note:** Specify these additional configurations under a `textEnum` field in your [data item](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields).

<PropertyList bordered>
  <Property
    name="options"
    type="Option[]"
    required
    description="List of valid options users can select from."
  >
    <ExpandableSection name="Option properties">
      Each option has 2 parts: the internal value and the user-facing display name.

      <PropertyList>
        <Property
          name="value"
          type="string"
          description="Internal value stored and passed to your component at runtime. Must be unique within the options list."
        />
        <Property
          name="displayName"
          type="string"
          description="User-friendly label shown in the editor UI."
        />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

### Example

A button size selector with predefined options:

In the manifest:

```typescript
editorElement: {
  data: {
    size: {
      displayName: "Button Size",
      dataType: "textEnum",
      defaultValue: "medium",
      textEnum: {
        options: [
          { value: 'small', displayName: 'Small' },
          { value: 'medium', displayName: 'Medium' },
          { value: 'large', displayName: 'Large' },
        ],
      },
    },
  },
}
```

In the component:

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

interface ButtonProps {
  size?: TextEnum;
}

const Button = ({ size }: ButtonProps) => (
  <button className={`btn-${size}`}>Click me</button>
);
```

## Rich text

Rich text allows users to format content with HTML and inline styles, perfect for descriptions, articles, or any content needing formatting.

> **Note:** Specify these additional configurations under a `richText` field in your [data item](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md#data-item-fields).

<PropertyList bordered>
  <Property
    name="abilities"
    type="RichTextAbilities[]"
    description="List of formatting options available in the rich text editor. If omitted, all formatting abilities are available. Limit to relevant options for simpler UI."
  >
    <ExpandableSection name="RichTextAbilities values">
      <PropertyList>
        <Property name="font" description="Selected theme font, also changing the HTML tag." />
        <Property name="fontFamily" description="Font family selection." />
        <Property name="fontSize" description="Font size control, should also include min/max." />
        <Property name="fontStyle" description="Font style control." />
        <Property name="fontWeight" description="Font weight control." />
        <Property name="textDecoration" description="Text decoration." />
        <Property name="color" description="Text color." />
        <Property name="backgroundColor" description="Background color." />
        <Property name="letterSpacing" description="Letter spacing control." />
        <Property name="textAlign" description="Text alignment." />
        <Property name="direction" description="Text direction." />
        <Property name="marginStart" description="Indent control." />
        <Property name="marginEnd" description="Outdent control." />
        <Property name="bulletedList" description="Bulleted list implemented with <ul>." />
        <Property name="numberedList" description="Numbered list implemented with <ol>." />
        <Property name="seoTag" description="SEO tags." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

### Example

A product description field with limited formatting options:

In the manifest:

```typescript
editorElement: {
  data: {
    description: {
      dataType: "richText",
      displayName: "Product Description",
      defaultValue: "<p style=\"color: #333; font-size: 16px;\">This is <strong>bold</strong> and <em>italic</em> text with a <a href=\"#\">link</a>.</p>",
      richText: {
        abilities: ["font", "color", "textAlign", "bulletedList", "fontWeight"]
      },
    },
  },
}
```

In the component:

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

interface ProductCardProps {
  description?: RichText;
}

const ProductCard = ({ description }: ProductCardProps) => (
  <div dangerouslySetInnerHTML={{ __html: description?.html ?? '' }} />
);
```

## Regex

The `regex` data type validates that the input is a valid regular expression pattern.

### Example

A validation pattern field:

In the manifest:

```typescript
editorElement: {
  data: {
    validationPattern: {
      dataType: "regex",
      displayName: "Validation Pattern",
      defaultValue: "^[A-Za-z0-9]+$",
    },
  },
}
```

In the component:

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

interface FormFieldProps {
  validationPattern?: Regex;
}

const FormField = ({ validationPattern }: FormFieldProps) => (
  <input pattern={validationPattern} />
);
```

## Direction

Text direction according to the [HTML `dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).

There are 3 possible values: 

- `"ltr"`: Left-to-right
- `"rtl"`: Right-to-left 
- `"auto"`: Automatically detect based on content

### Example

A text direction field with auto-detection:

In the manifest:

```typescript
editorElement: {
  data: {
    contentDirection: {
      dataType: "direction",
      displayName: "Content Direction",
      defaultValue: "auto",
    },
  },
}
```

In the component:

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

interface TextBlockProps {
  contentDirection?: Direction;
}

const TextBlock = ({ contentDirection }: TextBlockProps) => (
  <div dir={contentDirection}>Content</div>
);
```

## See also

- [Data Overview](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/data-overview.md)
- [Primitive Data Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/primitive-data-types.md)
- [Date and Time Types](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-element/data/date-and-time-types.md)