Markdown panel

emfcamp · May 19, 2024 · 4e2503d · 4e2503d
1 parent ab0bc29
commit 4e2503d
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 6 deletions.
diff --git a/global.css b/global.css
@@ -11,8 +11,6 @@
 
 body {
     font-family: 'Open Sans', 'Helvetica', sans-serif;
-    max-width: 800px;
-    margin: 0 auto;
     padding: 5px;
 }
 

diff --git a/markdown-panel/index.html b/markdown-panel/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Markdown Panel</title>
+        <script src="https://grist.orga.emfcamp.org/grist-plugin-api.js"></script>
+        <script src="markdown-panel.ts" type="module"></script>
+        <link rel="stylesheet" href="../global.css" />
+    </head>
+    <body>
+        <markdown-panel></markdown-panel>
+    </body>
+</html>
diff --git a/markdown-panel/markdown-panel.ts b/markdown-panel/markdown-panel.ts
@@ -0,0 +1,75 @@
+import { LitElement, html, css } from 'lit-element'
+import { customElement, state } from 'lit/decorators.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+import { marked } from 'marked'
+
+@customElement('markdown-panel')
+export class MarkdownPanel extends LitElement {
+    @state({ type: String })
+    mode: string = 'view'
+
+    @state({ type: String })
+    markdown = ''
+
+    static styles = css`
+        p {
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+
+        textarea {
+            width: 100%;
+            height: 50vh;
+        }
+
+        button {
+            padding: 10px 20px;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4 {
+            font-family: 'Raleway', sans-serif;
+            margin-top: 0;
+        }
+    `
+
+    constructor() {
+        super()
+        grist.ready({
+            onEditOptions: () => {
+                this.mode = 'edit'
+            },
+        })
+        grist.onOptions((options, interaction) => {
+            if (options.markdown) {
+                this.markdown = options.markdown
+            } else {
+                this.mode = 'edit'
+            }
+        })
+    }
+
+    saveText() {
+        const textarea = this.shadowRoot!.querySelector('textarea')!
+        grist.setOption('markdown', textarea.value)
+        this.markdown = textarea.value
+        this.mode = 'view'
+    }
+
+    protected render() {
+        const rendered_markdown = unsafeHTML(marked(this.markdown) as string)
+        if (this.mode === 'edit') {
+            return html`
+                <textarea>${this.markdown}</textarea>
+                <div class="button-group">
+                    <button @click="${this.saveText}">Save</button>
+                    <button @click="${() => (this.mode = 'view')}">Cancel</button>
+                </div>
+            `
+        } else {
+            return html`<div class="markdown-panel">${rendered_markdown}</div>`
+        }
+    }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     },
     "dependencies": {
         "@vitejs/plugin-vue": "^5.0.4",
+        "lit": "^3.1.3",
+        "marked": "^12.0.2",
         "moment": "^2.30.1",
         "qrcode": "^1.5.3",
         "vue": "^3.4.27"

diff --git a/tent-sheet/tent-sheet.css b/tent-sheet/tent-sheet.css
@@ -4,6 +4,8 @@ html {
 }
 
 body {
+    max-width: 800px;
+    margin: 0 auto;
     border: 1px solid #999;
     border-radius: 5px;
     padding-top: 0px;

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,10 +1,9 @@
 {
   "compilerOptions": {
-      "target": "ES2020",
+      "target": "ES2022",
       "types": ["vite/client", "node"],
-      "useDefineForClassFields": true,
       "module": "esnext",
-      "lib": ["ES2020", "DOM", "DOM.Iterable", "WebWorker"],
+      "lib": ["ES2022", "DOM", "DOM.Iterable", "WebWorker"],
       "skipLibCheck": true,
 
       /* Bundler mode */
@@ -18,7 +17,10 @@
       "strict": true,
       "noUnusedLocals": true,
       "noUnusedParameters": true,
-      "noFallthroughCasesInSwitch": true
+      "noFallthroughCasesInSwitch": true,
+
+      "experimentalDecorators": true,
+      "useDefineForClassFields": false,
   },
   "ts-node": {
       "esm": true

diff --git a/vite.config.ts b/vite.config.ts
@@ -7,6 +7,7 @@ export default defineConfig({
             input: {
                 'index': resolve(__dirname, 'index.html'),
                 'tent-sheet': resolve(__dirname, 'tent-sheet/index.html'),
+                'markdown-panel': resolve(__dirname, 'markdown-panel/index.html'),
             },
         },
     },