Merge pull request #381 from ONSdigital/503-piping-broken

Fixes broken piping.
ONSdigital · Jul 12, 2018 · 278a6dd · 278a6dd
2 parents e3a41da + 64679ee
commit 278a6dd
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 12 deletions.
diff --git a/src/components/RichTextEditor/RichTextEditor.test.js b/src/components/RichTextEditor/RichTextEditor.test.js
@@ -286,4 +286,22 @@ describe("components/RichTextEditor", function() {
       });
     });
   });
+
+  describe("formatting", () => {
+    it("should not strip piped values", () => {
+      const answer = {
+        id: "123",
+        label: "pipe",
+        type: "TextField"
+      };
+
+      wrapper.find(Toolbar).simulate("piping", answer);
+      wrapper.find(`[data-test="rte-field"]`).simulate("blur");
+
+      const { value } = props.onUpdate.mock.calls[0][0];
+      expect(value).toEqual(
+        '<p><span data-piped="answers" data-id="123" data-type="TextField">[Piped Value]</span></p>'
+      );
+    });
+  });
 });
diff --git a/src/components/RichTextEditor/entities/PipedValue.js b/src/components/RichTextEditor/entities/PipedValue.js
@@ -10,6 +10,11 @@ import { bindKey } from "lodash";
 
 export const ENTITY_TYPE = "PIPED-DATA";
 
+export const filterConfig = {
+  type: ENTITY_TYPE,
+  attributes: ["id", "type"]
+};
+
 const PipedValueDecorator = styled.span`
   background-color: #e0e0e0;
   padding: 0 0.125em;

diff --git a/src/components/RichTextEditor/index.js b/src/components/RichTextEditor/index.js
@@ -19,8 +19,7 @@ import PipedValueDecorator, {
   insertPipedValue
 } from "./entities/PipedValue";
 
-import { filterEditorState } from "draftjs-filters";
-import { mapControlsToFilterConfig } from "./utils/mapControlsToFilterConfig";
+import createFormatStripper from "./utils/createFormatStripper";
 
 import { flow, uniq, map, keyBy, mapValues } from "lodash/fp";
 import { sharedStyles } from "../Forms/css";
@@ -140,7 +139,7 @@ class RichTextEditor extends React.Component {
 
     const decorator = new CompositeDecorator([PipedValueDecorator]);
 
-    this.filterConfig = mapControlsToFilterConfig(this.props.controls);
+    this.stripFormatting = createFormatStripper(this.props.controls);
 
     const editorState = props.value
       ? convertFromHTML(props.value, decorator)
@@ -240,11 +239,8 @@ class RichTextEditor extends React.Component {
   };
 
   handleChange = (editorState, callback) => {
-    let filteredState = editorState;
-    if (this.props.controls) {
-      filteredState = filterEditorState(this.filterConfig, filteredState);
-    }
-    return this.setState({ editorState: filteredState }, callback);
+    editorState = this.stripFormatting(editorState);
+    return this.setState({ editorState }, callback);
   };
 
   handleToggle = ({ id, type, style }) => {

diff --git a/...Editor/utils/mapControlsToFilterConfig.js → ...hTextEditor/utils/createFormatStripper.js b/...Editor/utils/mapControlsToFilterConfig.js → ...hTextEditor/utils/createFormatStripper.js
@@ -1,4 +1,6 @@
 import { mapKeys } from "lodash";
+import { filterEditorState } from "draftjs-filters";
+import { filterConfig } from "../entities/PipedValue";
 
 const mapper = {
   bold: { format: "BOLD", type: "styles" },
@@ -7,19 +9,20 @@ const mapper = {
   heading: { format: "header-two", type: "blocks" }
 };
 
-export function mapControlsToFilterConfig(controls) {
+export default function createFormatStripper(controls) {
   const filterConfiguration = {
     blocks: [],
     styles: [],
-    entities: [],
+    entities: [filterConfig],
     maxNesting: 0,
     whitespacedCharacters: []
   };
 
   mapKeys(controls, (value, key) => {
-    if (mapper[key]) {
+    if (mapper[key] && controls[key]) {
       filterConfiguration[mapper[key].type].push(mapper[key].format);
     }
   });
-  return filterConfiguration;
+
+  return editorState => filterEditorState(filterConfiguration, editorState);
 }