From 8fd211471308d14dacd019283b8065101f000f33 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <hello@benleonard.co.uk>
Date: Tue, 17 Dec 2024 14:11:58 +0000
Subject: [PATCH] Switch to monaco

---
 app/components/note/Editor.tsx      |  105 ++
 app/components/note/NoteForm.tsx    |   29 +-
 app/components/note/oxide-dark.json | 1386 +++++++++++++++++++++++++++
 app/routes/notes.$id.publish.tsx    |    2 +-
 app/routes/notes_.$id.delete.tsx    |    2 +-
 app/routes/notes_.$id_.edit.tsx     |    8 +-
 app/routes/notes_._index.tsx        |    4 +-
 app/routes/notes_.new.tsx           |    2 +-
 app/routes/notes_.tsx               |    2 +-
 package.json                        |    5 +-
 10 files changed, 1515 insertions(+), 30 deletions(-)
 create mode 100644 app/components/note/Editor.tsx
 create mode 100644 app/components/note/oxide-dark.json

diff --git a/app/components/note/Editor.tsx b/app/components/note/Editor.tsx
new file mode 100644
index 0000000..5d3ad6a
--- /dev/null
+++ b/app/components/note/Editor.tsx
@@ -0,0 +1,105 @@
+import { Editor, useMonaco } from '@monaco-editor/react'
+import { shikiToMonaco } from '@shikijs/monaco'
+import { useEffect } from 'react'
+import { getHighlighter } from 'shiki'
+
+// import asciidocLang from './asciidoc-lang.json'
+import theme from './oxide-dark.json'
+
+const EditorWrapper = ({
+  body,
+  onChange,
+}: {
+  body: string
+  onChange: (string) => void
+}) => {
+  const monaco = useMonaco()
+
+  useEffect(() => {
+    if (!monaco) {
+      return
+    }
+
+    const highlight = async () => {
+      const highlighter = await getHighlighter({
+        themes: [theme],
+        langs: ['asciidoc'],
+      })
+
+      monaco.languages.register({ id: 'asciidoc' })
+      shikiToMonaco(highlighter, monaco)
+    }
+
+    highlight()
+  }, [monaco])
+
+  return (
+    <Editor
+      value={body}
+      onChange={onChange}
+      theme="vs-dark"
+      language="asciidoc"
+      options={{ minimap: { enabled: false }, fontFamily: 'GT America Mono', fontSize: 13 }}
+    />
+  )
+}
+
+export default EditorWrapper
+
+// import loader from '@monaco-editor/loader'
+// import { shikiToMonaco } from '@shikijs/monaco'
+// import { type editor } from 'monaco-editor'
+// import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api'
+// import { useCallback, useEffect, useRef, useState } from 'react'
+// import { getHighlighter } from 'shiki'
+
+// const Editor = () => {
+//   const containerRef = useRef<HTMLDivElement>(null)
+//   const monacoRef = useRef<typeof Monaco | null>(null)
+//   const [isMonacoMounting, setIsMonacoMounting] = useState(true)
+//   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null)
+//   const preventCreation = useRef(false)
+//   const [isEditorReady, setIsEditorReady] = useState(false)
+
+//   useEffect(() => {
+//     const cancelable = loader.init()
+
+//     cancelable
+//       .then((monaco) => (monacoRef.current = monaco) && setIsMonacoMounting(false))
+//       .catch(
+//         (error) =>
+//           error?.type !== 'cancelation' &&
+//           console.error('Monaco initialization: error:', error),
+//       )
+
+//     return () => (editorRef.current ? editorRef.current!.dispose() : cancelable.cancel())
+//   }, [containerRef])
+
+//   const createEditor = useCallback(() => {
+//     if (!containerRef.current || !monacoRef.current) return
+//     if (!preventCreation.current) {
+//       editorRef.current = monacoRef.current?.editor.create(containerRef.current, {
+//         automaticLayout: true,
+//       })
+
+//       monacoRef.current.editor.setTheme('vs-dark')
+
+//       setIsEditorReady(true)
+//       preventCreation.current = true
+//     }
+//   }, [])
+
+//   useEffect(() => {
+//     !isMonacoMounting && !isEditorReady && createEditor()
+//   }, [isMonacoMounting, isEditorReady, createEditor])
+
+//   console.log(monacoRef, containerRef)
+
+//   return (
+//     <div className="h-full w-full">
+//       <div ref={containerRef} className="h-full w-full" />
+//     </div>
+//   )
+// }
+
+// export default Editor
diff --git a/app/components/note/NoteForm.tsx b/app/components/note/NoteForm.tsx
index 4891e47..e145464 100644
--- a/app/components/note/NoteForm.tsx
+++ b/app/components/note/NoteForm.tsx
@@ -6,19 +6,22 @@
  * Copyright Oxide Computer Company
  */
 import { useDialogStore, type DialogStore } from '@ariakit/react'
