-
-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<RichTextInput>
input component
#300
Comments
Hello @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><RichTextInput></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><RichText></code> block component</a>
</li>
<li>
<b>#300</b>: <a href="https://github.com/yhatt/jsx-slack/issues/300"><code><RichTextInput></code> input component</a>
<ul>
<li>It depends on implementation of <code><RichText></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. |
https://api.slack.com/reference/block-kit/block-elements#rich_text_input
It's similar to
<Textarea>
, but can style text with WYSIWYG editor.The text was updated successfully, but these errors were encountered: