WIP: Add rich text

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@automerge/automerge": "^2.2.2",
     "@automerge/automerge-codemirror": "^0.0.11",
+    "@automerge/prosemirror": "0.0.13-alpha.1",
     "@automerge/automerge-repo": "^1.1.12",
     "@automerge/automerge-repo-network-broadcastchannel": "^1.1.12",
     "@automerge/automerge-repo-network-messagechannel": "^1.1.12",
@@ -62,6 +63,13 @@
     "next-themes": "^0.2.1",
     "openai": "^4.11.0",
     "query-string": "^8.2.0",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.19.4",
+    "prosemirror-schema-list": "^1.3.0",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-view": "^1.33.1",
+    "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-arborist": "^3.3.1",
     "react-dom": "^18.2.0",
@@ -73,6 +81,8 @@
     "tailwindcss-animate": "^1.0.7",
     "use-resize-observer": "^9.1.0",
     "uuid": "^9.0.1",
+    "vite-plugin-top-level-await": "^1.4.1",
+    "vite-plugin-wasm": "^3.3.0",
     "xstate": "^5.9.1"
   },
   "devDependencies": {
@@ -95,7 +105,7 @@
     "tailwindcss": "^3.3.3",
     "tsc-alias": "^1.8.8",
     "typescript": "^5.0.2",
-    "vite": "^5.0.12",
+    "vite": "^5.1.6",
     "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.3.0",
     "vitest": "^0.34.6"

src/datatypes/richtee/datatype.ts

@@ -0,0 +1,36 @@
+import { next as am } from "@automerge/automerge"
+import { Text } from "lucide-react";
+
+export const init = (doc: any) => {
+  doc.content = "Untitled";
+  am.splitBlock(doc, ["content"], 0, {type: new am.RawString("heading"), parents: [], attrs: { level: 1}})
+  doc.commentThreads = {};
+};
+
+export const getTitle = async (doc: any) => {
+  const spans = am.spans(doc, ["content"])
+  while (spans.length > 0) {
+    const span = spans.shift()
+    if (span.type === "block" && span.value.type instanceof am.RawString && span.value.type.val === "heading") {
+      if (spans[0].type === "text") {
+        return spans[0].value
+      }
+    }
+  }
+  return "Untitled Rich Tee"
+};
+
+export const markCopy = (doc: any) => {
+  return doc
+}
+
+const RichEssayDatatype = {
+  id: "rich-text",
+  name: "Rich Essay",
+  icon: Text,
+  init,
+  getTitle,
+  markCopy,
+};
+
+export default RichEssayDatatype;

src/datatypes/richtee/index.ts

@@ -0,0 +1,4 @@
+import { default as RichEssayDatatype } from "./datatype";
+export default RichEssayDatatype;
+
+export * from "./schema";

src/datatypes/richtee/schema.ts

@@ -0,0 +1,3 @@
+export type RichTextDoc = {
+  content: string
+}

src/os/datatypes.ts

@@ -18,6 +18,7 @@ import folder from "@/datatypes/folder";
 import kanban from "@/datatypes/kanban";
 import markdown from "@/datatypes/markdown";
 import tldraw from "@/datatypes/tldraw";
+import richText from "@/datatypes/richtee";
 import { FileExportMethod } from "./fileExports";
 
 export type CoreDataType<D> = {
@@ -126,6 +127,7 @@ export const DATA_TYPES: Record<
   bot,
   kanban,
   folder,
+  [richText.id]: richText,
 } as const;
 
 export type DatatypeId = keyof typeof DATA_TYPES;

src/os/tools.ts

@@ -6,6 +6,7 @@ import folder from "@/tools/folder";
 import datagrid from "@/tools/datagrid";
 import bot from "@/tools/bot";
 import kanban from "@/tools/kanban";
+import richessay from "@/tools/richessay";
 
 import { AutomergeUrl } from "@automerge/automerge-repo";
 import {
@@ -66,6 +67,7 @@ const getToolsMap = (tools: Tool[]): Record<string, Tool[]> => {
 
 export const TOOLS = getToolsMap([
   essay,
+  richessay,
   tldraw,
   folder,
   datagrid,

src/tools/richessay/components/ImageForm.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+type Props = {
+  onImageChosen: (url: string) => void
+}
+
+export default function ImageForm({ onImageChosen }: Props) {
+  const [imageUrl, setImageUrl] = React.useState("")
+
+  const onFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onImageChosen(imageUrl)
+  }
+  return (
+    <form>
+      <input onChange={e => setImageUrl(e.target.value)} value={imageUrl} />
+      <button onClick={onFormSubmit}>Insert</button>
+    </form>
+  )
+}

src/tools/richessay/components/LinkForm.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+
+type Props = {
+  onUrlChosen: (url: string) => void
+}
+
+export default function ImageForm({ onUrlChosen }: Props) {
+  const [linkUrl, setLinkUrl] = React.useState("")
+
+  const onFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    onUrlChosen(linkUrl)
+  }
+  return (
+    <form>
+      <input onChange={e => setLinkUrl(e.target.value)} value={linkUrl} />
+      <button onClick={onFormSubmit}>Insert</button>
+    </form>
+  )
+}

src/tools/richessay/components/Modal.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useRef, useState } from "react"
+
+type Props = {
+  children: React.ReactNode
+  onClose: () => void
+  isOpen: boolean
+}
+
+export default function Modal({ children, isOpen, onClose }: Props) {
+  const modalRef = useRef<HTMLDialogElement | null>(null)
+  const [isModalOpen, setIsOpen] = useState(false)
+
+  useEffect(() => {
+    setIsOpen(isOpen)
+  }, [isOpen])
+
+  useEffect(() => {
+    if (!modalRef.current) {
+      return
+    }
+    if (isModalOpen) {
+      modalRef.current.showModal()
+    } else {
+      modalRef.current.close()
+      onClose()
+    }
+  }, [isModalOpen])
+
+  return <dialog ref={modalRef}>{children}</dialog>
+}

src/tools/richessay/components/RichTeeEditor.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+import { AutomergeUrl } from "@automerge/automerge-repo"
+import { useDocument, useHandle } from "@automerge/automerge-repo-react-hooks"
+import { RichTextEditor } from "./RichTextEditor"
+
+type TeeDoc = {
+  content: string
+}
+
+export const RichTeeEditor = ({ docUrl }: { docUrl: AutomergeUrl }) => {
+  const [doc] = useDocument<TeeDoc>(docUrl); // used to trigger re-rendering when the doc loads
+  const handle = useHandle<TeeDoc>(docUrl);
+
+  if (!doc) {
+    return null
+  }
+
+  return (
+    <div className="h-full overflow-auto">
+      <RichTextEditor
+        handle={handle}
+        path={["content"]}
+      />
+    </div>
+  );
+}