Switch to monaco

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

app/components/note/NoteForm.tsx

@@ -6,26 +6,30 @@
  * 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'
 
 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