Introduce Rich Text, Markdown, and Table Blocks & new Elements

.gitignore

@@ -7,3 +7,4 @@ coverage/
 package-lock.json
 dist/
 docs-generator-dist/
+tmp/

README.md

@@ -118,7 +118,7 @@ import { Modal, Section, bold, link } from 'slack-block-builder';
 
 `Elements` – UI elements that are used to capture user interaction.
 
-`Bits` – These are composition objects and other bits and pieces from Slack's docs. Included are `Attachment`, `Options`, `OptionGroup`, and `ConfirmationDialog`. They felt like they were deserving of their own category.
+`Bits` – These are composition objects and other bits and pieces from Slack's docs. Included are `Attachment`, `Options`, `OptionGroup`, `ConfirmationDialog` and a list of rich text objects. They felt like they were deserving of their own category.
 
 `Utilities` – A group of utility functions. See [Utility Functions](#utility-functions).
 
@@ -143,6 +143,10 @@ Below is a list of supported objects and how to access them in **Block Builder**
 | Input              | Block              | :white_check_mark:             | `Blocks.Input()`                  
 | Section            | Block              | :white_check_mark:             | `Blocks.Section()`
 | Video              | Block              | :white_check_mark:             | `Blocks.Video()`                
+| Rich Text          | Block              | :white_check_mark:             | `Blocks.RichText()`                
+| Markdown           | Block              | :white_check_mark:             | `Blocks.Markdown()`                
+| Table              | Block              | :white_check_mark:             | `Blocks.Table()`                
+| Context Actions    | Block              | :white_check_mark:             | `Blocks.ContextActions()`                
 | Button             | Element            | :white_check_mark:️             | `Elements.Button()`               
 | Checkboxes         | Element            | :white_check_mark:             | `Elements.Checkboxes()`           
 | Date Picker        | Element            | :white_check_mark:             | `Elements.DatePicker()`
@@ -158,11 +162,41 @@ Below is a list of supported objects and how to access them in **Block Builder**
 | Select Menus       | Element            | :white_check_mark:             | `Elements.[Type]Select()`          
 | Multi-Select Menus | Element            | :white_check_mark:             | `Elements.[Type]MultiSelect()`
 | URL Input          | Element            | :white_check_mark:             | `Elements.NumberInput()`
+| Workflow Button    | Element            | :white_check_mark:             | `Elements.WorkflowButton()`
+| Icon Button        | Element            | :white_check_mark:             | `Elements.IconButton()`
+| Feedback Buttons   | Element            | :white_check_mark:             | `Elements.FeedbackButtons()`
+| Rich Text Input    | Element            | :white_check_mark:             | `Elements.RichTextInput()`
 | Option             | Composition Object | :white_check_mark:             | `Bits.Option()`                   
 | Confirm Dialog     | Composition Object | :white_check_mark:             | `Bits.ConfirmationDialog()`       
 | Option Group       | Composition Object | :white_check_mark:             | `Bits.OptionGroup()`
+| Rich Text Section  | Composition Object | :white_check_mark:             | `Bits.RichTextSection()`
+| Rich Text List     | Composition Object | :white_check_mark:             | `Bits.RichTextList()`
+| Rich Text Quote    | Composition Object | :white_check_mark:             | `Bits.RichTextQuote()`
+| Rich Text Preformatted | Composition Object | :white_check_mark:         | `Bits.RichTextPreformatted()`
+| Rich Text Text     | Composition Object | :white_check_mark:             | `Bits.RichTextText()`
+| Rich Text Emoji    | Composition Object | :white_check_mark:             | `Bits.RichTextEmoji()`
+| Rich Text Link     | Composition Object | :white_check_mark:             | `Bits.RichTextLink()`
+| Rich Text User     | Composition Object | :white_check_mark:             | `Bits.RichTextUser()`
+| Rich Text Channel  | Composition Object | :white_check_mark:             | `Bits.RichTextChannel()`
+| Rich Text Usergroup | Composition Object | :white_check_mark:            | `Bits.RichTextUsergroup()`
+| Rich Text Broadcast | Composition Object | :white_check_mark:            | `Bits.RichTextBroadcast()`
+| Rich Text Date     | Composition Object | :white_check_mark:             | `Bits.RichTextDate()`
+| Rich Text Color    | Composition Object | :white_check_mark:             | `Bits.RichTextColor()`
+| Rich Text Team     | Composition Object | :white_check_mark:             | `Bits.RichTextTeam()`
 | Attachment         | Legacy Feature     | :white_check_mark:             | `Bits.Attachment()`              
 
+### Rich Text Block
+
+The `Rich Text` block is used to display formatted, structured representation of text. It is also the output of the Slack client's WYSIWYG message composer, so all messages sent by end-users will have this format.
+
+Use this block to include user-defined formatted text in your Block Kit payload. While it is possible to format text with `mrkdwn`, `rich_text` is preferred and allows greater flexibility.
+
+You might encounter a `rich_text` block in a message payload, as a built-in type in apps created with the Deno Slack SDK, or as output of the `RichTextInput` block element.
+
+Rich text blocks can be deeply nested. For instance: a `RichTextList` can contain a `RichTextSection` which can contain bold style text.
+
+?> **Note:** When using `RichText` within a `Table` block, you are restricted to using `RichTextSection`. Other top-level elements like `RichTextList`, `RichTextQuote`, and `RichTextPreformatted` are not supported in table cells.
+
 ### Creating a Simple Interactive Message
 
 Let's take a look at how to compose an interactive message. Even though [Slack](https://slack.com) now has modals, these have always been the basis for [Slack](https://slack.com) apps.

docs/_sidebar.md

@@ -33,6 +33,10 @@
   * [Input](blocks/input.md "Block Builder – Input – Maintainable JavaScript Code for Slack Block Kit")
   * [Section](blocks/section.md "Block Builder – Section – Maintainable JavaScript Code for Slack Block Kit")
   * [Video](blocks/video.md "Block Builder – Video – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text](blocks/rich-text.md "Block Builder – Rich Text – Maintainable JavaScript Code for Slack Block Kit")
+  * [Markdown](blocks/markdown.md "Block Builder – Markdown – Maintainable JavaScript Code for Slack Block Kit")
+  * [Table](blocks/table.md "Block Builder – Table – Maintainable JavaScript Code for Slack Block Kit")
+  * [Context Actions](blocks/context-actions.md "Block Builder – Context Actions – Maintainable JavaScript Code for Slack Block Kit")
 
 
 * **Element References**
@@ -60,13 +64,31 @@
   * [URL Input](elements/url-input.md "Block Builder – URL Input – Maintainable JavaScript Code for Slack Block Kit")
   * [User Multi-Select](elements/user-multi-select.md "Block Builder – User Multi-Select – Maintainable JavaScript Code for Slack Block Kit")
   * [User Select](elements/user-select.md "Block Builder – User Select – Maintainable JavaScript Code for Slack Block Kit")
+  * [Workflow Button](elements/workflow-button.md "Block Builder – Workflow Button – Maintainable JavaScript Code for Slack Block Kit")
+  * [Icon Button](elements/icon-button.md "Block Builder – Icon Button – Maintainable JavaScript Code for Slack Block Kit")
+  * [Feedback Buttons](elements/feedback-buttons.md "Block Builder – Feedback Buttons – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Input](elements/rich-text-input.md "Block Builder – Rich Text Input – Maintainable JavaScript Code for Slack Block Kit")
 
 * **Bit References**
   * [Introduction](bits/introduction.md "Block Builder – Bits – Introduction – Maintainable JavaScript Code for Slack Block Kit")
   * [Attachment](bits/attachment.md "Block Builder – Attachment – Maintainable JavaScript Code for Slack Block Kit")
   * [Confirmation Dialog](bits/confirmation-dialog.md "Block Builder – Confirmation Dialog – Maintainable JavaScript Code for Slack Block Kit")
   * [Option](bits/option.md "Block Builder – Option – Maintainable JavaScript Code for Slack Block Kit")
   * [Option Group](bits/option-group.md "Block Builder – Option Group – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Section](bits/rich-text-section.md "Block Builder – Rich Text Section – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text List](bits/rich-text-list.md "Block Builder – Rich Text List – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Quote](bits/rich-text-quote.md "Block Builder – Rich Text Quote – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Preformatted](bits/rich-text-preformatted.md "Block Builder – Rich Text Preformatted – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Text](bits/rich-text-text.md "Block Builder – Rich Text Text – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Emoji](bits/rich-text-emoji.md "Block Builder – Rich Text Emoji – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Link](bits/rich-text-link.md "Block Builder – Rich Text Link – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text User](bits/rich-text-user.md "Block Builder – Rich Text User – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Channel](bits/rich-text-channel.md "Block Builder – Rich Text Channel – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Usergroup](bits/rich-text-usergroup.md "Block Builder – Rich Text Usergroup – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Broadcast](bits/rich-text-broadcast.md "Block Builder – Rich Text Broadcast – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Date](bits/rich-text-date.md "Block Builder – Rich Text Date – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Color](bits/rich-text-color.md "Block Builder – Rich Text Color – Maintainable JavaScript Code for Slack Block Kit")
+  * [Rich Text Team](bits/rich-text-team.md "Block Builder – Rich Text Team – Maintainable JavaScript Code for Slack Block Kit")
 
 * **Component References**
   * [Paginator](components/paginator.md "Block Builder – Paginator – Maintainable JavaScript Code for Slack Block Kit")

docs/bits/rich-text-broadcast.md

@@ -0,0 +1,46 @@
+# Rich Text Broadcast
+
+?> **Note:** This document is a reference to the `RichTextBroadcastBuilder` object in **Block Builder**. For creating @here, @channel, or @everyone mentions in rich text.
+
+### Creating an Instance 
+
+```javascript
+import { RichTextBroadcast } from 'slack-block-builder';
+
+const myObj = RichTextBroadcast(params?);
+```
+
+```javascript
+import { Bits } from 'slack-block-builder';
+
+const myObj = Bits.RichTextBroadcast(params?);
+```
+
+### Params
+
+`range` – *String* – The broadcast range: `'here'`, `'channel'`, or `'everyone'`
+
+### Styling Methods
+
+```javascript
+RichTextBroadcastBuilder.bold();
+RichTextBroadcastBuilder.italic();
+RichTextBroadcastBuilder.strike();
+RichTextBroadcastBuilder.code();
+```
+
+### Example
+
+```javascript
+import { RichTextBroadcast } from 'slack-block-builder';
+
+RichTextBroadcast({ range: 'here' });
+RichTextBroadcast({ range: 'channel' });
+RichTextBroadcast({ range: 'everyone' });
+```
+
+### Other Methods
+
+```javascript
+RichTextBroadcastBuilder.end();
+```

docs/bits/rich-text-channel.md

@@ -0,0 +1,44 @@
+# Rich Text Channel
+
+?> **Note:** This document is a reference to the `RichTextChannelBuilder` object in **Block Builder**. For creating #channel mentions in rich text.
+
+### Creating an Instance 
+
+```javascript
+import { RichTextChannel } from 'slack-block-builder';
+
+const myObj = RichTextChannel(params?);
+```
+
+```javascript
+import { Bits } from 'slack-block-builder';
+
+const myObj = Bits.RichTextChannel(params?);
+```
+
+### Params
+
+`channelId` – *String* – The channel ID to mention (e.g., `'C1234ABCD'`)
+
+### Styling Methods
+
+```javascript
+RichTextChannelBuilder.bold();
+RichTextChannelBuilder.italic();
+RichTextChannelBuilder.strike();
+RichTextChannelBuilder.code();
+```
+
+### Example
+
+```javascript
+import { RichTextChannel } from 'slack-block-builder';
+
+RichTextChannel({ channelId: 'C1234ABCD' });
+```
+
+### Other Methods
+
+```javascript
+RichTextChannelBuilder.end();
+```

docs/bits/rich-text-color.md

@@ -0,0 +1,73 @@
+# Rich Text Color
+
+?> **Note:** This document is a reference to the `RichTextColorBuilder` object in **Block Builder**. For more information on how this carries over to the Slack API, view the [the Rich Text element docs](https://docs.slack.dev/reference/block-kit/blocks#element-types) on Slack's doc site.
+
+### Creating an Instance 
+
+The function that creates a new instance of `RichTextColorBuilder` is available as both a top-level import and as a member of its 'category', `Bits`:
+
+```javascript
+import { RichTextColor } from 'slack-block-builder';
+
+const myObj = RichTextColor(params?);
+
+```
+
+```javascript
+import { Bits } from 'slack-block-builder';
+
+const myObj = Bits.RichTextColor(params?);
+```
+
+### Params
+
+Each instance of the `RichTextColorBuilder` object has chainable setter methods for the object's properties. However, properties with primitive values can optionally be passed to the instantiating function, should you prefer:
+
+`value` – *String*
+
+
+?> **Note:** For an explanation of any one of the parameters, see its corresponding setter method below.
+
+### Setter Methods
+
+All setter methods return `this`, the instance of `RichTextColorBuilder` on which it is called.
+
+```javascript
+RichTextColorBuilder.value(string);
+```
+
+Sets the hex color value (e.g., '#FF5733').
+
+```javascript
+RichTextColorBuilder.bold();
+```
+
+Makes the color text bold.
+
+```javascript
+RichTextColorBuilder.italic();
+```
+
+Makes the color text italic.
+
+```javascript
+RichTextColorBuilder.strike();
+```
+
+Adds strikethrough to the color text.
+
+```javascript
+RichTextColorBuilder.code();
+```
+
+Formats the color text as inline code.
+
+### Other Methods
+
+The `RichTextColorBuilder` object also has other methods available:
+
+```javascript
+RichTextColorBuilder.end();
+```
+
+Performs no alterations to the object on which it is called. It is meant to simulate a closing HTML tag for those who prefer to have an explicit end declared for an object. 

docs/bits/rich-text-date.md

@@ -0,0 +1,62 @@
+# Rich Text Date
+
+?> **Note:** This document is a reference to the `RichTextDateBuilder` object in **Block Builder**. For creating formatted date/time elements in rich text.
+
+### Creating an Instance 
+
+```javascript
+import { RichTextDate } from 'slack-block-builder';
+
+const myObj = RichTextDate(params?);
+```
+
+```javascript
+import { Bits } from 'slack-block-builder';
+
+const myObj = Bits.RichTextDate(params?);
+```
+
+### Params
+
+`timestamp` – *Number* – Unix timestamp in seconds
+
+`format` – *String* – Date format template (e.g., `'{date_long}'`, `'{time}'`)
+
+`url` – *String* – Optional URL to link the date
+
+`fallback` – *String* – Fallback text if date can't be displayed
+
+### Available Format Tokens
+
+- `{date_num}` – YYYY-MM-DD
+- `{date_short}` – Aug 9, 2020
+- `{date_long}` – Monday, December 23rd, 2013
+- `{date}` – Same as date_long_full without year
+- `{time}` – Time of day (12 or 24 hour)
+- `{ago}` – e.g., "3 minutes ago"
+
+### Styling Methods
+
+```javascript
+RichTextDateBuilder.bold();
+RichTextDateBuilder.italic();
+RichTextDateBuilder.strike();
+RichTextDateBuilder.code();
+```
+
+### Example
+
+```javascript
+import { RichTextDate } from 'slack-block-builder';
+
+RichTextDate({ 
+  timestamp: 1628633820, 
+  format: '{date_long} at {time}' 
+});
+```
+
+### Other Methods
+
+```javascript
+RichTextDateBuilder.end();
+```

docs/bits/rich-text-emoji.md

@@ -0,0 +1,42 @@
+# Rich Text Emoji
+
+?> **Note:** This document is a reference to the `RichTextEmojiBuilder` object in **Block Builder**. For more information on how this carries over to the Slack API, view the [Rich Text Block docs](https://docs.slack.dev/reference/block-kit/blocks#element-types) on Slack's doc site.
+
+### Creating an Instance 
+
+```javascript
+import { RichTextEmoji } from 'slack-block-builder';
+
+const myObj = RichTextEmoji(params?);
+```
+
+```javascript
+import { Bits } from 'slack-block-builder';
+
+const myObj = Bits.RichTextEmoji(params?);
+```
+
+### Params
+
+`name` – *String* – The emoji name without colons (e.g., `'wave'`)
+
+`unicode` – *String* – Lowercase hexadecimal Unicode representation
+
+`url` – *String* – URL for custom emoji
+
+### Example
+
+```javascript
+import { RichTextEmoji } from 'slack-block-builder';
+
+RichTextEmoji({ name: 'wave' });
+RichTextEmoji({ name: 'thumbsup' });
+```
+
+### Other Methods
+
+```javascript
+RichTextEmojiBuilder.end();
+```
+
+Performs no alterations to the object on which it is called.