feat(ui-markdown-editor): heading wysiwyg - accordproject#346

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

@@ -1,7 +1,6 @@
-import { Editor, Node, Transforms } from 'slate';
+import { Node } from 'slate';
 import { isBlockHeading } from '../utilities/toolbarHelpers';
-import { HR } from '../utilities/schema'
-import MatchHeadings from './MatchCases/MatchHeadings'
+import { matchCases } from "utilities/matchCases";
 
 export const withText = (editor) => {
 	const { insertText } = editor;
@@ -11,22 +10,9 @@ export const withText = (editor) => {
 		if(isBlockHeading(editor)){
 			return;
 		}
-
-		let matchingText;
-		const currentLine = currentNode.text;
-		const headingMatchCase = currentLine.match(/(^\s*)#{1,6}\s/m);
-
-		// Assignment inside of conditional statements
-		if((matchingText = headingMatchCase)){
-			MatchHeadings(editor, matchingText);
-			Editor.deleteBackward(editor, { unit: 'word' });
-		}
 
-		if(currentLine === '---'){
-			Editor.deleteBackward(editor, { unit: 'word' });
-			Transforms.setNodes(editor, { type: HR })
-			return;
-		}
+		const currentLine = currentNode.text;
+		matchCases(editor, currentLine);
 	}
 	return editor;
 }

packages/ui-markdown-editor/src/utilities/matchCases.js

@@ -0,0 +1,38 @@
+import { Transforms, Editor } from 'slate';
+import { H1, H2, H3, H4, H5, H6, HR } from "./schema";
+
+export const matchCases = (editor, currentLine) => {
+
+	const matchHeadings = (editor, currentLine) => {
+		const headingMatchCase = currentLine.match(/(^\s*)#{1,6}\s/m);
+		if(!headingMatchCase) return;
+
+		const count = (headingMatchCase[0].match(/#/g) || []).length;
+		if (count === 1) Transforms.setNodes(editor, { type: H1 });
+		else if (count === 2) Transforms.setNodes(editor, { type: H2 });
+		else if (count === 3) Transforms.setNodes(editor, { type: H3 });
+		else if (count === 4) Transforms.setNodes(editor, { type: H4 });
+		else if (count === 5) Transforms.setNodes(editor, { type: H5 });
+		else if (count === 6) Transforms.setNodes(editor, { type: H6 });
+
+		Editor.deleteBackward(editor, { unit: 'word' });
+		return;
+	}
+
+	const matchPageBreak = (editor, currentLine)=>{
+		const pageBreakMatchCase = currentLine.match(/(^\s*)([*-])(?:[\t ]*\2){2,}/m);
+		if(!pageBreakMatchCase) return
+
+		Editor.deleteBackward(editor, { unit: 'word' });
+		Transforms.setNodes(editor, { type: HR })
+
+ 		const text = { object: 'text', text: '' };
+ 		const n = { object: "block", type: 'paragraph', children: [text] };
+ 		Transforms.move(editor, { distance: 1, unit: 'character' })
+  	Transforms.insertNodes(editor, n);
+		return;
+	}
+
+	matchHeadings(editor, currentLine);
+	matchPageBreak(editor, currentLine);
+}