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

Signed-off-by: Devesh <deves125@gmail.com>

packages/ui-markdown-editor/src/plugins/MatchCases/MatchHeadings.js

@@ -0,0 +1,16 @@
+
+import { Transforms } from 'slate';
+import { H1, H2, H3, H4, H5, H6 } from '../../utilities/schema';
+
+const MatchHeadings = (editor, matchingText) => {
+	const count = (matchingText[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 });
+	return;
+}
+
+export default MatchHeadings;

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

@@ -1,22 +1,32 @@
-import { Editor, Node } from 'slate';
-import { insertThematicBreak, isBlockHeading } from '../utilities/toolbarHelpers';
+import { Editor, Node, Transforms } from 'slate';
+import { isBlockHeading } from '../utilities/toolbarHelpers';
 import { HR } from '../utilities/schema'
+import MatchHeadings from './MatchCases/MatchHeadings'
 
 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 !== '---'){
+
+		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;
 		}
-		Editor.deleteBackward(editor, { unit: 'word' });
-		insertThematicBreak(editor, HR);
 	}
 	return editor;
 }