Try to add Milkdown

package.json

@@ -18,6 +18,14 @@
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.29.1",
     "@material/web": "^2.0.0",
+    "@milkdown/core": "^7.4.0",
+    "@milkdown/ctx": "^7.4.0",
+    "@milkdown/plugin-collab": "^7.4.0",
+    "@milkdown/plugin-history": "^7.4.0",
+    "@milkdown/preset-commonmark": "^7.4.0",
+    "@milkdown/prose": "^7.4.0",
+    "@milkdown/theme-nord": "^7.4.0",
+    "@milkdown/transformer": "^7.4.0",
     "@ndn/autoconfig": "https://ndnts-nightly.ndn.today/autoconfig.tgz",
     "@ndn/endpoint": "https://ndnts-nightly.ndn.today/endpoint.tgz",
     "@ndn/fw": "https://ndnts-nightly.ndn.today/fw.tgz",
@@ -44,6 +52,7 @@
     "@suid/icons-material": "^0.7.0",
     "@suid/material": "^0.16.0",
     "@syncedstore/core": "^0.6.0",
+    "@tailwindcss/typography": "^0.5.13",
     "@tiptap/core": "^2.5.8",
     "@tiptap/extension-collaboration": "^2.5.8",
     "@tiptap/extension-collaboration-cursor": "^2.5.8",
@@ -53,6 +62,7 @@
     "@tiptap/pm": "^2.5.8",
     "@tiptap/starter-kit": "^2.5.8",
     "@ucla-irl/ndnts-aux": "^3.0.3",
+    "autoprefixer": "^10.4.20",
     "codemirror": "^6.0.1",
     "diff": "^5.2.0",
     "event-iterator": "^2.0.0",
@@ -61,14 +71,16 @@
     "jose": "^5.6.3",
     "jszip": "^3.10.1",
     "peerjs": "^1.5.4",
+    "postcss": "^8.4.40",
     "qr-scanner": "^1.4.2",
     "qrcode": "^1.5.3",
-    "remark-gfm": "4.0.0",
+    "remark-gfm": "3.0.1",
     "solid-codemirror": "^2.3.1",
     "solid-js": "^1.8.19",
     "solid-markdown": "^2.0.13",
     "solid-tiptap": "^0.7.0",
     "solid-toast": "^0.5.0",
+    "tailwindcss": "^3.4.7",
     "uuid": "^10.0.0",
     "y-codemirror.next": "^0.3.5",
     "yjs": "^13.6.18"

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

public/build-meta.json

@@ -1 +1 @@
-{"revision":"v1.2.3 fbea0c5","timestamp":1721591925}
+{"revision":"v1.2.3 2ba2321","timestamp":1722756920}

src/backend/models/project.ts

@@ -47,6 +47,17 @@ export type XmlDoc = ItemBase & {
   text: Y.XmlFragment
 }
 
+export type MarkdownDoc = ItemBase & {
+  kind: 'markdowndoc'
+
+  /**
+   * Shared XMLFragment for Markdown used by Milkdown
+   * NOTE: The name cannot be changed due to a hard coding in Milkdown.
+   *   https://github.com/Milkdown/milkdown/blob/1723d36b5298d3f1d1caab33241258eb7a333beb/packages/plugins/plugin-collab/src/collab-service.ts#L109C44-L109C55
+   */
+  prosemirror: Y.XmlFragment
+}
+
 export type BlobFile = ItemBase & {
   kind: 'blob'
 
@@ -57,7 +68,7 @@ export type BlobFile = ItemBase & {
   blobName: string
 }
 
-export type Item = Folder | TextDoc | XmlDoc | BlobFile
+export type Item = Folder | TextDoc | XmlDoc | MarkdownDoc | BlobFile
 
 export type Items = { [docId: string]: Item }
 

src/build-meta.ts

@@ -1,3 +1,3 @@
-export const REVISION = 'v1.2.3 fbea0c5'
+export const REVISION = 'v1.2.3 2ba2321'
 // eslint-disable-next-line @typescript-eslint/no-loss-of-precision, prettier/prettier
-export const TIMESTAMP = 1721591925
+export const TIMESTAMP = 1722756920

src/components/common.scss

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /** Globals */
 ::-webkit-scrollbar {
   width: 6px;

src/components/share-latex/markdown-doc/index.tsx

@@ -0,0 +1,56 @@
+import { createSignal, onCleanup, onMount } from 'solid-js'
+import { Editor, rootCtx } from '@milkdown/core'
+import { commonmark } from '@milkdown/preset-commonmark'
+import { history } from '@milkdown/plugin-history'
+import { collab, CollabService, collabServiceCtx } from '@milkdown/plugin-collab'
+import { nord } from '@milkdown/theme-nord'
+import { NdnSvsAdaptor } from '@ucla-irl/ndnts-aux/adaptors'
+import * as Y from 'yjs'
+
+import '@milkdown/theme-nord/style.css'
+
+export default function MarkdownDoc(props: {
+  doc: Y.XmlFragment
+  provider: NdnSvsAdaptor
+  username: string
+  subDocId: string
+}) {
+  const [container, setContainer] = createSignal<HTMLDivElement>()
+  const [editor, setEditor] = createSignal<Editor>()
+  const [collabService, setCollabService] = createSignal<CollabService>()
+
+  onMount(async () => {
+    const editor = await Editor.make()
+      .config((ctx) => {
+        ctx.set(rootCtx, container())
+      })
+      .config(nord)
+      .use(commonmark)
+      .use(history)
+      .use(collab)
+      .create()
+
+    setEditor(editor)
+    props.provider.bindAwareness(props.doc.doc!, props.subDocId)
+
+    editor.action((ctx) => {
+      const collabSrv = ctx.get(collabServiceCtx)
+      setCollabService(collabSrv)
+
+      collabSrv
+        // bind doc and awareness
+        .bindDoc(props.doc.doc!)
+        .setAwareness(props.provider.awareness!)
+        // connect yjs with milkdown
+        .connect()
+    })
+  })
+
+  onCleanup(() => {
+    collabService()?.disconnect()
+    props.provider.cancelAwareness()
+    editor()?.destroy()
+  })
+
+  return <div ref={setContainer} />
+}

src/components/share-latex/new-item-modal.tsx

@@ -12,7 +12,9 @@ import {
 } from '@suid/material'
 import { Show, createSignal } from 'solid-js'
 
-export type FileType = '' | 'folder' | 'doc' | 'upload' | 'richDoc'
+// NOTE: Please refer to src/backend/models/project.ts:Item.kind
+// Should we use that type? Will create more coupling, though
+export type FileType = '' | 'folder' | 'doc' | 'upload' | 'richDoc' | 'markdownDoc'
 
 const VisuallyHiddenInput = styled('input')({
   clip: 'rect(0 0 0 0)',
@@ -45,6 +47,8 @@ export default function NewItemModal(props: {
         return 'New .xml rich document'
       case 'upload':
         return 'Upload blob file'
+      case 'markdownDoc':
+        return 'New .md document'
       default:
         return ''
     }

src/components/share-latex/rename-item.tsx

@@ -19,6 +19,8 @@ export default function RenameItem(props: {
         return 'Rename .xml rich document'
       case 'upload':
         return 'Rename blob file'
+      case 'markdownDoc':
+        return 'Rename .md document'
       default:
         return 'Rename file'
     }

src/components/share-latex/share-latex/component.tsx

@@ -1,6 +1,7 @@
 import AppTools from '../app-tools'
 import FileList from '../file-list'
 import LatexDoc from '../latex-doc'
+import MarkdownDoc from '../markdown-doc'
 import NewItemModal, { FileType } from '../new-item-modal'
 import { Button, Paper } from '@suid/material'
 import { project } from '../../../backend/models'
@@ -93,6 +94,13 @@ export default function ShareLatexComponent(props: {
               props.setModalState('create')
             },
           },
+          {
+            name: 'New Markdown doc',
+            onClick: () => {
+              props.setFileType('markdownDoc')
+              props.setModalState('create')
+            },
+          },
           {
             name: 'Upload blob',
             onClick: () => {
@@ -148,6 +156,14 @@ export default function ShareLatexComponent(props: {
                   username={props.username}
                 />
               </Match>
+              <Match when={props.item?.kind === 'markdowndoc'}>
+                <MarkdownDoc
+                  doc={(props.item as project.MarkdownDoc).prosemirror}
+                  subDocId={props.item!.id}
+                  provider={props.yjsProvider()!}
+                  username={props.username}
+                />
+              </Match>
               <Match when={props.item?.kind === 'blob'}>
                 <Button onClick={props.onDownloadBlob}>Download</Button>
               </Match>

src/components/share-latex/share-latex/index.tsx

@@ -169,6 +169,20 @@ export default function ShareLatex(props: { rootUri: string }) {
           cur.items.push(newId)
         }
         navigate(to, { replace: true })
+      } else if (state === 'markdownDoc') {
+        const newName = name.endsWith('.md') ? name : name + '.md'
+        if (existId === undefined) {
+          rootDocVal!.latex[newId] = {
+            id: newId,
+            kind: 'markdowndoc',
+            // fullPath: cur.fullPath + '/' + name,
+            name: newName,
+            parentId: cur.id,
+            prosemirror: new Y.XmlFragment(),
+          }
+          cur.items.push(newId)
+        }
+        navigate(to, { replace: true })
       } else if (state === 'upload' && blob !== undefined && blob.length > 0) {
         syncAgent()!
           .publishBlob('latexBlob', blob)

tailwind.config.js

@@ -0,0 +1,10 @@
+import typography from "@tailwindcss/typography";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [typography],
+};