Merge pull request #24 from DiSSCo/MarkdownEditorForDescriptionField

Add Markup editor to text field and descriptions to all fields

package.json

@@ -16,6 +16,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mdxeditor/editor": "^3.14.0",
     "@react-keycloak/web": "^3.4.0",
     "@reduxjs/toolkit": "^2.2.2",
     "axios": "^1.6.7",

src/App.css

@@ -367,4 +367,9 @@ p {
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
+}
+
+/* MDX editor toolbar */
+.mdxeditor-toolbar {
+  z-index: 0 !important;
 }

src/components/taxonomicService/taxonomicServiceFormComponents/BooleanField.tsx

@@ -43,6 +43,13 @@ const BooleanField = (props: Props) => {
                     />
                 </Col>
             </Row>
+            <Row>
+                <Col>
+                    <p className="fs-5 tc-grey">
+                        {field.description}
+                    </p>
+                </Col>
+            </Row>
         </div>
     );
 };

src/components/taxonomicService/taxonomicServiceFormComponents/FormBuilder.tsx

@@ -191,6 +191,7 @@ const FormBuilder = (props: Props) => {
             } case 'text': {
                 return <TextField field={field}
                     values={values}
+                    SetFieldValue={(fieldName: string, value: string) => SetFieldValue(fieldName, value)}
                 />;
             } default: {
                 return <StringField field={field}

src/components/taxonomicService/taxonomicServiceFormComponents/FormFieldTitle.tsx

@@ -31,6 +31,9 @@ const FormFieldTitle = (props: Props) => {
                 <p>
                     {field.title}
                 </p>
+                <p className="fs-5 tc-grey">
+                    {field.description}
+                </p>
             </Col>
             {(field.required && !isEmpty(values) && !jp.value(values, field.jsonPath)) &&
                 <Col className="d-flex align-items-center">

src/components/taxonomicService/taxonomicServiceFormComponents/RORField.tsx

@@ -84,6 +84,9 @@ const RORField = (props: Props) => {
                     <p>
                         {field.title}
                     </p>
+                    <p className="fs-5 tc-grey">
+                        {field.description}
+                    </p>
                 </Col>
                 {(field.required && !isEmpty(values) && isEmpty(jp.value(values, field.jsonPath)?.['schema:identifier'])) &&
                     <Col className="d-flex align-items-center">

src/components/taxonomicService/taxonomicServiceFormComponents/SelectField.tsx

@@ -72,7 +72,7 @@ const SelectField = (props: Props) => {
             />
             <Select placeholder="Select an option"
                 options={selectItems.toSorted((a, b) => a.label > b.label ? 1 : 0)}
-                className={formFieldClass}
+                className={`${formFieldClass} mt-1`}
                 onChange={(dropdownOption) => SetFieldValue(jsonPath, dropdownOption?.value)}
             />
         </div>

src/components/taxonomicService/taxonomicServiceFormComponents/SoftwareLicenses.tsx

@@ -44,6 +44,9 @@ const SoftwareLicenses = (props: Props) => {
             <p>
                 {field.title}{field.required ? <span className="tc-grey"> *</span> : ''}
             </p>
+            <p className="fs-5 tc-grey">
+                {field.description}
+            </p>
             <Select
                 placeholder="Select an option"
                 options={selectItems.toSorted((a, b) => a.label > b.label ? 1 : 0)}

src/components/taxonomicService/taxonomicServiceFormComponents/StringArrayField.tsx

@@ -56,6 +56,9 @@ const StringArrayField = (props: Props) => {
                                         <p>
                                             {field.title}
                                         </p>
+                                        <p className="fs-5 tc-grey">
+                                            {field.description}
+                                        </p>
                                     </Col>
                                     {(field.required && !isEmpty(values) && !jp.value(values, field.jsonPath)?.find((value: string) => !!value)) &&
                                         <Col className="d-flex align-items-center">

src/components/taxonomicService/taxonomicServiceFormComponents/TextField.tsx

@@ -1,6 +1,9 @@
 /* Import Dependencies */
+import { 
+    MDXEditor, UndoRedo, BlockTypeSelect, BoldItalicUnderlineToggles, CreateLink, 
+    linkDialogPlugin, ListsToggle, listsPlugin, headingsPlugin, codeMirrorPlugin, toolbarPlugin 
+} from '@mdxeditor/editor';
 import classNames from 'classnames';
-import { Field } from "formik";
 import jp from 'jsonpath'
 import { isEmpty } from 'lodash';
 
@@ -14,18 +17,20 @@ import FormFieldTitle from './FormFieldTitle';
 /* Props Type */
 type Props = {
     field: FormField,
-    values: Dict
+    values: Dict,
+    SetFieldValue: Function
 };
 
 
 /**
  * Component that renders an input text field for a free, long text insert
  * @param field The provided form field
  * @param values The current values in the form state
+ * @param SetFieldValue Function to set the value of a form field
  * @returns JSX Component
  */
 const TextField = (props: Props) => {
-    const { field, values } = props;
+    const { field, values, SetFieldValue } = props;
 
     /* Class Names */
     const formFieldClass = classNames({
@@ -37,10 +42,32 @@ const TextField = (props: Props) => {
             <FormFieldTitle field={field}
                 values={values}
             />
-            <Field name={field.jsonPath.replace('$', '')}
+            {/* <Field name={field.jsonPath.replace('$', '')}
                 as="textarea"
                 rows="6"
                 className={`${formFieldClass} w-100 mt-1 py-1 px-2 br-corner`}
+            /> */}
+            <MDXEditor markdown=""
+                className={`${formFieldClass} b-grey br-corner mt-1 z-0`}
+                plugins={[
+                    codeMirrorPlugin({ codeBlockLanguages: { js: 'JavaScript', css: 'CSS' } }),
+                    headingsPlugin(),
+                    linkDialogPlugin(),
+                    listsPlugin(),
+                    toolbarPlugin({
+                        toolbarContents: () => (
+                            <>
+                                {' '}
+                                <UndoRedo />
+                                <BlockTypeSelect />
+                                <BoldItalicUnderlineToggles />
+                                <CreateLink />
+                                <ListsToggle />
+                            </>
+                        )
+                    })
+                ]}
+                onChange={(text: string) => SetFieldValue(field.jsonPath.replace('$', ''), text)}
             />
         </div>
     );

src/index.tsx

@@ -7,6 +7,7 @@ import { Provider } from 'react-redux';
 import { setupStore } from './app/Store';
 
 /* Import Styles */
+import '@mdxeditor/editor/style.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import "react-datepicker/dist/react-datepicker.css";