`<RichTextInput>` input component

[yhatt]

https://api.slack.com/reference/block-kit/block-elements#rich_text_input

It's similar to <Textarea>, but can style text with WYSIWYG editor.

[brunano21]

Hello @yhatt , would you have any ETA when this will be available?

[yhatt]

Due to the high level of difficulty in implementation, it is currently impossible to make clear ETA.

Regarding this component, jsx-slack wants to provide an experience similar to that of the existing HTML-like representation as follows:

<Modal title="modal">
  <RichTextInput label="Rich text" name="richtext" required>
    <p>
      Hello, <b><code>&lt;RichTextInput&gt;</code></b>, <i>with <b>rich_text</b>!</i>
    </p>
    <pre>{preformattedText}</pre>
    <strong>Issues:</strong>
    <ul>
      <li>
        <b>#299</b>: <a href="https://github.com/yhatt/jsx-slack/issues/299"><code>&lt;RichText&gt;</code> block component</a>
      </li>
      <li>
        <b>#300</b>: <a href="https://github.com/yhatt/jsx-slack/issues/300"><code>&lt;RichTextInput&gt;</code> input component</a>
        <ul>
          <li>It depends on implementation of <code>&lt;RichText&gt;</code> block component.
        </ul>
      </li>
    </ul>
  </RichTextInput>
</Modal>

Expected output JSON (The structure is entirely different between HTML DOM and Slack rich text format)

```json { "type": "modal", "title": { "type": "plain_text", "text": "modal", "emoji": true }, "submit": { "type": "plain_text", "text": "Submit", "emoji": true }, "blocks": [ { "type": "input", "label": { "type": "plain_text", "text": "Rich text", "emoji": true }, "optional": false, "element": { "type": "rich_text_input", "initial_value": { "type": "rich_text", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "text", "text": "Hello, " }, { "type": "text", "text": "", "style": { "bold": true, "code": true } }, { "type": "text", "text": ", " }, { "type": "text", "text": "with ", "style": { "italic": true } }, { "type": "text", "text": "rich_text", "style": { "bold": true, "italic": true } }, { "type": "text", "text": "!", "style": { "italic": true } }, { "type": "text", "text": "\n\n" } ] }, { "type": "rich_text_preformatted", "elements": [ { "type": "text", "text": "Pre-formatted text\n(Injected by JSX expressions)" } ], "border": 0 }, { "type": "rich_text_section", "elements": [ { "type": "text", "text": "\n" }, { "type": "text", "text": "Issues:", "style": { "bold": true } }, { "type": "text", "text": "\n\n" } ] }, { "type": "rich_text_list", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "text", "text": "#299", "style": { "bold": true } }, { "type": "text", "text": ": " }, { "type": "link", "url": "https://github.com/yhatt/jsx-slack/issues/299", "text": "", "style": { "code": true } }, { "type": "link", "url": "https://github.com/yhatt/jsx-slack/issues/299", "text": " block component" } ] }, { "type": "rich_text_section", "elements": [ { "type": "text", "text": "#399", "style": { "bold": true } }, { "type": "text", "text": ": " }, { "type": "link", "url": "https://github.com/yhatt/jsx-slack/issues/300", "text": "", "style": { "code": true } }, { "type": "link", "url": "https://github.com/yhatt/jsx-slack/issues/300", "text": " input component" } ] } ], "style": "bullet", "indent": 0, "border": 0 }, { "type": "rich_text_list", "elements": [ { "type": "rich_text_section", "elements": [ { "type": "text", "text": "It depends on implementation of " }, { "type": "text", "text": "", "style": { "code": true } }, { "type": "text", "text": " block component." } ] } ], "style": "bullet", "indent": 1, "border": 0 } ] } } } ] } ```

It depends on "HTML to rich_text block" conversion (by #299), which is entirely different from the existing "HTML to mrkdwn format" conversion. This requires creating "completely new" JSX parser and renderer for rich_text.