write code for codemirror autocompletion

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -2,6 +2,7 @@ import {
   forwardRef, useMemo, useRef, useEffect, useCallback,
 } from 'react';
 
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { indentUnit } from '@codemirror/language';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
@@ -10,7 +11,7 @@ import { useEmojiHintModal } from '~/stores/modal';
 import { GlobalCodeMirrorEditorKey } from '../../consts';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
-
+import { completeEmojiInput } from './EmojiHint/EmojiHint';
 import { Toolbar } from './Toolbar';
 
 import style from './CodeMirrorEditor.module.scss';
@@ -59,11 +60,14 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   const onInputColonHandler = useCallback((event: any) => {
     if (event.key === ':') {
-      console.log('ころん！');
       openEmojiHintModal();
     }
   }, []);
 
+  const emojiMarkdownCompletions = markdownLanguage.data.of({
+    autocomplete: completeEmojiInput,
+  });
+
   useEffect(() => {
     document.addEventListener('keydown', onInputColonHandler, false);
     return () => {

packages/editor/src/components/CodeMirrorEditor/EmojiHint/EmojiHint.tsx

@@ -1,17 +1,9 @@
-import React, { FC } from 'react';
-
-
-import { Emoji } from 'emoji-mart';
+import type { CompletionContext } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
 import emojiData from 'emoji-mart/data/all.json';
 
-import { useEmojiHintModal } from '~/stores/modal';
-import 'emoji-mart/css/emoji-mart.css';
-
-import { EmojiHintItem } from './EmojiHintItem';
 
-import type { UseCodeMirrorEditor } from 'src';
-
-export const useEmojiAutoCompletion = (inputChar: string): string[] => {
+const getEmojiDataArray = (): string[] => {
   const rawEmojiDataArray = emojiData.categories;
 
   const emojiCategoriesData = [
@@ -37,50 +29,62 @@ export const useEmojiAutoCompletion = (inputChar: string): string[] => {
     fixedEmojiDataArray.push(...tempArray);
   });
 
-  const suggestedEmojiArray = fixedEmojiDataArray.filter((element) => {
-    return element.startsWith(inputChar);
-  });
+  return fixedEmojiDataArray;
+};
 
-  console.dir(suggestedEmojiArray);
+const emojiDataArray = getEmojiDataArray();
 
-  suggestedEmojiArray.sort((a, b) => { return a.length - b.length });
+const emojiOptions = emojiDataArray.map(
+  tag => ({ label: `:${tag}`, type: 'keyword' }),
+);
 
-  return suggestedEmojiArray;
-};
+export const completeEmojiInput = (context: CompletionContext) => {
+  const nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
+  const textBefore = context.state.sliceDoc(nodeBefore.from, context.pos);
+  const emojiBefore = /:\w*$/.exec(textBefore);
 
-const EmojiHintModalStyle = {
-  maxHeight: '40vh',
-  overflowY: 'auto',
-  width: '70vh',
-};
+  if (!emojiBefore && !context.explicit) return null;
 
-type EmojiHintProps = {
-  codeMirrorEditor: UseCodeMirrorEditor | undefined,
-}
-
-export const EmojiHint: FC<EmojiHintProps> = (props) => {
-  const { codeMirrorEditor } = props;
-
-  const { data: emojiHintModalData } = useEmojiHintModal();
-
-  const { isOpened } = emojiHintModalData;
-
-  const suggestedEmojiArray = useEmojiAutoCompletion('f');
-
-  return (
-    <>
-      {
-        isOpened
-          ? (
-            <div style={EmojiHintModalStyle} className="modal-content">
-              {suggestedEmojiArray.map(emojiName => (
-                <EmojiHintItem codeMirrorEditor={codeMirrorEditor} emojiName={emojiName} />
-              ))}
-            </div>
-          ) : (
-            ''
-          )
-      }
-    </>
-  );
+  return {
+    from: emojiBefore ? nodeBefore.from + emojiBefore.index : context.pos,
+    options: emojiOptions,
+    validFor: /^(:\w)?$/,
+  };
 };
+
+// const EmojiHintModalStyle = {
+//   maxHeight: '40vh',
+//   overflowY: 'auto',
+//   width: '70vh',
+// };
+
+// type EmojiHintProps = {
+//   codeMirrorEditor: UseCodeMirrorEditor | undefined,
+// }
+
+// export const EmojiHint: FC<EmojiHintProps> = (props) => {
+//   const { codeMirrorEditor } = props;
+
+//   const { data: emojiHintModalData } = useEmojiHintModal();
+
+//   const { isOpened } = emojiHintModalData;
+
+//   const suggestedEmojiArray = useEmojiAutoCompletion('f');
+
+//   return (
+//     <>
+//       {
+//         isOpened
+//           ? (
+//             <div style={EmojiHintModalStyle} className="modal-content">
+//               {suggestedEmojiArray.map(emojiName => (
+//                 <EmojiHintItem codeMirrorEditor={codeMirrorEditor} emojiName={emojiName} />
+//               ))}
+//             </div>
+//           ) : (
+//             ''
+//           )
+//       }
+//     </>
+//   );
+// };

packages/editor/src/components/CodeMirrorEditor/Toolbar/Toolbar.tsx

@@ -1,7 +1,5 @@
 import { memo } from 'react';
 
-import { EmojiHint } from '../EmojiHint/EmojiHint';
-
 import { AttachmentsDropup } from './AttachmentsDropup';
 import { DiagramButton } from './DiagramButton';
 import { EmojiButton } from './EmojiButton';
@@ -18,7 +16,6 @@ type Props = {
 }
 
 export const Toolbar = memo((props: Props): JSX.Element => {
-  const { codeMirrorEditor } = props;
 
   return (
     <div className={`d-flex gap-2 p-2 codemirror-editor-toolbar ${styles['codemirror-editor-toolbar']}`}>
@@ -28,7 +25,6 @@ export const Toolbar = memo((props: Props): JSX.Element => {
       <TableButton />
       <DiagramButton />
       <TemplateButton />
-      <EmojiHint codeMirrorEditor={codeMirrorEditor} />
     </div>
   );
 });