feat: working markdown parser

packages/apps/client/package.json

@@ -41,6 +41,7 @@
         "eventemitter3": "^5.0.1",
         "mdast-util-directive": "^3.0.0",
         "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.1.0",
         "micromark-extension-directive": "^3.0.0",
         "mobx": "^6.10.2",
         "mobx-react-lite": "^4.0.5",

packages/apps/client/src/ScriptEditor/Editor.tsx

@@ -60,8 +60,10 @@ export function Editor({
 						lineId: randomId(),
 					},
 					[
-						schema.node(schema.nodes.lineTitle, undefined, schema.text('Line title')),
-						schema.node(schema.nodes.paragraph, undefined, schema.text('Script...')),
+						schema.node(schema.nodes.lineTitle, undefined, [schema.text('Line title')]),
+						...fromMarkdown(
+							'Raz _dwa **trzy**_. :reverse[Cztery.]\n\nPięć _sześć_ siedem.\n\n\n\n\n\nSome more :reverse[Markdown **Here**]'
+						),
 					]
 				),
 				schema.node(

packages/apps/client/src/ScriptEditor/plugins/updateModel.ts

@@ -20,7 +20,7 @@ export function updateModel(onChange?: (lineId: UILineId, contents: SomeContents
 								if (!parent) return
 								if (parent.type.name !== 'line') return
 
-								if (onChange) onChange(lineId, parent.toString())
+								if (onChange) onChange(lineId, parent)
 							})
 						})
 					})

packages/apps/client/src/components/SplitPanel/SplitPanel.module.css

@@ -13,12 +13,15 @@
 
 .Divider {
 	grid-column: Divider;
-	--test: 1;
 	cursor: ew-resize;
 }
 
-.Divider:hover,
 .DividerActive {
+	composes: Divider;
+	background-color: var(--bs-primary);
+}
+
+.Divider:hover {
 	background-color: var(--bs-primary);
 }
 

packages/apps/client/src/components/SplitPanel/SplitPanel.tsx

