Added markdown preview

notangelmario · Oct 16, 2022 · 771838e · 771838e
1 parent 216e014
commit 771838e
Show file tree

Hide file tree

Showing 21 changed files with 55 additions and 75 deletions.
diff --git a/src/pages/index.html → index.html b/src/pages/index.html → index.html
@@ -11,7 +11,7 @@
 		<meta name="msapplication-TileColor" content="#ffffff">
 		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1e1e1e">
 		<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fffffe">
-		<link rel="stylesheet" href="../app.css"/>
+		<link rel="stylesheet" href="./src/app.css"/>
 		<title>Miniated</title>
 		<meta name="description" content="Miniated is a minimalist web editor based on Monaco Editor."/>
 	</head>
@@ -31,6 +31,6 @@ <h1>
 				</p>
 			</div>
 		</div>
-		<script type="module" src="../main.ts"></script>
+		<script type="module" src="./src/main.ts"></script>
 	</body>
 </html>
diff --git a/src/pages/markdown-preview.html → markdown-preview.html b/src/pages/markdown-preview.html → markdown-preview.html
@@ -9,18 +9,15 @@
 		<link rel="manifest" href="/manifest.json">
 		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000">
 		<meta name="msapplication-TileColor" content="#ffffff">
-		<!-- <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1e1e1e"> -->
-		<!-- <meta name="theme-color" media="(prefers-color-scheme: light)" content="#fffffe"> -->
+		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1e1e1e">
+		<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fffffe">
 		<!-- <link rel="stylesheet" href="./src/app.css"/> -->
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css"/>
-
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pixelbrackets/gfm-stylesheet/dist/gfm.min.css" />		
 		<title>Miniated &middot; Markdown Preview</title>
 		<meta name="description" content="Miniated is a minimalist web editor based on Monaco Editor."/>
 	</head>
 	<body>
-		<main>
-
-		</main>
-		<script type="module" src="../markdown_preview.ts"></script>
+		<main></main>		
+		<script type="module" src="./src/markdown_preview.ts"></script>
 	</body>
 </html>
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "miniated",
   "private": true,
   "author": "Savin Angel-Mario ([email protected])",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/public/FiraCode-Regular.ttf → public/FiraCode-Regular.ttf b/src/public/FiraCode-Regular.ttf → public/FiraCode-Regular.ttf
diff --git a/src/public/android-chrome-192x192.png → public/android-chrome-192x192.png b/src/public/android-chrome-192x192.png → public/android-chrome-192x192.png
diff --git a/src/public/android-chrome-512x512.png → public/android-chrome-512x512.png b/src/public/android-chrome-512x512.png → public/android-chrome-512x512.png
diff --git a/src/public/apple-touch-icon.png → public/apple-touch-icon.png b/src/public/apple-touch-icon.png → public/apple-touch-icon.png
diff --git a/src/public/browserconfig.xml → public/browserconfig.xml b/src/public/browserconfig.xml → public/browserconfig.xml
diff --git a/src/public/favicon-16x16.png → public/favicon-16x16.png b/src/public/favicon-16x16.png → public/favicon-16x16.png
diff --git a/src/public/favicon-32x32.png → public/favicon-32x32.png b/src/public/favicon-32x32.png → public/favicon-32x32.png
diff --git a/src/public/favicon.ico → public/favicon.ico b/src/public/favicon.ico → public/favicon.ico
diff --git a/src/public/manifest.json → public/manifest.json b/src/public/manifest.json → public/manifest.json
diff --git a/src/public/mstile-150x150.png → public/mstile-150x150.png b/src/public/mstile-150x150.png → public/mstile-150x150.png
diff --git a/src/public/robots.txt → public/robots.txt b/src/public/robots.txt → public/robots.txt
diff --git a/src/public/safari-pinned-tab.svg → public/safari-pinned-tab.svg b/src/public/safari-pinned-tab.svg → public/safari-pinned-tab.svg
diff --git a/src/lib/compat.ts b/src/lib/compat.ts
@@ -1,13 +1,6 @@
 
