diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 19b29533..01c9dfa5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -48,6 +48,7 @@
         "@types/draft-js": "0.11.9",
         "@types/jest": "26.0.24",
         "@types/node": "12.20.55",
+        "@types/prismjs": "^1.26.0",
         "@types/react": "17.0.44",
         "@types/react-dom": "17.0.17",
         "@types/react-redux": "7.1.24",
@@ -2111,7 +2112,6 @@
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
       "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==",
-      "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
         "debug": "^4.1.1",
@@ -2131,7 +2131,6 @@
       "version": "13.16.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.16.0.tgz",
       "integrity": "sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==",
-      "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -2146,7 +2145,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-      "dev": true,
       "engines": {
         "node": ">= 4"
       }
@@ -2161,7 +2159,6 @@
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
       "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==",
-      "dev": true,
       "dependencies": {
         "@humanwhocodes/object-schema": "^1.2.0",
         "debug": "^4.1.1",
@@ -10246,6 +10243,89 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.2.0.tgz",
+      "integrity": "sha512-xTEnpUKiV/bMyEsE5bT4oYA0x0Z/colMtxzUY8bKyPXBNLn/e0V4ZjBZkEhms0xE4pv9QsPfSRu9AWS4y5wGvA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "^5.0.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/@types/aria-query": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
+      "integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.16.4",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
@@ -10824,6 +10904,12 @@
       "integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==",
       "dev": true
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+      "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
+      "dev": true
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -10964,7 +11050,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
@@ -10986,7 +11072,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
       "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.5",
@@ -11006,7 +11092,7 @@
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.16.0.tgz",
       "integrity": "sha512-0yeUr92L3r0GLRnBOvtYK1v2SjqMIqQDHMl7GLb+l2L8+6LSFWEEWEIgVsPdMn5ImLM8qzWT8xFPtQYpp8co0g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "source-map": "^0.6.1"
       }
@@ -11015,7 +11101,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11030,7 +11116,7 @@
       "version": "4.41.32",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
       "integrity": "sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/node": "*",
         "@types/tapable": "^1",
@@ -11050,7 +11136,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz",
       "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/node": "*",
         "@types/source-list-map": "*",
@@ -11061,7 +11147,7 @@
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
       "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">= 8"
       }
@@ -11070,7 +11156,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11101,7 +11187,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz",
       "integrity": "sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@typescript-eslint/experimental-utils": "4.33.0",
         "@typescript-eslint/scope-manager": "4.33.0",
@@ -11133,7 +11219,7 @@
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -11148,7 +11234,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz",
       "integrity": "sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/json-schema": "^7.0.7",
         "@typescript-eslint/scope-manager": "4.33.0",
@@ -11172,7 +11258,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.33.0.tgz",
       "integrity": "sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "4.33.0",
         "@typescript-eslint/types": "4.33.0",
@@ -11199,7 +11285,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz",
       "integrity": "sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@typescript-eslint/types": "4.33.0",
         "@typescript-eslint/visitor-keys": "4.33.0"
@@ -11241,7 +11327,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.33.0.tgz",
       "integrity": "sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
       },
@@ -11254,7 +11340,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz",
       "integrity": "sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@typescript-eslint/types": "4.33.0",
         "@typescript-eslint/visitor-keys": "4.33.0",
@@ -11281,7 +11367,7 @@
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -11411,7 +11497,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz",
       "integrity": "sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@typescript-eslint/types": "4.33.0",
         "eslint-visitor-keys": "^2.0.0"
@@ -11890,7 +11976,6 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
       "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -12281,7 +12366,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -16672,7 +16756,6 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
       "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
       "dependencies": {
         "ansi-colors": "^4.1.1"
       },
@@ -16878,7 +16961,6 @@
       "version": "7.32.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
       "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
-      "dev": true,
       "dependencies": {
         "@babel/code-frame": "7.12.11",
         "@eslint/eslintrc": "^0.4.3",
@@ -17444,7 +17526,6 @@
       "version": "7.12.11",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
       "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
-      "dev": true,
       "dependencies": {
         "@babel/highlight": "^7.10.4"
       }
@@ -17453,7 +17534,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -17468,7 +17548,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -17484,7 +17563,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
       "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
-      "dev": true,
       "dependencies": {
         "eslint-visitor-keys": "^1.1.0"
       },
@@ -17499,7 +17577,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
       "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -17508,7 +17585,6 @@
       "version": "13.16.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-13.16.0.tgz",
       "integrity": "sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==",
-      "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
       },
@@ -17523,7 +17599,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -17532,7 +17607,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
       "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-      "dev": true,
       "engines": {
         "node": ">= 4"
       }
@@ -17541,7 +17615,6 @@
       "version": "0.9.1",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
       "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
-      "dev": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -17558,7 +17631,6 @@
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -17573,7 +17645,6 @@
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-      "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -17585,7 +17656,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
       "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
-      "dev": true,
       "dependencies": {
         "acorn": "^7.4.0",
         "acorn-jsx": "^5.3.1",
@@ -17599,7 +17669,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
       "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -24484,8 +24553,7 @@
     "node_modules/lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
-      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
-      "dev": true
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw=="
     },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
@@ -24551,9 +24619,9 @@
       }
     },
     "node_modules/lz-string": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-      "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "bin": {
         "lz-string": "bin/bin.js"
@@ -26818,7 +26886,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -27025,7 +27092,7 @@
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
       "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
       "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.4.x"
       }
@@ -30845,7 +30912,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
       "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "astral-regex": "^2.0.0",
@@ -30862,7 +30928,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -32058,7 +32123,6 @@
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
       "integrity": "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==",
-      "dev": true,
       "dependencies": {
         "ajv": "^8.0.1",
         "lodash.truncate": "^4.4.2",
@@ -32074,7 +32138,6 @@
       "version": "8.11.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
       "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -32089,8 +32152,7 @@
     "node_modules/table/node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/tailwindcss": {
       "version": "3.1.5",
@@ -32964,7 +33026,6 @@
       "version": "4.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
       "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
-      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -34182,7 +34243,7 @@
       "version": "2.25.1",
       "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.1.tgz",
       "integrity": "sha512-Koh0KyU/RPYwel/khxbsDz9ibDivmUbrRuKSSQvW42KSDdO4w23WI3SkHpSUKHE76LrFnnM/L7JCrpBwu8AXYw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "ansi-html-community": "0.0.8",
         "html-entities": "^2.1.0",
@@ -36402,7 +36463,6 @@
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
       "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==",
-      "dev": true,
       "requires": {
         "ajv": "^6.12.4",
         "debug": "^4.1.1",
@@ -36419,7 +36479,6 @@
           "version": "13.16.0",
           "resolved": "https://registry.npmjs.org/globals/-/globals-13.16.0.tgz",
           "integrity": "sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==",
-          "dev": true,
           "requires": {
             "type-fest": "^0.20.2"
           }
@@ -36427,8 +36486,7 @@
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-          "dev": true
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
         }
       }
     },
