503 update form descriptions

src/core/components/DaisyTheme.tsx

@@ -16,6 +16,9 @@ import {
   getSubmitButtonOptions,
   SubmitButtonProps,
 } from "@rjsf/utils"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import remarkBreaks from "remark-breaks"
 
 import { ThemeProps } from "@rjsf/core"
 
@@ -74,9 +77,12 @@ function MyDescriptionField<
   }
   if (typeof description === "string") {
     return (
-      <p id={id} className="text-md italic">
-        {description}
-      </p>
+      <div
+        id={id}
+        className="markdown-display prose max-w-none dark:prose-invert text-md italic mb-2"
+      >
+        <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>{description}</ReactMarkdown>
+      </div>
     )
   } else {
     return (

src/core/styles/index.css

@@ -52,13 +52,15 @@
   width: 100%;
   border: none;
   margin: 0 auto;
-  display: block;
-  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 16px;
   border-radius: 12px;
   background-color: oklch(var(--b3));
   color: oklch(var(--bc));
   font-size: 16px;
-  text-align: center;
+  text-align: left;
 }
 
 /* form overall header */
@@ -69,11 +71,10 @@
   font-family: inherit;
 }
 
-.formHead-wrapper [class^="formHead"] div {
-  width: 30%;
-  display: inline-block;
-  text-align: left;
-  padding: 10px;
+.formHead-wrapper [class^="formHead"] > div {
+  width: 100%;
+  display: block;
+  padding: 0;
 }
 
 .move-icon {
@@ -117,6 +118,32 @@
   height: 48px;
 }
 
+/* markdown description wrapper — nested divs must not inherit the formHead > div reset */
+.formHead-wrapper .form-description-wrapper > div {
+  display: block;
+  width: 100%;
+  padding: 0;
+}
+
+.formHead-wrapper .form-description-wrapper .form-desc-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.formHead-wrapper .form-description-wrapper .join,
+.formHead-wrapper .form-description-wrapper .join > * {
+  display: inline-flex;
+  width: auto;
+}
+
+.formHead-wrapper textarea.form-description {
+  height: auto !important;
+  min-height: 8rem;
+  resize: vertical;
+}
+
 .formHead-wrapper .card-modal-select {
   background-color: oklch(var(--pc)) !important;
 }

src/formBuilder/CardGeneralParameterInputs.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react"
 import { Input, FormGroup, FormFeedback } from "reactstrap"
 import classnames from "classnames"
 import GeneralParameterInputs from "./GeneralParameterInputs"
+import MarkdownDescriptionInput from "./MarkdownDescriptionInput"
 import SelectField from "src/core/components/fields/SelectField"
 import {
   defaultUiProps,
@@ -31,7 +32,6 @@ export default function CardGeneralParameterInputs({
   const [keyState, setKeyState] = React.useState(parameters.name)
   const [keyError, setKeyError] = React.useState<null | string>(null)
   const [titleState, setTitleState] = React.useState(parameters.title)
-  const [descriptionState, setDescriptionState] = React.useState(parameters.description)
   const [elementId] = React.useState(getRandomId())
   const categoryMap = categoryToNameMap(allFormInputs)
 
@@ -168,18 +168,10 @@ export default function CardGeneralParameterInputs({
               type="help"
             />
           </h5>
-          <FormGroup>
-            <Input
-              value={descriptionState || ""}
-              placeholder="Description"
-              type="text"
-              onChange={(ev) => setDescriptionState(ev.target.value)}
-              onBlur={(ev) => {
-                onChange({ ...parameters, description: ev.target.value })
-              }}
-              className="card-text"
-            />
-          </FormGroup>
+          <MarkdownDescriptionInput
+            value={parameters.description || ""}
+            onChange={(val) => onChange({ ...parameters, description: val })}
+          />
         </div>
         <div
           className={classnames("card-entry", {

src/formBuilder/FormBuilder.tsx

@@ -4,6 +4,7 @@ import { Alert, Input } from "reactstrap"
 import Card from "./Card"
 import Section from "./Section"
 import Add from "./Add"
+import MarkdownDescriptionInput from "./MarkdownDescriptionInput"
 import {
   parse,
   stringify,
@@ -129,20 +130,17 @@ export default function FormBuilder({
                 ? mods.labels.formDescriptionLabel
                 : "Form Description"}
             </h5>
-            <Input
+            <MarkdownDescriptionInput
               value={schemaData.description || ""}
-              placeholder="Description"
-              type="text"
-              onChange={(ev) =>
+              onChange={(val) =>
                 onChange(
                   stringify({
                     ...schemaData,
-                    description: ev.target.value,
+                    description: val,
                   }),
                   uischema
                 )
               }
-              className="form-description"
             />
           </div>
         </div>

src/formBuilder/MarkdownDescriptionInput.tsx

@@ -0,0 +1,53 @@
+import { useState } from "react"
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import remarkBreaks from "remark-breaks"
+
+export default function MarkdownDescriptionInput({
+  value,
+  onChange,
+}: {
+  value: string
+  onChange: (v: string) => void
+}) {
+  const [mode, setMode] = useState<"edit" | "preview">("edit")
+
+  return (
+    <div className="form-description-wrapper">
+      <div className="form-desc-toolbar flex items-center gap-2 mb-1">
+        <div className="join">
+          <button
+            type="button"
+            className={`btn btn-sm join-item ${mode === "edit" ? "btn-primary" : "btn-ghost"}`}
+            onClick={() => setMode("edit")}
+          >
+            Edit
+          </button>
+          <button
+            type="button"
+            className={`btn btn-sm join-item ${mode === "preview" ? "btn-primary" : "btn-ghost"}`}
+            onClick={() => setMode("preview")}
+          >
+            Preview
+          </button>
+        </div>
+        <span className="text-sm opacity-60 italic">Supports Markdown</span>
+      </div>
+      {mode === "edit" ? (
+        <textarea
+          value={value}
+          placeholder="Description"
+          rows={4}
+          className="form-description w-full"
+          onChange={(ev) => onChange(ev.target.value)}
+        />
+      ) : (
+        <div className="markdown-display prose max-w-none dark:prose-invert p-2 bg-base-200 rounded border border-base-300 min-h-[6rem]">
+          <ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
+            {value || "_Nothing to preview yet…_"}
+          </ReactMarkdown>
+        </div>
+      )}
+    </div>
+  )
+}

src/formBuilder/Section.tsx

@@ -2,6 +2,7 @@ import React, { ReactElement } from "react"
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd"
 import SelectField from "src/core/components/fields/SelectField"
 import { Alert, Input, UncontrolledTooltip, FormGroup, FormFeedback } from "reactstrap"
+import MarkdownDescriptionInput from "./MarkdownDescriptionInput"
 import FBCheckbox from "./checkbox/FBCheckbox"
 import Collapse from "./Collapse/Collapse"
 import CardModal from "./CardModal"
@@ -223,20 +224,9 @@ export default function Section({
                   type="help"
                 />
               </h5>
-              <Input
+              <MarkdownDescriptionInput
                 value={schemaData.description || ""}
-                placeholder="Description"
-                type="text"
-                onChange={(ev) =>
-                  onChange(
-                    {
-                      ...schema,
-                      description: ev.target.value,
-                    },
-                    uischema
-                  )
-                }
-                className="card-text"
+                onChange={(val) => onChange({ ...schema, description: val }, uischema)}
               />
             </div>
             <Alert