@@ -19,6 +19,7 @@ export function SplitPanel({
 	const beginCoords = useRef<{ x: number; y: number } | null>(null)
 	const initialPos = useRef<number>(position ?? 0.5)
 	const container = useRef<HTMLDivElement>(null)
+	const divider = useRef<HTMLDivElement>(null)
 	const contRect = useRef<DOMRect | null>(null)
 
 	const defaultedPosition = position ?? 0.5
@@ -83,10 +84,28 @@ export function SplitPanel({
 		initialPos.current = defaultedPosition
 	}, [isResizing, defaultedPosition])
 
+	useEffect(() => {
+		if (isResizing) {
+			if (!divider.current) return
+			const style = window.getComputedStyle(divider.current)
+			document.body.style.cursor = style.cursor
+		} else {
+			document.body.style.cursor = ''
+		}
+
+		return () => {
+			document.body.style.cursor = ''
+		}
+	}, [isResizing])
+
 	return (
 		<div className={`${className ?? ''} ${classes.SplitPane}`} style={style} ref={container}>
 			<div className={classes.PaneA}>{childrenBegin}</div>
-			<div className={isResizing ? classes.DividerActive : classes.Divider} onMouseDown={onMouseDown}></div>
+			<div
+				className={isResizing ? classes.DividerActive : classes.Divider}
+				ref={divider}
+				onMouseDown={onMouseDown}
+			></div>
 			<div className={classes.PaneB}>{childrenEnd}</div>
 		</div>
 	)

packages/apps/client/src/lib/prosemirrorDoc.ts

@@ -1,25 +1,78 @@
-import { fromMarkdown as mdastFromMarkdown } from 'mdast-util-from-markdown'
-import type { Node, Parent } from 'mdast'
+import { fromMarkdown as mdAstFromMarkdown } from 'mdast-util-from-markdown'
+import { toMarkdown as mdAstToMarkdown } from 'mdast-util-to-markdown'
+import type { Node as MdAstNode, Parent as MdAstParent, Literal as MdAstLiteral } from 'mdast'
+import { Node as ProsemirrorNode } from 'prosemirror-model'
 import { directive } from 'micromark-extension-directive'
-import { directiveFromMarkdown } from 'mdast-util-directive'
+import { schema } from '../ScriptEditor/scriptSchema'
+import { directiveFromMarkdown, directiveToMarkdown } from 'mdast-util-directive'
 
-export function fromMarkdown(text: string): void {
-	const ast = mdastFromMarkdown(text, 'utf-8', {
+export function fromMarkdown(text: string): ProsemirrorNode[] {
+	const ast = mdAstFromMarkdown(text, 'utf-8', {
 		extensions: [directive()],
 		mdastExtensions: [directiveFromMarkdown()],
 	})
 
-	traverseNodes(ast.children)
+	return traverseMdAstNodes(ast.children)
 }
 
-function traverseNodes(nodes: Node[]) {
+export function toMarkdown(doc: ProsemirrorNode[]): string {
+	return mdAstToMarkdown(
+		{
+			type: 'root',
+			children: [],
+		},
+		{
+			extensions: [directiveToMarkdown()],
+		}
+	)
+}
+
+function mdastToEditorSchemaNode(node: MdAstNode, children?: ProsemirrorNode[]): ProsemirrorNode[] {
+	console.log(node)
+	if (node.type === 'paragraph') {
+		return [schema.node(schema.nodes.paragraph, undefined, children)]
+	} else if (node.type === 'text' && isLiteral(node)) {
+		return [schema.text(node.value)]
+	} else if (node.type === 'strong' && children) {
+		return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.bold)]))
+	} else if (node.type === 'emphasis' && children) {
+		return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.italic)]))
+	} else if (isTextDirective(node) && node.name === 'reverse' && children) {
+		return children.map((child) => child.mark([...child.marks, schema.mark(schema.marks.reverse)]))
+	} else {
+		return [schema.text('[UNKNOWN]')]
+	}
+}
+
+function traverseMdAstNodes(nodes: MdAstNode[]): ProsemirrorNode[] {
+	const result: ProsemirrorNode[] = []
 	for (const childNode of nodes) {
-		console.dir(childNode)
-		if (isParent(childNode)) traverseNodes(childNode.children)
+		let children: ProsemirrorNode[] = []
+		if (isParent(childNode)) {
+			children = traverseMdAstNodes(childNode.children)
+		}
+		result.push(...mdastToEditorSchemaNode(childNode, children))
 	}
+
+	return result
 }
 
-function isParent(node: Node): node is Parent {
+function isParent(node: MdAstNode): node is MdAstParent {
 	if ('children' in node && Array.isArray(node.children)) return true
 	return false
 }
+
+function isLiteral(node: MdAstNode): node is MdAstLiteral {
+	if ('value' in node) return true
+	return false
+}
+
+function isTextDirective(node: MdAstNode): node is MdAstTextDirective {
+	if (node.type === 'textDirective' && 'name' in node) return true
+	return false
+}
+
+interface MdAstTextDirective extends MdAstNode {
+	name: string
+	attributes: Record<string, string>
+}

yarn.lock

@@ -1955,6 +1955,7 @@ __metadata:
     eventemitter3: "npm:^5.0.1"
     mdast-util-directive: "npm:^3.0.0"
     mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.1.0"
     micromark-extension-directive: "npm:^3.0.0"
     micromark-util-types: "npm:^2.0.0"
     mobx: "npm:^6.10.2"
@@ -8153,7 +8154,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdast-util-to-markdown@npm:^2.0.0":
+"mdast-util-to-markdown@npm:^2.0.0, mdast-util-to-markdown@npm:^2.1.0":
   version: 2.1.0
   resolution: "mdast-util-to-markdown@npm:2.1.0"
   dependencies: