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

Signed-off-by: Devesh <[email protected]>

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

@@ -1,22 +1,18 @@
-import { Editor, Node } from 'slate';
-import { insertThematicBreak, isBlockHeading } from '../utilities/toolbarHelpers';
-import { HR } from '../utilities/schema'
+import { Node } from 'slate';
+import { isBlockHeading } from '../utilities/toolbarHelpers';
+import { matchCases } from "utilities/matchCases";
 
 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);
+
+		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);
+}