fix(ui-markdown-editor): fixes cursor movement around headings - I260

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, SOFTBREAK, HEADINGS
 } from '../utilities/schema';
 import {
   DROPDOWN_STYLE_H1,
@@ -33,8 +33,7 @@ const Element = (props) => {
     [H4]: () => (<Heading id={headingId} as="h4" style={DROPDOWN_STYLE_H4} {...attributes}>{children}</Heading>),
     [H5]: () => (<Heading id={headingId} as="h5" style={DROPDOWN_STYLE_H5} {...attributes}>{children}</Heading>),
     [H6]: () => (<Heading id={headingId} as="h6" style={DROPDOWN_STYLE_H6} {...attributes}>{children}</Heading>),
-    [SOFTBREAK]: () => (<span className={SOFTBREAK} {...attributes}> {children}</span>),
-    [LINEBREAK]: () => (<span {...attributes}>
+    [SOFTBREAK]: () => (<span {...attributes}>
       <span contentEditable={false} style={{ userSelect: 'none' }}>
         <br />
       </span>
@@ -58,6 +57,7 @@ const Element = (props) => {
     }
   };
   const elementRenderer = customElements
+    // console.log(customElements)
     ? { ...baseElementRenderer, ...customElements(attributes, children, element, editor) }
     : baseElementRenderer;
   return (elementRenderer[type] || elementRenderer.default)();

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';
@@ -15,7 +13,7 @@ import withSchema from './utilities/schema';
 import Element from './components';
 import Leaf from './components/Leaf';
 import { toggleMark, toggleBlock, insertThematicBreak, 
-  insertLinebreak, insertHeadingbreak, isBlockHeading
+  insertSoftBreak, insertLineBreak, isBlockHeading, insertHeadingBreak
 } from './utilities/toolbarHelpers';
 import { withImages, insertImage } from './plugins/withImages';
 import { withLinks, isSelectionLinkBody } from './plugins/withLinks';
@@ -29,6 +27,9 @@ export const markdownToSlate = (markdown) => {
 };
 
 export const MarkdownEditor = (props) => {
+
+
+
   const {
     canCopy,
     canKeyDown,
@@ -74,10 +75,10 @@ export const MarkdownEditor = (props) => {
       setShowLinkModal(true);
     },
     horizontal_rule: (code) => insertThematicBreak(editor, code),
-    linebreak: (code) => insertLinebreak(editor, code),
-    headingbreak: () => insertHeadingbreak(editor)
+    softbreak: (code) => insertSoftBreak(editor, code),
+    linebreak: () => insertLineBreak(editor),
+    headingbreak: () => insertHeadingBreak(editor)
   };
-
   const onKeyDown = useCallback((event) => {
     if (!canKeyDown(editor, event)) {
       event.preventDefault();
@@ -90,15 +91,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 insertHeadingBrake function
+        // other it is a linebreak every time
+        if(type === 'linebreak' && 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
+  SOFTBREAK
 } from './schema';
 
 const HOTKEYS = {
@@ -50,12 +50,12 @@ const HOTKEYS = {
     code: HR,
   },
   'shift+enter': {
-    type: 'linebreak',
-    code: LINEBREAK,
+    type: 'softbreak',
+    code: SOFTBREAK,
   },
   'enter': {
-    type: 'headingbreak',
-    code: HEADINGBREAK
+    type: 'linebreak',
+    code: LINEBREAK
   }
 };
 

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

@@ -1,7 +1,5 @@
 import { Node, Editor, Transforms } from 'slate';
-import {
-  LIST_ITEM, BLOCK_QUOTE, LIST_TYPES, PARAGRAPH
-} from './schema';
+import { LIST_ITEM, BLOCK_QUOTE, LIST_TYPES, PARAGRAPH, LINEBREAK } from './schema';
 
 export const isBlockActive = (editor, format) => {
   const [match] = Editor.nodes(editor, {
@@ -66,6 +64,7 @@ export const toggleMark = (editor, format) => {
 };
 
 export const toggleHistory = (editor, format) => {
+  console.log(format)
   if (format === 'undo') {
     editor.undo();
   } else { editor.redo(); }
@@ -91,17 +90,26 @@ export const insertThematicBreak = (editor, type) => {
   Transforms.insertNodes(editor, tBreakNode);
 };
 
-export const insertLinebreak = (editor, type) => {
+export const insertSoftBreak = (editor, type) => {
   const text = { object: 'text', text: '' };
   const br = { type, children: [text], data: {} };
   Transforms.insertNodes(editor, br);
   Transforms.move(editor, { distance: 1, unit: 'character' });
 };
 
-export const insertHeadingbreak = (editor) => {
+export const insertLineBreak = (editor) => {
+  const text = { object: 'text', text: '' };
+  const lineBreakNode = { type: LINEBREAK, children: [text] };
+  Transforms.insertNodes(editor, lineBreakNode);
+  Transforms.move(editor, { distance: 1, unit: 'line' })
+  return;
+}
+
+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;
 }