add comment

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

@@ -1,10 +1,8 @@
 import {
-  forwardRef, useMemo, useRef, useEffect,
+  forwardRef, useMemo, useRef,
 } from 'react';
 
 
-import { defaultKeymap } from '@codemirror/commands';
-import { keymap } from '@codemirror/view';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
 import { GlobalCodeMirrorEditorKey } from '../../consts';
@@ -24,14 +22,12 @@ const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
 type Props = {
   editorKey: string | GlobalCodeMirrorEditorKey,
   onChange?: (value: string) => void,
-  onSave?: () => void,
 }
 
 export const CodeMirrorEditor = (props: Props): JSX.Element => {
   const {
     editorKey,
     onChange,
-    onSave,
   } = props;
 
   const containerRef = useRef(null);
@@ -42,33 +38,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     };
   }, [onChange]);
 
-  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
-
-  // set handler to save with ctrl/cmd + Enter key
-  useEffect(() => {
-    if (onSave == null) {
-      return;
-    }
-
-    const extension = keymap.of([
-      {
-        key: 'Mod-Enter',
-        preventDefault: true,
-        run: () => {
-          const doc = codeMirrorEditor?.getDoc();
-          if (doc != null) {
-            onSave();
-          }
-          return true;
-        },
-      },
-      ...defaultKeymap,
-    ]);
-
-    const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
-
-    return cleanupFunction;
-  }, [codeMirrorEditor, onSave]);
+  useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
 
   return (
     <div className="flex-expand-vert">

packages/editor/src/components/CodeMirrorEditorComment.tsx

@@ -0,0 +1,69 @@
+import { useEffect } from 'react';
+
+
+import { defaultKeymap } from '@codemirror/commands';
+import type { Extension } from '@codemirror/state';
+import { keymap, scrollPastEnd } from '@codemirror/view';
+
+import { GlobalCodeMirrorEditorKey } from '../consts';
+import { useCodeMirrorEditorIsolated } from '../stores';
+
+import { CodeMirrorEditor } from '.';
+
+
+const additionalExtensions: Extension[] = [
+  scrollPastEnd(),
+];
+
+
+type Props = {
+  onChange?: (value: string) => void,
+  onComment?: () => void,
+}
+
+export const CodeMirrorEditorComment = (props: Props): JSX.Element => {
+  const {
+    onComment, onChange,
+  } = props;
+
+  const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(GlobalCodeMirrorEditorKey.MAIN);
+
+  // setup additional extensions
+  useEffect(() => {
+    return codeMirrorEditor?.appendExtensions?.(additionalExtensions);
+  }, [codeMirrorEditor]);
+
+  // setup comment keymap
+  useEffect(() => {
+    if (onComment == null) {
+      return;
+    }
+
+    const keymapExtension = keymap.of([
+      {
+        // set handler to comment with ctrl/cmd + Enter key
+        key: 'Mod-Enter',
+        preventDefault: true,
+        run: () => {
+          const doc = codeMirrorEditor?.getDoc();
+          if (doc != null) {
+            onComment();
+          }
+          return true;
+        },
+      },
+      ...defaultKeymap,
+    ]);
+
+    const cleanupFunction = codeMirrorEditor?.appendExtensions?.(keymapExtension);
+
+    return cleanupFunction;
+  }, [codeMirrorEditor, onComment]);
+
+  return (
+    <CodeMirrorEditor
+      editorKey={GlobalCodeMirrorEditorKey.COMMENT}
+      onChange={onChange}
+    />
+  );
+};

packages/editor/src/components/CodeMirrorEditorMain.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 
+import { defaultKeymap } from '@codemirror/commands';
 import type { Extension } from '@codemirror/state';
 import { keymap, scrollPastEnd } from '@codemirror/view';
 
@@ -31,14 +32,15 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
     return codeMirrorEditor?.appendExtensions?.(additionalExtensions);
   }, [codeMirrorEditor]);
 
-  // set handler to save with shortcut key
+  // setup page keymap
   useEffect(() => {
     if (onSave == null) {
       return;
     }
 
-    const extension = keymap.of([
+    const keymapExtension = keymap.of([
       {
+        // set handler to save with shortcut key
         key: 'Mod-s',
         preventDefault: true,
         run: () => {
@@ -48,10 +50,11 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
           }
           return true;
         },
+        ...defaultKeymap,
       },
     ]);
 
-    const cleanupFunction = codeMirrorEditor?.appendExtensions?.(extension);
+    const cleanupFunction = codeMirrorEditor?.appendExtensions?.(keymapExtension);
 
     return cleanupFunction;
   }, [codeMirrorEditor, onSave]);
@@ -60,7 +63,6 @@ export const CodeMirrorEditorMain = (props: Props): JSX.Element => {
     <CodeMirrorEditor
       editorKey={GlobalCodeMirrorEditorKey.MAIN}
       onChange={onChange}
-      onSave={onSave}
     />
   );
 };

packages/editor/src/consts/global-code-mirror-editor-key.ts

@@ -1,4 +1,5 @@
 export const GlobalCodeMirrorEditorKey = {
   MAIN: 'main',
+  COMMENT: 'comment',
 } as const;
 export type GlobalCodeMirrorEditorKey = typeof GlobalCodeMirrorEditorKey[keyof typeof GlobalCodeMirrorEditorKey]