feat: improve tiptap

packages/client/package.json

@@ -78,6 +78,7 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "^6.1.0",
+    "react-select": "^5.2.2",
     "react-split-pane": "^0.1.92",
     "scroll-into-view-if-needed": "^2.2.29",
     "swr": "^1.2.0",

packages/client/src/components/icons/IconHeading1.tsx

@@ -0,0 +1,14 @@
+import { Icon } from '@douyinfe/semi-ui';
+
+export const IconHeading1: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
+  return (
+    <Icon
+      style={style}
+      svg={
+        <svg width="18" height="18" viewBox="0 0 1024 1024" role="presentation">
+          <path d="M219.546 220.16v243.302h278.528V220.16h75.366V793.6h-75.366V535.552H219.546V793.6H143.36V220.16h76.186z m572.723 219.7c22.374 0 37.888 14.284 40.192 36.351l0.307 5.632v268.288c0 22.989-12.288 36.25-33.536 36.25-19.098 0-30.925-11.162-32.922-30.31l-0.307-5.94V507.085h-1.536l-34.201 24.269c-10.752 7.014-16.999 9.216-24.27 9.216a23.398 23.398 0 0 1-24.012-23.962c0-9.011 4.813-17.1 14.182-24.576l5.12-3.686 44.698-31.232c18.022-12.288 32.256-17.255 46.285-17.255z"></path>
+        </svg>
+      }
+    />
+  );
+};

packages/client/src/components/icons/IconHeading2.tsx

@@ -0,0 +1,14 @@
+import { Icon } from '@douyinfe/semi-ui';
+
+export const IconHeading2: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
+  return (
+    <Icon
+      style={style}
+      svg={
+        <svg width="18" height="18" viewBox="0 0 1024 1024" role="presentation">
+          <path d="M219.546 220.16v243.302h278.528V220.16h75.366V793.6h-75.366V535.552H219.546V793.6H143.36V220.16h76.186z m548.096 215.45c65.996 0 113.459 40.755 113.459 97.024 0 34.201-15.463 62.464-58.215 107.52l-79.513 84.992v3.225H860.62c19.456 0 31.488 10.496 31.488 27.75 0 16.999-11.776 27.239-31.488 27.239H692.173c-22.016 0-36.301-11.98-36.301-30.208 0-12.8 6.758-23.552 27.75-45.056l93.236-100.506c27.494-29.184 38.502-48.23 38.502-69.222 0-28.518-20.736-47.77-51.507-47.77-25.498 0-44.237 14.03-53.965 40.244-8.038 15.513-16.538 22.272-29.491 22.272-16.794 0-28.263-11.981-28.263-28.775 0-44.953 47.975-88.73 115.508-88.73z"></path>
+        </svg>
+      }
+    />
+  );
+};

packages/client/src/components/icons/IconHeading3.tsx

@@ -0,0 +1,14 @@
+import { Icon } from '@douyinfe/semi-ui';
+
+export const IconHeading3: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
+  return (
+    <Icon
+      style={style}
+      svg={
+        <svg width="18" height="18" viewBox="0 0 1024 1024" role="presentation">
+          <path d="M219.546 220.16v243.302h278.528V220.16h75.366V793.6h-75.366V535.552H219.546V793.6H143.36V220.16h76.186z m546.457 215.45c69.018 0 117.504 37.273 117.504 90.521 0 34.663-24.422 66.714-55.859 74.752l-6.4 1.229v4.25c41.472 3.993 72.704 39.475 72.704 82.739 0 59.75-52.94 101.53-128.205 101.53-67.481 0-119.245-38.042-119.245-79.258 0-15.77 11.264-27.239 26.522-27.239 10.957 0 19.251 5.223 28.467 18.74 14.49 22.988 36.762 35.225 64.768 35.225 37.479 0 61.747-20.224 61.747-51.2 0-28.979-21.555-49.152-54.272-51.763l-7.219-0.256H741.99c-15.001 0-26.01-11.264-26.01-26.778 0-13.312 8.5-23.705 21.095-25.856l4.915-0.41h23.245c30.72 0 53.248-19.967 53.248-47.462s-22.016-46.284-53.76-46.284c-22.016 0-39.629 9.113-52.582 26.93l-4.608 7.066c-7.527 12.544-16.282 17.767-28.058 17.767a26.368 26.368 0 0 1-27.494-27.495c0-39.987 48.793-76.748 114.022-76.748z"></path>
+        </svg>
+      }
+    />
+  );
+};

