Add MrkDwn component #97

javaPhil · 2019-12-17T01:59:54Z

Resolves #73

Added <MrkDwn> component and added logic to <Section> and <Context> blocks to handle <MrkDwn> component.

You can now use <MrkDwn> in a <Section> block

<Block>
  <Section>
    <MrkDwn verbatim={false}>
      Hello @user!
    </MrkDwn>
  </Section>
</Block>

which converts to

[{
  type: 'section',
  text: { type: 'mrkdwn', text: 'Hello!', verbatim: false }
}]

or a <Context> block

<Blocks>
  <Context>
    <MrkDwn verbatim={false}>
      Hello @user
    </MrkDwn>
    Welcome
  </Context>
</Blocks>

which converts to

[{
  type: 'context',
  elements: [
    {type: 'mrkdwn', text: 'Hello', verbatim: false},
    {type: 'mrkdwn', text: 'World', verbatim: true}
  ]
}]

yhatt · 2019-12-17T02:12:00Z

CI looks like failing by incorrect format. Could you execute yarn format --write?

src/block-kit/MrkDwn.tsx

yhatt · 2019-12-17T02:32:09Z

docs/layout-blocks.md

@@ -239,6 +239,24 @@ If you want to use `<Input>` as layout block, you have to place one of [availabl

 `<Input>` component for layout block is provided for user that want templating with Slack API style rather than HTML style.

+## <a name="mrkdwn_component" id="mrkdwn_component"></a> [`<MrkDwn>`: Verbatim Block](https://api.slack.com/reference/block-kit/composition-objects#text) (Only for <Section> and <Context> blocks)


<Mrkdwn> is a part of text composition object and not layout blocks. We have to match a kind of element with Slack.

The documentation of <Mrkdwn> should place into "Composition objects" section in docs/block-elements.md.

~~As a same reason, moving src/block-kit/MrkDwn.tsx to src/block-kit/composition/Mrkdwn.tsx would be better.~~ 👈Done.

src/block-kit/composition/Confirm.tsx

src/block-kit/MrkDwn.tsx

src/block-kit/Section.tsx

test/block-kit/layout-blocks.tsx

yhatt · 2019-12-24T09:19:10Z

src/block-kit/composition/Mrkdwn.tsx

+}
+
+export const Mrkdwn: JSXSlack.FC<MrkdwnProps & {
+  children: JSXSlack.Children<BlockComponentProps>


Duplicated definition.

yhatt · 2019-12-24T09:21:11Z

src/block-kit/composition/Mrkdwn.tsx

+import { BlockComponentProps } from '../Blocks'
+
+interface MrkdwnProps extends BlockComponentProps {
+  children: JSXSlack.Children<BlockComponentProps>


<Mrkdwn> component would not take block components as children. It would be better to take JSXSlack.Children<{}> as same as children in <Section> and <Context>.

yhatt · 2019-12-24T09:24:55Z

src/block-kit/composition/Mrkdwn.tsx

+
+interface MrkdwnProps extends BlockComponentProps {
+  children: JSXSlack.Children<BlockComponentProps>
+  verbatim: boolean


FYI according to Slack API document, verbatim field is optional. Following this for user that wants to define JSON for Slack API exactly is good.

yhatt · 2019-12-24T09:27:52Z

src/block-kit/composition/Mrkdwn.tsx

+import html from '../../html'
+import { BlockComponentProps } from '../Blocks'
+
+interface MrkdwnProps extends BlockComponentProps {


Don't extend BlockComponentProps. It includes blockId prop (and id alias prop) for layout blocks, and <Mrkdwn> composition object is not a part of that.

yhatt

About documentation...

yhatt · 2019-12-27T02:52:38Z

docs/block-elements.md

@@ -633,6 +633,22 @@ As same as `<Input type="hidden">`, `submit` prop in `<Modal>` must not define w

 It's exactly same as [`<Input>` component](#input-props), except `type` prop.

+## <a name="mrkdwn_component" id="mrkdwn_component"></a> [`<Mrkdwn>`: Markdown Composition Component](https://api.slack.com/reference/block-kit/composition-objects#text)
+
+Mrkdwn is a text composition component is used when its needed to have a Text object and explicitly set the `verbatim` property. Setting `verbatim` to false will tell Slack to auto-convert links, conversaion names, and certain mentions to be linkified and automatically parsed. If `verbatim` set to true Slack will skip any prepreprocessing.


I can understand the use case well, but as our position, we cannot recommend using verbatim=false to enable automatic parsing because Slack is making clear a possibility of deprecating gradually in future.

We think verbatim attribute is like an escape hatch for the traditional Slack app. jsx-slack has already take verbatim=true as a default option even if not using <Mrkdwn> composition object. So we don't want to use this by users who will create new app with jsx-slack.

Thus, we should make clear these intents within this document.

yhatt

@javaPhil Thanks for your work! We want to release jsx-slack v1 with including <Mrkdwn> component. Could you resolve conflict and the reviewed documentation?

yhatt · 2020-01-06T04:54:58Z

docs/block-elements.md

@@ -633,6 +633,24 @@ As same as `<Input type="hidden">`, `submit` prop in `<Modal>` must not define w

 It's exactly same as [`<Input>` component](#input-props), except `type` prop.

+## <a name="mrkdwn_component" id="mrkdwn_component"></a> [`<Mrkdwn>`: Markdown Composition Component](https://api.slack.com/reference/block-kit/composition-objects#text)


Added documentation should be in a section of "Composition objects" (https://github.com/speee/jsx-slack/blob/master/docs/block-elements.md#composition-objects).

Please move it to below <Confirm> / right above ## Input components for modal, and demote each headings one level (## -> ###, ### -> ####).

javaPhil added 8 commits December 16, 2019 11:26

add verbatim component

8b3848c

add verbatim component support to Section

65c2202

add verbatim support to Confirm

159516b

add Verbatim support to Context block

776e44a

add tests for Verbatim component

30d68d1

change Verbatim component to MrkDwn for clarity

32df7fe

use MrkDwn instead of Verbatim component

8cc43c5

add to changelog and doc about MrkDwn

caa0e02

javaPhil added 4 commits December 16, 2019 18:29

ran command yarn format --write

bcbdd1b

fix build errors

f9d246a

forgot to format

b8fb688

un-comment out home import statement

cdc10c4

yhatt requested changes Dec 17, 2019

View reviewed changes

yhatt mentioned this pull request Dec 17, 2019

Allow verbatim={boolean} parameter #73

Closed

javaPhil added 3 commits December 17, 2019 12:09

pr feedback

9be2cf5

remove unused function

9bc1cd3

remove empty interface

bd11e8c

yhatt requested changes Dec 24, 2019

View reviewed changes

yhatt reviewed Dec 27, 2019

View reviewed changes

javaPhil added 2 commits January 2, 2020 13:09

add more info about Slack and automatic parsing to the docs

8fdd6f4

pr fixes

9717ed5

yhatt reviewed Jan 6, 2020

View reviewed changes

javaPhil and others added 3 commits January 6, 2020 09:53

move mrkdwn doc into composition section

817e5dd

yarn format

9cf8e7d

Merge branch 'master' into add-mrkdwn-component

094d83a

yhatt approved these changes Jan 10, 2020

View reviewed changes

yhatt merged commit 897fc1b into yhatt:master Jan 10, 2020

yhatt mentioned this pull request Jan 10, 2020

Recover for Mrkdwn component implementation #103

Merged

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add MrkDwn component #97

Add MrkDwn component #97

javaPhil commented Dec 17, 2019 •

edited

Loading

yhatt commented Dec 17, 2019

yhatt Dec 17, 2019 •

edited

Loading

yhatt Dec 24, 2019

yhatt Dec 24, 2019

yhatt Dec 24, 2019

yhatt Dec 24, 2019

yhatt left a comment

yhatt Dec 27, 2019

yhatt left a comment

yhatt Jan 6, 2020

		@@ -239,6 +239,24 @@ If you want to use `<Input>` as layout block, you have to place one of [availabl

		`<Input>` component for layout block is provided for user that want templating with Slack API style rather than HTML style.

		## <a name="mrkdwn_component" id="mrkdwn_component"></a> [`<MrkDwn>`: Verbatim Block](https://api.slack.com/reference/block-kit/composition-objects#text) (Only for <Section> and <Context> blocks)

		@@ -633,6 +633,24 @@ As same as `<Input type="hidden">`, `submit` prop in `<Modal>` must not define w

		It's exactly same as [`<Input>` component](#input-props), except `type` prop.

		## <a name="mrkdwn_component" id="mrkdwn_component"></a> [`<Mrkdwn>`: Markdown Composition Component](https://api.slack.com/reference/block-kit/composition-objects#text)

Add MrkDwn component #97

Add MrkDwn component #97

Conversation

javaPhil commented Dec 17, 2019 • edited Loading

yhatt commented Dec 17, 2019

yhatt Dec 17, 2019 • edited Loading

Choose a reason for hiding this comment

yhatt Dec 24, 2019

Choose a reason for hiding this comment

yhatt Dec 24, 2019

Choose a reason for hiding this comment

yhatt Dec 24, 2019

Choose a reason for hiding this comment

yhatt Dec 24, 2019

Choose a reason for hiding this comment

yhatt left a comment

Choose a reason for hiding this comment

yhatt Dec 27, 2019

Choose a reason for hiding this comment

yhatt left a comment

Choose a reason for hiding this comment

yhatt Jan 6, 2020

Choose a reason for hiding this comment

javaPhil commented Dec 17, 2019 •

edited

Loading

yhatt Dec 17, 2019 •

edited

Loading