use growi/editor type

apps/app/src/components/PageEditor/OptionsSelector.tsx

@@ -2,6 +2,9 @@ import React, {
   memo, useCallback, useMemo, useState,
 } from 'react';
 
+import type {
+  EditorTheme, KeyMapMode,
+} from '@growi/editor';
 import { useTranslation } from 'next-i18next';
 import Image from 'next/image';
 import {
@@ -12,9 +15,10 @@ import { useIsIndentSizeForced } from '~/stores/context';
 import { useEditorSettings, useCurrentIndentSize } from '~/stores/editor';
 
 import {
-  type EditorTheme, type KeyMapMode, DEFAULT_THEME, DEFAULT_KEYMAP,
+  DEFAULT_THEME, DEFAULT_KEYMAP,
 } from '../../interfaces/editor-settings';
 
+
 type RadioListItemProps = {
   onClick: () => void,
   icon?: React.ReactNode,

apps/app/src/interfaces/editor-settings.ts

@@ -1,30 +1,8 @@
+import { type EditorTheme, type KeyMapMode } from '@growi/editor';
+
 export const DEFAULT_KEYMAP = 'default';
 export const DEFAULT_THEME = 'defaultlight';
 
-const KeyMapMode = {
-  default: 'default',
-  vim: 'vim',
-  emacs: 'emacs',
-  vscode: 'vscode',
-} as const;
-
-export type KeyMapMode = typeof KeyMapMode[keyof typeof KeyMapMode];
-
-const EditorTheme = {
-  defaultlight: 'defaultlight',
-  eclipse: 'eclipse',
-  basic: 'basic',
-  ayu: 'ayu',
-  rosepine:  'rosepine',
-  defaultdark: 'defaultdark',
-  material: 'material',
-  nord: 'nord',
-  cobalt: 'cobalt',
-  kimbie: 'kimbie',
-} as const;
-
-export type EditorTheme = typeof EditorTheme[keyof typeof EditorTheme];
-
 export interface IEditorSettings {
   theme: undefined | EditorTheme,
   keymapMode: undefined | KeyMapMode,

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

@@ -31,8 +31,8 @@ const CodeMirrorEditorContainer = forwardRef<HTMLDivElement>((props, ref) => {
 export type CodeMirrorEditorProps = {
   acceptedUploadFileType?: AcceptedUploadFileType,
   indentSize?: number,
-  editorTheme?: string,
-  editorKeymap?: string,
+  editorTheme?: EditorTheme,
+  editorKeymap?: KeyMapMode,
   onChange?: (value: string) => void,
   onSave?: () => void,
   onUpload?: (files: File[]) => void,
@@ -155,7 +155,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     const settingTheme = async(name?: EditorTheme) => {
       setThemeExtension(await getEditorTheme(name ?? 'defaultlight'));
     };
-    settingTheme(editorTheme as EditorTheme);
+    settingTheme(editorTheme);
   }, [codeMirrorEditor, editorTheme, setThemeExtension]);
 
   useEffect(() => {
@@ -174,7 +174,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
     const settingKeyMap = async(name?: KeyMapMode) => {
       setKeymapExtension(await getKeymap(name ?? 'default'));
     };
-    settingKeyMap(editorKeymap as KeyMapMode);
+    settingKeyMap(editorKeymap);
 
   }, [codeMirrorEditor, editorKeymap, setKeymapExtension]);