Feat/rich text editor

package.json

@@ -13,6 +13,7 @@
     "bootstrap": "^4.4.1",
     "dexie": "^3.0.3",
     "dotenv-webpack": "^1.8.0",
+    "draft-js": "^0.11.7",
     "font-awesome": "^4.7.0",
     "i18next": "^19.7.0",
     "js-cookie": "^2.2.1",

src/components/cardWithTable/CardWithTable.js

@@ -47,7 +47,9 @@ const CardWithTable = props => {
 
     const tableData = Object.keys(headers).map((key, index) => {
       const td = row[key];
-      const triggerOverlay = !isShortText(td, textDisplayLimit);
+      const getShortTextFrom = row.getShortTextFrom || key;
+      const shorText = row[getShortTextFrom];
+      const triggerOverlay = !isShortText(shorText, textDisplayLimit);
       const triggerTooltip = needsTooltip(key);
       let safeVal = td?.props?.children || td;
       safeVal = toolTipLKMap[key] === LK.CARRIER && td.length === 6 ? td.slice(0, 2) : td;
@@ -59,7 +61,7 @@ const CardWithTable = props => {
               <LazyImage val={safeVal} type={toolTipLKMap[key].type}></LazyImage>
             )}
             <ToolTipWrapper data={{ val: td, lkup: toolTipLKMap[key].type }}>
-              {getShortText(td, textDisplayLimit)}
+              {getShortText(shorText, textDisplayLimit)}
             </ToolTipWrapper>
           </>
         </td>
@@ -69,7 +71,7 @@ const CardWithTable = props => {
             <LazyImage val={safeVal} type={toolTipLKMap[key].type}></LazyImage>
           )}
           <Overlay trigger={["click", "hover"]} key={key} content={td}>
-            <td className="as-info">{getShortText(td, textDisplayLimit)}</td>
+            <td className="as-info">{getShortText(shorText, textDisplayLimit)}</td>
           </Overlay>
         </>
       ) : (

src/components/eventNotesModal/EventNotesModal.js

@@ -20,6 +20,14 @@ const EventNotesModal = props => {
   const [notTypes, setNoteTypes] = useState([]);
   const { getCachedCoreFields } = useContext(LookupContext);
 
+  const paramCallback = params => {
+    const parsedParams = params[1];
+    const note = parsedParams["rtfNote"];
+
+    parsedParams["plainTextNote"] = note.plainText;
+    parsedParams["rtfNote"] = note.richTextFormat;
+    return [params[0], parsedParams];
+  };
   const handleClose = (status, res) => {
     setShow(false);
     if (hasData(props.callback)) props.callback(status, res);
@@ -81,6 +89,7 @@ const EventNotesModal = props => {
             afterProcessed={handleClose}
             recordId={paxId}
             cancellable
+            paramCallback={paramCallback}
           >
             <LabelledInput
               inputtype="select"
@@ -92,13 +101,12 @@ const EventNotesModal = props => {
               options={notTypes}
             />
             <LabelledInput
-              inputtype="textarea"
-              labelText={<Xl8 xid="evn001">Notes</Xl8>}
-              name="plainTextNote"
+              inputtype="richText"
+              name="rtfNote"
               alt={<Xl8 xid="11">Notes</Xl8>}
-              datafield="plainTextNote"
+              datafield="rtfNote"
               required="required"
-              inputval=""
+              placeholder="Add notes here..."
             />
           </Form>
         </ModalBody>

src/components/inputs/richTextEditor/RichTextEditor.js

@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import { Editor, EditorState, convertToRaw, convertFromRaw } from "draft-js";
+import "draft-js/dist/Draft.css";
+import "./RichTextEditor.scss";
+import Toolbar from "./toolbar/Toolbar";
+import { toolbarItems } from "./constants";
+import { hasData } from "../../../utils/utils";
+const RichTextEditor = props => {
+  const initState = hasData(props.content)
+    ? EditorState.createWithContent(convertFromRaw(props.content))
+    : EditorState.createEmpty();
+  const [editorState, setEditorState] = useState(initState);
+  const onChange = editorState => {
+    const plainText = editorState.getCurrentContent().getPlainText(". ");
+    const richTextFormat = convertToRaw(editorState.getCurrentContent());
+    setEditorState(editorState);
+    props.callback({ plainText: plainText, richTextFormat: richTextFormat });
+  };
+
+  return (
+    <div className={`${props.className} rte-container`}>
+      {!props.readOnly && (
+        <Toolbar
+          toolbarItems={toolbarItems}
+          editorState={editorState}
+          onChange={onChange}
+        />
+      )}
+      <Editor
+        editorState={editorState}
+        onChange={onChange}
+        placeholder={props.placeholder}
+        readOnly={props.readOnly}
+      />
+    </div>
+  );
+};
+
+export default RichTextEditor;

src/components/inputs/richTextEditor/RichTextEditor.scss

@@ -0,0 +1,17 @@
+.rte-container {
+  min-height: 200px;
+  box-sizing: border-box;
+  border: 1px solid #ddd;
+  cursor: text;
+  padding: 16px;
+  border-radius: 2px;
+  margin-bottom: 2em;
+  box-shadow: inset 0px 1px 8px -3px #ababab;
+  background: #fefefe;
+}
+.DraftEditor-editorContainer,
+.DraftEditor-root,
+.public-DraftEditor-content {
+  color: black !important;
+  min-height: 150px;
+}

src/components/inputs/richTextEditor/constants.js

@@ -0,0 +1,43 @@
+import React from "react";
+export const styleType = {
+  INLINE: "inline",
+  BLOCK: "block"
+};
+export const toolbarItems = [
+  {
+    label: "bold",
+    style: "BOLD",
+    type: styleType.INLINE,
+    icon: <i className="fa fa-bold"></i>
+  },
+  {
+    label: "italic",
+    style: "ITALIC",
+    type: styleType.INLINE,
+    icon: <i className="fa fa-italic"></i>
+  },
+  {
+    label: "underline",
+    style: "UNDERLINE",
+    type: styleType.INLINE,
+    icon: <i className="fa fa-underline"></i>
+  },
+  {
+    label: "h",
+    style: "header-two",
+    type: styleType.BLOCK
+    // icon: <i className="fa fa-heading"></i>
+  },
+  {
+    label: "ul",
+    style: "unordered-list-item",
+    type: styleType.BLOCK,
+    icon: <i className="fa fa-list-ul"></i>
+  },
+  {
+    label: "ol",
+    style: "ordered-list-item",
+    type: styleType.BLOCK,
+    icon: <i className="fa fa-list-ol"></i>
+  }
+];

src/components/inputs/richTextEditor/toolbar/Toolbar.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { Row } from "react-bootstrap";
+import { asArray } from "../../../../utils/utils";
+import ToolbarItem from "./toolbarItem/ToolbarItem";
+import { RichUtils } from "draft-js";
+import "./Toolbar.scss";
+import { styleType } from "../constants";
+
+const Toolbar = props => {
+  const editorState = props.editorState;
+  const onChange = props.onChange;
+
+  const applyInlineStyle = style => {
+    onChange(RichUtils.toggleInlineStyle(editorState, style));
+  };
+  const applyBlockStyle = style => {
+    onChange(RichUtils.toggleBlockType(editorState, style));
+  };
+
+  const isActive = style => {
+    const currentStyle = editorState.getCurrentInlineStyle();
+    return currentStyle.has(style);
+  };
+
+  const onClick = (e, style, type) => {
+    e.preventDefault();
+
+    type === styleType.BLOCK ? applyBlockStyle(style) : applyInlineStyle(style);
+  };
+
+  return (
+    <div className="toolbar-row">
+      {asArray(props.toolbarItems).map((item, index) => (
+        <ToolbarItem
+          isActive={isActive(item.style)}
+          onClick={e => onClick(e, item.style, item.type)}
+          key={`${item.label}-${index}`}
+        >
+          {item.icon || item.label}
+        </ToolbarItem>
+      ))}
+    </div>
+  );
+};
+
+export default Toolbar;

src/components/inputs/richTextEditor/toolbar/Toolbar.scss

@@ -0,0 +1,7 @@
+.toolbar-row {
+  display: flex;
+  flex-wrap: nowrap;
+  align-content: center;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #ddd;
+}

src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.js

@@ -0,0 +1,17 @@
+import React from "react";
+import "./ToolbarItem.scss";
+
+const ToolbarItem = props => {
+  return (
+    <div
+      isActive={props.isActive}
+      key={props.key}
+      className={`${props.isActive && "active-toolbar-item"} toolbar-item`}
+      onClick={props.onClick}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default ToolbarItem;

src/components/inputs/richTextEditor/toolbar/toolbarItem/ToolbarItem.scss

@@ -0,0 +1,29 @@
+.toolbar-item {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 3px;
+  box-shadow: 0px 1px 11px 1px rgba(15, 15, 15, 0.2);
+  background-color: #c3d1df;
+  color: #34495e;
+  font-size: 13px;
+  transition: all 250ms ease-in-out;
+  cursor: pointer;
+}
+.active-toolbar-item {
+  transform: translateY(1px);
+  color: #fff;
+  background-color: #34495e;
+  box-shadow: none;
+  border: 1px solid #c3d1df;
+}
+
+.toolbar-item:hover {
+  transform: translateY(1px);
+  color: #c3d1df;
+  background-color: #34495e;
+  box-shadow: none;
+  border: 1px solid #c3d1df;
+}