-import { EditorView } from '@codemirror/view'
+// import { StreamLanguage } from '@codemirror/language'
+// import { EditorView } from '@codemirror/view'
+// import Editor from '@monaco-editor/react'
 import Asciidoc, { asciidoctor } from '@oxide/react-asciidoc'
 import * as Dropdown from '@radix-ui/react-dropdown-menu'
 import { useFetcher, useLoaderData } from '@remix-run/react'
-import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror'
+// import CodeMirror, { basicSetup, type ReactCodeMirrorRef } from '@uiw/react-codemirror'
 import cn from 'classnames'
+// import { asciidoc } from 'codemirror-asciidoc'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { opts } from '~/components/AsciidocBlocks'
 import { DropdownItem, DropdownLink, DropdownMenu } from '~/components/Dropdown'
 import Icon from '~/components/Icon'
-import { editorTheme } from '~/components/note/EditorTheme'
+// import { editorTheme } from '~/components/note/EditorTheme'
 import { useDebounce } from '~/hooks/use-debounce'
 import { useRootLoaderData } from '~/root'
 
@@ -26,6 +29,7 @@ import { MinimalDocument } from '../AsciidocBlocks/MinimalDocument'
 import Modal from '../Modal'
 import Spinner from '../Spinner'
 import { TextInput } from '../TextInput'
+import EditorWrapper from './Editor'
 import { SidebarIcon } from './Sidebar'
 
 const ad = asciidoctor()
@@ -174,32 +178,17 @@ export const NoteForm = ({
         </div>
         <div className="flex h-[calc(100vh-60px)] flex-grow overflow-hidden">
           <div
-            id="code_mirror_wrapper"
             style={{ width: `${leftPaneWidth}%` }} // Apply dynamic width here
             className="h-full cursor-text overflow-scroll"
-            onClick={(el) => {
-              if ((el.target as HTMLElement).id === 'code_mirror_wrapper') {
-                inputRef.current &&
-                  inputRef.current.editor &&
-                  inputRef.current.editor.focus()
-              }
-            }}
           >
             <input type="hidden" name="body" value={body} />
             <input type="hidden" name="published" value={published} />
-            <CodeMirror
-              ref={inputRef}
-              value={body}
+            <EditorWrapper
+              body={body}
               onChange={(val) => {
                 setStatus('unsaved')
                 setBody(val)
               }}
-              theme={editorTheme}
-              className="!normal-case !tracking-normal text-mono-md"
-              readOnly={false}
-              basicSetup
-              autoFocus
-              extensions={[EditorView.lineWrapping]}
             />
           </div>
           <div
diff --git a/app/components/note/oxide-dark.json b/app/components/note/oxide-dark.json
new file mode 100644
index 0000000..2254877
--- /dev/null
+++ b/app/components/note/oxide-dark.json
@@ -0,0 +1,1386 @@
+{
+  "name": "oxide-dark",
+  "colors": {
+    "editor.background": "#080F11",
+    "editor.foreground": "#E7E7E8"
+  },
+  "tokenColors": [
+    {
+      "scope": [
+        "text",
+        "source",
+        "variable.other.readwrite",
+        "punctuation.definition.variable"
+      ],
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": "punctuation",
+      "settings": {
+        "foreground": "#A1A4A5",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": ["comment", "punctuation.definition.comment"],
+      "settings": {
+        "foreground": "#A1A4A5",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["string", "punctuation.definition.string"],
+      "settings": {
+        "foreground": "#68D9A7"
+      }
+    },
+    {
+      "scope": "constant.character.escape",
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": [
+        "constant.numeric",
+        "variable.other.constant",
+        "entity.name.constant",
+        "constant.language.boolean",
+        "constant.language.false",
+        "constant.language.true",
+        "keyword.other.unit.user-defined",
+        "keyword.other.unit.suffix.floating-point"
+      ],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": [
+        "keyword",
+        "keyword.operator.word",
+        "keyword.operator.new",
+        "variable.language.super",
+        "support.type.primitive",
+        "storage.type",
+        "storage.modifier",
+        "punctuation.definition.keyword"
+      ],
+      "settings": {
+        "foreground": "#C6A5EA",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": "entity.name.tag.documentation",
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": [
+        "keyword.operator",
+        "punctuation.accessor",
+        "punctuation.definition.generic",
+        "meta.function.closure punctuation.section.parameters",
+        "punctuation.definition.tag",
+        "punctuation.separator.key-value"
+      ],
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.function",
+        "meta.function-call.method",
+        "support.function",
+        "support.function.misc",
+        "variable.function"
+      ],
+      "settings": {
+        "foreground": "#9DAFFA",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.class",
+        "entity.other.inherited-class",
+        "support.class",
+        "meta.function-call.constructor",
+        "entity.name.struct"
+      ],
+      "settings": {
+        "foreground": "#EDD5A6",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "entity.name.enum",
+      "settings": {
+        "foreground": "#EDD5A6",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["meta.enum variable.other.readwrite", "variable.other.enummember"],
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "meta.property.object",
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": ["meta.type", "meta.type-alias", "support.type", "entity.name.type"],
+      "settings": {
+        "foreground": "#EDD5A6",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": [
+        "meta.annotation variable.function",
+        "meta.annotation variable.annotation.function",
+        "meta.annotation punctuation.definition.annotation",
+        "meta.decorator",
+        "punctuation.decorator"
+      ],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": ["variable.parameter", "meta.function.parameters"],
+      "settings": {
+        "foreground": "#F39EAE",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["constant.language", "support.function.builtin"],
+      "settings": {
+        "foreground": "#F7869B"
+      }
+    },
+    {
+      "scope": "entity.other.attribute-name.documentation",
+      "settings": {
+        "foreground": "#F7869B"
+      }
+    },
+    {
+      "scope": ["keyword.control.directive", "punctuation.definition.directive"],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "punctuation.definition.typeparameters",
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": "entity.name.namespace",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "support.type.property-name.css",
+      "settings": {
+        "foreground": "#9DAFFA",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": [
+        "variable.language.this",
+        "variable.language.this punctuation.definition.variable"
+      ],
+      "settings": {
+        "foreground": "#F7869B"
+      }
+    },
+    {
+      "scope": "variable.object.property",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": ["string.template variable", "string variable"],
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": "keyword.operator.new",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "storage.modifier.specifier.extern.cpp",
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.scope-resolution.template.call.cpp",
+        "entity.name.scope-resolution.parameter.cpp",
+        "entity.name.scope-resolution.cpp",
+        "entity.name.scope-resolution.function.definition.cpp"
+      ],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "storage.type.class.doxygen",
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": ["storage.modifier.reference.cpp"],
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "meta.interpolation.cs",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": "comment.block.documentation.cs",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": [
+        "source.css entity.other.attribute-name.class.css",
+        "entity.other.attribute-name.parent-selector.css punctuation.definition.entity.css"
+      ],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "punctuation.separator.operator.css",
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "source.css entity.other.attribute-name.pseudo-class",
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "source.css constant.other.unicode-range",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "source.css variable.parameter.url",
+      "settings": {
+        "foreground": "#88DCB7",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": ["support.type.vendored.property-name"],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": [
+        "source.css meta.property-value variable",
+        "source.css meta.property-value variable.other.less",
+        "source.css meta.property-value variable.other.less punctuation.definition.variable.less",
+        "meta.definition.variable.scss"
+      ],
+      "settings": {
+        "foreground": "#F39EAE"
+      }
+    },
+    {
+      "scope": [
+        "source.css meta.property-list variable",
+        "meta.property-list variable.other.less",
+        "meta.property-list variable.other.less punctuation.definition.variable.less"
+      ],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": "keyword.other.unit.percentage.css",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "source.css meta.attribute-selector",
+      "settings": {
+        "foreground": "#88DCB7"
+      }
+    },
+    {
+      "scope": [
+        "keyword.other.definition.ini",
+        "punctuation.support.type.property-name.json",
+        "support.type.property-name.json",
+        "punctuation.support.type.property-name.toml",
+        "support.type.property-name.toml",
+        "entity.name.tag.yaml",
+        "punctuation.support.type.property-name.yaml",
+        "support.type.property-name.yaml"
+      ],
+      "settings": {
+        "foreground": "#9DAFFA",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": ["constant.language.json", "constant.language.yaml"],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": ["entity.name.type.anchor.yaml", "variable.other.alias.yaml"],
+      "settings": {
+        "foreground": "#EDD5A6",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": ["support.type.property-name.table", "entity.name.section.group-title.ini"],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "constant.other.time.datetime.offset.toml",
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": ["punctuation.definition.anchor.yaml", "punctuation.definition.alias.yaml"],
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": "entity.other.document.begin.yaml",
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": "markup.changed.diff",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": [
+        "meta.diff.header.from-file",
+        "meta.diff.header.to-file",
+        "punctuation.definition.from-file.diff",
+        "punctuation.definition.to-file.diff"
+      ],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": "markup.inserted.diff",
+      "settings": {
+        "foreground": "#88DCB7"
+      }
+    },
+    {
+      "scope": "markup.deleted.diff",
+      "settings": {
+        "foreground": "#F7869B"
+      }
+    },
+    {
+      "scope": ["variable.other.env"],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": ["string.quoted variable.other.env"],
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": "support.function.builtin.gdscript",
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": "constant.language.gdscript",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "comment meta.annotation.go",
+      "settings": {
+        "foreground": "#F39EAE"
+      }
+    },
+    {
+      "scope": "comment meta.annotation.parameters.go",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "constant.language.go",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "variable.graphql",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": "string.unquoted.alias.graphql",
+      "settings": {
+        "foreground": "#F2CDCD"
+      }
+    },
+    {
+      "scope": "constant.character.enum.graphql",
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "meta.objectvalues.graphql constant.object.key.graphql string.unquoted.graphql",
+      "settings": {
+        "foreground": "#F2CDCD"
+      }
+    },
+    {
+      "scope": [
+        "keyword.other.doctype",
+        "meta.tag.sgml.doctype punctuation.definition.tag",
+        "meta.tag.metadata.doctype entity.name.tag",
+        "meta.tag.metadata.doctype punctuation.definition.tag"
+      ],
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": ["entity.name.tag"],
+      "settings": {
+        "foreground": "#9DAFFA",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": [
+        "text.html constant.character.entity",
+        "text.html constant.character.entity punctuation",
+        "constant.character.entity.xml",
+        "constant.character.entity.xml punctuation",
+        "constant.character.entity.js.jsx",
+        "constant.charactger.entity.js.jsx punctuation",
+        "constant.character.entity.tsx",
+        "constant.character.entity.tsx punctuation"
+      ],
+      "settings": {
+        "foreground": "#F7869B"
+      }
+    },
+    {
+      "scope": ["entity.other.attribute-name"],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": [
+        "support.class.component",
+        "support.class.component.jsx",
+        "support.class.component.tsx",
+        "support.class.component.vue"
+      ],
+      "settings": {
+        "foreground": "#EFB7C2",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": ["punctuation.definition.annotation", "storage.type.annotation"],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "constant.other.enum.java",
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "storage.modifier.import.java",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": "comment.block.javadoc.java keyword.other.documentation.javadoc.java",
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": "meta.export variable.other.readwrite.js",
+      "settings": {
+        "foreground": "#F39EAE"
+      }
+    },
+    {
+      "scope": [
+        "variable.other.constant.js",
+        "variable.other.constant.ts",
+        "variable.other.property.js",
+        "variable.other.property.ts"
+      ],
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": ["variable.other.jsdoc", "comment.block.documentation variable.other"],
+      "settings": {
+        "foreground": "#F39EAE",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": "storage.type.class.jsdoc",
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": "support.type.object.console.js",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": ["support.constant.node", "support.type.object.module.js"],
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": "storage.modifier.implements",
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": [
+        "constant.language.null.js",
+        "constant.language.null.ts",
+        "constant.language.undefined.js",
+        "constant.language.undefined.ts",
+        "support.type.builtin.ts"
+      ],
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": "variable.parameter.generic",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": ["keyword.declaration.function.arrow.js", "storage.type.function.arrow.ts"],
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "punctuation.decorator.ts",
+      "settings": {
+        "foreground": "#9DAFFA",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": [
+        "keyword.operator.expression.in.js",
+        "keyword.operator.expression.in.ts",
+        "keyword.operator.expression.infer.ts",
+        "keyword.operator.expression.instanceof.js",
+        "keyword.operator.expression.instanceof.ts",
+        "keyword.operator.expression.is",
+        "keyword.operator.expression.keyof.ts",
+        "keyword.operator.expression.of.js",
+        "keyword.operator.expression.of.ts",
+        "keyword.operator.expression.typeof.ts"
+      ],
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": "support.function.macro.julia",
+      "settings": {
+        "foreground": "#A7E0C8",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "constant.language.julia",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "constant.other.symbol.julia",
+      "settings": {
+        "foreground": "#F39EAE"
+      }
+    },
+    {
+      "scope": "text.tex keyword.control.preamble",
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "text.tex support.function.be",
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": "constant.other.general.math.tex",
+      "settings": {
+        "foreground": "#F2CDCD"
+      }
+    },
+    {
+      "scope": "comment.line.double-dash.documentation.lua storage.type.annotation.lua",
+      "settings": {
+        "foreground": "#C6A5EA",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": [
+        "comment.line.double-dash.documentation.lua entity.name.variable.lua",
+        "comment.line.double-dash.documentation.lua variable.lua"
+      ],
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": [
+        "heading.1.markdown punctuation.definition.heading.markdown",
+        "heading.1.markdown",
+        "heading.1.quarto punctuation.definition.heading.quarto",
+        "heading.1.quarto",
+        "markup.heading.atx.1.mdx",
+        "markup.heading.atx.1.mdx punctuation.definition.heading.mdx",
+        "markup.heading.setext.1.markdown",
+        "markup.heading.heading-0.asciidoc"
+      ],
+      "settings": {
+        "foreground": "#F7869B"
+      }
+    },
+    {
+      "scope": [
+        "heading.2.markdown punctuation.definition.heading.markdown",
+        "heading.2.markdown",
+        "heading.2.quarto punctuation.definition.heading.quarto",
+        "heading.2.quarto",
+        "markup.heading.atx.2.mdx",
+        "markup.heading.atx.2.mdx punctuation.definition.heading.mdx",
+        "markup.heading.setext.2.markdown",
+        "markup.heading.heading-1.asciidoc"
+      ],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": [
+        "heading.3.markdown punctuation.definition.heading.markdown",
+        "heading.3.markdown",
+        "heading.3.quarto punctuation.definition.heading.quarto",
+        "heading.3.quarto",
+        "markup.heading.atx.3.mdx",
+        "markup.heading.atx.3.mdx punctuation.definition.heading.mdx",
+        "markup.heading.heading-2.asciidoc"
+      ],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": [
+        "heading.4.markdown punctuation.definition.heading.markdown",
+        "heading.4.markdown",
+        "heading.4.quarto punctuation.definition.heading.quarto",
+        "heading.4.quarto",
+        "markup.heading.atx.4.mdx",
+        "markup.heading.atx.4.mdx punctuation.definition.heading.mdx",
+        "markup.heading.heading-3.asciidoc"
+      ],
+      "settings": {
+        "foreground": "#88DCB7"
+      }
+    },
+    {
+      "scope": [
+        "heading.5.markdown punctuation.definition.heading.markdown",
+        "heading.5.markdown",
+        "heading.5.quarto punctuation.definition.heading.quarto",
+        "heading.5.quarto",
+        "markup.heading.atx.5.mdx",
+        "markup.heading.atx.5.mdx punctuation.definition.heading.mdx",
+        "markup.heading.heading-4.asciidoc"
+      ],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": [
+        "heading.6.markdown punctuation.definition.heading.markdown",
+        "heading.6.markdown",
+        "heading.6.quarto punctuation.definition.heading.quarto",
+        "heading.6.quarto",
+        "markup.heading.atx.6.mdx",
+        "markup.heading.atx.6.mdx punctuation.definition.heading.mdx",
+        "markup.heading.heading-5.asciidoc"
+      ],
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "foreground": "#F7869B",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "foreground": "#F7869B",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "markup.strikethrough",
+      "settings": {
+        "foreground": "#A6ADC8",
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": ["punctuation.definition.link", "markup.underline.link"],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": [
+        "text.html.markdown punctuation.definition.link.title",
+        "text.html.quarto punctuation.definition.link.title",
+        "string.other.link.title.markdown",
+        "string.other.link.title.quarto",
+        "markup.link",
+        "punctuation.definition.constant.markdown",
+        "punctuation.definition.constant.quarto",
+        "constant.other.reference.link.markdown",
+        "constant.other.reference.link.quarto",
+        "markup.substitution.attribute-reference"
+      ],
+      "settings": {
+        "foreground": "#B4BEFE"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.raw.markdown",
+        "punctuation.definition.raw.quarto",
+        "markup.inline.raw.string.markdown",
+        "markup.inline.raw.string.quarto",
+        "markup.raw.block.markdown",
+        "markup.raw.block.quarto"
+      ],
+      "settings": {
+        "foreground": "#88DCB7"
+      }
+    },
+    {
+      "scope": "fenced_code.block.language",
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": [
+        "markup.fenced_code.block punctuation.definition",
+        "markup.raw support.asciidoc"
+      ],
+      "settings": {
+        "foreground": "#A1A4A5"
+      }
+    },
+    {
+      "scope": ["markup.quote", "punctuation.definition.quote.begin"],
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": "meta.separator.markdown",
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.list.begin.markdown",
+        "punctuation.definition.list.begin.quarto",
+        "markup.list.bullet"
+      ],
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "markup.heading.quarto",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": [
+        "entity.other.attribute-name.multipart.nix",
+        "entity.other.attribute-name.single.nix"
+      ],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": "variable.parameter.name.nix",
+      "settings": {
+        "foreground": "#E7E7E8",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": "meta.embedded variable.parameter.name.nix",
+      "settings": {
+        "foreground": "#B4BEFE",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": "string.unquoted.path.nix",
+      "settings": {
+        "foreground": "#EFB7C2",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": ["support.attribute.builtin", "meta.attribute.php"],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "meta.function.parameters.php punctuation.definition.variable.php",
+      "settings": {
+        "foreground": "#F39EAE"
+      }
+    },
+    {
+      "scope": "constant.language.php",
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": "text.html.php support.function",
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": "keyword.other.phpdoc.php",
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": ["support.variable.magic.python", "meta.function-call.arguments.python"],
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": ["support.function.magic.python"],
+      "settings": {
+        "foreground": "#9DAFFA",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": [
+        "variable.parameter.function.language.special.self.python",
+        "variable.language.special.self.python"
+      ],
+      "settings": {
+        "foreground": "#F7869B",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["keyword.control.flow.python", "keyword.operator.logical.python"],
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": "storage.type.function.python",
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": [
+        "support.token.decorator.python",
+        "meta.function.decorator.identifier.python"
+      ],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": ["meta.function-call.python"],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.function.decorator.python",
+        "punctuation.definition.decorator.python"
+      ],
+      "settings": {
+        "foreground": "#EDD5A6",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "constant.character.format.placeholder.other.python",
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": ["support.type.exception.python", "support.function.builtin.python"],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": ["support.type.python"],
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "constant.language.python",
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": ["meta.indexed-name.python", "meta.item-access.python"],
+      "settings": {
+        "foreground": "#F39EAE",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "storage.type.string.python",
+      "settings": {
+        "foreground": "#88DCB7",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "meta.function.parameters.python",
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": [
+        "string.regexp punctuation.definition.string.begin",
+        "string.regexp punctuation.definition.string.end"
+      ],
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": "keyword.control.anchor.regexp",
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": "string.regexp.ts",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.group.regexp",
+        "keyword.other.back-reference.regexp"
+      ],
+      "settings": {
+        "foreground": "#88DCB7"
+      }
+    },
+    {
+      "scope": "punctuation.definition.character-class.regexp",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "constant.other.character-class.regexp",
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": "constant.other.character-class.range.regexp",
+      "settings": {
+        "foreground": "#F5E0DC"
+      }
+    },
+    {
+      "scope": "keyword.operator.quantifier.regexp",
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "constant.character.numeric.regexp",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.group.no-capture.regexp",
+        "meta.assertion.look-ahead.regexp",
+        "meta.assertion.negative-look-ahead.regexp"
+      ],
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": [
+        "meta.annotation.rust",
+        "meta.annotation.rust punctuation",
+        "meta.attribute.rust",
+        "punctuation.definition.attribute.rust"
+      ],
+      "settings": {
+        "foreground": "#EDD5A6",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": [
+        "meta.attribute.rust string.quoted.double.rust",
+        "meta.attribute.rust string.quoted.single.char.rust"
+      ],
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": [
+        "entity.name.function.macro.rules.rust",
+        "storage.type.module.rust",
+        "storage.modifier.rust",
+        "storage.type.struct.rust",
+        "storage.type.enum.rust",
+        "storage.type.trait.rust",
+        "storage.type.union.rust",
+        "storage.type.impl.rust",
+        "storage.type.rust",
+        "storage.type.function.rust",
+        "storage.type.type.rust"
+      ],
+      "settings": {
+        "foreground": "#C6A5EA",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": "entity.name.type.numeric.rust",
+      "settings": {
+        "foreground": "#C6A5EA",
+        "fontStyle": ""
+      }
+    },
+    {
+      "scope": "meta.generic.rust",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "entity.name.impl.rust",
+      "settings": {
+        "foreground": "#EDD5A6",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "entity.name.module.rust",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "entity.name.trait.rust",
+      "settings": {
+        "foreground": "#EDD5A6",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "storage.type.source.rust",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "entity.name.union.rust",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": "meta.enum.rust storage.type.source.rust",
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": [
+        "support.macro.rust",
+        "meta.macro.rust support.function.rust",
+        "entity.name.function.macro.rust"
+      ],
+      "settings": {
+        "foreground": "#9DAFFA",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["storage.modifier.lifetime.rust", "entity.name.type.lifetime"],
+      "settings": {
+        "foreground": "#9DAFFA",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "string.quoted.double.rust constant.other.placeholder.rust",
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": "meta.function.return-type.rust meta.generic.rust storage.type.rust",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": "meta.function.call.rust",
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": "punctuation.brackets.angle.rust",
+      "settings": {
+        "foreground": "#9DAFFA"
+      }
+    },
+    {
+      "scope": "constant.other.caps.rust",
+      "settings": {
+        "foreground": "#EDD5A6"
+      }
+    },
+    {
+      "scope": ["meta.function.definition.rust variable.other.rust"],
+      "settings": {
+        "foreground": "#F39EAE"
+      }
+    },
+    {
+      "scope": "meta.function.call.rust variable.other.rust",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": "variable.language.self.rust",
+      "settings": {
+        "foreground": "#F7869B"
+      }
+    },
+    {
+      "scope": [
+        "variable.other.metavariable.name.rust",
+        "meta.macro.metavariable.rust keyword.operator.macro.dollar.rust"
+      ],
+      "settings": {
+        "foreground": "#EFB7C2"
+      }
+    },
+    {
+      "scope": [
+        "comment.line.shebang",
+        "comment.line.shebang punctuation.definition.comment",
+        "comment.line.shebang",
+        "punctuation.definition.comment.shebang.shell",
+        "meta.shebang.shell"
+      ],
+      "settings": {
+        "foreground": "#EFB7C2",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "comment.line.shebang constant.language",
+      "settings": {
+        "foreground": "#A7E0C8",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": [
+        "meta.function-call.arguments.shell punctuation.definition.variable.shell",
+        "meta.function-call.arguments.shell punctuation.section.interpolation",
+        "meta.function-call.arguments.shell punctuation.definition.variable.shell",
+        "meta.function-call.arguments.shell punctuation.section.interpolation"
+      ],
+      "settings": {
+        "foreground": "#F7869B"
+      }
+    },
+    {
+      "scope": "meta.string meta.interpolation.parameter.shell variable.other.readwrite",
+      "settings": {
+        "foreground": "#EDD5A6",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": [
+        "source.shell punctuation.section.interpolation",
+        "punctuation.definition.evaluation.backticks.shell"
+      ],
+      "settings": {
+        "foreground": "#A7E0C8"
+      }
+    },
+    {
+      "scope": "entity.name.tag.heredoc.shell",
+      "settings": {
+        "foreground": "#C6A5EA"
+      }
+    },
+    {
+      "scope": "string.quoted.double.shell variable.other.normal.shell",
+      "settings": {
+        "foreground": "#E7E7E8"
+      }
+    },
+    {
+      "scope": "token.info-token",
+      "settings": {
+        "foreground": "#8BA1FF"
+      }
+    },
+    {
+      "scope": "token.warn-token",
+      "settings": {
+        "foreground": "#F5B944"
+      }
+    },
+    {
+      "scope": "token.error-token",
+      "settings": {
+        "foreground": "#FB6E88"
+      }
+    },
+    {
+      "scope": "token.debug-token",
+      "settings": {
+        "foreground": "#BE95EB"
+      }
+    }
+  ]
+}
diff --git a/app/routes/notes.$id.publish.tsx b/app/routes/notes.$id.publish.tsx
index 7a2dbd8..a5d1488 100644
--- a/app/routes/notes.$id.publish.tsx
+++ b/app/routes/notes.$id.publish.tsx
@@ -19,7 +19,7 @@ export async function action({ request, params }: ActionArgs) {
   const response = await fetch(`http://localhost:8000/notes/${params.id}/publish`, {
     method: 'POST',
     headers: {
-      'x-api-key': process.env.TOME_API_KEY || '',
+      'x-api-key': process.env.NOTES_API_KEY || '',
       'Content-Type': 'application/json; charset=utf-8',
     },
     body: JSON.stringify({ publish }),
diff --git a/app/routes/notes_.$id.delete.tsx b/app/routes/notes_.$id.delete.tsx
index d2d7ec4..c26ebfd 100644
--- a/app/routes/notes_.$id.delete.tsx
+++ b/app/routes/notes_.$id.delete.tsx
@@ -17,7 +17,7 @@ export async function action({ request, params }: ActionArgs) {
   const response = await fetch(`http://localhost:8000/notes/${params.id}`, {
     method: 'DELETE',
     headers: {
-      'x-api-key': process.env.TOME_API_KEY || '',
+      'x-api-key': process.env.NOTES_API_KEY || '',
     },
   })
 
diff --git a/app/routes/notes_.$id_.edit.tsx b/app/routes/notes_.$id_.edit.tsx
index d94479e..9be38a2 100644
--- a/app/routes/notes_.$id_.edit.tsx
+++ b/app/routes/notes_.$id_.edit.tsx
@@ -18,7 +18,7 @@ import { isAuthenticated } from '~/services/authn.server'
 export async function loader({ params: { id } }: LoaderArgs) {
   const response = await fetch(`http://localhost:8000/notes/${id}`, {
     headers: {
-      'x-api-key': process.env.TOME_API_KEY || '',
+      'x-api-key': process.env.NOTES_API_KEY || '',
     },
   })
   if (!response.ok) {
@@ -40,7 +40,7 @@ export async function action({ request, params }: ActionArgs) {
     const response = await fetch(`http://localhost:8000/notes/${params.id}`, {
       method: 'PUT',
       headers: {
-        'x-api-key': process.env.TOME_API_KEY || '',
+        'x-api-key': process.env.NOTES_API_KEY || '',
         'Content-Type': 'application/json; charset=utf-8',
       },
       body: JSON.stringify({ title, body }),
@@ -75,8 +75,8 @@ export default function NoteEdit() {
   return (
     <div
       className={cn(
-        'purple-theme grid h-[100dvh] w-full grid-cols-[14.25rem,1fr] overflow-hidden',
-        sidebarOpen ? 'grid-cols-[14.25rem,1fr]' : 'grid-cols-[1fr]',
+        'purple-theme grid h-[100dvh] overflow-hidden',
+        sidebarOpen ? 'grid-cols-[14.25rem,minmax(0,1fr)]' : 'grid-cols-[minmax(0,1fr)]',
       )}
     >
       {sidebarOpen && <Sidebar />}
diff --git a/app/routes/notes_._index.tsx b/app/routes/notes_._index.tsx
index 709c7e5..f442fa6 100644
--- a/app/routes/notes_._index.tsx
+++ b/app/routes/notes_._index.tsx
@@ -15,9 +15,11 @@ export const loader = async ({ request }: LoaderArgs) => {
 
   if (!user) throw new Response('Not authorized', { status: 401 })
 
+  console.log(`http://localhost:8000/user/${user.id}`)
+
   const response = await fetch(`http://localhost:8000/user/${user.id}`, {
     headers: {
-      'x-api-key': process.env.TOME_API_KEY || '',
+      'x-api-key': process.env.NOTES_API_KEY || '',
     },
   })
   if (!response.ok) {
diff --git a/app/routes/notes_.new.tsx b/app/routes/notes_.new.tsx
index e1d27ce..4ac5e3f 100644
--- a/app/routes/notes_.new.tsx
+++ b/app/routes/notes_.new.tsx
@@ -17,7 +17,7 @@ export async function action({ request }: ActionArgs) {
   const response = await fetch('http://localhost:8000/notes', {
     method: 'POST',
     headers: {
-      'x-api-key': process.env.TOME_API_KEY || '',
+      'x-api-key': process.env.NOTES_API_KEY || '',
       'Content-Type': 'application/json; charset=utf-8',
     },
     body: JSON.stringify({ title: 'Untitled', user: user.id, body: '' }),
diff --git a/app/routes/notes_.tsx b/app/routes/notes_.tsx
index 318d5f9..f3e37b5 100644
--- a/app/routes/notes_.tsx
+++ b/app/routes/notes_.tsx
@@ -18,7 +18,7 @@ export const loader = async ({ request }: LoaderArgs) => {
 
   const response = await fetch(`http://localhost:8000/user/${user.id}`, {
     headers: {
-      'x-api-key': process.env.TOME_API_KEY || '',
+      'x-api-key': process.env.NOTES_API_KEY || '',
     },
   })
 
diff --git a/package.json b/package.json
index 0f3eac1..bdc0317 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,9 @@
     "@remix-run/node": "2.13.1",
     "@remix-run/react": "2.13.1",
     "@remix-run/serve": "2.13.1",
+    "@monaco-editor/loader": "^1.4.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@shikijs/monaco": "^1.5.1",
     "@tanstack/react-query": "^4.3.9",
     "@vercel/remix": "^2.13.1",
     "classnames": "^2.3.1",
@@ -44,7 +47,7 @@
     "remeda": "^2.17.4",
     "remix-auth": "^3.6.0",
     "remix-auth-oauth2": "^1.11.1",
-    "shiki": "^1.23.1",
+    "shiki": "^1.5.1",
     "simple-text-diff": "^1.7.0",
     "tunnel-rat": "^0.1.2",
     "zod": "^3.22.3"