From b0d4998662217f730ac4a9a5619673d32fc365cf Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Wed, 19 Oct 2022 18:43:58 +0200
Subject: [PATCH 01/43] add first version of text editor

---
 apps/web/package.json                         |    6 +
 .../ee/workflows/components/v2/TextEditor.tsx |   49 +
 .../components/v2/WorkflowStepContainer.tsx   |    5 +
 .../ee/workflows/components/v2/styles.css     | 2369 +++++++++++++++++
 4 files changed, 2429 insertions(+)
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor.tsx
 create mode 100644 packages/features/ee/workflows/components/v2/styles.css

diff --git a/apps/web/package.json b/apps/web/package.json
index 2210f395158849..2a2520b12b91d9 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -59,6 +59,9 @@
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",
+    "@types/draftjs-to-html": "^0.8.1",
+    "@types/html-to-draftjs": "^1.4.0",
+    "@types/react-draft-wysiwyg": "^1.13.4",
     "@vercel/edge-functions-ui": "^0.2.1",
     "@wojtekmaj/react-daterange-picker": "^3.3.1",
     "accept-language-parser": "^1.5.0",
@@ -66,6 +69,8 @@
     "bcryptjs": "^2.4.3",
     "classnames": "^2.3.1",
     "dotenv-cli": "^6.0.0",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
     "googleapis": "^84.0.0",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
@@ -99,6 +104,7 @@
     "react-date-picker": "^8.3.6",
     "react-digit-input": "^2.1.0",
     "react-dom": "^18.2.0",
+    "react-draft-wysiwyg": "^1.15.0",
     "react-easy-crop": "^3.5.2",
     "react-feather": "^2.0.10",
     "react-hook-form": "^7.34.2",
diff --git a/packages/features/ee/workflows/components/v2/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor.tsx
new file mode 100644
index 00000000000000..42004db038ddd0
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor.tsx
@@ -0,0 +1,49 @@
+import { EditorState, convertToRaw, ContentState } from "draft-js";
+import draftToHtml from "draftjs-to-html";
+import dynamic from "next/dynamic";
+import { useState } from "react";
+import { EditorProps } from "react-draft-wysiwyg";
+
+import "./styles.css";
+
+const Editor = dynamic<EditorProps>(() => import("react-draft-wysiwyg").then((mod) => mod.Editor), {
+  ssr: false,
+});
+
+const htmlToDraft = typeof window === "object" && require("html-to-draftjs").default;
+
+function TextEditor() {
+  const html = "<p>Hey this <strong>editor</strong> rocks 😀</p>";
+
+  const contentBlock = htmlToDraft(html);
+  const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
+
+  const [editorState, setEditorState] = useState(EditorState.createWithContent(contentState));
+
+  return (
+    <div>
+      <Editor
+        editorState={editorState}
+        wrapperClassName="border border-gray-300 rounded-md"
+        editorClassName=" p-3 -mt-3 bg-white rounded-md text-sm"
+        onEditorStateChange={setEditorState}
+        toolbar={{
+          options: ["inline", "fontSize", "list"],
+          inline: {
+            options: ["bold", "italic"],
+          },
+          list: {
+            inDropdown: true,
+            options: ["unordered", "ordered"],
+          },
+        }}
+      />
+      {/* <textarea
+        disabled
+        value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
+      /> */}
+    </div>
+  );
+}
+
+export default TextEditor;
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 116399649e0503..3d9b5c85a4b000 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -30,6 +30,7 @@ import {
 } from "../../lib/getOptions";
 import { translateVariablesToEnglish } from "../../lib/variableTranslations";
 import type { FormValues } from "../../pages/v2/workflow";
+import TextEditor from "./TextEditor";
 import { TimeTimeUnitInput } from "./TimeTimeUnitInput";
 
 type WorkflowStepProps = {
@@ -413,6 +414,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         {form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody?.message || ""}
                       </p>
                     )}
+                  <div className="mt-2">
+                    <TextEditor />
+                  </div>
                   <div className="mt-3 ">
                     <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
                       <div className="mt-2 flex text-sm text-gray-600">
@@ -421,6 +425,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       </div>
                     </button>
                   </div>