packages/client/src/components/icons/index.tsx

@@ -39,3 +39,6 @@ export * from './IconQuote';
 export * from './IconHorizontalRule';
 export * from './IconOrderedList';
 export * from './IconList';
+export * from './IconHeading1';
+export * from './IconHeading2';
+export * from './IconHeading3';

packages/client/src/components/tiptap/components/attachment/index.module.scss

@@ -6,4 +6,8 @@
   padding: 8px 16px;
   border: 1px solid var(--semi-color-border);
   border-radius: var(--border-radius);
+
+  &:hover {
+    border: 1px solid var(--semi-color-link);
+  }
 }

packages/client/src/components/tiptap/components/attachment/index.tsx

@@ -1,24 +1,26 @@
 import { useEffect, useRef } from 'react';
 import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
-import { Button, Typography, Spin } from '@douyinfe/semi-ui';
-import { IconDownload } from '@douyinfe/semi-icons';
+import { Button, Typography, Spin, Collapsible } from '@douyinfe/semi-ui';
+import { IconDownload, IconPlayCircle } from '@douyinfe/semi-icons';
 import { Tooltip } from 'components/tooltip';
 import { useToggle } from 'hooks/useToggle';
 import { download } from '../../services/download';
 import { uploadFile } from 'services/file';
-import { normalizeFileSize, extractFileExtension, extractFilename } from '../../services/file';
+import { normalizeFileSize, extractFileExtension, extractFilename, normalizeFileType } from '../../services/file';
 import styles from './index.module.scss';
 
 const { Text } = Typography;
 
