Skip to content
No description or website provided.
Branch: master
Clone or download
Latest commit 9770b32 May 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
messages scope messages and add is layout to true in schema Apr 25, 2019
react Allow iframe HTML tag May 21, 2019
store
.gitignore create rich text component Apr 3, 2019
.vtexignore create rich text component Apr 3, 2019
CHANGELOG.md Release v0.3.0 May 21, 2019
README.md work on readme Apr 22, 2019
manifest.json Release v0.3.0 May 21, 2019

README.md

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.

  "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:

"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.

{
  "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 name Type Description
font String Define the tachyon token to be used as font. Default: t-body
textColor String Define the tachyon token to be used as text color. Default: c-on-base
text String Text written in markdown language to be displayed
textAlignment TextAlignmentEnum Control the text alignment inside component. Default: "LEFT"
textPosition TextPostionEnum Choose in which position of the component text will be displayed, left, center or right. Default: "LEFT"
blockClass String Unique class name to be appended to block classes. Default: null

Here are the possible values of TextPostionEnum

Enum name Enum value Description
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 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.

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:
  "builders": {
    "styles": "1.x"
  }
  1. Create a file called vtex.rich-text.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;
}

CSS Namespaces

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

Token name Component Description
container index The main container of Rich Text
strong index Token inserted in items that were marked as bold during markdown conversion.
italic index Token inserted in items that were marked as italic during markdown conversion
link index Token inserted in items that were marked as links during markdown conversion
heading index Token inserted in items that were marked as headers during markdown conversion
paragraph index Token inserted in items that were marked as paragraphs during markdown conversion
image index Token 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

You can’t perform that action at this time.