-export function isCompat() {
-	//@ts-ignore
-	// if (!('launchQueue' in window && 'files' in LaunchParams.prototype)) return false;
-	if (!("showOpenFilePicker" in window)) return false;
-	if (isMobile()) return false;
-
 
-	return true;
-}
+export const isCompat = !isMobile() && ("showOpenFilePicker" in window)
 
 export function isMobile() {
 	let check = false;

diff --git a/src/lib/editor.ts b/src/lib/editor.ts
@@ -1,6 +1,7 @@
 import monaco from "./monaco";
 import { onClose, onOpen, onSave, initDropFile, initLaunchWithFile, onCreate, startAutosave } from "./file";
 import { Store } from "./store";
+import { addMarkdownActions } from "./languages/markdown";
 
 // Monaco editor doesn't have an API to change default keybindings
 // so we have to tap into internal api to change default keybindings
@@ -62,13 +63,13 @@ export function disableBrowserKeybindings() {
 
 function addActions(editor: monaco.editor.IStandaloneCodeEditor, store: Store) {
 	let disableAutosave: () => void = () => null;
-	let previewWindow: Window | null = null;
-	let previewWatcher: number | null = null;
 	const fileAvailableContext = editor.createContextKey<boolean>("fileAvailable", false);
 
 	initDropFile(document.body, editor, store, fileAvailableContext, disableAutosave);
 	initLaunchWithFile(editor, store, fileAvailableContext, disableAutosave);
 
+	addMarkdownActions(editor);
+
 	editor.addAction({
 		id: "miniated.open_file",
 		label: "Open File...",
@@ -115,26 +116,7 @@ function addActions(editor: monaco.editor.IStandaloneCodeEditor, store: Store) {
 		},
 		keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS]
 	});
-	editor.addAction({
-		id: "miniated.export_markdown_html",
-		precondition: "fileAvailable",
-		label: "Export Markdown File to HTML...",
-		run: async () => {
-			const { exportToHtml } = await import("./languages/markdown");
-
-			exportToHtml(editor);
-		}
-	});
-	editor.addAction({
-		id: "miniated.export_markdown_html",
-		precondition: "fileAvailable",
-		label: "Export Markdown File to HTML...",
-		run: async () => {
-			const { exportToHtml } = await import("./languages/markdown");
-
-			exportToHtml(editor);
-		}
-	});
+
 	editor.addAction({
 		id: "miniated.close_file",
 		label: "Close File",
@@ -145,31 +127,7 @@ function addActions(editor: monaco.editor.IStandaloneCodeEditor, store: Store) {
 		},
 		keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyQ]
 	});
-	editor.addAction({
-		id: "miniated.open_markdown_preview",
-		label: "Open Markdown Preview",
-		// precondition: "fileAvailable",
-		run: async () => {
-			const { openPreviewWindow, startPreviewWatcher } = await import("./languages/markdown");
-
-			previewWindow = openPreviewWindow(editor);
-			if (previewWindow) {
-				previewWatcher = startPreviewWatcher(editor, previewWindow);
-			}
-		}
-	});
-	editor.addAction({
-		id: "miniated.close_markdown_preview",
-		label: "Close Markdown Preview",
-		// precondition: "fileAvailable",
-		run: async () => {
-			const { stopPreviewWatcher } = await import("./languages/markdown");
-
-			if (previewWatcher && previewWindow) {
-				stopPreviewWatcher(previewWatcher, previewWindow);
-			}
-		}
-	});
+
 	editor.addAction({
 		id: "miniated.open_repo",
 		label: "Show Miniated on GitHub",

diff --git a/src/lib/languages/markdown.ts b/src/lib/languages/markdown.ts
@@ -3,8 +3,33 @@ import { createNotice } from "../status";
 import monaco from "../monaco";
 import { writeFile } from "../file";
 
+export function addMarkdownActions(editor: monaco.editor.IStandaloneCodeEditor) {
+	editor.addAction({
+		id: "miniated.export_markdown_html",
+		precondition: "fileAvailable",
+		label: "Export Markdown File to HTML...",
+		run: async () => {
+			exportToHtml(editor);
+		}
+	});
+	editor.addAction({
+		id: "miniated.open_markdown_preview",
+		label: "Open Markdown Preview",
+		precondition: "fileAvailable",
+		run: async () => {
+			const previewWindow = openPreviewWindow(editor);
+
+			if (previewWindow) {
+				startPreviewWatcher(editor, previewWindow);
+			} else {
+				createNotice("Could not open preview window.");
+			}
+		}
+	});
+}
+
 export function openPreviewWindow(editor: monaco.editor.IStandaloneCodeEditor) {
-	const preview = window.open("markdown-preview.html", "_blank");
+	const preview = window.open("/markdown-preview.html", "blank", "width=800,height=600");
 
 	if (preview) {
 		preview.postMessage(editor.getValue());
@@ -16,6 +41,13 @@ export function openPreviewWindow(editor: monaco.editor.IStandaloneCodeEditor) {
 export function startPreviewWatcher(editor: monaco.editor.IStandaloneCodeEditor, previewWindow: Window) {
 	const interval = setInterval(() => {
 
+		if (previewWindow.closed) {
+			stopPreviewWatcher(interval, previewWindow);
+			console.log("Stopped watcher!");
+			return;
+		}
+
+		console.log("Working...");
 		previewWindow.postMessage(editor.getValue())
 	}, 2000);
 

diff --git a/src/main.ts b/src/main.ts
@@ -9,7 +9,7 @@ import { isCompat } from "./lib/compat";
 
 const editorWrapper = document.getElementById("app")!;
 
-if (isCompat()) {
+if (isCompat) {
 	const store = initStore();
 	initLanguageWorkers();
 	const editor = initEditor(editorWrapper, store);

diff --git a/src/markdown_preview.ts b/src/markdown_preview.ts
@@ -1,15 +1,16 @@
 import { convertToMarkdown } from "./lib/languages/markdown";
 
-const origin = window.location.origin;
 const mainWrapper = document.querySelector("main")!;
+const origin = window.location.origin;
 let currentEditorValue = "";
 
-window.addEventListener("message", async (ev) => {	
+
+window.addEventListener("message", async ev => {
 	if (ev.origin !== origin) return;
 	if (ev.data === currentEditorValue) return;
 
 	currentEditorValue = ev.data;
-	const markdown = await convertToMarkdown(ev.data);
 
-	mainWrapper.innerHTML = markdown; 
+	const markdown = await convertToMarkdown(ev.data);
+	mainWrapper.innerHTML = markdown;
 })
diff --git a/vite.config.ts b/vite.config.ts
@@ -6,7 +6,6 @@ import { VitePWA } from "vite-plugin-pwa";
 // https://vitejs.dev/config/
 export default defineConfig({
   appType: "mpa",
-  root: resolve(__dirname, "src"),
   plugins: [
     VitePWA({
       devOptions: {
@@ -27,8 +26,8 @@ export default defineConfig({
     emptyOutDir: true,
     rollupOptions: {
       input: {
-        main: resolve(__dirname, "src", "pages", "index.html"),
-        "markdown-preview": resolve(__dirname, "src", "pages", "markdown-preview.html"),
+        main: resolve(__dirname, "index.html"),
+        "markdown-preview": resolve(__dirname, "markdown-preview.html"),
       },
       output: {
         manualChunks: {