#3081: Make htmlTemplate for rickTextEditor configurable

It is now possible to configure within the anet.yml, through report.reportText.placeholder the html template to be used per default for the report text.
NCI-Agency · Jun 30, 2020 · a4ec1ac · a4ec1ac
1 parent a116a82
commit a4ec1ac
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 43 deletions.
diff --git a/anet.yml b/anet.yml
@@ -320,7 +320,9 @@ dictionary:
       reportTags: Tags
       nextSteps: Next steps
       keyOutcomes: Key outcomes
-      reportText: Key details
+      reportText:
+        label: Key details
+        placeholder: <h1 class="mandatory" placeholder="Key details 1">Key details 1</h1><p class="mandatory" placeholder="Type here key details 1 extra information">Type here key details 1 extra information</p><h1 class="mandatory" placeholder="Key details 2">Key details 2</h1><p class="mandatory" placeholder="Type here key details 2 extra information">Type here key details 2 extra information</p><h1 class="mandatory" placeholder="Key details 3">Key details 3</h1><p class="mandatory" placeholder="Type here key details 3 extra information">Type here key details 3 extra information</p>
       customFields:
         multipleButtons:
           type: enumset

diff --git a/client/src/components/RichTextEditor.js b/client/src/components/RichTextEditor.js
@@ -203,8 +203,7 @@ class RichTextEditor extends Component {
       value,
       onChange,
       onHandleBlur,
-      template,
-      templateHTML
+      htmlTemplate
     } = this.props
     const { sideToolbarPlugin } = this.state
     const { SideToolbar } = sideToolbarPlugin
@@ -230,9 +229,9 @@ class RichTextEditor extends Component {
           rawContentState={
             value
               ? fromHTML(value)
-              : templateHTML
-                ? fromHTML(templateHTML)
-                : template || null
+              : htmlTemplate
+                ? fromHTML(htmlTemplate)
+                : null
           }
           showUndoControl
           showRedoControl
@@ -267,8 +266,7 @@ RichTextEditor.propTypes = {
   value: PropTypes.string,
   onChange: PropTypes.func,
   onHandleBlur: PropTypes.func,
-  template: PropTypes.object,
-  templateHTML: PropTypes.string
+  htmlTemplate: PropTypes.string
 }
 
 export default RichTextEditor
diff --git a/client/src/pages/reports/Form.js b/client/src/pages/reports/Form.js
@@ -32,7 +32,6 @@ import ReportTags from "components/ReportTags"
 import RichTextEditor from "components/RichTextEditor"
 import { RECURSE_STRATEGY } from "components/SearchFilters"
 import TaskTable from "components/TaskTable"
-import { BLOCK_TYPE } from "draftail"
 import { FastField, Field, Form, Formik } from "formik"
 import _cloneDeep from "lodash/cloneDeep"
 import _debounce from "lodash/debounce"
@@ -503,33 +502,6 @@ const BaseReportForm = ({
           </div>
         )
         const isFutureEngagement = Report.isFuture(values.engagementDate)
-        const reportTextTemplateHTML =
-          '<h1 class="mandatory" style={ placeholder: "aaa" }>Key details 1</h1><p class="mandatory"></p><h1 class="mandatory" style={ placeholder: "aaa" }>Key details 2</h1><p class="mandatory"></p>'
-        const reportTextTemplate = {
-          blocks: [
-            {
-              data: { mandatory: true, class: "mandatory" },
-              text: "Step 1",
-              type: BLOCK_TYPE.HEADER_ONE
-            },
-            {
-              data: { mandatory: true },
-              text: "Step 2",
-              type: BLOCK_TYPE.HEADER_ONE
-            },
-            {
-              data: {},
-              text: "Step 3",
-              type: BLOCK_TYPE.HEADER_ONE
-            },
-            {
-              data: { class: "mandatory" },
-              text: "",
-              type: BLOCK_TYPE.HEADER_ONE
-            }
-          ],
-          entityMap: {}
-        }
         return (
           <div className="report-form">
             <NavigationWarning isBlocking={dirty} />
@@ -978,7 +950,7 @@ const BaseReportForm = ({
 
                 <FastField
                   name="reportText"
-                  label={Settings.fields.report.reportText}
+                  label={Settings.fields.report.reportText.label}
                   component={FieldHelper.SpecialField}
                   onChange={value => setFieldValue("reportText", value, true)}
                   widget={
@@ -988,8 +960,9 @@ const BaseReportForm = ({
                         // validation will be done by setFieldValue
                         setFieldTouched("reportText", true, false)
                       }}
-                      template={reportTextTemplate}
-                      templateHTML={reportTextTemplateHTML}
+                      htmlTemplate={
+                        Settings.fields.report.reportText.placeholder
+                      }
                     />
                   }
                 />

diff --git a/client/src/pages/reports/Show.js b/client/src/pages/reports/Show.js
@@ -625,7 +625,7 @@ const BaseReportShow = ({ currentUser, setSearchQuery, pageDispatchers }) => {
                 />
               </Fieldset>
               {report.reportText && (
-                <Fieldset title={Settings.fields.report.reportText}>
+                <Fieldset title={Settings.fields.report.reportText.label}>
                   {parseHtmlWithLinkTo(report.reportText)}
                 </Fieldset>
               )}

diff --git a/src/main/resources/anet-schema.yml b/src/main/resources/anet-schema.yml
@@ -415,9 +415,7 @@ properties:
             title: The label for report's key outcomes
             description: Used in the UI where report's key outcomes are shown.
           reportText:
-            type: string
-            title: The label for report's engagement details
-            description: Used in the UI where report's engagement details are shown.
+            "$ref": "#/definitions/inputField"
           customFields:
             type: object
             additionalProperties: