proper working

Author: slashinfty

README.md

@@ -1,5 +1,29 @@
 # mdTeX
 
-A markdown/LaTeX editor that compiles via pandoc.
+<p align="center">
+    <img src="https://raw.githubusercontent.com/slashinfty/mdTeX/refs/heads/main/src-tauri/icons/128x128.png">
+</p>
 
-Requires both pandoc and texlive to be installed.
+A markdown/LaTeX editor that compiles PDFs via Pandoc.
+
+Requires both [pandoc](https://pandoc.org/) and [texlive](https://www.tug.org/texlive/) to be installed.
+
+Built with [Tauri](https://v2.tauri.app/) and [Vite](https://vite.dev/). Code editor powered by [Codemirror](https://codemirror.net/).
+
+## Features
+
+![screenshot of mdTeX](screenshot.png)
+
+- Markdown language highlighting for body, LaTeX for preamble
+- [Pandoc extensions](https://pandoc.org/MANUAL.html#pandocs-markdown) for converting from Markdown
+- Save default preamble, body, and extensions
+- Convert to PDF normally or via beamer
+- Save PDF to the same folder as the Markdown file and embeds the PDF
+
+## Behind the Scenes
+
+The app creates a temporary .yaml file with `header-includes:` to add LaTeX preamble, then runs the following pandoc command:
+
+```js
+pandoc --from markdown${extensions} --to ${format} --output ${pdf} ${yaml} ${markdown}
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdtex",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

screenshot.png

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "mdTeX",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "identifier": "com.matt.mdTeX",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/tauri.conf.json

@@ -48,11 +48,20 @@ textarea, input {
     height: 100%;
 }
 
+.side {
+    overflow-x: scroll;
+}
+
 .right {
     justify-content: center;
 }
 
+.input {
+    anchor-name: --input;
+}
+
 .buttons {
+    anchor-name: --buttons;
     justify-content: space-between;
     flex-basis: content;
 }
@@ -75,6 +84,7 @@ textarea, input {
 
 .cm-editor {
     height: 100%;
+    width: 100%;
     border: var(--pico-border-width) solid var(--pico-form-element-border-color);
     border-radius: var(--pico-border-radius);
 }
@@ -88,14 +98,18 @@ textarea, input {
 }
 
 .cm-scroller {
-    overflow: auto;
+    overflow: scroll;
 }
 
 /* IDs */
 #textarea, #extensions {
     flex: 1;
 }
 
+#textarea {
+    max-height: 79vh;
+}
+
 #export {
     flex-basis: content;
 }

src/index.css

@@ -64,6 +64,7 @@ function newButton() {
         }
     });
     document.querySelector('#extensions').value = defaults.extensions;
+    document.querySelector('#pdf').innerHTML = '';
 }
 
 async function saveButton() {
@@ -115,6 +116,7 @@ async function loadButton() {
         }
     });
     document.querySelector('#extensions').value = text.extensions;
+    document.querySelector('#pdf').innerHTML = '';
 }
 
 function settingsButton() {
@@ -172,15 +174,6 @@ function bodyButton() {
     });
 }
 
-function textarea() {
-    const mainText = editor.state.doc.text.reduce((str, line) => `${str}\n${line}`, '').replace(/\n/, '');
-    if (document.querySelector('#body-button').classList.contains('secondary')) {
-        text.preamble = mainText;
-    } else {
-        text.body = mainText;
-    }
-}
-
 async function extensionsLink() {
     await openUrl('https://pandoc.org/MANUAL.html#extensions');
 }
@@ -218,12 +211,12 @@ async function compile() {
     const pdfFile = await resolve(path, `${fileName}.pdf`);
     const pandoc = Command.create('pandoc', ['--from', `markdown${text.extensions}`, '--to', document.querySelector('#export').value, '--output', pdfFile, yamlFile, markdownPath]);
     const result = await pandoc.execute();
+    document.querySelector('#pdf').innerHTML = '';
     if (result.stderr !== '') {
         console.error(result.stderr);
         document.querySelector('#error-text').innerHTML = result.stderr;
         document.querySelector('#error').setAttribute('open', '');
     } else {
-        document.querySelector('#pdf').innerHTML = '';
         const pdfArr = await readFile(pdfFile);
         const el = document.createElement('embed');
         el.src = URL.createObjectURL(new Blob([pdfArr], { type: 'application/pdf' }));
@@ -260,7 +253,22 @@ window.addEventListener('DOMContentLoaded', async () => {
                 ...closeBracketsKeymap,
                 ...defaultKeymap,
                 ...historyKeymap
-            ])
+            ]),
+            EditorView.updateListener.of(v => {
+                let newText;
+                if (v.state.doc.hasOwnProperty('text') && (!v.startState.doc.hasOwnProperty('text') || v.state.doc.text.toString() !== v.startState.doc.text.toString())) {
+                    newText = v.state.doc.text.join(`\n`);
+                }
+                if (v.state.doc.hasOwnProperty('children') && (!v.startState.doc.hasOwnProperty('children') || v.state.doc.children.reduce((str, child) => str + child.text.toString(), '') !== v.startState.doc.children.reduce((str, child) => str + child.text.toString(), ''))) {
+                    newText = v.state.doc.children.map(child => child.text).flat().join(`\n`);
+                }
+                if (newText === undefined) return;
+                if (document.querySelector('#body-button').classList.contains('secondary')) {
+                    text.preamble = newText;
+                } else {
+                    text.body = newText;
+                }
+            })
         ]
     });
     editor = new EditorView({
@@ -280,7 +288,6 @@ window.addEventListener('DOMContentLoaded', async () => {
     document.querySelector('#source-code-button').addEventListener('click', sourceCodeButton);
     document.querySelector('#preamble-button').addEventListener('click', preambleButton);
     document.querySelector('#body-button').addEventListener('click', bodyButton);
-    document.querySelector('.cm-content').addEventListener('input', textarea);
     document.querySelector('#extensions-link').addEventListener('click', extensionsLink);
     document.querySelector('#extensions').addEventListener('input', extensions);
     document.querySelector('#compile-button').addEventListener('click', compile);