+                  <div className="mt-2"></div>
                 </div>
               )}
               {form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && (
diff --git a/packages/features/ee/workflows/components/v2/styles.css b/packages/features/ee/workflows/components/v2/styles.css
new file mode 100644
index 00000000000000..eaa392c9566bdc
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/styles.css
@@ -0,0 +1,2369 @@
+#carbonads {
+  display: flex;
+  float: right;
+  margin: 0 0 20px 20px;
+  max-width: 130px;
+  border-radius: 4px;
+  background-color: hsl(0, 0%, 98%);
+  box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
+  font-size: 11px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+}
+
+#carbonads a {
+  color: #111;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: #111;
+}
+
+.carbon-img {
+  display: block;
+  margin-bottom: 8px;
+  max-width: 130px;
+  line-height: 1;
+}
+
+.carbon-img img {
+  display: block;
+  margin: 0 auto;
+  max-width: 130px;
+  width: 130px;
+  height: auto;
+}
+
+.carbon-text {
+  display: block;
+  padding: 0 10px 8px;
+  text-align: left;
+  line-height: 1.35;
+}
+
+.carbon-poweredby {
+  display: block;
+  padding: 10px;
+  background: repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 5px,
+      hsla(0, 0%, 0%, 0.025) 5px,
+      hsla(0, 0%, 0%, 0.025) 10px
+    )
+    hsla(203, 11%, 95%, 0.4);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-weight: 600;
+  font-size: 8px;
+  line-height: 0;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 759px) {
+  #carbonads {
+    position: relative;
+    float: none;
+    margin: 20px 0;
+    max-width: 330px;
+  }
+
+  .carbon-wrap {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .carbon-img {
+    margin: 0;
+  }
+
+  .carbon-text {
+    padding: 10px 10px 0 10px;
+    font-size: 12px;
+  }
+
+  .carbon-poweredby {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border-radius: 0;
+    border-top-left-radius: 3px;
+    text-align: center;
+  }
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/e7MeVAyvogMqFwwl61PKhBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxHYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/Ks_cVxiCiwUWVsFWFA3Bjn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/oOeFwZNlrTefzLYmlVV1UIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUZBw1xU1rKptJj_0jans920.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/97uahxiqZRoncBaCEI3aW4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/9_7S_tWeGDh5Pq3u05RVkoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIpBw1xU1rKptJj_0jans920.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(https://fonts.gstatic.com/s/roboto/v15/dzxs_VxZUhdM2mEBkNa8sgsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 100;
+  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(https://fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/vSzulfKSK0LLjjfeaxcREhkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByXYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0aE8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 500;
+  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Ygp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url(https://fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpaE8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 900;
+  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url(https://fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpYgp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
+/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ * 2. Add the correct display in IE.
+ */
+
+article,
+aside,
+details, /* 1 */
+figcaption,
+figure,
+footer,
+header,
+main, /* 2 */
+menu,
+nav,
+section,
+summary { /* 1 */
+  display: block;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Add the correct display in IE 10-.
+ * 1. Add the correct display in IE.
+ */
+
+template, /* 1 */
+[hidden] {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+  background-color: transparent; /* 1 */
+  -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+  background-color: #ff0;
+  color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+  border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change font properties to `inherit` in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+select,
+textarea {
+  font: inherit; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Restore the font weight unset by the previous rule.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ *    controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+.menu-root {
+  width: 120px;
+  display: flex;
+  flex-direction: column;
+  padding: 30px;
+  border-right: 1px solid #a21717;
+}
+.menu-option {
+  margin-top: 25px;
+  text-decoration: none;
+  font-size: 18px;
+  font-family: Roboto;
+  cursor: pointer;
+  color: black;
+}
+.menu-option:hover {
+  color: #a21717;
+}
+.menu-option-active {
+  color: #a21717;
+}
+
+.app-root {
+  width: 100%;
+}
+.header {
+  height: 125px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: Roboto;
+  color: white;
+  background: #a21717;
+}
+.header-label {
+  color: white;
+  text-decoration: none;
+}
+.flex-layout {
+  display: flex;
+  min-height: 600px;
+}
+.github {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 0;
+  height: 140px;
+}
+.footer {
+  height: 100px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #a21717;
+  color: white;
+  font-size: 18px;
+  font-family: Roboto;
+  font-weight: 300;
+}
+.author-link {
+  color: white;
+  text-decoration: none;
+  margin-left: 5px;
+}
+.header-text {
+  display: flex;
+  flex-direction: column;
+}
+.header-title {
+  font-size: 50px;
+}
+.header-subtitle {
+  text-align: right;
+  font-style: italic;
+  font-size: 18px;
+  font-weight: 300;
+}
+.header-logo {
+  width: 70px;
+  margin-left: 50px;
+  cursor: pointer;
+}
+
+.root {
+  width: 100%;
+  display: flex;
+  font-family: Roboto;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.label {
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 20px;
+}
+.home-list {
+  margin-top: 20px;
+}
+.home-listItem {
+  margin-bottom: 10px;
+}
+.home-wrapper {
+  margin-top: 50px !important;
+  width: 775px !important;
+  display: block !important;
+  height: 400px !important;
+}
+.home-editor {
+  border: 1px solid #f1f1f1 !important;
+  padding: 5px !important;
+  border-radius: 2px !important;
+  height: 80% !important;
+}
+.quote-section {
+  margin: 50px 0 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.quote {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+}
+.quote-text {
+  font-size: 16px;
+}
+.quote-author {
+  font-size: 18px;
+  margin-left: 15px;
+  font-style: italic;
+  font-weight: 500;
+}
+.home-label {
+  font-size: 25px;
+  font-weight: 500;
+  margin-top: 50px;
+}
+.feature-list {
+  margin: 50px 0 50px 50px;
+  list-style-type: decimal;
+}
+.discussion {
+  margin-top: 15px;
+}
+.carbon_wrapper {
+  display: flex;
+}
+.carbon_ad {
+  margin-left: -200px;
+  margin-right: 50px;
+  margin-top: 50px;
+}
+
+.demo-color-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  position: relative;
+}
+.demo-icon-wrapper {
+  border: 1px solid #F1F1F1;
+  padding: 3px 5px;
+}
+.demo-icon {
+  width: 20px;
+}
+.demo-color-modal {
+  position: absolute;
+  right: -70px;
+  top: 135%;
+  z-index: 10;
+}
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+  direction: ltr;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0 !important;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+}
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-rulers {
+  position: absolute;
+  left: 0; right: 0; top: -50px; bottom: 0;
+  overflow: hidden;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  top: 0; bottom: 0;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  min-height: 100%;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
+.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre.CodeMirror-line,
+.CodeMirror pre.CodeMirror-line-like {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-font-variant-ligatures: contextual;
+  font-variant-ligatures: contextual;
+}
+.CodeMirror-wrap pre.CodeMirror-line,
+.CodeMirror-wrap pre.CodeMirror-line-like {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  padding: 0.1px; /* Force widget margins to stay inside of the container */
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-rtl pre { direction: rtl; }
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor {
+  position: absolute;
+  pointer-events: none;
+}
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background-color: #ffa;
+  background-color: rgba(255, 255, 0, .4);
+}
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }
+
+.demo-root {
+  width: 90%;
+  display: flex;
+  font-family: Roboto;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+}
+.demo-label {
+  display: block;
+  font-size: 20px;
+  font-weight: 500;
+  margin: 50px 0 25px;
+}
+.demo-label-high {
+  display: block;
+  font-size: 20px;
+  font-weight: 500;
+  margin: 50px 0 90px;
+}
+.demo-subLabel {
+  margin-bottom: 20px;
+}
+.demo-editorSection {
+  display: flex;
+  justify-content: space-between;
+}
+.demo-wrapper {
+  width: 100% !important;
+  display: block !important;
+  margin-bottom: 25px !important;
+  height: 400px !important;
+}
+.demo-wrapper-medium {
+  width: 650px !important;
+  display: block !important;
+  margin-bottom: 50px !important;
+  height: 300px !important;
+}
+.demo-editor {
+  height: 275px !important;
+  border: 1px solid #F1F1F1 !important;
+  padding: 5px !important;
+  border-radius: 2px !important;
+}
+.demo-editorWrapper {
+}
+.demo-content {
+  border: 1px solid #F1F1F1;
+  padding: 5px;
+  border-radius: 5px;
+  width: 100%;
+  border-radius: 2px;
+  resize: none;
+  height: 200px;
+}
+.demo-toolbar-absolute {
+  position: absolute !important;
+  top: -40px !important;
+  width: 550px !important;
+  border-radius: 3px !important;
+  background: #f3f3f3 !important;
+  border: 1px solid #e3e3e3 !important;
+}
+.demo-toolbar-absolute-high {
+  position: absolute !important;
+  top: -80px !important;
+  width: 550px !important;
+  border-radius: 3px !important;
+  background: #f3f3f3 !important;
+  border: 1px solid #e3e3e3 !important;
+}
+.demo-editor-plain {
+  height: 80% !important;
+  border-width: 0px !important;
+}
+.demo-editor-embedded {
+  height: 90% !important;
+  border-width: 0px !important;
+}
+.demo-wrapper-relative {
+  display: block !important;
+  position: relative !important;
+  margin-bottom: 25px !important;
+  height: 200px !important;
+}
+.demo-wrapper-relative-long {
+  width: 715px !important;
+  display: block !important;
+  position: relative !important;
+  margin-bottom: 25px !important;
+  height: 450px !important;
+}
+.bordered-option-classname {
+  border: 1px solid #e3e3e3 !important;
+}
+.demo-toolbar-absolute > div:not(:last-of-type) {
+  border-right: 2px solid #e3e3e3;
+  padding-right: 5px;
+}
+.demo-toolbar-absolute > div:not(:first-of-type) {
+  padding-left: 5px;
+}
+.demo-toolbar-custom {
+  border-color: rgb(0,47,126) !important;
+  background-color: #9EBEF5 !important;
+}
+.demo-editor-custom {
+  height: 200px !important;
+  border: 1px solid #F1F1F1 !important;
+  padding: 5px !important;
+  height: 75% !important;
+  border-radius: 2px !important;
+  border-color: rgb(0,47,126) !important;
+}
+.demo-option-custom {
+  width: 15px !important;
+  height: 15px !important;
+  border-color: rgb(0,47,126) !important;
+  color: rgb(0,47,126);
+}
+.demo-option-custom-wide {
+  width: 125px !important;
+  height: 25px !important;
+  border-color: rgb(0,47,126) !important;
+  color: rgb(0,47,126) !important;
+}
+.demo-option-custom-medium {
+  height: 25px !important;
+  border-color: rgb(0,47,126) !important;
+  color: rgb(0,47,126) !important;
+}
+.demo-dropdown-custom {
+  border-color: rgb(0,47,126) !important;
+}
+.demo-popup-custom {
+  border-color: rgb(0,47,126) !important;
+  padding: 5px !important;
+}
+.demo-popup-custom input {
+  border-color: rgb(0,47,126) !important;
+}
+.demo-popup-custom button {
+  border-color: rgb(0,47,126) !important;
+}
+.demo-section-wrapper {
+  display: flex;
+}
+.demo-editor-wrapper {
+  width: 60%;
+}
+.demo-section {
+  margin: 50px 30px 20px;
+  width: 95%;
+}
+.ReactCodeMirror {
+  width: 38%;
+  margin-left: 2%;
+  border: 1px solid #e4e4e4;
+  height: 400px;
+}
+.CodeMirror {
+  height: 400px !important;
+}
+.demo-custom-option {
+  width: 26px;
+  height: 26px;
+  border: 1px solid #f1f1f1;
+  text-align: center;
+  padding-right: 5px;
+  padding-bottom: 2px;
+  cursor: pointer;
+}
+
+.docs-root {
+  width: calc(100% - 150px);
+  margin: 30px;
+}
+.docs-label {
+  display: block;
+  font-size: 20px;
+  font-weight: 500;
+  margin: 20px 0;
+}
+.docs-sub-label {
+  display: block;
+  font-size: 18px;
+  font-weight: 500;
+  margin: 10px 0;
+}
+.docs-section {
+  margin: 20px 0 50px;
+}
+.docs-section .ReactCodeMirror {
+  max-height: 500px;
+  overflow: scroll;
+  width: 75%;
+  margin-top: 25px;
+  margin-left: 0;
+  height: auto !important;
+}
+.docs-section .CodeMirror {
+  height: auto !important;
+}
+code {
+  padding: 20px;
+  font-size: 13px;
+  display: inline-flex;
+  flex-direction: column;
+  background-color: #f1f1f1;
+}
+.code_sm {
+  padding: 2px;
+}
+.docs-desc {
+  width: 75%;
+  font-size: 15px;
+  margin-bottom: 10px;
+}
+.docs-root li {
+  margin-bottom: 5px;
+}
+.docs-text {
+  width: 75%;
+  font-size: 17px;
+  margin: 15px 0;
+}
+.top-margined {
+  margin-top: 20px;
+}
+ol {
+  font-size: 15px;
+}
+.docs-property {
+  display: flex;
+}
+.author-root {
+  margin: 30px;
+  width: 50%;
+}
+.photo {
+  height: 150px;
+  width: auto;
+}
+
+.rdw-option-wrapper {
+  border: 1px solid #F1F1F1;
+  padding: 5px;
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  margin: 0 2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background: white;
+  text-transform: capitalize;
+}
+.rdw-option-wrapper:hover {
+  background-color: #F1F1F1;
+}
+.rdw-option-wrapper:active {
+  box-shadow: 1px 1px 0px #BFBDBD inset;
+}
+.rdw-option-active {
+  box-shadow: 1px 1px 0px #BFBDBD inset;
+}
+.rdw-option-disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.rdw-dropdown-wrapper {
+  height: 30px;
+  background: white;
+  cursor: pointer;
+  width: 30px;
+  border: 1px solid #F1F1F1;
+  border-radius: 6px;
+  margin: 0 2px;
+  text-transform: capitalize;
+  background: white;
+}
+.rdw-dropdown-wrapper:focus {
+  outline: none;
+}
+.rdw-dropdown-wrapper:hover {
+  background-color: #F1F1F1;
+}
+.rdw-dropdown-wrapper:active {
+  box-shadow: 1px 1px 0px #BFBDBD inset;
+}
+.rdw-dropdown-carettoopen {
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  top: 35%;
+  right: 10%;
+  border-top: 6px solid black;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+.rdw-dropdown-carettoclose {
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  top: 35%;
+  right: 10%;
+  border-bottom: 6px solid black;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+.rdw-dropdown-selectedtext {
+  display: flex;
+  position: relative;
+  height: 100%;
+  align-items: center;
+  padding: 0 5px;
+}
+.rdw-dropdown-optionwrapper {
+  z-index: 100;
+  position: relative;
+  border: 1px solid #F1F1F1;
+  width: 100%;
+  background: white;
+  border-radius: 2px;
+  margin-top: 1px;
+  padding: 0;
+  max-height: 250px;
+  overflow-y: scroll;
+  border-radius: 6px;
+
+}
+.rdw-dropdown-optionwrapper:hover {
+  box-shadow: 1px 1px 0px #BFBDBD;
+  background-color: #FFFFFF;
+}
+
+.rdw-dropdownoption-default {
+  min-height: 25px;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+}
+.rdw-dropdownoption-highlighted {
+  background: #F1F1F1;
+}
+.rdw-dropdownoption-active {
+  background: #f5f5f5;
+}
+.rdw-dropdownoption-disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.rdw-inline-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap
+}
+.rdw-inline-dropdown {
+  width: 50px;
+}
+.rdw-inline-dropdownoption {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+}
+
+.rdw-block-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap
+}
+.rdw-block-dropdown {
+  width: 110px;
+}
+
+.rdw-fontsize-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap
+}
+.rdw-fontsize-dropdown {
+  min-width: 42px;
+}
+.rdw-fontsize-option {
+  display: flex;
+  justify-content: center;
+}
+
+.rdw-fontfamily-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap
+}
+.rdw-fontfamily-dropdown {
+  width: 115px;
+}
+.rdw-fontfamily-placeholder {
+  white-space: nowrap;
+  max-width: 90px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rdw-fontfamily-optionwrapper {
+  width: 140px;
+}
+
+.rdw-list-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap
+}
+.rdw-list-dropdown {
+  width: 42px;
+  z-index: 90;
+}
+.rdw-list-dropdownOption {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+}
+
+.rdw-text-align-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap
+}
+.rdw-text-align-dropdown {
+  width: 50px;
+  z-index: 90;
+}
+.rdw-text-align-dropdownOption {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+}
+.rdw-right-aligned-block {
+  text-align: right;
+}
+.rdw-left-aligned-block {
+  text-align: left !important;
+}
+.rdw-center-aligned-block {
+  text-align: center !important;
+}
+.rdw-justify-aligned-block {
+  text-align: justify !important;
+}
+.rdw-right-aligned-block > div {
+  display: inline-block;
+}
+.rdw-left-aligned-block > div {
+  display: inline-block;
+}
+.rdw-center-aligned-block > div {
+  display: inline-block;
+}
+.rdw-justify-aligned-block > div {
+  display: inline-block;
+}
+
+.rdw-colorpicker-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  position: relative;
+  flex-wrap: wrap
+}
+.rdw-colorpicker-modal {
+  position: absolute;
+  top: 35px;
+  left: 5px;
+  display: flex;
+  flex-direction: column;
+  width: 175px;
+  height: 175px;
+  border: 1px solid #F1F1F1;
+  padding: 15px;
+  border-radius: 2px;
+  z-index: 100;
+  background: white;
+  box-shadow: 3px 3px 5px #BFBDBD;
+}
+.rdw-colorpicker-modal-header {
+  display: flex;
+  padding-bottom: 5px;
+}
+.rdw-colorpicker-modal-style-label {
+  font-size: 15px;
+  width: 50%;
+  text-align: center;
+  cursor: pointer;
+  padding: 0 10px 5px;
+}
+.rdw-colorpicker-modal-style-label-active {
+  border-bottom: 2px solid #0a66b7;
+}
+.rdw-colorpicker-modal-options {
+  margin: 5px auto;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-wrap: wrap;
+  overflow: scroll;
+}
+.rdw-colorpicker-cube {
+  width: 22px;
+  height: 22px;
+  border: 1px solid #F1F1F1;
+}
+.rdw-colorpicker-option {
+  margin: 3px;
+  padding: 0;
+  min-height: 20px;
+  border: none;
+  width: 22px;
+  height: 22px;
+  min-width: 22px;
+  box-shadow: 1px 2px 1px #BFBDBD inset;
+}
+.rdw-colorpicker-option:hover {
+  box-shadow: 1px 2px 1px #BFBDBD;
+}
+.rdw-colorpicker-option:active {
+  box-shadow: -1px -2px 1px #BFBDBD;
+}
+.rdw-colorpicker-option-active {
+  box-shadow: 0px 0px 2px 2px #BFBDBD;
+}
+
+.rdw-link-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  position: relative;
+  flex-wrap: wrap
+}
+.rdw-link-dropdown {
+  width: 50px;
+}
+.rdw-link-dropdownOption {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+}
+.rdw-link-dropdownPlaceholder {
+  margin-left: 8px;
+}
+.rdw-link-modal {
+  position: absolute;
+  top: 35px;
+  left: 5px;
+  display: flex;
+  flex-direction: column;
+  width: 235px;
+  border: 1px solid #F1F1F1;
+  padding: 15px;
+  border-radius: 6px;
+  z-index: 100;
+  background: white;
+  box-shadow: 3px 3px 5px #BFBDBD;
+}
+.rdw-link-modal-label {
+  font-size: 15px;
+}
+.rdw-link-modal-input {
+  margin-top: 5px;
+  border-radius: 2px;
+  border: 1px solid #F1F1F1;
+  height: 25px;
+  margin-bottom: 15px;
+  padding: 0 5px;
+}
+.rdw-link-modal-input:focus {
+  outline: none;
+}
+.rdw-link-modal-buttonsection {
+  margin: 0 auto;
+}
+.rdw-link-modal-target-option {
+  margin-bottom: 20px;
+}
+.rdw-link-modal-target-option > span {
+  margin-left: 5px;
+}
+.rdw-link-modal-btn {
+  margin-left: 10px;
+  width: 75px;
+  height: 30px;
+  border: 1px solid #F1F1F1;
+  border-radius: 2px;
+  cursor: pointer;
+  background: white;
+  text-transform: capitalize;
+}
+.rdw-link-modal-btn:hover {
+  box-shadow: 1px 1px 0px #BFBDBD;
+}
+.rdw-link-modal-btn:active {
+  box-shadow: 1px 1px 0px #BFBDBD inset;
+}
+.rdw-link-modal-btn:focus {
+  outline: none !important;
+}
+.rdw-link-modal-btn:disabled {
+  background: #ece9e9;
+}
+.rdw-link-dropdownoption {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+}
+.rdw-history-dropdown {
+  width: 50px;
+}
+
+.rdw-embedded-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  position: relative;
+  flex-wrap: wrap
+}
+.rdw-embedded-modal {
+  position: absolute;
+  top: 35px;
+  left: 5px;
+  display: flex;
+  flex-direction: column;
+  width: 235px;
+  height: 180px;
+  border: 1px solid #F1F1F1;
+  padding: 15px;
+  border-radius: 2px;
+  z-index: 100;
+  background: white;
+  justify-content: space-between;
+  box-shadow: 3px 3px 5px #BFBDBD;
+}
+.rdw-embedded-modal-header {
+  font-size: 15px;
+  display: flex;
+}
+.rdw-embedded-modal-header-option {
+  width: 50%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.rdw-embedded-modal-header-label {
+  width: 95px;
+  border: 1px solid #f1f1f1;
+  margin-top: 5px;
+  background: #6EB8D4;
+  border-bottom: 2px solid #0a66b7;
+}
+.rdw-embedded-modal-link-section {
+  display: flex;
+  flex-direction: column;
+}
+.rdw-embedded-modal-link-input {
+  width: 88%;
+  height: 35px;
+  margin: 10px 0;
+  border: 1px solid #F1F1F1;
+  border-radius: 2px;
+  font-size: 15px;
+  padding: 0 5px;
+}
+.rdw-embedded-modal-link-input-wrapper {
+  display: flex;
+  align-items: center;
+}
+.rdw-embedded-modal-link-input:focus {
+  outline: none;
+}
+.rdw-embedded-modal-btn-section {
+  display: flex;
+  justify-content: center;
+}
+.rdw-embedded-modal-btn {
+  margin: 0 3px;
+  width: 75px;
+  height: 30px;
+  border: 1px solid #F1F1F1;
+  border-radius: 2px;
+  cursor: pointer;
+  background: white;
+  text-transform: capitalize;
+}
+.rdw-embedded-modal-btn:hover {
+  box-shadow: 1px 1px 0px #BFBDBD;
+}
+.rdw-embedded-modal-btn:active {
+  box-shadow: 1px 1px 0px #BFBDBD inset;
+}
+.rdw-embedded-modal-btn:focus {
+  outline: none !important;
+}
+.rdw-embedded-modal-btn:disabled {
+  background: #ece9e9;
+}
+.rdw-embedded-modal-size {
+  align-items: center;
+  display: flex;
+  margin: 8px 0;
+  justify-content: space-between;
+}
+.rdw-embedded-modal-size-input {
+  width: 80%;
+  height: 20px;
+  border: 1px solid #F1F1F1;
+  border-radius: 2px;
+  font-size: 12px;
+}
+.rdw-embedded-modal-size-input:focus {
+  outline: none;
+}
+
+.rdw-emoji-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  position: relative;
+  flex-wrap: wrap
+}
+.rdw-emoji-modal {
+  overflow: auto;
+  position: absolute;
+  top: 35px;
+  left: 5px;
+  display: flex;
+  flex-wrap: wrap;
+  width: 235px;
+  height: 180px;
+  border: 1px solid #F1F1F1;
+  padding: 15px;
+  border-radius: 2px;
+  z-index: 100;
+  background: white;
+  box-shadow: 3px 3px 5px #BFBDBD;
+}
+.rdw-emoji-icon {
+  margin: 2.5px;
+  height: 24px;
+  width: 24px;
+  cursor: pointer;
+  font-size: 22px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.rdw-spinner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+.rdw-spinner > div {
+  width: 12px;
+  height: 12px;
+  background-color: #333;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+.rdw-spinner .rdw-bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.rdw-spinner .rdw-bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}
+
+.rdw-image-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  position: relative;
+  flex-wrap: wrap
+}
+.rdw-image-modal {
+  position: absolute;
+  top: 35px;
+  left: 5px;
+  display: flex;
+  flex-direction: column;
+  width: 235px;
+  border: 1px solid #F1F1F1;
+  padding: 15px;
+  border-radius: 2px;
+  z-index: 100;
+  background: white;
+  box-shadow: 3px 3px 5px #BFBDBD;
+}
+.rdw-image-modal-header {
+  font-size: 15px;
+  margin: 10px 0;
+  display: flex;
+}
+.rdw-image-modal-header-option {
+  width: 50%;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.rdw-image-modal-header-label {
+  width: 80px;
+  background: #f1f1f1;
+  border: 1px solid #f1f1f1;
+  margin-top: 5px;
+}
+.rdw-image-modal-header-label-highlighted {
+  background: #6EB8D4;
+  border-bottom: 2px solid #0a66b7;
+}
+.rdw-image-modal-upload-option {
+  width: 100%;
+  color: gray;
+  cursor: pointer;
+  display: flex;
+  border: none;
+  font-size: 15px;
+  align-items: center;
+  justify-content: center;
+  background-color: #f1f1f1;
+  outline: 2px dashed gray;
+  outline-offset: -10px;
+  margin: 10px 0;
+  padding: 9px 0;
+}
+.rdw-image-modal-upload-option-highlighted {
+  outline: 2px dashed #0a66b7;
+}
+.rdw-image-modal-upload-option-label {
+  cursor: pointer;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 15px;
+}
+.rdw-image-modal-upload-option-label span{
+  padding: 0 20px;
+}
+.rdw-image-modal-upload-option-image-preview {
+  max-width: 100%;
+  max-height: 200px;
+}
+.rdw-image-modal-upload-option-input {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+.rdw-image-modal-url-section {
+  display: flex;
+  align-items: center;
+}
+.rdw-image-modal-url-input {
+  width: 90%;
+  height: 35px;
+  margin: 15px 0 12px;
+  border: 1px solid #F1F1F1;
+  border-radius: 2px;
+  font-size: 15px;
+  padding: 0 5px;
+}
+.rdw-image-modal-btn-section {
+  margin: 10px auto 0;
+}
+.rdw-image-modal-url-input:focus {
+  outline: none;
+}
+.rdw-image-modal-btn {
+  margin: 0 5px;
+  width: 75px;
+  height: 30px;
+  border: 1px solid #F1F1F1;
+  border-radius: 2px;
+  cursor: pointer;
+  background: white;
+  text-transform: capitalize;
+}
+.rdw-image-modal-btn:hover {
+  box-shadow: 1px 1px 0px #BFBDBD;
+}
+.rdw-image-modal-btn:active {
+  box-shadow: 1px 1px 0px #BFBDBD inset;
+}
+.rdw-image-modal-btn:focus {
+  outline: none !important;
+}
+.rdw-image-modal-btn:disabled {
+  background: #ece9e9;
+}
+.rdw-image-modal-spinner {
+  position: absolute;
+  top: -3px;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.5;
+}
+.rdw-image-modal-alt-input {
+  width: 70%;
+  height: 20px;
+  border: 1px solid #F1F1F1;
+  border-radius: 2px;
+  font-size: 12px;
+  margin-left: 5px;
+}
+.rdw-image-modal-alt-input:focus {
+  outline: none;
+}
+.rdw-image-modal-alt-lbl {
+  font-size: 12px;
+}
+.rdw-image-modal-size {
+  align-items: center;
+  display: flex;
+  margin: 8px 0;
+  justify-content: space-between;
+}
+.rdw-image-modal-size-input {
+  width: 40%;
+  height: 20px;
+  border: 1px solid #F1F1F1;
+  border-radius: 2px;
+  font-size: 12px;
+}
+.rdw-image-modal-size-input:focus {
+  outline: none;
+}
+.rdw-image-mandatory-sign {
+  color: red;
+  margin-left: 3px;
+  margin-right: 3px;
+}
+
+.rdw-remove-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  position: relative;
+  flex-wrap: wrap
+}
+
+.rdw-history-wrapper {
+  display: flex;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap
+}
+.rdw-history-dropdownoption {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+}
+.rdw-history-dropdown {
+  width: 50px;
+}
+
+.rdw-link-decorator-wrapper {
+  position: relative;
+}
+.rdw-link-decorator-icon {
+  position: absolute;
+  left: 40%;
+  top: 0;
+  cursor: pointer;
+  background-color: white;
+}
+
+.rdw-mention-link {
+  text-decoration: none;
+  color: #1236ff;
+  background-color: #f0fbff;
+  padding: 1px 2px;
+  border-radius: 2px;
+}
+
+.rdw-suggestion-wrapper {
+  position: relative;
+}
+.rdw-suggestion-dropdown {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #F1F1F1;
+  min-width: 100px;
+  max-height: 150px;
+  overflow: auto;
+  background: white;
+  z-index: 100;
+}
+.rdw-suggestion-option {
+  padding: 7px 5px;
+  border-bottom: 1px solid #f1f1f1;
+}
+.rdw-suggestion-option-active {
+  background-color: #F1F1F1;
+}
+
+.rdw-hashtag-link {
+  text-decoration: none;
+  color: #1236ff;
+  background-color: #f0fbff;
+  padding: 1px 2px;
+  border-radius: 2px;
+}
+
+.rdw-image-alignment-options-popup {
+  position: absolute;
+  background: white;
+  display: flex;
+  padding: 5px 2px;
+  border-radius: 2px;
+  border: 1px solid #F1F1F1;
+  width: 105px;
+  cursor: pointer;
+  z-index: 100;
+}
+.rdw-alignment-option-left {
+  justify-content: flex-start;
+}
+.rdw-image-alignment-option {
+  height: 15px;
+  width: 15px;
+  min-width: 15px;
+}
+.rdw-image-alignment {
+  position: relative;
+}
+.rdw-image-imagewrapper {
+  position: relative;
+}
+.rdw-image-center {
+  display: flex;
+  justify-content: center;
+}
+.rdw-image-left {
+  display: flex;
+}
+.rdw-image-right {
+  display: flex;
+  justify-content: flex-end;
+}
+.rdw-image-alignment-options-popup-right {
+  right: 0;
+}
+
+.rdw-editor-main {
+  height: 100%;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.rdw-editor-toolbar {
+  display: flex;
+  justify-content: flex-start;
+  background: white;
+  flex-wrap: wrap;
+  font-size: 15px;
+  margin-bottom: 5px;
+  padding: 5px 5px 0px 5px;
+
+  border-radius: 6px;
+  user-select: none;
+}
+.public-DraftStyleDefault-block {
+  margin: 0 0;
+}
+.rdw-editor-wrapper:focus {
+  outline: none;
+}
+.rdw-editor-wrapper {
+  box-sizing: content-box;
+}
+.rdw-editor-main blockquote {
+  border-left: 5px solid #f1f1f1;
+  padding-left: 5px;
+}
+.rdw-editor-main pre {
+  background: #f1f1f1;
+  border-radius: 3px;
+  padding: 1px 10px;
+}
+/**
+ * Draft v0.9.1
+ *
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}
+
+/*# sourceMappingURL=main.css.map*/

From 55178a8513450fb5e25c45260f516318e0f8e100 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Thu, 20 Oct 2022 17:24:16 +0200
Subject: [PATCH 02/43] add new editor to email body

---
 .../ee/workflows/components/v2/TextEditor.tsx | 67 ++++++++++++++---
 .../components/v2/WorkflowStepContainer.tsx   | 73 ++++++++-----------
 2 files changed, 89 insertions(+), 51 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor.tsx
index 42004db038ddd0..63c3571e765800 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor.tsx
@@ -1,10 +1,15 @@
-import { EditorState, convertToRaw, ContentState } from "draft-js";
-import draftToHtml from "draftjs-to-html";
+import { EditorState, Modifier, ContentState, convertToRaw } from "draft-js";
+import { UseFormReturn } from "react-hook-form";
 import dynamic from "next/dynamic";
-import { useState } from "react";
+import { useState, Dispatch, SetStateAction } from "react";
 import { EditorProps } from "react-draft-wysiwyg";
+import { RichUtils } from 'draft-js';
 
 import "./styles.css";
+import { AddVariablesDropdown } from "../../components/v2/AddVariablesDropdown";
+import { FormValues } from "ee/workflows/pages/v2/workflow";
+import draftToHtml from 'draftjs-to-html';
+
 
 const Editor = dynamic<EditorProps>(() => import("react-draft-wysiwyg").then((mod) => mod.Editor), {
   ssr: false,
@@ -12,14 +17,19 @@ const Editor = dynamic<EditorProps>(() => import("react-draft-wysiwyg").then((mo
 
 const htmlToDraft = typeof window === "object" && require("html-to-draftjs").default;
 
-function TextEditor() {
-  const html = "<p>Hey this <strong>editor</strong> rocks 😀</p>";
+type TextEditorProps = {
+  addVariable: (isEmailSubject: boolean, variable: string) => void,
+  form: UseFormReturn<FormValues>
+  stepNumber: number,
+}
 
-  const contentBlock = htmlToDraft(html);
+function TextEditor(props: TextEditorProps) {
+  const contentBlock = htmlToDraft(props.form.getValues(`steps.${props.stepNumber - 1}.reminderBody` || ""));
   const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
 
   const [editorState, setEditorState] = useState(EditorState.createWithContent(contentState));
 
+
   return (
     <div>
       <Editor
@@ -27,6 +37,8 @@ function TextEditor() {
         wrapperClassName="border border-gray-300 rounded-md"
         editorClassName=" p-3 -mt-3 bg-white rounded-md text-sm"
         onEditorStateChange={setEditorState}
+        onChange={() => {props.form.setValue(`steps.${props.stepNumber - 1}.reminderBody`, draftToHtml(convertToRaw(editorState.getCurrentContent())))} }
+        toolbarCustomButtons={[<CustomOption editorState={editorState} setEditorState={setEditorState} addVariable={props.addVariable} />]}
         toolbar={{
           options: ["inline", "fontSize", "list"],
           inline: {
@@ -37,13 +49,48 @@ function TextEditor() {
             options: ["unordered", "ordered"],
           },
         }}
+        handleReturn={(event) => {
+          // override behavior for enter key
+          var newEditorState = null;
+          if (event.keyCode === 13 ) {
+              // with shift, make a new block
+              newEditorState = RichUtils.insertSoftNewline(editorState);
+          }
+          if (newEditorState) {
+              setEditorState(newEditorState)
+              return true;
+          }
+          return false;
+      }}
       />
-      {/* <textarea
-        disabled
-        value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
-      /> */}
     </div>
   );
 }
 
+type Props = {
+  editorState: EditorState,
+  setEditorState: Dispatch<SetStateAction<EditorState>>,
+  addVariable: (isEmailSubject: boolean, variable: string) => void;
+}
+
+function CustomOption({ editorState, setEditorState }: Props) {
+
+  const addVariable = (isEmailSubject: boolean, variable: string) => {
+
+    const contentState = Modifier.replaceText(
+      editorState.getCurrentContent(),
+      editorState.getSelection(),
+      `{${variable
+        .toUpperCase()
+        .replace(/ /g, "_")}}`,
+      editorState.getCurrentInlineStyle(),
+    );
+    setEditorState(EditorState.push(editorState, contentState, 'insert-characters'));
+  }
+
+  return (
+    <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
+  );
+}
+
 export default TextEditor;
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index c014faa7ea8038..035ec63dee76e7 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -69,7 +69,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
   const [showTimeSection, setShowTimeSection] = useState(
     form.getValues("trigger") === WorkflowTriggerEvents.BEFORE_EVENT ||
-      form.getValues("trigger") === WorkflowTriggerEvents.AFTER_EVENT
+    form.getValues("trigger") === WorkflowTriggerEvents.AFTER_EVENT
   );
 
   const [showTimeSectionAfter, setShowTimeSectionAfter] = useState(
@@ -137,7 +137,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     return (
       <>
         <div className="flex justify-center">
-          <div className="min-w-80 w-full rounded-md border border-gray-200 bg-white p-7">
+          <div className="w-full bg-white border border-gray-200 rounded-md min-w-80 p-7">
             <div className="flex">
               <div className="mt-[3px] mr-5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs font-medium">
                 1
@@ -147,7 +147,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div className="text-sm text-gray-600">{t("when_something_happens")}</div>
               </div>
             </div>
-            <div className="my-7 border-t border-gray-200" />
+            <div className="border-t border-gray-200 my-7" />
             <Label>{t("when")}</Label>
             <Controller
               name="trigger"
@@ -210,11 +210,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
     return (
       <>
-        <div className="my-3 flex justify-center">
+        <div className="flex justify-center my-3">
           <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
         </div>
         <div className="flex justify-center">
-          <div className="min-w-80 flex w-full rounded-md border border-gray-200 bg-white p-7">
+          <div className="flex w-full bg-white border border-gray-200 rounded-md min-w-80 p-7">
             <div className="w-full">
               <div className="flex">
                 <div className="w-full">
@@ -263,7 +263,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </Dropdown>
                 </div>
               </div>
-              <div className="my-7 border-t border-gray-200" />
+              <div className="border-t border-gray-200 my-7" />
               <div>
                 <Label>{t("do_this")}</Label>
                 <Controller
@@ -327,7 +327,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 )}
               </div>
               {isPhoneNumberNeeded && (
-                <div className="mt-5 rounded-md bg-gray-50 p-4">
+                <div className="p-4 mt-5 rounded-md bg-gray-50">
                   <Label>{t("custom_phone_number")}</Label>
                   <PhoneInput<FormValues>
                     control={form.control}
@@ -346,7 +346,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </div>
               )}
               {isEmailAddressNeeded && (
-                <div className="mt-5 rounded-md bg-gray-50 p-4">
+                <div className="p-4 mt-5 rounded-md bg-gray-50">
                   <EmailField
                     required
                     label={t("email_address")}
@@ -379,11 +379,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 />
               </div>
               {isCustomReminderBodyNeeded && (
-                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-2 md:p-6 md:pt-4">
+                <div className="p-4 pt-2 mt-2 rounded-md bg-gray-50 md:p-6 md:pt-4">
                   {isEmailSubjectNeeded && (
                     <div className="mb-5">
-                      <div className="mb-2 flex items-center">
-                        <Label className="mb-0 flex-none">{t("subject")}</Label>
+                      <div className="flex items-center mb-2">
+                        <Label className="flex-none mb-0">{t("subject")}</Label>
                         <div className="flex-grow text-right">
                           <AddVariablesDropdown addVariable={addVariable} isEmailSubject={true} />
                         </div>
@@ -405,23 +405,14 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         )}
                     </div>
                   )}
-                  <div className="mb-2 flex items-center">
-                    <Label className="mb-0 flex-none">
+                  <div className="flex items-center mb-2">
+                    <Label className="flex-none mb-0">
                       {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
                     </Label>
                     <div className="flex-grow text-right">
                       <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
                     </div>
                   </div>
-                  <TextArea
-                    ref={(e) => {
-                      reminderBodyFormRef?.(e);
-                      refReminderBody.current = e;
-                    }}
-                    className="my-0 h-24"
-                    required
-                    {...restReminderBodyForm}
-                  />
                   {form.formState.errors.steps &&
                     form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody && (
                       <p className="mt-1 text-sm text-red-500">
@@ -429,11 +420,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       </p>
                     )}
                   <div className="mt-2">
-                    <TextEditor />
+                    <TextEditor form={form} addVariable={addVariable} stepNumber={step.stepNumber}/>
                   </div>
                   <div className="mt-3 ">
                     <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
-                      <div className="mt-2 flex text-sm text-gray-600">
+                      <div className="flex mt-2 text-sm text-gray-600">
                         <Icon.FiHelpCircle className="mt-[3px] mr-2 h-3 w-3" />
                         <p className="text-left">{t("using_additional_inputs_as_variables")}</p>
                       </div>
@@ -445,7 +436,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               {form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && (
                 <Button
                   type="button"
-                  className="mt-7 w-full"
+                  className="w-full mt-7"
                   onClick={() => {
                     let isEmpty = false;
                     if (!form.getValues(`steps.${step.stepNumber - 1}.sendTo`) && isPhoneNumberNeeded) {
@@ -496,7 +487,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     } else {
                       const isNumberValid =
                         form.formState.errors.steps &&
-                        form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo
+                          form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo
                           ? false
                           : true;
 
@@ -540,21 +531,21 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           <DialogContent useOwnActionButtons type="creation" className="sm:max-w-[610px] md:h-[570px]">
             <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
               <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
-              <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
-                <p className="test-sm font-medium">{t("format")}</p>
-                <ul className="mt-2 ml-5 list-disc text-gray-900">
+              <div className="p-3 rounded-md mb-7 mt-7 bg-gray-50 sm:p-4">
+                <p className="font-medium test-sm">{t("format")}</p>
+                <ul className="mt-2 ml-5 text-gray-900 list-disc">
                   <li>{t("uppercase_for_letters")}</li>
                   <li>{t("replace_whitespaces_underscores")}</li>
                   <li>{t("ignore_special_characters")}</li>
                 </ul>
                 <div className="mt-6">
-                  <p className="test-sm w-full font-medium">{t("example_1")}</p>
-                  <div className="mt-2 grid grid-cols-12">
-                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
-                    <div className="test-sm col-span-7 text-gray-900">{t("company_size")}</div>
-                    <div className="test-sm col-span-5 w-full text-gray-600">{t("variable")}</div>
+                  <p className="w-full font-medium test-sm">{t("example_1")}</p>
+                  <div className="grid grid-cols-12 mt-2">
+                    <div className="col-span-5 mr-2 text-gray-600 test-sm">{t("additional_input_label")}</div>
+                    <div className="col-span-7 text-gray-900 test-sm">{t("company_size")}</div>
+                    <div className="w-full col-span-5 text-gray-600 test-sm">{t("variable")}</div>
 
-                    <div className="test-sm col-span-7 break-words text-gray-900">
+                    <div className="col-span-7 text-gray-900 break-words test-sm">
                       {" "}
                       {`{${t("company_size")
                         .replace(/[^a-zA-Z0-9 ]/g, "")
@@ -565,12 +556,12 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </div>
                 </div>
                 <div className="mt-6">
-                  <p className="test-sm w-full font-medium">{t("example_2")}</p>
-                  <div className="mt-2 grid grid-cols-12">
-                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
-                    <div className="test-sm col-span-7 text-gray-900">{t("what_help_needed")}</div>
-                    <div className="test-sm col-span-5 text-gray-600">{t("variable")}</div>
-                    <div className="test-sm col-span-7 break-words text-gray-900">
+                  <p className="w-full font-medium test-sm">{t("example_2")}</p>
+                  <div className="grid grid-cols-12 mt-2">
+                    <div className="col-span-5 mr-2 text-gray-600 test-sm">{t("additional_input_label")}</div>
+                    <div className="col-span-7 text-gray-900 test-sm">{t("what_help_needed")}</div>
+                    <div className="col-span-5 text-gray-600 test-sm">{t("variable")}</div>
+                    <div className="col-span-7 text-gray-900 break-words test-sm">
                       {" "}
                       {`{${t("what_help_needed")
                         .replace(/[^a-zA-Z0-9 ]/g, "")

From 4b4cf8dc5336fca339f303efa4a56806ce4f95a2 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Thu, 20 Oct 2022 18:51:23 +0200
Subject: [PATCH 03/43] fix line height

---
 .../ee/workflows/components/v2/TextEditor.tsx       | 13 -------------
 .../lib/reminders/templates/customTemplate.ts       |  2 +-
 2 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor.tsx
index 63c3571e765800..562137ce690e7a 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor.tsx
@@ -49,19 +49,6 @@ function TextEditor(props: TextEditorProps) {
             options: ["unordered", "ordered"],
           },
         }}
-        handleReturn={(event) => {
-          // override behavior for enter key
-          var newEditorState = null;
-          if (event.keyCode === 13 ) {
-              // with shift, make a new block
-              newEditorState = RichUtils.insertSoftNewline(editorState);
-          }
-          if (newEditorState) {
-              setEditorState(newEditorState)
-              return true;
-          }
-          return false;
-      }}
       />
     </div>
   );
diff --git a/packages/features/ee/workflows/lib/reminders/templates/customTemplate.ts b/packages/features/ee/workflows/lib/reminders/templates/customTemplate.ts
index 7f6edb44a9a64a..7b4bddb6dfe583 100644
--- a/packages/features/ee/workflows/lib/reminders/templates/customTemplate.ts
+++ b/packages/features/ee/workflows/lib/reminders/templates/customTemplate.ts
@@ -55,7 +55,7 @@ const customTemplate = async (text: string, variables: VariablesType, locale: st
     }
   });
 
-  const textHtml = `<body style="white-space: pre-wrap;">${dynamicText}</body>`;
+  const textHtml = `<body>${dynamicText}</body>`;
   return { text: dynamicText, html: textHtml };
 };
 

From 7190b9d88fbb7b498228ee5905cd899d3a0abfc0 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Thu, 20 Oct 2022 18:51:52 +0200
Subject: [PATCH 04/43] remove not needed styles

---
 .../ee/workflows/components/v2/styles.css     | 2381 +----------------
 1 file changed, 97 insertions(+), 2284 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/styles.css b/packages/features/ee/workflows/components/v2/styles.css
index eaa392c9566bdc..d2ce0496d5502c 100644
--- a/packages/features/ee/workflows/components/v2/styles.css
+++ b/packages/features/ee/workflows/components/v2/styles.css
@@ -1,2329 +1,158 @@
-#carbonads {
-  display: flex;
-  float: right;
-  margin: 0 0 20px 20px;
-  max-width: 130px;
-  border-radius: 4px;
-  background-color: hsl(0, 0%, 98%);
-  box-shadow: 0 0 1px hsla(0, 0%, 0%, 0.15);
-  font-size: 11px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
-    sans-serif;
-}
-
-#carbonads a {
-  color: #111;
-  text-decoration: none;
-}
-
-#carbonads a:hover {
-  color: #111;
-}
-
-.carbon-img {
-  display: block;
-  margin-bottom: 8px;
-  max-width: 130px;
-  line-height: 1;
-}
-
-.carbon-img img {
-  display: block;
-  margin: 0 auto;
-  max-width: 130px;
-  width: 130px;
-  height: auto;
-}
-
-.carbon-text {
-  display: block;
-  padding: 0 10px 8px;
-  text-align: left;
-  line-height: 1.35;
-}
-
-.carbon-poweredby {
-  display: block;
-  padding: 10px;
-  background: repeating-linear-gradient(
-      -45deg,
-      transparent,
-      transparent 5px,
-      hsla(0, 0%, 0%, 0.025) 5px,
-      hsla(0, 0%, 0%, 0.025) 10px
-    )
-    hsla(203, 11%, 95%, 0.4);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-weight: 600;
-  font-size: 8px;
-  line-height: 0;
-}
-
-@media only screen and (min-width: 320px) and (max-width: 759px) {
-  #carbonads {
-    position: relative;
-    float: none;
-    margin: 20px 0;
-    max-width: 330px;
-  }
-
-  .carbon-wrap {
-    display: flex;
-    flex-direction: row;
-  }
-
-  .carbon-img {
-    margin: 0;
-  }
-
-  .carbon-text {
-    padding: 10px 10px 0 10px;
-    font-size: 12px;
-  }
-
-  .carbon-poweredby {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    border-radius: 0;
-    border-top-left-radius: 3px;
-    text-align: center;
-  }
-}
-
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/e7MeVAyvogMqFwwl61PKhBkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxHYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/Ks_cVxiCiwUWVsFWFA3Bjn-_kf6ByYO6CLYdB4HQE-Y.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/oOeFwZNlrTefzLYmlVV1UIX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUZBw1xU1rKptJj_0jans920.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/97uahxiqZRoncBaCEI3aW4X0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOJBw1xU1rKptJj_0jans920.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/9_7S_tWeGDh5Pq3u05RVkoX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIpBw1xU1rKptJj_0jans920.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 100;
-  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(https://fonts.gstatic.com/s/roboto/v15/dzxs_VxZUhdM2mEBkNa8sgsYbbCjybiHxArTLjt7FRU.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 100;
-  src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'), url(https://fonts.gstatic.com/s/roboto/v15/12mE4jfMSBTmg-81EiS-YQzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 300;
-  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 300;
-  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/vSzulfKSK0LLjjfeaxcREhkAz4rYn47Zy2rvigWQf6w.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/vPcynSL0qHq_6dX7lKVByXYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 500;
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0aE8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 500;
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'), url(https://fonts.gstatic.com/s/roboto/v15/OLffGBTaF0XFOW1gnuHF0Ygp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC6E8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC4gp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 900;
-  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url(https://fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpaE8kM4xWR1_1bYURRojRGc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 900;
-  src: local('Roboto Black Italic'), local('Roboto-BlackItalic'), url(https://fonts.gstatic.com/s/roboto/v15/bmC0pGMXrhphrZJmniIZpYgp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-
-/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
-
-/**
- * 1. Change the default font family in all browsers (opinionated).
- * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- * 2. Add the correct display in IE.
- */
-
-article,
-aside,
-details, /* 1 */
-figcaption,
-figure,
-footer,
-header,
-main, /* 2 */
-menu,
-nav,
-section,
-summary { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Add the correct display in IE 10-.
- * 1. Add the correct display in IE.
- */
-
-template, /* 1 */
-[hidden] {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * 1. Remove the bottom border in Firefox 39-.
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-select,
-textarea {
-  font: inherit; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Restore the font weight unset by the previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Change the border, margin, and padding in all browsers (opinionated).
- */
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-.menu-root {
-  width: 120px;
-  display: flex;
-  flex-direction: column;
-  padding: 30px;
-  border-right: 1px solid #a21717;
-}
-.menu-option {
-  margin-top: 25px;
-  text-decoration: none;
-  font-size: 18px;
-  font-family: Roboto;
-  cursor: pointer;
-  color: black;
-}
-.menu-option:hover {
-  color: #a21717;
-}
-.menu-option-active {
-  color: #a21717;
-}
-
-.app-root {
-  width: 100%;
-}
-.header {
-  height: 125px;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-family: Roboto;
-  color: white;
-  background: #a21717;
-}
-.header-label {
-  color: white;
-  text-decoration: none;
-}
-.flex-layout {
-  display: flex;
-  min-height: 600px;
-}
-.github {
-  position: absolute;
-  top: 0;
-  right: 0;
-  border: 0;
-  height: 140px;
-}
-.footer {
-  height: 100px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: #a21717;
-  color: white;
-  font-size: 18px;
-  font-family: Roboto;
-  font-weight: 300;
-}
-.author-link {
-  color: white;
-  text-decoration: none;
-  margin-left: 5px;
-}
-.header-text {
-  display: flex;
-  flex-direction: column;
-}
-.header-title {
-  font-size: 50px;
-}
-.header-subtitle {
-  text-align: right;
-  font-style: italic;
-  font-size: 18px;
-  font-weight: 300;
-}
-.header-logo {
-  width: 70px;
-  margin-left: 50px;
-  cursor: pointer;
-}
-
-.root {
-  width: 100%;
-  display: flex;
-  font-family: Roboto;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-}
-.label {
-  font-size: 20px;
-  font-weight: bold;
-  margin-bottom: 20px;
-}
-.home-list {
-  margin-top: 20px;
-}
-.home-listItem {
-  margin-bottom: 10px;
-}
-.home-wrapper {
-  margin-top: 50px !important;
-  width: 775px !important;
-  display: block !important;
-  height: 400px !important;
-}
-.home-editor {
-  border: 1px solid #f1f1f1 !important;
-  padding: 5px !important;
-  border-radius: 2px !important;
-  height: 80% !important;
-}
-.quote-section {
-  margin: 50px 0 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.quote {
-  margin-top: 20px;
-  display: flex;
-  align-items: center;
-}
-.quote-text {
-  font-size: 16px;
-}
-.quote-author {
-  font-size: 18px;
-  margin-left: 15px;
-  font-style: italic;
-  font-weight: 500;
-}
-.home-label {
-  font-size: 25px;
-  font-weight: 500;
-  margin-top: 50px;
-}
-.feature-list {
-  margin: 50px 0 50px 50px;
-  list-style-type: decimal;
-}
-.discussion {
-  margin-top: 15px;
-}
-.carbon_wrapper {
-  display: flex;
-}
-.carbon_ad {
-  margin-left: -200px;
-  margin-right: 50px;
-  margin-top: 50px;
-}
-
-.demo-color-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  position: relative;
-}
-.demo-icon-wrapper {
-  border: 1px solid #F1F1F1;
-  padding: 3px 5px;
-}
-.demo-icon {
-  width: 20px;
-}
-.demo-color-modal {
-  position: absolute;
-  right: -70px;
-  top: 135%;
-  z-index: 10;
-}
-/* BASICS */
-
-.CodeMirror {
-  /* Set height, width, borders, and global font properties here */
-  font-family: monospace;
-  height: 300px;
-  color: black;
-  direction: ltr;
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
-  padding: 4px 0; /* Vertical padding around content */
-}
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  padding: 0 4px; /* Horizontal padding of content */
-}
-
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  background-color: white; /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
-  border-right: 1px solid #ddd;
-  background-color: #f7f7f7;
-  white-space: nowrap;
-}
-.CodeMirror-linenumbers {}
-.CodeMirror-linenumber {
-  padding: 0 3px 0 5px;
-  min-width: 20px;
-  text-align: right;
-  color: #999;
-  white-space: nowrap;
-}
-
-.CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
-
-/* CURSOR */
-
-.CodeMirror-cursor {
-  border-left: 1px solid black;
-  border-right: none;
-  width: 0;
-}
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-.cm-fat-cursor .CodeMirror-cursor {
-  width: auto;
-  border: 0 !important;
-  background: #7e7;
-}
-.cm-fat-cursor div.CodeMirror-cursors {
-  z-index: 1;
-}
-.cm-fat-cursor-mark {
-  background-color: rgba(20, 255, 20, 0.5);
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-}
-.cm-animate-fat-cursor {
-  width: auto;
-  border: 0;
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-  background-color: #7e7;
-}
-@-moz-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-@-webkit-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-@keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
-}
-
-/* Can style cursor different in overwrite (non-insert) mode */
-.CodeMirror-overwrite .CodeMirror-cursor {}
-
-.cm-tab { display: inline-block; text-decoration: inherit; }
-
-.CodeMirror-rulers {
-  position: absolute;
-  left: 0; right: 0; top: -50px; bottom: 0;
-  overflow: hidden;
-}
-.CodeMirror-ruler {
-  border-left: 1px solid #ccc;
-  top: 0; bottom: 0;
-  position: absolute;
-}
-
-/* DEFAULT THEME */
-
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
-
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
-.cm-s-default .cm-variable,
-.cm-s-default .cm-punctuation,
-.cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
-
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
-
-.CodeMirror-composing { border-bottom: 2px solid; }
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
-
-/* STOP */
-
-/* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-.CodeMirror {
-  position: relative;
-  overflow: hidden;
-  background: white;
-}
-
-.CodeMirror-scroll {
-  overflow: scroll !important; /* Things will break if this is overridden */
-  /* 30px is the magic margin used to hide the element's real scrollbars */
-  /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -30px; margin-right: -30px;
-  padding-bottom: 30px;
-  height: 100%;
-  outline: none; /* Prevent dragging from highlighting the element */
-  position: relative;
-}
-.CodeMirror-sizer {
-  position: relative;
-  border-right: 30px solid transparent;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actual scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
-  position: absolute;
-  z-index: 6;
-  display: none;
-}
-.CodeMirror-vscrollbar {
-  right: 0; top: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-.CodeMirror-hscrollbar {
-  bottom: 0; left: 0;
-  overflow-y: hidden;
-  overflow-x: scroll;
-}
-.CodeMirror-scrollbar-filler {
-  right: 0; bottom: 0;
-}
-.CodeMirror-gutter-filler {
-  left: 0; bottom: 0;
-}
-
-.CodeMirror-gutters {
-  position: absolute; left: 0; top: 0;
-  min-height: 100%;
-  z-index: 3;
-}
-.CodeMirror-gutter {
-  white-space: normal;
-  height: 100%;
-  display: inline-block;
-  vertical-align: top;
-  margin-bottom: -30px;
-}
-.CodeMirror-gutter-wrapper {
-  position: absolute;
-  z-index: 4;
-  background: none !important;
-  border: none !important;
-}
-.CodeMirror-gutter-background {
-  position: absolute;
-  top: 0; bottom: 0;
-  z-index: 4;
-}
-.CodeMirror-gutter-elt {
-  position: absolute;
-  cursor: default;
-  z-index: 4;
-}
-.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
-.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
-
-.CodeMirror-lines {
-  cursor: text;
-  min-height: 1px; /* prevents collapsing before first draw */
-}
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-  /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
-  border-width: 0;
-  background: transparent;
-  font-family: inherit;
-  font-size: inherit;
-  margin: 0;
-  white-space: pre;
-  word-wrap: normal;
-  line-height: inherit;
-  color: inherit;
-  z-index: 2;
-  position: relative;
-  overflow: visible;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-font-variant-ligatures: contextual;
-  font-variant-ligatures: contextual;
-}
-.CodeMirror-wrap pre.CodeMirror-line,
-.CodeMirror-wrap pre.CodeMirror-line-like {
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  word-break: normal;
-}
-
-.CodeMirror-linebackground {
-  position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  padding: 0.1px; /* Force widget margins to stay inside of the container */
-}
-
-.CodeMirror-widget {}
-
-.CodeMirror-rtl pre { direction: rtl; }
-
-.CodeMirror-code {
-  outline: none;
-}
-
-/* Force content-box sizing for the elements where we expect it */
-.CodeMirror-scroll,
-.CodeMirror-sizer,
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.CodeMirror-cursor {
-  position: absolute;
-  pointer-events: none;
-}
-.CodeMirror-measure pre { position: static; }
-
-div.CodeMirror-cursors {
-  visibility: hidden;
-  position: relative;
-  z-index: 3;
-}
-div.CodeMirror-dragcursors {
-  visibility: visible;
-}
-
-.CodeMirror-focused div.CodeMirror-cursors {
-  visibility: visible;
-}
-
-.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-.CodeMirror-crosshair { cursor: crosshair; }
-.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
-.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
-
-.cm-searching {
-  background-color: #ffa;
-  background-color: rgba(255, 255, 0, .4);
-}
-
-/* Used to force a border model for a node */
-.cm-force-border { padding-right: .1px; }
-
-@media print {
-  /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
-  }
-}
-
-/* See issue #2901 */
-.cm-tab-wrap-hack:after { content: ''; }
-
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }
-
-.demo-root {
-  width: 90%;
-  display: flex;
-  font-family: Roboto;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-}
-.demo-label {
-  display: block;
-  font-size: 20px;
-  font-weight: 500;
-  margin: 50px 0 25px;
-}
-.demo-label-high {
-  display: block;
-  font-size: 20px;
-  font-weight: 500;
-  margin: 50px 0 90px;
-}
-.demo-subLabel {
-  margin-bottom: 20px;
-}
-.demo-editorSection {
-  display: flex;
-  justify-content: space-between;
-}
-.demo-wrapper {
-  width: 100% !important;
-  display: block !important;
-  margin-bottom: 25px !important;
-  height: 400px !important;
-}
-.demo-wrapper-medium {
-  width: 650px !important;
-  display: block !important;
-  margin-bottom: 50px !important;
-  height: 300px !important;
-}
-.demo-editor {
-  height: 275px !important;
-  border: 1px solid #F1F1F1 !important;
-  padding: 5px !important;
-  border-radius: 2px !important;
-}
-.demo-editorWrapper {
-}
-.demo-content {
-  border: 1px solid #F1F1F1;
-  padding: 5px;
-  border-radius: 5px;
-  width: 100%;
-  border-radius: 2px;
-  resize: none;
-  height: 200px;
-}
-.demo-toolbar-absolute {
-  position: absolute !important;
-  top: -40px !important;
-  width: 550px !important;
-  border-radius: 3px !important;
-  background: #f3f3f3 !important;
-  border: 1px solid #e3e3e3 !important;
-}
-.demo-toolbar-absolute-high {
-  position: absolute !important;
-  top: -80px !important;
-  width: 550px !important;
-  border-radius: 3px !important;
-  background: #f3f3f3 !important;
-  border: 1px solid #e3e3e3 !important;
-}
-.demo-editor-plain {
-  height: 80% !important;
-  border-width: 0px !important;
-}
-.demo-editor-embedded {
-  height: 90% !important;
-  border-width: 0px !important;
-}
-.demo-wrapper-relative {
-  display: block !important;
-  position: relative !important;
-  margin-bottom: 25px !important;
-  height: 200px !important;
-}
-.demo-wrapper-relative-long {
-  width: 715px !important;
-  display: block !important;
-  position: relative !important;
-  margin-bottom: 25px !important;
-  height: 450px !important;
-}
-.bordered-option-classname {
-  border: 1px solid #e3e3e3 !important;
-}
-.demo-toolbar-absolute > div:not(:last-of-type) {
-  border-right: 2px solid #e3e3e3;
-  padding-right: 5px;
-}
-.demo-toolbar-absolute > div:not(:first-of-type) {
-  padding-left: 5px;
-}
-.demo-toolbar-custom {
-  border-color: rgb(0,47,126) !important;
-  background-color: #9EBEF5 !important;
-}
-.demo-editor-custom {
-  height: 200px !important;
-  border: 1px solid #F1F1F1 !important;
-  padding: 5px !important;
-  height: 75% !important;
-  border-radius: 2px !important;
-  border-color: rgb(0,47,126) !important;
-}
-.demo-option-custom {
-  width: 15px !important;
-  height: 15px !important;
-  border-color: rgb(0,47,126) !important;
-  color: rgb(0,47,126);
-}
-.demo-option-custom-wide {
-  width: 125px !important;
-  height: 25px !important;
-  border-color: rgb(0,47,126) !important;
-  color: rgb(0,47,126) !important;
-}
-.demo-option-custom-medium {
-  height: 25px !important;
-  border-color: rgb(0,47,126) !important;
-  color: rgb(0,47,126) !important;
-}
-.demo-dropdown-custom {
-  border-color: rgb(0,47,126) !important;
-}
-.demo-popup-custom {
-  border-color: rgb(0,47,126) !important;
-  padding: 5px !important;
-}
-.demo-popup-custom input {
-  border-color: rgb(0,47,126) !important;
-}
-.demo-popup-custom button {
-  border-color: rgb(0,47,126) !important;
-}
-.demo-section-wrapper {
-  display: flex;
-}
-.demo-editor-wrapper {
-  width: 60%;
-}
-.demo-section {
-  margin: 50px 30px 20px;
-  width: 95%;
-}
-.ReactCodeMirror {
-  width: 38%;
-  margin-left: 2%;
-  border: 1px solid #e4e4e4;
-  height: 400px;
-}
-.CodeMirror {
-  height: 400px !important;
-}
-.demo-custom-option {
-  width: 26px;
-  height: 26px;
-  border: 1px solid #f1f1f1;
-  text-align: center;
-  padding-right: 5px;
-  padding-bottom: 2px;
-  cursor: pointer;
-}
-
-.docs-root {
-  width: calc(100% - 150px);
-  margin: 30px;
-}
-.docs-label {
-  display: block;
-  font-size: 20px;
-  font-weight: 500;
-  margin: 20px 0;
-}
-.docs-sub-label {
-  display: block;
-  font-size: 18px;
-  font-weight: 500;
-  margin: 10px 0;
-}
-.docs-section {
-  margin: 20px 0 50px;
-}
-.docs-section .ReactCodeMirror {
-  max-height: 500px;
-  overflow: scroll;
-  width: 75%;
-  margin-top: 25px;
-  margin-left: 0;
-  height: auto !important;
-}
-.docs-section .CodeMirror {
-  height: auto !important;
-}
-code {
-  padding: 20px;
-  font-size: 13px;
-  display: inline-flex;
-  flex-direction: column;
-  background-color: #f1f1f1;
-}
-.code_sm {
-  padding: 2px;
-}
-.docs-desc {
-  width: 75%;
-  font-size: 15px;
-  margin-bottom: 10px;
-}
-.docs-root li {
-  margin-bottom: 5px;
-}
-.docs-text {
-  width: 75%;
-  font-size: 17px;
-  margin: 15px 0;
-}
-.top-margined {
-  margin-top: 20px;
-}
-ol {
-  font-size: 15px;
-}
-.docs-property {
-  display: flex;
-}
-.author-root {
-  margin: 30px;
-  width: 50%;
-}
-.photo {
-  height: 150px;
-  width: auto;
-}
-
-.rdw-option-wrapper {
-  border: 1px solid #F1F1F1;
-  padding: 5px;
-  width: 30px;
-  height: 30px;
-  border-radius: 6px;
-  margin: 0 2px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: white;
-  text-transform: capitalize;
-}
-.rdw-option-wrapper:hover {
-  background-color: #F1F1F1;
-}
-.rdw-option-wrapper:active {
-  box-shadow: 1px 1px 0px #BFBDBD inset;
-}
-.rdw-option-active {
-  box-shadow: 1px 1px 0px #BFBDBD inset;
-}
-.rdw-option-disabled {
-  opacity: 0.3;
-  cursor: default;
-}
-
-.rdw-dropdown-wrapper {
-  height: 30px;
-  background: white;
-  cursor: pointer;
-  width: 30px;
-  border: 1px solid #F1F1F1;
-  border-radius: 6px;
-  margin: 0 2px;
-  text-transform: capitalize;
-  background: white;
-}
-.rdw-dropdown-wrapper:focus {
-  outline: none;
-}
-.rdw-dropdown-wrapper:hover {
-  background-color: #F1F1F1;
-}
-.rdw-dropdown-wrapper:active {
-  box-shadow: 1px 1px 0px #BFBDBD inset;
-}
-.rdw-dropdown-carettoopen {
-  height: 0px;
-  width: 0px;
-  position: absolute;
-  top: 35%;
-  right: 10%;
-  border-top: 6px solid black;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-.rdw-dropdown-carettoclose {
-  height: 0px;
-  width: 0px;
-  position: absolute;
-  top: 35%;
-  right: 10%;
-  border-bottom: 6px solid black;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-.rdw-dropdown-selectedtext {
-  display: flex;
-  position: relative;
-  height: 100%;
-  align-items: center;
-  padding: 0 5px;
-}
-.rdw-dropdown-optionwrapper {
-  z-index: 100;
-  position: relative;
-  border: 1px solid #F1F1F1;
-  width: 100%;
-  background: white;
-  border-radius: 2px;
-  margin-top: 1px;
-  padding: 0;
-  max-height: 250px;
-  overflow-y: scroll;
-  border-radius: 6px;
-
-}
-.rdw-dropdown-optionwrapper:hover {
-  box-shadow: 1px 1px 0px #BFBDBD;
-  background-color: #FFFFFF;
-}
-
-.rdw-dropdownoption-default {
-  min-height: 25px;
-  display: flex;
-  align-items: center;
-  padding: 0 5px;
-}
-.rdw-dropdownoption-highlighted {
-  background: #F1F1F1;
-}
-.rdw-dropdownoption-active {
-  background: #f5f5f5;
-}
-.rdw-dropdownoption-disabled {
-  opacity: 0.3;
-  cursor: default;
-}
-
-.rdw-inline-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
-}
-.rdw-inline-dropdown {
-  width: 50px;
-}
-.rdw-inline-dropdownoption {
-  height: 40px;
-  display: flex;
-  justify-content: center;
-}
-
-.rdw-block-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
-}
-.rdw-block-dropdown {
-  width: 110px;
-}
-
-.rdw-fontsize-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
-}
-.rdw-fontsize-dropdown {
-  min-width: 42px;
-}
-.rdw-fontsize-option {
-  display: flex;
-  justify-content: center;
-}
-
-.rdw-fontfamily-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
-}
-.rdw-fontfamily-dropdown {
-  width: 115px;
-}
-.rdw-fontfamily-placeholder {
-  white-space: nowrap;
-  max-width: 90px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.rdw-fontfamily-optionwrapper {
-  width: 140px;
-}
-
-.rdw-list-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
-}
-.rdw-list-dropdown {
-  width: 42px;
-  z-index: 90;
-}
-.rdw-list-dropdownOption {
-  height: 40px;
-  display: flex;
-  justify-content: center;
-}
-
-.rdw-text-align-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
-}
-.rdw-text-align-dropdown {
-  width: 50px;
-  z-index: 90;
-}
-.rdw-text-align-dropdownOption {
-  height: 40px;
-  display: flex;
-  justify-content: center;
-}
-.rdw-right-aligned-block {
-  text-align: right;
-}
-.rdw-left-aligned-block {
-  text-align: left !important;
-}
-.rdw-center-aligned-block {
-  text-align: center !important;
-}
-.rdw-justify-aligned-block {
-  text-align: justify !important;
-}
-.rdw-right-aligned-block > div {
-  display: inline-block;
-}
-.rdw-left-aligned-block > div {
-  display: inline-block;
-}
-.rdw-center-aligned-block > div {
-  display: inline-block;
-}
-.rdw-justify-aligned-block > div {
-  display: inline-block;
-}
-
-.rdw-colorpicker-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  position: relative;
-  flex-wrap: wrap
-}
-.rdw-colorpicker-modal {
-  position: absolute;
-  top: 35px;
-  left: 5px;
-  display: flex;
-  flex-direction: column;
-  width: 175px;
-  height: 175px;
-  border: 1px solid #F1F1F1;
-  padding: 15px;
-  border-radius: 2px;
-  z-index: 100;
-  background: white;
-  box-shadow: 3px 3px 5px #BFBDBD;
-}
-.rdw-colorpicker-modal-header {
-  display: flex;
-  padding-bottom: 5px;
-}
-.rdw-colorpicker-modal-style-label {
-  font-size: 15px;
-  width: 50%;
-  text-align: center;
-  cursor: pointer;
-  padding: 0 10px 5px;
-}
-.rdw-colorpicker-modal-style-label-active {
-  border-bottom: 2px solid #0a66b7;
-}
-.rdw-colorpicker-modal-options {
-  margin: 5px auto;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  flex-wrap: wrap;
-  overflow: scroll;
-}
-.rdw-colorpicker-cube {
-  width: 22px;
-  height: 22px;
-  border: 1px solid #F1F1F1;
-}
-.rdw-colorpicker-option {
-  margin: 3px;
-  padding: 0;
-  min-height: 20px;
-  border: none;
-  width: 22px;
-  height: 22px;
-  min-width: 22px;
-  box-shadow: 1px 2px 1px #BFBDBD inset;
-}
-.rdw-colorpicker-option:hover {
-  box-shadow: 1px 2px 1px #BFBDBD;
-}
-.rdw-colorpicker-option:active {
-  box-shadow: -1px -2px 1px #BFBDBD;
-}
-.rdw-colorpicker-option-active {
-  box-shadow: 0px 0px 2px 2px #BFBDBD;
-}
-
-.rdw-link-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  position: relative;
-  flex-wrap: wrap
-}
-.rdw-link-dropdown {
-  width: 50px;
-}
-.rdw-link-dropdownOption {
-  height: 40px;
-  display: flex;
-  justify-content: center;
-}
-.rdw-link-dropdownPlaceholder {
-  margin-left: 8px;
-}
-.rdw-link-modal {
-  position: absolute;
-  top: 35px;
-  left: 5px;
-  display: flex;
-  flex-direction: column;
-  width: 235px;
-  border: 1px solid #F1F1F1;
-  padding: 15px;
-  border-radius: 6px;
-  z-index: 100;
-  background: white;
-  box-shadow: 3px 3px 5px #BFBDBD;
-}
-.rdw-link-modal-label {
-  font-size: 15px;
-}
-.rdw-link-modal-input {
-  margin-top: 5px;
-  border-radius: 2px;
-  border: 1px solid #F1F1F1;
-  height: 25px;
-  margin-bottom: 15px;
-  padding: 0 5px;
-}
-.rdw-link-modal-input:focus {
-  outline: none;
-}
-.rdw-link-modal-buttonsection {
-  margin: 0 auto;
-}
-.rdw-link-modal-target-option {
-  margin-bottom: 20px;
-}
-.rdw-link-modal-target-option > span {
-  margin-left: 5px;
-}
-.rdw-link-modal-btn {
-  margin-left: 10px;
-  width: 75px;
-  height: 30px;
-  border: 1px solid #F1F1F1;
-  border-radius: 2px;
-  cursor: pointer;
-  background: white;
-  text-transform: capitalize;
-}
-.rdw-link-modal-btn:hover {
-  box-shadow: 1px 1px 0px #BFBDBD;
-}
-.rdw-link-modal-btn:active {
-  box-shadow: 1px 1px 0px #BFBDBD inset;
-}
-.rdw-link-modal-btn:focus {
-  outline: none !important;
-}
-.rdw-link-modal-btn:disabled {
-  background: #ece9e9;
-}
-.rdw-link-dropdownoption {
-  height: 40px;
-  display: flex;
-  justify-content: center;
-}
-.rdw-history-dropdown {
-  width: 50px;
-}
 
-.rdw-embedded-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  position: relative;
-  flex-wrap: wrap
-}
-.rdw-embedded-modal {
-  position: absolute;
-  top: 35px;
-  left: 5px;
-  display: flex;
-  flex-direction: column;
-  width: 235px;
-  height: 180px;
-  border: 1px solid #F1F1F1;
-  padding: 15px;
-  border-radius: 2px;
-  z-index: 100;
-  background: white;
-  justify-content: space-between;
-  box-shadow: 3px 3px 5px #BFBDBD;
-}
-.rdw-embedded-modal-header {
-  font-size: 15px;
-  display: flex;
-}
-.rdw-embedded-modal-header-option {
-  width: 50%;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.rdw-embedded-modal-header-label {
-  width: 95px;
-  border: 1px solid #f1f1f1;
-  margin-top: 5px;
-  background: #6EB8D4;
-  border-bottom: 2px solid #0a66b7;
-}
-.rdw-embedded-modal-link-section {
-  display: flex;
-  flex-direction: column;
-}
-.rdw-embedded-modal-link-input {
-  width: 88%;
-  height: 35px;
-  margin: 10px 0;
-  border: 1px solid #F1F1F1;
-  border-radius: 2px;
-  font-size: 15px;
-  padding: 0 5px;
-}
-.rdw-embedded-modal-link-input-wrapper {
-  display: flex;
-  align-items: center;
-}
-.rdw-embedded-modal-link-input:focus {
-  outline: none;
-}
-.rdw-embedded-modal-btn-section {
+
+.rdw-option-wrapper {
+  border: 1px solid #F1F1F1;
+  padding: 5px;
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  margin: 0 2px;
   display: flex;
   justify-content: center;
-}
-.rdw-embedded-modal-btn {
-  margin: 0 3px;
-  width: 75px;
-  height: 30px;
-  border: 1px solid #F1F1F1;
-  border-radius: 2px;
+  align-items: center;
   cursor: pointer;
   background: white;
   text-transform: capitalize;
 }
-.rdw-embedded-modal-btn:hover {
-  box-shadow: 1px 1px 0px #BFBDBD;
+.rdw-option-wrapper:hover {
+  background-color: #F1F1F1;
 }
-.rdw-embedded-modal-btn:active {
+.rdw-option-wrapper:active {
   box-shadow: 1px 1px 0px #BFBDBD inset;
 }
-.rdw-embedded-modal-btn:focus {
-  outline: none !important;
-}
-.rdw-embedded-modal-btn:disabled {
-  background: #ece9e9;
-}
-.rdw-embedded-modal-size {
-  align-items: center;
-  display: flex;
-  margin: 8px 0;
-  justify-content: space-between;
-}
-.rdw-embedded-modal-size-input {
-  width: 80%;
-  height: 20px;
-  border: 1px solid #F1F1F1;
-  border-radius: 2px;
-  font-size: 12px;
+.rdw-option-active {
+  box-shadow: 1px 1px 0px #BFBDBD inset;
 }
-.rdw-embedded-modal-size-input:focus {
-  outline: none;
+.rdw-option-disabled {
+  opacity: 0.3;
+  cursor: default;
 }
 
-.rdw-emoji-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  position: relative;
-  flex-wrap: wrap
-}
-.rdw-emoji-modal {
-  overflow: auto;
-  position: absolute;
-  top: 35px;
-  left: 5px;
-  display: flex;
-  flex-wrap: wrap;
-  width: 235px;
-  height: 180px;
-  border: 1px solid #F1F1F1;
-  padding: 15px;
-  border-radius: 2px;
-  z-index: 100;
+.rdw-dropdown-wrapper {
+  height: 30px;
   background: white;
-  box-shadow: 3px 3px 5px #BFBDBD;
-}
-.rdw-emoji-icon {
-  margin: 2.5px;
-  height: 24px;
-  width: 24px;
   cursor: pointer;
-  font-size: 22px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.rdw-spinner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
-.rdw-spinner > div {
-  width: 12px;
-  height: 12px;
-  background-color: #333;
-
-  border-radius: 100%;
-  display: inline-block;
-  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
-}
-.rdw-spinner .rdw-bounce1 {
-  -webkit-animation-delay: -0.32s;
-  animation-delay: -0.32s;
-}
-.rdw-spinner .rdw-bounce2 {
-  -webkit-animation-delay: -0.16s;
-  animation-delay: -0.16s;
-}
-@-webkit-keyframes sk-bouncedelay {
-  0%, 80%, 100% { -webkit-transform: scale(0) }
-  40% { -webkit-transform: scale(1.0) }
-}
-@keyframes sk-bouncedelay {
-  0%, 80%, 100% {
-    -webkit-transform: scale(0);
-    transform: scale(0);
-  } 40% {
-    -webkit-transform: scale(1.0);
-    transform: scale(1.0);
-  }
-}
-
-.rdw-image-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  position: relative;
-  flex-wrap: wrap
-}
-.rdw-image-modal {
-  position: absolute;
-  top: 35px;
-  left: 5px;
-  display: flex;
-  flex-direction: column;
-  width: 235px;
+  width: 30px;
   border: 1px solid #F1F1F1;
-  padding: 15px;
-  border-radius: 2px;
-  z-index: 100;
+  border-radius: 6px;
+  margin: 0 2px;
+  text-transform: capitalize;
   background: white;
-  box-shadow: 3px 3px 5px #BFBDBD;
-}
-.rdw-image-modal-header {
-  font-size: 15px;
-  margin: 10px 0;
-  display: flex;
 }
-.rdw-image-modal-header-option {
-  width: 50%;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.rdw-image-modal-header-label {
-  width: 80px;
-  background: #f1f1f1;
-  border: 1px solid #f1f1f1;
-  margin-top: 5px;
-}
-.rdw-image-modal-header-label-highlighted {
-  background: #6EB8D4;
-  border-bottom: 2px solid #0a66b7;
-}
-.rdw-image-modal-upload-option {
-  width: 100%;
-  color: gray;
-  cursor: pointer;
-  display: flex;
-  border: none;
-  font-size: 15px;
-  align-items: center;
-  justify-content: center;
-  background-color: #f1f1f1;
-  outline: 2px dashed gray;
-  outline-offset: -10px;
-  margin: 10px 0;
-  padding: 9px 0;
-}
-.rdw-image-modal-upload-option-highlighted {
-  outline: 2px dashed #0a66b7;
+.rdw-dropdown-wrapper:focus {
+  outline: none;
 }
-.rdw-image-modal-upload-option-label {
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 15px;
+.rdw-dropdown-wrapper:hover {
+  background-color: #F1F1F1;
 }
-.rdw-image-modal-upload-option-label span{
-  padding: 0 20px;
+.rdw-dropdown-wrapper:active {
+  box-shadow: 1px 1px 0px #BFBDBD inset;
 }
-.rdw-image-modal-upload-option-image-preview {
-  max-width: 100%;
-  max-height: 200px;
+.rdw-dropdown-carettoopen {
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  top: 35%;
+  right: 10%;
+  border-top: 6px solid black;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
 }
-.rdw-image-modal-upload-option-input {
-	width: 0.1px;
-	height: 0.1px;
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
-	z-index: -1;
+.rdw-dropdown-carettoclose {
+  height: 0px;
+  width: 0px;
+  position: absolute;
+  top: 35%;
+  right: 10%;
+  border-bottom: 6px solid black;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
 }
-.rdw-image-modal-url-section {
+.rdw-dropdown-selectedtext {
   display: flex;
+  position: relative;
+  height: 100%;
   align-items: center;
-}
-.rdw-image-modal-url-input {
-  width: 90%;
-  height: 35px;
-  margin: 15px 0 12px;
-  border: 1px solid #F1F1F1;
-  border-radius: 2px;
-  font-size: 15px;
   padding: 0 5px;
 }
-.rdw-image-modal-btn-section {
-  margin: 10px auto 0;
-}
-.rdw-image-modal-url-input:focus {
-  outline: none;
-}
-.rdw-image-modal-btn {
-  margin: 0 5px;
-  width: 75px;
-  height: 30px;
+.rdw-dropdown-optionwrapper {
+  z-index: 100;
+  position: relative;
   border: 1px solid #F1F1F1;
-  border-radius: 2px;
-  cursor: pointer;
-  background: white;
-  text-transform: capitalize;
-}
-.rdw-image-modal-btn:hover {
-  box-shadow: 1px 1px 0px #BFBDBD;
-}
-.rdw-image-modal-btn:active {
-  box-shadow: 1px 1px 0px #BFBDBD inset;
-}
-.rdw-image-modal-btn:focus {
-  outline: none !important;
-}
-.rdw-image-modal-btn:disabled {
-  background: #ece9e9;
-}
-.rdw-image-modal-spinner {
-  position: absolute;
-  top: -3px;
-  left: 0;
   width: 100%;
-  height: 100%;
-  opacity: 0.5;
-}
-.rdw-image-modal-alt-input {
-  width: 70%;
-  height: 20px;
-  border: 1px solid #F1F1F1;
+  background: white;
   border-radius: 2px;
-  font-size: 12px;
-  margin-left: 5px;
-}
-.rdw-image-modal-alt-input:focus {
-  outline: none;
+  margin-top: 1px;
+  padding: 0;
+  max-height: 250px;
+  overflow-y: scroll;
+  border-radius: 6px;
+
 }
-.rdw-image-modal-alt-lbl {
-  font-size: 12px;
+.rdw-dropdown-optionwrapper:hover {
+  box-shadow: 1px 1px 0px #BFBDBD;
+  background-color: #FFFFFF;
 }
-.rdw-image-modal-size {
-  align-items: center;
+
+.rdw-dropdownoption-default {
+  min-height: 25px;
   display: flex;
-  margin: 8px 0;
-  justify-content: space-between;
-}
-.rdw-image-modal-size-input {
-  width: 40%;
-  height: 20px;
-  border: 1px solid #F1F1F1;
-  border-radius: 2px;
-  font-size: 12px;
+  align-items: center;
+  padding: 0 5px;
 }
-.rdw-image-modal-size-input:focus {
-  outline: none;
+.rdw-dropdownoption-highlighted {
+  background: #F1F1F1;
 }
-.rdw-image-mandatory-sign {
-  color: red;
-  margin-left: 3px;
-  margin-right: 3px;
+.rdw-dropdownoption-active {
+  background: #f5f5f5;
 }
 
-.rdw-remove-wrapper {
+.rdw-inline-wrapper {
   display: flex;
   align-items: center;
   margin-bottom: 6px;
-  position: relative;
   flex-wrap: wrap
 }
-
-.rdw-history-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
+.rdw-inline-dropdown {
+  width: 50px;
 }
-.rdw-history-dropdownoption {
+.rdw-inline-dropdownoption {
   height: 40px;
   display: flex;
   justify-content: center;
 }
-.rdw-history-dropdown {
-  width: 50px;
-}
-
-.rdw-link-decorator-wrapper {
-  position: relative;
-}
-.rdw-link-decorator-icon {
-  position: absolute;
-  left: 40%;
-  top: 0;
-  cursor: pointer;
-  background-color: white;
-}
-
-.rdw-mention-link {
-  text-decoration: none;
-  color: #1236ff;
-  background-color: #f0fbff;
-  padding: 1px 2px;
-  border-radius: 2px;
-}
 
-.rdw-suggestion-wrapper {
-  position: relative;
-}
-.rdw-suggestion-dropdown {
-  position: absolute;
+.rdw-fontsize-wrapper {
   display: flex;
-  flex-direction: column;
-  border: 1px solid #F1F1F1;
-  min-width: 100px;
-  max-height: 150px;
-  overflow: auto;
-  background: white;
-  z-index: 100;
-}
-.rdw-suggestion-option {
-  padding: 7px 5px;
-  border-bottom: 1px solid #f1f1f1;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap
 }
-.rdw-suggestion-option-active {
-  background-color: #F1F1F1;
+.rdw-fontsize-dropdown {
+  min-width: 42px;
 }
-
-.rdw-hashtag-link {
-  text-decoration: none;
-  color: #1236ff;
-  background-color: #f0fbff;
-  padding: 1px 2px;
-  border-radius: 2px;
+.rdw-fontsize-option {
+  display: flex;
+  justify-content: center;
 }
 
-.rdw-image-alignment-options-popup {
-  position: absolute;
-  background: white;
+.rdw-list-wrapper {
   display: flex;
-  padding: 5px 2px;
-  border-radius: 2px;
-  border: 1px solid #F1F1F1;
-  width: 105px;
-  cursor: pointer;
-  z-index: 100;
-}
-.rdw-alignment-option-left {
-  justify-content: flex-start;
-}
-.rdw-image-alignment-option {
-  height: 15px;
-  width: 15px;
-  min-width: 15px;
-}
-.rdw-image-alignment {
-  position: relative;
+  align-items: center;
+  margin-bottom: 6px;
+  flex-wrap: wrap
 }
-.rdw-image-imagewrapper {
-  position: relative;
+.rdw-list-dropdown {
+  width: 42px;
+  z-index: 90;
 }
-.rdw-image-center {
+.rdw-list-dropdownOption {
+  height: 40px;
   display: flex;
   justify-content: center;
 }
-.rdw-image-left {
-  display: flex;
-}
-.rdw-image-right {
-  display: flex;
-  justify-content: flex-end;
-}
-.rdw-image-alignment-options-popup-right {
-  right: 0;
-}
 
-.rdw-editor-main {
-  height: 100%;
-  overflow: auto;
-  box-sizing: border-box;
-}
+
 .rdw-editor-toolbar {
   display: flex;
   justify-content: flex-start;
@@ -2336,24 +165,7 @@ ol {
   border-radius: 6px;
   user-select: none;
 }
-.public-DraftStyleDefault-block {
-  margin: 0 0;
-}
-.rdw-editor-wrapper:focus {
-  outline: none;
-}
-.rdw-editor-wrapper {
-  box-sizing: content-box;
-}
-.rdw-editor-main blockquote {
-  border-left: 5px solid #f1f1f1;
-  padding-left: 5px;
-}
-.rdw-editor-main pre {
-  background: #f1f1f1;
-  border-radius: 3px;
-  padding: 1px 10px;
-}
+
 /**
  * Draft v0.9.1
  *
@@ -2367,3 +179,4 @@ ol {
 .DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}
 
 /*# sourceMappingURL=main.css.map*/
+

From bc8e5287db845e0fffac4030d71fe391a25da6e6 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Fri, 21 Oct 2022 13:41:01 +0200
Subject: [PATCH 05/43] allow adding html tags + small refactoring

---
 .../v2/{ => TextEditor}/TextEditor.tsx        |  5 +-
 .../components/v2/{ => TextEditor}/styles.css | 54 +++++++++++++++++++
 .../components/v2/WorkflowStepContainer.tsx   |  2 +-
 3 files changed, 57 insertions(+), 4 deletions(-)
 rename packages/features/ee/workflows/components/v2/{ => TextEditor}/TextEditor.tsx (95%)
 rename packages/features/ee/workflows/components/v2/{ => TextEditor}/styles.css (86%)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
similarity index 95%
rename from packages/features/ee/workflows/components/v2/TextEditor.tsx
rename to packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
index 562137ce690e7a..78e7b995911f2e 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
@@ -6,7 +6,7 @@ import { EditorProps } from "react-draft-wysiwyg";
 import { RichUtils } from 'draft-js';
 
 import "./styles.css";
-import { AddVariablesDropdown } from "../../components/v2/AddVariablesDropdown";
+import { AddVariablesDropdown } from "../AddVariablesDropdown";
 import { FormValues } from "ee/workflows/pages/v2/workflow";
 import draftToHtml from 'draftjs-to-html';
 
@@ -29,7 +29,6 @@ function TextEditor(props: TextEditorProps) {
 
   const [editorState, setEditorState] = useState(EditorState.createWithContent(contentState));
 
-
   return (
     <div>
       <Editor
@@ -37,7 +36,7 @@ function TextEditor(props: TextEditorProps) {
         wrapperClassName="border border-gray-300 rounded-md"
         editorClassName=" p-3 -mt-3 bg-white rounded-md text-sm"
         onEditorStateChange={setEditorState}
-        onChange={() => {props.form.setValue(`steps.${props.stepNumber - 1}.reminderBody`, draftToHtml(convertToRaw(editorState.getCurrentContent())))} }
+        onChange={() => {props.form.setValue(`steps.${props.stepNumber - 1}.reminderBody`, draftToHtml(convertToRaw(editorState.getCurrentContent())).replaceAll("&lt;","<").replaceAll("&gt;", ">"))} }
         toolbarCustomButtons={[<CustomOption editorState={editorState} setEditorState={setEditorState} addVariable={props.addVariable} />]}
         toolbar={{
           options: ["inline", "fontSize", "list"],
diff --git a/packages/features/ee/workflows/components/v2/styles.css b/packages/features/ee/workflows/components/v2/TextEditor/styles.css
similarity index 86%
rename from packages/features/ee/workflows/components/v2/styles.css
rename to packages/features/ee/workflows/components/v2/TextEditor/styles.css
index d2ce0496d5502c..c90a52a4cdafcb 100644
--- a/packages/features/ee/workflows/components/v2/styles.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/styles.css
@@ -165,6 +165,60 @@
   border-radius: 6px;
   user-select: none;
 }
+.public-DraftStyleDefault-block {
+  margin: 14px 0;
+}
+.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset {
+  counter-reset: ol0;
+}
+
+.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 {
+  list-style-type: disc;
+}
+
+.rdw-link-decorator-wrapper {
+  position: relative;
+  color: blue;
+  text-decoration: underline;
+
+}
+
+.rdw-link-decorator-icon {
+  position: absolute;
+  left: 100%;
+  top: 0;
+  cursor: pointer;
+}
+
+.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset {
+  counter-reset: ol0;
+}
+.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset {
+  counter-reset: ol1;
+}
+.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset {
+  counter-reset: ol2;
+}
+.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset {
+  counter-reset: ol3;
+}
+.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset {
+  counter-reset: ol4;
+}
+
+.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before {
+  left: -36px;
+  position: absolute;
+  text-align: right;
+  width: 30px;
+}
+
+.public-DraftStyleDefault-unorderedListItem {
+  list-style-type: square;
+  position: relative;
+  margin: 10px;
+  font-sixe: 5px;
+}
 
 /**
  * Draft v0.9.1
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 035ec63dee76e7..27c3982a626021 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -31,7 +31,7 @@ import {
 } from "../../lib/getOptions";
 import { translateVariablesToEnglish } from "../../lib/variableTranslations";
 import type { FormValues } from "../../pages/v2/workflow";
-import TextEditor from "./TextEditor";
+import TextEditor from "./TextEditor/TextEditor";
 import { TimeTimeUnitInput } from "./TimeTimeUnitInput";
 
 type WorkflowStepProps = {

From 2552ab4593d11754d4a34bd1f1c5475953b4d605 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Fri, 21 Oct 2022 14:40:53 +0200
Subject: [PATCH 06/43] fix error when input is empty

---
 .../components/v2/TextEditor/TextEditor.tsx   | 61 +++++++++++--------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
index 78e7b995911f2e..434c9966d756a7 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
@@ -1,15 +1,14 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 import { EditorState, Modifier, ContentState, convertToRaw } from "draft-js";
-import { UseFormReturn } from "react-hook-form";
+import draftToHtml from "draftjs-to-html";
+import { FormValues } from "ee/workflows/pages/v2/workflow";
 import dynamic from "next/dynamic";
 import { useState, Dispatch, SetStateAction } from "react";
 import { EditorProps } from "react-draft-wysiwyg";
-import { RichUtils } from 'draft-js';
+import { UseFormReturn } from "react-hook-form";
 
-import "./styles.css";
 import { AddVariablesDropdown } from "../AddVariablesDropdown";
-import { FormValues } from "ee/workflows/pages/v2/workflow";
-import draftToHtml from 'draftjs-to-html';
-
+import "./styles.css";
 
 const Editor = dynamic<EditorProps>(() => import("react-draft-wysiwyg").then((mod) => mod.Editor), {
   ssr: false,
@@ -18,13 +17,13 @@ const Editor = dynamic<EditorProps>(() => import("react-draft-wysiwyg").then((mo
 const htmlToDraft = typeof window === "object" && require("html-to-draftjs").default;
 
 type TextEditorProps = {
-  addVariable: (isEmailSubject: boolean, variable: string) => void,
-  form: UseFormReturn<FormValues>
-  stepNumber: number,
-}
+  addVariable: (isEmailSubject: boolean, variable: string) => void;
+  form: UseFormReturn<FormValues>;
+  stepNumber: number;
+};
 
 function TextEditor(props: TextEditorProps) {
-  const contentBlock = htmlToDraft(props.form.getValues(`steps.${props.stepNumber - 1}.reminderBody` || ""));
+  const contentBlock = htmlToDraft(props.form.getValues(`steps.${props.stepNumber - 1}.reminderBody`) || "");
   const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
 
   const [editorState, setEditorState] = useState(EditorState.createWithContent(contentState));
@@ -36,8 +35,22 @@ function TextEditor(props: TextEditorProps) {
         wrapperClassName="border border-gray-300 rounded-md"
         editorClassName=" p-3 -mt-3 bg-white rounded-md text-sm"
         onEditorStateChange={setEditorState}
-        onChange={() => {props.form.setValue(`steps.${props.stepNumber - 1}.reminderBody`, draftToHtml(convertToRaw(editorState.getCurrentContent())).replaceAll("&lt;","<").replaceAll("&gt;", ">"))} }
-        toolbarCustomButtons={[<CustomOption editorState={editorState} setEditorState={setEditorState} addVariable={props.addVariable} />]}
+        onChange={() => {
+          props.form.setValue(
+            `steps.${props.stepNumber - 1}.reminderBody`,
+            draftToHtml(convertToRaw(editorState.getCurrentContent()))
+              .replaceAll("&lt;", "<")
+              .replaceAll("&gt;", ">")
+          );
+        }}
+        toolbarCustomButtons={[
+          <CustomOption
+            key={props.stepNumber}
+            editorState={editorState}
+            setEditorState={setEditorState}
+            addVariable={props.addVariable}
+          />,
+        ]}
         toolbar={{
           options: ["inline", "fontSize", "list"],
           inline: {
@@ -54,29 +67,23 @@ function TextEditor(props: TextEditorProps) {
 }
 
 type Props = {
-  editorState: EditorState,
-  setEditorState: Dispatch<SetStateAction<EditorState>>,
+  editorState: EditorState;
+  setEditorState: Dispatch<SetStateAction<EditorState>>;
   addVariable: (isEmailSubject: boolean, variable: string) => void;
-}
+};
 
 function CustomOption({ editorState, setEditorState }: Props) {
-
   const addVariable = (isEmailSubject: boolean, variable: string) => {
-
     const contentState = Modifier.replaceText(
       editorState.getCurrentContent(),
       editorState.getSelection(),
-      `{${variable
-        .toUpperCase()
-        .replace(/ /g, "_")}}`,
-      editorState.getCurrentInlineStyle(),
+      `{${variable.toUpperCase().replace(/ /g, "_")}}`,
+      editorState.getCurrentInlineStyle()
     );
-    setEditorState(EditorState.push(editorState, contentState, 'insert-characters'));
-  }
+    setEditorState(EditorState.push(editorState, contentState, "insert-characters"));
+  };
 
-  return (
-    <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
-  );
+  return <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />;
 }
 
 export default TextEditor;

From 0c732506d231581b6d130da45bfe3a4a8be94296 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Mon, 24 Oct 2022 13:15:32 +0200
Subject: [PATCH 07/43] styling of add variable dropdown

---
 .../components/v2/AddVariablesDropdown.tsx    | 26 +++----
 .../components/v2/TextEditor/TextEditor.tsx   |  6 +-
 .../components/v2/TextEditor/styles.css       |  1 -
 .../components/v2/WorkflowStepContainer.tsx   | 69 +++++++++----------
 4 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx b/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
index 42cd301c5967fb..0c865996dc4528 100644
--- a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
+++ b/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
@@ -28,29 +28,29 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
 
   return (
     <Dropdown>
-      <DropdownMenuTrigger className="focus:bg-transparent focus:ring-transparent focus:ring-offset-0 ">
-        <Label className="mb-0">
-          <div className="flex items-center">
-            {t("add_variable")}
-            <Icon.FiChevronDown className="ml-1 h-4 w-4" />
-          </div>
-        </Label>
+      <DropdownMenuTrigger className="focus:bg-50 pt-[6px]">
+        <div className="flex items-center ">
+          {t("add_variable")}
+          <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+        </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="h-40 overflow-scroll">
-        <div className="p-3">
-          <div className="mb-2 text-xs text-gray-500">{t("add_dynamic_variables").toLocaleUpperCase()}</div>
+        <div className="pt-4 pb-1">
+          <div className="mb-2 px-4 text-left text-xs text-gray-500">
+            {t("add_dynamic_variables").toLocaleUpperCase()}
+          </div>
           {variables.map((variable) => (
-            <DropdownMenuItem key={variable}>
+            <DropdownMenuItem key={variable} className="hover:ring-0">
               <button
                 key={variable}
                 type="button"
-                className="w-full py-2"
+                className="w-full px-4 py-2"
                 onClick={() => props.addVariable(props.isEmailSubject, t(`${variable}_workflow`))}>
-                <div className="md:grid md:grid-cols-2">
+                <div className="sm:grid sm:grid-cols-2">
                   <div className="mr-3 text-left md:col-span-1">
                     {`{${t(`${variable}_workflow`).toUpperCase().replace(/ /g, "_")}}`}
                   </div>
-                  <div className="invisible text-left text-gray-600 md:visible md:col-span-1">
+                  <div className="hidden text-left text-gray-600 sm:col-span-1 sm:flex">
                     {t(`${variable}_info`)}
                   </div>
                 </div>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
index 434c9966d756a7..243b882804a656 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
@@ -83,7 +83,11 @@ function CustomOption({ editorState, setEditorState }: Props) {
     setEditorState(EditorState.push(editorState, contentState, "insert-characters"));
   };
 
-  return <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />;
+  return (
+    <div className="-mt-[1px]">
+      <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
+    </div>
+  );
 }
 
 export default TextEditor;
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/styles.css b/packages/features/ee/workflows/components/v2/TextEditor/styles.css
index c90a52a4cdafcb..06b1cad035d911 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/styles.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/styles.css
@@ -144,7 +144,6 @@
 }
 .rdw-list-dropdown {
   width: 42px;
-  z-index: 90;
 }
 .rdw-list-dropdownOption {
   height: 40px;
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 8d734738c1947f..257f8250f20553 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -69,7 +69,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
   const [showTimeSection, setShowTimeSection] = useState(
     form.getValues("trigger") === WorkflowTriggerEvents.BEFORE_EVENT ||
-    form.getValues("trigger") === WorkflowTriggerEvents.AFTER_EVENT
+      form.getValues("trigger") === WorkflowTriggerEvents.AFTER_EVENT
   );
 
   const [showTimeSectionAfter, setShowTimeSectionAfter] = useState(
@@ -137,7 +137,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     return (
       <>
         <div className="flex justify-center">
-          <div className="w-full bg-white border border-gray-200 rounded-md min-w-80 p-7">
+          <div className="min-w-80 w-full rounded-md border border-gray-200 bg-white p-7">
             <div className="flex">
               <div className="mt-[3px] mr-5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs font-medium">
                 1
@@ -147,7 +147,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div className="text-sm text-gray-600">{t("when_something_happens")}</div>
               </div>
             </div>
-            <div className="border-t border-gray-200 my-7" />
+            <div className="my-7 border-t border-gray-200" />
             <Label>{t("when")}</Label>
             <Controller
               name="trigger"
@@ -210,11 +210,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
     return (
       <>
-        <div className="flex justify-center my-3">
+        <div className="my-3 flex justify-center">
           <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
         </div>
         <div className="flex justify-center">
-          <div className="flex w-full bg-white border border-gray-200 rounded-md min-w-80 p-7">
+          <div className="min-w-80 flex w-full rounded-md border border-gray-200 bg-white p-7">
             <div className="w-full">
               <div className="flex">
                 <div className="w-full">
@@ -263,7 +263,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </Dropdown>
                 </div>
               </div>
-              <div className="border-t border-gray-200 my-7" />
+              <div className="my-7 border-t border-gray-200" />
               <div>
                 <Label>{t("do_this")}</Label>
                 <Controller
@@ -327,7 +327,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 )}
               </div>
               {isPhoneNumberNeeded && (
-                <div className="p-4 mt-5 rounded-md bg-gray-50">
+                <div className="mt-5 rounded-md bg-gray-50 p-4">
                   <Label>{t("custom_phone_number")}</Label>
                   <PhoneInput<FormValues>
                     control={form.control}
@@ -346,7 +346,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </div>
               )}
               {isEmailAddressNeeded && (
-                <div className="p-4 mt-5 rounded-md bg-gray-50">
+                <div className="mt-5 rounded-md bg-gray-50 p-4">
                   <EmailField
                     required
                     label={t("email_address")}
@@ -379,11 +379,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 />
               </div>
               {isCustomReminderBodyNeeded && (
-                <div className="p-4 pt-2 mt-2 rounded-md bg-gray-50 md:p-6 md:pt-4">
+                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-2 md:p-6 md:pt-4">
                   {isEmailSubjectNeeded && (
                     <div className="mb-5">
-                      <div className="flex items-center mb-2">
-                        <Label className="flex-none mb-0">{t("subject")}</Label>
+                      <div className="mb-2 flex items-center">
+                        <Label className="mb-0 flex-none">{t("subject")}</Label>
                         <div className="flex-grow text-right">
                           <AddVariablesDropdown addVariable={addVariable} isEmailSubject={true} />
                         </div>
@@ -405,13 +405,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         )}
                     </div>
                   )}
-                  <div className="flex items-center mb-2">
-                    <Label className="flex-none mb-0">
+                  <div className="mb-2 flex items-center">
+                    <Label className="mb-0 flex-none">
                       {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
                     </Label>
-                    <div className="flex-grow text-right">
-                      <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
-                    </div>
                   </div>
                   {form.formState.errors.steps &&
                     form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody && (
@@ -420,23 +417,23 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       </p>
                     )}
                   <div className="mt-2">
-                    <TextEditor form={form} addVariable={addVariable} stepNumber={step.stepNumber}/>
+                    <TextEditor form={form} addVariable={addVariable} stepNumber={step.stepNumber} />
                   </div>
                   <div className="mt-3 ">
                     <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
-                      <div className="flex mt-2 text-sm text-gray-600">
+                      <div className="mt-2 flex text-sm text-gray-600">
                         <Icon.FiHelpCircle className="mt-[3px] mr-2 h-3 w-3" />
                         <p className="text-left">{t("using_additional_inputs_as_variables")}</p>
                       </div>
                     </button>
                   </div>
-                  <div className="mt-2"></div>
+                  <div className="mt-2" />
                 </div>
               )}
               {form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && (
                 <Button
                   type="button"
-                  className="w-full mt-7"
+                  className="mt-7 w-full"
                   onClick={() => {
                     let isEmpty = false;
                     if (!form.getValues(`steps.${step.stepNumber - 1}.sendTo`) && isPhoneNumberNeeded) {
@@ -487,7 +484,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     } else {
                       const isNumberValid =
                         form.formState.errors.steps &&
-                          form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo
+                        form.formState?.errors?.steps[step.stepNumber - 1]?.sendTo
                           ? false
                           : true;
 
@@ -531,21 +528,21 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           <DialogContent useOwnActionButtons type="creation" className="sm:max-w-[610px] md:h-[570px]">
             <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
               <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
-              <div className="p-3 rounded-md mb-7 mt-7 bg-gray-50 sm:p-4">
-                <p className="font-medium test-sm">{t("format")}</p>
-                <ul className="mt-2 ml-5 text-gray-900 list-disc">
+              <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
+                <p className="test-sm font-medium">{t("format")}</p>
+                <ul className="mt-2 ml-5 list-disc text-gray-900">
                   <li>{t("uppercase_for_letters")}</li>
                   <li>{t("replace_whitespaces_underscores")}</li>
                   <li>{t("ignore_special_characters")}</li>
                 </ul>
                 <div className="mt-6">
-                  <p className="w-full font-medium test-sm">{t("example_1")}</p>
-                  <div className="grid grid-cols-12 mt-2">
-                    <div className="col-span-5 mr-2 text-gray-600 test-sm">{t("additional_input_label")}</div>
-                    <div className="col-span-7 text-gray-900 test-sm">{t("company_size")}</div>
-                    <div className="w-full col-span-5 text-gray-600 test-sm">{t("variable")}</div>
+                  <p className="test-sm w-full font-medium">{t("example_1")}</p>
+                  <div className="mt-2 grid grid-cols-12">
+                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
+                    <div className="test-sm col-span-7 text-gray-900">{t("company_size")}</div>
+                    <div className="test-sm col-span-5 w-full text-gray-600">{t("variable")}</div>
 
-                    <div className="col-span-7 text-gray-900 break-words test-sm">
+                    <div className="test-sm col-span-7 break-words text-gray-900">
                       {" "}
                       {`{${t("company_size")
                         .replace(/[^a-zA-Z0-9 ]/g, "")
@@ -556,12 +553,12 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </div>
                 </div>
                 <div className="mt-6">
-                  <p className="w-full font-medium test-sm">{t("example_2")}</p>
-                  <div className="grid grid-cols-12 mt-2">
-                    <div className="col-span-5 mr-2 text-gray-600 test-sm">{t("additional_input_label")}</div>
-                    <div className="col-span-7 text-gray-900 test-sm">{t("what_help_needed")}</div>
-                    <div className="col-span-5 text-gray-600 test-sm">{t("variable")}</div>
-                    <div className="col-span-7 text-gray-900 break-words test-sm">
+                  <p className="test-sm w-full font-medium">{t("example_2")}</p>
+                  <div className="mt-2 grid grid-cols-12">
+                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
+                    <div className="test-sm col-span-7 text-gray-900">{t("what_help_needed")}</div>
+                    <div className="test-sm col-span-5 text-gray-600">{t("variable")}</div>
+                    <div className="test-sm col-span-7 break-words text-gray-900">
                       {" "}
                       {`{${t("what_help_needed")
                         .replace(/[^a-zA-Z0-9 ]/g, "")

From 8b72efbe8a4828f9cdb26e0003e09b388b8faee3 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Mon, 24 Oct 2022 13:17:46 +0200
Subject: [PATCH 08/43] fix bg on focus

---
 .../ee/workflows/components/v2/AddVariablesDropdown.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx b/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
index 0c865996dc4528..89ecc1348aad2c 100644
--- a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
+++ b/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
@@ -28,7 +28,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
 
   return (
     <Dropdown>
-      <DropdownMenuTrigger className="focus:bg-50 pt-[6px]">
+      <DropdownMenuTrigger className="pt-[6px] focus:bg-gray-50">
         <div className="flex items-center ">
           {t("add_variable")}
           <Icon.FiChevronDown className="ml-1 h-4 w-4" />

From 9512369b9fc4f18f15bb3d907ffe898d660b5788 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Mon, 24 Oct 2022 13:29:39 +0200
Subject: [PATCH 09/43] small design fixes

---
 .../workflows/components/v2/WorkflowStepContainer.tsx  | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 257f8250f20553..e0a90b9f94656b 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -381,8 +381,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               {isCustomReminderBodyNeeded && (
                 <div className="mt-2 rounded-md bg-gray-50 p-4 pt-2 md:p-6 md:pt-4">
                   {isEmailSubjectNeeded && (
-                    <div className="mb-5">
-                      <div className="mb-2 flex items-center">
+                    <div className="mb-6">
+                      <div className="flex items-center">
                         <Label className="mb-0 flex-none">{t("subject")}</Label>
                         <div className="flex-grow text-right">
                           <AddVariablesDropdown addVariable={addVariable} isEmailSubject={true} />
@@ -405,8 +405,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         )}
                     </div>
                   )}
-                  <div className="mb-2 flex items-center">
-                    <Label className="mb-0 flex-none">
+                  <div className="mb-2 flex items-center pb-[1.5px]">
+                    <Label className="mb-0 flex-none ">
                       {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
                     </Label>
                   </div>
@@ -416,7 +416,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         {form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody?.message || ""}
                       </p>
                     )}
-                  <div className="mt-2">
+                  <div>
                     <TextEditor form={form} addVariable={addVariable} stepNumber={step.stepNumber} />
                   </div>
                   <div className="mt-3 ">

From 4c71208fa14889556a68b06385a4a41d0eb6ad3c Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Mon, 24 Oct 2022 15:40:23 +0200
Subject: [PATCH 10/43] improve design

---
 .../components/v2/TextEditor/TextEditor.tsx      |  4 ++--
 .../components/v2/TextEditor/styles.css          | 16 +++++++++++-----
 .../components/v2/WorkflowStepContainer.tsx      |  3 ++-
 packages/ui/v2/core/form/fields.tsx              |  6 +++---
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
index 243b882804a656..0845bdc4dab67f 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
@@ -32,8 +32,8 @@ function TextEditor(props: TextEditorProps) {
     <div>
       <Editor
         editorState={editorState}
-        wrapperClassName="border border-gray-300 rounded-md"
-        editorClassName=" p-3 -mt-3 bg-white rounded-md text-sm"
+        wrapperClassName="border border-gray-300 rounded-md "
+        editorClassName=" p-3 -mt-3 bg-white rounded-md text-sm hover:border-gray-400"
         onEditorStateChange={setEditorState}
         onChange={() => {
           props.form.setValue(
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/styles.css b/packages/features/ee/workflows/components/v2/TextEditor/styles.css
index 06b1cad035d911..5805619d4cc842 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/styles.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/styles.css
@@ -1,5 +1,3 @@
-
-
 .rdw-option-wrapper {
   border: 1px solid #F1F1F1;
   padding: 5px;
@@ -219,6 +217,17 @@
   font-sixe: 5px;
 }
 
+.rdw-editor-wrapper:hover {
+  border: 1px solid #9CA3AF;
+}
+
+.rdw-editor-main {
+  height: 100%;
+  max-height: 200px;
+  overflow: scroll;
+  box-sizing: border-box;
+}
+
 /**
  * Draft v0.9.1
  *
@@ -230,6 +239,3 @@
  * of patent rights can be found in the PATENTS file in the same directory.
  */
 .DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}
-
-/*# sourceMappingURL=main.css.map*/
-
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index e0a90b9f94656b..a0fadc6b1e7ea5 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -393,7 +393,8 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                           emailSubjectFormRef?.(e);
                           refEmailSubject.current = e;
                         }}
-                        className="my-0"
+                        rows={1}
+                        className="my-0 focus:ring-transparent"
                         required
                         {...restEmailSubjectForm}
                       />
diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/v2/core/form/fields.tsx
index 0a0f6464eb2fdd..32184644a6db32 100644
--- a/packages/ui/v2/core/form/fields.tsx
+++ b/packages/ui/v2/core/form/fields.tsx
@@ -281,7 +281,7 @@ export const PasswordField = forwardRef<HTMLInputElement, InputFieldProps>(funct
         addOnSuffix={
           <Tooltip content={textLabel}>
             <button
-              className="absolute right-3 bottom-0 h-9 text-gray-900"
+              className="absolute bottom-0 right-3 h-9 text-gray-900"
               type="button"
               onClick={() => toggleIsPasswordVisible()}>
               {isPasswordVisible ? (
@@ -334,8 +334,8 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       ref={ref}
       {...props}
       className={classNames(
-        "block w-full rounded-md border border-gray-300 py-2 px-3 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm",
-        props.className
+        props.className,
+        "block w-full rounded-md border border-gray-300 py-2 px-3 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm"
       )}
     />
   );

From dd73a2f885d7bad115d87adc77dcf3f463047f7b Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Mon, 24 Oct 2022 17:59:07 +0200
Subject: [PATCH 11/43] show error message for no input

---
 .../components/v2/TextEditor/TextEditor.tsx   | 10 ++++--
 .../components/v2/WorkflowStepContainer.tsx   |  4 +--
 .../ee/workflows/pages/v2/workflow.tsx        | 36 ++++++++++++-------
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
index 0845bdc4dab67f..a983ac3bfc5ed4 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
@@ -36,11 +36,15 @@ function TextEditor(props: TextEditorProps) {
         editorClassName=" p-3 -mt-3 bg-white rounded-md text-sm hover:border-gray-400"
         onEditorStateChange={setEditorState}
         onChange={() => {
+          props.form.clearErrors(`steps.${props.stepNumber - 1}.reminderBody`);
+          const value = draftToHtml(convertToRaw(editorState.getCurrentContent()))
+            .replaceAll("&lt;", "<")
+            .replaceAll("&gt;", ">")
+            .replaceAll("<p></p>", "<br/>");
+
           props.form.setValue(
             `steps.${props.stepNumber - 1}.reminderBody`,
-            draftToHtml(convertToRaw(editorState.getCurrentContent()))
-              .replaceAll("&lt;", "<")
-              .replaceAll("&gt;", ">")
+            value.trim() !== "<br/>" ? value : null
           );
         }}
         toolbarCustomButtons={[
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index a0fadc6b1e7ea5..9bb41467be8ab0 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -411,15 +411,13 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
                     </Label>
                   </div>
+                  <TextEditor form={form} addVariable={addVariable} stepNumber={step.stepNumber} />
                   {form.formState.errors.steps &&
                     form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody && (
                       <p className="mt-1 text-sm text-red-500">
                         {form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody?.message || ""}
                       </p>
                     )}
-                  <div>
-                    <TextEditor form={form} addVariable={addVariable} stepNumber={step.stepNumber} />
-                  </div>
                   <div className="mt-3 ">
                     <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
                       <div className="mt-2 flex text-sm text-gray-600">
diff --git a/packages/features/ee/workflows/pages/v2/workflow.tsx b/packages/features/ee/workflows/pages/v2/workflow.tsx
index 838e20eecb762d..470080dab74c21 100644
--- a/packages/features/ee/workflows/pages/v2/workflow.tsx
+++ b/packages/features/ee/workflows/pages/v2/workflow.tsx
@@ -160,30 +160,42 @@ function WorkflowPage() {
       form={form}
       handleSubmit={async (values) => {
         let activeOnEventTypeIds: number[] = [];
+        let isEmpty = false;
 
         values.steps.forEach((step) => {
+          const isBodyEmpty = step.template === WorkflowTemplates.CUSTOM && !step.reminderBody;
+          if (isBodyEmpty) {
+            form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {
+              type: "custom",
+              message: t("no_input"),
+            });
+          }
+
           if (step.reminderBody) {
             step.reminderBody = translateVariablesToEnglish(step.reminderBody, { locale: i18n.language, t });
           }
           if (step.emailSubject) {
             step.emailSubject = translateVariablesToEnglish(step.emailSubject, { locale: i18n.language, t });
           }
+          isEmpty = !isEmpty ? isBodyEmpty : isEmpty;
         });
 
-        if (values.activeOn) {
-          activeOnEventTypeIds = values.activeOn.map((option) => {
-            return parseInt(option.value, 10);
+        if (!isEmpty) {
+          if (values.activeOn) {
+            activeOnEventTypeIds = values.activeOn.map((option) => {
+              return parseInt(option.value, 10);
+            });
+          }
+          updateMutation.mutate({
+            id: parseInt(router.query.workflow as string, 10),
+            name: values.name,
+            activeOn: activeOnEventTypeIds,
+            steps: values.steps,
+            trigger: values.trigger,
+            time: values.time || null,
+            timeUnit: values.timeUnit || null,
           });
         }
-        updateMutation.mutate({
-          id: parseInt(router.query.workflow as string, 10),
-          name: values.name,
-          activeOn: activeOnEventTypeIds,
-          steps: values.steps,
-          trigger: values.trigger,
-          time: values.time || null,
-          timeUnit: values.timeUnit || null,
-        });
       }}>
       <Shell
         backPath="/workflows"

From 2a133acfe8533712cb82797ef55c271308c675b3 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 25 Oct 2022 10:42:05 +0200
Subject: [PATCH 12/43] text editor only for email body

---
 .../components/v2/WorkflowStepContainer.tsx   | 40 ++++++++++++++++---
 .../ee/workflows/pages/v2/workflow.tsx        |  2 +
 packages/ui/v2/core/form/fields.tsx           |  4 +-
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 9bb41467be8ab0..26c3b3354b6c7a 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -406,12 +406,40 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         )}
                     </div>
                   )}
-                  <div className="mb-2 flex items-center pb-[1.5px]">
-                    <Label className="mb-0 flex-none ">
-                      {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
-                    </Label>
-                  </div>
-                  <TextEditor form={form} addVariable={addVariable} stepNumber={step.stepNumber} />
+
+                  {step.action !== WorkflowActions.SMS_ATTENDEE &&
+                  step.action !== WorkflowActions.SMS_NUMBER ? (
+                    <>
+                      <div className="mb-2 flex items-center pb-[1.5px]">
+                        <Label className="mb-0 flex-none ">
+                          {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
+                        </Label>
+                      </div>
+                      <TextEditor form={form} addVariable={addVariable} stepNumber={step.stepNumber} />
+                    </>
+                  ) : (
+                    <>
+                      <div className="flex items-center">
+                        <Label className="mb-0 flex-none">
+                          {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
+                        </Label>
+                        <div className="flex-grow text-right">
+                          <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
+                        </div>
+                      </div>
+                      <TextArea
+                        ref={(e) => {
+                          reminderBodyFormRef?.(e);
+                          refReminderBody.current = e;
+                        }}
+                        className="my-0 h-24"
+                        required
+                        {...restReminderBodyForm}
+                      />
+                    </>
+                  )}
+                  <Button onClick={() => console.log(form.getValues())}>{t("test")}</Button>
+
                   {form.formState.errors.steps &&
                     form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody && (
                       <p className="mt-1 text-sm text-red-500">
diff --git a/packages/features/ee/workflows/pages/v2/workflow.tsx b/packages/features/ee/workflows/pages/v2/workflow.tsx
index 470080dab74c21..a99358dbe5d116 100644
--- a/packages/features/ee/workflows/pages/v2/workflow.tsx
+++ b/packages/features/ee/workflows/pages/v2/workflow.tsx
@@ -56,6 +56,7 @@ const formSchema = z.object({
       sendTo: z
         .string()
         .refine((val) => isValidPhoneNumber(val) || val.includes("@"))
+        .optional()
         .nullable(),
     })
     .array(),
@@ -163,6 +164,7 @@ function WorkflowPage() {
         let isEmpty = false;
 
         values.steps.forEach((step) => {
+          console.log("reminderbody: " + step.reminderBody);
           const isBodyEmpty = step.template === WorkflowTemplates.CUSTOM && !step.reminderBody;
           if (isBodyEmpty) {
             form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {
diff --git a/packages/ui/v2/core/form/fields.tsx b/packages/ui/v2/core/form/fields.tsx
index 32184644a6db32..1d032a00160ba5 100644
--- a/packages/ui/v2/core/form/fields.tsx
+++ b/packages/ui/v2/core/form/fields.tsx
@@ -334,8 +334,8 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function
       ref={ref}
       {...props}
       className={classNames(
-        props.className,
-        "block w-full rounded-md border border-gray-300 py-2 px-3 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm"
+        "block w-full rounded-md border border-gray-300 py-2 px-3 hover:border-gray-400 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1 sm:text-sm",
+        props.className
       )}
     />
   );

From afecf0807e409a01b3625722acbde63cac3cd4a8 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 25 Oct 2022 10:43:37 +0200
Subject: [PATCH 13/43] remove test button

---
 .../ee/workflows/components/v2/WorkflowStepContainer.tsx        | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 26c3b3354b6c7a..2418ba9d1b6bc5 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -438,8 +438,6 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       />
                     </>
                   )}
-                  <Button onClick={() => console.log(form.getValues())}>{t("test")}</Button>
-
                   {form.formState.errors.steps &&
                     form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody && (
                       <p className="mt-1 text-sm text-red-500">

From 46c8b87ac9bddf5acff49f04f125a101010bfb9a Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 25 Oct 2022 11:06:24 +0200
Subject: [PATCH 14/43] code clean up

---
 .../components/v2/TextEditor/TextEditor.tsx   | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
index a983ac3bfc5ed4..fd8f88f2fd8a48 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
@@ -17,43 +17,34 @@ const Editor = dynamic<EditorProps>(() => import("react-draft-wysiwyg").then((mo
 const htmlToDraft = typeof window === "object" && require("html-to-draftjs").default;
 
 type TextEditorProps = {
-  addVariable: (isEmailSubject: boolean, variable: string) => void;
   form: UseFormReturn<FormValues>;
   stepNumber: number;
 };
 
-function TextEditor(props: TextEditorProps) {
-  const contentBlock = htmlToDraft(props.form.getValues(`steps.${props.stepNumber - 1}.reminderBody`) || "");
+function TextEditor({ form, stepNumber }: TextEditorProps) {
+  const contentBlock = htmlToDraft(form.getValues(`steps.${stepNumber - 1}.reminderBody`) || "");
   const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
 
   const [editorState, setEditorState] = useState(EditorState.createWithContent(contentState));
 
   return (
-    <div>
+    <>
       <Editor
         editorState={editorState}
         wrapperClassName="border border-gray-300 rounded-md "
         editorClassName=" p-3 -mt-3 bg-white rounded-md text-sm hover:border-gray-400"
         onEditorStateChange={setEditorState}
         onChange={() => {
-          props.form.clearErrors(`steps.${props.stepNumber - 1}.reminderBody`);
+          form.clearErrors(`steps.${stepNumber - 1}.reminderBody`);
           const value = draftToHtml(convertToRaw(editorState.getCurrentContent()))
             .replaceAll("&lt;", "<")
             .replaceAll("&gt;", ">")
             .replaceAll("<p></p>", "<br/>");
 
-          props.form.setValue(
-            `steps.${props.stepNumber - 1}.reminderBody`,
-            value.trim() !== "<br/>" ? value : null
-          );
+          form.setValue(`steps.${stepNumber - 1}.reminderBody`, value.trim() !== "<br/>" ? value : null);
         }}
         toolbarCustomButtons={[
-          <CustomOption
-            key={props.stepNumber}
-            editorState={editorState}
-            setEditorState={setEditorState}
-            addVariable={props.addVariable}
-          />,
+          <AddVariablesOption key={stepNumber} editorState={editorState} setEditorState={setEditorState} />,
         ]}
         toolbar={{
           options: ["inline", "fontSize", "list"],
@@ -66,17 +57,16 @@ function TextEditor(props: TextEditorProps) {
           },
         }}
       />
-    </div>
+    </>
   );
 }
 
-type Props = {
+type AddVariablesProps = {
   editorState: EditorState;
   setEditorState: Dispatch<SetStateAction<EditorState>>;
-  addVariable: (isEmailSubject: boolean, variable: string) => void;
 };
 
-function CustomOption({ editorState, setEditorState }: Props) {
+function AddVariablesOption({ editorState, setEditorState }: AddVariablesProps) {
   const addVariable = (isEmailSubject: boolean, variable: string) => {
     const contentState = Modifier.replaceText(
       editorState.getCurrentContent(),

From 1e28855f77b03dba95c9c9301356de84c3f38464 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 25 Oct 2022 11:13:14 +0200
Subject: [PATCH 15/43] code clean up

---
 .../ee/workflows/components/v2/WorkflowStepContainer.tsx         | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 2418ba9d1b6bc5..7647249c0ad774 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -452,7 +452,6 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       </div>
                     </button>
                   </div>
-                  <div className="mt-2" />
                 </div>
               )}
               {form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && (

From 76c40f6569d1c872f43058caca525e98a984b18d Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 25 Oct 2022 11:17:20 +0200
Subject: [PATCH 16/43] code clean up

---
 .../ee/workflows/components/v2/WorkflowStepContainer.tsx        | 2 +-
 packages/features/ee/workflows/pages/v2/workflow.tsx            | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 7647249c0ad774..5647f0e4d9ce39 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -415,7 +415,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                           {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
                         </Label>
                       </div>
-                      <TextEditor form={form} addVariable={addVariable} stepNumber={step.stepNumber} />
+                      <TextEditor form={form} stepNumber={step.stepNumber} />
                     </>
                   ) : (
                     <>
diff --git a/packages/features/ee/workflows/pages/v2/workflow.tsx b/packages/features/ee/workflows/pages/v2/workflow.tsx
index a99358dbe5d116..d59040b3732e1f 100644
--- a/packages/features/ee/workflows/pages/v2/workflow.tsx
+++ b/packages/features/ee/workflows/pages/v2/workflow.tsx
@@ -164,7 +164,6 @@ function WorkflowPage() {
         let isEmpty = false;
 
         values.steps.forEach((step) => {
-          console.log("reminderbody: " + step.reminderBody);
           const isBodyEmpty = step.template === WorkflowTemplates.CUSTOM && !step.reminderBody;
           if (isBodyEmpty) {
             form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {

From 432e667c14f7b1b88a1d93f4a4cbb289376e1466 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 25 Oct 2022 11:45:36 +0200
Subject: [PATCH 17/43] fix that added variables weren't saved

---
 .../components/v2/TextEditor/TextEditor.tsx    | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
index fd8f88f2fd8a48..d1218e03271911 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
@@ -44,7 +44,13 @@ function TextEditor({ form, stepNumber }: TextEditorProps) {
           form.setValue(`steps.${stepNumber - 1}.reminderBody`, value.trim() !== "<br/>" ? value : null);
         }}
         toolbarCustomButtons={[
-          <AddVariablesOption key={stepNumber} editorState={editorState} setEditorState={setEditorState} />,
+          <AddVariablesOption
+            key={stepNumber}
+            form={form}
+            stepNumber={stepNumber}
+            editorState={editorState}
+            setEditorState={setEditorState}
+          />,
         ]}
         toolbar={{
           options: ["inline", "fontSize", "list"],
@@ -64,9 +70,11 @@ function TextEditor({ form, stepNumber }: TextEditorProps) {
 type AddVariablesProps = {
   editorState: EditorState;
   setEditorState: Dispatch<SetStateAction<EditorState>>;
+  form: UseFormReturn<FormValues>;
+  stepNumber: number;
 };
 
-function AddVariablesOption({ editorState, setEditorState }: AddVariablesProps) {
+function AddVariablesOption({ editorState, setEditorState, form, stepNumber }: AddVariablesProps) {
   const addVariable = (isEmailSubject: boolean, variable: string) => {
     const contentState = Modifier.replaceText(
       editorState.getCurrentContent(),
@@ -74,7 +82,11 @@ function AddVariablesOption({ editorState, setEditorState }: AddVariablesProps)
       `{${variable.toUpperCase().replace(/ /g, "_")}}`,
       editorState.getCurrentInlineStyle()
     );
-    setEditorState(EditorState.push(editorState, contentState, "insert-characters"));
+    const newEditorState = EditorState.push(editorState, contentState, "insert-characters");
+    setEditorState(newEditorState);
+
+    const value = draftToHtml(convertToRaw(newEditorState.getCurrentContent()));
+    form.setValue(`steps.${stepNumber - 1}.reminderBody`, value);
   };
 
   return (

From 306aee4a498985c43b8af29ad22651e3bf06c7e7 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 25 Oct 2022 12:00:40 +0200
Subject: [PATCH 18/43] fix import

---
 .../ee/workflows/components/v2/TextEditor/TextEditor.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
index d1218e03271911..123a78de76dbb8 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { EditorState, Modifier, ContentState, convertToRaw } from "draft-js";
 import draftToHtml from "draftjs-to-html";
-import { FormValues } from "ee/workflows/pages/v2/workflow";
 import dynamic from "next/dynamic";
 import { useState, Dispatch, SetStateAction } from "react";
 import { EditorProps } from "react-draft-wysiwyg";
 import { UseFormReturn } from "react-hook-form";
 
+import { FormValues } from "../../../pages/v2/workflow";
 import { AddVariablesDropdown } from "../AddVariablesDropdown";
 import "./styles.css";
 

From 35f2c9cc0dc0d24cc4d4a2fa94107f2f60beb60e Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Thu, 27 Oct 2022 17:46:30 +0200
Subject: [PATCH 19/43] first version of editor

---
 apps/web/package.json                         |   2 +
 .../components/v2/TextEditor/Editor.tsx       |  75 ++
 .../components/v2/TextEditor/ExampleTheme.js  |  69 ++
 .../images/icons/arrow-clockwise.svg          |   4 +
 .../images/icons/arrow-counterclockwise.svg   |   4 +
 .../images/icons/chat-square-quote.svg        |   4 +
 .../TextEditor/images/icons/chevron-down.svg  |   4 +
 .../v2/TextEditor/images/icons/code.svg       |   3 +
 .../TextEditor/images/icons/journal-code.svg  |   5 +
 .../TextEditor/images/icons/journal-text.svg  |   5 +
 .../v2/TextEditor/images/icons/justify.svg    |   3 +
 .../v2/TextEditor/images/icons/link.svg       |   4 +
 .../v2/TextEditor/images/icons/list-ol.svg    |   4 +
 .../v2/TextEditor/images/icons/list-ul.svg    |   3 +
 .../images/icons/text-paragraph.svg           |   3 +
 .../v2/TextEditor/plugins/AutoLinkPlugin.js   |  34 +
 .../TextEditor/plugins/CodeHighlightPlugin.js |  11 +
 .../plugins/ListMaxIndentLevelPlugin.js       |  68 ++
 .../v2/TextEditor/plugins/ToolbarPlugin.js    | 790 ++++++++++++++++++
 .../v2/TextEditor/plugins/TreeViewPlugin.js   |  16 +
 .../components/v2/TextEditor/stylesEditor.css | 758 +++++++++++++++++
 .../components/v2/WorkflowStepContainer.tsx   |  60 +-
 22 files changed, 1900 insertions(+), 29 deletions(-)
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.js
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-clockwise.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-counterclockwise.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/chat-square-quote.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/chevron-down.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/code.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-code.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-text.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/justify.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/link.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/list-ol.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/list-ul.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/text-paragraph.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.js
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.js
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.js
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.js
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.js
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css

diff --git a/apps/web/package.json b/apps/web/package.json
index cbc9d3fea763ee..17833c429b9c91 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -43,6 +43,7 @@
     "@heroicons/react": "^1.0.6",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2.9.7",
+    "@lexical/react": "^0.5.0",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@next/bundle-analyzer": "^12.2.5",
     "@radix-ui/react-avatar": "^1.0.0",
@@ -79,6 +80,7 @@
     "ics": "^2.37.0",
     "jimp": "^0.16.1",
     "kbar": "^0.1.0-beta.36",
+    "lexical": "^0.5.0",
     "libphonenumber-js": "^1.10.12",
     "lodash": "^4.17.21",
     "lottie-react": "^2.3.1",
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
new file mode 100644
index 00000000000000..8ac319b2cb026d
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
@@ -0,0 +1,75 @@
+import ExampleTheme from "./ExampleTheme";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import TreeViewPlugin from "./plugins/TreeViewPlugin";
+import ToolbarPlugin from "./plugins/ToolbarPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { TRANSFORMERS } from "@lexical/markdown";
+
+import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
+import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
+import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
+
+import "./stylesEditor.css"
+
+function Placeholder() {
+  return <div className="editor-placeholder">Enter some rich text...</div>;
+}
+
+const editorConfig = {
+  // The editor theme
+  theme: ExampleTheme,
+  // Handling of errors during update
+  onError(error) {
+    throw error;
+  },
+  // Any custom nodes go here
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode
+  ]
+};
+
+export default function Editor() {
+  return (
+    <LexicalComposer initialConfig={editorConfig}>
+      <div className="editor-container">
+        <ToolbarPlugin />
+        <div className="editor-inner">
+          <RichTextPlugin
+            contentEditable={<ContentEditable className="editor-input" />}
+            placeholder={<Placeholder />}
+          />
+          <HistoryPlugin />
+          <TreeViewPlugin />
+          <AutoFocusPlugin />
+          <CodeHighlightPlugin />
+          <ListPlugin />
+          <LinkPlugin />
+          <AutoLinkPlugin />
+          <ListMaxIndentLevelPlugin maxDepth={7} />
+          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.js b/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.js
new file mode 100644
index 00000000000000..e55f7e4752a3b5
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.js
@@ -0,0 +1,69 @@
+const exampleTheme = {
+  ltr: "ltr",
+  rtl: "rtl",
+  placeholder: "editor-placeholder",
+  paragraph: "editor-paragraph",
+  quote: "editor-quote",
+  heading: {
+    h1: "editor-heading-h1",
+    h2: "editor-heading-h2",
+    h3: "editor-heading-h3",
+    h4: "editor-heading-h4",
+    h5: "editor-heading-h5"
+  },
+  list: {
+    nested: {
+      listitem: "editor-nested-listitem"
+    },
+    ol: "editor-list-ol",
+    ul: "editor-list-ul",
+    listitem: "editor-listitem"
+  },
+  image: "editor-image",
+  link: "editor-link",
+  text: {
+    bold: "editor-text-bold",
+    italic: "editor-text-italic",
+    overflowed: "editor-text-overflowed",
+    hashtag: "editor-text-hashtag",
+    underline: "editor-text-underline",
+    strikethrough: "editor-text-strikethrough",
+    underlineStrikethrough: "editor-text-underlineStrikethrough",
+    code: "editor-text-code"
+  },
+  code: "editor-code",
+  codeHighlight: {
+    atrule: "editor-tokenAttr",
+    attr: "editor-tokenAttr",
+    boolean: "editor-tokenProperty",
+    builtin: "editor-tokenSelector",
+    cdata: "editor-tokenComment",
+    char: "editor-tokenSelector",
+    class: "editor-tokenFunction",
+    "class-name": "editor-tokenFunction",
+    comment: "editor-tokenComment",
+    constant: "editor-tokenProperty",
+    deleted: "editor-tokenProperty",
+    doctype: "editor-tokenComment",
+    entity: "editor-tokenOperator",
+    function: "editor-tokenFunction",
+    important: "editor-tokenVariable",
+    inserted: "editor-tokenSelector",
+    keyword: "editor-tokenAttr",
+    namespace: "editor-tokenVariable",
+    number: "editor-tokenProperty",
+    operator: "editor-tokenOperator",
+    prolog: "editor-tokenComment",
+    property: "editor-tokenProperty",
+    punctuation: "editor-tokenPunctuation",
+    regex: "editor-tokenVariable",
+    selector: "editor-tokenSelector",
+    string: "editor-tokenSelector",
+    symbol: "editor-tokenProperty",
+    tag: "editor-tokenProperty",
+    url: "editor-tokenOperator",
+    variable: "editor-tokenVariable"
+  }
+};
+
+export default exampleTheme;
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-clockwise.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-clockwise.svg
new file mode 100644
index 00000000000000..4b36c366a4b85e
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-clockwise.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-counterclockwise.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-counterclockwise.svg
new file mode 100644
index 00000000000000..cc71a755e4d229
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-counterclockwise.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/chat-square-quote.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/chat-square-quote.svg
new file mode 100644
index 00000000000000..0f220833b8eb28
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/chat-square-quote.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-quote" viewBox="0 0 16 16">
+  <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
+  <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/chevron-down.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/chevron-down.svg
new file mode 100644
index 00000000000000..73caea1b4b9bc2
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/chevron-down.svg
@@ -0,0 +1,4 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/code.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/code.svg
new file mode 100644
index 00000000000000..bc0550654765c0
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/code.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
+  <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-code.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-code.svg
new file mode 100644
index 00000000000000..0632fd0880777c
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-code.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/>
+  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
+  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-text.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-text.svg
new file mode 100644
index 00000000000000..5ec74200dc8197
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-text.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
+  <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
+  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
+  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/justify.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/justify.svg
new file mode 100644
index 00000000000000..a003efc6edc020
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/justify.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/link.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/link.svg
new file mode 100644
index 00000000000000..fc4594c325da7a
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/link.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-link" viewBox="0 0 16 16">
+  <path d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z"/>
+  <path d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/list-ol.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/list-ol.svg
new file mode 100644
index 00000000000000..d728bd74c64759
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/list-ol.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ol" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5z"/>
+  <path d="M1.713 11.865v-.474H2c.217 0 .363-.137.363-.317 0-.185-.158-.31-.361-.31-.223 0-.367.152-.373.31h-.59c.016-.467.373-.787.986-.787.588-.002.954.291.957.703a.595.595 0 0 1-.492.594v.033a.615.615 0 0 1 .569.631c.003.533-.502.8-1.051.8-.656 0-1-.37-1.008-.794h.582c.008.178.186.306.422.309.254 0 .424-.145.422-.35-.002-.195-.155-.348-.414-.348h-.3zm-.004-4.699h-.604v-.035c0-.408.295-.844.958-.844.583 0 .96.326.96.756 0 .389-.257.617-.476.848l-.537.572v.03h1.054V9H1.143v-.395l.957-.99c.138-.142.293-.304.293-.508 0-.18-.147-.32-.342-.32a.33.33 0 0 0-.342.338v.041zM2.564 5h-.635V2.924h-.031l-.598.42v-.567l.629-.443h.635V5z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/list-ul.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/list-ul.svg
new file mode 100644
index 00000000000000..00b9841836c1f6
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/list-ul.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/text-paragraph.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/text-paragraph.svg
new file mode 100644
index 00000000000000..4b8dadf106d6b2
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/text-paragraph.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-paragraph" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.js
new file mode 100644
index 00000000000000..3475c917bcff34
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.js
@@ -0,0 +1,34 @@
+import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
+
+const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+
+const EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+
+const MATCHERS = [
+  (text) => {
+    const match = URL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: match[0]
+      }
+    );
+  },
+  (text) => {
+    const match = EMAIL_MATCHER.exec(text);
+    return (
+      match && {
+        index: match.index,
+        length: match[0].length,
+        text: match[0],
+        url: `mailto:${match[0]}`
+      }
+    );
+  }
+];
+
+export default function PlaygroundAutoLinkPlugin() {
+  return <AutoLinkPlugin matchers={MATCHERS} />;
+}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.js
new file mode 100644
index 00000000000000..f931805284173f
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.js
@@ -0,0 +1,11 @@
+import { registerCodeHighlighting } from "@lexical/code";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useEffect } from "react";
+
+export default function CodeHighlightPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+  return null;
+}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.js
new file mode 100644
index 00000000000000..657535e7593797
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.js
@@ -0,0 +1,68 @@
+import { $getListDepth, $isListItemNode, $isListNode } from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $getSelection,
+  $isElementNode,
+  $isRangeSelection,
+  INDENT_CONTENT_COMMAND,
+  COMMAND_PRIORITY_HIGH
+} from "lexical";
+import { useEffect } from "react";
+
+function getElementNodesInSelection(selection) {
+  const nodesInSelection = selection.getNodes();
+
+  if (nodesInSelection.length === 0) {
+    return new Set([
+      selection.anchor.getNode().getParentOrThrow(),
+      selection.focus.getNode().getParentOrThrow()
+    ]);
+  }
+
+  return new Set(
+    nodesInSelection.map((n) => ($isElementNode(n) ? n : n.getParentOrThrow()))
+  );
+}
+
+function isIndentPermitted(maxDepth) {
+  const selection = $getSelection();
+
+  if (!$isRangeSelection(selection)) {
+    return false;
+  }
+
+  const elementNodesInSelection = getElementNodesInSelection(selection);
+
+  let totalDepth = 0;
+
+  for (const elementNode of elementNodesInSelection) {
+    if ($isListNode(elementNode)) {
+      totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth);
+    } else if ($isListItemNode(elementNode)) {
+      const parent = elementNode.getParent();
+      if (!$isListNode(parent)) {
+        throw new Error(
+          "ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent."
+        );
+      }
+
+      totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
+    }
+  }
+
+  return totalDepth <= maxDepth;
+}
+
+export default function ListMaxIndentLevelPlugin({ maxDepth }) {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return editor.registerCommand(
+      INDENT_CONTENT_COMMAND,
+      () => !isIndentPermitted(maxDepth ?? 7),
+      COMMAND_PRIORITY_HIGH
+    );
+  }, [editor, maxDepth]);
+
+  return null;
+}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.js
new file mode 100644
index 00000000000000..4cacd2e7f3b8d1
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.js
@@ -0,0 +1,790 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  CAN_REDO_COMMAND,
+  CAN_UNDO_COMMAND,
+  REDO_COMMAND,
+  UNDO_COMMAND,
+  SELECTION_CHANGE_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  FORMAT_ELEMENT_COMMAND,
+  $getSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+  $getNodeByKey
+} from "lexical";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import {
+  $isParentElementRTL,
+  $wrapNodes,
+  $isAtNodeEnd
+} from "@lexical/selection";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  $isListNode,
+  ListNode
+} from "@lexical/list";
+import { createPortal } from "react-dom";
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode
+} from "@lexical/rich-text";
+import {
+  $createCodeNode,
+  $isCodeNode,
+  getDefaultCodeLanguage,
+  getCodeLanguages
+} from "@lexical/code";
+
+const LowPriority = 1;
+
+const supportedBlockTypes = new Set([
+  "paragraph",
+  "quote",
+  "code",
+  "h1",
+  "h2",
+]);
+
+const supportedListTypes = new Set([
+  "noList",
+  "ul",
+  "ol"
+]);
+
+const blockTypeToBlockName = {
+  h1: "Large Heading",
+  h2: "Small Heading",
+  h3: "Heading",
+  h4: "Heading",
+  h5: "Heading",
+  paragraph: "Normal",
+};
+
+const ListTypeToListName = {
+  ol: "Numbered List",
+  ul: "Bulleted List",
+  noList: "No List"
+};
+
+function Divider() {
+  return <div className="divider" />;
+}
+
+function positionEditorElement(editor, rect) {
+  if (rect === null) {
+    editor.style.opacity = "0";
+    editor.style.top = "-1000px";
+    editor.style.left = "-1000px";
+  } else {
+    editor.style.opacity = "1";
+    editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
+    editor.style.left = `${
+      rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2
+    }px`;
+  }
+}
+
+function FloatingLinkEditor({ editor }) {
+  const editorRef = useRef(null);
+  const inputRef = useRef(null);
+  const mouseDownRef = useRef(false);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [isEditMode, setEditMode] = useState(false);
+  const [lastSelection, setLastSelection] = useState(null);
+
+  const updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        setLinkUrl(parent.getURL());
+      } else if ($isLinkNode(node)) {
+        setLinkUrl(node.getURL());
+      } else {
+        setLinkUrl("");
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window.getSelection();
+    const activeElement = document.activeElement;
+
+    if (editorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+    if (
+      selection !== null &&
+      !nativeSelection.isCollapsed &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection.anchorNode)
+    ) {
+      const domRange = nativeSelection.getRangeAt(0);
+      let rect;
+      if (nativeSelection.anchorNode === rootElement) {
+        let inner = rootElement;
+        while (inner.firstElementChild != null) {
+          inner = inner.firstElementChild;
+        }
+        rect = inner.getBoundingClientRect();
+      } else {
+        rect = domRange.getBoundingClientRect();
+      }
+
+      if (!mouseDownRef.current) {
+        positionEditorElement(editorElem, rect);
+      }
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== "link-input") {
+      positionEditorElement(editorElem, null);
+      setLastSelection(null);
+      setEditMode(false);
+      setLinkUrl("");
+    }
+
+    return true;
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateLinkEditor();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateLinkEditor();
+          return true;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateLinkEditor();
+    });
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    if (isEditMode && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditMode]);
+
+  return (
+    <div ref={editorRef} className="link-editor">
+      {isEditMode ? (
+        <input
+          ref={inputRef}
+          className="link-input"
+          value={linkUrl}
+          onChange={(event) => {
+            setLinkUrl(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              if (lastSelection !== null) {
+                if (linkUrl !== "") {
+                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
+                }
+                setEditMode(false);
+              }
+            } else if (event.key === "Escape") {
+              event.preventDefault();
+              setEditMode(false);
+            }
+          }}
+        />
+      ) : (
+        <>
+          <div className="link-input">
+            <a href={linkUrl} target="_blank" rel="noopener noreferrer">
+              {linkUrl}
+            </a>
+            <div
+              className="link-edit"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                setEditMode(true);
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function Select({ onChange, className, options, value }) {
+  return (
+    <select className={className} onChange={onChange} value={value}>
+      <option hidden={true} value="" />
+      {options.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function getSelectedNode(selection) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+  }
+}
+
+function BlockOptionsDropdownList({
+  editor,
+  blockType,
+  toolbarRef,
+  setShowBlockOptionsDropDown
+}) {
+  const dropDownRef = useRef(null);
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (toolbar !== null && dropDown !== null) {
+      const { top, left } = toolbar.getBoundingClientRect();
+      dropDown.style.top = `${top + 40}px`;
+      dropDown.style.left = `${left}px`;
+    }
+  }, [dropDownRef, toolbarRef]);
+
+  useEffect(() => {
+    const dropDown = dropDownRef.current;
+    const toolbar = toolbarRef.current;
+
+    if (dropDown !== null && toolbar !== null) {
+      const handle = (event) => {
+        const target = event.target;
+
+        if (!dropDown.contains(target) && !toolbar.contains(target)) {
+          setShowBlockOptionsDropDown(false);
+        }
+      };
+      document.addEventListener("click", handle);
+
+      return () => {
+        document.removeEventListener("click", handle);
+      };
+    }
+  }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
+
+  const formatParagraph = () => {
+    if (blockType !== "paragraph") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createParagraphNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatLargeHeading = () => {
+    if (blockType !== "h1") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h1"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatSmallHeading = () => {
+    if (blockType !== "h2") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h2"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatBulletList = () => {
+    if (blockType !== "ul") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatNumberedList = () => {
+    if (blockType !== "ol") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatQuote = () => {
+    if (blockType !== "quote") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createQuoteNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatCode = () => {
+    if (blockType !== "code") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createCodeNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  return (
+    <div className="dropdown" ref={dropDownRef}>
+      <button className="item" onClick={formatParagraph}>
+        <span className="icon paragraph" />
+        <span className="text">Normal</span>
+        {blockType === "paragraph" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatLargeHeading}>
+        <span className="icon large-heading" />
+        <span className="text">Large Heading</span>
+        {blockType === "h1" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatSmallHeading}>
+        <span className="icon small-heading" />
+        <span className="text">Small Heading</span>
+        {blockType === "h2" && <span className="active" />}
+      </button>
+    </div>
+  );
+}
+
+function ListOptionsDropdownList({
+  editor,
+  listType,
+  toolbarRef,
+  setShowListOptionsDropDown
+}) {
+  const dropDownRef = useRef(null);
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (toolbar !== null && dropDown !== null) {
+      const { top, left } = toolbar.getBoundingClientRect();
+      dropDown.style.top = `${top + 40}px`;
+      dropDown.style.left = `${left}px`;
+    }
+  }, [dropDownRef, toolbarRef]);
+
+  useEffect(() => {
+    const dropDown = dropDownRef.current;
+    const toolbar = toolbarRef.current;
+
+    if (dropDown !== null && toolbar !== null) {
+      const handle = (event) => {
+        const target = event.target;
+
+        if (!dropDown.contains(target) && !toolbar.contains(target)) {
+          setShowListOptionsDropDown(false);
+        }
+      };
+      document.addEventListener("click", handle);
+
+      return () => {
+        document.removeEventListener("click", handle);
+      };
+    }
+  }, [dropDownRef, setShowListOptionsDropDown, toolbarRef]);
+
+
+  const formatBulletList = () => {
+    if (listType !== "ul") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowListOptionsDropDown(false);
+  };
+
+  const formatNumberedList = () => {
+    if (listType !== "ol") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowListOptionsDropDown(false);
+  };
+
+  return (
+    <div className="dropdown" ref={dropDownRef}>
+      <button className="item" onClick={formatBulletList}>
+
+        <span className="icon bullet-list" />
+        <span className="text">Bullet List</span>
+        {listType === "ul" && <span className="active" />}
+      </button>
+      <button className="item" onClick={formatNumberedList}>
+        <span className="icon numbered-list" />
+        <span className="text">Numbered List</span>
+        {listType === "ol" && <span className="active" />}
+      </button>
+      <button className="item">
+        <span className="icon numbered-list" />
+        <span className="text">No List</span>
+        {listType === "noList" && <span className="active" />}
+      </button>
+    </div>
+  );
+}
+
+export default function ToolbarPlugin() {
+  const [editor] = useLexicalComposerContext();
+  const toolbarRef = useRef(null);
+  const [canUndo, setCanUndo] = useState(false);
+  const [canRedo, setCanRedo] = useState(false);
+  const [blockType, setBlockType] = useState("paragraph");
+  const [listType, setListType] = useState("noList");
+
+  const [selectedElementKey, setSelectedElementKey] = useState(null);
+  const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(
+    false
+  );
+  const [showListOptionsDropDown, setShowListOptionsDropDown] = useState(
+    false
+  );
+  const [codeLanguage, setCodeLanguage] = useState("");
+  const [isRTL, setIsRTL] = useState(false);
+  const [isLink, setIsLink] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+  const [isStrikethrough, setIsStrikethrough] = useState(false);
+  const [isCode, setIsCode] = useState(false);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      const element =
+        anchorNode.getKey() === "root"
+          ? anchorNode
+          : anchorNode.getTopLevelElementOrThrow();
+      const elementKey = element.getKey();
+      const elementDOM = editor.getElementByKey(elementKey);
+      if (elementDOM !== null) {
+        setSelectedElementKey(elementKey);
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+          const type = parentList ? parentList.getTag() : element.getTag();
+          if(type === "ul" || type === "ol") {
+            setListType(type);
+          } else {
+            setBlockType(type);
+          }
+        } else {
+          const type = $isHeadingNode(element)
+            ? element.getTag()
+            : element.getType();
+            if(type === "ul" || type === "ol") {
+              setListType(type);
+            } else{
+              setBlockType(type);
+            }
+          if ($isCodeNode(element)) {
+            setCodeLanguage(element.getLanguage() || getDefaultCodeLanguage());
+          }
+        }
+      }
+      // Update text format
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsUnderline(selection.hasFormat("underline"));
+      setIsStrikethrough(selection.hasFormat("strikethrough"));
+      setIsCode(selection.hasFormat("code"));
+      setIsRTL($isParentElementRTL(selection));
+
+      // Update links
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          updateToolbar();
+          return false;
+        },
+        LowPriority
+      ),
+      editor.registerCommand(
+        CAN_UNDO_COMMAND,
+        (payload) => {
+          setCanUndo(payload);
+          return false;
+        },
+        LowPriority
+      ),
+      editor.registerCommand(
+        CAN_REDO_COMMAND,
+        (payload) => {
+          setCanRedo(payload);
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  const codeLanguges = useMemo(() => getCodeLanguages(), []);
+  const onCodeLanguageSelect = useCallback(
+    (e) => {
+      editor.update(() => {
+        if (selectedElementKey !== null) {
+          const node = $getNodeByKey(selectedElementKey);
+          if ($isCodeNode(node)) {
+            node.setLanguage(e.target.value);
+          }
+        }
+      });
+    },
+    [editor, selectedElementKey]
+  );
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+
+  return (
+    <div className="toolbar" ref={toolbarRef}>
+      <button
+        disabled={!canUndo}
+        onClick={() => {
+          editor.dispatchCommand(UNDO_COMMAND);
+        }}
+        className="toolbar-item spaced"
+        aria-label="Undo"
+      >
+        <i className="format undo" />
+      </button>
+      <button
+        disabled={!canRedo}
+        onClick={() => {
+          editor.dispatchCommand(REDO_COMMAND);
+        }}
+        className="toolbar-item"
+        aria-label="Redo"
+      >
+        <i className="format redo" />
+      </button>
+      <Divider />
+      {supportedBlockTypes.has(blockType) && (
+        <>
+          <button
+            className="toolbar-item block-controls"
+            onClick={() =>
+              setShowBlockOptionsDropDown(!showBlockOptionsDropDown)
+            }
+            aria-label="Formatting Options"
+          >
+            <span className={"icon block-type " + blockType} />
+            <span className="text">{blockTypeToBlockName[blockType]}</span>
+            <i className="chevron-down" />
+          </button>
+          {showBlockOptionsDropDown &&
+            createPortal(
+              <BlockOptionsDropdownList
+                editor={editor}
+                blockType={blockType}
+                toolbarRef={toolbarRef}
+                setShowBlockOptionsDropDown={setShowBlockOptionsDropDown}
+              />,
+              document.body
+            )}
+          <Divider />
+        </>
+      )}
+            {supportedListTypes.has(listType) && (
+        <>
+          <button
+            className="toolbar-item block-controls"
+            onClick={() =>
+              setShowListOptionsDropDown(!showListOptionsDropDown)
+            }
+            aria-label="Formatting Options"
+          >
+            <span className={"icon block-type " + listType} />
+            <span className="text">{ListTypeToListName[listType]}</span>
+            <i className="chevron-down" />
+          </button>
+          {showListOptionsDropDown &&
+            createPortal(
+              <ListOptionsDropdownList
+                editor={editor}
+                listType={listType}
+                toolbarRef={toolbarRef}
+                setShowListOptionsDropDown={setShowListOptionsDropDown}
+              />,
+              document.body
+            )}
+          <Divider />
+        </>
+      )}
+        <>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+            }}
+            className={"toolbar-item spaced " + (isBold ? "active" : "")}
+            aria-label="Format Bold"
+          >
+            <i className="format bold" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+            }}
+            className={"toolbar-item spaced " + (isItalic ? "active" : "")}
+            aria-label="Format Italics"
+          >
+            <i className="italic format" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+            }}
+            className={"toolbar-item spaced " + (isUnderline ? "active" : "")}
+            aria-label="Format Underline"
+          >
+            <i className="underline format" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+            }}
+            className={
+              "toolbar-item spaced " + (isStrikethrough ? "active" : "")
+            }
+            aria-label="Format Strikethrough"
+          >
+            <i className="format strikethrough" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+            }}
+            className={"toolbar-item spaced " + (isCode ? "active" : "")}
+            aria-label="Insert Code"
+          >
+            <i className="format code" />
+          </button>
+          <button
+            onClick={insertLink}
+            className={"toolbar-item spaced " + (isLink ? "active" : "")}
+            aria-label="Insert Link"
+          >
+            <i className="format link" />
+          </button>
+          {isLink &&
+            createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
+          <Divider />
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
+            }}
+            className="toolbar-item spaced"
+            aria-label="Left Align"
+          >
+            <i className="format left-align" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
+            }}
+            className="toolbar-item spaced"
+            aria-label="Center Align"
+          >
+            <i className="format center-align" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
+            }}
+            className="toolbar-item spaced"
+            aria-label="Right Align"
+          >
+            <i className="format right-align" />
+          </button>
+          <button
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
+            }}
+            className="toolbar-item"
+            aria-label="Justify Align"
+          >
+            <i className="format justify-align" />
+          </button>{" "}
+        </>
+    </div>
+  );
+}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.js
new file mode 100644
index 00000000000000..45474a0e170726
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.js
@@ -0,0 +1,16 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { TreeView } from "@lexical/react/LexicalTreeView";
+
+export default function TreeViewPlugin() {
+  const [editor] = useLexicalComposerContext();
+  return (
+    <TreeView
+      viewClassName="tree-view-output"
+      timeTravelPanelClassName="debug-timetravel-panel"
+      timeTravelButtonClassName="debug-timetravel-button"
+      timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
+      timeTravelPanelButtonClassName="debug-timetravel-panel-button"
+      editor={editor}
+    />
+  );
+}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
new file mode 100644
index 00000000000000..b4a55f5cf891bd
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -0,0 +1,758 @@
+body {
+  margin: 0;
+  background: #eee;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
+    sans-serif;
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.other h2 {
+  font-size: 18px;
+  color: #444;
+  margin-bottom: 7px;
+}
+
+.other a {
+  color: #777;
+  text-decoration: underline;
+  font-size: 14px;
+}
+
+
+
+.other ul {
+  padding: 0;
+  margin: 0;
+}
+
+ul {
+  list-style: disc inside
+}
+
+ol {
+  list-style: decimal inside
+}
+
+.App {
+  font-family: sans-serif;
+  text-align: center;
+}
+
+h1 {
+  font-size: 24px;
+  color: #333;
+}
+
+.ltr {
+  text-align: left;
+}
+
+.rtl {
+  text-align: right;
+}
+
+.editor-container {
+  margin: 20px auto 20px auto;
+  border-radius: 2px;
+  max-width: 600px;
+  color: #000;
+  position: relative;
+  line-height: 20px;
+  font-weight: 400;
+  text-align: left;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.editor-inner {
+  background: #fff;
+  position: relative;
+}
+
+.editor-input {
+  min-height: 150px;
+  resize: none;
+  font-size: 15px;
+  caret-color: rgb(5, 5, 5);
+  position: relative;
+  tab-size: 1;
+  outline: 0;
+  padding: 15px 10px;
+  caret-color: #444;
+}
+
+.editor-placeholder {
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 15px;
+  left: 10px;
+  font-size: 15px;
+  user-select: none;
+  display: inline-block;
+  pointer-events: none;
+}
+
+.editor-text-bold {
+  font-weight: bold;
+}
+
+.editor-text-italic {
+  font-style: italic;
+}
+
+.editor-text-underline {
+  text-decoration: underline;
+}
+
+.editor-text-strikethrough {
+  text-decoration: line-through;
+}
+
+.editor-text-underlineStrikethrough {
+  text-decoration: underline line-through;
+}
+
+.editor-text-code {
+  background-color: rgb(240, 242, 245);
+  padding: 1px 0.25rem;
+  font-family: Menlo, Consolas, Monaco, monospace;
+  font-size: 94%;
+}
+
+.editor-link {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+}
+
+.tree-view-output {
+  display: block;
+  background: #222;
+  color: #fff;
+  padding: 5px;
+  font-size: 12px;
+  white-space: pre-wrap;
+  margin: 1px auto 10px auto;
+  max-height: 250px;
+  position: relative;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+  overflow: auto;
+  line-height: 14px;
+}
+
+.editor-code {
+  background-color: rgb(240, 242, 245);
+  font-family: Menlo, Consolas, Monaco, monospace;
+  display: block;
+  padding: 8px 8px 8px 52px;
+  line-height: 1.53;
+  font-size: 13px;
+  margin: 0;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  tab-size: 2;
+  /* white-space: pre; */
+  overflow-x: auto;
+  position: relative;
+}
+
+.editor-code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: #eee;
+  left: 0;
+  top: 0;
+  border-right: 1px solid #ccc;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+}
+.editor-code:after {
+  content: attr(data-highlight-language);
+  top: 0;
+  right: 3px;
+  padding: 3px;
+  font-size: 10px;
+  text-transform: uppercase;
+  position: absolute;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.editor-tokenComment {
+  color: slategray;
+}
+
+.editor-tokenPunctuation {
+  color: #999;
+}
+
+.editor-tokenProperty {
+  color: #905;
+}
+
+.editor-tokenSelector {
+  color: #690;
+}
+
+.editor-tokenOperator {
+  color: #9a6e3a;
+}
+
+.editor-tokenAttr {
+  color: #07a;
+}
+
+.editor-tokenVariable {
+  color: #e90;
+}
+
+.editor-tokenFunction {
+  color: #dd4a68;
+}
+
+.editor-paragraph {
+  margin: 0;
+  margin-bottom: 8px;
+  position: relative;
+}
+
+.editor-paragraph:last-child {
+  margin-bottom: 0;
+}
+
+.editor-heading-h1 {
+  font-size: 24px;
+  color: rgb(5, 5, 5);
+  font-weight: 400;
+  margin: 0;
+  margin-bottom: 12px;
+  padding: 0;
+}
+
+.editor-heading-h2 {
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  font-weight: 700;
+  margin: 0;
+  margin-top: 10px;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.editor-quote {
+  margin: 0;
+  margin-left: 20px;
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  border-left-color: rgb(206, 208, 212);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: 16px;
+}
+
+.editor-list-ol {
+  padding: 0;
+  margin: 0;
+  margin-left: 16px;
+}
+
+.editor-list-ul ul {
+  padding: 0;
+  margin: 0;
+  margin-left: 0px;
+}
+
+.editor-listitem {
+  margin: 8px 32px 8px 32px;
+}
+
+.editor-nested-listitem {
+ list-style-type: none;
+
+}
+
+pre::-webkit-scrollbar {
+  background: transparent;
+  width: 10px;
+}
+
+
+pre::-webkit-scrollbar-thumb {
+  background: #999;
+}
+
+.debug-timetravel-panel {
+  overflow: hidden;
+  padding: 0 0 10px 0;
+  margin: auto;
+  display: flex;
+}
+
+.debug-timetravel-panel-slider {
+  padding: 0;
+  flex: 8;
+}
+
+.debug-timetravel-panel-button {
+  padding: 0;
+  border: 0;
+  background: none;
+  flex: 1;
+  color: #fff;
+  font-size: 12px;
+}
+
+.debug-timetravel-panel-button:hover {
+  text-decoration: underline;
+}
+
+.debug-timetravel-button {
+  border: 0;
+  padding: 0;
+  font-size: 12px;
+  top: 10px;
+  right: 15px;
+  position: absolute;
+  background: none;
+  color: #fff;
+}
+
+.debug-timetravel-button:hover {
+  text-decoration: underline;
+}
+
+.emoji {
+  color: transparent;
+  background-size: 16px 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  vertical-align: middle;
+  margin: 0 -1px;
+}
+
+.emoji-inner {
+  padding: 0 0.15em;
+}
+
+.emoji-inner::selection {
+  color: transparent;
+  background-color: rgba(150, 150, 150, 0.4);
+}
+
+.emoji-inner::moz-selection {
+  color: transparent;
+  background-color: rgba(150, 150, 150, 0.4);
+}
+
+.toolbar {
+  display: flex;
+  margin-bottom: 1px;
+  background: #fff;
+  padding: 4px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  vertical-align: middle;
+}
+
+.toolbar button.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+
+.toolbar button.toolbar-item:disabled {
+  cursor: not-allowed;
+}
+
+.toolbar button.toolbar-item.spaced {
+  margin-right: 2px;
+}
+
+.toolbar button.toolbar-item i.format {
+  background-size: contain;
+  display: inline-block;
+  height: 18px;
+  width: 18px;
+  margin-top: 2px;
+  vertical-align: -0.25em;
+  display: flex;
+  opacity: 0.6;
+}
+
+.icon.paragraph {
+  background-image: url(images/icons/text-paragraph.svg);
+}
+
+.toolbar button.toolbar-item:disabled i.format {
+  opacity: 0.2;
+}
+
+.toolbar button.toolbar-item.active {
+  background-color: rgba(223, 232, 250, 0.3);
+}
+
+.toolbar button.toolbar-item.active i {
+  opacity: 1;
+}
+
+.toolbar .toolbar-item:hover:not([disabled]) {
+  background-color: #eee;
+}
+
+.toolbar .divider {
+  width: 1px;
+  background-color: #eee;
+  margin: 0 4px;
+}
+
+.toolbar select.toolbar-item {
+  border: 0;
+  display: flex;
+  background: none;
+  border-radius: 10px;
+  padding: 8px;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 70px;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+}
+
+.toolbar select.code-language {
+  text-transform: capitalize;
+  width: 130px;
+}
+
+.toolbar .toolbar-item .text {
+  display: flex;
+  line-height: 20px;
+  width: 200px;
+  vertical-align: middle;
+  font-size: 14px;
+  color: #777;
+  text-overflow: ellipsis;
+  width: 70px;
+  overflow: hidden;
+  height: 20px;
+  text-align: left;
+}
+
+.toolbar .toolbar-item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 8px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.toolbar i.chevron-down {
+  margin-top: 3px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  user-select: none;
+}
+
+.toolbar i.chevron-down.inside {
+  width: 16px;
+  height: 16px;
+  display: flex;
+  margin-left: -25px;
+  margin-top: 11px;
+  margin-right: 10px;
+  pointer-events: none;
+}
+
+i.chevron-down {
+  background-color: transparent;
+  background-size: contain;
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  background-image: url(images/icons/chevron-down.svg);
+}
+
+#block-controls button:hover {
+  background-color: #efefef;
+}
+
+#block-controls button:focus-visible {
+  border-color: blue;
+}
+
+#block-controls span.block-type.paragraph {
+  background-image: url(images/icons/text-paragraph.svg);
+}
+
+#block-controls span.block-type {
+  background-size: contain;
+  display: block;
+  width: 18px;
+  height: 18px;
+  margin: 2px;
+}
+
+#block-controls span.block-type.paragraph {
+  background-image: url(images/icons/link.svg);
+}
+
+#block-controls span.block-type.h1 {
+  background-image: url(images/icons/link.svg);
+}
+
+#block-controls span.block-type.h2 {
+  background-image: url(images/icons/link.svg);
+}
+
+#block-controls span.block-type.quote {
+  background-image: url(images/icons/chat-square-quote.svg);
+}
+
+#block-controls span.block-type.ul {
+  background-image: url(images/icons/list-ul.svg);
+}
+
+#block-controls span.block-type.ol {
+  background-image: url(images/icons/list-ol.svg);
+}
+
+#block-controls span.block-type.code {
+  background-image: url(images/icons/code.svg);
+}
+
+.dropdown {
+  z-index: 5;
+  display: block;
+  position: absolute;
+  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  min-width: 100px;
+  min-height: 40px;
+  background-color: #fff;
+}
+
+.dropdown .item {
+  margin: 0 8px 0 8px;
+  padding: 8px;
+  color: #050505;
+  cursor: pointer;
+  line-height: 16px;
+  font-size: 15px;
+  display: flex;
+  align-content: center;
+  flex-direction: row;
+  flex-shrink: 0;
+  justify-content: space-between;
+  background-color: #fff;
+  border-radius: 8px;
+  border: 0;
+  min-width: 268px;
+}
+
+.dropdown .item .active {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  background-size: contain;
+}
+
+.dropdown .item:first-child {
+  margin-top: 8px;
+}
+
+.dropdown .item:last-child {
+  margin-bottom: 8px;
+}
+
+.dropdown .item:hover {
+  background-color: #eee;
+}
+
+.dropdown .item .text {
+  display: flex;
+  line-height: 20px;
+  flex-grow: 1;
+  width: 200px;
+}
+
+.dropdown .item .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+  user-select: none;
+  margin-right: 12px;
+  line-height: 16px;
+  background-size: contain;
+}
+
+.link-editor {
+  position: absolute;
+  z-index: 100;
+  top: -10000px;
+  left: -10000px;
+  margin-top: -6px;
+  max-width: 300px;
+  width: 100%;
+  opacity: 0;
+  background-color: #fff;
+  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 8px;
+  transition: opacity 0.5s;
+}
+
+.link-editor .link-input {
+  display: block;
+  width: calc(100% - 24px);
+  box-sizing: border-box;
+  margin: 8px 12px;
+  padding: 8px 12px;
+  border-radius: 15px;
+  background-color: #eee;
+  font-size: 15px;
+  color: rgb(5, 5, 5);
+  border: 0;
+  outline: 0;
+  position: relative;
+  font-family: inherit;
+}
+
+.link-editor div.link-edit {
+  background-image: url(images/icons/link.svg);
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 35px;
+  vertical-align: -0.25em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: pointer;
+}
+
+.link-editor .link-input a {
+  color: rgb(33, 111, 219);
+  text-decoration: none;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  margin-right: 30px;
+  text-overflow: ellipsis;
+}
+
+.link-editor .link-input a:hover {
+  text-decoration: underline;
+}
+
+.link-editor .button {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  padding: 6px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+  background-size: contain;
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  vertical-align: -0.25em;
+}
+
+.icon.paragraph {
+  background-image: url(images/icons/link.svg);
+}
+
+.icon.large-heading,
+.icon.h1 {
+  background-image: url(images/icons/link.svg);
+}
+
+.icon.small-heading,
+.icon.h2 {
+  background-image: url(images/icons/link.svg);
+}
+
+.icon.bullet-list,
+.icon.ul {
+  background-image: url(images/icons/list-ul.svg);
+}
+
+.icon.numbered-list,
+.icon.ol {
+  background-image: url(images/icons/list-ol.svg);
+}
+
+.icon.quote {
+  background-image: url(images/icons/chat-square-quote.svg);
+}
+
+.icon.code {
+  background-image: url(images/icons/code.svg);
+}
+
+i.bold {
+  background-image: url(images/icons/link.svg);
+}
+
+i.italic {
+  background-image: url(images/icons/link.svg);
+}
+
+i.underline {
+  background-image: url(images/icons/link.svg);
+}
+
+i.strikethrough {
+  background-image: url(images/icons/link.svg);
+}
+
+i.code {
+  background-image: url(images/icons/code.svg);
+}
+
+i.link {
+  background-image: url(images/icons/link.svg);
+}
+
+i.left-align {
+  background-image: url(images/icons/link.svg);
+}
+
+i.center-align {
+  background-image: url(images/icons/link.svg);
+}
+
+i.right-align {
+  background-image: url(images/icons/link.svg);
+}
+
+i.justify-align {
+  background-image: url(images/icons/link.svg);
+}
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index 5647f0e4d9ce39..cd985ce8a62fec 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -33,6 +33,7 @@ import { translateVariablesToEnglish } from "../../lib/variableTranslations";
 import type { FormValues } from "../../pages/v2/workflow";
 import TextEditor from "./TextEditor/TextEditor";
 import { TimeTimeUnitInput } from "./TimeTimeUnitInput";
+import Editor from "./TextEditor/Editor";
 
 type WorkflowStepProps = {
   step?: WorkflowStep;
@@ -137,7 +138,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     return (
       <>
         <div className="flex justify-center">
-          <div className="min-w-80 w-full rounded-md border border-gray-200 bg-white p-7">
+          <div className="w-full bg-white border border-gray-200 rounded-md min-w-80 p-7">
             <div className="flex">
               <div className="mt-[3px] mr-5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs font-medium">
                 1
@@ -147,7 +148,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div className="text-sm text-gray-600">{t("when_something_happens")}</div>
               </div>
             </div>
-            <div className="my-7 border-t border-gray-200" />
+            <div className="border-t border-gray-200 my-7" />
             <Label>{t("when")}</Label>
             <Controller
               name="trigger"
@@ -210,11 +211,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
     return (
       <>
-        <div className="my-3 flex justify-center">
+        <div className="flex justify-center my-3">
           <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
         </div>
         <div className="flex justify-center">
-          <div className="min-w-80 flex w-full rounded-md border border-gray-200 bg-white p-7">
+          <div className="flex w-full bg-white border border-gray-200 rounded-md min-w-80 p-7">
             <div className="w-full">
               <div className="flex">
                 <div className="w-full">
@@ -263,7 +264,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </Dropdown>
                 </div>
               </div>
-              <div className="my-7 border-t border-gray-200" />
+              <div className="border-t border-gray-200 my-7" />
               <div>
                 <Label>{t("do_this")}</Label>
                 <Controller
@@ -327,7 +328,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 )}
               </div>
               {isPhoneNumberNeeded && (
-                <div className="mt-5 rounded-md bg-gray-50 p-4">
+                <div className="p-4 mt-5 rounded-md bg-gray-50">
                   <Label>{t("custom_phone_number")}</Label>
                   <PhoneInput<FormValues>
                     control={form.control}
@@ -346,7 +347,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </div>
               )}
               {isEmailAddressNeeded && (
-                <div className="mt-5 rounded-md bg-gray-50 p-4">
+                <div className="p-4 mt-5 rounded-md bg-gray-50">
                   <EmailField
                     required
                     label={t("email_address")}
@@ -379,11 +380,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 />
               </div>
               {isCustomReminderBodyNeeded && (
-                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-2 md:p-6 md:pt-4">
+                <div className="p-4 pt-2 mt-2 rounded-md bg-gray-50 md:p-6 md:pt-4">
                   {isEmailSubjectNeeded && (
                     <div className="mb-6">
                       <div className="flex items-center">
-                        <Label className="mb-0 flex-none">{t("subject")}</Label>
+                        <Label className="flex-none mb-0">{t("subject")}</Label>
                         <div className="flex-grow text-right">
                           <AddVariablesDropdown addVariable={addVariable} isEmailSubject={true} />
                         </div>
@@ -411,16 +412,17 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   step.action !== WorkflowActions.SMS_NUMBER ? (
                     <>
                       <div className="mb-2 flex items-center pb-[1.5px]">
-                        <Label className="mb-0 flex-none ">
+                        <Label className="flex-none mb-0 ">
                           {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
                         </Label>
                       </div>
                       <TextEditor form={form} stepNumber={step.stepNumber} />
+                      <Editor/>
                     </>
                   ) : (
                     <>
                       <div className="flex items-center">
-                        <Label className="mb-0 flex-none">
+                        <Label className="flex-none mb-0">
                           {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
                         </Label>
                         <div className="flex-grow text-right">
@@ -432,7 +434,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                           reminderBodyFormRef?.(e);
                           refReminderBody.current = e;
                         }}
-                        className="my-0 h-24"
+                        className="h-24 my-0"
                         required
                         {...restReminderBodyForm}
                       />
@@ -446,7 +448,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     )}
                   <div className="mt-3 ">
                     <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
-                      <div className="mt-2 flex text-sm text-gray-600">
+                      <div className="flex mt-2 text-sm text-gray-600">
                         <Icon.FiHelpCircle className="mt-[3px] mr-2 h-3 w-3" />
                         <p className="text-left">{t("using_additional_inputs_as_variables")}</p>
                       </div>
@@ -457,7 +459,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               {form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && (
                 <Button
                   type="button"
-                  className="mt-7 w-full"
+                  className="w-full mt-7"
                   onClick={() => {
                     let isEmpty = false;
                     if (!form.getValues(`steps.${step.stepNumber - 1}.sendTo`) && isPhoneNumberNeeded) {
@@ -552,21 +554,21 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           <DialogContent useOwnActionButtons type="creation" className="sm:max-w-[610px] md:h-[570px]">
             <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
               <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
-              <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
-                <p className="test-sm font-medium">{t("format")}</p>
-                <ul className="mt-2 ml-5 list-disc text-gray-900">
+              <div className="p-3 rounded-md mb-7 mt-7 bg-gray-50 sm:p-4">
+                <p className="font-medium test-sm">{t("format")}</p>
+                <ul className="mt-2 ml-5 text-gray-900 list-disc">
                   <li>{t("uppercase_for_letters")}</li>
                   <li>{t("replace_whitespaces_underscores")}</li>
                   <li>{t("ignore_special_characters")}</li>
                 </ul>
                 <div className="mt-6">
-                  <p className="test-sm w-full font-medium">{t("example_1")}</p>
-                  <div className="mt-2 grid grid-cols-12">
-                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
-                    <div className="test-sm col-span-7 text-gray-900">{t("company_size")}</div>
-                    <div className="test-sm col-span-5 w-full text-gray-600">{t("variable")}</div>
+                  <p className="w-full font-medium test-sm">{t("example_1")}</p>
+                  <div className="grid grid-cols-12 mt-2">
+                    <div className="col-span-5 mr-2 text-gray-600 test-sm">{t("additional_input_label")}</div>
+                    <div className="col-span-7 text-gray-900 test-sm">{t("company_size")}</div>
+                    <div className="w-full col-span-5 text-gray-600 test-sm">{t("variable")}</div>
 
-                    <div className="test-sm col-span-7 break-words text-gray-900">
+                    <div className="col-span-7 text-gray-900 break-words test-sm">
                       {" "}
                       {`{${t("company_size")
                         .replace(/[^a-zA-Z0-9 ]/g, "")
@@ -577,12 +579,12 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </div>
                 </div>
                 <div className="mt-6">
-                  <p className="test-sm w-full font-medium">{t("example_2")}</p>
-                  <div className="mt-2 grid grid-cols-12">
-                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
-                    <div className="test-sm col-span-7 text-gray-900">{t("what_help_needed")}</div>
-                    <div className="test-sm col-span-5 text-gray-600">{t("variable")}</div>
-                    <div className="test-sm col-span-7 break-words text-gray-900">
+                  <p className="w-full font-medium test-sm">{t("example_2")}</p>
+                  <div className="grid grid-cols-12 mt-2">
+                    <div className="col-span-5 mr-2 text-gray-600 test-sm">{t("additional_input_label")}</div>
+                    <div className="col-span-7 text-gray-900 test-sm">{t("what_help_needed")}</div>
+                    <div className="col-span-5 text-gray-600 test-sm">{t("variable")}</div>
+                    <div className="col-span-7 text-gray-900 break-words test-sm">
                       {" "}
                       {`{${t("what_help_needed")
                         .replace(/[^a-zA-Z0-9 ]/g, "")

From ada3b411952453e8819d3e39375533b4fec0a6cc Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 15 Nov 2022 12:25:04 +0100
Subject: [PATCH 20/43] connect reminder body of form with new editor

---
 .../components/v2/TextEditor/Editor.tsx       |  49 +-
 .../{ExampleTheme.js => ExampleTheme.ts}      |  12 +-
 .../components/v2/TextEditor/TextEditor.tsx   |  99 ---
 .../v2/TextEditor/images/icons/type-bold.svg  |   3 +
 .../v2/TextEditor/images/icons/type-h1.svg    |   3 +
 .../v2/TextEditor/images/icons/type-h2.svg    |   3 +
 .../TextEditor/images/icons/type-italic.svg   |   3 +
 .../images/icons/type-underline.svg           |   3 +
 .../{AutoLinkPlugin.js => AutoLinkPlugin.tsx} |  16 +-
 ...lightPlugin.js => CodeHighlightPlugin.tsx} |   0
 ...Plugin.js => ListMaxIndentLevelPlugin.tsx} |  18 +-
 .../v2/TextEditor/plugins/ToolbarPlugin.js    | 790 ------------------
 .../v2/TextEditor/plugins/ToolbarPlugin.tsx   | 518 ++++++++++++
 .../{TreeViewPlugin.js => TreeViewPlugin.tsx} |   0
 .../components/v2/TextEditor/stylesEditor.css |  43 +-
 .../components/v2/WorkflowStepContainer.tsx   |  64 +-
 16 files changed, 618 insertions(+), 1006 deletions(-)
 rename packages/features/ee/workflows/components/v2/TextEditor/{ExampleTheme.js => ExampleTheme.ts} (91%)
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-bold.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-h1.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-h2.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-italic.svg
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-underline.svg
 rename packages/features/ee/workflows/components/v2/TextEditor/plugins/{AutoLinkPlugin.js => AutoLinkPlugin.tsx} (57%)
 rename packages/features/ee/workflows/components/v2/TextEditor/plugins/{CodeHighlightPlugin.js => CodeHighlightPlugin.tsx} (100%)
 rename packages/features/ee/workflows/components/v2/TextEditor/plugins/{ListMaxIndentLevelPlugin.js => ListMaxIndentLevelPlugin.tsx} (74%)
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.js
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
 rename packages/features/ee/workflows/components/v2/TextEditor/plugins/{TreeViewPlugin.js => TreeViewPlugin.tsx} (100%)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
index 8ac319b2cb026d..9e0bfc783918c9 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
@@ -1,38 +1,43 @@
-import ExampleTheme from "./ExampleTheme";
-import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
-import TreeViewPlugin from "./plugins/TreeViewPlugin";
-import ToolbarPlugin from "./plugins/ToolbarPlugin";
-import { HeadingNode, QuoteNode } from "@lexical/rich-text";
-import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
-import { ListItemNode, ListNode } from "@lexical/list";
 import { CodeHighlightNode, CodeNode } from "@lexical/code";
 import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { TRANSFORMERS } from "@lexical/markdown";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
-import { TRANSFORMERS } from "@lexical/markdown";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import { FormValues } from "ee/workflows/pages/workflow";
+import { UseFormReturn } from "react-hook-form";
 
-import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
-import CodeHighlightPlugin from "./plugins/CodeHighlightPlugin";
+import ExampleTheme from "./ExampleTheme";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
-
-import "./stylesEditor.css"
+import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
+import ToolbarPlugin from "./plugins/ToolbarPlugin";
+import TreeViewPlugin from "./plugins/TreeViewPlugin";
+import "./stylesEditor.css";
 
 function Placeholder() {
   return <div className="editor-placeholder">Enter some rich text...</div>;
 }
 
+export type TextEditorProps = {
+  form: UseFormReturn<FormValues>;
+  stepNumber: number;
+};
+
 const editorConfig = {
   // The editor theme
   theme: ExampleTheme,
   // Handling of errors during update
-  onError(error) {
+  onError(error: any) {
     throw error;
   },
+  namespace: "",
   // Any custom nodes go here
   nodes: [
     HeadingNode,
@@ -45,24 +50,22 @@ const editorConfig = {
     TableCellNode,
     TableRowNode,
     AutoLinkNode,
-    LinkNode
-  ]
+    LinkNode,
+  ],
 };
 
-export default function Editor() {
+export default function Editor(props: TextEditorProps) {
   return (
     <LexicalComposer initialConfig={editorConfig}>
       <div className="editor-container">
-        <ToolbarPlugin />
+        <ToolbarPlugin form={props.form} stepNumber={props.stepNumber} />
         <div className="editor-inner">
           <RichTextPlugin
             contentEditable={<ContentEditable className="editor-input" />}
             placeholder={<Placeholder />}
           />
-          <HistoryPlugin />
           <TreeViewPlugin />
           <AutoFocusPlugin />
-          <CodeHighlightPlugin />
           <ListPlugin />
           <LinkPlugin />
           <AutoLinkPlugin />
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.js b/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.ts
similarity index 91%
rename from packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.js
rename to packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.ts
index e55f7e4752a3b5..595a62d85b12c1 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.js
+++ b/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.ts
@@ -9,15 +9,15 @@ const exampleTheme = {
     h2: "editor-heading-h2",
     h3: "editor-heading-h3",
     h4: "editor-heading-h4",
-    h5: "editor-heading-h5"
+    h5: "editor-heading-h5",
   },
   list: {
     nested: {
-      listitem: "editor-nested-listitem"
+      listitem: "editor-nested-listitem",
     },
     ol: "editor-list-ol",
     ul: "editor-list-ul",
-    listitem: "editor-listitem"
+    listitem: "editor-listitem",
   },
   image: "editor-image",
   link: "editor-link",
@@ -29,7 +29,7 @@ const exampleTheme = {
     underline: "editor-text-underline",
     strikethrough: "editor-text-strikethrough",
     underlineStrikethrough: "editor-text-underlineStrikethrough",
-    code: "editor-text-code"
+    code: "editor-text-code",
   },
   code: "editor-code",
   codeHighlight: {
@@ -62,8 +62,8 @@ const exampleTheme = {
     symbol: "editor-tokenProperty",
     tag: "editor-tokenProperty",
     url: "editor-tokenOperator",
-    variable: "editor-tokenVariable"
-  }
+    variable: "editor-tokenVariable",
+  },
 };
 
 export default exampleTheme;
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
deleted file mode 100644
index 123a78de76dbb8..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/TextEditor.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import { EditorState, Modifier, ContentState, convertToRaw } from "draft-js";
-import draftToHtml from "draftjs-to-html";
-import dynamic from "next/dynamic";
-import { useState, Dispatch, SetStateAction } from "react";
-import { EditorProps } from "react-draft-wysiwyg";
-import { UseFormReturn } from "react-hook-form";
-
-import { FormValues } from "../../../pages/v2/workflow";
-import { AddVariablesDropdown } from "../AddVariablesDropdown";
-import "./styles.css";
-
-const Editor = dynamic<EditorProps>(() => import("react-draft-wysiwyg").then((mod) => mod.Editor), {
-  ssr: false,
-});
-
-const htmlToDraft = typeof window === "object" && require("html-to-draftjs").default;
-
-type TextEditorProps = {
-  form: UseFormReturn<FormValues>;
-  stepNumber: number;
-};
-
-function TextEditor({ form, stepNumber }: TextEditorProps) {
-  const contentBlock = htmlToDraft(form.getValues(`steps.${stepNumber - 1}.reminderBody`) || "");
-  const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
-
-  const [editorState, setEditorState] = useState(EditorState.createWithContent(contentState));
-
-  return (
-    <>
-      <Editor
-        editorState={editorState}
-        wrapperClassName="border border-gray-300 rounded-md "
-        editorClassName=" p-3 -mt-3 bg-white rounded-md text-sm hover:border-gray-400"
-        onEditorStateChange={setEditorState}
-        onChange={() => {
-          form.clearErrors(`steps.${stepNumber - 1}.reminderBody`);
-          const value = draftToHtml(convertToRaw(editorState.getCurrentContent()))
-            .replaceAll("&lt;", "<")
-            .replaceAll("&gt;", ">")
-            .replaceAll("<p></p>", "<br/>");
-
-          form.setValue(`steps.${stepNumber - 1}.reminderBody`, value.trim() !== "<br/>" ? value : null);
-        }}
-        toolbarCustomButtons={[
-          <AddVariablesOption
-            key={stepNumber}
-            form={form}
-            stepNumber={stepNumber}
-            editorState={editorState}
-            setEditorState={setEditorState}
-          />,
-        ]}
-        toolbar={{
-          options: ["inline", "fontSize", "list"],
-          inline: {
-            options: ["bold", "italic"],
-          },
-          list: {
-            inDropdown: true,
-            options: ["unordered", "ordered"],
-          },
-        }}
-      />
-    </>
-  );
-}
-
-type AddVariablesProps = {
-  editorState: EditorState;
-  setEditorState: Dispatch<SetStateAction<EditorState>>;
-  form: UseFormReturn<FormValues>;
-  stepNumber: number;
-};
-
-function AddVariablesOption({ editorState, setEditorState, form, stepNumber }: AddVariablesProps) {
-  const addVariable = (isEmailSubject: boolean, variable: string) => {
-    const contentState = Modifier.replaceText(
-      editorState.getCurrentContent(),
-      editorState.getSelection(),
-      `{${variable.toUpperCase().replace(/ /g, "_")}}`,
-      editorState.getCurrentInlineStyle()
-    );
-    const newEditorState = EditorState.push(editorState, contentState, "insert-characters");
-    setEditorState(newEditorState);
-
-    const value = draftToHtml(convertToRaw(newEditorState.getCurrentContent()));
-    form.setValue(`steps.${stepNumber - 1}.reminderBody`, value);
-  };
-
-  return (
-    <div className="-mt-[1px]">
-      <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
-    </div>
-  );
-}
-
-export default TextEditor;
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-bold.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-bold.svg
new file mode 100644
index 00000000000000..4546eaaa30e5cb
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-bold.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-bold" viewBox="0 0 16 16">
+  <path d="M8.21 13c2.106 0 3.412-1.087 3.412-2.823 0-1.306-.984-2.283-2.324-2.386v-.055a2.176 2.176 0 0 0 1.852-2.14c0-1.51-1.162-2.46-3.014-2.46H3.843V13H8.21zM5.908 4.674h1.696c.963 0 1.517.451 1.517 1.244 0 .834-.629 1.32-1.73 1.32H5.908V4.673zm0 6.788V8.598h1.73c1.217 0 1.88.492 1.88 1.415 0 .943-.643 1.449-1.832 1.449H5.907z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-h1.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-h1.svg
new file mode 100644
index 00000000000000..6c57b9e3cf8bc4
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-h1.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h1" viewBox="0 0 16 16">
+  <path d="M8.637 13V3.669H7.379V7.62H2.758V3.67H1.5V13h1.258V8.728h4.62V13h1.259zm5.329 0V3.669h-1.244L10.5 5.316v1.265l2.16-1.565h.062V13h1.244z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-h2.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-h2.svg
new file mode 100644
index 00000000000000..329d7cdd59cbd7
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-h2.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-h2" viewBox="0 0 16 16">
+  <path d="M7.638 13V3.669H6.38V7.62H1.759V3.67H.5V13h1.258V8.728h4.62V13h1.259zm3.022-6.733v-.048c0-.889.63-1.668 1.716-1.668.957 0 1.675.608 1.675 1.572 0 .855-.554 1.504-1.067 2.085l-3.513 3.999V13H15.5v-1.094h-4.245v-.075l2.481-2.844c.875-.998 1.586-1.784 1.586-2.953 0-1.463-1.155-2.556-2.919-2.556-1.941 0-2.966 1.326-2.966 2.74v.049h1.223z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-italic.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-italic.svg
new file mode 100644
index 00000000000000..0282636dc14756
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-italic.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-italic" viewBox="0 0 16 16">
+  <path d="M7.991 11.674 9.53 4.455c.123-.595.246-.71 1.347-.807l.11-.52H7.211l-.11.52c1.06.096 1.128.212 1.005.807L6.57 11.674c-.123.595-.246.71-1.346.806l-.11.52h3.774l.11-.52c-1.06-.095-1.129-.211-1.006-.806z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-underline.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-underline.svg
new file mode 100644
index 00000000000000..7451674314939d
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-underline.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
+  <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.tsx
similarity index 57%
rename from packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.js
rename to packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.tsx
index 3475c917bcff34..95375dc3ceb901 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.js
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/AutoLinkPlugin.tsx
@@ -1,32 +1,34 @@
 import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
 
-const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+const URL_MATCHER =
+  /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
-const EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+const EMAIL_MATCHER =
+  /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
 
 const MATCHERS = [
-  (text) => {
+  (text: any) => {
     const match = URL_MATCHER.exec(text);
     return (
       match && {
         index: match.index,
         length: match[0].length,
         text: match[0],
-        url: match[0]
+        url: match[0],
       }
     );
   },
-  (text) => {
+  (text: any) => {
     const match = EMAIL_MATCHER.exec(text);
     return (
       match && {
         index: match.index,
         length: match[0].length,
         text: match[0],
-        url: `mailto:${match[0]}`
+        url: `mailto:${match[0]}`,
       }
     );
-  }
+  },
 ];
 
 export default function PlaygroundAutoLinkPlugin() {
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.tsx
similarity index 100%
rename from packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.js
rename to packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.tsx
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.tsx
similarity index 74%
rename from packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.js
rename to packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.tsx
index 657535e7593797..c99134d0e09b8f 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.js
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.tsx
@@ -5,26 +5,24 @@ import {
   $isElementNode,
   $isRangeSelection,
   INDENT_CONTENT_COMMAND,
-  COMMAND_PRIORITY_HIGH
+  COMMAND_PRIORITY_HIGH,
 } from "lexical";
 import { useEffect } from "react";
 
-function getElementNodesInSelection(selection) {
+function getElementNodesInSelection(selection: any) {
   const nodesInSelection = selection.getNodes();
 
   if (nodesInSelection.length === 0) {
     return new Set([
       selection.anchor.getNode().getParentOrThrow(),
-      selection.focus.getNode().getParentOrThrow()
+      selection.focus.getNode().getParentOrThrow(),
     ]);
   }
 
-  return new Set(
-    nodesInSelection.map((n) => ($isElementNode(n) ? n : n.getParentOrThrow()))
-  );
+  return new Set(nodesInSelection.map((n: any) => ($isElementNode(n) ? n : n.getParentOrThrow())));
 }
 
-function isIndentPermitted(maxDepth) {
+function isIndentPermitted(maxDepth: any) {
   const selection = $getSelection();
 
   if (!$isRangeSelection(selection)) {
@@ -41,9 +39,7 @@ function isIndentPermitted(maxDepth) {
     } else if ($isListItemNode(elementNode)) {
       const parent = elementNode.getParent();
       if (!$isListNode(parent)) {
-        throw new Error(
-          "ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent."
-        );
+        throw new Error("ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.");
       }
 
       totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
@@ -53,7 +49,7 @@ function isIndentPermitted(maxDepth) {
   return totalDepth <= maxDepth;
 }
 
-export default function ListMaxIndentLevelPlugin({ maxDepth }) {
+export default function ListMaxIndentLevelPlugin({ maxDepth }: any) {
   const [editor] = useLexicalComposerContext();
 
   useEffect(() => {
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.js
deleted file mode 100644
index 4cacd2e7f3b8d1..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.js
+++ /dev/null
@@ -1,790 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import {
-  CAN_REDO_COMMAND,
-  CAN_UNDO_COMMAND,
-  REDO_COMMAND,
-  UNDO_COMMAND,
-  SELECTION_CHANGE_COMMAND,
-  FORMAT_TEXT_COMMAND,
-  FORMAT_ELEMENT_COMMAND,
-  $getSelection,
-  $isRangeSelection,
-  $createParagraphNode,
-  $getNodeByKey
-} from "lexical";
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
-import {
-  $isParentElementRTL,
-  $wrapNodes,
-  $isAtNodeEnd
-} from "@lexical/selection";
-import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
-import {
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  REMOVE_LIST_COMMAND,
-  $isListNode,
-  ListNode
-} from "@lexical/list";
-import { createPortal } from "react-dom";
-import {
-  $createHeadingNode,
-  $createQuoteNode,
-  $isHeadingNode
-} from "@lexical/rich-text";
-import {
-  $createCodeNode,
-  $isCodeNode,
-  getDefaultCodeLanguage,
-  getCodeLanguages
-} from "@lexical/code";
-
-const LowPriority = 1;
-
-const supportedBlockTypes = new Set([
-  "paragraph",
-  "quote",
-  "code",
-  "h1",
-  "h2",
-]);
-
-const supportedListTypes = new Set([
-  "noList",
-  "ul",
-  "ol"
-]);
-
-const blockTypeToBlockName = {
-  h1: "Large Heading",
-  h2: "Small Heading",
-  h3: "Heading",
-  h4: "Heading",
-  h5: "Heading",
-  paragraph: "Normal",
-};
-
-const ListTypeToListName = {
-  ol: "Numbered List",
-  ul: "Bulleted List",
-  noList: "No List"
-};
-
-function Divider() {
-  return <div className="divider" />;
-}
-
-function positionEditorElement(editor, rect) {
-  if (rect === null) {
-    editor.style.opacity = "0";
-    editor.style.top = "-1000px";
-    editor.style.left = "-1000px";
-  } else {
-    editor.style.opacity = "1";
-    editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
-    editor.style.left = `${
-      rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2
-    }px`;
-  }
-}
-
-function FloatingLinkEditor({ editor }) {
-  const editorRef = useRef(null);
-  const inputRef = useRef(null);
-  const mouseDownRef = useRef(false);
-  const [linkUrl, setLinkUrl] = useState("");
-  const [isEditMode, setEditMode] = useState(false);
-  const [lastSelection, setLastSelection] = useState(null);
-
-  const updateLinkEditor = useCallback(() => {
-    const selection = $getSelection();
-    if ($isRangeSelection(selection)) {
-      const node = getSelectedNode(selection);
-      const parent = node.getParent();
-      if ($isLinkNode(parent)) {
-        setLinkUrl(parent.getURL());
-      } else if ($isLinkNode(node)) {
-        setLinkUrl(node.getURL());
-      } else {
-        setLinkUrl("");
-      }
-    }
-    const editorElem = editorRef.current;
-    const nativeSelection = window.getSelection();
-    const activeElement = document.activeElement;
-
-    if (editorElem === null) {
-      return;
-    }
-
-    const rootElement = editor.getRootElement();
-    if (
-      selection !== null &&
-      !nativeSelection.isCollapsed &&
-      rootElement !== null &&
-      rootElement.contains(nativeSelection.anchorNode)
-    ) {
-      const domRange = nativeSelection.getRangeAt(0);
-      let rect;
-      if (nativeSelection.anchorNode === rootElement) {
-        let inner = rootElement;
-        while (inner.firstElementChild != null) {
-          inner = inner.firstElementChild;
-        }
-        rect = inner.getBoundingClientRect();
-      } else {
-        rect = domRange.getBoundingClientRect();
-      }
-
-      if (!mouseDownRef.current) {
-        positionEditorElement(editorElem, rect);
-      }
-      setLastSelection(selection);
-    } else if (!activeElement || activeElement.className !== "link-input") {
-      positionEditorElement(editorElem, null);
-      setLastSelection(null);
-      setEditMode(false);
-      setLinkUrl("");
-    }
-
-    return true;
-  }, [editor]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateLinkEditor();
-        });
-      }),
-
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        () => {
-          updateLinkEditor();
-          return true;
-        },
-        LowPriority
-      )
-    );
-  }, [editor, updateLinkEditor]);
-
-  useEffect(() => {
-    editor.getEditorState().read(() => {
-      updateLinkEditor();
-    });
-  }, [editor, updateLinkEditor]);
-
-  useEffect(() => {
-    if (isEditMode && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isEditMode]);
-
-  return (
-    <div ref={editorRef} className="link-editor">
-      {isEditMode ? (
-        <input
-          ref={inputRef}
-          className="link-input"
-          value={linkUrl}
-          onChange={(event) => {
-            setLinkUrl(event.target.value);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") {
-              event.preventDefault();
-              if (lastSelection !== null) {
-                if (linkUrl !== "") {
-                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
-                }
-                setEditMode(false);
-              }
-            } else if (event.key === "Escape") {
-              event.preventDefault();
-              setEditMode(false);
-            }
-          }}
-        />
-      ) : (
-        <>
-          <div className="link-input">
-            <a href={linkUrl} target="_blank" rel="noopener noreferrer">
-              {linkUrl}
-            </a>
-            <div
-              className="link-edit"
-              role="button"
-              tabIndex={0}
-              onMouseDown={(event) => event.preventDefault()}
-              onClick={() => {
-                setEditMode(true);
-              }}
-            />
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-function Select({ onChange, className, options, value }) {
-  return (
-    <select className={className} onChange={onChange} value={value}>
-      <option hidden={true} value="" />
-      {options.map((option) => (
-        <option key={option} value={option}>
-          {option}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-function getSelectedNode(selection) {
-  const anchor = selection.anchor;
-  const focus = selection.focus;
-  const anchorNode = selection.anchor.getNode();
-  const focusNode = selection.focus.getNode();
-  if (anchorNode === focusNode) {
-    return anchorNode;
-  }
-  const isBackward = selection.isBackward();
-  if (isBackward) {
-    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
-  } else {
-    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
-  }
-}
-
-function BlockOptionsDropdownList({
-  editor,
-  blockType,
-  toolbarRef,
-  setShowBlockOptionsDropDown
-}) {
-  const dropDownRef = useRef(null);
-
-  useEffect(() => {
-    const toolbar = toolbarRef.current;
-    const dropDown = dropDownRef.current;
-
-    if (toolbar !== null && dropDown !== null) {
-      const { top, left } = toolbar.getBoundingClientRect();
-      dropDown.style.top = `${top + 40}px`;
-      dropDown.style.left = `${left}px`;
-    }
-  }, [dropDownRef, toolbarRef]);
-
-  useEffect(() => {
-    const dropDown = dropDownRef.current;
-    const toolbar = toolbarRef.current;
-
-    if (dropDown !== null && toolbar !== null) {
-      const handle = (event) => {
-        const target = event.target;
-
-        if (!dropDown.contains(target) && !toolbar.contains(target)) {
-          setShowBlockOptionsDropDown(false);
-        }
-      };
-      document.addEventListener("click", handle);
-
-      return () => {
-        document.removeEventListener("click", handle);
-      };
-    }
-  }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
-
-  const formatParagraph = () => {
-    if (blockType !== "paragraph") {
-      editor.update(() => {
-        const selection = $getSelection();
-
-        if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createParagraphNode());
-        }
-      });
-    }
-    setShowBlockOptionsDropDown(false);
-  };
-
-  const formatLargeHeading = () => {
-    if (blockType !== "h1") {
-      editor.update(() => {
-        const selection = $getSelection();
-
-        if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createHeadingNode("h1"));
-        }
-      });
-    }
-    setShowBlockOptionsDropDown(false);
-  };
-
-  const formatSmallHeading = () => {
-    if (blockType !== "h2") {
-      editor.update(() => {
-        const selection = $getSelection();
-
-        if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createHeadingNode("h2"));
-        }
-      });
-    }
-    setShowBlockOptionsDropDown(false);
-  };
-
-  const formatBulletList = () => {
-    if (blockType !== "ul") {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND);
-    }
-    setShowBlockOptionsDropDown(false);
-  };
-
-  const formatNumberedList = () => {
-    if (blockType !== "ol") {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND);
-    }
-    setShowBlockOptionsDropDown(false);
-  };
-
-  const formatQuote = () => {
-    if (blockType !== "quote") {
-      editor.update(() => {
-        const selection = $getSelection();
-
-        if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createQuoteNode());
-        }
-      });
-    }
-    setShowBlockOptionsDropDown(false);
-  };
-
-  const formatCode = () => {
-    if (blockType !== "code") {
-      editor.update(() => {
-        const selection = $getSelection();
-
-        if ($isRangeSelection(selection)) {
-          $wrapNodes(selection, () => $createCodeNode());
-        }
-      });
-    }
-    setShowBlockOptionsDropDown(false);
-  };
-
-  return (
-    <div className="dropdown" ref={dropDownRef}>
-      <button className="item" onClick={formatParagraph}>
-        <span className="icon paragraph" />
-        <span className="text">Normal</span>
-        {blockType === "paragraph" && <span className="active" />}
-      </button>
-      <button className="item" onClick={formatLargeHeading}>
-        <span className="icon large-heading" />
-        <span className="text">Large Heading</span>
-        {blockType === "h1" && <span className="active" />}
-      </button>
-      <button className="item" onClick={formatSmallHeading}>
-        <span className="icon small-heading" />
-        <span className="text">Small Heading</span>
-        {blockType === "h2" && <span className="active" />}
-      </button>
-    </div>
-  );
-}
-
-function ListOptionsDropdownList({
-  editor,
-  listType,
-  toolbarRef,
-  setShowListOptionsDropDown
-}) {
-  const dropDownRef = useRef(null);
-
-  useEffect(() => {
-    const toolbar = toolbarRef.current;
-    const dropDown = dropDownRef.current;
-
-    if (toolbar !== null && dropDown !== null) {
-      const { top, left } = toolbar.getBoundingClientRect();
-      dropDown.style.top = `${top + 40}px`;
-      dropDown.style.left = `${left}px`;
-    }
-  }, [dropDownRef, toolbarRef]);
-
-  useEffect(() => {
-    const dropDown = dropDownRef.current;
-    const toolbar = toolbarRef.current;
-
-    if (dropDown !== null && toolbar !== null) {
-      const handle = (event) => {
-        const target = event.target;
-
-        if (!dropDown.contains(target) && !toolbar.contains(target)) {
-          setShowListOptionsDropDown(false);
-        }
-      };
-      document.addEventListener("click", handle);
-
-      return () => {
-        document.removeEventListener("click", handle);
-      };
-    }
-  }, [dropDownRef, setShowListOptionsDropDown, toolbarRef]);
-
-
-  const formatBulletList = () => {
-    if (listType !== "ul") {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND);
-    }
-    setShowListOptionsDropDown(false);
-  };
-
-  const formatNumberedList = () => {
-    if (listType !== "ol") {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND);
-    }
-    setShowListOptionsDropDown(false);
-  };
-
-  return (
-    <div className="dropdown" ref={dropDownRef}>
-      <button className="item" onClick={formatBulletList}>
-
-        <span className="icon bullet-list" />
-        <span className="text">Bullet List</span>
-        {listType === "ul" && <span className="active" />}
-      </button>
-      <button className="item" onClick={formatNumberedList}>
-        <span className="icon numbered-list" />
-        <span className="text">Numbered List</span>
-        {listType === "ol" && <span className="active" />}
-      </button>
-      <button className="item">
-        <span className="icon numbered-list" />
-        <span className="text">No List</span>
-        {listType === "noList" && <span className="active" />}
-      </button>
-    </div>
-  );
-}
-
-export default function ToolbarPlugin() {
-  const [editor] = useLexicalComposerContext();
-  const toolbarRef = useRef(null);
-  const [canUndo, setCanUndo] = useState(false);
-  const [canRedo, setCanRedo] = useState(false);
-  const [blockType, setBlockType] = useState("paragraph");
-  const [listType, setListType] = useState("noList");
-
-  const [selectedElementKey, setSelectedElementKey] = useState(null);
-  const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(
-    false
-  );
-  const [showListOptionsDropDown, setShowListOptionsDropDown] = useState(
-    false
-  );
-  const [codeLanguage, setCodeLanguage] = useState("");
-  const [isRTL, setIsRTL] = useState(false);
-  const [isLink, setIsLink] = useState(false);
-  const [isBold, setIsBold] = useState(false);
-  const [isItalic, setIsItalic] = useState(false);
-  const [isUnderline, setIsUnderline] = useState(false);
-  const [isStrikethrough, setIsStrikethrough] = useState(false);
-  const [isCode, setIsCode] = useState(false);
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection();
-    if ($isRangeSelection(selection)) {
-      const anchorNode = selection.anchor.getNode();
-      const element =
-        anchorNode.getKey() === "root"
-          ? anchorNode
-          : anchorNode.getTopLevelElementOrThrow();
-      const elementKey = element.getKey();
-      const elementDOM = editor.getElementByKey(elementKey);
-      if (elementDOM !== null) {
-        setSelectedElementKey(elementKey);
-        if ($isListNode(element)) {
-          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
-          const type = parentList ? parentList.getTag() : element.getTag();
-          if(type === "ul" || type === "ol") {
-            setListType(type);
-          } else {
-            setBlockType(type);
-          }
-        } else {
-          const type = $isHeadingNode(element)
-            ? element.getTag()
-            : element.getType();
-            if(type === "ul" || type === "ol") {
-              setListType(type);
-            } else{
-              setBlockType(type);
-            }
-          if ($isCodeNode(element)) {
-            setCodeLanguage(element.getLanguage() || getDefaultCodeLanguage());
-          }
-        }
-      }
-      // Update text format
-      setIsBold(selection.hasFormat("bold"));
-      setIsItalic(selection.hasFormat("italic"));
-      setIsUnderline(selection.hasFormat("underline"));
-      setIsStrikethrough(selection.hasFormat("strikethrough"));
-      setIsCode(selection.hasFormat("code"));
-      setIsRTL($isParentElementRTL(selection));
-
-      // Update links
-      const node = getSelectedNode(selection);
-      const parent = node.getParent();
-      if ($isLinkNode(parent) || $isLinkNode(node)) {
-        setIsLink(true);
-      } else {
-        setIsLink(false);
-      }
-    }
-  }, [editor]);
-
-  useEffect(() => {
-    return mergeRegister(
-      editor.registerUpdateListener(({ editorState }) => {
-        editorState.read(() => {
-          updateToolbar();
-        });
-      }),
-      editor.registerCommand(
-        SELECTION_CHANGE_COMMAND,
-        (_payload, newEditor) => {
-          updateToolbar();
-          return false;
-        },
-        LowPriority
-      ),
-      editor.registerCommand(
-        CAN_UNDO_COMMAND,
-        (payload) => {
-          setCanUndo(payload);
-          return false;
-        },
-        LowPriority
-      ),
-      editor.registerCommand(
-        CAN_REDO_COMMAND,
-        (payload) => {
-          setCanRedo(payload);
-          return false;
-        },
-        LowPriority
-      )
-    );
-  }, [editor, updateToolbar]);
-
-  const codeLanguges = useMemo(() => getCodeLanguages(), []);
-  const onCodeLanguageSelect = useCallback(
-    (e) => {
-      editor.update(() => {
-        if (selectedElementKey !== null) {
-          const node = $getNodeByKey(selectedElementKey);
-          if ($isCodeNode(node)) {
-            node.setLanguage(e.target.value);
-          }
-        }
-      });
-    },
-    [editor, selectedElementKey]
-  );
-
-  const insertLink = useCallback(() => {
-    if (!isLink) {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
-    } else {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-    }
-  }, [editor, isLink]);
-
-  return (
-    <div className="toolbar" ref={toolbarRef}>
-      <button
-        disabled={!canUndo}
-        onClick={() => {
-          editor.dispatchCommand(UNDO_COMMAND);
-        }}
-        className="toolbar-item spaced"
-        aria-label="Undo"
-      >
-        <i className="format undo" />
-      </button>
-      <button
-        disabled={!canRedo}
-        onClick={() => {
-          editor.dispatchCommand(REDO_COMMAND);
-        }}
-        className="toolbar-item"
-        aria-label="Redo"
-      >
-        <i className="format redo" />
-      </button>
-      <Divider />
-      {supportedBlockTypes.has(blockType) && (
-        <>
-          <button
-            className="toolbar-item block-controls"
-            onClick={() =>
-              setShowBlockOptionsDropDown(!showBlockOptionsDropDown)
-            }
-            aria-label="Formatting Options"
-          >
-            <span className={"icon block-type " + blockType} />
-            <span className="text">{blockTypeToBlockName[blockType]}</span>
-            <i className="chevron-down" />
-          </button>
-          {showBlockOptionsDropDown &&
-            createPortal(
-              <BlockOptionsDropdownList
-                editor={editor}
-                blockType={blockType}
-                toolbarRef={toolbarRef}
-                setShowBlockOptionsDropDown={setShowBlockOptionsDropDown}
-              />,
-              document.body
-            )}
-          <Divider />
-        </>
-      )}
-            {supportedListTypes.has(listType) && (
-        <>
-          <button
-            className="toolbar-item block-controls"
-            onClick={() =>
-              setShowListOptionsDropDown(!showListOptionsDropDown)
-            }
-            aria-label="Formatting Options"
-          >
-            <span className={"icon block-type " + listType} />
-            <span className="text">{ListTypeToListName[listType]}</span>
-            <i className="chevron-down" />
-          </button>
-          {showListOptionsDropDown &&
-            createPortal(
-              <ListOptionsDropdownList
-                editor={editor}
-                listType={listType}
-                toolbarRef={toolbarRef}
-                setShowListOptionsDropDown={setShowListOptionsDropDown}
-              />,
-              document.body
-            )}
-          <Divider />
-        </>
-      )}
-        <>
-          <button
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-            }}
-            className={"toolbar-item spaced " + (isBold ? "active" : "")}
-            aria-label="Format Bold"
-          >
-            <i className="format bold" />
-          </button>
-          <button
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-            }}
-            className={"toolbar-item spaced " + (isItalic ? "active" : "")}
-            aria-label="Format Italics"
-          >
-            <i className="italic format" />
-          </button>
-          <button
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
-            }}
-            className={"toolbar-item spaced " + (isUnderline ? "active" : "")}
-            aria-label="Format Underline"
-          >
-            <i className="underline format" />
-          </button>
-          <button
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
-            }}
-            className={
-              "toolbar-item spaced " + (isStrikethrough ? "active" : "")
-            }
-            aria-label="Format Strikethrough"
-          >
-            <i className="format strikethrough" />
-          </button>
-          <button
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
-            }}
-            className={"toolbar-item spaced " + (isCode ? "active" : "")}
-            aria-label="Insert Code"
-          >
-            <i className="format code" />
-          </button>
-          <button
-            onClick={insertLink}
-            className={"toolbar-item spaced " + (isLink ? "active" : "")}
-            aria-label="Insert Link"
-          >
-            <i className="format link" />
-          </button>
-          {isLink &&
-            createPortal(<FloatingLinkEditor editor={editor} />, document.body)}
-          <Divider />
-          <button
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "left");
-            }}
-            className="toolbar-item spaced"
-            aria-label="Left Align"
-          >
-            <i className="format left-align" />
-          </button>
-          <button
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "center");
-            }}
-            className="toolbar-item spaced"
-            aria-label="Center Align"
-          >
-            <i className="format center-align" />
-          </button>
-          <button
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "right");
-            }}
-            className="toolbar-item spaced"
-            aria-label="Right Align"
-          >
-            <i className="format right-align" />
-          </button>
-          <button
-            onClick={() => {
-              editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, "justify");
-            }}
-            className="toolbar-item"
-            aria-label="Justify Align"
-          >
-            <i className="format justify-align" />
-          </button>{" "}
-        </>
-    </div>
-  );
-}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
new file mode 100644
index 00000000000000..f8a7c064e9091a
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
@@ -0,0 +1,518 @@
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from "@lexical/html";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import {
+  INSERT_ORDERED_LIST_COMMAND,
+  INSERT_UNORDERED_LIST_COMMAND,
+  REMOVE_LIST_COMMAND,
+  $isListNode,
+  ListNode,
+} from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
+import { $wrapNodes, $isAtNodeEnd } from "@lexical/selection";
+import { $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
+import {
+  SELECTION_CHANGE_COMMAND,
+  FORMAT_TEXT_COMMAND,
+  $getSelection,
+  $isRangeSelection,
+  $createParagraphNode,
+  RangeSelection,
+  NodeSelection,
+  GridSelection,
+  $getRoot,
+  $insertNodes,
+} from "lexical";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { TextEditorProps } from "../Editor";
+
+const LowPriority = 1;
+
+const supportedBlockTypes = new Set(["paragraph", "h1", "h2", "ul", "ol"]);
+
+interface BlockType {
+  [key: string]: string;
+}
+
+const blockTypeToBlockName: BlockType = {
+  h1: "Large Heading",
+  h2: "Small Heading",
+  ol: "Numbered List",
+  paragraph: "Normal",
+  ul: "Bulleted List",
+};
+
+function Divider() {
+  return <div className="divider" />;
+}
+
+function positionEditorElement(editor: any, rect: any) {
+  if (rect === null) {
+    editor.style.opacity = "0";
+    editor.style.top = "-1000px";
+    editor.style.left = "-1000px";
+  } else {
+    editor.style.opacity = "1";
+    editor.style.top = `${rect.top + rect.height + window.pageYOffset + 10}px`;
+    editor.style.left = `${rect.left + window.pageXOffset - editor.offsetWidth / 2 + rect.width / 2}px`;
+  }
+}
+
+function FloatingLinkEditor({ editor }: any) {
+  const editorRef = useRef<HTMLInputElement>(null);
+  const mouseDownRef = useRef(false);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [linkUrl, setLinkUrl] = useState("");
+  const [isEditMode, setEditMode] = useState(false);
+  const [lastSelection, setLastSelection] = useState<RangeSelection | NodeSelection | GridSelection | null>(
+    null
+  );
+
+  const updateLinkEditor = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent)) {
+        setLinkUrl(parent.getURL());
+      } else if ($isLinkNode(node)) {
+        setLinkUrl(node.getURL());
+      } else {
+        setLinkUrl("");
+      }
+    }
+    const editorElem = editorRef.current;
+    const nativeSelection = window.getSelection();
+    const activeElement = document.activeElement;
+
+    if (editorElem === null) {
+      return;
+    }
+
+    const rootElement = editor.getRootElement();
+    if (
+      selection !== null &&
+      !nativeSelection?.isCollapsed &&
+      rootElement !== null &&
+      rootElement.contains(nativeSelection?.anchorNode)
+    ) {
+      const domRange = nativeSelection?.getRangeAt(0);
+      let rect;
+      if (nativeSelection?.anchorNode === rootElement) {
+        let inner = rootElement;
+        while (inner.firstElementChild != null) {
+          inner = inner.firstElementChild;
+        }
+        rect = inner.getBoundingClientRect();
+      } else {
+        rect = domRange?.getBoundingClientRect();
+      }
+      if (!mouseDownRef.current) {
+        positionEditorElement(editorElem, rect);
+      }
+
+      setLastSelection(selection);
+    } else if (!activeElement || activeElement.className !== "link-input") {
+      positionEditorElement(editorElem, null);
+      setLastSelection(null);
+      setEditMode(false);
+      setLinkUrl("");
+    }
+
+    return true;
+  }, [editor]);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }: any) => {
+        editorState.read(() => {
+          updateLinkEditor();
+        });
+      }),
+
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        () => {
+          updateLinkEditor();
+          return true;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    editor.getEditorState().read(() => {
+      updateLinkEditor();
+    });
+  }, [editor, updateLinkEditor]);
+
+  useEffect(() => {
+    if (isEditMode && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isEditMode]);
+
+  return (
+    <div ref={editorRef} className="link-editor">
+      {isEditMode ? (
+        <input
+          ref={inputRef}
+          className="link-input"
+          value={linkUrl}
+          onChange={(event) => {
+            setLinkUrl(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              if (lastSelection !== null) {
+                if (linkUrl !== "") {
+                  editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
+                }
+                setEditMode(false);
+              }
+            } else if (event.key === "Escape") {
+              event.preventDefault();
+              setEditMode(false);
+            }
+          }}
+        />
+      ) : (
+        <>
+          <div className="link-input">
+            <a href={linkUrl} target="_blank" rel="noopener noreferrer">
+              {linkUrl}
+            </a>
+            <div
+              className="link-edit"
+              role="button"
+              tabIndex={0}
+              onMouseDown={(event) => event.preventDefault()}
+              onClick={() => {
+                setEditMode(true);
+              }}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+function Select({ onChange, className, options, value }: any) {
+  return (
+    <select className={className} onChange={onChange} value={value}>
+      <option hidden={true} value="" />
+      {options.map((option: any) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+function getSelectedNode(selection: any) {
+  const anchor = selection.anchor;
+  const focus = selection.focus;
+  const anchorNode = selection.anchor.getNode();
+  const focusNode = selection.focus.getNode();
+  if (anchorNode === focusNode) {
+    return anchorNode;
+  }
+  const isBackward = selection.isBackward();
+  if (isBackward) {
+    return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+  } else {
+    return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+  }
+}
+
+function BlockOptionsDropdownList({ editor, blockType, toolbarRef, setShowBlockOptionsDropDown }: any) {
+  const dropDownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current;
+    const dropDown = dropDownRef.current;
+
+    if (toolbar !== null && dropDown) {
+      const { top, left } = toolbar.getBoundingClientRect();
+      dropDown.style.top = `${top + 40}px`;
+      dropDown.style.left = `${left}px`;
+    }
+  }, [dropDownRef, toolbarRef]);
+
+  useEffect(() => {
+    const dropDown = dropDownRef.current;
+    const toolbar = toolbarRef.current;
+
+    if (dropDown && toolbar !== null) {
+      const handle = (event: any) => {
+        const target = event.target;
+
+        if (!dropDown.contains(target) && !toolbar.contains(target)) {
+          setShowBlockOptionsDropDown(false);
+        }
+      };
+      document.addEventListener("click", handle);
+
+      return () => {
+        document.removeEventListener("click", handle);
+      };
+    }
+  }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
+
+  const formatParagraph = () => {
+    if (blockType !== "paragraph") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createParagraphNode());
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatLargeHeading = () => {
+    if (blockType !== "h1") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h1"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatSmallHeading = () => {
+    if (blockType !== "h2") {
+      editor.update(() => {
+        const selection = $getSelection();
+
+        if ($isRangeSelection(selection)) {
+          $wrapNodes(selection, () => $createHeadingNode("h2"));
+        }
+      });
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatBulletList = () => {
+    if (blockType !== "ul") {
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  const formatNumberedList = () => {
+    if (blockType !== "ol") {
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+    } else {
+      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+    }
+    setShowBlockOptionsDropDown(false);
+  };
+
+  return (
+    <div className="dropdown" ref={dropDownRef}>
+      <button type="button" className="item" onClick={formatParagraph}>
+        <span className="icon paragraph" />
+        <span className="text">Normal</span>
+        {blockType === "paragraph" && <span className="active" />}
+      </button>
+      <button type="button" className="item" onClick={formatBulletList}>
+        <span className="icon bullet-list" />
+        <span className="text">Bullet List</span>
+        {blockType === "ul" && <span className="active" />}
+      </button>
+      <button type="button" className="item" onClick={formatNumberedList}>
+        <span className="icon numbered-list" />
+        <span className="text">Numbered List</span>
+        {blockType === "ol" && <span className="active" />}
+      </button>
+      <button type="button" className="item" onClick={formatLargeHeading}>
+        <span className="icon large-heading" />
+        <span className="text">Large Heading</span>
+        {blockType === "h1" && <span className="active" />}
+      </button>
+      <button type="button" className="item" onClick={formatSmallHeading}>
+        <span className="icon small-heading" />
+        <span className="text">Small Heading</span>
+        {blockType === "h2" && <span className="active" />}
+      </button>
+    </div>
+  );
+}
+
+export default function ToolbarPlugin(props: TextEditorProps) {
+  const [editor] = useLexicalComposerContext();
+  const toolbarRef = useRef(null);
+  const [blockType, setBlockType] = useState("paragraph");
+  const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(false);
+  const [isLink, setIsLink] = useState(false);
+  const [isBold, setIsBold] = useState(false);
+  const [isItalic, setIsItalic] = useState(false);
+  const [isUnderline, setIsUnderline] = useState(false);
+
+  const updateToolbar = useCallback(() => {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      const anchorNode = selection.anchor.getNode();
+      const element = anchorNode.getKey() === "root" ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+      const elementKey = element.getKey();
+      const elementDOM = editor.getElementByKey(elementKey);
+      if (elementDOM !== null) {
+        if ($isListNode(element)) {
+          const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+          const type = parentList ? parentList.getTag() : element.getTag();
+          setBlockType(type);
+        } else {
+          const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+          setBlockType(type);
+        }
+      }
+      // Update text format
+      setIsBold(selection.hasFormat("bold"));
+      setIsItalic(selection.hasFormat("italic"));
+      setIsUnderline(selection.hasFormat("underline"));
+
+      // Update links
+      const node = getSelectedNode(selection);
+      const parent = node.getParent();
+      if ($isLinkNode(parent) || $isLinkNode(node)) {
+        setIsLink(true);
+      } else {
+        setIsLink(false);
+      }
+    }
+  }, [editor]);
+
+  useEffect(() => {
+    editor.update(() => {
+      // In the browser you can use the native DOMParser API to parse the HTML string.
+      const parser = new DOMParser();
+      const dom = parser.parseFromString(
+        props.form.getValues(`steps.${props.stepNumber - 1}.reminderBody`) || "",
+        "text/html"
+      );
+
+      // Once you have the DOM instance it's easy to generate LexicalNodes.
+      const nodes = $generateNodesFromDOM(editor, dom);
+
+      // Select the root
+      $getRoot().select();
+
+      // Insert them at a selection.
+      $insertNodes(nodes);
+
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          const textInHtml = $generateHtmlFromNodes(editor);
+          props.form.setValue(`steps.${props.stepNumber - 1}.reminderBody`, textInHtml);
+        });
+      });
+    });
+  }, []);
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          updateToolbar();
+        });
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_payload, newEditor) => {
+          updateToolbar();
+          return false;
+        },
+        LowPriority
+      )
+    );
+  }, [editor, updateToolbar]);
+
+  const insertLink = useCallback(() => {
+    if (!isLink) {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://");
+    } else {
+      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+    }
+  }, [editor, isLink]);
+
+  return (
+    <div className="toolbar" ref={toolbarRef}>
+      {supportedBlockTypes.has(blockType) && (
+        <>
+          <button
+            type="button"
+            className="toolbar-item block-controls"
+            onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
+            aria-label="Formatting Options">
+            <span className={"icon block-type " + blockType} />
+            <span className="text">{blockTypeToBlockName[blockType as keyof BlockType]}</span>
+            <i className="chevron-down" />
+          </button>
+          {showBlockOptionsDropDown &&
+            createPortal(
+              <BlockOptionsDropdownList
+                editor={editor}
+                blockType={blockType}
+                toolbarRef={toolbarRef}
+                setShowBlockOptionsDropDown={setShowBlockOptionsDropDown}
+              />,
+              document.body
+            )}
+          <Divider />
+        </>
+      )}
+
+      <>
+        <button
+          type="button"
+          onClick={() => {
+            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+          }}
+          className={"toolbar-item spaced " + (isBold ? "active" : "")}
+          aria-label="Format Bold">
+          <i className="format bold" />
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+          }}
+          className={"toolbar-item spaced " + (isItalic ? "active" : "")}
+          aria-label="Format Italics">
+          <i className="format italic" />
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+          }}
+          className={"toolbar-item spaced " + (isUnderline ? "active" : "")}
+          aria-label="Format Underline">
+          <i className="format underline" />
+        </button>
+        <button
+          type="button"
+          onClick={insertLink}
+          className={"toolbar-item spaced " + (isLink ? "active" : "")}
+          aria-label="Insert Link">
+          <i className="format link" />
+        </button>
+        {isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}{" "}
+      </>
+    </div>
+  );
+}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.js b/packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.tsx
similarity index 100%
rename from packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.js
rename to packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.tsx
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index b4a55f5cf891bd..f62d82d4dc73fb 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -686,17 +686,17 @@ i.chevron-down {
 }
 
 .icon.paragraph {
-  background-image: url(images/icons/link.svg);
+  background-image: url(images/icons/text-paragraph.svg);
 }
 
 .icon.large-heading,
 .icon.h1 {
-  background-image: url(images/icons/link.svg);
+  background-image: url(images/icons/type-h1.svg);
 }
 
 .icon.small-heading,
 .icon.h2 {
-  background-image: url(images/icons/link.svg);
+  background-image: url(images/icons/type-h2.svg);
 }
 
 .icon.bullet-list,
@@ -709,50 +709,19 @@ i.chevron-down {
   background-image: url(images/icons/list-ol.svg);
 }
 
-.icon.quote {
-  background-image: url(images/icons/chat-square-quote.svg);
-}
-
-.icon.code {
-  background-image: url(images/icons/code.svg);
-}
 
 i.bold {
-  background-image: url(images/icons/link.svg);
+  background-image: url(images/icons/type-bold.svg);
 }
 
 i.italic {
-  background-image: url(images/icons/link.svg);
+  background-image: url(images/icons/type-italic.svg);
 }
 
 i.underline {
-  background-image: url(images/icons/link.svg);
-}
-
-i.strikethrough {
-  background-image: url(images/icons/link.svg);
-}
-
-i.code {
-  background-image: url(images/icons/code.svg);
+  background-image: url(images/icons/type-underline.svg);
 }
 
 i.link {
   background-image: url(images/icons/link.svg);
 }
-
-i.left-align {
-  background-image: url(images/icons/link.svg);
-}
-
-i.center-align {
-  background-image: url(images/icons/link.svg);
-}
-
-i.right-align {
-  background-image: url(images/icons/link.svg);
-}
-
-i.justify-align {
-  background-image: url(images/icons/link.svg);
-}
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index cd985ce8a62fec..29242409d67328 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -31,9 +31,8 @@ import {
 } from "../../lib/getOptions";
 import { translateVariablesToEnglish } from "../../lib/variableTranslations";
 import type { FormValues } from "../../pages/v2/workflow";
-import TextEditor from "./TextEditor/TextEditor";
-import { TimeTimeUnitInput } from "./TimeTimeUnitInput";
 import Editor from "./TextEditor/Editor";
+import { TimeTimeUnitInput } from "./TimeTimeUnitInput";
 
 type WorkflowStepProps = {
   step?: WorkflowStep;
@@ -138,7 +137,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
     return (
       <>
         <div className="flex justify-center">
-          <div className="w-full bg-white border border-gray-200 rounded-md min-w-80 p-7">
+          <div className="min-w-80 w-full rounded-md border border-gray-200 bg-white p-7">
             <div className="flex">
               <div className="mt-[3px] mr-5 flex h-5 w-5 items-center justify-center rounded-full bg-gray-100 p-1 text-xs font-medium">
                 1
@@ -148,7 +147,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 <div className="text-sm text-gray-600">{t("when_something_happens")}</div>
               </div>
             </div>
-            <div className="border-t border-gray-200 my-7" />
+            <div className="my-7 border-t border-gray-200" />
             <Label>{t("when")}</Label>
             <Controller
               name="trigger"
@@ -211,11 +210,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
     return (
       <>
-        <div className="flex justify-center my-3">
+        <div className="my-3 flex justify-center">
           <Icon.FiArrowDown className="stroke-[1.5px] text-3xl text-gray-500" />
         </div>
         <div className="flex justify-center">
-          <div className="flex w-full bg-white border border-gray-200 rounded-md min-w-80 p-7">
+          <div className="min-w-80 flex w-full rounded-md border border-gray-200 bg-white p-7">
             <div className="w-full">
               <div className="flex">
                 <div className="w-full">
@@ -264,7 +263,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </Dropdown>
                 </div>
               </div>
-              <div className="border-t border-gray-200 my-7" />
+              <div className="my-7 border-t border-gray-200" />
               <div>
                 <Label>{t("do_this")}</Label>
                 <Controller
@@ -328,7 +327,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 )}
               </div>
               {isPhoneNumberNeeded && (
-                <div className="p-4 mt-5 rounded-md bg-gray-50">
+                <div className="mt-5 rounded-md bg-gray-50 p-4">
                   <Label>{t("custom_phone_number")}</Label>
                   <PhoneInput<FormValues>
                     control={form.control}
@@ -347,7 +346,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 </div>
               )}
               {isEmailAddressNeeded && (
-                <div className="p-4 mt-5 rounded-md bg-gray-50">
+                <div className="mt-5 rounded-md bg-gray-50 p-4">
                   <EmailField
                     required
                     label={t("email_address")}
@@ -380,11 +379,11 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                 />
               </div>
               {isCustomReminderBodyNeeded && (
-                <div className="p-4 pt-2 mt-2 rounded-md bg-gray-50 md:p-6 md:pt-4">
+                <div className="mt-2 rounded-md bg-gray-50 p-4 pt-2 md:p-6 md:pt-4">
                   {isEmailSubjectNeeded && (
                     <div className="mb-6">
                       <div className="flex items-center">
-                        <Label className="flex-none mb-0">{t("subject")}</Label>
+                        <Label className="mb-0 flex-none">{t("subject")}</Label>
                         <div className="flex-grow text-right">
                           <AddVariablesDropdown addVariable={addVariable} isEmailSubject={true} />
                         </div>
@@ -412,17 +411,16 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   step.action !== WorkflowActions.SMS_NUMBER ? (
                     <>
                       <div className="mb-2 flex items-center pb-[1.5px]">
-                        <Label className="flex-none mb-0 ">
+                        <Label className="mb-0 flex-none ">
                           {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
                         </Label>
                       </div>
-                      <TextEditor form={form} stepNumber={step.stepNumber} />
-                      <Editor/>
+                      <Editor form={form} stepNumber={step.stepNumber} />
                     </>
                   ) : (
                     <>
                       <div className="flex items-center">
-                        <Label className="flex-none mb-0">
+                        <Label className="mb-0 flex-none">
                           {isEmailSubjectNeeded ? t("email_body") : t("text_message")}
                         </Label>
                         <div className="flex-grow text-right">
@@ -434,7 +432,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                           reminderBodyFormRef?.(e);
                           refReminderBody.current = e;
                         }}
-                        className="h-24 my-0"
+                        className="my-0 h-24"
                         required
                         {...restReminderBodyForm}
                       />
@@ -448,7 +446,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     )}
                   <div className="mt-3 ">
                     <button type="button" onClick={() => setIsAdditionalInputsDialogOpen(true)}>
-                      <div className="flex mt-2 text-sm text-gray-600">
+                      <div className="mt-2 flex text-sm text-gray-600">
                         <Icon.FiHelpCircle className="mt-[3px] mr-2 h-3 w-3" />
                         <p className="text-left">{t("using_additional_inputs_as_variables")}</p>
                       </div>
@@ -459,7 +457,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               {form.getValues(`steps.${step.stepNumber - 1}.action`) !== WorkflowActions.SMS_ATTENDEE && (
                 <Button
                   type="button"
-                  className="w-full mt-7"
+                  className="mt-7 w-full"
                   onClick={() => {
                     let isEmpty = false;
                     if (!form.getValues(`steps.${step.stepNumber - 1}.sendTo`) && isPhoneNumberNeeded) {
@@ -554,21 +552,21 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
           <DialogContent useOwnActionButtons type="creation" className="sm:max-w-[610px] md:h-[570px]">
             <div className="-m-3 h-[430px] overflow-x-hidden overflow-y-scroll sm:m-0">
               <h1 className="w-full text-xl font-semibold ">{t("how_additional_inputs_as_variables")}</h1>
-              <div className="p-3 rounded-md mb-7 mt-7 bg-gray-50 sm:p-4">
-                <p className="font-medium test-sm">{t("format")}</p>
-                <ul className="mt-2 ml-5 text-gray-900 list-disc">
+              <div className="mb-7 mt-7 rounded-md bg-gray-50 p-3 sm:p-4">
+                <p className="test-sm font-medium">{t("format")}</p>
+                <ul className="mt-2 ml-5 list-disc text-gray-900">
                   <li>{t("uppercase_for_letters")}</li>
                   <li>{t("replace_whitespaces_underscores")}</li>
                   <li>{t("ignore_special_characters")}</li>
                 </ul>
                 <div className="mt-6">
-                  <p className="w-full font-medium test-sm">{t("example_1")}</p>
-                  <div className="grid grid-cols-12 mt-2">
-                    <div className="col-span-5 mr-2 text-gray-600 test-sm">{t("additional_input_label")}</div>
-                    <div className="col-span-7 text-gray-900 test-sm">{t("company_size")}</div>
-                    <div className="w-full col-span-5 text-gray-600 test-sm">{t("variable")}</div>
+                  <p className="test-sm w-full font-medium">{t("example_1")}</p>
+                  <div className="mt-2 grid grid-cols-12">
+                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
+                    <div className="test-sm col-span-7 text-gray-900">{t("company_size")}</div>
+                    <div className="test-sm col-span-5 w-full text-gray-600">{t("variable")}</div>
 
-                    <div className="col-span-7 text-gray-900 break-words test-sm">
+                    <div className="test-sm col-span-7 break-words text-gray-900">
                       {" "}
                       {`{${t("company_size")
                         .replace(/[^a-zA-Z0-9 ]/g, "")
@@ -579,12 +577,12 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   </div>
                 </div>
                 <div className="mt-6">
-                  <p className="w-full font-medium test-sm">{t("example_2")}</p>
-                  <div className="grid grid-cols-12 mt-2">
-                    <div className="col-span-5 mr-2 text-gray-600 test-sm">{t("additional_input_label")}</div>
-                    <div className="col-span-7 text-gray-900 test-sm">{t("what_help_needed")}</div>
-                    <div className="col-span-5 text-gray-600 test-sm">{t("variable")}</div>
-                    <div className="col-span-7 text-gray-900 break-words test-sm">
+                  <p className="test-sm w-full font-medium">{t("example_2")}</p>
+                  <div className="mt-2 grid grid-cols-12">
+                    <div className="test-sm col-span-5 mr-2 text-gray-600">{t("additional_input_label")}</div>
+                    <div className="test-sm col-span-7 text-gray-900">{t("what_help_needed")}</div>
+                    <div className="test-sm col-span-5 text-gray-600">{t("variable")}</div>
+                    <div className="test-sm col-span-7 break-words text-gray-900">
                       {" "}
                       {`{${t("what_help_needed")
                         .replace(/[^a-zA-Z0-9 ]/g, "")

From 92f75fea652172d12ced703270aef2d5cfd757f4 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 15 Nov 2022 12:32:20 +0100
Subject: [PATCH 21/43] add pencile for link-editor

---
 .../v2/TextEditor/images/icons/pencile-fill.svg     |  3 +++
 .../v2/TextEditor/plugins/ToolbarPlugin.tsx         | 13 +------------
 .../components/v2/TextEditor/stylesEditor.css       |  2 +-
 3 files changed, 5 insertions(+), 13 deletions(-)
 create mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/pencile-fill.svg

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/pencile-fill.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/pencile-fill.svg
new file mode 100644
index 00000000000000..b2ba1fb28f2c5f
--- /dev/null
+++ b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/pencile-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
+  <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
+</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
index f8a7c064e9091a..7504d68d58fdde 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
@@ -361,7 +361,6 @@ export default function ToolbarPlugin(props: TextEditorProps) {
   const [isLink, setIsLink] = useState(false);
   const [isBold, setIsBold] = useState(false);
   const [isItalic, setIsItalic] = useState(false);
-  const [isUnderline, setIsUnderline] = useState(false);
 
   const updateToolbar = useCallback(() => {
     const selection = $getSelection();
@@ -383,7 +382,6 @@ export default function ToolbarPlugin(props: TextEditorProps) {
       // Update text format
       setIsBold(selection.hasFormat("bold"));
       setIsItalic(selection.hasFormat("italic"));
-      setIsUnderline(selection.hasFormat("underline"));
 
       // Update links
       const node = getSelectedNode(selection);
@@ -493,16 +491,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
           }}
           className={"toolbar-item spaced " + (isItalic ? "active" : "")}
           aria-label="Format Italics">
-          <i className="format italic" />
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
-          }}
-          className={"toolbar-item spaced " + (isUnderline ? "active" : "")}
-          aria-label="Format Underline">
-          <i className="format underline" />
+          <i className="italic format" />
         </button>
         <button
           type="button"
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index f62d82d4dc73fb..ac9716554bb998 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -632,7 +632,7 @@ i.chevron-down {
 }
 
 .link-editor div.link-edit {
-  background-image: url(images/icons/link.svg);
+  background-image: url(images/icons/pencile-fill.svg);
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;

From 047cbb85fe7c38ffa32c8783cdbf31e3448772f1 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 15 Nov 2022 13:13:14 +0100
Subject: [PATCH 22/43] remove TreeViewPlugin

---
 .../components/v2/TextEditor/Editor.tsx       | 35 ++++++++++---------
 .../v2/TextEditor/plugins/TreeViewPlugin.tsx  | 16 ---------
 2 files changed, 18 insertions(+), 33 deletions(-)
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.tsx

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
index 9e0bfc783918c9..8e366a755d07c8 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
@@ -56,23 +56,24 @@ const editorConfig = {
 
 export default function Editor(props: TextEditorProps) {
   return (
-    <LexicalComposer initialConfig={editorConfig}>
-      <div className="editor-container">
-        <ToolbarPlugin form={props.form} stepNumber={props.stepNumber} />
-        <div className="editor-inner">
-          <RichTextPlugin
-            contentEditable={<ContentEditable className="editor-input" />}
-            placeholder={<Placeholder />}
-          />
-          <TreeViewPlugin />
-          <AutoFocusPlugin />
-          <ListPlugin />
-          <LinkPlugin />
-          <AutoLinkPlugin />
-          <ListMaxIndentLevelPlugin maxDepth={7} />
-          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+    <div className="editor">
+      <LexicalComposer initialConfig={editorConfig}>
+        <div className="editor-container">
+          <ToolbarPlugin form={props.form} stepNumber={props.stepNumber} />
+          <div className="editor-inner">
+            <RichTextPlugin
+              contentEditable={<ContentEditable className="editor-input" />}
+              placeholder={<Placeholder />}
+            />
+            <AutoFocusPlugin />
+            <ListPlugin />
+            <LinkPlugin />
+            <AutoLinkPlugin />
+            <ListMaxIndentLevelPlugin maxDepth={7} />
+            <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
+          </div>
         </div>
-      </div>
-    </LexicalComposer>
+      </LexicalComposer>
+    </div>
   );
 }
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.tsx b/packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.tsx
deleted file mode 100644
index 45474a0e170726..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/TreeViewPlugin.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { TreeView } from "@lexical/react/LexicalTreeView";
-
-export default function TreeViewPlugin() {
-  const [editor] = useLexicalComposerContext();
-  return (
-    <TreeView
-      viewClassName="tree-view-output"
-      timeTravelPanelClassName="debug-timetravel-panel"
-      timeTravelButtonClassName="debug-timetravel-button"
-      timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
-      timeTravelPanelButtonClassName="debug-timetravel-panel-button"
-      editor={editor}
-    />
-  );
-}

From d577bdc72a15b2db4fbc4b6e3a81a281f37f6728 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 15 Nov 2022 13:17:47 +0100
Subject: [PATCH 23/43] clean up css file

---
 .../components/v2/TextEditor/Editor.tsx       |   1 -
 .../v2/TextEditor/plugins/ToolbarPlugin.tsx   |   3 +-
 .../components/v2/TextEditor/styles.css       | 241 -----------------
 .../components/v2/TextEditor/stylesEditor.css | 253 +-----------------
 4 files changed, 10 insertions(+), 488 deletions(-)
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/styles.css

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
index 8e366a755d07c8..9becd8e6f1ae31 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
@@ -18,7 +18,6 @@ import ExampleTheme from "./ExampleTheme";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import ToolbarPlugin from "./plugins/ToolbarPlugin";
-import TreeViewPlugin from "./plugins/TreeViewPlugin";
 import "./stylesEditor.css";
 
 function Placeholder() {
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
index 7504d68d58fdde..b335b54f920826 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
@@ -470,7 +470,6 @@ export default function ToolbarPlugin(props: TextEditorProps) {
               />,
               document.body
             )}
-          <Divider />
         </>
       )}
 
@@ -491,7 +490,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
           }}
           className={"toolbar-item spaced " + (isItalic ? "active" : "")}
           aria-label="Format Italics">
-          <i className="italic format" />
+          <i className="format italic" />
         </button>
         <button
           type="button"
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/styles.css b/packages/features/ee/workflows/components/v2/TextEditor/styles.css
deleted file mode 100644
index 5805619d4cc842..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/styles.css
+++ /dev/null
@@ -1,241 +0,0 @@
-.rdw-option-wrapper {
-  border: 1px solid #F1F1F1;
-  padding: 5px;
-  width: 30px;
-  height: 30px;
-  border-radius: 6px;
-  margin: 0 2px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  background: white;
-  text-transform: capitalize;
-}
-.rdw-option-wrapper:hover {
-  background-color: #F1F1F1;
-}
-.rdw-option-wrapper:active {
-  box-shadow: 1px 1px 0px #BFBDBD inset;
-}
-.rdw-option-active {
-  box-shadow: 1px 1px 0px #BFBDBD inset;
-}
-.rdw-option-disabled {
-  opacity: 0.3;
-  cursor: default;
-}
-
-.rdw-dropdown-wrapper {
-  height: 30px;
-  background: white;
-  cursor: pointer;
-  width: 30px;
-  border: 1px solid #F1F1F1;
-  border-radius: 6px;
-  margin: 0 2px;
-  text-transform: capitalize;
-  background: white;
-}
-.rdw-dropdown-wrapper:focus {
-  outline: none;
-}
-.rdw-dropdown-wrapper:hover {
-  background-color: #F1F1F1;
-}
-.rdw-dropdown-wrapper:active {
-  box-shadow: 1px 1px 0px #BFBDBD inset;
-}
-.rdw-dropdown-carettoopen {
-  height: 0px;
-  width: 0px;
-  position: absolute;
-  top: 35%;
-  right: 10%;
-  border-top: 6px solid black;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-.rdw-dropdown-carettoclose {
-  height: 0px;
-  width: 0px;
-  position: absolute;
-  top: 35%;
-  right: 10%;
-  border-bottom: 6px solid black;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-.rdw-dropdown-selectedtext {
-  display: flex;
-  position: relative;
-  height: 100%;
-  align-items: center;
-  padding: 0 5px;
-}
-.rdw-dropdown-optionwrapper {
-  z-index: 100;
-  position: relative;
-  border: 1px solid #F1F1F1;
-  width: 100%;
-  background: white;
-  border-radius: 2px;
-  margin-top: 1px;
-  padding: 0;
-  max-height: 250px;
-  overflow-y: scroll;
-  border-radius: 6px;
-
-}
-.rdw-dropdown-optionwrapper:hover {
-  box-shadow: 1px 1px 0px #BFBDBD;
-  background-color: #FFFFFF;
-}
-
-.rdw-dropdownoption-default {
-  min-height: 25px;
-  display: flex;
-  align-items: center;
-  padding: 0 5px;
-}
-.rdw-dropdownoption-highlighted {
-  background: #F1F1F1;
-}
-.rdw-dropdownoption-active {
-  background: #f5f5f5;
-}
-
-.rdw-inline-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
-}
-.rdw-inline-dropdown {
-  width: 50px;
-}
-.rdw-inline-dropdownoption {
-  height: 40px;
-  display: flex;
-  justify-content: center;
-}
-
-.rdw-fontsize-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
-}
-.rdw-fontsize-dropdown {
-  min-width: 42px;
-}
-.rdw-fontsize-option {
-  display: flex;
-  justify-content: center;
-}
-
-.rdw-list-wrapper {
-  display: flex;
-  align-items: center;
-  margin-bottom: 6px;
-  flex-wrap: wrap
-}
-.rdw-list-dropdown {
-  width: 42px;
-}
-.rdw-list-dropdownOption {
-  height: 40px;
-  display: flex;
-  justify-content: center;
-}
-
-
-.rdw-editor-toolbar {
-  display: flex;
-  justify-content: flex-start;
-  background: white;
-  flex-wrap: wrap;
-  font-size: 15px;
-  margin-bottom: 5px;
-  padding: 5px 5px 0px 5px;
-
-  border-radius: 6px;
-  user-select: none;
-}
-.public-DraftStyleDefault-block {
-  margin: 14px 0;
-}
-.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset {
-  counter-reset: ol0;
-}
-
-.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 {
-  list-style-type: disc;
-}
-
-.rdw-link-decorator-wrapper {
-  position: relative;
-  color: blue;
-  text-decoration: underline;
-
-}
-
-.rdw-link-decorator-icon {
-  position: absolute;
-  left: 100%;
-  top: 0;
-  cursor: pointer;
-}
-
-.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset {
-  counter-reset: ol0;
-}
-.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset {
-  counter-reset: ol1;
-}
-.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset {
-  counter-reset: ol2;
-}
-.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset {
-  counter-reset: ol3;
-}
-.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset {
-  counter-reset: ol4;
-}
-
-.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before {
-  left: -36px;
-  position: absolute;
-  text-align: right;
-  width: 30px;
-}
-
-.public-DraftStyleDefault-unorderedListItem {
-  list-style-type: square;
-  position: relative;
-  margin: 10px;
-  font-sixe: 5px;
-}
-
-.rdw-editor-wrapper:hover {
-  border: 1px solid #9CA3AF;
-}
-
-.rdw-editor-main {
-  height: 100%;
-  max-height: 200px;
-  overflow: scroll;
-  box-sizing: border-box;
-}
-
-/**
- * Draft v0.9.1
- *
- * Copyright (c) 2013-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- */
-.DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index ac9716554bb998..ca413a4fbcc8ab 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -1,56 +1,27 @@
-body {
-  margin: 0;
-  background: #eee;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
-    sans-serif;
-  font-weight: 500;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.other h2 {
-  font-size: 18px;
-  color: #444;
-  margin-bottom: 7px;
-}
-
-.other a {
-  color: #777;
+.editor a {
+  color: #0000FF;
   text-decoration: underline;
   font-size: 14px;
 }
 
 
-
-.other ul {
-  padding: 0;
-  margin: 0;
-}
-
-ul {
+.editor ul {
   list-style: disc inside
 }
 
-ol {
+.editor ol {
   list-style: decimal inside
 }
 
-.App {
-  font-family: sans-serif;
-  text-align: center;
-}
-
-h1 {
+.editor h1 {
   font-size: 24px;
   color: #333;
 }
 
-.ltr {
-  text-align: left;
-}
-
-.rtl {
-  text-align: right;
+.editor h2 {
+  font-size: 18px;
+  color: #444;
+  margin-bottom: 7px;
 }
 
 .editor-container {
@@ -104,113 +75,11 @@ h1 {
   font-style: italic;
 }
 
-.editor-text-underline {
-  text-decoration: underline;
-}
-
-.editor-text-strikethrough {
-  text-decoration: line-through;
-}
-
-.editor-text-underlineStrikethrough {
-  text-decoration: underline line-through;
-}
-
-.editor-text-code {
-  background-color: rgb(240, 242, 245);
-  padding: 1px 0.25rem;
-  font-family: Menlo, Consolas, Monaco, monospace;
-  font-size: 94%;
-}
-
 .editor-link {
   color: rgb(33, 111, 219);
   text-decoration: none;
 }
 
-.tree-view-output {
-  display: block;
-  background: #222;
-  color: #fff;
-  padding: 5px;
-  font-size: 12px;
-  white-space: pre-wrap;
-  margin: 1px auto 10px auto;
-  max-height: 250px;
-  position: relative;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-  overflow: auto;
-  line-height: 14px;
-}
-
-.editor-code {
-  background-color: rgb(240, 242, 245);
-  font-family: Menlo, Consolas, Monaco, monospace;
-  display: block;
-  padding: 8px 8px 8px 52px;
-  line-height: 1.53;
-  font-size: 13px;
-  margin: 0;
-  margin-top: 8px;
-  margin-bottom: 8px;
-  tab-size: 2;
-  /* white-space: pre; */
-  overflow-x: auto;
-  position: relative;
-}
-
-.editor-code:before {
-  content: attr(data-gutter);
-  position: absolute;
-  background-color: #eee;
-  left: 0;
-  top: 0;
-  border-right: 1px solid #ccc;
-  padding: 8px;
-  color: #777;
-  white-space: pre-wrap;
-  text-align: right;
-  min-width: 25px;
-}
-.editor-code:after {
-  content: attr(data-highlight-language);
-  top: 0;
-  right: 3px;
-  padding: 3px;
-  font-size: 10px;
-  text-transform: uppercase;
-  position: absolute;
-  color: rgba(0, 0, 0, 0.5);
-}
-
-.editor-tokenComment {
-  color: slategray;
-}
-
-.editor-tokenPunctuation {
-  color: #999;
-}
-
-.editor-tokenProperty {
-  color: #905;
-}
-
-.editor-tokenSelector {
-  color: #690;
-}
-
-.editor-tokenOperator {
-  color: #9a6e3a;
-}
-
-.editor-tokenAttr {
-  color: #07a;
-}
-
-.editor-tokenVariable {
-  color: #e90;
-}
 
 .editor-tokenFunction {
   color: #dd4a68;
@@ -245,17 +114,6 @@ h1 {
   text-transform: uppercase;
 }
 
-.editor-quote {
-  margin: 0;
-  margin-left: 20px;
-  font-size: 15px;
-  color: rgb(101, 103, 107);
-  border-left-color: rgb(206, 208, 212);
-  border-left-width: 4px;
-  border-left-style: solid;
-  padding-left: 16px;
-}
-
 .editor-list-ol {
   padding: 0;
   margin: 0;
@@ -274,7 +132,6 @@ h1 {
 
 .editor-nested-listitem {
  list-style-type: none;
-
 }
 
 pre::-webkit-scrollbar {
@@ -287,69 +144,6 @@ pre::-webkit-scrollbar-thumb {
   background: #999;
 }
 
-.debug-timetravel-panel {
-  overflow: hidden;
-  padding: 0 0 10px 0;
-  margin: auto;
-  display: flex;
-}
-
-.debug-timetravel-panel-slider {
-  padding: 0;
-  flex: 8;
-}
-
-.debug-timetravel-panel-button {
-  padding: 0;
-  border: 0;
-  background: none;
-  flex: 1;
-  color: #fff;
-  font-size: 12px;
-}
-
-.debug-timetravel-panel-button:hover {
-  text-decoration: underline;
-}
-
-.debug-timetravel-button {
-  border: 0;
-  padding: 0;
-  font-size: 12px;
-  top: 10px;
-  right: 15px;
-  position: absolute;
-  background: none;
-  color: #fff;
-}
-
-.debug-timetravel-button:hover {
-  text-decoration: underline;
-}
-
-.emoji {
-  color: transparent;
-  background-size: 16px 16px;
-  background-position: center;
-  background-repeat: no-repeat;
-  vertical-align: middle;
-  margin: 0 -1px;
-}
-
-.emoji-inner {
-  padding: 0 0.15em;
-}
-
-.emoji-inner::selection {
-  color: transparent;
-  background-color: rgba(150, 150, 150, 0.4);
-}
-
-.emoji-inner::moz-selection {
-  color: transparent;
-  background-color: rgba(150, 150, 150, 0.4);
-}
-
 .toolbar {
   display: flex;
   margin-bottom: 1px;
@@ -393,10 +187,6 @@ pre::-webkit-scrollbar-thumb {
   background-image: url(images/icons/text-paragraph.svg);
 }
 
-.toolbar button.toolbar-item:disabled i.format {
-  opacity: 0.2;
-}
-
 .toolbar button.toolbar-item.active {
   background-color: rgba(223, 232, 250, 0.3);
 }
@@ -409,11 +199,6 @@ pre::-webkit-scrollbar-thumb {
   background-color: #eee;
 }
 
-.toolbar .divider {
-  width: 1px;
-  background-color: #eee;
-  margin: 0 4px;
-}
 
 .toolbar select.toolbar-item {
   border: 0;
@@ -430,11 +215,6 @@ pre::-webkit-scrollbar-thumb {
   text-overflow: ellipsis;
 }
 
-.toolbar select.code-language {
-  text-transform: capitalize;
-  width: 130px;
-}
-
 .toolbar .toolbar-item .text {
   display: flex;
   line-height: 20px;
@@ -498,14 +278,6 @@ i.chevron-down {
   background-image: url(images/icons/text-paragraph.svg);
 }
 
-#block-controls span.block-type {
-  background-size: contain;
-  display: block;
-  width: 18px;
-  height: 18px;
-  margin: 2px;
-}
-
 #block-controls span.block-type.paragraph {
   background-image: url(images/icons/link.svg);
 }
@@ -518,10 +290,6 @@ i.chevron-down {
   background-image: url(images/icons/link.svg);
 }
 
-#block-controls span.block-type.quote {
-  background-image: url(images/icons/chat-square-quote.svg);
-}
-
 #block-controls span.block-type.ul {
   background-image: url(images/icons/list-ul.svg);
 }
@@ -530,9 +298,6 @@ i.chevron-down {
   background-image: url(images/icons/list-ol.svg);
 }
 
-#block-controls span.block-type.code {
-  background-image: url(images/icons/code.svg);
-}
 
 .dropdown {
   z-index: 5;

From fdfd3137e5c9b1dcb4367ea7651b802238412f2f Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 15 Nov 2022 13:39:20 +0100
Subject: [PATCH 24/43] code clean up

---
 .../{pencile-fill.svg => pencil-fill.svg}     |  0
 .../components/v2/TextEditor/stylesEditor.css | 26 +++++++++++++------
 2 files changed, 18 insertions(+), 8 deletions(-)
 rename packages/features/ee/workflows/components/v2/TextEditor/images/icons/{pencile-fill.svg => pencil-fill.svg} (100%)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/pencile-fill.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/pencil-fill.svg
similarity index 100%
rename from packages/features/ee/workflows/components/v2/TextEditor/images/icons/pencile-fill.svg
rename to packages/features/ee/workflows/components/v2/TextEditor/images/icons/pencil-fill.svg
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index ca413a4fbcc8ab..157462fb340db6 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -1,9 +1,24 @@
+.editor {
+    margin: 0;
+    background: #eee;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
+      sans-serif;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
 .editor a {
   color: #0000FF;
   text-decoration: underline;
   font-size: 14px;
 }
 
+.other ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
 
 .editor ul {
   list-style: disc inside
@@ -104,6 +119,7 @@
   padding: 0;
 }
 
+
 .editor-heading-h2 {
   font-size: 15px;
   color: rgb(101, 103, 107);
@@ -114,14 +130,8 @@
   text-transform: uppercase;
 }
 
-.editor-list-ol {
-  padding: 0;
-  margin: 0;
-  margin-left: 16px;
-}
-
 .editor-list-ul ul {
-  padding: 0;
+  padding: 0px;
   margin: 0;
   margin-left: 0px;
 }
@@ -397,7 +407,7 @@ i.chevron-down {
 }
 
 .link-editor div.link-edit {
-  background-image: url(images/icons/pencile-fill.svg);
+  background-image: url(images/icons/pencil-fill.svg);
   background-size: 16px;
   background-position: center;
   background-repeat: no-repeat;

From 37496af383c57952190df7686a3a4daa910b1fd5 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 15 Nov 2022 13:53:27 +0100
Subject: [PATCH 25/43] add text indent for list

---
 .../ee/workflows/components/v2/TextEditor/stylesEditor.css    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index 157462fb340db6..e7ddeac5a7740f 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -19,6 +19,10 @@
   list-style-type: none;
 }
 
+.editor li {
+  padding-left: 1.28571429em;
+  text-indent: -1.28571429em;
+}
 
 .editor ul {
   list-style: disc inside

From 3fafcdef58e777bf3bc5467e0d441816702705d2 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 15 Nov 2022 14:05:52 +0100
Subject: [PATCH 26/43] improve editor design

---
 .../components/v2/TextEditor/stylesEditor.css       | 13 ++-----------
 1 file changed, 2 insertions(+), 11 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index e7ddeac5a7740f..220824ef87205d 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -1,12 +1,4 @@
-.editor {
-    margin: 0;
-    background: #eee;
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
-      sans-serif;
-    font-weight: 500;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
+
 .editor a {
   color: #0000FF;
   text-decoration: underline;
@@ -44,9 +36,7 @@
 }
 
 .editor-container {
-  margin: 20px auto 20px auto;
   border-radius: 2px;
-  max-width: 600px;
   color: #000;
   position: relative;
   line-height: 20px;
@@ -71,6 +61,7 @@
   outline: 0;
   padding: 15px 10px;
   caret-color: #444;
+  width: 100%
 }
 
 .editor-placeholder {

From ced7d35714858ca77e6dfd67db013f9763594f15 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 15 Nov 2022 14:47:40 +0100
Subject: [PATCH 27/43] fix style

---
 .../components/v2/TextEditor/stylesEditor.css | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index 220824ef87205d..d7fca050d58f09 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -36,7 +36,7 @@
 }
 
 .editor-container {
-  border-radius: 2px;
+  border-radius: 6px;
   color: #000;
   position: relative;
   line-height: 20px;
@@ -44,17 +44,24 @@
   text-align: left;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
+  border-color: #D1D5DB;
+  border-width: 1px;
+  padding: 1px
 }
 
 .editor-inner {
   background: #fff;
   position: relative;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  height: 300px;
+  overflow: scroll;
 }
 
 .editor-input {
   min-height: 150px;
   resize: none;
-  font-size: 15px;
+  font-size: 14px;
   caret-color: rgb(5, 5, 5);
   position: relative;
   tab-size: 1;
@@ -106,8 +113,7 @@
 }
 
 .editor-heading-h1 {
-  font-size: 24px;
-  color: rgb(5, 5, 5);
+  font-size: 19px;
   font-weight: 400;
   margin: 0;
   margin-bottom: 12px;
@@ -116,13 +122,11 @@
 
 
 .editor-heading-h2 {
-  font-size: 15px;
-  color: rgb(101, 103, 107);
-  font-weight: 700;
+  font-size: 17px;
+  font-weight: 400;
   margin: 0;
   margin-top: 10px;
   padding: 0;
-  text-transform: uppercase;
 }
 
 .editor-list-ul ul {
@@ -153,9 +157,9 @@ pre::-webkit-scrollbar-thumb {
   display: flex;
   margin-bottom: 1px;
   background: #fff;
-  padding: 4px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
+  padding: 2px;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
   vertical-align: middle;
 }
 

From 5e9e44185f1c0cf012d40d478046c7f592cd6f91 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 22 Nov 2022 09:53:56 +0100
Subject: [PATCH 28/43] slow resizing of editor

---
 .../ee/workflows/components/v2/TextEditor/stylesEditor.css     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index d7fca050d58f09..8a2f5159259fb9 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -54,8 +54,9 @@
   position: relative;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
-  height: 300px;
+  height: 200px;
   overflow: scroll;
+  resize: vertical;
 }
 
 .editor-input {

From 9315c7492cd36244b75dbfa6f7e0911db849b3f2 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 22 Nov 2022 10:07:37 +0100
Subject: [PATCH 29/43] fix that new data was removed when leaving tab

---
 packages/features/ee/workflows/pages/v2/workflow.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/features/ee/workflows/pages/v2/workflow.tsx b/packages/features/ee/workflows/pages/v2/workflow.tsx
index d25c8dd699417c..e60c3ca51583f1 100644
--- a/packages/features/ee/workflows/pages/v2/workflow.tsx
+++ b/packages/features/ee/workflows/pages/v2/workflow.tsx
@@ -99,6 +99,7 @@ function WorkflowPage() {
     data: workflow,
     isError,
     error,
+    isLoading,
   } = trpc.viewer.workflows.get.useQuery(
     { id: +workflowId },
     {
@@ -107,7 +108,7 @@ function WorkflowPage() {
   );
 
   useEffect(() => {
-    if (workflow) {
+    if (workflow && !isLoading) {
       setSelectedEventTypes(
         workflow.activeOn.map((active) => ({
           value: String(active.eventType.id),
@@ -147,7 +148,7 @@ function WorkflowPage() {
       form.setValue("activeOn", activeOn || []);
       setIsAllDataLoaded(true);
     }
-  }, [workflow]);
+  }, [isLoading]);
 
   const updateMutation = trpc.viewer.workflows.update.useMutation({
     onSuccess: async ({ workflow }) => {

From 046041bf66869abda0a1ad9a8a7f16b5eeeb56cb Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 22 Nov 2022 11:07:48 +0100
Subject: [PATCH 30/43] dont allow italic and bold at same time

---
 .../components/v2/TextEditor/plugins/ToolbarPlugin.tsx      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
index b335b54f920826..824db7a89a5188 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
@@ -478,6 +478,9 @@ export default function ToolbarPlugin(props: TextEditorProps) {
           type="button"
           onClick={() => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+            if (isItalic) {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+            }
           }}
           className={"toolbar-item spaced " + (isBold ? "active" : "")}
           aria-label="Format Bold">
@@ -487,6 +490,9 @@ export default function ToolbarPlugin(props: TextEditorProps) {
           type="button"
           onClick={() => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+            if (isBold) {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+            }
           }}
           className={"toolbar-item spaced " + (isItalic ? "active" : "")}
           aria-label="Format Italics">

From d17adbe89a647f0de6e71d8630c8db854fd1f6de Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 22 Nov 2022 11:09:09 +0100
Subject: [PATCH 31/43] code clean up

---
 .../components/v2/TextEditor/Editor.tsx       |   9 +-
 .../components/v2/TextEditor/stylesEditor.css | 100 +++---------------
 2 files changed, 17 insertions(+), 92 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
index 9becd8e6f1ae31..32fa56021b9110 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
@@ -20,10 +20,6 @@ import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import ToolbarPlugin from "./plugins/ToolbarPlugin";
 import "./stylesEditor.css";
 
-function Placeholder() {
-  return <div className="editor-placeholder">Enter some rich text...</div>;
-}
-
 export type TextEditorProps = {
   form: UseFormReturn<FormValues>;
   stepNumber: number;
@@ -60,10 +56,7 @@ export default function Editor(props: TextEditorProps) {
         <div className="editor-container">
           <ToolbarPlugin form={props.form} stepNumber={props.stepNumber} />
           <div className="editor-inner">
-            <RichTextPlugin
-              contentEditable={<ContentEditable className="editor-input" />}
-              placeholder={<Placeholder />}
-            />
+            <RichTextPlugin contentEditable={<ContentEditable className="editor-input" />} />
             <AutoFocusPlugin />
             <ListPlugin />
             <LinkPlugin />
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index 8a2f5159259fb9..b8cd035f09cd00 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -5,12 +5,6 @@
   font-size: 14px;
 }
 
-.other ul {
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-}
-
 .editor li {
   padding-left: 1.28571429em;
   text-indent: -1.28571429em;
@@ -24,26 +18,12 @@
   list-style: decimal inside
 }
 
-.editor h1 {
-  font-size: 24px;
-  color: #333;
-}
-
-.editor h2 {
-  font-size: 18px;
-  color: #444;
-  margin-bottom: 7px;
-}
-
 .editor-container {
   border-radius: 6px;
-  color: #000;
   position: relative;
   line-height: 20px;
   font-weight: 400;
   text-align: left;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
   border-color: #D1D5DB;
   border-width: 1px;
   padding: 1px
@@ -61,28 +41,12 @@
 
 .editor-input {
   min-height: 150px;
-  resize: none;
   font-size: 14px;
-  caret-color: rgb(5, 5, 5);
   position: relative;
   tab-size: 1;
   outline: 0;
   padding: 15px 10px;
-  caret-color: #444;
-  width: 100%
-}
-
-.editor-placeholder {
-  color: #999;
-  overflow: hidden;
-  position: absolute;
-  text-overflow: ellipsis;
-  top: 15px;
-  left: 10px;
-  font-size: 15px;
-  user-select: none;
-  display: inline-block;
-  pointer-events: none;
+  outline: none
 }
 
 .editor-text-bold {
@@ -98,7 +62,6 @@
   text-decoration: none;
 }
 
-
 .editor-tokenFunction {
   color: #dd4a68;
 }
@@ -114,30 +77,30 @@
 }
 
 .editor-heading-h1 {
-  font-size: 19px;
+  font-size: 25px;
   font-weight: 400;
-  margin: 0;
-  margin-bottom: 12px;
-  padding: 0;
+  margin-bottom: 20px;
+  font-weight: bold;
 }
 
 
 .editor-heading-h2 {
-  font-size: 17px;
-  font-weight: 400;
-  margin: 0;
-  margin-top: 10px;
-  padding: 0;
+  font-size: 20px;
+  font-weight: bold;
+  margin-bottom: 20px;
 }
 
-.editor-list-ul ul {
-  padding: 0px;
-  margin: 0;
-  margin-left: 0px;
+.editor-list-ul  {
+  margin-bottom: 12px;
 }
 
+.editor-list-ol  {
+  margin-bottom: 12px;
+}
+
+
 .editor-listitem {
-  margin: 8px 32px 8px 32px;
+  margin: 0px 32px;
 }
 
 .editor-nested-listitem {
@@ -149,7 +112,6 @@ pre::-webkit-scrollbar {
   width: 10px;
 }
 
-
 pre::-webkit-scrollbar-thumb {
   background: #999;
 }
@@ -174,10 +136,6 @@ pre::-webkit-scrollbar-thumb {
   vertical-align: middle;
 }
 
-.toolbar button.toolbar-item:disabled {
-  cursor: not-allowed;
-}
-
 .toolbar button.toolbar-item.spaced {
   margin-right: 2px;
 }
@@ -209,7 +167,6 @@ pre::-webkit-scrollbar-thumb {
   background-color: #eee;
 }
 
-
 .toolbar select.toolbar-item {
   border: 0;
   display: flex;
@@ -251,6 +208,7 @@ pre::-webkit-scrollbar-thumb {
 
 .toolbar i.chevron-down {
   margin-top: 3px;
+  margin-left: 5px;
   width: 16px;
   height: 16px;
   display: flex;
@@ -284,31 +242,6 @@ i.chevron-down {
   border-color: blue;
 }
 
-#block-controls span.block-type.paragraph {
-  background-image: url(images/icons/text-paragraph.svg);
-}
-
-#block-controls span.block-type.paragraph {
-  background-image: url(images/icons/link.svg);
-}
-
-#block-controls span.block-type.h1 {
-  background-image: url(images/icons/link.svg);
-}
-
-#block-controls span.block-type.h2 {
-  background-image: url(images/icons/link.svg);
-}
-
-#block-controls span.block-type.ul {
-  background-image: url(images/icons/list-ul.svg);
-}
-
-#block-controls span.block-type.ol {
-  background-image: url(images/icons/list-ol.svg);
-}
-
-
 .dropdown {
   z-index: 5;
   display: block;
@@ -484,7 +417,6 @@ i.chevron-down {
   background-image: url(images/icons/list-ol.svg);
 }
 
-
 i.bold {
   background-image: url(images/icons/type-bold.svg);
 }

From 125de6de7b95c4085bf551b1e9dec006ea80240c Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 22 Nov 2022 11:19:31 +0100
Subject: [PATCH 32/43] fix type error

---
 .../features/ee/workflows/components/v2/TextEditor/Editor.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
index 32fa56021b9110..9763eb042e111c 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
@@ -56,7 +56,7 @@ export default function Editor(props: TextEditorProps) {
         <div className="editor-container">
           <ToolbarPlugin form={props.form} stepNumber={props.stepNumber} />
           <div className="editor-inner">
-            <RichTextPlugin contentEditable={<ContentEditable className="editor-input" />} />
+            <RichTextPlugin contentEditable={<ContentEditable className="editor-input" />} placeholder="" />
             <AutoFocusPlugin />
             <ListPlugin />
             <LinkPlugin />

From 8bad09179c4c47ea1ae5f05150e0b4d6b0ad812b Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 22 Nov 2022 11:33:51 +0100
Subject: [PATCH 33/43] code clean up

---
 .../components/v2/TextEditor/Editor.tsx       |  2 -
 .../components/v2/TextEditor/ExampleTheme.ts  | 45 -------------
 .../images/icons/arrow-clockwise.svg          |  4 --
 .../images/icons/arrow-counterclockwise.svg   |  4 --
 .../images/icons/chat-square-quote.svg        |  4 --
 .../v2/TextEditor/images/icons/code.svg       |  3 -
 .../TextEditor/images/icons/journal-code.svg  |  5 --
 .../TextEditor/images/icons/journal-text.svg  |  5 --
 .../v2/TextEditor/images/icons/justify.svg    |  3 -
 .../images/icons/type-underline.svg           |  3 -
 .../plugins/CodeHighlightPlugin.tsx           | 11 ----
 .../plugins/ListMaxIndentLevelPlugin.tsx      | 64 -------------------
 .../components/v2/TextEditor/stylesEditor.css |  4 --
 13 files changed, 157 deletions(-)
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-clockwise.svg
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-counterclockwise.svg
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/chat-square-quote.svg
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/code.svg
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-code.svg
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-text.svg
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/justify.svg
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-underline.svg
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.tsx
 delete mode 100644 packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.tsx

diff --git a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
index 9763eb042e111c..2a6eb198cc3042 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/Editor.tsx
@@ -16,7 +16,6 @@ import { UseFormReturn } from "react-hook-form";
 
 import ExampleTheme from "./ExampleTheme";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
-import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import ToolbarPlugin from "./plugins/ToolbarPlugin";
 import "./stylesEditor.css";
 
@@ -61,7 +60,6 @@ export default function Editor(props: TextEditorProps) {
             <ListPlugin />
             <LinkPlugin />
             <AutoLinkPlugin />
-            <ListMaxIndentLevelPlugin maxDepth={7} />
             <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
           </div>
         </div>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.ts b/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.ts
index 595a62d85b12c1..c08b06cbc7db0d 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.ts
+++ b/packages/features/ee/workflows/components/v2/TextEditor/ExampleTheme.ts
@@ -1,15 +1,9 @@
 const exampleTheme = {
-  ltr: "ltr",
-  rtl: "rtl",
   placeholder: "editor-placeholder",
   paragraph: "editor-paragraph",
-  quote: "editor-quote",
   heading: {
     h1: "editor-heading-h1",
     h2: "editor-heading-h2",
-    h3: "editor-heading-h3",
-    h4: "editor-heading-h4",
-    h5: "editor-heading-h5",
   },
   list: {
     nested: {
@@ -24,45 +18,6 @@ const exampleTheme = {
   text: {
     bold: "editor-text-bold",
     italic: "editor-text-italic",
-    overflowed: "editor-text-overflowed",
-    hashtag: "editor-text-hashtag",
-    underline: "editor-text-underline",
-    strikethrough: "editor-text-strikethrough",
-    underlineStrikethrough: "editor-text-underlineStrikethrough",
-    code: "editor-text-code",
-  },
-  code: "editor-code",
-  codeHighlight: {
-    atrule: "editor-tokenAttr",
-    attr: "editor-tokenAttr",
-    boolean: "editor-tokenProperty",
-    builtin: "editor-tokenSelector",
-    cdata: "editor-tokenComment",
-    char: "editor-tokenSelector",
-    class: "editor-tokenFunction",
-    "class-name": "editor-tokenFunction",
-    comment: "editor-tokenComment",
-    constant: "editor-tokenProperty",
-    deleted: "editor-tokenProperty",
-    doctype: "editor-tokenComment",
-    entity: "editor-tokenOperator",
-    function: "editor-tokenFunction",
-    important: "editor-tokenVariable",
-    inserted: "editor-tokenSelector",
-    keyword: "editor-tokenAttr",
-    namespace: "editor-tokenVariable",
-    number: "editor-tokenProperty",
-    operator: "editor-tokenOperator",
-    prolog: "editor-tokenComment",
-    property: "editor-tokenProperty",
-    punctuation: "editor-tokenPunctuation",
-    regex: "editor-tokenVariable",
-    selector: "editor-tokenSelector",
-    string: "editor-tokenSelector",
-    symbol: "editor-tokenProperty",
-    tag: "editor-tokenProperty",
-    url: "editor-tokenOperator",
-    variable: "editor-tokenVariable",
   },
 };
 
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-clockwise.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-clockwise.svg
deleted file mode 100644
index 4b36c366a4b85e..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-clockwise.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
-  <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
-</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-counterclockwise.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-counterclockwise.svg
deleted file mode 100644
index cc71a755e4d229..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/arrow-counterclockwise.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
-  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
-</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/chat-square-quote.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/chat-square-quote.svg
deleted file mode 100644
index 0f220833b8eb28..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/chat-square-quote.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chat-square-quote" viewBox="0 0 16 16">
-  <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
-  <path d="M7.066 4.76A1.665 1.665 0 0 0 4 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112zm4 0A1.665 1.665 0 0 0 8 5.668a1.667 1.667 0 0 0 2.561 1.406c-.131.389-.375.804-.777 1.22a.417.417 0 1 0 .6.58c1.486-1.54 1.293-3.214.682-4.112z"/>
-</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/code.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/code.svg
deleted file mode 100644
index bc0550654765c0..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/code.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-code" viewBox="0 0 16 16">
-  <path d="M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8l3.147-3.146zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8l-3.147-3.146z"/>
-</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-code.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-code.svg
deleted file mode 100644
index 0632fd0880777c..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-code.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-code" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M8.646 5.646a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L10.293 8 8.646 6.354a.5.5 0 0 1 0-.708zm-1.292 0a.5.5 0 0 0-.708 0l-2 2a.5.5 0 0 0 0 .708l2 2a.5.5 0 0 0 .708-.708L5.707 8l1.647-1.646a.5.5 0 0 0 0-.708z"/>
-  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
-  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
-</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-text.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-text.svg
deleted file mode 100644
index 5ec74200dc8197..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/journal-text.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-text" viewBox="0 0 16 16">
-  <path d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
-  <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
-  <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
-</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/justify.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/justify.svg
deleted file mode 100644
index a003efc6edc020..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/justify.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-justify" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
-</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-underline.svg b/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-underline.svg
deleted file mode 100644
index 7451674314939d..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/images/icons/type-underline.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-type-underline" viewBox="0 0 16 16">
-  <path d="M5.313 3.136h-1.23V9.54c0 2.105 1.47 3.623 3.917 3.623s3.917-1.518 3.917-3.623V3.136h-1.23v6.323c0 1.49-.978 2.57-2.687 2.57-1.709 0-2.687-1.08-2.687-2.57V3.136zM12.5 15h-9v-1h9v1z"/>
-</svg>
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.tsx b/packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.tsx
deleted file mode 100644
index f931805284173f..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/CodeHighlightPlugin.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { registerCodeHighlighting } from "@lexical/code";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useEffect } from "react";
-
-export default function CodeHighlightPlugin() {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    return registerCodeHighlighting(editor);
-  }, [editor]);
-  return null;
-}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.tsx b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.tsx
deleted file mode 100644
index c99134d0e09b8f..00000000000000
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ListMaxIndentLevelPlugin.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { $getListDepth, $isListItemNode, $isListNode } from "@lexical/list";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import {
-  $getSelection,
-  $isElementNode,
-  $isRangeSelection,
-  INDENT_CONTENT_COMMAND,
-  COMMAND_PRIORITY_HIGH,
-} from "lexical";
-import { useEffect } from "react";
-
-function getElementNodesInSelection(selection: any) {
-  const nodesInSelection = selection.getNodes();
-
-  if (nodesInSelection.length === 0) {
-    return new Set([
-      selection.anchor.getNode().getParentOrThrow(),
-      selection.focus.getNode().getParentOrThrow(),
-    ]);
-  }
-
-  return new Set(nodesInSelection.map((n: any) => ($isElementNode(n) ? n : n.getParentOrThrow())));
-}
-
-function isIndentPermitted(maxDepth: any) {
-  const selection = $getSelection();
-
-  if (!$isRangeSelection(selection)) {
-    return false;
-  }
-
-  const elementNodesInSelection = getElementNodesInSelection(selection);
-
-  let totalDepth = 0;
-
-  for (const elementNode of elementNodesInSelection) {
-    if ($isListNode(elementNode)) {
-      totalDepth = Math.max($getListDepth(elementNode) + 1, totalDepth);
-    } else if ($isListItemNode(elementNode)) {
-      const parent = elementNode.getParent();
-      if (!$isListNode(parent)) {
-        throw new Error("ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.");
-      }
-
-      totalDepth = Math.max($getListDepth(parent) + 1, totalDepth);
-    }
-  }
-
-  return totalDepth <= maxDepth;
-}
-
-export default function ListMaxIndentLevelPlugin({ maxDepth }: any) {
-  const [editor] = useLexicalComposerContext();
-
-  useEffect(() => {
-    return editor.registerCommand(
-      INDENT_CONTENT_COMMAND,
-      () => !isIndentPermitted(maxDepth ?? 7),
-      COMMAND_PRIORITY_HIGH
-    );
-  }, [editor, maxDepth]);
-
-  return null;
-}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
index b8cd035f09cd00..56e14a9dd4800a 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/v2/TextEditor/stylesEditor.css
@@ -425,10 +425,6 @@ i.italic {
   background-image: url(images/icons/type-italic.svg);
 }
 
-i.underline {
-  background-image: url(images/icons/type-underline.svg);
-}
-
 i.link {
   background-image: url(images/icons/link.svg);
 }

From e1918bfb118d8357d743db31c8c5415d580c846a Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 22 Nov 2022 11:55:29 +0100
Subject: [PATCH 34/43] code clean up

---
 apps/web/package.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 5513194e8aa594..9517d1f652810c 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -61,9 +61,6 @@
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
     "@tanstack/react-query": "^4.3.9",
-    "@types/draftjs-to-html": "^0.8.1",
-    "@types/html-to-draftjs": "^1.4.0",
-    "@types/react-draft-wysiwyg": "^1.13.4",
     "@vercel/edge-functions-ui": "^0.2.1",
     "@vercel/og": "^0.0.19",
     "@wojtekmaj/react-daterange-picker": "^3.3.1",
@@ -72,8 +69,6 @@
     "bcryptjs": "^2.4.3",
     "classnames": "^2.3.1",
     "dotenv-cli": "^6.0.0",
-    "draft-js": "^0.11.7",
-    "draftjs-to-html": "^0.9.1",
     "googleapis": "^84.0.0",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
@@ -107,7 +102,6 @@
     "react-date-picker": "^8.3.6",
     "react-digit-input": "^2.1.0",
     "react-dom": "^18.2.0",
-    "react-draft-wysiwyg": "^1.15.0",
     "react-easy-crop": "^3.5.2",
     "react-feather": "^2.0.10",
     "react-hook-form": "^7.34.2",

From 3ea00651955f97100cdab5ffb998399c8f4f70bd Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Tue, 22 Nov 2022 15:16:47 +0100
Subject: [PATCH 35/43] remove text if changed from SMS to email or other way
 around

---
 .../components/v2/WorkflowStepContainer.tsx   | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index ab34272ba16d01..b0085b35a8c6a9 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -284,23 +284,32 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         className="text-sm"
                         onChange={(val) => {
                           if (val) {
-                            if (val.value === WorkflowActions.SMS_NUMBER) {
-                              setIsPhoneNumberNeeded(true);
+                            const oldValue = form.getValues(`steps.${step.stepNumber - 1}.action`);
+                            const wasSMSAction =
+                              oldValue === WorkflowActions.SMS_ATTENDEE ||
+                              oldValue === WorkflowActions.SMS_NUMBER;
+                            const isSMSAction =
+                              val.value === WorkflowActions.SMS_ATTENDEE ||
+                              val.value === WorkflowActions.SMS_NUMBER;
+
+                            if (isSMSAction) {
                               setIsSenderIdNeeded(true);
                               setIsEmailAddressNeeded(false);
-                            } else if (val.value === WorkflowActions.EMAIL_ADDRESS) {
-                              setIsEmailAddressNeeded(true);
-                              setIsPhoneNumberNeeded(false);
-                              setIsSenderIdNeeded(false);
-                            } else if (val.value === WorkflowActions.SMS_ATTENDEE) {
-                              setIsSenderIdNeeded(true);
-                              setIsEmailAddressNeeded(false);
-                              setIsPhoneNumberNeeded(false);
+                              setIsPhoneNumberNeeded(val.value === WorkflowActions.SMS_NUMBER);
+
+                              if (!wasSMSAction) {
+                                form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, "");
+                              }
                             } else {
-                              setIsEmailAddressNeeded(false);
                               setIsPhoneNumberNeeded(false);
                               setIsSenderIdNeeded(false);
+                              setIsEmailAddressNeeded(val.value === WorkflowActions.EMAIL_ADDRESS);
+
+                              if (wasSMSAction) {
+                                form.setValue(`steps.${step.stepNumber - 1}.reminderBody`, "");
+                              }
                             }
+
                             form.unregister(`steps.${step.stepNumber - 1}.sendTo`);
                             form.clearErrors(`steps.${step.stepNumber - 1}.sendTo`);
                             if (

From 864a9daad787f52caa858e38af031fbdd257e760 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Wed, 23 Nov 2022 13:43:02 +0100
Subject: [PATCH 36/43] add add variable dropdown

---
 .../components/v2/AddVariablesDropdown.tsx    |   4 +-
 .../v2/TextEditor/plugins/ToolbarPlugin.tsx   | 124 ++++++++++--------
 .../components/v2/WorkflowStepContainer.tsx   |   2 +-
 3 files changed, 74 insertions(+), 56 deletions(-)

diff --git a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx b/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
index 348c37bb012b5d..9411e9b538f03d 100644
--- a/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
+++ b/packages/features/ee/workflows/components/v2/AddVariablesDropdown.tsx
@@ -8,7 +8,7 @@ import {
 } from "@calcom/ui/v2/core/Dropdown";
 
 interface IAddVariablesDropdown {
-  addVariable: (isEmailSubject: boolean, variable: string) => void;
+  addVariable: (variable: string, isEmailSubject?: boolean) => void;
   isEmailSubject: boolean;
 }
 
@@ -45,7 +45,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
                 key={variable}
                 type="button"
                 className="w-full px-4 py-2"
-                onClick={() => props.addVariable(props.isEmailSubject, t(`${variable}_workflow`))}>
+                onClick={() => props.addVariable(t(`${variable}_workflow`), props.isEmailSubject)}>
                 <div className="sm:grid sm:grid-cols-2">
                   <div className="mr-3 text-left md:col-span-1">
                     {`{${t(`${variable}_workflow`).toUpperCase().replace(/ /g, "_")}}`}
diff --git a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
index 824db7a89a5188..693bd170ca8bd1 100644
--- a/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
+++ b/packages/features/ee/workflows/components/v2/TextEditor/plugins/ToolbarPlugin.tsx
@@ -26,6 +26,7 @@ import {
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
+import { AddVariablesDropdown } from "../../AddVariablesDropdown";
 import { TextEditorProps } from "../Editor";
 
 const LowPriority = 1;
@@ -394,6 +395,18 @@ export default function ToolbarPlugin(props: TextEditorProps) {
     }
   }, [editor]);
 
+  const addVariable = (variable: string) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        editor.update(() => {
+          const formatedVariable = `{${variable.toUpperCase().replace(/ /g, "_")}}`;
+          selection?.insertRawText(formatedVariable);
+        });
+      }
+    });
+  };
+
   useEffect(() => {
     editor.update(() => {
       // In the browser you can use the native DOMParser API to parse the HTML string.
@@ -448,64 +461,69 @@ export default function ToolbarPlugin(props: TextEditorProps) {
   }, [editor, isLink]);
 
   return (
-    <div className="toolbar" ref={toolbarRef}>
-      {supportedBlockTypes.has(blockType) && (
+    <div className="toolbar flex" ref={toolbarRef}>
+      <>
+        {supportedBlockTypes.has(blockType) && (
+          <>
+            <button
+              type="button"
+              className="toolbar-item block-controls"
+              onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
+              aria-label="Formatting Options">
+              <span className={"icon block-type " + blockType} />
+              <span className="text">{blockTypeToBlockName[blockType as keyof BlockType]}</span>
+              <i className="chevron-down" />
+            </button>
+            {showBlockOptionsDropDown &&
+              createPortal(
+                <BlockOptionsDropdownList
+                  editor={editor}
+                  blockType={blockType}
+                  toolbarRef={toolbarRef}
+                  setShowBlockOptionsDropDown={setShowBlockOptionsDropDown}
+                />,
+                document.body
+              )}
+          </>
+        )}
+
         <>
           <button
             type="button"
-            className="toolbar-item block-controls"
-            onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
-            aria-label="Formatting Options">
-            <span className={"icon block-type " + blockType} />
-            <span className="text">{blockTypeToBlockName[blockType as keyof BlockType]}</span>
-            <i className="chevron-down" />
+            onClick={() => {
+              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+              if (isItalic) {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+              }
+            }}
+            className={"toolbar-item spaced " + (isBold ? "active" : "")}
+            aria-label="Format Bold">
+            <i className="format bold" />
           </button>
-          {showBlockOptionsDropDown &&
-            createPortal(
-              <BlockOptionsDropdownList
-                editor={editor}
-                blockType={blockType}
-                toolbarRef={toolbarRef}
-                setShowBlockOptionsDropDown={setShowBlockOptionsDropDown}
-              />,
-              document.body
-            )}
-        </>
-      )}
-
-      <>
-        <button
-          type="button"
-          onClick={() => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-            if (isItalic) {
+          <button
+            type="button"
+            onClick={() => {
               editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-            }
-          }}
-          className={"toolbar-item spaced " + (isBold ? "active" : "")}
-          aria-label="Format Bold">
-          <i className="format bold" />
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-            if (isBold) {
-              editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-            }
-          }}
-          className={"toolbar-item spaced " + (isItalic ? "active" : "")}
-          aria-label="Format Italics">
-          <i className="format italic" />
-        </button>
-        <button
-          type="button"
-          onClick={insertLink}
-          className={"toolbar-item spaced " + (isLink ? "active" : "")}
-          aria-label="Insert Link">
-          <i className="format link" />
-        </button>
-        {isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}{" "}
+              if (isBold) {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+              }
+            }}
+            className={"toolbar-item spaced " + (isItalic ? "active" : "")}
+            aria-label="Format Italics">
+            <i className="format italic" />
+          </button>
+          <button
+            type="button"
+            onClick={insertLink}
+            className={"toolbar-item spaced " + (isLink ? "active" : "")}
+            aria-label="Insert Link">
+            <i className="format link" />
+          </button>
+          {isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}{" "}
+        </>
+        <div className="ml-auto">
+          <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
+        </div>
       </>
     </div>
   );
diff --git a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
index b0085b35a8c6a9..27a1398237af7a 100644
--- a/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/v2/WorkflowStepContainer.tsx
@@ -100,7 +100,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
   const refReminderBody = useRef<HTMLTextAreaElement | null>(null);
 
-  const addVariable = (isEmailSubject: boolean, variable: string) => {
+  const addVariable = (variable: string, isEmailSubject?: boolean) => {
     if (step) {
       if (isEmailSubject) {
         const currentEmailSubject = refEmailSubject?.current?.value || "";

From 1c30f669196695cdc310ea4038712ba175d479ba Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Wed, 23 Nov 2022 15:25:39 +0100
Subject: [PATCH 37/43] show error message if email body is empty

---
 apps/web/package.json                         |  1 +
 apps/web/public/static/locales/en/common.json |  3 +-
 .../TextEditor/plugins/ToolbarPlugin.tsx      | 66 ++++++++-----------
 .../components/WorkflowStepContainer.tsx      |  2 +-
 .../features/ee/workflows/pages/workflow.tsx  | 12 +++-
 5 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 9517d1f652810c..9e802eb952ae87 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -72,6 +72,7 @@
     "googleapis": "^84.0.0",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
+    "html-to-text": "^8.2.1",
     "ical.js": "^1.4.0",
     "ics": "^2.37.0",
     "kbar": "^0.1.0-beta.36",
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index 38b57c54d99718..f12d5a32cdadc4 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1372,5 +1372,6 @@
   "route_to": "Route to",
   "test_preview_description": "Test your routing form without submitting any data",
   "test_routing": "Test Routing",
-  "booking_limit_reached":"Booking Limit for this event type has been reached"
+  "booking_limit_reached":"Booking Limit for this event type has been reached",
+  "fill_this_field": "Please fill in this field"
 }
diff --git a/packages/features/ee/workflows/components/TextEditor/plugins/ToolbarPlugin.tsx b/packages/features/ee/workflows/components/TextEditor/plugins/ToolbarPlugin.tsx
index 693bd170ca8bd1..cef210c4b8eb55 100644
--- a/packages/features/ee/workflows/components/TextEditor/plugins/ToolbarPlugin.tsx
+++ b/packages/features/ee/workflows/components/TextEditor/plugins/ToolbarPlugin.tsx
@@ -22,7 +22,10 @@ import {
   GridSelection,
   $getRoot,
   $insertNodes,
+  LexicalEditor,
+  EditorState,
 } from "lexical";
+import { RefObject, Dispatch, SetStateAction } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
@@ -45,11 +48,7 @@ const blockTypeToBlockName: BlockType = {
   ul: "Bulleted List",
 };
 
-function Divider() {
-  return <div className="divider" />;
-}
-
-function positionEditorElement(editor: any, rect: any) {
+function positionEditorElement(editor: HTMLInputElement, rect: DOMRect | null) {
   if (rect === null) {
     editor.style.opacity = "0";
     editor.style.top = "-1000px";
@@ -61,7 +60,7 @@ function positionEditorElement(editor: any, rect: any) {
   }
 }
 
-function FloatingLinkEditor({ editor }: any) {
+function FloatingLinkEditor({ editor }: { editor: LexicalEditor }) {
   const editorRef = useRef<HTMLInputElement>(null);
   const mouseDownRef = useRef(false);
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -97,12 +96,12 @@ function FloatingLinkEditor({ editor }: any) {
       selection !== null &&
       !nativeSelection?.isCollapsed &&
       rootElement !== null &&
-      rootElement.contains(nativeSelection?.anchorNode)
+      rootElement.contains(nativeSelection?.anchorNode || null)
     ) {
       const domRange = nativeSelection?.getRangeAt(0);
-      let rect;
+      let rect: DOMRect | undefined;
       if (nativeSelection?.anchorNode === rootElement) {
-        let inner = rootElement;
+        let inner: Element = rootElement;
         while (inner.firstElementChild != null) {
           inner = inner.firstElementChild;
         }
@@ -111,7 +110,7 @@ function FloatingLinkEditor({ editor }: any) {
         rect = domRange?.getBoundingClientRect();
       }
       if (!mouseDownRef.current) {
-        positionEditorElement(editorElem, rect);
+        positionEditorElement(editorElem, rect || null);
       }
 
       setLastSelection(selection);
@@ -127,7 +126,7 @@ function FloatingLinkEditor({ editor }: any) {
 
   useEffect(() => {
     return mergeRegister(
-      editor.registerUpdateListener(({ editorState }: any) => {
+      editor.registerUpdateListener(({ editorState }: { editorState: EditorState }) => {
         editorState.read(() => {
           updateLinkEditor();
         });
@@ -203,20 +202,7 @@ function FloatingLinkEditor({ editor }: any) {
   );
 }
 
-function Select({ onChange, className, options, value }: any) {
-  return (
-    <select className={className} onChange={onChange} value={value}>
-      <option hidden={true} value="" />
-      {options.map((option: any) => (
-        <option key={option} value={option}>
-          {option}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-function getSelectedNode(selection: any) {
+function getSelectedNode(selection: RangeSelection) {
   const anchor = selection.anchor;
   const focus = selection.focus;
   const anchorNode = selection.anchor.getNode();
@@ -232,7 +218,19 @@ function getSelectedNode(selection: any) {
   }
 }
 
-function BlockOptionsDropdownList({ editor, blockType, toolbarRef, setShowBlockOptionsDropDown }: any) {
+type BlockOptionsDropdownProps = {
+  editor: LexicalEditor;
+  blockType: string;
+  toolbarRef: RefObject<HTMLDivElement>;
+  setShowBlockOptionsDropDown: Dispatch<SetStateAction<boolean>>;
+};
+
+function BlockOptionsDropdownList({
+  editor,
+  blockType,
+  toolbarRef,
+  setShowBlockOptionsDropDown,
+}: BlockOptionsDropdownProps) {
   const dropDownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -307,18 +305,18 @@ function BlockOptionsDropdownList({ editor, blockType, toolbarRef, setShowBlockO
 
   const formatBulletList = () => {
     if (blockType !== "ul") {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
+      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
     } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
     }
     setShowBlockOptionsDropDown(false);
   };
 
   const formatNumberedList = () => {
     if (blockType !== "ol") {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
     } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND);
+      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined);
     }
     setShowBlockOptionsDropDown(false);
   };
@@ -380,11 +378,9 @@ export default function ToolbarPlugin(props: TextEditorProps) {
           setBlockType(type);
         }
       }
-      // Update text format
       setIsBold(selection.hasFormat("bold"));
       setIsItalic(selection.hasFormat("italic"));
 
-      // Update links
       const node = getSelectedNode(selection);
       const parent = node.getParent();
       if ($isLinkNode(parent) || $isLinkNode(node)) {
@@ -409,26 +405,22 @@ export default function ToolbarPlugin(props: TextEditorProps) {
 
   useEffect(() => {
     editor.update(() => {
-      // In the browser you can use the native DOMParser API to parse the HTML string.
       const parser = new DOMParser();
       const dom = parser.parseFromString(
         props.form.getValues(`steps.${props.stepNumber - 1}.reminderBody`) || "",
         "text/html"
       );
 
-      // Once you have the DOM instance it's easy to generate LexicalNodes.
       const nodes = $generateNodesFromDOM(editor, dom);
 
-      // Select the root
       $getRoot().select();
-
-      // Insert them at a selection.
       $insertNodes(nodes);
 
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           const textInHtml = $generateHtmlFromNodes(editor);
           props.form.setValue(`steps.${props.stepNumber - 1}.reminderBody`, textInHtml);
+          props.form.clearErrors();
         });
       });
     });
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index f32b1ddcbaf5f4..dec43fdfa19880 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -502,7 +502,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   )}
                   {form.formState.errors.steps &&
                     form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody && (
-                      <p className="mt-1 text-xs text-red-500">
+                      <p className="mt-1 text-sm text-red-500">
                         {form.formState?.errors?.steps[step.stepNumber - 1]?.reminderBody?.message || ""}
                       </p>
                     )}
diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index 5279fc21f41139..6eb4e3bb601836 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -26,6 +26,9 @@ import SkeletonLoader from "../components/SkeletonLoaderEdit";
 import WorkflowDetailsPage from "../components/WorkflowDetailsPage";
 import { getTranslatedText, translateVariablesToEnglish } from "../lib/variableTranslations";
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { convert } = require("html-to-text");
+
 export type FormValues = {
   name: string;
   activeOn: Option[];
@@ -177,11 +180,16 @@ function WorkflowPage() {
         let isEmpty = false;
 
         values.steps.forEach((step) => {
-          const isBodyEmpty = step.template === WorkflowTemplates.CUSTOM && !step.reminderBody;
+          const isSMSAction =
+            step.action === WorkflowActions.SMS_ATTENDEE || step.action === WorkflowActions.SMS_NUMBER;
+          const isBodyEmpty =
+            step.template === WorkflowTemplates.CUSTOM &&
+            !isSMSAction &&
+            convert(step.reminderBody).length <= 1;
           if (isBodyEmpty) {
             form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {
               type: "custom",
-              message: t("no_input"),
+              message: t("fill_this_field"),
             });
           }
 

From aac8c5215db72443412d5ed137360df460056a80 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Wed, 23 Nov 2022 16:33:53 +0100
Subject: [PATCH 38/43] add white-space pre-wrap

---
 .../ee/workflows/lib/reminders/templates/customTemplate.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/features/ee/workflows/lib/reminders/templates/customTemplate.ts b/packages/features/ee/workflows/lib/reminders/templates/customTemplate.ts
index 18a5c4dd3c1cf4..a570f908a25e45 100644
--- a/packages/features/ee/workflows/lib/reminders/templates/customTemplate.ts
+++ b/packages/features/ee/workflows/lib/reminders/templates/customTemplate.ts
@@ -57,7 +57,7 @@ const customTemplate = async (text: string, variables: VariablesType, locale: st
     }
   });
 
-  const textHtml = `<body>${dynamicText}</body>`;
+  const textHtml = `<body style="white-space: pre-wrap;">${dynamicText}</body>`;
   return { text: dynamicText, html: textHtml };
 };
 

From 6ec02b7732dcaf5df8628e27e8d1baaa19d8d930 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Wed, 23 Nov 2022 16:55:07 +0100
Subject: [PATCH 39/43] fix import

---
 packages/features/ee/workflows/components/TextEditor/Editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/features/ee/workflows/components/TextEditor/Editor.tsx b/packages/features/ee/workflows/components/TextEditor/Editor.tsx
index 2a6eb198cc3042..dd66260409e278 100644
--- a/packages/features/ee/workflows/components/TextEditor/Editor.tsx
+++ b/packages/features/ee/workflows/components/TextEditor/Editor.tsx
@@ -11,9 +11,9 @@ import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPl
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
-import { FormValues } from "ee/workflows/pages/workflow";
 import { UseFormReturn } from "react-hook-form";
 
+import { FormValues } from "../../pages/workflow";
 import ExampleTheme from "./ExampleTheme";
 import AutoLinkPlugin from "./plugins/AutoLinkPlugin";
 import ToolbarPlugin from "./plugins/ToolbarPlugin";

From 09909dcc62665eded00b7e823f2138917343df37 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Wed, 23 Nov 2022 17:05:49 +0100
Subject: [PATCH 40/43] prettier

---
 packages/ui/v2/core/form/MultiSelectCheckboxes.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx b/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx
index b7a8ac93351eb6..87da95ef387be1 100644
--- a/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx
+++ b/packages/ui/v2/core/form/MultiSelectCheckboxes.tsx
@@ -29,7 +29,7 @@ const InputOption: React.FC<OptionProps<any, boolean, GroupBase<any>>> = ({
     <components.Option
       className={classNames(
         className,
-        "dark:bg-darkgray-100 text-[inherit] !flex !cursor-pointer !py-3",
+        "dark:bg-darkgray-100 !flex !cursor-pointer !py-3 text-[inherit]",
         isFocused && "dark:!bg-darkgray-200 !bg-gray-100",
         isSelected && "dark:!bg-darkgray-300 !bg-neutral-900"
       )}

From 6cf8dd07f43552e7e187812f5f8fce81f773e1b2 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Thu, 24 Nov 2022 11:14:51 +0100
Subject: [PATCH 41/43] fix add variable dropdown for mobile

---
 .../components/AddVariablesDropdown.tsx       | 21 ++++++++++---
 .../TextEditor/images/icons/chevron-down.svg  |  4 ---
 .../TextEditor/plugins/ToolbarPlugin.tsx      | 10 +++++--
 .../components/TextEditor/stylesEditor.css    | 30 +------------------
 4 files changed, 25 insertions(+), 40 deletions(-)
 delete mode 100644 packages/features/ee/workflows/components/TextEditor/images/icons/chevron-down.svg

diff --git a/packages/features/ee/workflows/components/AddVariablesDropdown.tsx b/packages/features/ee/workflows/components/AddVariablesDropdown.tsx
index 66a4e94da82ba8..f02c4cf270b62f 100644
--- a/packages/features/ee/workflows/components/AddVariablesDropdown.tsx
+++ b/packages/features/ee/workflows/components/AddVariablesDropdown.tsx
@@ -3,7 +3,8 @@ import { Dropdown, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, I
 
 interface IAddVariablesDropdown {
   addVariable: (variable: string, isEmailSubject?: boolean) => void;
-  isEmailSubject: boolean;
+  isEmailSubject?: boolean;
+  isTextEditor?: boolean;
 }
 
 const variables = [
@@ -23,9 +24,21 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
   return (
     <Dropdown>
       <DropdownMenuTrigger className="pt-[6px] focus:bg-gray-50">
-        <div className="flex items-center ">
-          {t("add_variable")}
-          <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+        <div className="items-center ">
+          {props.isTextEditor ? (
+            <>
+              <div className="hidden sm:flex">
+                {t("add_variable")}
+                <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+              </div>
+              <div className="block sm:hidden">+</div>
+            </>
+          ) : (
+            <div className="flex">
+              {t("add_variable")}
+              <Icon.FiChevronDown className="ml-1 h-4 w-4" />
+            </div>
+          )}
         </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="h-40 overflow-scroll">
diff --git a/packages/features/ee/workflows/components/TextEditor/images/icons/chevron-down.svg b/packages/features/ee/workflows/components/TextEditor/images/icons/chevron-down.svg
deleted file mode 100644
index 73caea1b4b9bc2..00000000000000
--- a/packages/features/ee/workflows/components/TextEditor/images/icons/chevron-down.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
-</svg>
diff --git a/packages/features/ee/workflows/components/TextEditor/plugins/ToolbarPlugin.tsx b/packages/features/ee/workflows/components/TextEditor/plugins/ToolbarPlugin.tsx
index cef210c4b8eb55..e650e549593b59 100644
--- a/packages/features/ee/workflows/components/TextEditor/plugins/ToolbarPlugin.tsx
+++ b/packages/features/ee/workflows/components/TextEditor/plugins/ToolbarPlugin.tsx
@@ -29,6 +29,8 @@ import { RefObject, Dispatch, SetStateAction } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
+import { Icon } from "@calcom/ui";
+
 import { AddVariablesDropdown } from "../../AddVariablesDropdown";
 import { TextEditorProps } from "../Editor";
 
@@ -463,8 +465,10 @@ export default function ToolbarPlugin(props: TextEditorProps) {
               onClick={() => setShowBlockOptionsDropDown(!showBlockOptionsDropDown)}
               aria-label="Formatting Options">
               <span className={"icon block-type " + blockType} />
-              <span className="text">{blockTypeToBlockName[blockType as keyof BlockType]}</span>
-              <i className="chevron-down" />
+              <span className="text hidden sm:flex">
+                {blockTypeToBlockName[blockType as keyof BlockType]}
+              </span>
+              <Icon.FiChevronDown className="h-4 w-4" />
             </button>
             {showBlockOptionsDropDown &&
               createPortal(
@@ -514,7 +518,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
           {isLink && createPortal(<FloatingLinkEditor editor={editor} />, document.body)}{" "}
         </>
         <div className="ml-auto">
-          <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} />
+          <AddVariablesDropdown addVariable={addVariable} isEmailSubject={false} isTextEditor={true} />
         </div>
       </>
     </div>
diff --git a/packages/features/ee/workflows/components/TextEditor/stylesEditor.css b/packages/features/ee/workflows/components/TextEditor/stylesEditor.css
index 56e14a9dd4800a..9562eb9329f918 100644
--- a/packages/features/ee/workflows/components/TextEditor/stylesEditor.css
+++ b/packages/features/ee/workflows/components/TextEditor/stylesEditor.css
@@ -134,6 +134,7 @@ pre::-webkit-scrollbar-thumb {
   padding: 8px;
   cursor: pointer;
   vertical-align: middle;
+  height: 36px;
 }
 
 .toolbar button.toolbar-item.spaced {
@@ -183,7 +184,6 @@ pre::-webkit-scrollbar-thumb {
 }
 
 .toolbar .toolbar-item .text {
-  display: flex;
   line-height: 20px;
   width: 200px;
   vertical-align: middle;
@@ -206,34 +206,6 @@ pre::-webkit-scrollbar-thumb {
   background-size: contain;
 }
 
-.toolbar i.chevron-down {
-  margin-top: 3px;
-  margin-left: 5px;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  user-select: none;
-}
-
-.toolbar i.chevron-down.inside {
-  width: 16px;
-  height: 16px;
-  display: flex;
-  margin-left: -25px;
-  margin-top: 11px;
-  margin-right: 10px;
-  pointer-events: none;
-}
-
-i.chevron-down {
-  background-color: transparent;
-  background-size: contain;
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  background-image: url(images/icons/chevron-down.svg);
-}
-
 #block-controls button:hover {
   background-color: #efefef;
 }

From 9088a63e8867db8818545c849e343829d2b68600 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Thu, 24 Nov 2022 11:52:41 +0100
Subject: [PATCH 42/43] move dependencies to correct package.json file

---
 apps/web/package.json          | 3 ---
 packages/features/package.json | 7 ++++++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 9e802eb952ae87..c7b32f19219b4d 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -43,7 +43,6 @@
     "@heroicons/react": "^1.0.6",
     "@hookform/error-message": "^2.0.0",
     "@hookform/resolvers": "^2.9.7",
-    "@lexical/react": "^0.5.0",
     "@next-auth/prisma-adapter": "^1.0.4",
     "@next/bundle-analyzer": "^12.2.5",
     "@radix-ui/react-avatar": "^1.0.0",
@@ -72,11 +71,9 @@
     "googleapis": "^84.0.0",
     "gray-matter": "^4.0.3",
     "handlebars": "^4.7.7",
-    "html-to-text": "^8.2.1",
     "ical.js": "^1.4.0",
     "ics": "^2.37.0",
     "kbar": "^0.1.0-beta.36",
-    "lexical": "^0.5.0",
     "libphonenumber-js": "^1.10.12",
     "lodash": "^4.17.21",
     "lottie-react": "^2.3.1",
diff --git a/packages/features/package.json b/packages/features/package.json
index df3761c11a027e..0b25d8aafee6b5 100644
--- a/packages/features/package.json
+++ b/packages/features/package.json
@@ -4,5 +4,10 @@
   "description": "Cal.com's main collocation of features",
   "authors": "Cal.com, Inc.",
   "version": "1.0.0",
-  "main": "index.ts"
+  "main": "index.ts",
+  "dependencies": {
+    "@lexical/react": "^0.5.0",
+    "html-to-text": "^8.2.1",
+    "lexical": "^0.5.0"
+  }
 }

From 06351319ad871af8279728498dd78e5678b13d94 Mon Sep 17 00:00:00 2001
From: CarinaWolli <wollencarina@gmail.com>
Date: Thu, 24 Nov 2022 11:53:41 +0100
Subject: [PATCH 43/43] remove html-to-text

---
 packages/features/ee/workflows/pages/workflow.tsx | 11 +++++------
 packages/features/package.json                    |  1 -
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index 6eb4e3bb601836..0ddb7073684450 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -26,9 +26,6 @@ import SkeletonLoader from "../components/SkeletonLoaderEdit";
 import WorkflowDetailsPage from "../components/WorkflowDetailsPage";
 import { getTranslatedText, translateVariablesToEnglish } from "../lib/variableTranslations";
 
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { convert } = require("html-to-text");
-
 export type FormValues = {
   name: string;
   activeOn: Option[];
@@ -182,10 +179,12 @@ function WorkflowPage() {
         values.steps.forEach((step) => {
           const isSMSAction =
             step.action === WorkflowActions.SMS_ATTENDEE || step.action === WorkflowActions.SMS_NUMBER;
+
+          const strippedHtml = step.reminderBody?.replace(/<[^>]+>/g, "") || "";
+
           const isBodyEmpty =
-            step.template === WorkflowTemplates.CUSTOM &&
-            !isSMSAction &&
-            convert(step.reminderBody).length <= 1;
+            step.template === WorkflowTemplates.CUSTOM && !isSMSAction && strippedHtml.length <= 1;
+
           if (isBodyEmpty) {
             form.setError(`steps.${step.stepNumber - 1}.reminderBody`, {
               type: "custom",
diff --git a/packages/features/package.json b/packages/features/package.json
index 0b25d8aafee6b5..0d220f2ce40bd8 100644
--- a/packages/features/package.json
+++ b/packages/features/package.json
@@ -7,7 +7,6 @@
   "main": "index.ts",
   "dependencies": {
     "@lexical/react": "^0.5.0",
-    "html-to-text": "^8.2.1",
     "lexical": "^0.5.0"
   }
 }