fix: initialize markdown editor with correct mode (#1034)

* fix: initialize markdown editor with correct mode
* feat: turn breadcrumbs into sticky mode in editing dashboard

src/app/area/[[...slug]]/page.tsx

@@ -118,7 +118,7 @@ export default async function Page ({ params }: PageWithCatchAllUuidProps): Prom
             </span>
           </div>
           {(description == null || description.trim() === '') && <EditDescriptionCTA uuid={uuid} />}
-          <Markdown>{description}</Markdown>
+          <Markdown className='wiki-content'>{description}</Markdown>
         </div>
 
       </div>

src/app/editArea/[slug]/SidebarNav.tsx

@@ -15,16 +15,16 @@ export const SidebarNav: React.FC<{ slug: string, canAddAreas: boolean, canAddCl
   const classForActivePage = (myPath: string): string => activePath.endsWith(myPath) ? 'font-semibold pointer-events-none' : ''
   return (
     <nav className='px-6'>
-      <div className='sticky top-0'>
-        <ul className='menu w-56'>
+      <div className='sticky top-16'>
+        <ul className='menu w-56 px-0'>
           <li>
             <Link href={`/editArea/${slug}/general`} className={classForActivePage('general')}>
               <Article size={24} /> General
             </Link>
           </li>
         </ul>
 
-        <div className='p-2 w-56 mt-4'>
+        <div className='w-56 mt-4'>
           <hr className='border-t my-2' />
           <Link href={`/editArea/${slug}/general#addArea`} className={clx(canAddAreas ? '' : 'cursor-not-allowed pointer-events-none', 'block py-2')}>
             <button disabled={!canAddAreas} className='btn btn-accent btn-block justify-start'>

src/app/editArea/[slug]/general/components/AreaDescriptionForm.tsx

@@ -4,7 +4,7 @@ import { useSession } from 'next-auth/react'
 import { SingleEntryForm } from 'app/editArea/[slug]/components/SingleEntryForm'
 import { AREA_DESCRIPTION_FORM_VALIDATION_RULES } from '@/components/edit/EditAreaForm'
 import useUpdateAreasCmd from '@/js/hooks/useUpdateAreasCmd'
-import { MDTextArea } from '@/components/ui/form/MDTextArea'
+import { MarkdownTextArea } from '@/components/ui/form/MarkdownTextArea'
 
 /**
  * Area description edit form
@@ -23,13 +23,13 @@ export const AreaDescriptionForm: React.FC<{ initialValue: string, uuid: string
   return (
     <SingleEntryForm<{ description: string }>
       title='Description'
-      helperText='You can use markdown syntax: **bold** *italic* [link](https://example.com].'
+      helperText='You can use markdown syntax: **bold** *italic* [link](https://example.com).'
       initialValues={{ description: initialValue }}
       submitHandler={async ({ description }) => {
         await updateOneAreaCmd({ description })
       }}
     >
-      <MDTextArea
+      <MarkdownTextArea
         initialValue={initialValue}
         name='description'
         label='Describe this area to the best of your knowledge.  Do not copy descriptions from guidebooks.'

src/app/editArea/[slug]/layout.tsx

@@ -10,7 +10,7 @@ export const dynamic = 'force-dynamic'
 /**
  * Layout for edit area dashboard
  */
-export default async function RootLayout ({
+export default async function EditAreaDashboardLayout ({
   children, params
 }: {
   children: React.ReactNode
@@ -22,22 +22,23 @@ export default async function RootLayout ({
       <div className='px-12 pt-8 pb-4'>
         <div className='text-3xl tracking-tight font-semibold'>Edit area</div>
 
-        <GluttenFreeCrumbs pathTokens={pathTokens} ancestors={ancestors} editMode />
-
         <div className='text-sm flex justify-end'>
           <a href={getAreaPageFriendlyUrl(uuid, areaName)} className='flex items-center gap-2 hover:underline'>
             Return to public version <ArrowUUpLeft size={18} />
           </a>
         </div>
       </div>
 
-      <hr className='border-1' />
-
-      <div className='py-12 flex bg-base-200 flex-col lg:flex-row'>
-        <SidebarNav slug={params.slug} canAddAreas={!leaf} canAddClimbs={false} />
-        <main className='w-full px-2 lg:px-16'>
-          {children}
-        </main>
+      <div className='bg-base-200'>
+        <div className='z-20 sticky top-0 py-2 px-6 bg-base-200 w-full border-t border-b'>
+          <GluttenFreeCrumbs pathTokens={pathTokens} ancestors={ancestors} editMode />
+        </div>
+        <div className='flex bg-base-200 flex-col lg:flex-row py-12'>
+          <SidebarNav slug={params.slug} canAddAreas={!leaf} canAddClimbs={false} />
+          <main className='w-full px-2 lg:px-16'>
+            {children}
+          </main>
+        </div>
       </div>
     </div>
   )

src/app/global.css

@@ -19,11 +19,11 @@ h1 {
 }
 
 h2 {
-    @apply text-base-content text-xl font-bold tracking-tight leading-loose;
+    @apply text-base-content text-2xl font-bold tracking-tight leading-loose;
 }
 
 h3 {
-    @apply text-base-content text-lg font-semibold tracking-tight leading-loose;
+    @apply text-base-content text-xl font-medium tracking-tight leading-loose;
 }
 
 h4 {
@@ -38,6 +38,10 @@ h4 {
   @apply text-base-content/60 !important;
 }
 
+.wiki-content {
+  @apply prose prose-base max-w-none;
+}
+
 /**
 A slightly deemphasized dotted underline for a tag in order to not competing with horizontal rulers
 */

src/components/editor/MarkdownEditor.tsx

@@ -7,10 +7,11 @@ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
 import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'
 import { ListPlugin } from '@lexical/react/LexicalListPlugin'
 import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'
+import clx from 'classnames'
 
 import { mdeditorConfig } from './editorConfig'
-import { MarkdownPreviewPlugin } from './plugins/MarkdownPreviewPlugin'
 import { ReactHookFormFieldPlugin } from './plugins/ReactHookFormFieldPlugin'
+import { MarkdownPreviewPlugin } from './plugins/MarkdownPreviewPlugin'
 import { RulesType } from '../../js/types'
 
 export interface MarkdownEditorProps {
@@ -19,16 +20,18 @@ export interface MarkdownEditorProps {
   fieldName: string
   reset: number
   placeholder?: string
+  className?: string
+  previewClassname?: string
   rules?: RulesType
 }
 
 /**
  * Multiline markdown editor with react-hook-form support.
  */
-export const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ fieldName, initialValue = '', preview = false, placeholder = 'Enter some text', rules }) => {
-  const config = mdeditorConfig(initialValue, !preview)
+export const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ fieldName, initialValue = '', preview = false, placeholder = 'Enter some text', rules, className, previewClassname }) => {
+  const config = mdeditorConfig(initialValue, preview)
   return (
-    <div className='relative border'>
+    <div className={clx(className, preview ? previewClassname : '')}>
       <LexicalComposer initialConfig={config}>
         {preview
           ? (
@@ -49,13 +52,13 @@ export const MarkdownEditor: React.FC<MarkdownEditorProps> = ({ fieldName, initi
                 placeholder={<MDPlaceholder text={placeholder} className={config.theme?.placeholder} />}
                 ErrorBoundary={LexicalErrorBoundary}
               />
+              <HistoryPlugin />
               <ReactHookFormFieldPlugin fieldName={fieldName} rules={rules} />
             </>
             )}
-
-        <HistoryPlugin />
         <MarkdownPreviewPlugin editable={!preview} />
       </LexicalComposer>
+
     </div>
 
   )

src/components/editor/plugins/ReactHookFormFieldPlugin.tsx

@@ -7,7 +7,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { RulesType } from '@/js/types'
 
 /**
- * Lexical plugin responsible for updating React-hook-form field
+ * Lexical plugin responsible for updating React-hook-form field with the editor content.
  */
 export const ReactHookFormFieldPlugin: React.FC<{ fieldName: string, rules?: RulesType }> = ({ fieldName, rules }) => {
   const { field } = useController({ name: fieldName, rules })

src/components/ui/BreadCrumbs.tsx

@@ -134,7 +134,7 @@ export const GluttenFreeCrumbs: React.FC<{
   editMode?: boolean
 }> = ({ pathTokens, ancestors, editMode = false }) => {
   return (
-    <div className='breadcrumbs text-sm font-medium text tracking-tight'>
+    <div className='breadcrumbs text-sm font-medium'>
       <ul>
         <li><a href='/' className='text-secondary'>Home</a></li>
         {pathTokens.map((path, index) => {
@@ -153,13 +153,14 @@ export const GluttenFreeCrumbs: React.FC<{
  */
 const GFItem: React.FC<{ path: string, url: string, isLast: boolean }> =
   ({ path, url, isLast }) => (
-    <li>
-      <a
+    <li className='no-underline'>
+      <Link
+        prefetch={false}
         href={url}
-        className={clx(
-          isLast ? 'text-primary font-semibold badge badge-info' : 'text-secondary')}
+        className={clx('tracking-tight',
+          isLast ? 'text-primary font-semibold badge badge-info' : 'text-secondary font-normal')}
       >
         {path}
-      </a>
+      </Link>
     </li>
   )

src/components/ui/form/MDTextArea.tsx → src/components/ui/form/MarkdownTextArea.tsx

@@ -19,7 +19,7 @@ interface EditorProps {
 /**
  * Multiline inplace editor with react-hook-form support.
  */
-export const MDTextArea: React.FC<EditorProps> = ({ initialValue = '', name, placeholder = 'Enter some text', label, rules }) => {
+export const MarkdownTextArea: React.FC<EditorProps> = ({ initialValue = '', name, placeholder = 'Enter some text', label, rules }) => {
   const { fieldState: { error } } = useController({ name, rules })
   const [preview, setPreview] = useState(false)
   return (
@@ -37,7 +37,14 @@ export const MDTextArea: React.FC<EditorProps> = ({ initialValue = '', name, pla
         </a>
       </div>
 
-      <LazyMarkdownEditor initialValue={initialValue} preview={preview} reset={0} fieldName={name} />
+      <LazyMarkdownEditor
+        initialValue={initialValue}
+        preview={preview}
+        reset={0}
+        fieldName={name}
+        className='border rounded-btn wiki-content'
+        previewClassname='border-none'
+      />
 
       {error?.message != null &&
         <label className='label' id={`${name}-helper`} htmlFor={name}>