diff --git a/website/package-lock.json b/website/package-lock.json index 8bb5b783dc..b29a31a954 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -8,6 +8,9 @@ "name": "website", "version": "0.1.0", "dependencies": { + "@bytemd/plugin-gfm": "^1.21.0", + "@bytemd/plugin-math": "^1.21.0", + "@bytemd/react": "^1.21.0", "@chakra-ui/icons": "^2.0.19", "@chakra-ui/react": "^2.6.1", "@dnd-kit/core": "^6.0.8", @@ -2123,6 +2126,46 @@ "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==", "dev": true }, + "node_modules/@bytemd/plugin-gfm": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@bytemd/plugin-gfm/-/plugin-gfm-1.21.0.tgz", + "integrity": "sha512-ZlrLa+Nl80gUDeC1hTnyRDfgJU3DGQVjQvX9rIIitUCler+KsAiagEnng6S/W2SZNpv+f8eWpVNL8KA8X3d7Tg==", + "dependencies": { + "remark-gfm": "^3.0.1" + }, + "peerDependencies": { + "bytemd": "^1.5.0" + } + }, + "node_modules/@bytemd/plugin-math": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@bytemd/plugin-math/-/plugin-math-1.21.0.tgz", + "integrity": "sha512-SkKTuPX8D+3x3aVRfZbCGg52mUDar54zn/cbnPY7RYqGUQRz0tSXVApC4mJxfzWpxvPnbjkmy742NVriDUoFrw==", + "dependencies": { + "@types/katex": "^0.16.0", + "katex": "^0.16.4", + "remark-math": "^5.1.1" + }, + "peerDependencies": { + "bytemd": "^1.5.0" + } + }, + "node_modules/@bytemd/plugin-math/node_modules/@types/katex": { + "version": "0.16.0", + "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.0.tgz", + "integrity": "sha512-hz+S3nV6Mym5xPbT9fnO8dDhBFQguMYpY0Ipxv06JMi1ORgnEM4M1ymWDUhUNer3ElLmT583opRo4RzxKmh9jw==" + }, + "node_modules/@bytemd/react": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@bytemd/react/-/react-1.21.0.tgz", + "integrity": "sha512-WYb+XlFHWraK9KWuNUlWMZoKlI55wDj4388E40zCsxaN/O6UUnCGdrE+6ZiVGPN3ZiqfQ1iceGIzmJ2PiB2T9w==", + "dependencies": { + "bytemd": "1.21.0" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/@chakra-ui/accordion": { "version": "2.1.11", "resolved": "https://registry.npmjs.org/@chakra-ui/accordion/-/accordion-2.1.11.tgz", @@ -7793,6 +7836,14 @@ "@types/node": "*" } }, + "node_modules/@types/codemirror": { + "version": "5.60.7", + "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.7.tgz", + "integrity": "sha512-QXIC+RPzt/1BGSuD6iFn6UMC9TDp+9hkOANYNPVsjjrDdzKphfRkwQDKGp2YaC54Yhz0g6P5uYTCCibZZEiMAA==", + "dependencies": { + "@types/tern": "*" + } + }, "node_modules/@types/connect": { "version": "3.4.35", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", @@ -7863,8 +7914,7 @@ "node_modules/@types/estree": { "version": "0.0.51", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.51.tgz", - "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==", - "dev": true + "integrity": "sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==" }, "node_modules/@types/express": { "version": "4.17.17", @@ -8142,6 +8192,11 @@ "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz", "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==" }, + "node_modules/@types/parse5": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz", + "integrity": "sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==" + }, "node_modules/@types/prettier": { "version": "2.7.2", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz", @@ -8257,6 +8312,14 @@ "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==", "dev": true }, + "node_modules/@types/tern": { + "version": "0.23.4", + "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.4.tgz", + "integrity": "sha512-JAUw1iXGO1qaWwEOzxTKJZ/5JxVeON9kvGZ/osgZaJImBnyjyn0cjovPsf6FNLmyGY8Vw9DoXZCMlfMkMwHRWg==", + "dependencies": { + "@types/estree": "*" + } + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.5", "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz", @@ -10146,6 +10209,32 @@ "node": ">=10.16.0" } }, + "node_modules/bytemd": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/bytemd/-/bytemd-1.21.0.tgz", + "integrity": "sha512-6nc658omwzcLdc/lT24w8G2x5pptZXiMyrQPbFuHwhYbmrLnsmKLm+9klsOx2/Lg2cYHYb2WzVh7zKZ9MZCVdg==", + "dependencies": { + "@popperjs/core": "^2.11.7", + "@types/codemirror": "^5.60.7", + "@types/hast": "^2.3.4", + "@types/lodash-es": "^4.17.7", + "@types/mdast": "^3.0.11", + "codemirror-ssr": "^0.65.0", + "hast-util-sanitize": "^4.1.0", + "lodash-es": "^4.17.21", + "rehype-raw": "^6.1.1", + "rehype-sanitize": "^5.0.1", + "rehype-stringify": "^9.0.3", + "remark-parse": "^10.0.1", + "remark-rehype": "^10.1.0", + "select-files": "^1.0.1", + "tippy.js": "^6.3.7", + "unified": "^10.1.2", + "unist-util-visit": "^4.1.2", + "vfile": "^5.3.7", + "word-count": "^0.2.2" + } + }, "node_modules/bytes": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", @@ -10353,6 +10442,15 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/character-entities-html4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", + "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/character-entities-legacy": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", @@ -10651,6 +10749,14 @@ "node": ">= 0.12.0" } }, + "node_modules/codemirror-ssr": { + "version": "0.65.0", + "resolved": "https://registry.npmjs.org/codemirror-ssr/-/codemirror-ssr-0.65.0.tgz", + "integrity": "sha512-ofTAfPkQV56SYFfymNMYJ1ELo3+Jnkw3mOLgnIiQjhonwNmNzX1OFvnihAnYRXL0PWl2kT7s0gKrLc2ExshK4g==", + "peerDependencies": { + "@types/codemirror": "^5.0.0" + } + }, "node_modules/collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", @@ -14826,6 +14932,84 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/hast-util-raw": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-7.2.3.tgz", + "integrity": "sha512-RujVQfVsOrxzPOPSzZFiwofMArbQke6DJjnFfceiEbFh7S05CbPt0cYN+A5YeD3pso0JQk6O1aHBnx9+Pm2uqg==", + "dependencies": { + "@types/hast": "^2.0.0", + "@types/parse5": "^6.0.0", + "hast-util-from-parse5": "^7.0.0", + "hast-util-to-parse5": "^7.0.0", + "html-void-elements": "^2.0.0", + "parse5": "^6.0.0", + "unist-util-position": "^4.0.0", + "unist-util-visit": "^4.0.0", + "vfile": "^5.0.0", + "web-namespaces": "^2.0.0", + "zwitch": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-raw/node_modules/parse5": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz", + "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==" + }, + "node_modules/hast-util-sanitize": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/hast-util-sanitize/-/hast-util-sanitize-4.1.0.tgz", + "integrity": "sha512-Hd9tU0ltknMGRDv+d6Ro/4XKzBqQnP/EZrpiTbpFYfXv/uOhWeKc+2uajcbEvAEH98VZd7eII2PiXm13RihnLw==", + "dependencies": { + "@types/hast": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-to-html": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-8.0.4.tgz", + "integrity": "sha512-4tpQTUOr9BMjtYyNlt0P50mH7xj0Ks2xpo8M943Vykljf99HW6EzulIoJP1N3eKOSScEHzyzi9dm7/cn0RfGwA==", + "dependencies": { + "@types/hast": "^2.0.0", + "@types/unist": "^2.0.0", + "ccount": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "hast-util-raw": "^7.0.0", + "hast-util-whitespace": "^2.0.0", + "html-void-elements": "^2.0.0", + "property-information": "^6.0.0", + "space-separated-tokens": "^2.0.0", + "stringify-entities": "^4.0.0", + "zwitch": "^2.0.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-to-parse5": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-7.1.0.tgz", + "integrity": "sha512-YNRgAJkH2Jky5ySkIqFXTQiaqcAtJyVE+D5lkN6CdtOqrnkLfGYYrEcKuHOJZlp+MwjSwuD3fZuawI+sic/RBw==", + "dependencies": { + "@types/hast": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "property-information": "^6.0.0", + "space-separated-tokens": "^2.0.0", + "web-namespaces": "^2.0.0", + "zwitch": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/hast-util-to-text": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-3.1.2.tgz", @@ -15022,6 +15206,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/html-void-elements": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-2.0.1.tgz", + "integrity": "sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/html-webpack-plugin": { "version": "5.5.1", "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.5.1.tgz", @@ -23031,6 +23224,48 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/rehype-raw": { + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-6.1.1.tgz", + "integrity": "sha512-d6AKtisSRtDRX4aSPsJGTfnzrX2ZkHQLE5kiUuGOeEoLpbEulFF4hj0mLPbsa+7vmguDKOVVEQdHKDSwoaIDsQ==", + "dependencies": { + "@types/hast": "^2.0.0", + "hast-util-raw": "^7.2.0", + "unified": "^10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-sanitize": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/rehype-sanitize/-/rehype-sanitize-5.0.1.tgz", + "integrity": "sha512-da/jIOjq8eYt/1r9GN6GwxIR3gde7OZ+WV8pheu1tL8K0D9KxM2AyMh+UEfke+FfdM3PvGHeYJU0Td5OWa7L5A==", + "dependencies": { + "@types/hast": "^2.0.0", + "hast-util-sanitize": "^4.0.0", + "unified": "^10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/rehype-stringify": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-9.0.3.tgz", + "integrity": "sha512-kWiZ1bgyWlgOxpqD5HnxShKAdXtb2IUljn3hQAhySeak6IOQPPt6DeGnsIh4ixm7yKJWzm8TXFuC/lPfcWHJqw==", + "dependencies": { + "@types/hast": "^2.0.0", + "hast-util-to-html": "^8.0.0", + "unified": "^10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", @@ -23664,6 +23899,11 @@ "integrity": "sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==", "dev": true }, + "node_modules/select-files": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/select-files/-/select-files-1.0.1.tgz", + "integrity": "sha512-8h4DSpjfFa0hyMP3z3ye4SxyhdaE5RgaXeScRpH7xl4YblnZSHwexmLdLNdSKwTO8H9ccDKj7Votz0io+18+BQ==" + }, "node_modules/semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", @@ -24394,6 +24634,28 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/stringify-entities": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz", + "integrity": "sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==", + "dependencies": { + "character-entities-html4": "^2.0.0", + "character-entities-legacy": "^3.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/stringify-entities/node_modules/character-entities-legacy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", + "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -25074,6 +25336,14 @@ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/titleize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz", @@ -26653,6 +26923,11 @@ "node": ">=8" } }, + "node_modules/word-count": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/word-count/-/word-count-0.2.2.tgz", + "integrity": "sha512-tPRTbQ+nTCPY3F0z1f/y0PX22ScE6l/4/8j9KqA3h77JhlZ/w6cbVS8LIO5Pq/aV96SWBOoiE2IEgzxF0Cn+kA==" + }, "node_modules/word-wrap": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz", diff --git a/website/package.json b/website/package.json index f5307778c4..040cd64042 100644 --- a/website/package.json +++ b/website/package.json @@ -26,6 +26,9 @@ "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts" }, "dependencies": { + "@bytemd/plugin-gfm": "^1.21.0", + "@bytemd/plugin-math": "^1.21.0", + "@bytemd/react": "^1.21.0", "@chakra-ui/icons": "^2.0.19", "@chakra-ui/react": "^2.6.1", "@dnd-kit/core": "^6.0.8", diff --git a/website/src/components/MarkdownEditor.tsx b/website/src/components/MarkdownEditor.tsx new file mode 100644 index 0000000000..51a6a975c0 --- /dev/null +++ b/website/src/components/MarkdownEditor.tsx @@ -0,0 +1,99 @@ +import "bytemd/dist/index.css"; + +import gfm from "@bytemd/plugin-gfm"; +import math from "@bytemd/plugin-math"; +import { Editor } from "@bytemd/react"; +import { Box, BoxProps, Flex, Link, Text } from "@chakra-ui/react"; +import { useTranslation } from "next-i18next"; +import { useEffect } from "react"; + +const editorConfig = { + autofocus: true, +}; + +const plugins = [gfm(), math()]; + +const sx: BoxProps["sx"] = { + position: "relative", + ".bytemd": { + h: "full", + }, + ".CodeMirror-sizer": { + minH: "150px !important", + }, + ".bytemd-editor": { + w: "100% !important", + }, + ".bytemd-preview": { + display: "none", + w: 0, + }, + ".bytemd-toolbar-tab, .bytemd-status-right, .bytemd-toolbar-right": { + display: "none", + }, + ".CodeMirror .CodeMirror-lines": { + maxW: "100% !important", + }, + _dark: { + ".bytemd, .bytemd-body, .CodeMirror": { + bg: "gray.800", + color: "white", + borderColor: "gray.200 !important", + }, + ".bytemd-toolbar": { + bg: "gray.800", + }, + ".CodeMirror-cursors, .CodeMirror-cursor": { + borderColor: "white !important", + }, + }, + ".bytemd-status-left": { + display: { base: "none", sm: "inline" }, + }, + ".bytemd-status": { + h: "24px", + ps: 6, + }, +}; + +export const MarkDownEditor = (props: { value: string; onChange: (value: string) => void; placeholder?: string }) => { + const { t } = useTranslation("tasks"); + useEffect(() => { + // hack to support cypress testing + document?.querySelector(".bytemd-editor").setAttribute("data-cy", "reply"); + }, []); + return ( + + + + + + + + + + + {t("default.markdownguide")} + + + + ); +}; diff --git a/website/src/components/Messages/MessageEmojiButton.tsx b/website/src/components/Messages/MessageEmojiButton.tsx index 59e53988ce..b2feb8758f 100644 --- a/website/src/components/Messages/MessageEmojiButton.tsx +++ b/website/src/components/Messages/MessageEmojiButton.tsx @@ -23,7 +23,6 @@ export const MessageEmojiButton = ({ disabled, userReacted, sx, - forceHideCount, }: MessageEmojiButtonProps) => { const EmojiIcon = emojiIcons.get(emoji.name); const isAdminOrMod = useHasAnyRole(["admin", "moderator"]); @@ -31,8 +30,7 @@ export const MessageEmojiButton = ({ if (!EmojiIcon) return null; const isDisabled = !!(userIsAuthor ? true : disabled); - const showCount = - forceHideCount !== undefined ? !forceHideCount : (emoji.count > 0 && userReacted) || userIsAuthor || isAdminOrMod; + const showCount = (emoji.count > 0 && userReacted) || userIsAuthor || isAdminOrMod; return ( diff --git a/website/src/components/Survey/TrackedTextarea.tsx b/website/src/components/Survey/TrackedTextarea.tsx index a111e98d6c..d3ee1de023 100644 --- a/website/src/components/Survey/TrackedTextarea.tsx +++ b/website/src/components/Survey/TrackedTextarea.tsx @@ -1,14 +1,15 @@ -import { Icon, Progress, Stack, Text, Textarea, TextareaProps, Tooltip, useColorModeValue } from "@chakra-ui/react"; +import { Progress, Stack, TextareaProps, Tooltip, useColorModeValue } from "@chakra-ui/react"; import lande from "lande"; -import Link from "next/link"; import { useTranslation } from "next-i18next"; import React from "react"; -import TextareaAutosize, { TextareaAutosizeProps } from "react-textarea-autosize"; +import { TextareaAutosizeProps } from "react-textarea-autosize"; import { useCurrentLocale } from "src/hooks/locale/useCurrentLocale"; import { LanguageAbbreviations } from "src/lib/iso6393"; import { getLocaleDisplayName } from "src/lib/languages"; import { colors } from "src/styles/Theme/colors"; +import { MarkDownEditor } from "../MarkdownEditor"; + interface TrackedTextboxProps { text: string; thresholds: { @@ -17,13 +18,12 @@ interface TrackedTextboxProps { goal: number; }; textareaProps?: TextareaProps & TextareaAutosizeProps; - onTextChange: (event: React.ChangeEvent) => void; + onTextChange: (value: string) => void; } export const TrackedTextarea = (props: TrackedTextboxProps) => { const { t } = useTranslation("tasks"); const wordLimitForLangDetection = 4; - const backgroundColor = useColorModeValue("gray.100", "gray.900"); const currentLanguage = useCurrentLocale(); const wordCount = (props.text.match(/\S+/g) || []).length; @@ -50,20 +50,13 @@ export const TrackedTextarea = (props: TrackedTextboxProps) => { } const problemColor = useColorModeValue(colors.light.problem, colors.dark.problem); - return (
-