@@ -36442,7 +36500,6 @@
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
       "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==",
-      "dev": true,
       "requires": {
         "@humanwhocodes/object-schema": "^1.2.0",
         "debug": "^4.1.1",
@@ -37664,7 +37721,8 @@
     "@material-ui/types": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
+      "requires": {}
     },
     "@material-ui/utils": {
       "version": "4.11.3",
@@ -37755,7 +37813,8 @@
       "version": "1.6.22",
       "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-1.6.22.tgz",
       "integrity": "sha512-TDoPum4SHdfPiGSAaRBw7ECyI8VaHpK8GJugbJIJuqyh6kzw9ZLJZW3HGL3NNrJGxcAixUvqROm+YuQOo5eXtg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "@mdx-js/util": {
       "version": "1.6.22",
@@ -37899,7 +37958,8 @@
     "@mui/types": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.4.tgz",
-      "integrity": "sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ=="
+      "integrity": "sha512-uveM3byMbthO+6tXZ1n2zm0W3uJCQYtwt/v5zV5I77v2v18u0ITkb8xwhsDD2i3V2Kye7SaNR6FFJ6lMuY/WqQ==",
+      "requires": {}
     },
     "@mui/utils": {
       "version": "5.8.6",
@@ -38989,7 +39049,8 @@
           "version": "1.2.1",
           "resolved": "https://registry.npmjs.org/webpack-filter-warnings-plugin/-/webpack-filter-warnings-plugin-1.2.1.tgz",
           "integrity": "sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "y18n": {
           "version": "4.0.3",
@@ -39165,7 +39226,8 @@
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
           "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "jest-worker": {
           "version": "27.5.1",
@@ -39210,7 +39272,8 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
           "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "postcss-modules-local-by-default": {
           "version": "4.0.0",
@@ -41510,7 +41573,8 @@
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
           "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "jest-worker": {
           "version": "27.5.1",
@@ -41555,7 +41619,8 @@
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
           "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-          "dev": true
+          "dev": true,
+          "requires": {}
         },
         "postcss-modules-local-by-default": {
           "version": "4.0.0",
@@ -42406,6 +42471,70 @@
         "loader-utils": "^2.0.0"
       }
     },
+    "@testing-library/dom": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.2.0.tgz",
+      "integrity": "sha512-xTEnpUKiV/bMyEsE5bT4oYA0x0Z/colMtxzUY8bKyPXBNLn/e0V4ZjBZkEhms0xE4pv9QsPfSRu9AWS4y5wGvA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "^5.0.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "dependencies": {
+        "@types/aria-query": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.1.tgz",
+          "integrity": "sha512-XTIieEY+gvJ39ChLcB4If5zHtPxt3Syj5rgZR+e1ctpmK8NjPf0zFqsz4JpLJT0xla9GFDKjy8Cpu331nrmE1Q==",
+          "dev": true,
+          "peer": true
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "peer": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "peer": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@testing-library/jest-dom": {
       "version": "5.16.4",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
@@ -42914,6 +43043,12 @@
       "integrity": "sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==",
       "dev": true
     },
+    "@types/prismjs": {
+      "version": "1.26.0",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.0.tgz",
+      "integrity": "sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==",
+      "dev": true
+    },
     "@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -43052,7 +43187,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
-      "dev": true
+      "devOptional": true
     },
     "@types/stack-utils": {
       "version": "2.0.1",
@@ -43074,7 +43209,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz",
       "integrity": "sha512-ipixuVrh2OdNmauvtT51o3d8z12p6LtFW9in7U79der/kwejjdNchQC5UMn5u/KxNoM7VHHOs/l8KS8uHxhODQ==",
-      "dev": true
+      "devOptional": true
     },
     "@types/testing-library__jest-dom": {
       "version": "5.14.5",
@@ -43094,7 +43229,7 @@
       "version": "3.16.0",
       "resolved": "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.16.0.tgz",
       "integrity": "sha512-0yeUr92L3r0GLRnBOvtYK1v2SjqMIqQDHMl7GLb+l2L8+6LSFWEEWEIgVsPdMn5ImLM8qzWT8xFPtQYpp8co0g==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "source-map": "^0.6.1"
       },
@@ -43103,7 +43238,7 @@
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -43117,7 +43252,7 @@
       "version": "4.41.32",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.32.tgz",
       "integrity": "sha512-cb+0ioil/7oz5//7tZUSwbrSAN/NWHrQylz5cW8G0dWTcF/g+/dSdMlKVZspBYuMAN1+WnwHrkxiRrLcwd0Heg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/node": "*",
         "@types/tapable": "^1",
@@ -43131,7 +43266,7 @@
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
           "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -43145,7 +43280,7 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@types/webpack-sources/-/webpack-sources-3.2.0.tgz",
       "integrity": "sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/node": "*",
         "@types/source-list-map": "*",
@@ -43156,7 +43291,7 @@
           "version": "0.7.4",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
           "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
-          "dev": true
+          "devOptional": true
         }
       }
     },
@@ -43186,7 +43321,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.33.0.tgz",
       "integrity": "sha512-aINiAxGVdOl1eJyVjaWn/YcVAq4Gi/Yo35qHGCnqbWVz61g39D0h23veY/MA0rFFGfxK7TySg2uwDeNv+JgVpg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@typescript-eslint/experimental-utils": "4.33.0",
         "@typescript-eslint/scope-manager": "4.33.0",
@@ -43202,7 +43337,7 @@
           "version": "7.3.7",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
           "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -43213,7 +43348,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz",
       "integrity": "sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/json-schema": "^7.0.7",
         "@typescript-eslint/scope-manager": "4.33.0",
@@ -43227,7 +43362,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.33.0.tgz",
       "integrity": "sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@typescript-eslint/scope-manager": "4.33.0",
         "@typescript-eslint/types": "4.33.0",
@@ -43239,7 +43374,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz",
       "integrity": "sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@typescript-eslint/types": "4.33.0",
         "@typescript-eslint/visitor-keys": "4.33.0"
@@ -43259,13 +43394,13 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.33.0.tgz",
       "integrity": "sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==",
