1. Overview
  2. List of formats and corresponding HTML Tags
  3. Links in rich input

1. Overview

Spaces supports rich format inputs to give users a better experience of chat, task management and reading or writing posts. Our rich input is based on Draft.js and DraftJs Plugins . We save the rich input contents in HTML. Draft.js have it's own data structure for saving rich contents but we choose to convert it to HTML, as it will be much more compatible with other related products, such as Spaces on mobile.

2. List of formats and corresponding HTML Tags

Format NameHTML TagFormat Type*
Bold<strong> or <b>Inline Format
Italics<em> or <i>Inline Format
Underline<u> or <ins>Inline Format
Strikethrough<del>Inline Format
Ordered List<ol> (used with list item <li>)Block Format
Bullet List<ul> (used with list item <li>)Block Format
Blockquote<blockquote>Block Format
Code Block<code> (inside <pre> tag)Block Format
Heading<h1> to <h6>Block Format
Line break<br>Block Format

Note: Tags that are not on the list are not supported.

Example


<p>
  <strong>bold text</strong>, <em>italic text</em>, <u>underline</u>, <del>strikethrough</del>
  <ol>
    <li>list item</li>
    <li>list item</li>
  </ol>
  <ul>
    <li>list item</li>
    <li>list item</li>
  </ul>
  <blockquote> this is a quote sentence </blockquote>
  <pre>
    <code>
      // This is a code block
      function () {
        console.log("hellow world");
      }
    </code>
  </pre>
</p>

3. Links in rich input

Links are not saved as <a> tag. Instead, the links are only recognized in frontend. On spaces web client we use linkify plugin from DraftJs Plugins library to detect any URL links (e.g https://www.example.com) and email links (e.g. user@example.com) and convert them into <a> elements during rendering proccess.