### HTML Output Example for Rich Text Markdown Conversion Source: https://github.com/vtex-apps/rich-text/blob/master/docs/README.md This snippet demonstrates how the Rich Text block converts a Markdown string, such as '[Help](https://developers.vtex.com/).\n**Be Bold!**\n*This is italic*', into its corresponding HTML structure for display on the storefront. ```html

Help
Be Bold!
This is italic

``` -------------------------------- ### Configure Rich Text Block Props in JSON Source: https://github.com/vtex-apps/rich-text/blob/master/docs/README.md This example shows how to add and configure the `rich-text` block within your theme's block files. It illustrates setting various properties like text alignment, position, content, color, font, and a custom block class. ```json "rich-text": { "props": { "textAlignment": "CENTER", "textPosition": "CENTER", "text": "Visit our [help](https://developers.vtex.com/) section.\n**Be Bold!**\n*This is italic*", "textColor": "c-on-emphasis", "font": "t-heading-5", "blockClass": "help-message" } } ``` -------------------------------- ### Rich Text Block Properties Reference Source: https://github.com/vtex-apps/rich-text/blob/master/docs/README.md This table details the available properties for configuring the `rich-text` block. It includes the property name, type, and a description of its purpose and default values, allowing for comprehensive customization of the rich text display. ```APIDOC Prop name | Type | Description --- | --- | --- `blockClass` | `string` | Unique class name to be appended to block classes. Default: '' `font` | `string` | Tachyon token to be used as a font. Default: `t-body`. `htmlId` | `String` | HTML ID of the element. `textColor` | `string` | Tachyon token to be used as text color. Default: `c-on-base`. `text` | `string` | Text written in Markdown language to be displayed. `textAlignment` | `TextAlignmentEnum` | Text alignment inside the component. Default: `"LEFT"`. `textPosition` | `TextPostionEnum` | Text position in relation to the component. Default: `"LEFT"`. ``` -------------------------------- ### Add Rich Text App Dependency to manifest.json Source: https://github.com/vtex-apps/rich-text/blob/master/docs/README.md To enable the Rich Text block in your VTEX theme, you must declare its dependency in the `manifest.json` file. This ensures the app is available for use within your storefront. ```json { "dependencies": { "vtex.rich-text": "0.x" } } ``` -------------------------------- ### Rich Text Block CSS Handles for Customization Source: https://github.com/vtex-apps/rich-text/blob/master/docs/README.md This list provides the CSS handles available for the Rich Text block, enabling developers to apply custom styling. These handles allow for granular control over the appearance of various elements within the rich text display, such as headings, links, and lists. ```APIDOC CSS Handle --- `container` `heading` `headingLevel1` `headingLevel2` `headingLevel3` `headingLevel4` `headingLevel5` `headingLevel6` `image` `italic` `link` `list` `listItem` `listOrdered` `paragraph` `strong` `table` `tableBody` `tableHead` `tableTd` `tableTh` `tableTr` `wrapper` ``` -------------------------------- ### TextPositionEnum Possible Values Source: https://github.com/vtex-apps/rich-text/blob/master/docs/README.md Defines the possible values for the `textPosition` property, controlling the horizontal placement of text within the Rich Text component. Each value specifies a distinct alignment behavior, especially in relation to images if `isFullModeStyle` is false. ```APIDOC Enum name | Enum value | Description --- | --- | --- Left | 'LEFT' | The text will be on the left. If `isFullModeStyle` is false, the image will be on the right. Center | 'CENTER' | The text will be in the center. Not applicable if `isFullModeStyle` is false. Right | 'RIGHT' | The text will be on the right. If `isFullModeStyle` is false, the image will be on the left. ``` -------------------------------- ### TextAlignmentEnum Possible Values Source: https://github.com/vtex-apps/rich-text/blob/master/docs/README.md Defines the possible values for the `textAlignment` property, which dictates the horizontal alignment of the text content within the Rich Text component. These values control how text is justified within its container. ```APIDOC Enum name | Enum value | Description --- | --- | --- Left | 'LEFT' | Text alignment will be to the left. Center | 'CENTER' | Text alignment will be to the center. Right | 'RIGHT' | Text alignment will be to the right. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.