-      "dev": true
+      "devOptional": true
     },
     "@typescript-eslint/typescript-estree": {
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz",
       "integrity": "sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@typescript-eslint/types": "4.33.0",
         "@typescript-eslint/visitor-keys": "4.33.0",
@@ -43280,7 +43415,7 @@
           "version": "7.3.7",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
           "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-          "dev": true,
+          "devOptional": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -43356,7 +43491,7 @@
       "version": "4.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz",
       "integrity": "sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@typescript-eslint/types": "4.33.0",
         "eslint-visitor-keys": "^2.0.0"
@@ -43652,7 +43787,8 @@
     "acorn-jsx": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
-      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "requires": {}
     },
     "acorn-node": {
       "version": "1.8.2",
@@ -43741,7 +43877,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
       "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "ajv-formats": {
       "version": "2.1.1",
@@ -43772,7 +43909,8 @@
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ=="
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "requires": {}
     },
     "ansi-align": {
       "version": "3.0.1",
@@ -43786,8 +43924,7 @@
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
-      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==",
-      "dev": true
+      "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="
     },
     "ansi-escapes": {
       "version": "4.3.2",
@@ -44083,8 +44220,7 @@
     "astral-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
-      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
-      "dev": true
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ=="
     },
     "async": {
       "version": "3.2.4",
@@ -44486,7 +44622,8 @@
     "babel-plugin-named-asset-import": {
       "version": "0.3.8",
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.8.tgz",
-      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q=="
+      "integrity": "sha512-WXiAc++qo7XcJ1ZnTYGtLxmBCVbddAml3CEXgWaBzNzLNoxtQ8AiGEFDMOhot9XjTCQbvP5E77Fj9Gk924f00Q==",
+      "requires": {}
     },
     "babel-plugin-named-exports-order": {
       "version": "0.0.2",
@@ -46269,7 +46406,8 @@
         "css-declaration-sorter": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.0.tgz",
-          "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og=="
+          "integrity": "sha512-OGT677UGHJTAVMRhPO+HJ4oKln3wkBTwtDFH0ojbqm+MJm6xuDMHp2nkhh/ThaBqq20IbraBQSWKfSLNHQO9Og==",
+          "requires": {}
         },
         "css-tree": {
           "version": "1.1.3",
@@ -46329,7 +46467,8 @@
         "cssnano-utils": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-3.1.0.tgz",
-          "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA=="
+          "integrity": "sha512-JQNR19/YZhz4psLX/rQ9M83e3z2Wf/HdJbryzte4a3NSuafyp9w/I4U+hx5C2S9g41qlstH7DEWnZaaj83OuEA==",
+          "requires": {}
         },
         "has-flag": {
           "version": "4.0.0",
@@ -46403,22 +46542,26 @@
         "postcss-discard-comments": {
           "version": "5.1.2",
           "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz",
-          "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ=="
+          "integrity": "sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==",
+          "requires": {}
         },
         "postcss-discard-duplicates": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.1.0.tgz",
-          "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw=="
+          "integrity": "sha512-zmX3IoSI2aoenxHV6C7plngHWWhUOV3sP1T8y2ifzxzbtnuhk1EdPwm0S1bIUNaJ2eNbWeGLEwzw8huPD67aQw==",
+          "requires": {}
         },
         "postcss-discard-empty": {
           "version": "5.1.1",
           "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.1.1.tgz",
-          "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A=="
+          "integrity": "sha512-zPz4WljiSuLWsI0ir4Mcnr4qQQ5e1Ukc3i7UfE2XcrwKK2LIPIqE5jxMRxO6GbI3cv//ztXDsXwEWT3BHOGh3A==",
+          "requires": {}
         },
         "postcss-discard-overridden": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.1.0.tgz",
-          "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw=="
+          "integrity": "sha512-21nOL7RqWR1kasIVdKs8HNqQJhFxLsyRfAnUDm4Fe4t4mCWL9OJiHvlHPjcd8zc5Myu89b/7wZDnOSjFgeWRtw==",
+          "requires": {}
         },
         "postcss-merge-longhand": {
           "version": "5.1.6",
@@ -46479,7 +46622,8 @@
         "postcss-normalize-charset": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
-          "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg=="
+          "integrity": "sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==",
+          "requires": {}
         },
         "postcss-normalize-display-values": {
           "version": "5.1.0",
@@ -47354,7 +47498,8 @@
         "ws": {
           "version": "8.2.3",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA=="
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
         }
       }
     },
@@ -47373,7 +47518,8 @@
         "ws": {
           "version": "8.2.3",
           "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
-          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA=="
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
         }
       }
     },
@@ -47402,7 +47548,6 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
       "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
       "requires": {
         "ansi-colors": "^4.1.1"
       }
@@ -47562,7 +47707,6 @@
       "version": "7.32.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
       "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
-      "dev": true,
       "requires": {
         "@babel/code-frame": "7.12.11",
         "@eslint/eslintrc": "^0.4.3",
@@ -47610,7 +47754,6 @@
           "version": "7.12.11",
           "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
           "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
-          "dev": true,
           "requires": {
             "@babel/highlight": "^7.10.4"
           }
@@ -47619,7 +47762,6 @@
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -47628,7 +47770,6 @@
           "version": "4.1.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -47638,7 +47779,6 @@
           "version": "2.1.0",
           "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
           "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
-          "dev": true,
           "requires": {
             "eslint-visitor-keys": "^1.1.0"
           },
@@ -47646,8 +47786,7 @@
             "eslint-visitor-keys": {
               "version": "1.3.0",
               "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-              "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-              "dev": true
+              "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
             }
           }
         },
@@ -47655,7 +47794,6 @@
           "version": "13.16.0",
           "resolved": "https://registry.npmjs.org/globals/-/globals-13.16.0.tgz",
           "integrity": "sha512-A1lrQfpNF+McdPOnnFqY3kSN0AFTy485bTi1bkLk4mVPODIUEcSfhHgRqA+QdXPksrSTTztYXx37NFV+GpGk3Q==",
-          "dev": true,
           "requires": {
             "type-fest": "^0.20.2"
           }
