feat(rich-text-editor): add hardbreak and codeblocks (#1068)

components/rich_text_editor/rich_text_editor.mdx

@@ -28,6 +28,46 @@ another component, such as Message Input, that provides the UI.
   <Story of={RichTextEditorStories.Default} />
 </Canvas>
 
+## Output format
+
+There are 3 defined output formats currently for the input text.
+
+### Text
+
+Provide prop `outputFormat: 'text'`
+
+Plain text format as output without taking into consideration any marks (italics, bold) / html tags/ codeblocks
+that may be included in the input text user provides.
+
+### Json
+
+Provide prop `outputFormat: 'json'`
+
+the input will be formated as a json document that can then be consumed by product.
+The type of the each node in the input will be present for example: `codeblock`, `image`
+along with other meta data pertaining to the text node.
+
+### HTML
+
+Provide prop `outputFormat: 'html'`
+
+the input will be formated as native html that can then be consumed by product.
+
+## Tiptap Plugins Used
+
+### [HardBreak](https://tiptap.dev/api/nodes/hard-break)
+
+HardBreak plugin is used to add support for `<br>` tags in the rich text editor.
+
+### [CodeBlocks](https://tiptap.dev/api/nodes/code-block)
+
+Codeblock plugin is used to enaable the support for code and also specify the language. Type ``` followed by space
+or ~~~ with space to enable a codeblock in the rich text editor.
+
+### [Placeholder](https://tiptap.dev/api/extensions/placeholder)
+
+Provides support to enable placeholder support
+
 ## Slots, Props and Events
 
 <Controls />

components/rich_text_editor/rich_text_editor.vue

@@ -7,7 +7,9 @@
 
 <script>
 import { Editor, EditorContent } from '@tiptap/vue-3';
+import CodeBlock from '@tiptap/extension-code-block';
 import Document from '@tiptap/extension-document';
+import HardBreak from '@tiptap/extension-hard-break';
 import Paragraph from '@tiptap/extension-paragraph';
 import Placeholder from '@tiptap/extension-placeholder';
 import Text from '@tiptap/extension-text';
@@ -152,14 +154,31 @@ export default {
   computed: {
     extensions () {
       // These are the default extensions needed just for plain text.
-      const extensions = [Document, Paragraph, Text];
+      const extensions = [CodeBlock, Document, Paragraph, Text];
       if (this.link) {
         extensions.push(this.getExtension(Link, this.link));
       }
       // Enable placeholderText
       extensions.push(
         Placeholder.configure({ placeholder: this.placeholder }),
       );
+
+      extensions.push(
+        HardBreak.extend({
+          addKeyboardShortcuts () {
+            return {
+              Enter: () => true,
+              'Shift-Enter': () => this.editor.commands.first(({ commands }) => [
+                () => commands.newlineInCode(),
+                () => commands.createParagraphNear(),
+                () => commands.liftEmptyBlock(),
+                () => commands.splitBlock(),
+              ]),
+            };
+          },
+        }),
+      );
+
       return extensions;
     },
 

package.json

@@ -32,7 +32,9 @@
   ],
   "dependencies": {
     "@dialpad/dialtone-icons": "^0.8.1-vue3",
+    "@tiptap/extension-code-block": "^2.0.3",
     "@tiptap/extension-document": "^2.0.3",
+    "@tiptap/extension-hard-break": "^2.0.3",
     "@tiptap/extension-paragraph": "^2.0.3",
     "@tiptap/extension-placeholder": "^2.0.3",
     "@tiptap/extension-text": "^2.0.3",

recipes/conversation_view/message_input/message_input.vue

@@ -25,6 +25,7 @@
       @drag-enter="onDrag"
       @drag-over="onDrag"
       @drop="onDrop"
+      @keydown.enter.exact="onSend"
       @focusin="hasFocus = true"
       @focusout="hasFocus = false"
     >