add code

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

@@ -1,17 +1,13 @@
 import {
-  forwardRef, useMemo, useRef, useEffect, useCallback,
+  forwardRef, useMemo, useRef, useEffect,
 } from 'react';
 
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { indentUnit } from '@codemirror/language';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
-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';
@@ -36,8 +32,6 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     indentSize,
   } = props;
 
-  const { open: openEmojiHintModal } = useEmojiHintModal();
-
   const containerRef = useRef(null);
 
   const cmProps = useMemo<ReactCodeMirrorProps>(() => {
@@ -58,23 +52,6 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [codeMirrorEditor, indentSize]);
 
-  const onInputColonHandler = useCallback((event: any) => {
-    if (event.key === ':') {
-      openEmojiHintModal();
-    }
-  }, []);
-
-  const emojiMarkdownCompletions = markdownLanguage.data.of({
-    autocomplete: completeEmojiInput,
-  });
-
-  useEffect(() => {
-    document.addEventListener('keydown', onInputColonHandler, false);
-    return () => {
-      document.removeEventListener('keydown', onInputColonHandler, false);
-    };
-  }, [onInputColonHandler]);
-
   return (
     <div className="flex-expand-vert">
       <CodeMirrorEditorContainer ref={containerRef} />

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

@@ -38,53 +38,18 @@ const emojiOptions = emojiDataArray.map(
   tag => ({ label: `:${tag}`, type: 'keyword' }),
 );
 
-export const completeEmojiInput = (context: CompletionContext) => {
+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);
 
   if (!emojiBefore && !context.explicit) return null;
 
+  console.log('kohsei');
+
   return {
     from: emojiBefore ? nodeBefore.from + emojiBefore.index : context.pos,
     options: emojiOptions,
-    validFor: /^(:\w)?$/,
+    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/CodeMirrorEditorMain.tsx

@@ -1,7 +1,11 @@
 import { useEffect } from 'react';
 
+import type { CompletionContext } from '@codemirror/autocomplete';
+import { markdownLanguage } from '@codemirror/lang-markdown';
+import { syntaxTree } from '@codemirror/language';
 import type { Extension } from '@codemirror/state';
 import { keymap, scrollPastEnd } from '@codemirror/view';
+import emojiData from 'emoji-mart/data/all.json';
 
 import { GlobalCodeMirrorEditorKey } from '../consts';
 import { useCodeMirrorEditorIsolated } from '../stores';
@@ -13,6 +17,57 @@ const additionalExtensions: Extension[] = [
   scrollPastEnd(),
 ];
 
+const getEmojiDataArray = (): string[] => {
+  const rawEmojiDataArray = emojiData.categories;
+
+  const emojiCategoriesData = [
+    'people',
+    'nature',
+    'foods',
+    'activity',
+    'places',
+    'objects',
+    'symbols',
+    'flags',
+  ];
+
+  const fixedEmojiDataArray: string[] = [];
+
+  emojiCategoriesData.forEach((value) => {
+    const tempArray = rawEmojiDataArray.find(obj => obj.id === value)?.emojis;
+
+    if (tempArray == null) {
+      return;
+    }
+
+    fixedEmojiDataArray.push(...tempArray);
+  });
+
+  return fixedEmojiDataArray;
+};
+
+const emojiDataArray = getEmojiDataArray();
+
+const emojiOptions = emojiDataArray.map(
+  tag => ({ label: `:${tag}`, type: 'keyword' }),
+);
+
+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);
+
+  if (!emojiBefore && !context.explicit) return null;
+
+  console.log('kohsei');
+
+  return {
+    from: emojiBefore ? nodeBefore.from + emojiBefore.index : context.pos,
+    options: emojiOptions,
+    validFor: /^(:\w*)?$/,
+  };
+};
+
 
 type Props = {
   onChange?: (value: string) => void,
@@ -57,6 +112,10 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
     return cleanupFunction;
   }, [codeMirrorEditor, onSave]);
 
+  markdownLanguage.data.of({
+    autocomplete: completeEmojiInput,
+  });
+
   return (
     <CodeMirrorEditor
       editorKey={GlobalCodeMirrorEditorKey.MAIN}