@@ -47663,20 +47801,17 @@
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
         },
         "ignore": {
           "version": "4.0.6",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-          "dev": true
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
         },
         "optionator": {
           "version": "0.9.1",
           "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
           "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
-          "dev": true,
           "requires": {
             "deep-is": "^0.1.3",
             "fast-levenshtein": "^2.0.6",
@@ -47690,7 +47825,6 @@
           "version": "7.3.7",
           "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
           "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
-          "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -47699,7 +47833,6 @@
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -47928,7 +48061,8 @@
     "eslint-plugin-react-hooks": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz",
-      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g=="
+      "integrity": "sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==",
+      "requires": {}
     },
     "eslint-plugin-storybook": {
       "version": "0.5.12",
@@ -48074,7 +48208,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
       "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
-      "dev": true,
       "requires": {
         "acorn": "^7.4.0",
         "acorn-jsx": "^5.3.1",
@@ -48084,8 +48217,7 @@
         "eslint-visitor-keys": {
           "version": "1.3.0",
           "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-          "dev": true
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
         }
       }
     },
@@ -51595,7 +51727,8 @@
     "jest-pnp-resolver": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz",
-      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w=="
+      "integrity": "sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==",
+      "requires": {}
     },
     "jest-regex-util": {
       "version": "26.0.0",
@@ -52940,7 +53073,8 @@
         "ws": {
           "version": "7.5.8",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.8.tgz",
-          "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw=="
+          "integrity": "sha512-ri1Id1WinAX5Jqn9HejiGb8crfRio0Qgu8+MtL36rlTA6RLsMdWt1Az/19A2Qij6uSHUMphEFaTKa4WG+UNHNw==",
+          "requires": {}
         }
       }
     },
@@ -53246,8 +53380,7 @@
     "lodash.truncate": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
