diff --git a/apps/web/package.json b/apps/web/package.json index 15a8ca889..f61e22cfc 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -106,7 +106,6 @@ "mitt": "^3.0.0", "monaco-editor": "^0.40.0", "monaco-themes": "^0.4.3", - "monaco-vim": "^0.4.2", "negotiator": "^0.6.3", "next": "14.2.15", "next-contentlayer": "^0.3.4", diff --git a/apps/web/src/components/workspace/common/editor/MonacoCodeEditor.tsx b/apps/web/src/components/workspace/common/editor/MonacoCodeEditor.tsx index bb882459e..7f8542ecc 100644 --- a/apps/web/src/components/workspace/common/editor/MonacoCodeEditor.tsx +++ b/apps/web/src/components/workspace/common/editor/MonacoCodeEditor.tsx @@ -12,7 +12,6 @@ import { cdnUrl } from '~/utils/cdnUrl'; import { getErrorMessage } from '~/utils/getErrorMessage'; import getLanguageFromFilePath from './getLanguageFromFilePath'; -import useMonacoEditorVimMode from './hooks/useMonacoEditorVimMode'; import useMonacoEditorAddActions from './useMonacoEditorAddActions'; import useMonacoEditorAddFormatter from './useMonacoEditorAddFormatter'; import useMonacoEditorOnShown from './useMonacoEditorOnShown'; @@ -38,7 +37,6 @@ type Props = Readonly< className?: string; filePath?: string; height?: React.ComponentProps['height']; - isVimModeEnabled?: boolean; keepCurrentModel?: boolean; language?: string; onFocus?: () => void; @@ -95,14 +93,12 @@ export default function MonacoCodeEditor({ wordWrap = false, readOnly = false, keepCurrentModel = true, - isVimModeEnabled = false, options, }: Props) { const intl = useIntl(); const monaco = useMonaco(); const editorRef = useRef(null); const editorContainerRef = useRef(null); - const vimStatusBarRef = useRef(null); const themeKey = useMonacoEditorTheme(); useEffect(() => { @@ -119,57 +115,46 @@ export default function MonacoCodeEditor({ useMonacoEditorAddActions(monaco, editorRef.current); useMonacoEditorAddFormatter(monaco, editorRef.current, languageExt?.ext); useMonacoEditorOnShown(editorContainerRef.current, onFocus); - useMonacoEditorVimMode( - editorRef.current, - isVimModeEnabled, - vimStatusBarRef.current, - ); return ( - <> -
+ + } + options={{ + fixedOverflowWidgets: true, + minimap: { + enabled: false, + }, + readOnly, + wordWrap: wordWrap ? 'on' : 'off', + ...options, + }} + path={filePath} + theme={themeKey} + value={value ?? ''} + onChange={(val) => onChange?.(val ?? '')} + onMount={(editorInstance) => { + editorRef.current = editorInstance; + onMount?.(editorInstance); + }} /> -
- - } - options={{ - fixedOverflowWidgets: true, - minimap: { - enabled: false, - }, - readOnly, - wordWrap: wordWrap ? 'on' : 'off', - ...options, - }} - path={filePath} - theme={themeKey} - value={value ?? ''} - onChange={(val) => onChange?.(val ?? '')} - onMount={(editorInstance) => { - editorRef.current = editorInstance; - onMount?.(editorInstance); - }} - /> -
- +
); } diff --git a/apps/web/src/components/workspace/common/editor/hooks/useMonacoEditorVimMode.ts b/apps/web/src/components/workspace/common/editor/hooks/useMonacoEditorVimMode.ts deleted file mode 100644 index 3a2b825ea..000000000 --- a/apps/web/src/components/workspace/common/editor/hooks/useMonacoEditorVimMode.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type { editor } from 'monaco-editor'; -// @ts-expect-error monaco-vim is not typed. -import { initVimMode } from 'monaco-vim'; -import { useEffect, useRef } from 'react'; - -export default function useMonacoEditorVimMode( - editorInstance: editor.IStandaloneCodeEditor | null, - enabled: boolean, - vimStatusBar: HTMLDivElement | null, -) { - // AnyIntentional as monaco-vim is not typed. - const vimModeRef = useRef(null); - - useEffect(() => { - if (!editorInstance) { - return; - } - - if (enabled && !vimModeRef.current) { - vimModeRef.current = initVimMode(editorInstance, vimStatusBar); - } else if (!enabled && vimModeRef.current) { - vimModeRef.current.dispose(); - vimModeRef.current = null; - } - - return () => { - if (vimModeRef.current) { - vimModeRef.current.dispose(); - vimModeRef.current = null; - } - }; - }, [editorInstance, enabled, vimStatusBar]); -} diff --git a/apps/web/src/components/workspace/common/editor/hooks/useVimMode.ts b/apps/web/src/components/workspace/common/editor/hooks/useVimMode.ts deleted file mode 100644 index 397ed5f40..000000000 --- a/apps/web/src/components/workspace/common/editor/hooks/useVimMode.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { useCallback } from 'react'; -import { useLocalStorage } from 'usehooks-ts'; - -const VIM_MODE_LOCAL_STORAGE_KEY = 'gfe-vim-mode-enabled'; - -export function useVimMode() { - const [isVimModeEnabled, setIsVimModeEnabled] = useLocalStorage( - VIM_MODE_LOCAL_STORAGE_KEY, - false, - ); - - const toggleVimMode = useCallback(() => { - setIsVimModeEnabled((prev) => !prev); - }, [setIsVimModeEnabled]); - - return { isVimModeEnabled, toggleVimMode }; -} diff --git a/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceBottomBar.tsx b/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceBottomBar.tsx index 40a9812d2..5673ed8fd 100644 --- a/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceBottomBar.tsx +++ b/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceBottomBar.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { RiArrowGoBackLine, RiPlayLine, RiSettings2Line } from 'react-icons/ri'; -import { VscLayout, VscTerminal } from 'react-icons/vsc'; +import { VscLayout } from 'react-icons/vsc'; import QuestionProgressAction from '~/components/interviews/questions/common/QuestionProgressAction'; import QuestionReportIssueButton from '~/components/interviews/questions/common/QuestionReportIssueButton'; @@ -10,7 +10,6 @@ import type { QuestionMetadata } from '~/components/interviews/questions/common/ import { useIntl } from '~/components/intl'; import Button from '~/components/ui/Button'; import DropdownMenu from '~/components/ui/DropdownMenu'; -import { useVimMode } from '~/components/workspace/common/editor/hooks/useVimMode'; import logEvent from '~/logging/logEvent'; @@ -36,7 +35,6 @@ export default function JavaScriptCodingWorkspaceBottomBar({ const { status, runTests, submit, resetToDefaultCode } = useCodingWorkspaceContext(); const [isLayoutDialogOpen, setIsLayoutDialogOpen] = useState(false); - const { isVimModeEnabled, toggleVimMode } = useVimMode(); const rightPostElements = ( <> @@ -155,24 +153,6 @@ export default function JavaScriptCodingWorkspaceBottomBar({ }, value: 'layout', }, - { - icon: VscTerminal, - label: isVimModeEnabled - ? intl.formatMessage({ - defaultMessage: 'Disable Vim Mode', - description: - 'Button label to disable vim mode in editor', - id: 'I7qnG/', - }) - : intl.formatMessage({ - defaultMessage: 'Enable Vim Mode', - description: - 'Button label to enable vim mode in editor', - id: 'ILCBgB', - }), - onClick: toggleVimMode, - value: 'vim-mode', - }, { icon: RiArrowGoBackLine, label: intl.formatMessage({ diff --git a/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceCodeEditor.tsx b/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceCodeEditor.tsx index 45dd6b0b0..68dbf8002 100644 --- a/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceCodeEditor.tsx +++ b/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceCodeEditor.tsx @@ -8,7 +8,6 @@ import { themeBorderColor } from '~/components/ui/theme'; import CodingWorkspaceEditorShortcutsButton from '~/components/workspace/common/editor/CodingWorkspaceEditorShortcutsButton'; import CodingWorkspaceResetButton from '~/components/workspace/common/editor/CodingWorkspaceResetButton'; import CodingWorkspaceThemeSelect from '~/components/workspace/common/editor/CodingWorkspaceThemeSelect'; -import { useVimMode } from '~/components/workspace/common/editor/hooks/useVimMode'; import JavaScriptCodingWorkspaceWorkingLanguageSelect from '~/components/workspace/javascript/JavaScriptCodingWorkspaceWorkingLanguageSelect'; import { useJavaScriptCodingWorkspaceContext } from './JavaScriptCodingWorkspaceContext'; @@ -37,7 +36,6 @@ export default function JavaScriptCodingWorkspaceCodeEditor({ useJavaScriptCodingWorkspaceContext(); const { sandpack } = useSandpack(); const intl = useIntl(); - const { isVimModeEnabled } = useVimMode(); const isMounted = useIsMounted(); const { files, updateFile } = sandpack; @@ -120,7 +118,6 @@ export default function JavaScriptCodingWorkspaceCodeEditor({ )} { updateFile(filePath, val ?? ''); diff --git a/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceCommunitySolutionCreateTab.tsx b/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceCommunitySolutionCreateTab.tsx index a6087c886..0e24e812c 100644 --- a/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceCommunitySolutionCreateTab.tsx +++ b/apps/web/src/components/workspace/javascript/JavaScriptCodingWorkspaceCommunitySolutionCreateTab.tsx @@ -18,7 +18,6 @@ import TextArea from '~/components/ui/TextArea'; import TextInput from '~/components/ui/TextInput'; import JavaScriptCodingWorkspaceWorkingLanguageSelect from './JavaScriptCodingWorkspaceWorkingLanguageSelect'; -import { useVimMode } from '../common/editor/hooks/useVimMode'; import MonacoCodeEditor from '../common/editor/MonacoCodeEditor'; type Props = Readonly<{ @@ -38,8 +37,6 @@ function JavaScriptCodingWorkspaceCommunitySolutionCreateTabImpl({ const intl = useIntl(); const trpcUtils = trpc.useUtils(); - const { isVimModeEnabled } = useVimMode(); - const { isLoading, mutateAsync: addSolution } = trpc.questionCommunitySolution.javaScriptAdd.useMutation({ onSuccess: () => { @@ -161,11 +158,7 @@ function JavaScriptCodingWorkspaceCommunitySolutionCreateTabImpl({ name="code" render={({ field: { ref: _, ...field } }) => (
- + {formState.isDirty && formState.errors.code?.message && ( {formState.errors.code?.message} diff --git a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceBottomBar.tsx b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceBottomBar.tsx index e26a2c659..91350ab7d 100644 --- a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceBottomBar.tsx +++ b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceBottomBar.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import { RiArrowGoBackLine, RiSettings2Line } from 'react-icons/ri'; -import { VscLayout, VscTerminal } from 'react-icons/vsc'; +import { VscLayout } from 'react-icons/vsc'; import { useShowAuthSignupDialogOnMaxPoints } from '~/components/auth/auth-points'; import QuestionProgressAction from '~/components/interviews/questions/common/QuestionProgressAction'; @@ -15,7 +15,6 @@ import type { import type { QuestionUserInterfaceMode } from '~/components/interviews/questions/common/QuestionUserInterfacePath'; import { useIntl } from '~/components/intl'; import DropdownMenu from '~/components/ui/DropdownMenu'; -import { useVimMode } from '~/components/workspace/common/editor/hooks/useVimMode'; import UserInterfaceCodingWorkspaceLayoutDialog from './UserInterfaceCodingWorkspaceLayoutDialog'; import UserInterfaceCodingWorkspaceSaveButton from './UserInterfaceCodingWorkspaceSaveButton'; @@ -51,7 +50,6 @@ export default function UserInterfaceCodingWorkspaceBottomBar({ useShowAuthSignupDialogOnMaxPoints(); const [isLayoutDialogOpen, setIsLayoutDialogOpen] = useState(false); - const { isVimModeEnabled, toggleVimMode } = useVimMode(); const leftElements = (
@@ -84,22 +82,6 @@ export default function UserInterfaceCodingWorkspaceBottomBar({ }, value: 'layout', }, - { - icon: VscTerminal, - label: isVimModeEnabled - ? intl.formatMessage({ - defaultMessage: 'Disable Vim Mode', - description: 'Button label to disable vim mode in editor', - id: 'I7qnG/', - }) - : intl.formatMessage({ - defaultMessage: 'Enable Vim Mode', - description: 'Button label to enable vim mode in editor', - id: 'ILCBgB', - }), - onClick: toggleVimMode, - value: 'vim-mode', - }, { icon: RiArrowGoBackLine, label: intl.formatMessage({ diff --git a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceCodeEditor.tsx b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceCodeEditor.tsx index 017d6215a..a0e4fee4e 100644 --- a/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceCodeEditor.tsx +++ b/apps/web/src/components/workspace/user-interface/UserInterfaceCodingWorkspaceCodeEditor.tsx @@ -11,7 +11,6 @@ import { themeBorderColor } from '~/components/ui/theme'; import CodingWorkspaceEditorShortcutsButton from '~/components/workspace/common/editor/CodingWorkspaceEditorShortcutsButton'; import CodingWorkspaceResetButton from '~/components/workspace/common/editor/CodingWorkspaceResetButton'; import CodingWorkspaceThemeSelect from '~/components/workspace/common/editor/CodingWorkspaceThemeSelect'; -import { useVimMode } from '~/components/workspace/common/editor/hooks/useVimMode'; import MonacoCodeEditor from '~/components/workspace/common/editor/MonacoCodeEditor'; import { useUserInterfaceCodingWorkspaceSavesContext } from './UserInterfaceCodingWorkspaceSaveContext'; @@ -42,7 +41,6 @@ export default function UserInterfaceCodingWorkspaceCodeEditor({ setShowLoadedFilesFromLocalStorageMessage, resetToDefaultCode, } = useCodingWorkspaceContext(); - const { isVimModeEnabled } = useVimMode(); const isMounted = useIsMounted(); const onFocus = useCallback(() => { @@ -212,7 +210,6 @@ export default function UserInterfaceCodingWorkspaceCodeEditor({ )} { updateFile(filePath, val ?? ''); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3fcfb46e8..0f10f33e3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -469,9 +469,6 @@ importers: monaco-themes: specifier: ^0.4.3 version: 0.4.4 - monaco-vim: - specifier: ^0.4.2 - version: 0.4.2(monaco-editor@0.40.0) negotiator: specifier: ^0.6.3 version: 0.6.3 @@ -11361,7 +11358,7 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 5.62.0(eslint@8.34.0)(typescript@5.7.2) + '@typescript-eslint/parser': 5.62.0(eslint@8.34.0)(typescript@5.3.3) debug: 3.2.7 eslint: 8.34.0 eslint-import-resolver-node: 0.3.9 @@ -11402,7 +11399,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.62.0(eslint@8.34.0)(typescript@5.7.2) + '@typescript-eslint/parser': 5.62.0(eslint@8.34.0)(typescript@5.3.3) array-includes: 3.1.7 array.prototype.findlastindex: 1.2.3 array.prototype.flat: 1.3.2 @@ -15249,14 +15246,6 @@ packages: fast-plist: 0.1.3 dev: false - /monaco-vim@0.4.2(monaco-editor@0.40.0): - resolution: {integrity: sha512-rdbQC3O2rmpwX2Orzig/6gZjZfH7q7TIeB+uEl49sa+QyNm3jCKJOw5mwxBdFzTqbrPD+URfg6A2lEkuL5kymw==} - peerDependencies: - monaco-editor: '*' - dependencies: - monaco-editor: 0.40.0 - dev: false - /mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'}