added new lib for md parsing

contextAPI.js

@@ -3,5 +3,5 @@
 const {contextBridge, ipcRenderer} = require("electron");
 
 contextBridge.exposeInMainWorld("api", {
-	openFile : () => ipcRenderer.invoke("WindowManager::openFile").then(response => alert(JSON.stringify(response)))
+	openFile : async () => ipcRenderer.invoke("WindowManager::openFile")
 });

package.json

@@ -11,8 +11,7 @@
   "license": "MIT",
   "dependencies": {
     "electron": "^21.0.0",
-    "jsonmark": "0.0.1",
+    "marked": "^4.1.0"
-    "markdown-json": "^1.6.1"
   },
   "devDependencies": {
     "concurrently": "^7.4.0",

src/Parser.js

@@ -0,0 +1,47 @@
+"use strict";
+
+const {lexer} = require("marked");
+
+class Slide {
+	content;
+
+	constructor(content = []) {
+		this.content = content;
+	}
+
+	append(object) {
+		this.content.push(object);
+	}
+}
+
+const tokenize = string => {
+	return lexer(string);
+};
+
+const parser = string => {
+	const tokenStream  = tokenize(string);
+	const slideDeck    = [];
+	let   currentSlide = new Slide();
+
+	for (const token of tokenStream) {
+		if ( token.type === "space" || token.type === "heading" && token.depth === 1) {
+			if (currentSlide.content.length > 0) {
+				slideDeck.push(currentSlide);
+				currentSlide = new Slide();
+			}
+
+			if (token.type === "heading")
+				slideDeck.push(new Slide([token]));
+			continue;
+		}
+		currentSlide.append(token);
+	}
+	if (currentSlide.content.length > 0)
+		slideDeck.push(currentSlide);
+
+	return slideDeck;
+};
+
+module.exports = {
+	parser
+}

src/WindowManager.js

@@ -3,10 +3,10 @@
 const {app, BrowserWindow, ipcMain, dialog} = require("electron");
 const path                                  = require("path");
 const fs                                    = require("fs/promises");
+const util                                  = require("util");
 
-const JSONMark = require("jsonmark");
+const {isDevelopment} = require("./Util");
-
+const {parser}        = require("./Parser");
-const {isDevelopment}      = require("./Util");
 
 class WindowManager {
 	mainWindow;
@@ -36,9 +36,7 @@ class WindowManager {
 				return null;
 
 			const fileContents = await fs.readFile(result.filePaths[0], {encoding : "utf-8"});
-			const data         = JSONMark.parse(fileContents);
+			const data         = parser(fileContents);
-
-			console.log(data);
 
 			return data;
 		});
@@ -47,8 +45,6 @@ class WindowManager {
 	init() {
 		this.mainWindow = WindowManager._CreateWindow();
 
-		this.mainWindow.
-
 		if (isDevelopment())
 			this.mainWindow.loadURL("http://localhost:3000");
 		else

src/ui/src/assets/css/_slidesList.scss

@@ -1,3 +1,4 @@
 .slides-list {
 	background: #222;
+	overflow-y: auto;
 }

src/ui/src/components/Ation.js

@@ -5,6 +5,7 @@ import Modes      from "../models/Modes";
 
 const Ation = () => {
 	const [mode, setMode] = useState(Modes.NORMAL);
+	const [deck, setDeck] = useState([]);
 
 	useEffect(() => {
 		const keyHandler = event => {
@@ -33,12 +34,20 @@ const Ation = () => {
 
 	}, []);
 
+	const openFile = async () => {
+		const slideDeck = await window.api.openFile();
+
+		if (!slideDeck)
+			return;
+		setDeck(slideDeck);
+	}
+
 	return (
 		<section className={`window${mode === Modes.PRESENT ? " fullscreen" : ""}`}>
-			<SlidesList />
+			<SlidesList deck={deck} />
 			<main className="main">
 				MAIN
-				<button onClick={() => window.api.openFile()}>open</button>	
+				<button onClick={openFile}>open</button>	
 			</main>
 		</section>
 	);

src/ui/src/components/Slide.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Slide = ({data}) => {
+	console.log(data);
+	return (
+		<article className="slide">
+			{data.content.map(item => {
+				switch (item.type) {
+					case "heading":
+						return <h1>{item.raw}</h1>
+						break;
+					default:
+						return JSON.stringify(item);
+				}
+			})}
+		</article>
+	);
+};
+
+export default Slide;

src/ui/src/components/SlidesList.js

@@ -1,21 +1,13 @@
-import React, {useState} from "react";
+import React from "react";
 
-import Slide from "../models/Slide";
+import Slide from "./Slide";
 
-const Slides = [
+const SlidesList = ({deck}) => {
-	new Slide("", "ABC"),
-	new Slide("", "DEF"),
-	new Slide("", "GHI"),
-	new Slide("", "JKL"),
-	new Slide("", "MNO")
-];
-
-const SlidesList = () => {
 	return (
 		<aside className="slides-list">
-			{Slides.map((slide, index) => (
+			{deck.map((slide, index) => (
 				<div key={index}>
-					{slide.content}
+					<Slide data={slide} />
 				</div>
 			))}
 		</aside>