Raw HTML for text elements

package-lock.json

@@ -17,12 +17,14 @@
         "@reduxjs/toolkit": "^1.5.1",
         "@testing-library/jest-dom": "^5.13.0",
         "@testing-library/user-event": "^12.8.3",
+        "@tinymce/tinymce-react": "^4.2.0",
         "axios": "^0.21.1",
         "date-fns": "^2.29.3",
         "eslint-plugin-prettier": "^3.4.0",
         "eslint-plugin-security": "^1.4.0",
         "faker": "^5.5.3",
         "formik": "^2.2.9",
+        "html-react-parser": "^3.0.4",
         "i18next": "^20.3.1",
         "json-server": "^0.17.0",
         "jsonwebtoken": "^8.5.1",
@@ -3951,6 +3953,19 @@
         "regenerator-runtime": "^0.13.4"
       }
     },
+    "node_modules/@tinymce/tinymce-react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-react/-/tinymce-react-4.2.0.tgz",
+      "integrity": "sha512-Oyi/hDvARR29oqUwTgYXDnMV9E/c7C8V+iK+gUj9tndVXsfSJRYVOw3MTK9CCC9f7alN/S4CYaPpIaA3f4VZzw==",
+      "dependencies": {
+        "prop-types": "^15.6.2",
+        "tinymce": "^6.0.0 || ^5.5.1"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^17.0.1 || ^16.7.0",
+        "react-dom": "^18.0.0 || ^17.0.1 || ^16.7.0"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -11471,6 +11486,95 @@
       "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
       "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg="
     },
+    "node_modules/html-dom-parser": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-3.1.2.tgz",
+      "integrity": "sha512-mLTtl3pVn3HnqZSZzW3xVs/mJAKrG1yIw3wlp+9bdoZHHLaBRvELdpfShiPVLyjPypq1Fugv2KMDoGHW4lVXnw==",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "htmlparser2": "8.0.1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/html-dom-parser/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/domutils": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+      "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/entities": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+      "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/html-dom-parser/node_modules/htmlparser2": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+      "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "entities": "^4.3.0"
+      }
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -11520,6 +11624,45 @@
         "void-elements": "3.1.0"
       }
     },
+    "node_modules/html-react-parser": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-3.0.4.tgz",
+      "integrity": "sha512-va68PSmC7uA6PbOEc9yuw5Mu3OHPXmFKUpkLGvUPdTuNrZ0CJZk1s/8X/FaHjswK/6uZghu2U02tJjussT8+uw==",
+      "dependencies": {
+        "domhandler": "5.0.3",
+        "html-dom-parser": "3.1.2",
+        "react-property": "2.0.0",
+        "style-to-js": "1.1.1"
+      },
+      "peerDependencies": {
+        "react": "0.14 || 15 || 16 || 17 || 18"
+      }
+    },
+    "node_modules/html-react-parser/node_modules/domelementtype": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/html-react-parser/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz",
@@ -12056,6 +12199,11 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+    },
     "node_modules/internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -20919,6 +21067,11 @@
         "regenerator-runtime": "^0.13.2"
       }
     },
+    "node_modules/react-property": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz",
+      "integrity": "sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw=="
+    },
     "node_modules/react-redux": {
       "version": "7.2.9",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
@@ -23602,6 +23755,22 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.1.tgz",
+      "integrity": "sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg==",
+      "dependencies": {
+        "style-to-object": "0.3.0"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
+      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "dependencies": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
     "node_modules/stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -24136,6 +24305,11 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "node_modules/tinymce": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.3.1.tgz",
+      "integrity": "sha512-+oCwXuTxAdJXVJ0130OxQz0JDNsqg3deuzgeUo8X5Vb27EzCJgXwO5eWvCxvkxpQo4oiHMVlM4tUIpTUHufHGQ=="
+    },
     "node_modules/tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@@ -29752,6 +29926,15 @@
         }
       }
     },
