.gitignore

@@ -6,5 +6,4 @@ node_modules
 dist
 assets/*.png
 assets/*.icns
-assets/*.ico
 !assets/dmg_background.png

README.md

@@ -1,66 +1,2 @@
 # ation
-– a simple keynote software for markdown files – written using `electron`
+– a simple keynote software for Markdown files – written in `electron`
-
-![ation logo](./assets/appIcon.svg)
-
-## Usage
-After opening any markdown file you can press <kbd>Tab</kbd> to show all
-available keybindings. The keybindings are chosen, so they work with commont
-presenters like the *"Logitech R400"*.
-
-### Markdown
-`ation` tries to make a presentation out of any ordinary markdown file. It
-considers `H1` titles to be a standalone slide and `H2` titles to start a new
-slide. There also is a special template for a "cover slide", which is
-provisioned by meta data at the top of your markdown file.
-
-### Meta data
-To keep compatibility with other markdown parsers, `ation` does not implement a
-`YAML` front matter or similar, but tries to parse the first `HTML` comment in
-your markdown file as meta data. The meta data is specified as simple key-value
-pairs, one pair per line, a color (`:`) seperating the key from the value.
-
-**Possible values**
-
-| Key              | Type                | Example Value                |
-| ---------------- | ------------------- | ---------------------------- |
-| title            | string              | My Keynote                   |
-| subtitle         | string              | an introduction into `ation` |
-| author           | string              | MikO, Massive Dynamic        |
-| email            | email address       | miko@mail.tld                |
-| icon             | path *(relative)*   | ./my_logo.svg                |
-| color_highlight  | CSS color value     | #4994DA                      |
-| color_background | CSS color value     | #1A1A1A                      |
-| color_text       | CSS color value     | #DDDDDD                      |
-| font             | CSS font identifier | Iosevka                      |
-
-**Example**
-```html
-<!--
-	title            : My Keynote                  
-	subtitle         : an introduction into `ation`
-	author           : MikO, Massive Dynamic       
-	email            : miko@mail.tld               
-	icon             : ./my_logo.svg               
-	color_highlight  : #4994DA                     
-	color_background : #1A1A1A                     
-	color_text       : #DDDDDD                     
-	font             : Iosevka                     
--->
-```
-
-The color values override the ones that have been set in `ation`'s settings on a
-per slideshow basis.
-
-## Installation
-Either choose a pre-built release from the [releases page][release] or build
-`ation` yourself running
-
-```bash
-npm i
-npm run dist
-```
-
-Releases are currently only available for `macOS` and `Windows`.
-
-[release]: releases 

contextAPI.js

@@ -22,14 +22,11 @@ contextBridge.exposeInMainWorld("api", {
 	},
 	openFile       : filePath => ipcRenderer.send("WindowManager::openFile", filePath),
 	closeFile      : () => ipcRenderer.send("Ation::closeFile"),
-	saveFile       : async newContent => await ipcRenderer.invoke("Ation::saveFile", newContent),
 
 	clearCache : () => webFrame.clearCache(),
 	appVersion : async () => await ipcRenderer.invoke("Ation::appVersion"),
 	fonts      : async () => await ipcRenderer.invoke("FontManager::fonts"),
-	resize     : size => ipcRenderer.invoke("WindowManager::resize", size),
+	resize     : size => ipcRenderer.invoke("SettingsManager::resize", size)
-	fullscreen : fullscreen => ipcRenderer.invoke("WindowManager::presentFullscreen", fullscreen),
-	maximize   : () => ipcRenderer.send("WindowManager::toggleMaximize")
 });
 
 contextBridge.exposeInMainWorld("appSettings", {

package.json

@@ -1,16 +1,16 @@
 {
 		"name": "ation",
-		"version": "0.4.0",
+		"version": "0.3.2",
 		"description": "a simple presentation software",
 		"main": "main.js",
 		"scripts": {
 				"start": "electron .",
-				"dev": "concurrently \"cd src/ui && cross-env BROWSER=none npm start\" \"wait-on tcp:3000 && nodemon --watch src --exec 'electron .'\"",
+				"dev": "concurrently \"cd src/ui && cross-env BROWSER=none npm start\" \"wait-on tcp:3000 && electron .\"",
 				"build": "npm i  && npm run build:assets && npm run build:react",
 				"build:react": "cd src/ui && npm i && npm run build",
-				"build:assets": "icon-gen -i assets/appIcon.svg -o ./assets --icns --ico --ico-name appIcon && xattr -cr assets/appIcon.svg",
+				"build:assets": "icon-gen -i assets/appIcon.svg -o ./assets --icns && xattr -cr assets/appIcon.svg",
-				"dist": "npm run clean && npm run build && electron-builder -mw",
+				"dist": "npm run clean && npm run build && electron-builder -m",
-				"clean": "rm -rf node_modules && rm -rf src/public/build/* && rm -rf src/public/node_modules && rm -rf dist && rm -f assets/*.icns rm -f assets/*.ico"
+				"clean": "rm -rf node_modules && rm -rf src/public/build/* && rm -rf src/public/node_modules && rm -rf dist && rm -f assets/*.icns"
 		},
 		"author": "Michael Ochmann <miko@massivedynamic.eu>",
 		"license": "MIT",
@@ -30,20 +30,10 @@
 						"assets/*.svg",
 						"package.json"
 				],
-				"win": {
-						"target": "nsis",
-						"icon": "assets/appIcon.ico"
-				},
 				"mac": {
 						"category": "public.app-category.productivity",
 						"target": [
-								{
+								"dmg"
-										"target": "dmg",
-										"arch": [
-												"x64",
-												"arm64"
-										]
-								}
 						],
 						"icon": "assets/app.icns",
 						"darkModeSupport": true,
@@ -79,12 +69,11 @@
 				}
 		},
 		"devDependencies": {
+				"electron": "^21.0.0",
 				"concurrently": "^7.4.0",
 				"cross-env": "^7.0.3",
-				"electron": "^21.0.0",
 				"electron-builder": "^23.3.3",
 				"icon-gen": "^3.0.1",
-				"nodemon": "^3.0.1",
 				"wait-on": "^6.0.1"
 		}
 }

src/Ation.js

@@ -13,7 +13,6 @@ const {parser}        = require("./Parser");
 
 app.commandLine.appendSwitch("disable-http-cache");
 
-const RECENT_FILES = 5;
 class Ation {
 	windowManager;
 	fontManager;
@@ -21,40 +20,27 @@ class Ation {
 	mainMenu;
 	watcher;
 	currentFile;
-	fileToOpen;
-	recentFiles;
 
 	constructor() {
 		if (Ation.Instances > 0)
 			throw new Error("Only one Instance of Ation possible");
-		this.fileToOpen      = null;
 		this.currentFile     = "";
 		this.watcher         = null;
 		this.windowManager   = new WindowManager(this);
 		this.fontManager     = new FontManager();
 		this.settingsManager = new SettingsManager(this);
-		this.recentFiles     = this.settingsManager.get("recentFiles", []);
 		this.mainMenu        = new MainMenu(this);
 
-		ipcMain.handle("Ation::appVersion", () => AppInfo.version);
-		ipcMain.handle("Ation::saveFile", async (_, newContent) => this.saveFile(newContent));
-		ipcMain.on("Ation::closeFile",  () => this.closeFile());
-
 		app.on("open-file", (_, path) => {
 			this.fileToOpen = path;
 		});
 
+		ipcMain.handle("Ation::appVersion", () => AppInfo.version);
+		ipcMain.on("Ation::closeFile", () => this.closeFile());
+
 		app.whenReady().then(async () => {
 			this.settingsManager.change();
 
-			// this is a hack for windows, because they do not send the
-			// `open-file` event, but pass a "cli parameter" as second
-			// argument
-			if (!this.fileToOpen) {
-				if (process.argv.length >= 2)
-					this.fileToOpen = process.argv[1];
-			}
-
 			if (this.fileToOpen)
 				this.openFile(this.fileToOpen);
 			protocol.registerFileProtocol("slideimg", (request, callback) => {
@@ -68,27 +54,6 @@ class Ation {
 		});
 	}
 
-	async saveFile(newContent) {
-		return fs.writeFile(this.currentFile, newContent, { encoding : "utf-8" })
-	}
-
-	addRecentFile(filePath) {
-		if (this.recentFiles.includes(filePath)) {
-			const position = this.recentFiles.indexOf(filePath);
-
-			this.recentFiles.splice(position, 1),
-			this.recentFiles.push(filePath);
-		} else if (this.recentFiles.length < RECENT_FILES) {
-			this.recentFiles.push(filePath);
-		} else {
-			this.recentFiles.shift();
-			this.recentFiles.push(filePath);
-		}
-
-		this.settingsManager.set("recentFiles", this.recentFiles);
-		this.mainMenu.refresh();
-	}
-
 	async openFile(filePath = null, change = false) {
 			if (!this.windowManager.mainWindow)
 				return null;
@@ -99,7 +64,7 @@ class Ation {
 					filters : [
 						{
 							name       : "Markdown files",
-							extensions : ["md"]
+							extensions : [".md"]
 						}
 					]
 				});
@@ -124,9 +89,8 @@ class Ation {
 					else
 						this.openFile(this.currentFile, true);
 				});
-				this.windowManager.mainWindow.send("Ation::openFile", [basePath, data, fileContents]);
-				this.addRecentFile(filePath);
 				Menu.getApplicationMenu().getMenuItemById("close-file").enabled = this.currentFile !== "";
+				this.windowManager.mainWindow.send("Ation::openFile", [basePath, data]);
 			} catch (error) {
 				console.log(error);
 				return;

src/MainMenu.js

@@ -1,16 +1,11 @@
 "use strict";
 
 const {Menu, app} = require("electron");
-const path        = require("path");
 
 class MainMenu {
 	constructor(parentApp) {
 		this.app  = parentApp;
 		this.menu = null;
-		this.refresh();
-	}
-
-	refresh() {
 		this.buildItems();
 		Menu.setApplicationMenu(this.menu);
 	}
@@ -57,19 +52,9 @@ class MainMenu {
 				role : "windowMenu"
 			}
 		];
-		template[1].submenu.push({
-			id      : "recent-files",
-			label   : "Recent files",
-			enabled : this.app.recentFiles.length > 0,
-			...(this.app.recentFiles.length > 0 ? {submenu : this.app.recentFiles.map(item => ({
-				label : path.basename(item),
-				click : () => this.app.openFile("" + item)
-			}))} : {}),
-		});
 
 		this.menu = Menu.buildFromTemplate(template);
 	}
-
 }
 
 module.exports = MainMenu;

src/Parser.js

@@ -28,32 +28,13 @@ class Slide {
 	}
 }
 
-class SlideDeck {
-	metaData;
-	slides;
-
-	constructor() {
-		this.metaData = null;
-		this.slides   = [];
-	}
-
-	push(slide) {
-		this.slides.push(slide);
-	}
-
-	unshift(slide) {
-		this.slides.unshift(slide);
-	}
-}
-
 const tokenize = string => {
 	//console.log(util.inspect(marked.Lexer.rules.block.listItemStart, true, null, true));
 	return new Lexer({gfm : true}).lex(string);
 };
 
-const injectTitle = (deck) => {
+const injectTitle = (deck, meta) => {
 	const title = [];
-	const meta  = deck.metaData;
 
 	if (meta?.icon)
 		title.push({
@@ -112,29 +93,11 @@ const injectTitle = (deck) => {
 	return deck;
 }
 
-const parseMetaData = source => {
-	const meta       = {};
-
-	for (const attribute of source.split('\n')) {
-		const trimmed = attribute.trim();
-		if (trimmed.length < 1 || (trimmed.charAt(0) === '/' && trimmed.charAt(1) === '/'))
-			continue;
-
-		const [key, value] = trimmed.split(':');
-		if (key.trim().length < 1 || value.trim().length < 1)
-			continue;
-		meta[key.trim()]   = value.trim();
-	}
-
-	console.table(meta);
-
-	return meta;
-};
-
 const parser = string => {
 	const tokenStream  = tokenize(string);
-	const slideDeck    = new SlideDeck();
+	const slideDeck    = [];
 	let   currentSlide = new Slide();
+	let   metaData     = null;
 
 	for (const token of tokenStream) {
 		if (token.type === "space" || (token.type === "heading" && token.depth === 1) || token.type === "html") {
@@ -142,10 +105,14 @@ const parser = string => {
 				slideDeck.push(currentSlide);
 				currentSlide = new Slide();
 			}
-			// basically, if this is the forst comment, we expect meta data
+			if (!metaData && token.type === "html" && token.text.charAt(2) === '-') {
-			if (!slideDeck.metaData && token.type === "html" && token.text.charAt(2) === '-') {
 				const metaString = token.text.replace(/(<!--|-->)/gi, "");
-				slideDeck.metaData = parseMetaData(metaString);
+				const meta       = {};
+				for (const attribute of metaString.split(';')) {
+					const [key, value] = attribute.split(':');
+					meta[key.trim()] = value.trim();
+				}
+				metaData = meta;
 			}
 
 			if (token.type === "heading")
@@ -157,7 +124,7 @@ const parser = string => {
 	if (currentSlide.content.length > 0)
 		slideDeck.push(currentSlide);
 
-	return injectTitle(slideDeck);
+	return injectTitle(slideDeck, metaData);
 };
 
 module.exports = {

src/SettingsManager.js

@@ -20,6 +20,7 @@ class SettingsManager {
 		}
 		this.data = JSON.parse(fsn.readFileSync(SettingsManager.File, {encoding : "utf-8"}));
 
+		ipcMain.handle("SettingsManager::resize", (_, height) => app.windowManager.windows.settings.setSize(800, height, true));
 		ipcMain.handle("SettingsManager::get",    (_, key, defaultValue = null) => this.get(key, defaultValue));
 		ipcMain.handle("SettingsManager::set",    (_, key, value) => this.set(key, value));
 		ipcMain.handle("SettingsManager::all",    () => this.data);
@@ -38,7 +39,7 @@ class SettingsManager {
 	}
 
 	change() {
-		this.app.windowManager.mainWindow?.send("SettingsManager::change", this.data);
+		this.app.windowManager.mainWindow.send("SettingsManager::change", this.data);
 	}
 
 	save() {

src/WindowManager.js

@@ -2,6 +2,7 @@
 
 const {app, BrowserWindow, ipcMain, globalShortcut} = require("electron");
 const path                                          = require("path");
+const util                                          = require("util");
 
 const {isDevelopment} = require("./Util");
 
@@ -18,15 +19,12 @@ class WindowManager {
 
 		ipcMain.on("WindowManager::openFileDialog", () => this.app.openFile());
 		ipcMain.on("WindowManager::openFile", (_, path) => this.app.openFile(path));
-		ipcMain.on("WindowManager::toggleMaximize", () => this.mainWindow?.isMaximized() ? this.mainWindow?.unmaximize() : this.mainWindow?.maximize());
-		ipcMain.handle("WindowManager::resize", (_, height) => this.windows.settings.setSize(800, height + (process.platform === "win32" ? 50 : 0), true));
-		ipcMain.handle("WindowManager::presentFullscreen", (_, fullscreen) => this.windows.main.setFullScreen(fullscreen));
 	}
 
 	init() {
 		this.mainWindow = WindowManager._CreateWindow({
-			fullscreen      : false,
+			fullscreen     : false,
-			fullscreenable  : true
+			fullscreenable : true
 		});
 		this.windows.settings = WindowManager._CreateWindow({
 			height         : 300,
@@ -36,13 +34,6 @@ class WindowManager {
 			show           : false
 		}, this.mainWindow, false);
 
-		// on windows and linux we need to hide the main menu in the settings
-		// window, because it would look odd.
-		if (["win32", "linux"].includes(process.platform)) {
-			this.windows.settings.removeMenu();
-		
-		}
-
 		this.windows.settings.on("close", event => {
 			event.preventDefault();
 			this.windows.settings.hide();
@@ -70,13 +61,12 @@ class WindowManager {
 
 	static _CreateWindow(options = null, parent = null, show = true) {
 		const windowOptions = {
-			width           : 800,
+			width          : 800,
-			height          : 600,
+			height         : 600,
-			show            : false,
+			show           : false,
-			devTools        : isDevelopment(),
+			devTools       : isDevelopment(),
-			titleBarStyle   : "hiddenInset",
+			titleBarStyle  : "hiddenInset",
-			autoHideMenuBar : process.platform === "win32",
+			webPreferences : {
-			webPreferences  : {
 				contextIsolation : true,
 				preload          : path.join(__dirname, "..", "contextAPI.js")
 			},

src/ui/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "homepage": "./",
   "dependencies": {
-    "@monaco-editor/react": "^4.6.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/ui/src/assets/css/_slide.scss

@@ -9,8 +9,8 @@
 	text-align: center;
 	aspect-ratio: 1.333;
 	overflow: hidden;
-	background: color(slideBackground);
+	background: color(background);
-	color: color(slideForeground);
+	color: color(foreground);
 
 	h1, h2, h3, h4, h5 {
 		margin: 0 0 1em 0;
@@ -83,8 +83,7 @@
 		p {
 			font-style: italic;
 			font-size: 1em;
-			color: color(slideForeground);
+			color: color(scrollbar);
-			opacity: 0.3;
 			margin: 0;
 			line-height: normal;
 
@@ -122,14 +121,8 @@
 		color: color(hightlight);
 	}
 
-	hr {
-		display: block;
-		border: 0.5px solid color(hightlight);
-		width: 100%;
-	}
-
 	pre {
-		//font-size: 0.3em;
+		font-size: 0.3em;
 		width: 90%;
 		padding: 1em !important;
 	

src/ui/src/assets/css/_variables.scss

@@ -1,9 +1,7 @@
 $colors : (
 	//background : #272822,
 	background        : #1a1a1a,
-	slideBackground   : #1a1a1a,
 	foreground        : #ddd,
-	slideForeground   : #ddd,
 	fadedForeground   : #888,
 	sidebarBackground : #333,
 	mainBackground    : #222,

src/ui/src/assets/css/_window.scss

@@ -11,10 +11,6 @@
 		grid-column: 1 / span 2;
 	}
 
-	&.edit {
-		//grid-template-columns: 10% auto;
-	}
-
 	main {
 		background: color(mainBackground);
 		overflow-y: auto;
@@ -32,15 +28,6 @@
 				font-size: calc(3vw * 0.7);
 			}
 		}
-
-		&.edit {
-			display: grid;
-			grid-template-columns: 1fr 2fr;
-
-			& > .slide:first-child {
-				font-size: calc(3vw / 3 * 0.7);
-			}
-		}
 	}
 
 	&.fullscreen {

src/ui/src/components/Ation.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useContext, useCallback} from "react";
+import React, {useEffect, useState, useContext} from "react";
 
 import SlidesList      from "./SlidesList";
 import Mode            from "../models/Mode";
@@ -8,34 +8,29 @@ import Blackout        from "./Blackout";
 import NoFile          from "./NoFile";
 import Toolbar         from "./Toolbar";
 import Tips            from "./Tips";
-import Editor          from "./Editor";
 
 import SlideContext    from "../shared/SlideContext";
 import SettingsContext from "../shared/SettingsContext";
 
 const Ation = () => {
-	const {font, highlightColor, backgroundColor, color} = useContext(SettingsContext);
+	const {font, highlightColor}  = useContext(SettingsContext);
-	const [mode, setMode]                                = useState(Mode.NORMAL);
+	const [mode, setMode]         = useState(Mode.NORMAL);
-	const [deck, setDeck]                                = useState([]);
+	const [deck, setDeck]         = useState([]);
-	const [meta, setMeta]                                = useState(null);
+	const [slide, setSlide]       = useState(0);
-	const [slide, setSlide]                              = useState(0);
+	const [basePath, setBasePath] = useState("");
-	const [basePath, setBasePath]                        = useState("");
+	const [showTips, setShowTips] = useState(false);
-	const [showTips, setShowTips]                        = useState(false);
+	const [version, setVersion]   = useState("0.0.0");
-	const [version, setVersion]                          = useState("0.0.0");
-	const [source, setSource]                            = useState("");
 
 	useEffect(() => {
 		window.api.onFileOpen(presentation => {
 			window.api.clearCache();
-			const [newBasePath, slideDeck, fileContents] = presentation;
+			const [newBasePath, slideDeck] = presentation;
 			if (!slideDeck)
 				return;
 			if (slide >= slideDeck.length)
 				setSlide(0);
-			setSource(fileContents);
-			setMeta(slideDeck.metaData);
 			setBasePath(newBasePath);
-			setDeck(slideDeck.slides);
+			setDeck(slideDeck);
 		});
 		window.api.onFileClose(() => {
 			setBasePath("");
@@ -49,14 +44,7 @@ const Ation = () => {
 
 	const openFile = () => {
 		window.api.openFileDialog();
-	};
+	}
-
-	const toggleEdit = useCallback(() => {
-		if (mode === Mode.NORMAL)
-			setMode(Mode.EDIT);
-		else if (mode === Mode.EDIT)
-			setMode(Mode.NORMAL);
-	}, [mode]);
 
 	return (
 		<>
@@ -64,21 +52,16 @@ const Ation = () => {
 				<NoFile openFile={openFile} />
 			: (
 				<SlideContext.Provider value={{slide, setSlide, mode, setMode, basePath, slideCount : deck.length}}>
-					<section className={`window${mode === Mode.PRESENT ? " fullscreen" : (mode === Mode.EDIT ? " edit" : "")}`}>
+					<section className={`window${mode === Mode.PRESENT ? " fullscreen" : ""}`}>
-						<Toolbar openFile={openFile} setShowTips={setShowTips} version={version} toggleEdit={toggleEdit} />
+						<Toolbar openFile={openFile} setShowTips={setShowTips} version={version} />
-						<SlidesList deck={deck} meta={meta} font={font} />
+						<SlidesList deck={deck} />
-						<main className={`main ${mode === Mode.EDIT ? "edit" : ""}`} style={{
+						<main className="main" style={{"--color-hightlight" : highlightColor}}>
-							"--color-hightlight" : meta?.color_highlight || highlightColor,
+							<Slide data={deck[slide] || null} style={{fontFamily : font}}/>
-							"--color-slideBackground" : meta?.color_background || backgroundColor,
-							"--color-slideForeground" : meta?.color_text || color
-						}}>
-							<Slide data={deck[slide] || null} style={{fontFamily : meta?.font || font}}/>
-							<Editor show={mode === Mode.EDIT} source={source} toggleEdit={toggleEdit} />
 						</main>
 						<Tips show={showTips} />
 					</section>
 					<Blackout show={mode === Mode.BLACKOUT} />
-					<KeyboardControl mode={mode} setMode={setMode} deck={deck} openFile={openFile} setShowTips={setShowTips} toggleEdit={toggleEdit} />
+					<KeyboardControl mode={mode} setMode={setMode} deck={deck} openFile={openFile} setShowTips={setShowTips} />
 				</SlideContext.Provider>
 			)}
 		</>

src/ui/src/components/Editor.js

@@ -1,36 +0,0 @@
-import React  from "react";
-import Monaco from "@monaco-editor/react";
-
-const Editor = ({show, source}) => {
-
-	const editorMount = (instance, monaco) => {
-		// NOTE: I have no idea, why we have to re-add these ourselves, but this
-		//       code works, so be it. --MikO
-		instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyC, () => instance.trigger("source","editor.action.clipboardCopyAction"));
-		instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyV, () => instance.trigger("source","editor.action.clipboardPasteAction"));
-		instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyX, () => instance.trigger("source","editor.action.clipboardCutAction"));
-		instance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => window.api.saveFile(instance.getValue()));
-	}
-
-	if (!show)
-		return <></>;
-
-	return (
-		<>
-			<Monaco	
-				defaultLanguage="markdown"
-				height="100%"
-				options={{
-					minimap : {
-						enabled : false
-					}
-				}}
-				onMount={editorMount}
-				keepCurrentModel={true}
-				defaultValue={source}
-				theme="vs-dark" />
-		</>
-	);
-};
-
-export default Editor;

src/ui/src/components/KeyboardControl.js

@@ -3,7 +3,7 @@ import {useContext, useEffect, version} from "react";
 import SlideContext from "../shared/SlideContext";
 import Mode         from "../models/Mode";
 
-const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit}) => {
+const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips}) => {
 	const {slide, setSlide} = useContext(SlideContext);
 
 	useEffect(() => {
@@ -18,8 +18,6 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 		}
 
 		const keyHandler = event => {
-			const commandOrControl = event.metaKey || event.ctrlKey;
-
 			switch(event.key) {
 				case "Escape":
 					setShowTips(false);
@@ -27,13 +25,7 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 				default:
 					break;
 			}
-			if (!mode || !setMode || !deck || !setShowTips)
+			if (!mode || !setMode || !deck || !setShowTips)
-				return;
-
-			if (commandOrControl && event.key === "e")
-				toggleEdit();
-
-			if (mode === Mode.EDIT)
 				return;
 
 			switch (event.key) {
@@ -59,7 +51,7 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 					setSlide(slide + 1);
 					break;
 				case "b": // PRESENTER
-					if (mode === Mode.NORMAL || mode === Mode.EDIT)
+					if (mode === Mode.NORMAL)
 						return;
 				 	setMode(mode === Mode.BLACKOUT ? Mode.PRESENT : Mode.BLACKOUT);
 					break;
@@ -93,7 +85,7 @@ const KeyboardControl = ({openFile, mode, setMode, deck, setShowTips, toggleEdit
 			window.removeEventListener("fullscreenchange", fullscreenHandler);
 		}
 
-	}, [slide, setSlide, mode, setMode, deck, setShowTips, openFile, toggleEdit]);
+	}, [slide, setSlide, mode, setMode, deck, setShowTips, openFile]);
 };
 
 export default KeyboardControl;

src/ui/src/components/SlideItem.js

@@ -5,15 +5,6 @@ import {monokai}         from "react-syntax-highlighter/dist/esm/styles/hljs";
 
 import SlideContext from "../shared/SlideContext";
 
-const EscapeSequences = {
-	""" : '"',
-	"&lt;"   : "<",
-	"&gt;"   : ">",
-	"&amp;"  : "&",
-	"&#39;"  : "'"
-};
-const EscapeSequencesRegex = new RegExp(Object.keys(EscapeSequences).join('|'), "g");
-
 const Children = ({items}) => {
 	if (items instanceof Array)
 		return <>{items.map((child, index) => <SlideItem item={child} key={index} />)}</>;
@@ -23,11 +14,8 @@ const Children = ({items}) => {
 const SlideItem = ({item}) => {
 	const {basePath} = useContext(SlideContext);
 
-	const processEscapeSequences = text => {
-		return text.replace(EscapeSequencesRegex, match => EscapeSequences[match]);
-	};
-
 	const content = useMemo(() => {
+		
 		switch (item.type) {
 			case "heading":
 				const level = item.level || item.depth;
@@ -62,8 +50,6 @@ const SlideItem = ({item}) => {
 						: null}
 					</span>
 				)
-			case "hr":
-				return <hr />
 			case "blockquote":
 				return <blockquote><Children items={item.tokens} /></blockquote>
 			case "paragraph":
@@ -78,25 +64,19 @@ const SlideItem = ({item}) => {
 				return <i><Children items={item.tokens} /></i>
 			case "html":
 				return <span dangerouslySetInnerHTML={{__html : item.raw}}></span>
-			case "br":
-				return <br />;
 			case "link":
 			case "text":
-				return <>{item.tokens ? <Children items={item.tokens} /> : processEscapeSequences(item.text)}</>
+				return <>{item.tokens ? <Children items={item.tokens} /> : item.text}</>
 			case "escape":
 				switch(item.text) {
 					case "&lt;":
 						return '<';
 					case "&gt;":
 						return '>';
-					case '"':
-					case "&quot;":
-						return '"';
-					case "&#39;":
-						return "'";
 					default:
 						return "";
 				}
+				break;
 			default:
 				return "UNKNOWN ITEM" + JSON.stringify(item);
 		}
@@ -109,4 +89,34 @@ const SlideItem = ({item}) => {
 	);
 };
 
-export default SlideItem;
+export default SlideItem;
+
+/* {
+	"type": "paragraph",
+	"raw": "This is a very fancy **bold** keynote",
+	"text": "This is a very fancy **bold** keynote",
+	"tokens": [
+		{
+			"type": "text",
+			"raw": "This is a very fancy ",
+			"text": "This is a very fancy "
+		},
+		{
+			"type": "strong",
+			"raw": "**bold**",
+			"text": "bold",
+			"tokens": [
+				{
+					"type": "text",
+					"raw": "bold",
+					"text": "bold"
+				}
+			]
+		},
+		{
+			"type": "text",
+			"raw": " keynote",
+			"text": " keynote"
+		}
+	]
+} */

