Makefile

@@ -9,7 +9,13 @@ run-release:
 	SECURE_SESSIONS=false RUST_LOG=info cargo run --release
 
 css-watch:
-	npx tailwindcss -i ./src/main.css -o ./static/main.css --watch
+	npm run css-watch
+
+typescript:
+	npm run build
+
+typescript-watch:
+	npm run build-watch
 
 migrate:
 	sea-orm-cli migrate

frontend/main.css

@@ -0,0 +1,60 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+
+
+/* Borrowed from https://github.com/Milkdown/milkdown/blob/main/e2e/src/list-item-block/style.css
+which is licensed under MIT. */
+
+.prose :where(li):not(:where([class~="not-prose"] *)) {
+  margin-top: 0.5em;
+  margin-bottom: 0;
+}
+
+.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
+  font-style: inherit;
+  font-weight: inherit;
+}
+
+.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+  margin-top: 0.5em;
+  margin-bottom: 0;
+}
+
+.prose ol,
+.prose ul {
+  list-style: none !important;
+  padding: 0;
+}
+
+.prose li p {
+  @apply !m-0 !leading-6;
+}
+
+.prose li p + p {
+  @apply !mt-2;
+}
+
+.prose li.ProseMirror-selectednode {
+  outline: 2px solid #8cf;
+}
+
+.prose li::after {
+  all: unset !important;
+}
+
+milkdown-list-item-block .list-item {
+  gap: 8px;
+}
+
+milkdown-list-item-block .label-wrapper {
+  height: 24px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  color: darkcyan;
+}
+
+/* End borrowed block. */

frontend/main.ts

@@ -0,0 +1,57 @@
+import { defaultValueCtx, Editor, rootCtx } from '@milkdown/core';
+import { html } from 'atomico';
+import { listItemBlockComponent, listItemBlockConfig, ListItemBlockConfig, listItemBlockView } from '@milkdown/components/list-item-block'
+import { commonmark } from '@milkdown/preset-commonmark';
+import { gfm } from '@milkdown/preset-gfm';
+import { nord } from '@milkdown/theme-nord'
+import { listener, listenerCtx } from '@milkdown/plugin-listener';
+import '@milkdown/theme-nord/style.css'
+
+const markdown =
+`# Milkdown Vanilla Commonmark
+
+> You're scared of a world where you're needed.
+
+This is a demo for using Milkdown with **Vanilla Typescript**.
+
+- A list
+- [ ] Something to do
+- [x] Something done`
+
+
+function configureListItem(ctx: Ctx) {
+    ctx.set(listItemBlockConfig.key, {
+        renderLabel: (label: string, listType, checked?: boolean) => {
+            if (checked == null) {
+                if (listType === 'bullet') {
+                    return html`<span class='label'>•</span>`
+                }
+
+                return html`<span class='label'>${label}</span>`
+            } else {
+                return html`<input class='label' type="checkbox" checked=${checked} />`
+            }
+        },
+    })
+}
+
+Editor
+  .make()
+  .config(ctx => {
+      ctx.set(rootCtx, "#editor")
+      ctx.set(defaultValueCtx, markdown)
+
+      const listener = ctx.get(listenerCtx);
+      listener.markdownUpdated((ctx, markdown, prevMarkdown) => {
+        if (markdown !== prevMarkdown) {
+            console.log(markdown);
+        }
+      })
+  })
+  .config(configureListItem)
+  .use(commonmark)
+  .use(gfm)
+  .use(nord)
+  .use(listener)
+  .use(listItemBlockComponent)
+  .create();

package.json

@@ -1,6 +1,26 @@
 {
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/typography": "^0.5.13",
     "daisyui": "^4.10.5",
+    "esbuild": "0.21.1",
+    "tailwindcss": "^3.4.3"
+  },
+  "scripts": {
+    "build": "esbuild frontend/main.ts --bundle --outfile=static/main.js --target=es2017",
+    "build-watch": "esbuild frontend/main.ts --bundle --outfile=static/main.js --target=es2017 --watch",
+    "css-watch": "tailwindcss -i ./frontend/main.css -o ./static/style.css --watch",
+    "css": "tailwindcss -i ./frontend/main.css -o ./static/style.css"
+  },
+  "dependencies": {
+    "@milkdown/components": "^7.3.6",
+    "@milkdown/core": "^7.3.6",
+    "@milkdown/plugin-listener": "^7.3.6",
+    "@milkdown/preset-commonmark": "^7.3.6",
+    "@milkdown/preset-gfm": "^7.3.6",
+    "@milkdown/theme-nord": "^7.3.6",
+    "@prosemirror-adapter/lit": "^0.2.6",
+    "clsx": "^2.1.1",
     "tailwindcss": "^3.4.3"
   }
 }

src/main.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

tailwind.config.js

@@ -1,11 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./templates/**/*.html"],
+  content: ["./templates/**/*.html", "./frontend/**/*.ts"],
   theme: {
     extend: {},
   },
   plugins: [
       require('daisyui'),
+      require('@tailwindcss/typography'),
+      require('@tailwindcss/forms'),
   ],
   daisyui: {
     themes: [

templates/documents/list_documents.html

@@ -22,6 +22,7 @@
 		</div>
     <div class="px-8 py-8 flex flex-col gap-y-4">
 
+            <div id="editor" class="prose bg-white"></div>
 
       {% for document in documents %}
       <div class="card w-96 bg-base-100 shadow-md border-2 border-solid">
@@ -29,6 +30,7 @@
           <h2 class="card-title">{{ document.name }}</h2>
           <div class="card-actions justify-end">
             <button class="btn btn-primary">Open</button>
+
           </div>
         </div>
       </div>

templates/head.html

@@ -3,6 +3,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pique</title>
+    <link rel="stylesheet" href="/static/style.css">
     <link rel="stylesheet" href="/static/main.css">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⛰️</text></svg>"/>
 </head>