From b75e8d4ed403b5c30128de4a34f7e37a48c496b4 Mon Sep 17 00:00:00 2001
From: d-e-v-esh <59534570+d-e-v-esh@users.noreply.github.com>
Date: Tue, 13 Apr 2021 19:05:48 +0530
Subject: [PATCH] fix(ui-markdown-editor): linebreak - #263, #267
Signed-off-by: d-e-v-esh <59534570+d-e-v-esh@users.noreply.github.com>
---
.../src/components/index.js | 6 +++--
packages/ui-markdown-editor/src/index.js | 26 ++++++++++---------
.../src/utilities/hotkeys.js | 6 ++---
.../src/utilities/schema.js | 3 +++
.../src/utilities/toolbarHelpers.js | 17 +++++++-----
5 files changed, 35 insertions(+), 23 deletions(-)
diff --git a/packages/ui-markdown-editor/src/components/index.js b/packages/ui-markdown-editor/src/components/index.js
index 8fa29e0a..a7fc21d5 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 {
DROPDOWN_STYLE_H1,
@@ -33,13 +33,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 44cc29d6..ede9e90a 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();
@@ -75,10 +75,10 @@ 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)
};
-
const onKeyDown = useCallback((event) => {
if (!canKeyDown(editor, event)) {
event.preventDefault();
@@ -91,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 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 b3cd5eaa..c342cbfe 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 b00f56ab..7f75c17d 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 b8e7cf73..5ec6cd43 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';
export const isBlockActive = (editor, format) => {
@@ -95,18 +95,23 @@ export const insertThematicBreak = (editor, type) => {
Transforms.insertNodes(editor, tBreakNode);
};
-export const insertLinebreak = (editor, type) => {
+export const insertLineBreak = (editor) => {
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 insertHeadingbreak = (editor) => {
+
+export const insertParagraphBreak = (editor) => {
+ editor.insertBreak();
+ 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;
}
@@ -122,4 +127,4 @@ export const isBlockHeading = (editor) => {
},
});
return !!match;
-};
\ No newline at end of file
+};