VTEX Rich Text

Description

The VTEX Rich Text converts texts written in markdown language and displays its content as HTML elements.

For example, the text: [Help](https://help.vtex.com/en/faq/what-is-vtex-io).\n**Be Bold!**\n*This is italic*

Is converted to:

<div>
      <p>
        <a href="https://help.vtex.com/en/faq/what-is-vtex-io">
         Help
        </a>
        <br />
        <span class="b">Be Bold!</span>
        <br />
        <span class="i">This is italic</span>
      </p>
      

    </div>
  </div>

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request

Table of Contents

Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app or override the default CSS you need import it in your dependencies on manifest.json file.

1
2
3
  "dependencies": {
    "vtex.rich-text": "0.x"
  }

Then, add rich-text block to your blocks.json

Now, you can change the behavior of the rich-text block that is in the minicart. See an example of how to configure:

1
2
3
4
5
6
7
8
9
"rich-text": {
  "props": {
    "textAlignment": "CENTER",
    "textPosition": "CENTER",
    "text": "Visit our [help](https://help.vtex.com/en/faq/what-is-vtex-io) section.\n*Be Bold!*\n**This is italic**",
    "textColor": "c-on-emphasis",
    "font": "t-heading-5"
  }
}

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within rich-text and describes if they are required or optional.

1
2
3
4
5
{
  "rich-text": {
    "component": "index"
  }
}

For now this block does not have any required or optional blocks.

Configuration

Through the Storefront, you can change the rich-text's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescription
fontStringDefine the tachyon token to be used as font. Default: t-body
textColorStringDefine the tachyon token to be used as text color. Default: c-on-base
textStringText written in markdown language to be displayed
textAlignmentTextAlignmentEnumControl the text alignment inside component. Default: "LEFT"
textPositionTextPostionEnumChoose in which position of the component text will be displayed, left, center or right. Default: "LEFT"
blockClassStringUnique class name to be appended to block classes. Default: null

Here are the possible values of TextPostionEnum

Enum nameEnum valueDescription
Left'LEFT'Text will be to the left. If isFullModeStyle is false, image will be on the right
Center'CENTER'Text will be in the center. Not applicable if isFullModeStyle is false.
Right'RIGHT'Text will be to the right. If isFullModeStyle is false, image will be on the left

Here are the possible values of TextAlignmentEnum

Enum nameEnum valueDescription
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.

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
1
2
3
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.rich-text.css inside the styles/css folder. Add your custom styles:
1
2
3
.container {
  margin-top: 10px;
}

CSS Namespaces

Below, we describe the namespaces that are defined in the rich-text.

Token nameComponentDescription
containerindexThe main container of Rich Text
strongindexToken inserted in items that were marked as bold during markdown conversion.
italicindexToken inserted in items that were marked as italic during markdown conversion
linkindexToken inserted in items that were marked as links during markdown conversion
headingindexToken inserted in items that were marked as headers during markdown conversion
paragraphindexToken inserted in items that were marked as paragraphs during markdown conversion
imageindexToken inserted in items that were marked as images during markdown conversion

Troubleshooting

You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.

Tests

To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status
Coverage Status