feat(ui-markdown-editor): direct page break - #276

packages/ui-markdown-editor/src/index.js

@@ -22,6 +22,7 @@ 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';
 
 export const markdownToSlate = (markdown) => {
   const slateTransformer = new SlateTransformer();
@@ -40,14 +41,14 @@ export const MarkdownEditor = (props) => {
   const editor = useMemo(() => {
     if (augmentEditor) {
       return augmentEditor(
-        withLists(withLinks(withHtml(withImages(
+        withLists(withLinks(withHtml(withImages(withText(
           withSchema(withHistory(withReact(createEditor())))
-        ))))
+        )))))
       );
     }
-    return withLists(withLinks(withHtml(withImages(
+    return withLists(withLinks(withHtml(withImages(withText(
       withSchema(withHistory(withReact(createEditor())))
-    ))));
+    )))));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

packages/ui-markdown-editor/src/plugins/withText.js

@@ -0,0 +1,22 @@
+import { Editor, Node } from 'slate';
+import { insertThematicBreak, isBlockHeading } from '../utilities/toolbarHelpers';
+import { HR } from '../utilities/schema'
+
+export const withText = (editor) => {
+  // Inserts page break with dash
+	const { insertText } = editor;
+	editor.insertText = (text) => {
+		insertText(text);
+    const currentNode = Node.get(editor, editor.selection.focus.path);
+		if(isBlockHeading(editor)){
+			return;
+		}
+		const firstWord = currentNode.text;
+		if(firstWord !== '---'){
+			return;
+		}
+		Editor.deleteBackward(editor, { unit: 'word' });
+		insertThematicBreak(editor, HR);
+	}
+	return editor;
+}