Skip to content

Commit 7e367fb

Browse files
doomlabdoomlab
committed
update to use markdown!
1 parent 6ae3126 commit 7e367fb

4 files changed

Lines changed: 62 additions & 78 deletions

File tree

‎src/formBuilder/CardGeneralParameterInputs.tsx‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { ReactElement } from "react"
22
import { Input, FormGroup, FormFeedback } from "reactstrap"
33
import classnames from "classnames"
44
import GeneralParameterInputs from "./GeneralParameterInputs"
5+
import MarkdownDescriptionInput from "./MarkdownDescriptionInput"
56
import SelectField from "src/core/components/fields/SelectField"
67
import {
78
defaultUiProps,
@@ -31,7 +32,6 @@ export default function CardGeneralParameterInputs({
3132
const [keyState, setKeyState] = React.useState(parameters.name)
3233
const [keyError, setKeyError] = React.useState<null | string>(null)
3334
const [titleState, setTitleState] = React.useState(parameters.title)
34-
const [descriptionState, setDescriptionState] = React.useState(parameters.description)
3535
const [elementId] = React.useState(getRandomId())
3636
const categoryMap = categoryToNameMap(allFormInputs)
3737

@@ -168,18 +168,10 @@ export default function CardGeneralParameterInputs({
168168
type="help"
169169
/>
170170
</h5>
171-
<FormGroup>
172-
<Input
173-
value={descriptionState || ""}
174-
placeholder="Description"
175-
type="text"
176-
onChange={(ev) => setDescriptionState(ev.target.value)}
177-
onBlur={(ev) => {
178-
onChange({ ...parameters, description: ev.target.value })
179-
}}
180-
className="card-text"
181-
/>
182-
</FormGroup>
171+
<MarkdownDescriptionInput
172+
value={parameters.description || ""}
173+
onChange={(val) => onChange({ ...parameters, description: val })}
174+
/>
183175
</div>
184176
<div
185177
className={classnames("card-entry", {

‎src/formBuilder/FormBuilder.tsx‎

Lines changed: 1 addition & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React, { ReactElement, useEffect, useState } from "react"
22
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd"
33
import { Alert, Input } from "reactstrap"
4-
import ReactMarkdown from "react-markdown"
5-
import remarkGfm from "remark-gfm"
6-
import remarkBreaks from "remark-breaks"
74
import Card from "./Card"
85
import Section from "./Section"
96
import Add from "./Add"
7+
import MarkdownDescriptionInput from "./MarkdownDescriptionInput"
108
import {
119
parse,
1210
stringify,
@@ -23,55 +21,6 @@ import {
2321
import DEFAULT_FORM_INPUTS from "./defaults/defaultFormInputs"
2422
import type { Mods, InitParameters, AddFormObjectParametersType } from "./types"
2523

26-
function MarkdownDescriptionInput({
27-
value,
28-
onChange,
29-
}: {
30-
value: string
31-
onChange: (v: string) => void
32-
}) {
33-
const [mode, setMode] = useState<"edit" | "preview">("edit")
34-
35-
return (
36-
<div className="form-description-wrapper">
37-
<div className="form-desc-toolbar flex items-center gap-2 mb-1">
38-
<div className="join">
39-
<button
40-
type="button"
41-
className={`btn btn-sm join-item ${mode === "edit" ? "btn-primary" : "btn-ghost"}`}
42-
onClick={() => setMode("edit")}
43-
>
44-
Edit
45-
</button>
46-
<button
47-
type="button"
48-
className={`btn btn-sm join-item ${mode === "preview" ? "btn-primary" : "btn-ghost"}`}
49-
onClick={() => setMode("preview")}
50-
>
51-
Preview
52-
</button>
53-
</div>
54-
<span className="text-sm opacity-60 italic">Supports Markdown</span>
55-
</div>
56-
{mode === "edit" ? (
57-
<textarea
58-
value={value}
59-
placeholder="Description"
60-
rows={4}
61-
className="form-description w-full"
62-
onChange={(ev) => onChange(ev.target.value)}
63-
/>
64-
) : (
65-
<div className="markdown-display prose max-w-none dark:prose-invert p-2 bg-base-200 rounded border border-base-300 min-h-[6rem]">
66-
<ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
67-
{value || "_Nothing to preview yet…_"}
68-
</ReactMarkdown>
69-
</div>
70-
)}
71-
</div>
72-
)
73-
}
74-
7524
export default function FormBuilder({
7625
schema,
7726
uischema,

‎src/formBuilder/MarkdownDescriptionInput.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { useState } from "react"
2+
import ReactMarkdown from "react-markdown"
3+
import remarkGfm from "remark-gfm"
4+
import remarkBreaks from "remark-breaks"
5+
6+
export default function MarkdownDescriptionInput({
7+
value,
8+
onChange,
9+
}: {
10+
value: string
11+
onChange: (v: string) => void
12+
}) {
13+
const [mode, setMode] = useState<"edit" | "preview">("edit")
14+
15+
return (
16+
<div className="form-description-wrapper">
17+
<div className="form-desc-toolbar flex items-center gap-2 mb-1">
18+
<div className="join">
19+
<button
20+
type="button"
21+
className={`btn btn-sm join-item ${mode === "edit" ? "btn-primary" : "btn-ghost"}`}
22+
onClick={() => setMode("edit")}
23+
>
24+
Edit
25+
</button>
26+
<button
27+
type="button"
28+
className={`btn btn-sm join-item ${mode === "preview" ? "btn-primary" : "btn-ghost"}`}
29+
onClick={() => setMode("preview")}
30+
>
31+
Preview
32+
</button>
33+
</div>
34+
<span className="text-sm opacity-60 italic">Supports Markdown</span>
35+
</div>
36+
{mode === "edit" ? (
37+
<textarea
38+
value={value}
39+
placeholder="Description"
40+
rows={4}
41+
className="form-description w-full"
42+
onChange={(ev) => onChange(ev.target.value)}
43+
/>
44+
) : (
45+
<div className="markdown-display prose max-w-none dark:prose-invert p-2 bg-base-200 rounded border border-base-300 min-h-[6rem]">
46+
<ReactMarkdown remarkPlugins={[remarkGfm, remarkBreaks]}>
47+
{value || "_Nothing to preview yet…_"}
48+
</ReactMarkdown>
49+
</div>
50+
)}
51+
</div>
52+
)
53+
}

‎src/formBuilder/Section.tsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { ReactElement } from "react"
22
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd"
33
import SelectField from "src/core/components/fields/SelectField"
44
import { Alert, Input, UncontrolledTooltip, FormGroup, FormFeedback } from "reactstrap"
5+
import MarkdownDescriptionInput from "./MarkdownDescriptionInput"
56
import FBCheckbox from "./checkbox/FBCheckbox"
67
import Collapse from "./Collapse/Collapse"
78
import CardModal from "./CardModal"
@@ -223,20 +224,9 @@ export default function Section({
223224
type="help"
224225
/>
225226
</h5>
226-
<Input
227+
<MarkdownDescriptionInput
227228
value={schemaData.description || ""}
228-
placeholder="Description"
229-
type="text"
230-
onChange={(ev) =>
231-
onChange(
232-
{
233-
...schema,
234-
description: ev.target.value,
235-
},
236-
uischema
237-
)
238-
}
239-
className="card-text"
229+
onChange={(val) => onChange({ ...schema, description: val }, uischema)}
240230
/>
241231
</div>
242232
<Alert

0 commit comments

Comments
 (0)