chore: frontmatter editor

src/style.css

@@ -1,4 +1,4 @@
 @import url('./content/code-highlight.css') layer(components);
-
+@tailwind base;
 @tailwind components;
 @tailwind utilities;

src/ui/NodeDecorators/FrontmatterEditor.tsx

@@ -2,10 +2,15 @@ import YamlParser from 'js-yaml'
 import React from 'react'
 import { FrontmatterEditorProps } from '../../types/NodeDecoratorsProps'
 import { useForm, useFieldArray } from 'react-hook-form'
+import { ReactComponent as ArrowRight } from './icons/arrow_right.svg'
+import { ReactComponent as ArrowDown } from './icons/arrow_drop_down.svg'
+import { ReactComponent as DeleteIcon } from './icons/delete.svg'
+import classNames from 'classnames'
 
 type YamlConfig = Array<{ key: string; value: string }>
 
 export const FrontmatterEditor = ({ yaml, onChange }: FrontmatterEditorProps) => {
+  const [expanded, setExpanded] = React.useState(true)
   const yamlConfig = React.useMemo<YamlConfig>(() => {
     if (!yaml) {
       return []
@@ -39,30 +44,78 @@ export const FrontmatterEditor = ({ yaml, onChange }: FrontmatterEditorProps) =>
   }, [watch, onChange])
 
   return (
-    <form>
-      <ul>
-        {fields.map((item, index) => {
-          return (
-            <li key={item.id}>
-              <input {...register(`yamlConfig.${index}.key`, { required: true })} />{' '}
-              <input {...register(`yamlConfig.${index}.value`, { required: true })} />
-              <button type="button" onClick={() => remove(index)}>
-                Delete
-              </button>
-            </li>
-          )
-        })}
-      </ul>
-      <section>
-        <button
-          type="button"
-          onClick={() => {
-            append({ key: '', value: '' })
-          }}
-        >
-          append
-        </button>
-      </section>
-    </form>
+    <div className="border-2 border-solid rounded-md border-primary-50 p-3 not-prose data-[expanded=true]:mb-10" data-expanded={expanded}>
+      <button
+        className="border-0 bg-transparent  flex items-center text-sm"
+        onClick={(e) => {
+          e.preventDefault()
+          setExpanded((v) => !v)
+        }}
+      >
+        {expanded ? <ArrowDown /> : <ArrowRight />}
+        Document frontmatter
+      </button>
+
+      {expanded && (
+        <form>
+          <table className="table-fixed border-spacing-x-1 border-spacing-y-3 border-separate">
+            <colgroup>
+              <col className="w-[30%]" />
+              <col className="w-[70%]" />
+              <col className="w-12" />
+            </colgroup>
+            <thead className="text-xs">
+              <tr>
+                <th className="text-left">Key</th>
+                <th className="text-left">Value</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {fields.map((item, index) => {
+                return (
+                  <tr key={item.id}>
+                    <td>
+                      <TableInput {...register(`yamlConfig.${index}.key`, { required: true })} />
+                    </td>
+                    <td>
+                      <TableInput {...register(`yamlConfig.${index}.value`, { required: true })} />
+                    </td>
+                    <td>
+                      <button
+                        type="button"
+                        onClick={() => remove(index)}
+                        className="bg-transparent border-0 text-primary-400 hover:text-primary-600"
+                      >
+                        <DeleteIcon />
+                      </button>
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+            <tfoot>
+              <tr>
+                <td>
+                  <button
+                    className="rounded-md py-2 px-3 bg-primary-100 active:bg-primary-200 text-sm"
+                    type="button"
+                    onClick={() => {
+                      append({ key: '', value: '' })
+                    }}
+                  >
+                    Add new key
+                  </button>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+        </form>
+      )}
+    </div>
   )
 }
+
+const TableInput = React.forwardRef<HTMLInputElement, React.HTMLAttributes<HTMLInputElement>>(({ className, ...props }, ref) => {
+  return <input className={classNames('w-full bg-primary-50 px-2 py-1 rounded-md font-mono', className)} {...props} ref={ref} />
+})

src/ui/Wrapper/index.tsx

@@ -80,7 +80,7 @@ export const Wrapper: React.FC<WrappedEditorProps> = ({
   viewMode,
 }) => {
   return (
-    <div className="p-3 max-w-[90rem] border-slate-100 border-solid border-2">
+    <div className="p-3">
       <LexicalComposer initialConfig={standardConfig(markdown)}>
         <EditorSystemComponent
           headMarkdown={headMarkdown}