Skip to content

Commit

Permalink
fix(ui-markdown-editor): linebreak - accordproject#263, accordproject…
Browse files Browse the repository at this point in the history
…#267

Signed-off-by: d-e-v-esh <[email protected]>
  • Loading branch information
d-e-v-esh committed Apr 13, 2021
1 parent ba9bbfb commit b75e8d4
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 23 deletions.
6 changes: 4 additions & 2 deletions packages/ui-markdown-editor/src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -33,13 +33,15 @@ 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}>
<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>),
Expand Down
26 changes: 14 additions & 12 deletions packages/ui-markdown-editor/src/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
Expand Down Expand Up @@ -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();
Expand All @@ -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);
}
});
Expand Down
6 changes: 3 additions & 3 deletions packages/ui-markdown-editor/src/utilities/hotkeys.js
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -54,8 +54,8 @@ const HOTKEYS = {
code: LINEBREAK,
},
'enter': {
type: 'headingbreak',
code: HEADINGBREAK
type: 'paragraph_break',
code: PARAGRAPH_BREAK,
}
};

Expand Down
3 changes: 3 additions & 0 deletions packages/ui-markdown-editor/src/utilities/schema.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand Down
17 changes: 11 additions & 6 deletions packages/ui-markdown-editor/src/utilities/toolbarHelpers.js
Original file line number Diff line number Diff line change
@@ -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) => {
Expand Down Expand Up @@ -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;
}

Expand All @@ -122,4 +127,4 @@ export const isBlockHeading = (editor) => {
},
});
return !!match;
};
};

0 comments on commit b75e8d4

Please sign in to comment.