src/ui/src/components/SlidesList.js

@@ -4,13 +4,13 @@ import Slide           from "./Slide";
 import SlideContext    from "../shared/SlideContext";
 import SettingsContext from "../shared/SettingsContext";
 
-const SlidesList = ({deck, meta, font, style}) => {
+const SlidesList = ({deck}) => {
-	const {highlightColor, backgroundColor, color} = useContext(SettingsContext);
+	const {highlightColor}  = useContext(SettingsContext);
-	const {slide, setSlide}                        = useContext(SlideContext);
+	const {slide, setSlide} = useContext(SlideContext);
-	const container                                = useRef();
+	const container         = useRef();
-	const current                                  = useRef();
+	const current           = useRef();
-	const [scale, setScale]                        = useState(1);
+	const [scale, setScale] = useState(1);
-	const [first, setFirst]                        = useState(true);
+	const [first, setFirst] = useState(true);
 
 	const sizeChange = useCallback(() => {
 		if (!container.current)
@@ -34,7 +34,7 @@ const SlidesList = ({deck, meta, font, style}) => {
 		if (!current.current)
 			return;
 		current.current.scrollIntoView({inline : "nearest"});
-	}, [current, slide, first]);
+	}, [current, slide]);
 
 	useEffect(() => {
 		const resizeListener = () => {
@@ -49,14 +49,10 @@ const SlidesList = ({deck, meta, font, style}) => {
 	}, [sizeChange, deck]);
 
 	return (
-		<aside className="slides-list" ref={container} style={{
+		<aside className="slides-list" ref={container} style={{"--color-hightlight" : highlightColor}}>
-			"--color-hightlight" : meta?.color_highlight       || highlightColor,
-			"--color-slideBackground" : meta?.color_background || backgroundColor,
-			"--color-slideForeground" : meta?.color_text       || color
-		}}>
 			{deck.map((currentSlide, index) => (
 				<div className="slide-wrap" key={index}>
-					<Slide data={currentSlide} className={index === slide ? "active" : ""} style={{transform : `scale(${scale}) translateX(0)`, fontFamily: meta?.font || font}} onClick={() => setSlide(index)} ref={index === slide ? current : null} />
+					<Slide data={currentSlide} className={index === slide ? "active" : ""} style={{transform : `scale(${scale}) translateX(0)`}} onClick={() => setSlide(index)} ref={index === slide ? current : null} />
 				</div>
 			))}
 		</aside>

src/ui/src/components/Tips.js

@@ -5,8 +5,6 @@ const Cheatsheet = Object.freeze([
 	["Stop presentation",  "ESC"],
 	["Open file",          "⌘+O"],
 	["Close file",         "⌘+W"],
-	["Save file",          "⌘+S"],
-	["Toggle editor",      "⌘+E"],
 	["Next slide",         "→, Page up"],
 	["Last slide",         "←, Page down"],
 	["Black screen out",   "B"],

src/ui/src/components/Toolbar.js

@@ -1,33 +1,28 @@
 import React, {useContext} from "react";
 
-import {Folder2Open, Cast, InfoCircle, XSquare, LayoutSplit} from "react-bootstrap-icons";
+import {Folder2Open, Cast, InfoCircle, XSquare} from "react-bootstrap-icons";
 
 import SlideContext from "../shared/SlideContext";
 import Mode         from "../models/Mode";
 
 import {ReactComponent as Logo} from "../assets/images/logo_ation.svg";
 
-const Toolbar = ({openFile, setShowTips, version, toggleEdit}) => {
+const Toolbar = ({openFile, setShowTips, version}) => {
 	const {setMode, setSlide, slideCount} = useContext(SlideContext);
 
 	const present = () => {
 		setMode(Mode.PRESENT);
 		setSlide(0);
 		document.documentElement.requestFullscreen();
-	};
+	}
-
-	const toggleMaximize = () => {
-		window.api.maximize();
-	};
 
 	return (
-		<nav className="toolbar" onDoubleClick={toggleMaximize}>
+		<nav className="toolbar">
 			<button onClick={openFile} title="Open file [⌘+O]"><Folder2Open /></button>	
 			<button onClick={present} title="Start presentation [F5]"><Cast /></button>	
 			<Logo />
 			<button onClick={() => window.api.closeFile()} title="Close file [⌘+W]" disabled={slideCount < 1}><XSquare /></button>
 			<button onClick={() => setShowTips(true)} title="Show tips [TAB]"><InfoCircle /></button>	
-			<button onClick={toggleEdit} title="Toggle editor [⌘+E]"><LayoutSplit /></button>	
 			<small>v{version}</small>
 		</nav>
 	);

src/ui/src/components/settings/Appearance.js

@@ -1,10 +1,8 @@
 import React, {useState, useEffect} from "react";
 
 const Appearance = ({fonts}) => {
-	const [font, setFont]                       = useState("");
+	const [font, setFont]                     = useState("");
-	const [highlightColor, setHighlightColor]   = useState("");
+	const [highlightColor, setHighlightColor] = useState("");
-	const [backgroundColor, setBackgroundColor] = useState("");
-	const [color, setColor]                     = useState("");
 
 	const changeFont = event => {
 		const value = event.target.value;
@@ -18,25 +16,9 @@ const Appearance = ({fonts}) => {
 		window.appSettings.set("highlightColor", value);
 	};
 
-	const changeBackground = event => {
-		const value = event.target.value;
-		setBackgroundColor(value);
-		window.appSettings.set("backgroundColor", value);
-	};
-	
-	const changeForegroundColor = event => {
-		const value = event.target.value;
-		setColor(value);
-		window.appSettings.set("color", value);
-	};
-
 	useEffect(() => {
-		(async () => {
+		(async setFont => setFont(await window.appSettings.get("font", "Iosevka")))(setFont);
-			setBackgroundColor(await window.appSettings.get("backgroundColor", "#1a1a1a"));
+		(async setHighlightColor => setHighlightColor(await window.appSettings.get("highlightColor", "#e6c17b")))(setHighlightColor);
-			setHighlightColor(await window.appSettings.get("highlightColor", "#e6c17b"));
-			setFont(await window.appSettings.get("font", "Iosevka"));
-			setColor(await window.appSettings.get("color", "#dddddd"));
-		})(setFont, setHighlightColor, setBackgroundColor, setColor);
 	}, []);
 
 	return (
@@ -47,10 +29,6 @@ const Appearance = ({fonts}) => {
 			</select>
 			<label>Global highlight color:</label>
 			<input type="color" value={highlightColor} onChange={changeColor} />
-			<label>Slide background color:</label>
-			<input type="color" value={backgroundColor} onChange={changeBackground} />
-			<label>Slide font color:</label>
-			<input type="color" value={color} onChange={changeForegroundColor} />
 		</section>
 	);
 };

src/ui/src/models/Mode.js

@@ -1,8 +1,7 @@
 const Mode = Object.freeze({
 	NORMAL   : 1,
 	PRESENT  : 2,
-	BLACKOUT : 3,
+	BLACKOUT : 3
-	EDIT     : 4
 });
 
 export default Mode;