Added simple web parser

bryan-ente · bryan-ente · commit fbc6e26530f7 · 2025-05-23T02:21:54.000+02:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+    "presets": [
+        "@babel/preset-env"
+    ]
+}
diff --git a/README.md b/README.md
@@ -130,6 +130,15 @@ ProtoML is a lightweight, declarative markup language designed for writing and s
 `protoparser` is the command-line tool for parsing `.pml` files (ProtoML) and converting them into structured formats such as JSON, HTML, PDF and more.
 **The parser currently only support HTML rendering.** The other formats are planned for future releases.
 
+## Basic web parser
+
+The web parser allows you to directly write and simply parse ProtoML code in your browser. It does not fully support all features of the parser.
+Additionally, CSS is not supported within the web parser.
+
+To start using the web parser, simply open the `web/index.html`
+To rebuild the parser bundle, run `npm run build:web` in the root directory of the project.
+To run a webserver directly use `npm run dev` which starts a `serve` command on port 3000.
+
 ### Basic Usage
 
 ```bash
@@ -142,12 +151,6 @@ protparser [options] [filename] [format]
 protoparser -vvv -output=myfile MeetingYesterday.pml html
 ```
 
-### Local development
-
-- Clone the repository
-- Make your changes
-- Run `npm run build:exe` to build linux and windows executables or simply run `npm uninstall -g protoparser && npm install -g .` to install your local version globally.
-
 ### Output
 
 ```plaintext
@@ -176,6 +179,12 @@ protoparser -vvv -output=myfile MeetingYesterday.pml html
 | `-config=PATH` | Use external config for rendering/export |
 | `--help` | Show CLI help |
 
+### Local development
+
+- Clone the repository
+- Make your changes
+- Run `npm run build:exe` to build linux and windows executables or simply run `npm uninstall -g protoparser && npm install -g .` to install your local version globally.
+
 ### Supported formats
 
 - `json`
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "protoml-parser",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "ProtoML is a lightweight, declarative markup language designed for writing and structuring meeting protocols, notes and task lists in a human-readable and machine-parseable format.",
   "keywords": [
     "protoml",
@@ -18,7 +18,9 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build:exe": "pkg . --out-path dist"
+    "build:exe": "pkg . --out-path dist",
+    "build:web": "cd web && browserify parser-web-entry.js --standalone ProtoParser > parser.bundle.js",
+    "dev": "serve web"
   },
   "repository": {
     "type": "git",
@@ -41,6 +43,10 @@
   },
   "homepage": "https://github.com/Ente/protoml-parser#readme",
   "devDependencies": {
-    "pkg": "^5.8.1"
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "pkg": "^5.8.1",
+    "serve": "^14.0.1",
+    "browserify": "^17.0.0"
   }
 }
diff --git a/src/renders/html.js b/src/renders/html.js
@@ -1,7 +1,10 @@
 const fs = require("fs");
 const path = require("path");
 
-function loadTheme(themeName) {
+function loadTheme(themeName, skip = 0) {
+  if (skip) {
+    return "";
+  }
   const themePath = path.join(
     __dirname,
     "./themes",
@@ -33,7 +36,7 @@ function escape(text) {
 }
 
 function renderHTML(ast, options = {}) {
-  const css = loadTheme(options.theme);
+  const css = loadTheme(options.theme, options.skipTheme);
 
   const html = [];
 
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>ProtoML Viewer</title>
+
+
+</head>
+
+<body>
+    <h1>ProtoML Viewer</h1>
+    <p>The viewer heavily differs from the parser as not all styles are supported.</p>
+    <textarea id="input" rows="10" cols="80">@date:21.05.2025
+@notes
+- Some note
+    </textarea><br />
+    <button onclick="render()">Render</button>
+    <iframe id="preview" style="width:100%; height:300px;"></iframe>
+    <button id="download">Download</button>
+
+</body>
+<script src="parser.bundle.js"></script>
+<script>
+    function render() {
+        const input = document.getElementById("input").value;
+        const html = ProtoParser.parseTextToHTML(input);
+        document.getElementById("preview").srcdoc = html;
+    }
+
+    document.getElementById("download").addEventListener("click", () => {
+      const content = input.value;
+      downloadFile(content, "protocol.pml", "text/plain");
+    });
+
+  function downloadFile(content, filename, mime) {
+    const blob = new Blob([content], { type: mime });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = filename;
+    a.click();
+    setTimeout(() => URL.revokeObjectURL(a.href), 500);
+  }
+</script>
+
+</html>
diff --git a/web/parser-web-entry.js b/web/parser-web-entry.js
@@ -0,0 +1,15 @@
+const { tokenize } = require('../src/core/tokenizer.js');
+const { parseBlocks } = require('../src/core/blockParser.js');
+const { resolveReferences } = require('../src/core/referenceLinker.js');
+const { parseInline } = require('../src/core/inlineParser.js');
+const renderHTML = require('../src/renders/html.js');
+
+function parseTextToHTML(source) {
+  const tokens = tokenize(source);
+  let ast = parseBlocks(tokens);
+  ast = resolveReferences(ast);
+  ast = parseInline(ast);
+  return renderHTML(ast, { skipTheme: 1});
+}
+
+module.exports = { parseTextToHTML };

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +    "presets": [
 +        "@babel/preset-env"
 +    ]
 +}