-export const AttachmentWrapper = ({ node, updateAttributes }) => {
+export const AttachmentWrapper = ({ editor, node, updateAttributes }) => {
   const $upload = useRef();
+  const isEditable = editor.isEditable;
   const { autoTrigger, fileName, fileSize, fileExt, fileType, url, error } = node.attrs;
   const [loading, toggleLoading] = useToggle(false);
+  const [visible, toggleVisible] = useToggle(false);
 
   const selectFile = () => {
     // @ts-ignore
-    $upload.current.click();
+    isEditable && $upload.current.click();
   };
 
   const handleFile = async (e) => {
@@ -40,6 +42,8 @@ export const AttachmentWrapper = ({ node, updateAttributes }) => {
     }
   };
 
+  const type = normalizeFileType(fileType);
+
   useEffect(() => {
     if (!url && !autoTrigger) {
       selectFile();
@@ -68,6 +72,11 @@ export const AttachmentWrapper = ({ node, updateAttributes }) => {
               <Text type="tertiary"> ({normalizeFileSize(fileSize)})</Text>
             </span>
             <span>
+              {type === 'video' || type === 'audio' ? (
+                <Tooltip content="播放">
+                  <Button theme={'borderless'} type="tertiary" icon={<IconPlayCircle />} onClick={toggleVisible} />
+                </Tooltip>
+              ) : null}
               <Tooltip content="下载">
                 <Button
                   theme={'borderless'}
@@ -80,6 +89,13 @@ export const AttachmentWrapper = ({ node, updateAttributes }) => {
           </>
         )}
       </div>
+
+      {url ? (
+        <Collapsible isOpen={visible}>
+          {type === 'video' && <video controls autoPlay src={url}></video>}
+          {type === 'audio' && <audio controls autoPlay src={url}></audio>}
+        </Collapsible>
+      ) : null}
       <NodeViewContent></NodeViewContent>
     </NodeViewWrapper>
   );

packages/client/src/components/tiptap/components/documentReference/index.tsx

@@ -2,7 +2,7 @@ import { NodeViewWrapper, NodeViewContent } from '@tiptap/react';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 import cls from 'classnames';
-import { Select } from '@douyinfe/semi-ui';
+import Select from 'react-select';
 import { useWikiTocs } from 'data/wiki';
 import { DataRender } from 'components/data-render';
 import { IconDocument } from 'components/icons';
@@ -16,8 +16,8 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
   const { wikiId, documentId, title } = node.attrs;
   const { data: tocs, loading, error } = useWikiTocs(isShare ? null : wikiIdFromUrl);
 
-  const selectDoc = (str) => {
-    const [wikiId, title, documentId] = str.split('/');
+  const selectDoc = (toc) => {
+    const { wikiId, documentId, title } = toc.value;
     updateAttributes({ wikiId, documentId, title });
   };
 
@@ -30,20 +30,15 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
             error={error}
             normalContent={() => (
               <Select
+                className="react-select"
                 placeholder="请选择文档"
-                onChange={(v) => selectDoc(v)}
-                {...(wikiId && documentId ? { value: `${wikiId}/${title}/${documentId}` } : {})}
-              >
-                {(tocs || []).map((toc) => (
-                  <Select.Option
-                    // FIXME: semi-design 抄 antd，抄的什么玩意！！！
-                    label={`${toc.title}/${toc.id}`}
-                    value={`${toc.wikiId}/${toc.title}/${toc.id}`}
-                  >
-                    {toc.title}
-                  </Select.Option>
-                ))}
-              </Select>
+                value={{ label: title, value: { wikiId, documentId, title } }}
+                onChange={selectDoc}
+                options={tocs.map((toc) => ({
+                  label: toc.title,
+                  value: { title: toc.title, wikiId: toc.wikiId, documentId: toc.id },
+                }))}
+              />
             )}
           />
         )}

packages/client/src/components/tiptap/components/image/index.module.scss

@@ -7,4 +7,8 @@
   border: 1px solid var(--semi-color-border);
   border-radius: var(--border-radius);
   cursor: pointer;
+
+  &:hover {
+    border: 1px solid var(--semi-color-link);
+  }
 }

packages/client/src/components/tiptap/components/image/index.tsx

@@ -21,7 +21,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
 
   const selectFile = () => {
     // @ts-ignore
-    $upload.current.click();
+    isEditable && $upload.current.click();
   };
 
   const handleFile = async (e) => {

packages/client/src/components/tiptap/menus/evokeMenu.tsx

@@ -2,6 +2,9 @@ import { Editor } from '@tiptap/core';
 import { Space } from '@douyinfe/semi-ui';
 import { IconList, IconOrderedList } from '@douyinfe/semi-icons';
 import {
+  IconHeading1,
+  IconHeading2,
+  IconHeading3,
   IconLink,
   IconQuote,
   IconHorizontalRule,
@@ -20,34 +23,34 @@ import {
 export const EVOKE_MENU_ITEMS = [
   {
     key: '标题1',
-    label: '标题1',
+    label: (
+      <Space>
+        <IconHeading1 />
+        标题1
+      </Space>
+    ),
     command: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(),
   },
   {
-    key: '标题1',
-    label: '标题2',
+    key: '标题2',
+    label: (
+      <Space>
+        <IconHeading2 />
+        标题2
+      </Space>
+    ),
     command: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(),
   },
   {
     key: '标题1',
-    label: '标题3',
+    label: (
+      <Space>
+        <IconHeading3 />
+        标题3
+      </Space>
+    ),
     command: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(),
   },
-  {
-    key: '标题1',
-    label: '标题4',
-    command: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 4 }).run(),
-  },
-  {
-    key: '标题1',
-    label: '标题5',
-    command: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 5 }).run(),
-  },
-  {
-    key: '标题1',
-    label: '标题6',
-    command: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 6 }).run(),
-  },
   {
     key: '无序列表',
     label: (

packages/client/src/components/tiptap/menus/image.tsx

@@ -21,8 +21,6 @@ export const ImageBubbleMenu = ({ editor }) => {
     setHeight(parseInt(currentHeight));
   }, [currentWidth, currentHeight]);
 
-  console.log(attrs);
-
   return (
     <BubbleMenu
       className={'bubble-menu'}

packages/client/src/components/tiptap/services/file.ts

@@ -38,3 +38,15 @@ export const normalizeFileSize = (size) => {
   }
   return (size / 1024 / 1024).toFixed(2) + ' MB';
 };
+
+export const normalizeFileType = (fileType): 'audio' | 'video' | 'file' => {
+  if (fileType.startsWith('audio')) {
+    return 'audio';
+  }
+
+  if (fileType.startsWith('video')) {
+    return 'video';
+  }
+
+  return 'file';
+};

packages/client/src/components/tiptap/services/markdown/helpers.ts

@@ -18,8 +18,6 @@ export const isMarkdown = (text: string): boolean => {
   const listItems = text.match(/^[\d-*].?\s\S+/gm);
   if (listItems && listItems.length > 1) return true;
 
-  //
-
   return false;
 };
 

packages/client/src/styles/globals.scss

@@ -204,3 +204,12 @@ a {
   flex-direction: column;
   align-items: center;
 }
+
+.react-select {
+  width: 180px;
+  font-size: 0.8em;
+
+  > div {
+    border: 1px solid var(--semi-color-border);
+  }
+}

packages/client/src/styles/prosemirror.scss

@@ -28,8 +28,8 @@
   white-space: break-spaces;
   word-break: break-word;
   word-wrap: break-word;
-  font-family: 'Chinese Quote', 'Segoe UI', Roboto, RobotoNum, 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: 'Chinese Quote', 'Segoe UI', Roboto, RobotoNum, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
+    'Helvetica Neue', Helvetica, Arial, sans-serif;
   letter-spacing: 0.008em;
   line-height: 1.74;
   outline: none !important;
@@ -110,58 +110,6 @@
     border-bottom: 1px solid var(--semi-color-border);
   }
 
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    cursor: text;
-
-    &::before {
-      display: inline-block;
-      font-family: var(--tiptap-font-family-mono);
-      color: var(--tiptap-color-text-secondly);
-      font-size: 13px;
-      line-height: 0;
-      margin-left: -24px;
-      width: 24px;
-    }
-  }
-
-  h1:not(.title):before {
-    content: 'H1';
-
-    &::before {
-      display: inline-block;
-      font-family: var(--tiptap-font-family-mono);
-      color: var(--tiptap-color-text-secondly);
-      font-size: 13px;
-      line-height: 0;
-      margin-left: -24px;
-      width: 24px;
-    }
-  }
-
-  h2::before {
-    content: 'H2';
-  }
-
-  h3::before {
-    content: 'H3';
-  }
-
-  h4::before {
-    content: 'H4';
-  }
-
-  h5::before {
-    content: 'H5';
-  }
-
-  h6::before {
-    content: 'H6';
-  }
-
   h1 {
     font-size: 1.87em;
     margin: 26px 0 12px 0;

pnpm-lock.yaml

@@ -114,6 +114,7 @@ importers:
       react: 17.0.2
       react-dom: 17.0.2
       react-helmet: ^6.1.0
+      react-select: ^5.2.2
       react-split-pane: ^0.1.92
       scroll-into-view-if-needed: ^2.2.29
       swr: ^1.2.0
@@ -190,6 +191,7 @@ importers:
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
       react-helmet: 6.1.0_react@17.0.2
+      react-select: 5.2.2_b3482aaf5744fc7c2aeb7941b0e0a78f
       react-split-pane: 0.1.92_react-dom@17.0.2+react@17.0.2
       scroll-into-view-if-needed: 2.2.29
       swr: 1.2.0_react@17.0.2
@@ -516,7 +518,6 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/types': 7.16.8
-    dev: true
 
   /@babel/helper-module-transforms/7.16.7:
     resolution: {integrity: sha512-gaqtLDxJEFCeQbYp9aLAefjhkKdjKcdh6DB7jniIGU3Pz52WAmP268zK0VgPz9hUNkMSYeH976K2/Y6yPadpng==}
@@ -537,7 +538,6 @@ packages:
   /@babel/helper-plugin-utils/7.16.7:
     resolution: {integrity: sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==}
     engines: {node: '>=6.9.0'}
-    dev: true
 
   /@babel/helper-simple-access/7.16.7:
     resolution: {integrity: sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==}
@@ -630,6 +630,15 @@ packages:
       '@babel/helper-plugin-utils': 7.16.7
     dev: true
 
+  /@babel/plugin-syntax-jsx/7.16.7:
+    resolution: {integrity: sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/helper-plugin-utils': 7.16.7
+    dev: false
+
   /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.16.12:
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -897,6 +906,92 @@ packages:
       - supports-color
     dev: false
 
+  /@emotion/babel-plugin/11.7.2:
+    resolution: {integrity: sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/helper-module-imports': 7.16.7
+      '@babel/plugin-syntax-jsx': 7.16.7
+      '@babel/runtime': 7.16.7
+      '@emotion/hash': 0.8.0
+      '@emotion/memoize': 0.7.5
+      '@emotion/serialize': 1.0.2
+      babel-plugin-macros: 2.8.0
+      convert-source-map: 1.8.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.0.13
+    dev: false
+
+  /@emotion/cache/11.7.1:
+    resolution: {integrity: sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==}
+    dependencies:
+      '@emotion/memoize': 0.7.5
+      '@emotion/sheet': 1.1.0
+      '@emotion/utils': 1.1.0
+      '@emotion/weak-memoize': 0.2.5
+      stylis: 4.0.13
+    dev: false
+
+  /@emotion/hash/0.8.0:
+    resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
+    dev: false
+
+  /@emotion/memoize/0.7.5:
+    resolution: {integrity: sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==}
+    dev: false
+
+  /@emotion/react/11.8.2_b08e3c15324cbe90a6ff8fcd416c932c:
+    resolution: {integrity: sha512-+1bcHBaNJv5nkIIgnGKVsie3otS0wF9f1T1hteF3WeVvMNQEtfZ4YyFpnphGoot3ilU/wWMgP2SgIDuHLE/wAA==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.16.7
+      '@emotion/babel-plugin': 11.7.2
+      '@emotion/cache': 11.7.1
+      '@emotion/serialize': 1.0.2
+      '@emotion/utils': 1.1.0
+      '@emotion/weak-memoize': 0.2.5
+      '@types/react': 17.0.38
+      hoist-non-react-statics: 3.3.2
+      react: 17.0.2
+    dev: false
+
+  /@emotion/serialize/1.0.2:
+    resolution: {integrity: sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==}
+    dependencies:
+      '@emotion/hash': 0.8.0
+      '@emotion/memoize': 0.7.5
+      '@emotion/unitless': 0.7.5
+      '@emotion/utils': 1.1.0
+      csstype: 3.0.10
+    dev: false
+
+  /@emotion/sheet/1.1.0:
+    resolution: {integrity: sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==}
+    dev: false
+
+  /@emotion/unitless/0.7.5:
+    resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==}
+    dev: false
+
+  /@emotion/utils/1.1.0:
+    resolution: {integrity: sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==}
+    dev: false
+
+  /@emotion/weak-memoize/0.2.5:
+    resolution: {integrity: sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==}
+    dev: false
+
   /@eslint/eslintrc/1.2.1:
     resolution: {integrity: sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2116,7 +2211,6 @@ packages:
 
   /@types/parse-json/4.0.0:
     resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
-    dev: true
 
   /@types/prettier/2.4.3:
     resolution: {integrity: sha512-QzSuZMBuG5u8HqYz01qtMdg/Jfctlnvj1z/lYnIDXs/golxw0fxtRAHd9KrzjR7Yxz1qVeI00o0kiO3PmVdJ9w==}
@@ -2199,6 +2293,12 @@ packages:
     resolution: {integrity: sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==}
     dev: true
 
+  /@types/react-transition-group/4.4.4:
+    resolution: {integrity: sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==}
+    dependencies:
+      '@types/react': 17.0.38
+    dev: false
+
   /@types/react-window/1.8.5:
     resolution: {integrity: sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==}
     dependencies:
@@ -2876,6 +2976,14 @@ packages:
       '@types/babel__traverse': 7.14.2
     dev: true
 
+  /babel-plugin-macros/2.8.0:
+    resolution: {integrity: sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==}
+    dependencies:
+      '@babel/runtime': 7.16.7
+      cosmiconfig: 6.0.0
+      resolve: 1.22.0
+    dev: false
+
   /babel-preset-current-node-syntax/1.0.1_@babel+core@7.16.12:
     resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==}
     peerDependencies:
@@ -3045,7 +3153,6 @@ packages:
   /callsites/3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
-    dev: true
 
   /camelcase/5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
@@ -3306,7 +3413,6 @@ packages:
     resolution: {integrity: sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==}
     dependencies:
       safe-buffer: 5.1.2
-    dev: true
 
   /cookie-signature/1.0.6:
     resolution: {integrity: sha1-4wOogrNCzD7oylE6eZmXNNqzriw=}
@@ -3361,7 +3467,6 @@ packages:
       parse-json: 5.2.0
       path-type: 4.0.0
       yaml: 1.10.2
-    dev: true
 
   /create-require/1.1.1:
     resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
@@ -3626,6 +3731,13 @@ packages:
       esutils: 2.0.3
     dev: true
 
+  /dom-helpers/5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+    dependencies:
+      '@babel/runtime': 7.16.7
+      csstype: 3.0.10
+    dev: false
+
   /domexception/2.0.1:
     resolution: {integrity: sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==}
     engines: {node: '>=8'}
@@ -3712,7 +3824,6 @@ packages:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
       is-arrayish: 0.2.1
-    dev: true
 
   /es-abstract/1.19.1:
     resolution: {integrity: sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==}
@@ -3784,7 +3895,6 @@ packages:
   /escape-string-regexp/4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
-    dev: true
 
   /escodegen/1.14.3:
     resolution: {integrity: sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==}
@@ -4318,6 +4428,10 @@ packages:
       unpipe: 1.0.0
     dev: false
 
+  /find-root/1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: false
+
   /find-up/2.1.0:
     resolution: {integrity: sha1-RdG35QbHF93UgndaK3eSCjwMV6c=}
     engines: {node: '>=4'}
@@ -4670,6 +4784,12 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: false
 
+  /hoist-non-react-statics/3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+    dependencies:
+      react-is: 16.13.1
+    dev: false
+
   /html-encoding-sniffer/2.0.1:
     resolution: {integrity: sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==}
     engines: {node: '>=10'}
@@ -4761,7 +4881,6 @@ packages:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
-    dev: true
 
   /import-local/3.1.0:
     resolution: {integrity: sha512-ASB07uLtnDs1o6EHjKpX34BKYDSqnFerfTOJL2HvMqF70LnxpjkzDB8J44oT9pu4AMPkQwf8jl6szgvNd2tRIg==}
@@ -4869,7 +4988,6 @@ packages:
 
   /is-arrayish/0.2.1:
     resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=}
-    dev: true
 
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
@@ -4901,7 +5019,6 @@ packages:
     resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==}
     dependencies:
       has: 1.0.3
-    dev: true
 
   /is-date-object/1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -5653,7 +5770,6 @@ packages:
 
   /json-parse-even-better-errors/2.3.1:
     resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
-    dev: true
 
   /json-schema-traverse/0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
@@ -5812,7 +5928,6 @@ packages:
 
   /lines-and-columns/1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
 
   /linkify-it/3.0.3:
     resolution: {integrity: sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==}
@@ -6529,7 +6644,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       callsites: 3.1.0
-    dev: true
 
   /parse-json/5.2.0:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
@@ -6539,7 +6653,6 @@ packages:
       error-ex: 1.3.2
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
-    dev: true
 
   /parse5-htmlparser2-tree-adapter/6.0.1:
     resolution: {integrity: sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==}
@@ -6599,7 +6712,6 @@ packages:
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /path-to-regexp/0.1.7:
     resolution: {integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=}
@@ -6612,7 +6724,6 @@ packages:
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
-    dev: true
 
   /pause-stream/0.0.11:
     resolution: {integrity: sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=}
@@ -7009,6 +7120,26 @@ packages:
       react-draggable: 4.4.4_react-dom@17.0.2+react@17.0.2
     dev: false
 
+  /react-select/5.2.2_b3482aaf5744fc7c2aeb7941b0e0a78f:
+    resolution: {integrity: sha512-miGS2rT1XbFNjduMZT+V73xbJEeMzVkJOz727F6MeAr2hKE0uUSA8Ff7vD44H32x2PD3SRB6OXTY/L+fTV3z9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0
+      react-dom: ^16.8.0 || ^17.0.0
+    dependencies:
+      '@babel/runtime': 7.16.7
+      '@emotion/cache': 11.7.1
+      '@emotion/react': 11.8.2_b08e3c15324cbe90a6ff8fcd416c932c
+      '@types/react-transition-group': 4.4.4
+      memoize-one: 5.2.1
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+      react-transition-group: 4.4.2_react-dom@17.0.2+react@17.0.2
+    transitivePeerDependencies:
+      - '@babel/core'
+      - '@types/react'
+    dev: false
+
   /react-side-effect/2.1.1_react@17.0.2:
     resolution: {integrity: sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==}
     peerDependencies:
@@ -7049,6 +7180,20 @@ packages:
       prop-types: 15.8.1
     dev: false
 
+  /react-transition-group/4.4.2_react-dom@17.0.2+react@17.0.2:
+    resolution: {integrity: sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+    dependencies:
+      '@babel/runtime': 7.16.7
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 17.0.2
+      react-dom: 17.0.2_react@17.0.2
+    dev: false
+
   /react-window/1.8.6_react-dom@17.0.2+react@17.0.2:
     resolution: {integrity: sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==}
     engines: {node: '>8.0.0'}
@@ -7155,7 +7300,6 @@ packages:
   /resolve-from/4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
-    dev: true
 
   /resolve-from/5.0.0:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
@@ -7174,7 +7318,6 @@ packages:
       is-core-module: 2.8.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /resolve/2.0.0-next.3:
     resolution: {integrity: sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==}
@@ -7648,6 +7791,10 @@ packages:
       react: 17.0.2
     dev: false
 
+  /stylis/4.0.13:
+    resolution: {integrity: sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==}
+    dev: false
+
   /superagent/7.1.1:
     resolution: {integrity: sha512-CQ2weSS6M+doIwwYFoMatklhRbx6sVNdB99OEJ5czcP3cng76Ljqus694knFWgOj3RkrtxZqIgpe6vhe0J7QWQ==}
     engines: {node: '>=6.4.0 <13 || >=14'}
@@ -7706,7 +7853,6 @@ packages:
   /supports-preserve-symlinks-flag/1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /swr/1.2.0_react@17.0.2:
     resolution: {integrity: sha512-C3IXeKOREn0jQ1ewXRENE7ED7jjGbFTakwB64eLACkCqkF/A0N2ckvpCTftcaSYi5yV36PzoehgVCOVRmtECcA==}
@@ -8583,7 +8729,6 @@ packages:
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /yargs-parser/20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}