`<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)

{
  "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": "<RichTextInput>",
                  "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": "<RichText>",
                      "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": "<RichTextInput>",
                      "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": "<RichText>",
                      "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.