create useEmojiPickerModal hooks

apps/app/src/stores/modal.tsx

@@ -739,3 +739,32 @@ export const useLinkEditModal = (): SWRResponse<LinkEditModalStatus, Error> & Li
     },
   });
 };
+
+
+/*
+* EmojiPickerModal
+*/
+type EmojiPickerModalStatus = {
+  isOpend: boolean,
+}
+
+type EmojiPickerModalUtils = {
+  open(): void,
+  close(): void,
+}
+
+export const useEmojiPickerModal = (): SWRResponse<EmojiPickerModalStatus, Error> & EmojiPickerModalUtils => {
+
+  const initialStatus = { isOpened: false };
+  const swrResponse = useStaticSWR<EmojiPickerModalStatus, Error>('emojiPickerModal', undefined, { fallbackData: initialStatus });
+
+  return {
+    ...swrResponse,
+    open: () => {
+      swrResponse.mutate({ isOpened: true });
+    },
+    close: () => {
+      swrResponse.mutate({ isOpened: false });
+    },
+  };
+};

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

@@ -1,10 +1,12 @@
 import {
-  forwardRef, useMemo, useRef, useEffect,
+  forwardRef, useMemo, useRef, useEffect, useCallback,
 } from 'react';
 
 import { indentUnit } from '@codemirror/language';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
+import { useEmojiPickerModal } from '~/stores/modal';
+
 import { GlobalCodeMirrorEditorKey } from '../../consts';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
@@ -32,6 +34,8 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     indentSize,
   } = props;
 
+  const { open } = useEmojiPickerModal();
+
   const containerRef = useRef(null);
 
   const cmProps = useMemo<ReactCodeMirrorProps>(() => {
@@ -52,6 +56,12 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
 
   }, [codeMirrorEditor, indentSize]);
 
+  const onInputColonHandler = useCallback((event) => {
+    if (event.key === 'DOM_VK_COLON') {
+      // emoji pickerを起動する処理
+    }
+  }, []);
+
   return (
     <div className="flex-expand-vert">
       <CodeMirrorEditorContainer ref={containerRef} />