-      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
-      "dev": true
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw=="
     },
     "lodash.uniq": {
       "version": "4.5.0",
@@ -53300,9 +53433,9 @@
       }
     },
     "lz-string": {
-      "version": "1.4.4",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz",
-      "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true
     },
     "magic-string": {
@@ -55055,8 +55188,7 @@
     "progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true
+      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA=="
     },
     "promise": {
       "version": "8.1.0",
@@ -55230,7 +55362,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
       "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
-      "dev": true
+      "devOptional": true
     },
     "querystring-es3": {
       "version": "0.2.1",
@@ -55433,7 +55565,8 @@
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz",
       "integrity": "sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==",
-      "dev": true
+      "dev": true,
+      "requires": {}
     },
     "react-dom": {
       "version": "17.0.2",
@@ -55478,7 +55611,8 @@
     "react-icons": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
-      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
     },
     "react-inspector": {
       "version": "5.1.1",
@@ -55689,12 +55823,14 @@
         "@csstools/postcss-unset-value": {
           "version": "1.0.2",
           "resolved": "https://registry.npmjs.org/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz",
-          "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g=="
+          "integrity": "sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==",
+          "requires": {}
         },
         "@csstools/selector-specificity": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz",
-          "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg=="
+          "integrity": "sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==",
+          "requires": {}
         },
         "@eslint/eslintrc": {
           "version": "1.3.0",
@@ -55895,7 +56031,8 @@
         "css-prefers-color-scheme": {
           "version": "6.0.3",
           "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
-          "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA=="
+          "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
+          "requires": {}
         },
         "dotenv": {
           "version": "10.0.0",
@@ -56058,7 +56195,8 @@
         "icss-utils": {
           "version": "5.1.0",
           "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
-          "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA=="
+          "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+          "requires": {}
         },
         "jest-worker": {
           "version": "27.5.1",
@@ -56127,7 +56265,8 @@
         "postcss-browser-comments": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/postcss-browser-comments/-/postcss-browser-comments-4.0.0.tgz",
-          "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg=="
+          "integrity": "sha512-X9X9/WN3KIvY9+hNERUqX9gncsgBA25XaeR+jshHz2j8+sYyHktHw1JdKuMjeLpGktXidqDhA7b/qm1mrBDmgg==",
+          "requires": {}
         },
         "postcss-clamp": {
           "version": "4.1.0",
@@ -56213,7 +56352,8 @@
         "postcss-flexbugs-fixes": {
           "version": "5.0.2",
           "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz",
-          "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ=="
+          "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==",
+          "requires": {}
         },
         "postcss-focus-visible": {
           "version": "6.0.4",
@@ -56234,12 +56374,14 @@
         "postcss-font-variant": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
-          "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA=="
+          "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
+          "requires": {}
         },
         "postcss-gap-properties": {
           "version": "3.0.4",
           "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.4.tgz",
-          "integrity": "sha512-PaEM4AUQY7uomyuVVXsIntdo4eT8VkBMrSinQxvXuMcJ1z3RHlFw4Kqef2X+rRVz3WHaYCa0EEtwousBT6vcIA=="
+          "integrity": "sha512-PaEM4AUQY7uomyuVVXsIntdo4eT8VkBMrSinQxvXuMcJ1z3RHlFw4Kqef2X+rRVz3WHaYCa0EEtwousBT6vcIA==",
+          "requires": {}
         },
         "postcss-image-set-function": {
           "version": "4.0.7",
@@ -56252,7 +56394,8 @@
         "postcss-initial": {
           "version": "4.0.1",
           "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
-          "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ=="
+          "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
+          "requires": {}
         },
         "postcss-lab-function": {
           "version": "4.2.1",
@@ -56276,17 +56419,20 @@
         "postcss-logical": {
           "version": "5.0.4",
           "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
-          "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g=="
+          "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
+          "requires": {}
         },
         "postcss-media-minmax": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
-          "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ=="
+          "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
+          "requires": {}
         },
         "postcss-modules-extract-imports": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
-          "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw=="
+          "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+          "requires": {}
         },
         "postcss-modules-local-by-default": {
           "version": "4.0.0",
@@ -56344,7 +56490,8 @@
         "postcss-page-break": {
           "version": "3.0.4",
           "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
-          "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ=="
+          "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
+          "requires": {}
         },
         "postcss-place": {
           "version": "7.0.5",
@@ -56419,7 +56566,8 @@
         "postcss-replace-overflow-wrap": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
-          "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw=="
+          "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
+          "requires": {}
         },
         "postcss-selector-not": {
           "version": "6.0.1",
@@ -56466,7 +56614,8 @@
         "style-loader": {
           "version": "3.3.1",
           "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
-          "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ=="
+          "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+          "requires": {}
         },
         "supports-color": {
           "version": "7.2.0",
@@ -56693,7 +56842,8 @@
     "redux-thunk": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
-      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q=="
+      "integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
+      "requires": {}
     },
     "refractor": {
       "version": "3.6.0",
@@ -57833,7 +57983,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
       "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
-      "dev": true,
       "requires": {
         "ansi-styles": "^4.0.0",
         "astral-regex": "^2.0.0",
@@ -57844,7 +57993,6 @@
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
           "requires": {
             "color-convert": "^2.0.1"
           }
@@ -58810,7 +58958,6 @@
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
       "integrity": "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==",
-      "dev": true,
       "requires": {
         "ajv": "^8.0.1",
         "lodash.truncate": "^4.4.2",
@@ -58823,7 +58970,6 @@
           "version": "8.11.0",
           "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
           "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
-          "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
             "json-schema-traverse": "^1.0.0",
@@ -58834,8 +58980,7 @@
         "json-schema-traverse": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-          "dev": true
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
         }
       }
     },
@@ -59481,8 +59626,7 @@
     "typescript": {
       "version": "4.8.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
-      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
-      "dev": true
+      "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig=="
     },
     "typescript-compare": {
       "version": "0.0.2",
@@ -60326,7 +60470,8 @@
         "acorn-import-assertions": {
           "version": "1.8.0",
           "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
-          "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw=="
+          "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
+          "requires": {}
         },
         "commander": {
           "version": "2.20.3",
@@ -60506,7 +60651,7 @@
       "version": "2.25.1",
       "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.25.1.tgz",
       "integrity": "sha512-Koh0KyU/RPYwel/khxbsDz9ibDivmUbrRuKSSQvW42KSDdO4w23WI3SkHpSUKHE76LrFnnM/L7JCrpBwu8AXYw==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "ansi-html-community": "0.0.8",
         "html-entities": "^2.1.0",
@@ -61004,7 +61149,8 @@
     "ws": {
       "version": "8.8.0",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.8.0.tgz",
-      "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ=="
+      "integrity": "sha512-JDAgSYQ1ksuwqfChJusw1LSJ8BizJ2e/vVu5Lxjq3YvNJNlROv1ui4i+c/kUUrPheBvQl4c5UbERhTwKa6QBJQ==",
+      "requires": {}
     },
     "x-default-browser": {
       "version": "0.4.0",
diff --git a/frontend/package.json b/frontend/package.json
index 99a72094..8de7d51e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -83,6 +83,7 @@
     "@types/draft-js": "0.11.9",
     "@types/jest": "26.0.24",
     "@types/node": "12.20.55",
+    "@types/prismjs": "^1.26.0",
     "@types/react": "17.0.44",
     "@types/react-dom": "17.0.17",
     "@types/react-redux": "7.1.24",
diff --git a/frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock-Styled.tsx b/frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock-Styled.tsx
new file mode 100644
index 00000000..c2c25268
--- /dev/null
+++ b/frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock-Styled.tsx	
@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export type buttonProps = {
+  background?: string;
+};
+export const StyledButton = styled.div<buttonProps>`
+  width: 175px;
+  height: 45px;
+  margin: 5px;
+  background: ${(props) => props.background};
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  user-select: none;
+
+  &:hover {
+    background: #efeef3;
+    color: black;
+    transform: scale(1.04);
+  }
+  &:active {
+    background: #c8d1fa;
+    transform: scale(0.96);
+  }
+
+  cursor: pointer;
+`;
diff --git a/frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock.stories.tsx b/frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock.stories.tsx
new file mode 100644
index 00000000..fe77bf48
--- /dev/null
+++ b/frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock.stories.tsx	
@@ -0,0 +1,32 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import CreateCodeBlock from './CreateCodeBlock';
+
+import { AiFillEdit } from "react-icons/ai";
+
+export default {
+  title: 'CSE-UIKIT/CreateCodeBlockButton',
+  component: CreateCodeBlock,
+
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof CreateCodeBlock>;
+
+const Template: ComponentStory<typeof CreateCodeBlock> = (args) =>
+(
+  <div
+    style={{
+      margin: "30px"
+    }}
+  >
+    Insert Button
+    <CreateCodeBlock {...args}></CreateCodeBlock>
+  </div>
+)
+
+export const Primary = Template.bind({});
+Primary.args = {
+  background: "#90c2e7",
+}
diff --git a/frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock.tsx b/frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock.tsx
new file mode 100644
index 00000000..a29fe2d2
--- /dev/null
+++ b/frontend/src/cse-ui-kit/CreateCodeBlock_button /CreateCodeBlock.tsx	
@@ -0,0 +1,20 @@
+import React, { MouseEventHandler } from "react";
+import { StyledButton, buttonProps } from "./CreateCodeBlock-Styled";
+import { AiOutlineCode } from "react-icons/ai";
+
+type Props = {
+  onClick?: MouseEventHandler<HTMLDivElement>;
+} & buttonProps;
+
+export default function CreateCodeBlock({ onClick, ...styleProps }: Props) {
+  return (
+    <StyledButton
+      data-anchor="CreateCodeBlockButton"
+      onClick={onClick}
+      {...styleProps}
+    >
+      <AiOutlineCode />
+      Insert Code Block
+    </StyledButton>
+  );
+}
diff --git a/frontend/src/cse-ui-kit/CreateCodeBlock_button /index.ts b/frontend/src/cse-ui-kit/CreateCodeBlock_button /index.ts
new file mode 100644
index 00000000..715546f4
--- /dev/null
+++ b/frontend/src/cse-ui-kit/CreateCodeBlock_button /index.ts	
@@ -0,0 +1,3 @@
+import CreateCodeBlock from './CreateCodeBlock';
+
+export default CreateCodeBlock;
\ No newline at end of file
diff --git a/frontend/src/cse-ui-kit/codeblock/codecontentblock-Styled.tsx b/frontend/src/cse-ui-kit/codeblock/codecontentblock-Styled.tsx
new file mode 100644
index 00000000..121688e2
--- /dev/null
+++ b/frontend/src/cse-ui-kit/codeblock/codecontentblock-Styled.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import styled from "styled-components";
+
+export type StyledProps = {
+  focused?: boolean;
+}
+
+export const StyledCodeContent = styled.div<StyledProps>`
+  width: 100%;
+  max-width: 600px;
+  background: #f7f7f7;
+  color: #000000;
+  box-shadow: ${(props) => props.focused && '0px 2px 3px rgba(0, 0, 0, 0.25);'}
+  padding: 30px 20px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 5px;
+  margin: 5px;
+  padding: 5px;
+  font-family: monospace;
+`;
+
+export const StyledCodeContentDots = styled.div`
+  height: 100;
+  cursor: pointer;
+`;
diff --git a/frontend/src/cse-ui-kit/codeblock/codecontentblock-wrapper.tsx b/frontend/src/cse-ui-kit/codeblock/codecontentblock-wrapper.tsx
new file mode 100644
index 00000000..9e68f1ac
--- /dev/null
+++ b/frontend/src/cse-ui-kit/codeblock/codecontentblock-wrapper.tsx
@@ -0,0 +1,38 @@
+/* eslint-disable */
+import React from 'react';
+import { StyledCodeContent, StyledCodeContentDots, StyledProps } from './codecontentblock-Styled';
+import { ReactComponent as Dots } from '../../assets/moveable-content-dots.svg';
+import { Box } from "@mui/material";
+
+type Props = {
+  children?: React.ReactElement | any;
+  onClick?: (...args: any) => void;
+} & StyledProps;
+
+export default function MoveableContentBlock({ children, onClick, ...styleProps }: Props) {
+  const { focused } = styleProps;
+  return (
+    <StyledCodeContent
+      onClick={onClick}
+      {...styleProps}
+      data-anchor="ContentBlockWrapper"
+    >
+      <div
+        style={{
+          width: "90%",
+          wordWrap: "break-word"
+        }}
+      >
+        {children}
+      </div>
+      <StyledCodeContentDots>
+        { (focused == true) &&
+          <Dots
+            height="18px"
+            width="18px"
+          />
+        }
+      </StyledCodeContentDots>
+    </StyledCodeContent>
+  );
+}
\ No newline at end of file
diff --git a/frontend/src/cse-ui-kit/codeblock/codecontentblock.stories.tsx b/frontend/src/cse-ui-kit/codeblock/codecontentblock.stories.tsx
new file mode 100644
index 00000000..ccd31f4a
--- /dev/null
+++ b/frontend/src/cse-ui-kit/codeblock/codecontentblock.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import MoveableCodeContentContentBlock from './codecontentblock-wrapper';
+
+export default {
+  title: 'CSE-UIKIT/CodeContentContentBlock',
+  component: MoveableCodeContentContentBlock,
+} as ComponentMeta<typeof MoveableCodeContentContentBlock>;
+
+const Template: ComponentStory<typeof MoveableCodeContentContentBlock> = (args) =>
+(
+  <div
+    style={{
+      margin: "30px"
+    }}
+  >
+    Moveable Content Block
+    <MoveableCodeContentContentBlock {...args}>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </MoveableCodeContentContentBlock>
+  </div>
+)
+
+export const Primary = Template.bind({});
\ No newline at end of file
diff --git a/frontend/src/packages/editor/componentFactory.tsx b/frontend/src/packages/editor/componentFactory.tsx
index 81e658ab..8196eb11 100644
--- a/frontend/src/packages/editor/componentFactory.tsx
+++ b/frontend/src/packages/editor/componentFactory.tsx
@@ -4,6 +4,7 @@ import React from "react";
 import { BlockData, UpdateCallback, CMSBlockProps } from "./types";
 import EditorBlock from "./components/EditorBlock";
 import { OperationManager, slateToCmsOperation } from "./operationManager";
+import CodeBlock from "./components/CodeBlock";
 
 // TODO: not now because I want to get this over and done with but the idea of attaching the operation path to the id irks me
 //  because logically the operation paths aren't actually coupled to the id, it is just a coincidence, ideally the source of the operation path index
@@ -15,7 +16,8 @@ type callbackHandler = (id: number, update: BlockData) => void;
 // registration of all block constructors
 const constructors: Record<string, (props: CMSBlockProps) => JSX.Element> = {
     "paragraph": (props) => <EditorBlock {...props} />,
-    "heading": (props) => <HeadingBlock {...props} />
+    "heading": (props) => <HeadingBlock {...props} />,
+    "code" : (props) => <CodeBlock {...props} />
 }
 
 /**
diff --git a/frontend/src/packages/editor/components/CodeBlock.tsx b/frontend/src/packages/editor/components/CodeBlock.tsx
new file mode 100644
index 00000000..77333ca4
--- /dev/null
+++ b/frontend/src/packages/editor/components/CodeBlock.tsx
@@ -0,0 +1,299 @@
+// This implementation is heavily derived the official sample Slate implementation
+// Original Code here: 
+// https://github.com/ianstormtaylor/slate/blob/main/site/examples/code-highlighting.tsx
+import React, { FC, useMemo, useCallback } from 'react';
+import { 
+  Slate,
+  Editable,
+  withReact,
+  RenderLeafProps,
+  RenderElementProps,
+  useSlate
+} from 'slate-react';
+
+import prismThemeCss from './styles/PrismTheme';
+
+import { CustomElement } from '../types';
+
+import Prism from 'prismjs';
+
+// Supported Languages
+//
+// For all languages supported by Prism, visit https://prismjs.com/
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-tsx';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-prolog';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-latex';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-go'
+import 'prismjs/components/prism-haskell';
+import 'prismjs/components/prism-perl';
+
+import styled from 'styled-components';
+import { 
+  Range,
+  createEditor,
+  Editor,
+  Element, 
+  NodeEntry,
+  Transforms,
+  Node
+} from 'slate';
+
+import { CMSBlockProps } from '../types';
+
+import CodeContentBlock from "../../../cse-ui-kit/codeblock/codecontentblock-wrapper";
+import { normalizeTokens } from './util/normalize-tokens';
+import isHotkey from 'is-hotkey';
+
+
+const ToolbarContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  max-width: 600px;
+  margin: 5px;
+  justify-content: flex-end;
+`;
+
+const LanguageSelectWrapper = styled.select`
+  content-editable: false;
+  right: 5px;
+  top: 5px;
+  z-index: 1;
+`;
+
+const LanguageSelect = (props: JSX.IntrinsicElements['select']) => {
+  return (
+    <LanguageSelectWrapper value={props.value} onChange={props.onChange}>
+      <option value="css">CSS</option>
+      <option value="html">HTML</option>
+      <option value="java">Java</option>
+      <option value="javascript">JavaScript</option>
+      <option value="jsx">JSX</option>
+      <option value="typescript">TypeScript</option>
+      <option value="tsx">TSX</option>
+      <option value="markdown">Markdown</option>
+      <option value="c">C</option>
+      <option value="cpp">C++</option>
+      <option value="php">PHP</option>
+      <option value="python">Python</option>
+      <option value="sql">SQL</option>
+      <option value="bash">Shell</option>
+      <option value="latex">LaTeX</option>
+      <option value="rust">Rust</option>
+      <option value="go">Go</option>
+      <option value="haskell">Haskell</option>
+      <option value="perl">Perl</option>
+    </LanguageSelectWrapper>
+  );
+}
+
+
+const CodeBlock: FC<CMSBlockProps> = ({
+  id,
+  update,
+  initialValue,
+  showToolBar,
+  onEditorClick,
+}) => {
+  const editor = useMemo(() => withReact(createEditor()), []);
+
+  const renderLeaf: (props: RenderLeafProps) => JSX.Element = useCallback(
+    ({ attributes, children, leaf }) => {
+      const props = {
+        ...attributes,
+      };
+
+      const {text, ...rest} = leaf;
+
+      return (
+        <span {...props} className={Object.keys(rest).join(' ')}>{
+          children}
+        </span>
+      )
+    },
+    []
+  );
+
+  const language = (editor.children[0] as Element) !== undefined
+    ? (editor.children[0] as Element).language ?? "python"
+    : "python"
+  ;
+
+  const decorate = useDecorate(editor);
+
+  const setLanguage = (newLanguage : string) => {
+    // Select entire editor and change all lines to have language `newLanguage`.
+    Transforms.select(editor, {
+      anchor: Editor.start(editor, []),
+      focus: Editor.end(editor, []),
+    })
+    Transforms.setNodes(editor, { language: newLanguage });
+  };
+
+  return (
+    <Slate
+      editor={editor}
+      
+      value={initialValue}
+      onChange={(value) => update(id, editor.children, editor.operations)}
+    >
+      {showToolBar && 
+        <ToolbarContainer>
+          <LanguageSelect 
+            value={language}
+            onChange={event => setLanguage(event.target.value)}
+          />
+        </ToolbarContainer>
+      }
+      <SetNodeToDecorations/>
+      <CodeContentBlock focused={showToolBar}>
+        <Editable
+          decorate={decorate}
+          renderElement={ElementWrapper}
+          renderLeaf={renderLeaf}
+          onClick={() => onEditorClick()}
+          autoFocus
+          style={{ width: "100%", height: "100%" }}
+          spellCheck={false}
+          onKeyDown={useOnKeydown(editor)}
+        />
+        <style>{prismThemeCss}</style>
+      </CodeContentBlock>
+    </Slate>
+  );
+};
+
+const ElementWrapper = (props: RenderElementProps) => {
+  const { attributes, children, element } = props;
+  return (
+    <div {...attributes} style={{ position: 'relative' }}>
+        {children}
+    </div>
+  );
+}
+
+const useDecorate = (editor: Editor) => {
+  return useCallback(
+    ([node, path]) => {
+      const ranges = editor.nodeToDecorations?.get(node) || [];
+      return ranges;
+    },
+    [editor.nodeToDecorations]
+  );
+}
+
+// Tabbing is exclusive behaviour for code blocks
+// Hence this is defined here rather than in buttonHelpers.ts with the other cases.
+const useOnKeydown = (editor: Editor) => {
+  const onKeyDown: React.KeyboardEventHandler = useCallback(
+    e => {
+      if (isHotkey('tab', e)) {
+        // handle tab key, simulate tabbing by adding spaces
+        e.preventDefault();
+
+        Editor.insertText(editor, '    ');
+      }
+    },
+    [editor]
+  );
+
+  return onKeyDown;
+}
+
+const getChildNodeToDecorations = ([block, blockPath]: NodeEntry<
+  CustomElement
+>) => {
+  const nodeToDecorations = new Map<Element, Range[]>();
+
+  const text = block.children.map((line) => Node.string(line)).join('\n');
+  const language = block.language ?? "python";
+  const tokens = Prism.tokenize(text, Prism.languages[language]);
+  // make tokens flat and grouped by line
+  const normalizedTokens = normalizeTokens(tokens); 
+  const blockChildren = block.children as unknown as Element[];
+
+  for (let index = 0; index < normalizedTokens.length; index++) {
+    const tokens = normalizedTokens[index];
+    const element = blockChildren[index];
+
+    if (!nodeToDecorations.has(element)) {
+      nodeToDecorations.set(element, []);
+    }
+
+    let start = 0;
+    for (const token of tokens) {
+      const length = token.content.length;
+      if (!length) {
+        continue;
+      }
+
+      const end = start + length;
+
+      const path = [...blockPath, index, 0];
+      const range = {
+        anchor: { path, offset: start },
+        focus: { path, offset: end },
+        token: true,
+        ...Object.fromEntries(token.types.map(type => [type, true])),
+      };
+
+      nodeToDecorations.get(element)?.push(range);
+
+      start = end;
+    }
+  }
+
+  return nodeToDecorations;
+}
+
+
+// precalculate editor.nodeToDecorations map to use it inside decorate function then
+const SetNodeToDecorations = () => {
+  const editor = useSlate();
+
+  const blockEntries = Array.from(
+    Editor.nodes<Element>(editor, {
+      at: [],
+      mode: 'highest',
+      //  Find all code block nodes
+      match: n => Element.isElement(n) && n.type === 'code',
+    })
+  );
+  
+  const nodeToDecorations = mergeMaps(
+    ...blockEntries.map(getChildNodeToDecorations)
+  );
+  
+  editor.nodeToDecorations = nodeToDecorations;
+  
+  return null;
+}
+    
+const mergeMaps = <K, V>(...maps: Map<K, V>[]) => {
+  const map = new Map<K, V>();
+
+  for (const m of maps) {
+    for (const item of m) {
+      map.set(...item);
+    }
+  }
+
+  return map;
+
+}
+
+
+export default CodeBlock;
diff --git a/frontend/src/packages/editor/components/styles/PrismTheme.tsx b/frontend/src/packages/editor/components/styles/PrismTheme.tsx
new file mode 100644
index 00000000..d9ce2257
--- /dev/null
+++ b/frontend/src/packages/editor/components/styles/PrismTheme.tsx
@@ -0,0 +1,126 @@
+// Default theme for Syntax Highlighting in code blocks
+
+const prismThemeCss = `
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+    color: black;
+    background: none;
+    text-shadow: 0 1px white;
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 1em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: #b3d4fc;
+}
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+}
+@media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+        text-shadow: none;
+    }
+}
+/* Code blocks */
+pre[class*="language-"] {
+    padding: 1em;
+    margin: .5em 0;
+    overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+    background: #f5f2f0;
+}
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+    white-space: normal;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: slategray;
+}
+.token.punctuation {
+    color: #999;
+}
+.token.namespace {
+    opacity: .7;
+}
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+    color: #905;
+}
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+    color: #690;
+}
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: #9a6e3a;
+    /* This background color was intended by the author of this theme. */
+    background: hsla(0, 0%, 100%, .5);
+}
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+    color: #07a;
+}
+.token.function,
+.token.class-name {
+    color: #DD4A68;
+}
+.token.regex,
+.token.important,
+.token.variable {
+    color: #e90;
+}
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+.token.italic {
+    font-style: italic;
+}
+.token.entity {
+    cursor: help;
+}
+`;
+
+export default prismThemeCss;
\ No newline at end of file
diff --git a/frontend/src/packages/editor/components/util/normalize-tokens.ts b/frontend/src/packages/editor/components/util/normalize-tokens.ts
new file mode 100644
index 00000000..389d129d
--- /dev/null
+++ b/frontend/src/packages/editor/components/util/normalize-tokens.ts
@@ -0,0 +1,117 @@
+/**
+ * Copied from prism-react-renderer repo
+ * https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/utils/normalizeTokens.js
+ * */
+
+import Prism from 'prismjs'
+
+type PrismToken = Prism.Token
+type Token = {
+  types: string[]
+  content: string
+  empty?: boolean
+}
+
+const newlineRe = /\r\n|\r|\n/
+
+// Empty lines need to contain a single empty token, denoted with { empty: true }
+const normalizeEmptyLines = (line: Token[]) => {
+  if (line.length === 0) {
+    line.push({
+      types: ['plain'],
+      content: '\n',
+      empty: true,
+    })
+  } else if (line.length === 1 && line[0].content === '') {
+    line[0].content = '\n'
+    line[0].empty = true
+  }
+}
+
+const appendTypes = (types: string[], add: string[] | string): string[] => {
+  const typesSize = types.length
+  if (typesSize > 0 && types[typesSize - 1] === add) {
+    return types
+  }
+
+  return types.concat(add)
+}
+
+// Takes an array of Prism's tokens and groups them by line, turning plain
+// strings into tokens as well. Tokens can become recursive in some cases,
+// which means that their types are concatenated. Plain-string tokens however
+// are always of type "plain".
+// This is not recursive to avoid exceeding the call-stack limit, since it's unclear
+// how nested Prism's tokens can become
+export const normalizeTokens = (
+  tokens: Array<PrismToken | string>
+): Token[][] => {
+  const typeArrStack: string[][] = [[]]
+  const tokenArrStack = [tokens]
+  const tokenArrIndexStack = [0]
+  const tokenArrSizeStack = [tokens.length]
+
+  let i = 0
+  let stackIndex = 0
+  let currentLine: any[] = []
+
+  const acc = [currentLine]
+
+  while (stackIndex > -1) {
+    while (
+      (i = tokenArrIndexStack[stackIndex]++) < tokenArrSizeStack[stackIndex]
+    ) {
+      let content: any
+      let types = typeArrStack[stackIndex]
+
+      const tokenArr = tokenArrStack[stackIndex]
+      const token = tokenArr[i]
+
+      // Determine content and append type to types if necessary
+      if (typeof token === 'string') {
+        types = stackIndex > 0 ? types : ['plain']
+        content = token
+      } else {
+        types = appendTypes(types, token.type)
+        if (token.alias) {
+          types = appendTypes(types, token.alias)
+        }
+
+        content = token.content
+      }
+
+      // If token.content is an array, increase the stack depth and repeat this while-loop
+      if (typeof content !== 'string') {
+        stackIndex++
+        typeArrStack.push(types)
+        tokenArrStack.push(content)
+        tokenArrIndexStack.push(0)
+        tokenArrSizeStack.push(content.length)
+        continue
+      }
+
+      // Split by newlines
+      const splitByNewlines = content.split(newlineRe)
+      const newlineCount = splitByNewlines.length
+
+      currentLine.push({ types, content: splitByNewlines[0] })
+
+      // Create a new line for each string on a new line
+      for (let i = 1; i < newlineCount; i++) {
+        normalizeEmptyLines(currentLine)
+        acc.push((currentLine = []))
+        currentLine.push({ types, content: splitByNewlines[i] })
+      }
+    }
+
+    // Decreate the stack depth
+    stackIndex--
+    typeArrStack.pop()
+    tokenArrStack.pop()
+    tokenArrIndexStack.pop()
+    tokenArrSizeStack.pop()
+  }
+
+  normalizeEmptyLines(currentLine)
+  return acc
+}
\ No newline at end of file
diff --git a/frontend/src/packages/editor/index.tsx b/frontend/src/packages/editor/index.tsx
index 793ee0ca..7e34ead0 100644
--- a/frontend/src/packages/editor/index.tsx
+++ b/frontend/src/packages/editor/index.tsx
@@ -15,6 +15,7 @@ import { buildComponentFactory } from "./componentFactory";
 import { OperationManager } from "./operationManager";
 import { publishDocument } from "./api/cmsFS/volumes";
 import { CMSOperation } from "./api/OTClient/operation";
+import CreateCodeBlock from "src/cse-ui-kit/CreateCodeBlock_button ";
 
 const Container = styled.div`
   display: flex;
@@ -71,7 +72,7 @@ const EditorPage: FC = () => {
   }
 
   // buildClickHandler builds handlers for events where new blocks are created and propagates them to the OT manager
-  const buildButtonClickHandler = (type: "heading" | "paragraph") => () => {
+  const buildButtonClickHandler = (type: "heading" | "paragraph" | "code") => () => {
     const newElement = { type: type, children: [{ text: "" }] };
 
     // push and update this creation operation to the operation manager
@@ -91,6 +92,7 @@ const EditorPage: FC = () => {
         <InsertContentWrapper>
           <CreateHeadingBlock onClick={buildButtonClickHandler("heading")} />
           <CreateContentBlock onClick={buildButtonClickHandler("paragraph")} />
+          <CreateCodeBlock    onClick={buildButtonClickHandler("code")} />
         </InsertContentWrapper>
       </Container>
     </div>
diff --git a/frontend/src/packages/editor/types.ts b/frontend/src/packages/editor/types.ts
index c1649e4b..438c0bb4 100644
--- a/frontend/src/packages/editor/types.ts
+++ b/frontend/src/packages/editor/types.ts
@@ -1,12 +1,11 @@
 import { ReactEditor } from "slate-react";
-import { BaseEditor, BaseOperation, Descendant } from "slate";
+import { BaseEditor, BaseOperation, Range, Descendant, BaseRange } from "slate";
 
 export type BlockData = Descendant[];
 
 export type OpPropagator = (id: number, update: BlockData, operation: BaseOperation[]) => void;
 export type UpdateCallback = (id: number, update: BlockData) => void;
 
-type CustomElement = { type: "paragraph" | "heading"; children: CustomText[] };
 export type CustomText = {
   textSize?: number;
   text: string;
@@ -19,19 +18,33 @@ export type CustomText = {
   code?: string;
 };
 
+export type CustomElement = { 
+  type: "paragraph" | "heading" | "code"; 
+  language?: string, 
+  children: Descendant[] 
+};
+
 export interface CMSBlockProps {
   update: OpPropagator;
   initialValue: BlockData;
   id: number;
   showToolBar: boolean;
+  language?: string;
   onEditorClick: () => void;
 }
 
+export type CustomEditor = BaseEditor &
+  ReactEditor & {
+    nodeToDecorations?: Map<CustomElement, Range[]>
+  }
 
 declare module "slate" {
   interface CustomTypes {
-    Editor: BaseEditor & ReactEditor;
+    Editor: CustomEditor;
     Element: CustomElement;
     Text: CustomText;
+    Range: BaseRange & {
+      [key: string] : unknown
+    };
   }
 }