fix(ui-markdown-editor): linebreak - accordproject#263, accordproject…

…#267

Signed-off-by: Devesh <[email protected]>

packages/ui-markdown-editor/src/components/index.js

@@ -7,7 +7,7 @@ import { HorizontalRule } from './Span';
 import {
   PARAGRAPH, LINK, IMAGE, H1, H2, H3, H4, H5, H6, HR,
   CODE_BLOCK, HTML_BLOCK, BLOCK_QUOTE, UL_LIST, OL_LIST, LIST_ITEM,
-  HTML_INLINE, SOFTBREAK, LINEBREAK, HEADINGS
+  HTML_INLINE, HEADINGS, LINEBREAK, PARAGRAPH_BREAK
 } from '../utilities/schema';
 import {
   H1_STYLING,
@@ -40,13 +40,15 @@ const Element = (props) => {
     [H4]: () => (<Heading id={headingId} as="h4" style={H4_STYLING} {...attributes}>{children}</Heading>),
     [H5]: () => (<Heading id={headingId} as="h5" style={H5_STYLING} {...attributes}>{children}</Heading>),
     [H6]: () => (<Heading id={headingId} as="h6" style={H6_STYLING} {...attributes}>{children}</Heading>),
-    [SOFTBREAK]: () => (<span className={SOFTBREAK} {...attributes}> {children}</span>),
     [LINEBREAK]: () => (<span {...attributes}>
       <span contentEditable={false} style={{ userSelect: 'none' }}>
         <br />
       </span>
       {children}
     </span>),
+    [PARAGRAPH_BREAK]: () => (<span {...attributes}>
+      {children}
+    </span>),
     [LINK]: () => (<a {...attributes} href={data.href}>{children}</a>),
     [HTML_BLOCK]: () => (<pre className={HTML_BLOCK} {...attributes}>{children}</pre>),
     [CODE_BLOCK]: () => (<pre {...attributes}>{children}</pre>),

packages/ui-markdown-editor/src/index.js

@@ -1,6 +1,4 @@
-import React, {
-  useCallback, useMemo, useState
-} from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { CiceroMarkTransformer } from '@accordproject/markdown-cicero';
 import { HtmlTransformer } from '@accordproject/markdown-html';
 import { SlateTransformer } from '@accordproject/markdown-slate';
@@ -14,14 +12,16 @@ import { BUTTON_ACTIVE, BLOCK_STYLE } from './utilities/constants';
 import withSchema from './utilities/schema';
 import Element from './components';
 import Leaf from './components/Leaf';
-import { toggleMark, toggleBlock, insertThematicBreak,
-  insertLinebreak, insertHeadingbreak, isBlockHeading } from './utilities/toolbarHelpers';
+import { toggleMark, toggleBlock, insertThematicBreak, 
+  insertLineBreak, isBlockHeading, insertHeadingBreak, insertParagraphBreak
+} from './utilities/toolbarHelpers';
 import { withImages, insertImage } from './plugins/withImages';
 import { withLinks, isSelectionLinkBody } from './plugins/withLinks';
 import { withHtml } from './plugins/withHtml';
 import { withLists } from './plugins/withLists';
 import FormatBar from './FormattingToolbar';
 import { withText } from './plugins/withText';
+import { HEADINGBREAK } from './utilities/schema';
 
 export const markdownToSlate = (markdown) => {
   const slateTransformer = new SlateTransformer();
@@ -85,8 +85,9 @@ export const MarkdownEditor = (props) => {
       setShowLinkModal(true);
     },
     horizontal_rule: (code) => insertThematicBreak(editor, code),
-    linebreak: (code) => insertLinebreak(editor, code),
-    headingbreak: () => insertHeadingbreak(editor)
+    linebreak: () => insertLineBreak(editor),
+    paragraph_break: () => insertParagraphBreak(editor),
+    headingbreak: () => insertHeadingBreak(editor)
   };
 
   /**
@@ -118,15 +119,17 @@ export const MarkdownEditor = (props) => {
       return;
     }
 
-    if (event.key === 'Enter' && !isBlockHeading(editor)) {
-      return;
-    }
-
     const hotkeys = Object.keys(HOTKEYS);
     hotkeys.forEach((hotkey) => {
       if (isHotkey(hotkey, event)) {
         event.preventDefault();
         const { code, type } = HOTKEYS[hotkey];
+        // if linebreak happens form a heading block then we run the insertHeadingBreak function
+        // otherwise it would be a linebreak every time
+        if(type === 'paragraph_break' && isBlockHeading(editor)){
+          hotkeyActions[HEADINGBREAK]()
+          return;
+        }
         hotkeyActions[type](code);
       }
     });

packages/ui-markdown-editor/src/utilities/hotkeys.js

@@ -1,7 +1,7 @@
 import {
   LINK, IMAGE, BLOCK_QUOTE, UL_LIST, OL_LIST,
   MARK_BOLD, MARK_ITALIC, MARK_CODE, HR, LINEBREAK,
-  HEADINGBREAK
+  PARAGRAPH_BREAK
 } from './schema';
 
 const HOTKEYS = {
@@ -54,8 +54,8 @@ const HOTKEYS = {
     code: LINEBREAK,
   },
   'enter': {
-    type: 'headingbreak',
-    code: HEADINGBREAK
+    type: 'paragraph_break',
+    code: PARAGRAPH_BREAK,
   }
 };
 

packages/ui-markdown-editor/src/utilities/schema.js

@@ -24,6 +24,7 @@ export const MARKS = [MARK_BOLD, MARK_ITALIC, MARK_CODE, MARK_HTML];
 
 export const HR = 'horizontal_rule';
 export const SOFTBREAK = 'softbreak';
+export const PARAGRAPH_BREAK = 'paragraph_break';
 export const LINEBREAK = 'linebreak';
 export const LINK = 'link';
 export const IMAGE = 'image';
@@ -33,12 +34,14 @@ export const HEADINGBREAK = 'headingbreak';
 const INLINES = {
   [LINEBREAK]: true,
   [SOFTBREAK]: true,
+  [PARAGRAPH_BREAK]: true,
   [HTML_INLINE]: true,
   [LINK]: true,
   [IMAGE]: true,
 };
 const VOIDS = {
   [LINEBREAK]: true,
+  [PARAGRAPH_BREAK]: true,
   [SOFTBREAK]: true,
   [IMAGE]: true,
   [HR]: true,

packages/ui-markdown-editor/src/utilities/toolbarHelpers.js

@@ -1,6 +1,6 @@
 import { Node, Editor, Transforms } from 'slate';
 import {
-  LIST_ITEM, BLOCK_QUOTE, LIST_TYPES, PARAGRAPH, HEADINGS, H1, H2, H3, H4, H5, H6
+  LIST_ITEM, BLOCK_QUOTE, LIST_TYPES, PARAGRAPH, LINEBREAK, HEADINGS, H1, H2, H3, H4, H5, H6
 } from './schema';
 
 /**
@@ -159,23 +159,27 @@ export const insertThematicBreak = (editor, type) => {
  * @param {Object} editor Editor to be transformed
  * @param {string} format Type of the break
  */
-export const insertLinebreak = (editor, type) => {
+export const insertLineBreak = (editor, type) => {
   const text = { object: 'text', text: '' };
-  const br = { type, children: [text], data: {} };
+  const br = { type: LINEBREAK, children: [text], data: {} };
   Transforms.insertNodes(editor, br);
   Transforms.move(editor, { distance: 1, unit: 'character' });
 };
 
+export const insertParagraphBreak = (editor) => {
+  editor.insertBreak();
+  return;
+}
+
 /**
  * Inserts a heading break in the document.
  * 
  * @param {Object} editor Editor to be transformed
  */
-export const insertHeadingbreak = (editor) => {
+export const insertHeadingBreak = (editor) => {
   const text = { object: 'text', text: '' };
   const n = { object: "block", type: 'paragraph', children: [text] };
   Transforms.insertNodes(editor, n);
-  Transforms.move(editor, { distance: 1, unit: 'character' })
   return;
 }
 
@@ -197,4 +201,4 @@ export const isBlockHeading = (editor) => {
     },
   });
   return !!match;
-};
+};