+    "@tinymce/tinymce-react": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-react/-/tinymce-react-4.2.0.tgz",
+      "integrity": "sha512-Oyi/hDvARR29oqUwTgYXDnMV9E/c7C8V+iK+gUj9tndVXsfSJRYVOw3MTK9CCC9f7alN/S4CYaPpIaA3f4VZzw==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "tinymce": "^6.0.0 || ^5.5.1"
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -35659,6 +35842,66 @@
       "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
       "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg="
     },
+    "html-dom-parser": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-3.1.2.tgz",
+      "integrity": "sha512-mLTtl3pVn3HnqZSZzW3xVs/mJAKrG1yIw3wlp+9bdoZHHLaBRvELdpfShiPVLyjPypq1Fugv2KMDoGHW4lVXnw==",
+      "requires": {
+        "domhandler": "5.0.3",
+        "htmlparser2": "8.0.1"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+          "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.2",
+            "entities": "^4.2.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+        },
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        },
+        "domutils": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz",
+          "integrity": "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q==",
+          "requires": {
+            "dom-serializer": "^2.0.0",
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.1"
+          }
+        },
+        "entities": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz",
+          "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
+        },
+        "htmlparser2": {
+          "version": "8.0.1",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
+          "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+          "requires": {
+            "domelementtype": "^2.3.0",
+            "domhandler": "^5.0.2",
+            "domutils": "^3.0.1",
+            "entities": "^4.3.0"
+          }
+        }
+      }
+    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -35699,6 +35942,32 @@
         "void-elements": "3.1.0"
       }
     },
+    "html-react-parser": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/html-react-parser/-/html-react-parser-3.0.4.tgz",
+      "integrity": "sha512-va68PSmC7uA6PbOEc9yuw5Mu3OHPXmFKUpkLGvUPdTuNrZ0CJZk1s/8X/FaHjswK/6uZghu2U02tJjussT8+uw==",
+      "requires": {
+        "domhandler": "5.0.3",
+        "html-dom-parser": "3.1.2",
+        "react-property": "2.0.0",
+        "style-to-js": "1.1.1"
+      },
+      "dependencies": {
+        "domelementtype": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
+          "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+        },
+        "domhandler": {
+          "version": "5.0.3",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+          "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+          "requires": {
+            "domelementtype": "^2.3.0"
+          }
+        }
+      }
+    },
     "html-webpack-plugin": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz",
@@ -36121,6 +36390,11 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
     },
+    "inline-style-parser": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz",
+      "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+    },
     "internal-ip": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz",
@@ -42820,6 +43094,11 @@
         }
       }
     },
+    "react-property": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz",
+      "integrity": "sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw=="
+    },
     "react-redux": {
       "version": "7.2.9",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
@@ -44969,6 +45248,22 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "style-to-js": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.1.tgz",
+      "integrity": "sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg==",
+      "requires": {
+        "style-to-object": "0.3.0"
+      }
+    },
+    "style-to-object": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz",
+      "integrity": "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==",
+      "requires": {
+        "inline-style-parser": "0.1.1"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -45375,6 +45670,11 @@
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
       "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
+    "tinymce": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.3.1.tgz",
+      "integrity": "sha512-+oCwXuTxAdJXVJ0130OxQz0JDNsqg3deuzgeUo8X5Vb27EzCJgXwO5eWvCxvkxpQo4oiHMVlM4tUIpTUHufHGQ=="
+    },
     "tmpl": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",

package.json

@@ -12,12 +12,14 @@
     "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/user-event": "^12.8.3",
+    "@tinymce/tinymce-react": "^4.2.0",
     "axios": "^0.21.1",
     "date-fns": "^2.29.3",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-security": "^1.4.0",
     "faker": "^5.5.3",
     "formik": "^2.2.9",
+    "html-react-parser": "^3.0.4",
     "i18next": "^20.3.1",
     "json-server": "^0.17.0",
     "jsonwebtoken": "^8.5.1",

src/assets/styles/components/_ads.scss

@@ -778,6 +778,14 @@ h3 {
   margin-bottom: 9px;
 }
 
