Add new dependencies for Quill and related packages

Includes updates to `yarn.lock` with new entries for `@types/quill`, `quill`, `quill-delta`, `parchment`, and `react-quill`. These dependencies are required for Quill and its related functionalities to work correctly within the project.

package.json

@@ -61,6 +61,7 @@
     "react-map-gl-draw": "0.21.0",
     "react-masonry-component": "^6.2.1",
     "react-player": "^2.9.0",
+    "react-quill": "^2.0.0",
     "react-scrollama": "^2.2.12",
     "react-semantic-ui-range": "^0.7.0",
     "semantic-ui-css": "^2.4.1",

src/components/Wysiwyg/index.js

@@ -1,28 +1,49 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React from 'react';
+import React, { useMemo } from 'react';
+import dynamic from 'next/dynamic';
 import PropTypes from 'prop-types';
 import { Form } from 'semantic-ui-react';
-import { Editor } from '@tinymce/tinymce-react';
+import 'react-quill/dist/quill.snow.css';
 
-const Wysiwyg = ({ label, value, onEditorChange }) => (
-  <Form.Field>
-    <label>{label}</label>
-    <Editor
-      apiKey={process.env.NEXT_PUBLIC_MCE_KEY}
-      value={value}
-      init={{
-        height: 400,
-        menubar: false,
-        plugins: ['link lists paste'],
-        toolbar: 'bold italic superscript bullist numlist | link unlink | undo redo',
-        branding: false,
-        statusbar: false,
-        paste_as_text: true,
-      }}
-      onEditorChange={onEditorChange}
-    />
-  </Form.Field>
-);
+const modules = {
+  toolbar: [
+    ['bold', 'italic', 'underline', 'strike', 'blockquote'],
+    [{ list: 'ordered' }, { list: 'bullet' }],
+    ['link'],
+  ],
+};
+
+const formats = [
+  'bold',
+  'italic',
+  'underline',
+  'strike',
+  'blockquote',
+  'list',
+  'bullet',
+  'indent',
+  'link',
+];
+
+const Wysiwyg = ({ label, value, onEditorChange }) => {
+  const ReactQuill = useMemo(() => dynamic(async () => import('react-quill'), { ssr: false }), []);
+  return (
+    <Form.Field>
+      <label>{label}</label>
+      <ReactQuill
+        style={{
+          backgroundColor: 'white',
+          width: '100%',
+          height: '400px',
+        }}
+        formats={formats}
+        modules={modules}
+        value={value}
+        onChange={onEditorChange}
+      />
+    </Form.Field>
+  );
+};
 
 Wysiwyg.propTypes = {
   label: PropTypes.string,