#3081: WIP: Replace mandatory elems with placeholder

In the RichTextEditor, replace mandatory elements with a placeholder when all their text is being deleted.
NCI-Agency · Jun 25, 2020 · bea58fa · bea58fa
1 parent c167807
commit bea58fa
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 6 deletions.
diff --git a/client/src/components/RichTextEditor.js b/client/src/components/RichTextEditor.js
@@ -106,15 +106,22 @@ const importerConfig = {
   },
   htmlToBlock: (nodeName, node) => {
     if (
-      nodeName === "h1" ||
-      node.attributes?.classname?.nodeValue === "mandatory"
+      nodeName === "h1" &&
+      node.attributes?.class?.nodeValue === "mandatory"
     ) {
       return {
         type: BLOCK_TYPE.HEADER_ONE,
         data: { mandatory: true }
       }
     }
 
+    if (nodeName === "p" && node.attributes?.class?.nodeValue === "mandatory") {
+      return {
+        type: BLOCK_TYPE.UNSTYLED,
+        data: { mandatory: true }
+      }
+    }
+
     if (nodeName === "hr" || nodeName === "img") {
       // "atomic" blocks is how Draft.js structures block-level entities.
       return "atomic"

diff --git a/client/src/components/editor/plugins/readonlyBlockPlugin.js b/client/src/components/editor/plugins/readonlyBlockPlugin.js
@@ -1,3 +1,15 @@
+import { EditorState, Modifier } from "draft-js"
+
+const createPlaceholder = (placeholder, nextState) => {
+  // Replace the text with a placeholder
+  const nextContentState = Modifier.replaceText(
+    nextState.getCurrentContent(),
+    nextState.getSelection(),
+    placeholder
+  )
+  return EditorState.push(nextState, nextContentState, "insert-characters")
+}
+
 const createReadonlyBlockPlugin = config => {
   // TODO: rename plugin
   const blockStyleFn = contentBlock => {
@@ -8,21 +20,53 @@ const createReadonlyBlockPlugin = config => {
     }
   }
 
-  const handleKeyCommand = (command, editorState) => {
+  const handleKeyCommand = (command, editorState, { setEditorState }) => {
     if (["backspace", "delete"].includes(command)) {
       const selectionState = editorState.getSelection()
       const anchorKey = selectionState.getAnchorKey()
       const contentState = editorState.getCurrentContent()
       const currentContentBlock = contentState.getBlockForKey(anchorKey)
       const currentContentBlockData = currentContentBlock.getData().toObject()
       const currentContentBlockText = currentContentBlock.getText()
+      const mandatoryBlock = currentContentBlockData.mandatory
+      const blockAchorOffset = selectionState.anchorOffset
+      const blockLength = currentContentBlockText.length
+      if (command === "backspace" && mandatoryBlock && blockAchorOffset === 0) {
+        // Prevent deleting the block itself
+        // FIXME: handleKeyCommand is not being used in this case for the first
+        // content block
+        return "handled"
+      }
       if (
-        currentContentBlockData.mandatory &&
-        currentContentBlockText.length === 1
+        command === "delete" &&
+        mandatoryBlock &&
+        blockAchorOffset === blockLength
       ) {
         // Prevent deleting the block itself
         return "handled"
       }
+      if (
+        command === "delete" &&
+        mandatoryBlock &&
+        blockAchorOffset === 0 &&
+        blockLength === 1
+      ) {
+        // Replace by placeholder
+        const nextState = editorState
+        setEditorState(createPlaceholder("placeholder", nextState))
+        return "handled"
+      }
+      if (
+        command === "backspace" &&
+        mandatoryBlock &&
+        blockAchorOffset === 1 &&
+        blockLength === 1
+      ) {
+        // Replace by placeholder
+        const nextState = editorState
+        setEditorState(createPlaceholder("placeholder", nextState))
+        return "handled"
+      }
     }
 
     return "not-handled"

diff --git a/client/src/pages/reports/Form.js b/client/src/pages/reports/Form.js
@@ -504,7 +504,7 @@ const BaseReportForm = ({
         )
         const isFutureEngagement = Report.isFuture(values.engagementDate)
         const reportTextTemplateHTML =
-          '<h1 class="mandatory" style={ placeholder: "aaa" }>Key details 1</h1>'
+          '<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: [
             {