[Experimental] Live AsciiDoc editor

app/components/AsciidocBlocks/Document.tsx

@@ -9,16 +9,14 @@ import { useDelegatedReactRouterLinks } from '@oxide/design-system/components/di
 import { Content, type DocumentBlock } from '@oxide/react-asciidoc'
 import { useRef } from 'react'
 
+// add styles for main
+// max-w-full flex-shrink overflow-hidden 800:overflow-visible 800:pr-10 1200:w-[calc(100%-var(--toc-width))] 1200:pr-16 print:p-0
 const CustomDocument = ({ document }: { document: DocumentBlock }) => {
   let ref = useRef<HTMLDivElement>(null)
   useDelegatedReactRouterLinks(ref, document.title)
 
   return (
-    <div
-      id="content"
-      className="asciidoc-body max-w-full flex-shrink overflow-hidden 800:overflow-visible 800:pr-10 1200:w-[calc(100%-var(--toc-width))] 1200:pr-16 print:p-0"
-      ref={ref}
-    >
+    <div id="content" className="asciidoc-body" ref={ref}>
       <Content blocks={document.blocks} />
     </div>
   )

app/components/Dropdown.tsx

@@ -19,18 +19,18 @@ export const dropdownInnerStyles = `focus:outline-0 focus:bg-hover px-3 py-2 pr-
 
 export const DropdownItem = ({
   children,
-  classNames,
+  className,
   onSelect,
 }: {
   children: ReactNode | string
-  classNames?: string
+  className?: string
   onSelect?: () => void
 }) => (
   <Dropdown.Item
     onSelect={onSelect}
     className={cn(
       dropdownOuterStyles,
-      classNames,
+      className,
       dropdownInnerStyles,
       !onSelect && 'cursor-default',
     )}
@@ -42,12 +42,12 @@ export const DropdownItem = ({
 
 export const DropdownSubTrigger = ({
   children,
-  classNames,
+  className,
 }: {
   children: JSX.Element | string
-  classNames?: string
+  className?: string
 }) => (
-  <Dropdown.SubTrigger className={cn(dropdownOuterStyles, classNames, dropdownInnerStyles)}>
+  <Dropdown.SubTrigger className={cn(dropdownOuterStyles, className, dropdownInnerStyles)}>
     {children}
     <Icon
       name="carat-down"
@@ -59,13 +59,13 @@ export const DropdownSubTrigger = ({
 
 export const DropdownLink = ({
   children,
-  classNames,
+  className,
   internal = false,
   to,
   disabled = false,
 }: {
   children: React.ReactNode
-  classNames?: string
+  className?: string
   internal?: boolean
   to: string
   disabled?: boolean
@@ -76,7 +76,7 @@ export const DropdownLink = ({
     className={cn(
       'block ',
       dropdownOuterStyles,
-      classNames,
+      className,
       disabled && 'pointer-events-none',
     )}
   >
@@ -88,18 +88,18 @@ export const DropdownLink = ({
 
 export const DropdownMenu = ({
   children,
-  classNames,
+  className,
   align = 'end',
 }: {
   children: React.ReactNode
-  classNames?: string
+  className?: string
   align?: 'end' | 'start' | 'center' | undefined
 }) => (
   <Dropdown.Portal>
     <Dropdown.Content
       className={cn(
         'menu overlay-shadow z-30 mt-2 min-w-[12rem] rounded border bg-raise border-secondary [&>*:last-child]:border-b-0',
-        classNames,
+        className,
       )}
       align={align}
     >
@@ -110,16 +110,16 @@ export const DropdownMenu = ({
 
 export const DropdownSubMenu = ({
   children,
-  classNames,
+  className,
 }: {
   children: JSX.Element[]
-  classNames?: string
+  className?: string
 }) => (
   <Dropdown.Portal>
     <Dropdown.SubContent
       className={cn(
         'menu overlay-shadow z-10 ml-2 max-h-[30vh] min-w-[12rem] overflow-y-auto rounded border bg-raise border-secondary [&>*:last-child]:border-b-0',
-        classNames,
+        className,
       )}
     >
       {children}

app/components/Header.tsx

@@ -10,10 +10,10 @@ import { buttonStyle } from '@oxide/design-system'
 import * as Dropdown from '@radix-ui/react-dropdown-menu'
 import { Link, useFetcher } from '@remix-run/react'
 import { useCallback, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 import Icon from '~/components/Icon'
 import NewRfdButton from '~/components/NewRfdButton'
-import { useKey } from '~/hooks/use-key'
 import { useRootLoaderData } from '~/root'
 import type { RfdItem, RfdListItem } from '~/services/rfd.server'
 
@@ -53,7 +53,7 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
     return false // Returning false prevents default behaviour in Firefox
   }, [open])
 
-  useKey('mod+k', toggleSearchMenu)
+  useHotkeys('mod+k', toggleSearchMenu)
 
   return (
     <div className="sticky top-0 z-20">
@@ -79,6 +79,12 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
             <Icon name="search" size={16} />
           </button>
           <Search open={open} onClose={() => setOpen(false)} />
+          <Link
+            to="/notes"
+            className="flex h-8 w-8 items-center justify-center rounded border text-tertiary bg-secondary border-secondary elevation-1 hover:bg-hover"
+          >
+            <Icon name="edit" size={16} />
+          </Link>
           <NewRfdButton />
 
           {user ? (

app/components/SelectRfdCombobox.tsx

@@ -10,9 +10,9 @@ import { Link, useNavigate } from '@remix-run/react'
 import cn from 'classnames'
 import fuzzysort from 'fuzzysort'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 import Icon from '~/components/Icon'
-import { useKey } from '~/hooks/use-key'
 import { useSteppedScroll } from '~/hooks/use-stepped-scroll'
 import type { RfdItem, RfdListItem } from '~/services/rfd.server'
 import { classed } from '~/utils/classed'
@@ -33,7 +33,7 @@ const SelectRfdCombobox = ({
   // memoized to avoid render churn in useKey
   const toggleCombobox = useCallback(() => setOpen(!open), [setOpen, open])
 
-  useKey('mod+/', toggleCombobox)
+  useHotkeys('mod+/', toggleCombobox)
 
   const handleDismiss = () => setOpen(false)
 
@@ -220,7 +220,7 @@ const ComboboxItem = ({
 }) => {
   const [shouldPrefetch, setShouldPrefetch] = useState(false)
 
-  const timer = useRef<NodeJS.Timeout | null>(null)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   function clear() {
     if (timer.current) clearTimeout(timer.current)

app/components/home/FilterDropdown.tsx

@@ -149,7 +149,7 @@ const DropdownFilterItem = ({
 }) => (
   <DropdownItem
     onSelect={onSelect}
-    classNames={selected ? 'bg-accent-secondary text-accent' : ''}
+    className={selected ? 'text-accent bg-accent-secondary' : ''}
   >
     {selected && <Outline />}
     <div className="flex items-center justify-between">

app/components/note/Editor.tsx

@@ -0,0 +1,62 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { Editor, useMonaco } from '@monaco-editor/react'
+import { shikiToMonaco } from '@shikijs/monaco'
+import { useEffect } from 'react'
+import { getHighlighter } from 'shiki'
+
+import theme from './oxide-dark.json'
+
+const EditorWrapper = ({
+  body,
+  onChange,
+}: {
+  body: string
+  onChange: (string: string | undefined) => 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="oxide-dark"
+      language="asciidoc"
+      options={{
+        minimap: { enabled: false },
+        fontFamily: 'GT America Mono',
+        fontSize: 13,
+        wordWrap: 'on',
+        quickSuggestions: false,
+        suggestOnTriggerCharacters: false,
+        acceptSuggestionOnEnter: 'off',
+        snippetSuggestions: 'none',
+      }}
+    />
+  )
+}
+
+export default EditorWrapper