[Experimental] Live AsciiDoc editor

app/components/AsciidocBlocks/Document.tsx

@@ -7,6 +7,8 @@
  */
 import { Content, type DocumentBlock } from '@oxide/react-asciidoc'
 
+// 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 }) => (
   <div
     id="content"
@@ -16,4 +18,10 @@ const CustomDocument = ({ document }: { document: DocumentBlock }) => (
   </div>
 )
 
-export { CustomDocument }
+const MinimalDocument = ({ document }: { document: DocumentBlock }) => (
+  <div id="content" className="asciidoc-body max-w-[1040px]">
+    <Content blocks={document.blocks} />
+  </div>
+)
+
+export { CustomDocument, MinimalDocument }

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,12 +10,13 @@ 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'
+import { userIsInternal } from '~/utils/rfdApi'
 
 import { DropdownItem, DropdownMenu } from './Dropdown'
 import { PublicBanner } from './PublicBanner'
@@ -53,7 +54,9 @@ 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)
+
+  const isInternal = userIsInternal(user)
 
   return (
     <div className="sticky top-0 z-20">
@@ -79,6 +82,14 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
             <Icon name="search" size={16} />
           </button>
           <Search open={open} onClose={() => setOpen(false)} />
+          {user && isInternal && (
+            <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,79 @@
+/*
+ * 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 { EditorView } from '@codemirror/view'
+import { createTheme, type CreateThemeOptions } from '@uiw/codemirror-themes'
+import CodeMirror from '@uiw/react-codemirror'
+
+const themeSettings: CreateThemeOptions['settings'] = {
+  background: 'var(--surface-raise)',
+  foreground: 'var(--content-default)',
+  caret: 'var(--base-neutral-800)',
+  selection: 'rgba(255, 255, 255, 0.1)',
+  selectionMatch: 'rgba(255, 255, 255, 0.2)',
+  gutterBackground: 'var(--base-neutral-200)',
+  gutterForeground: 'var(--base-neutral-600)',
+  gutterBorder: 'transparent',
+  lineHighlight: 'rgba(255, 255, 255, 0.1)',
+}
+
+export const theme = (options?: Partial<CreateThemeOptions>) => {
+  const { theme = 'dark' } = options || {}
+  return createTheme({
+    theme: theme,
+    settings: {
+      ...themeSettings,
+    },
+    styles: [],
+  })
+}
+
+const EditorWrapper = ({
+  body,
+  onChange,
+}: {
+  body: string
+  onChange: (string: string | undefined) => void
+}) => {
+  return (
+    <CodeMirror
+      value={body}
+      onChange={onChange}
+      extensions={[
+        EditorView.theme({
+          '&': {
+            fontSize: '13px',
+            fontFamily: 'GT America Mono',
+          },
+          '.cm-line': {
+            paddingLeft: '12px',
+          },
+          '.cm-content': {
+            paddingTop: '8px',
+            paddingBottom: '8px',
+          },
+        }),
+        EditorView.lineWrapping,
+      ]}
+      theme={theme()}
+      basicSetup={{
+        lineNumbers: true,
+        highlightActiveLine: true,
+        foldGutter: false,
+        dropCursor: true,
+        allowMultipleSelections: true,
+        indentOnInput: true,
+        bracketMatching: true,
+        closeBrackets: true,
+        autocompletion: false,
+      }}
+      className="h-full"
+    />
+  )
+}
+
+export default EditorWrapper