Add support for code blocks

packages/app/package-lock.json

@@ -34,7 +34,7 @@
 				"jszip": "3.10.0",
 				"lit": "2.0.2",
 				"localforage": "1.9.0",
-				"marked": "4.0.12",
+				"marked": "4.0.18",
 				"papaparse": "5.3.1",
 				"qrcode": "1.5.0",
 				"reflect-metadata": "0.1.13",
@@ -1322,8 +1322,9 @@
 			}
 		},
 		"node_modules/marked": {
-			"version": "4.0.12",
-			"license": "MIT",
+			"version": "4.0.18",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
+			"integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw==",
 			"bin": {
 				"marked": "bin/marked.js"
 			},
@@ -2921,7 +2922,9 @@
 			}
 		},
 		"marked": {
-			"version": "4.0.12"
+			"version": "4.0.18",
+			"resolved": "https://registry.npmjs.org/marked/-/marked-4.0.18.tgz",
+			"integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw=="
 		},
 		"mime": {
 			"version": "1.6.0"

packages/app/package.json

@@ -47,7 +47,7 @@
         "jszip": "3.10.0",
         "lit": "2.0.2",
         "localforage": "1.9.0",
-        "marked": "4.0.12",
+        "marked": "4.0.18",
         "papaparse": "5.3.1",
         "qrcode": "1.5.0",
         "reflect-metadata": "0.1.13",

packages/app/src/elements/icon.ts

@@ -649,6 +649,10 @@ export class PlIcon extends LitElement {
             :host([icon="markdown"]) > div::before {
                 content: "\\f354";
             }
+
+            :host([icon="code"]) > div::before {
+                content: "\\f121";
+            }
         `,
     ];
 

packages/app/src/elements/rich-input.ts

@@ -18,14 +18,14 @@ export class RichInput extends LitElement {
         return this._markdownInput?.value || "";
     }
 
-    set value(content: string) {
-        const html = markdownToHtml(content).replace(/\n/g, "");
+    set value(md: string) {
+        const html = markdownToHtml(md).replace(/\n/g, "");
+        console.log(md, html);
         this._editor.commands.clearContent();
         this._editor.commands.insertContent(html);
         (async () => {
             await this.updateComplete;
-            console.log("markdowninput", this._markdownInput);
-            this._markdownInput.value = content;
+            this._markdownInput.value = md;
         })();
     }
 
@@ -100,6 +100,7 @@ export class RichInput extends LitElement {
                 --input-padding: calc(2 * var(--spacing));
                 font-family: var(--font-family-mono);
                 font-size: 0.9em;
+                line-height: 1.3em;
             }
         `,
     ];
@@ -107,7 +108,7 @@ export class RichInput extends LitElement {
     render() {
         return html`
             <div class="small padded double-spacing horizontal layout border-bottom">
-                <div class="half-spacing wrapping horizontal layout stretch">
+                <div class="half-spacing wrapping horizontal layout stretch" ?disabled=${this.mode !== "wysiwyg"}>
                     <pl-button class="transparent slim" title="${$l("Text Mode")}">
                         ${this._editor?.isActive("heading", { level: 1 })
                             ? html` <pl-icon icon="heading-1"></pl-icon> `
@@ -207,6 +208,15 @@ export class RichInput extends LitElement {
                         <pl-icon icon="blockquote"></pl-icon>
                     </pl-button>
 
+                    <pl-button
+                        class="transparent slim"
+                        .toggled=${this._editor?.isActive("codeBlock")}
+                        @click=${() => this._editor.chain().focus().toggleCodeBlock().run()}
+                        title="${$l("Code Block")}"
+                    >
+                        <pl-icon icon="code"></pl-icon>
+                    </pl-button>
+
                     <div class="border-left"></div>
 
                     <pl-button

packages/app/src/lib/markdown.ts

@@ -4,10 +4,21 @@ import TurnDown from "turndown";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { html } from "lit";
 
+marked.use({
+    renderer: {
+        code(content: string) {
+            return `<pre><code>${content.replace("\n", "<br>")}</code></pre>`;
+        },
+    },
+});
+
 const turndown = new TurnDown({
     headingStyle: "atx",
     bulletListMarker: "-",
+    hr: "---",
+    codeBlockStyle: "fenced",
 });
+
 turndown.addRule("p", {
     filter: "p",
     replacement: (content, node) => {
@@ -70,6 +81,8 @@ addHook("afterSanitizeAttributes", function (node) {
 export function markdownToHtml(md: string, san = true) {
     let markup = marked(md, {
         headerIds: false,
+        gfm: true,
+        breaks: true,
     });
     if (san) {
         markup = sanitize(markup);

packages/app/src/styles/content.ts

@@ -116,4 +116,14 @@ export const content = css`
         border: none;
         border-top: solid 1px var(--color-shade-3);
     }
+
+    pre > code {
+        display: block;
+        border: solid 1px var(--color-shade-1);
+        background: var(--color-shade-1);
+        padding: 0.5em;
+        border-radius: 0.5em;
+        font-size: 0.9em;
+        margin-bottom: 0.5em;
+    }
 `;