+.add-ad-modal-stage-sub-card-third .tox-tinymce {
+  height: 150px !important;
+}
+
+.ad-details-content-conten-description p {
+  display: block;
+}
+
 .add-ad-modal-stage-sub-card label,
 .add-ad-modal-stage-sub-card-third label {
   margin-bottom: 4.5px !important;

src/components/Ads/AddAdModal.js

@@ -29,9 +29,6 @@ const AddAdModal = ({ open, handleClose }) => {
   const [workHour, setWorkHour] = useState("FullTime");
   const [expiredAt, setExpiredAt] = useState(new Date());
   const [experience, setExperience] = useState(0);
-  const [keyResponsibilities, setKeyResponsibilities] = useState("");
-  const [requirements, setRequirements] = useState("");
-  const [whatWeOffer, setWhatWeOffer] = useState("");
   const technologies = useSelector(
     (state) => state.addAdTechnologies.technologies
   );
@@ -41,7 +38,7 @@ const AddAdModal = ({ open, handleClose }) => {
     dispatch(setTechnologiesAddAdReq());
   }, []);
 
-  const addAdHandler = () => {
+  const addAdHandler = (htmlKeyResponsibilities, htmlRequirements, htmlOffer) => {
     const technologiesIds = technologies
       .filter((x) => x.isChecked === true)
       .map((x) => x.technologyId);
@@ -52,9 +49,10 @@ const AddAdModal = ({ open, handleClose }) => {
         minimumExperience: experience,
         createdAt: new Date(),
         expiredAt,
-        keyResponsibilities,
-        requirements,
-        offer: whatWeOffer,
+        // keyResponsibilities,
+        keyResponsibilities: htmlKeyResponsibilities,
+        requirements: htmlRequirements,
+        offer: htmlOffer,
         workHour,
         employmentType,
         technologiesIds,
@@ -131,12 +129,6 @@ const AddAdModal = ({ open, handleClose }) => {
           {stage === 3 && (
             <AddAdModalThirdStage
               onDecrementStage={decrementStageHandler}
-              keyResponsibilities={keyResponsibilities}
-              setKeyResponsibilities={setKeyResponsibilities}
-              requirements={requirements}
-              setRequirements={setRequirements}
-              whatWeOffer={whatWeOffer}
-              setWhatWeOffer={setWhatWeOffer}
               onAddAd={addAdHandler}
             />
           )}

src/components/Ads/AddAdModalThirdStage.js

@@ -1,26 +1,26 @@
-import React from "react";
+import React, { useRef } from "react";
 import PropTypes from "prop-types";
+import { Editor } from "@tinymce/tinymce-react";
+
+const AddAdModalThirdStage = ({ onDecrementStage, onAddAd }) => {
+  const editorKeyResponsibilitiesRef = useRef();
+  const editorRequirementsRef = useRef();
+  const editorOfferRef = useRef();
 
-const AddAdModalThirdStage = ({
-  onDecrementStage,
-  keyResponsibilities,
-  setKeyResponsibilities,
-  requirements,
-  setRequirements,
-  whatWeOffer,
-  setWhatWeOffer,
-  onAddAd,
-}) => {
   const completeStageHandler = () => {
     if (
-      keyResponsibilities.length === 0 ||
-      requirements.length === 0 ||
-      whatWeOffer.length === 0
+      editorKeyResponsibilitiesRef.current.getContent() === "" ||
+      editorRequirementsRef.current.getContent() === "" ||
+      editorOfferRef.current.getContent() === ""
     ) {
       return;
     }
 
-    onAddAd();
+    onAddAd(
+      editorKeyResponsibilitiesRef.current.getContent(),
+      editorRequirementsRef.current.getContent(),
+      editorOfferRef.current.getContent()
+    );
   };
 
   return (
@@ -28,35 +28,28 @@ const AddAdModalThirdStage = ({
       <div>
         <div className="add-ad-modal-stage-sub-card-third">
           <label>Glavna zaduzenja</label>
-          <textarea
-            type="text"
-            placeholder="ex. Working as a React developer on various projects... (Separate every responsibility with | sign)"
-            value={keyResponsibilities}
-            onChange={(e) => setKeyResponsibilities(e.target.value)}
-            rows={5}
-          ></textarea>
+          <Editor
+            onInit={(evt, editor) =>
+              (editorKeyResponsibilitiesRef.current = editor)
+            }
+            style={{ height: "1rem !important" }}
+          />
         </div>
 
         <div className="add-ad-modal-stage-sub-card-third">
           <label>Uslovi</label>
-          <textarea
-            type="text"
-            placeholder="ex. Good software development fundamentals...  (Separate every condition with | sign)"
-            value={requirements}
-            onChange={(e) => setRequirements(e.target.value)}
-            rows={5}
-          ></textarea>
+          <Editor
+            onInit={(evt, editor) => (editorRequirementsRef.current = editor)}
+            style={{ height: "1rem !important" }}
+          />
         </div>
 
         <div className="add-ad-modal-stage-sub-card-third">
           <label>Sta nudimo</label>
-          <textarea
-            type="text"
-            placeholder="ex. Full Remote position...  (Separate every offer with | sign)"
-            value={whatWeOffer}
-            onChange={(e) => setWhatWeOffer(e.target.value)}
-            rows={5}
-          ></textarea>
+          <Editor
+            onInit={(evt, editor) => (editorOfferRef.current = editor)}
+            style={{ height: "1rem !important" }}
+          />
         </div>
       </div>
 
@@ -77,12 +70,6 @@ const AddAdModalThirdStage = ({
 
 AddAdModalThirdStage.propTypes = {
   onDecrementStage: PropTypes.func,
-  keyResponsibilities: PropTypes.any,
-  setKeyResponsibilities: PropTypes.func,
-  requirements: PropTypes.any,
-  setRequirements: PropTypes.func,
-  whatWeOffer: PropTypes.any,
-  setWhatWeOffer: PropTypes.func,
   onAddAd: PropTypes.func,
 };
 

src/pages/AdsPage/AdDetailsPage.js

@@ -21,6 +21,7 @@ import { useHistory } from "react-router-dom";
 import archiveIcon from "../../assets/images/archive.png";
 import ApplyForAd from "../../components/Ads/ApplyForAd";
 import { useState } from "react";
+import parse from "html-react-parser";
 
 const AdDetailsPage = () => {
   const theme = useTheme();
@@ -166,27 +167,15 @@ const AdDetailsPage = () => {
                 </div>
                 <div className="ad-details-content-conten-description">
                   <h3>{t("ads.adDetailsKeyResponsibilities")}</h3>
-                  <ul>
-                    {ad.keyResponsibilities.split("|").map((r, index) => (
-                      <li key={index}>{r}</li>
-                    ))}
-                  </ul>
+                  {parse(ad.keyResponsibilities)}
                 </div>
                 <div className="ad-details-content-conten-description">
                   <h3>{t("ads.adDetailsRequirements")}</h3>
-                  <ul>
-                    {ad.requirements.split("|").map((r, index) => (
-                      <li key={index}>{r}</li>
-                    ))}
-                  </ul>
+                  {parse(ad.requirements)}
                 </div>
                 <div className="ad-details-content-conten-description">
                   <h3>{t("ads.adDetailsOffer")}</h3>
-                  <ul>
-                    {ad.offer.split("|").map((o, index) => (
-                      <li key={index}>{o}</li>
-                    ))}
-                  </ul>
+                  {parse(ad.offer)}
                 </div>
               </div>
             </div>

yarn.lock

@@ -2087,6 +2087,14 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+"@tinymce/tinymce-react@^4.2.0":
+  "integrity" "sha512-Oyi/hDvARR29oqUwTgYXDnMV9E/c7C8V+iK+gUj9tndVXsfSJRYVOw3MTK9CCC9f7alN/S4CYaPpIaA3f4VZzw=="
+  "resolved" "https://registry.npmjs.org/@tinymce/tinymce-react/-/tinymce-react-4.2.0.tgz"
+  "version" "4.2.0"
+  dependencies:
+    "prop-types" "^15.6.2"
+    "tinymce" "^6.0.0 || ^5.5.1"
+
 "@tootallnate/once@1":
   "integrity" "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw=="
   "resolved" "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz"
@@ -4870,6 +4878,15 @@
     "@babel/runtime" "^7.8.7"
     "csstype" "^3.0.2"
 
+"dom-serializer@^2.0.0":
+  "integrity" "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="
+  "resolved" "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz"
+  "version" "2.0.0"
+  dependencies:
+    "domelementtype" "^2.3.0"
+    "domhandler" "^5.0.2"
+    "entities" "^4.2.0"
+
 "dom-serializer@0":
   "integrity" "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g=="
   "resolved" "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz"
@@ -4893,6 +4910,11 @@
   "resolved" "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz"
   "version" "2.2.0"
 
+"domelementtype@^2.3.0":
+  "integrity" "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+  "resolved" "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz"
+  "version" "2.3.0"
+
 "domexception@^2.0.1":
   "integrity" "sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg=="
   "resolved" "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz"
@@ -4907,6 +4929,13 @@
   dependencies:
     "domelementtype" "1"
 
+"domhandler@^5.0.1", "domhandler@^5.0.2", "domhandler@5.0.3":
+  "integrity" "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="
+  "resolved" "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz"
+  "version" "5.0.3"
+  dependencies:
+    "domelementtype" "^2.3.0"
+
 "domutils@^1.5.1", "domutils@^1.7.0":
   "integrity" "sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg=="
   "resolved" "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz"
@@ -4915,6 +4944,15 @@
     "dom-serializer" "0"
     "domelementtype" "1"
 
+"domutils@^3.0.1":
+  "integrity" "sha512-z08c1l761iKhDFtfXO04C7kTdPBLi41zwOZl00WS8b5eiaebNpY00HKbztwBq+e3vyqWNwWF3mP9YLUeqIrF+Q=="
+  "resolved" "https://registry.npmjs.org/domutils/-/domutils-3.0.1.tgz"
+  "version" "3.0.1"
+  dependencies:
+    "dom-serializer" "^2.0.0"
+    "domelementtype" "^2.3.0"
+    "domhandler" "^5.0.1"
+
 "dot-case@^3.0.4":
   "integrity" "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w=="
   "resolved" "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz"
@@ -5068,6 +5106,11 @@
   "resolved" "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz"
   "version" "2.2.0"
 
+"entities@^4.2.0", "entities@^4.3.0":
+  "integrity" "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
+  "resolved" "https://registry.npmjs.org/entities/-/entities-4.4.0.tgz"
+  "version" "4.4.0"
+
 "errno@^0.1.3", "errno@~0.1.7":
   "integrity" "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A=="
   "resolved" "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz"
@@ -6441,6 +6484,14 @@
   "resolved" "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz"
   "version" "1.0.0"
 
+"html-dom-parser@3.1.2":
+  "integrity" "sha512-mLTtl3pVn3HnqZSZzW3xVs/mJAKrG1yIw3wlp+9bdoZHHLaBRvELdpfShiPVLyjPypq1Fugv2KMDoGHW4lVXnw=="
+  "resolved" "https://registry.npmjs.org/html-dom-parser/-/html-dom-parser-3.1.2.tgz"
+  "version" "3.1.2"
+  dependencies:
+    "domhandler" "5.0.3"
+    "htmlparser2" "8.0.1"
+
 "html-encoding-sniffer@^2.0.1":
   "integrity" "sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ=="
   "resolved" "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz"
@@ -6478,6 +6529,16 @@
   dependencies:
     "void-elements" "3.1.0"
 
+"html-react-parser@^3.0.4":
+  "integrity" "sha512-va68PSmC7uA6PbOEc9yuw5Mu3OHPXmFKUpkLGvUPdTuNrZ0CJZk1s/8X/FaHjswK/6uZghu2U02tJjussT8+uw=="
+  "resolved" "https://registry.npmjs.org/html-react-parser/-/html-react-parser-3.0.4.tgz"
+  "version" "3.0.4"
+  dependencies:
+    "domhandler" "5.0.3"
+    "html-dom-parser" "3.1.2"
+    "react-property" "2.0.0"
+    "style-to-js" "1.1.1"
+
 "html-webpack-plugin@4.5.0":
   "integrity" "sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw=="
   "resolved" "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz"
@@ -6505,6 +6566,16 @@
     "inherits" "^2.0.1"
     "readable-stream" "^3.1.1"
 
+"htmlparser2@8.0.1":
+  "integrity" "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA=="
+  "resolved" "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz"
+  "version" "8.0.1"
+  dependencies:
+    "domelementtype" "^2.3.0"
+    "domhandler" "^5.0.2"
+    "domutils" "^3.0.1"
+    "entities" "^4.3.0"
+
 "http-cache-semantics@^4.0.0":
   "integrity" "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
   "resolved" "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz"
@@ -6754,6 +6825,11 @@
   "resolved" "https://registry.npmjs.org/ini/-/ini-2.0.0.tgz"
   "version" "2.0.0"
 
+"inline-style-parser@0.1.1":
+  "integrity" "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q=="
+  "resolved" "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz"
+  "version" "0.1.1"
+
 "internal-ip@^4.3.0":
   "integrity" "sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg=="
   "resolved" "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz"
@@ -10608,6 +10684,11 @@
     "prop-types" "^15.5.8"
     "substyle" "^9.1.0"
 
+"react-property@2.0.0":
+  "integrity" "sha512-kzmNjIgU32mO4mmH5+iUyrqlpFQhF8K2k7eZ4fdLSOPFrD1XgEuSBv9LDEgxRXTMBqMd8ppT0x6TIzqE5pdGdw=="
+  "resolved" "https://registry.npmjs.org/react-property/-/react-property-2.0.0.tgz"
+  "version" "2.0.0"
+
 "react-redux@^7.2.4":
   "integrity" "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ=="
   "resolved" "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz"
@@ -12254,6 +12335,20 @@
     "loader-utils" "^2.0.0"
     "schema-utils" "^2.7.0"
 
+"style-to-js@1.1.1":
+  "integrity" "sha512-RJ18Z9t2B02sYhZtfWKQq5uplVctgvjTfLWT7+Eb1zjUjIrWzX5SdlkwLGQozrqarTmEzJJ/YmdNJCUNI47elg=="
+  "resolved" "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.1.tgz"
+  "version" "1.1.1"
+  dependencies:
+    "style-to-object" "0.3.0"
+
+"style-to-object@0.3.0":
+  "integrity" "sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA=="
+  "resolved" "https://registry.npmjs.org/style-to-object/-/style-to-object-0.3.0.tgz"
+  "version" "0.3.0"
+  dependencies:
+    "inline-style-parser" "0.1.1"
+
 "stylehacks@^4.0.0":
   "integrity" "sha512-7GlLk9JwlElY4Y6a/rmbH2MhVlTyVmiJd1PfTCqFaIBEGMYNsrO/v3SeGTdhBThLg4Z+NbOk/qFMwCa+J+3p/g=="
   "resolved" "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz"
@@ -12499,6 +12594,11 @@
   "resolved" "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
   "version" "1.0.3"
 
+"tinymce@^6.0.0 || ^5.5.1":
+  "integrity" "sha512-+oCwXuTxAdJXVJ0130OxQz0JDNsqg3deuzgeUo8X5Vb27EzCJgXwO5eWvCxvkxpQo4oiHMVlM4tUIpTUHufHGQ=="
+  "resolved" "https://registry.npmjs.org/tinymce/-/tinymce-6.3.1.tgz"
+  "version" "6.3.1"
+
 "tmpl@1.0.x":
   "integrity" "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE="
   "resolved" "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz"