diff --git a/packages/ui-markdown-editor/src/components/index.js b/packages/ui-markdown-editor/src/components/index.js index a421192..8313b73 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, HEADINGS, LINEBREAK, PARAGRAPH_BREAK } from '../utilities/schema'; import { H1_STYLING, @@ -40,13 +40,15 @@ const Element = (props) => { [H4]: () => ({children}), [H5]: () => ({children}), [H6]: () => ({children}), - [SOFTBREAK]: () => ( {children}), [LINEBREAK]: () => (
{children}
), + [PARAGRAPH_BREAK]: () => ( + {children} + ), [LINK]: () => ({children}), [HTML_BLOCK]: () => (
{children}
), [CODE_BLOCK]: () => (
{children}
), diff --git a/packages/ui-markdown-editor/src/index.js b/packages/ui-markdown-editor/src/index.js index 6c04f80..9a2031d 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'; @@ -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); } }); diff --git a/packages/ui-markdown-editor/src/utilities/hotkeys.js b/packages/ui-markdown-editor/src/utilities/hotkeys.js index b3cd5ea..c342cbf 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 + 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, } }; diff --git a/packages/ui-markdown-editor/src/utilities/schema.js b/packages/ui-markdown-editor/src/utilities/schema.js index b00f56a..7f75c17 100644 --- a/packages/ui-markdown-editor/src/utilities/schema.js +++ b/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, diff --git a/packages/ui-markdown-editor/src/utilities/toolbarHelpers.js b/packages/ui-markdown-editor/src/utilities/toolbarHelpers.js index bdc408d..6a25169 100644 --- a/packages/ui-markdown-editor/src/utilities/toolbarHelpers.js +++ b/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; -}; \ No newline at end of file +};