diff --git a/packages/ui-markdown-editor/src/components/index.js b/packages/ui-markdown-editor/src/components/index.js index 8fa29e0a..c7f56272 100644 --- a/packages/ui-markdown-editor/src/components/index.js +++ b/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]: () => ({children}), [H5]: () => ({children}), [H6]: () => ({children}), - [SOFTBREAK]: () => ( {children}), - [LINEBREAK]: () => ( + [SOFTBREAK]: () => (
diff --git a/packages/ui-markdown-editor/src/index.js b/packages/ui-markdown-editor/src/index.js index c2f4e3fd..aeb86ce1 100644 --- a/packages/ui-markdown-editor/src/index.js +++ b/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,13 +13,14 @@ 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'; import { withHtml } from './plugins/withHtml'; import { withLists } from './plugins/withLists'; import FormatBar from './FormattingToolbar'; +import { HEADINGBREAK } from './utilities/schema'; export const markdownToSlate = (markdown) => { const slateTransformer = new SlateTransformer(); @@ -74,10 +73,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 +89,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 + // other it is a linebreak every time + if(type === 'linebreak' && isBlockHeading(editor)){ + hotkeyActions[HEADINGBREAK]() + return; + } hotkeyActions[type](code); } }); diff --git a/packages/ui-markdown-editor/src/utilities/hotkeys.js b/packages/ui-markdown-editor/src/utilities/hotkeys.js index b3cd5eaa..3c009b33 100644 --- a/packages/ui-markdown-editor/src/utilities/hotkeys.js +++ b/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 } }; diff --git a/packages/ui-markdown-editor/src/utilities/toolbarHelpers.js b/packages/ui-markdown-editor/src/utilities/toolbarHelpers.js index 0f79d19a..0983dc85 100644 --- a/packages/ui-markdown-editor/src/utilities/toolbarHelpers.js +++ b/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, { @@ -91,14 +89,22 @@ 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: 'character' }) + return; +} + +export const insertHeadingBreak = (editor) => { const text = { object: 'text', text: '' }; const n = { object: "block", type: 'paragraph', children: [text] }; Transforms.insertNodes(editor, n); @@ -115,4 +121,4 @@ export const isBlockHeading = (editor) => { }, }); return !!match; -}; \ No newline at end of file +};