Enhance Text-Editing Capabilities with Monaco Editor

[sebastienfi]

Description:
Enhance the text-editing capabilities of the application to provide a more VSCode-like experience. This includes features such as selecting the next occurrence of a selected string using Cmd+D, multi-cursor support, and more. To achieve this, the current editor implementation using @tiptap/react will be replaced with the monaco-editor implementation of TypeFox. The content of the useFileByPath hook will be changed to respect the architecture of the actual software, as that's where the editor implementation happens. Other files may need to change.

Requirements:

• Replace @tiptap/react with monaco-editor-wrapper.
• Implement features like multi-cursor support and selecting the next occurrence of a selected string.
• Ensure the new editor supports Markdown files.
• Maintain the current architecture and integrate the new editor seamlessly.

Proposed implementation:

• Change 1: Update useFileByFilepath hook to use monaco-editor-wrapper.

import { useEffect, useRef, useState } from "react";
import { MonacoEditorLanguageClientWrapper, UserConfig } from 'monaco-editor-wrapper';
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
import { configureMonacoWorkers } from '@/utils/monacoConfig';
export const useFileByFilepath = () => {
  const [currentlyOpenedFilePath, setCurrentlyOpenedFilePath] = useState<string | null>(null);
  const editorRef = useRef<MonacoEditorLanguageClientWrapper | null>(null);
  const openFileByPath = async (newFilePath: string) => {
    const newFileContent = (await window.files.readFile(newFilePath)) ?? "";
    if (editorRef.current) {
      editorRef.current.setValue(newFileContent);
    }
    setCurrentlyOpenedFilePath(newFilePath);
  };
  useEffect(() => {
    if (!editorRef.current) {
      configureMonacoWorkers();
      const wrapper = new MonacoEditorLanguageClientWrapper();
      const userConfig: UserConfig = {
        wrapperConfig: {
          serviceConfig: {
            userServices: {
              ...getKeybindingsServiceOverride(),
            },
            debugLogging: true
          },
          editorAppConfig: {
            $type: 'extended',
            codeResources: {
              main: {
                text: '',
                uri: '/workspace/model.md'
              }
            },
            useDiffEditor: false,
            userConfiguration: {
              json: JSON.stringify({
                'workbench.colorTheme': 'Default Dark Modern',
                'editor.guides.bracketPairsHorizontal': 'active',
                'editor.lightbulb.enabled': 'On'
              })
            }
          }
        }
      };
      wrapper.init(userConfig).then(() => {
        editorRef.current = wrapper;
      });
    }
  }, []);
  return {
    filePath: currentlyOpenedFilePath,
    openFileByPath,
  };
};

Path: src/components/File/hooks/use-file-by-filepath.ts

• Change 2: Update FileEditorContainer to use the new useFileByFilepath hook and render the Monaco editor.

import React from "react";
import { useFileByFilepath } from "./File/hooks/use-file-by-filepath";
const FileEditorContainer: React.FC = () => {
  const { filePath, openFileByPath } = useFileByFilepath();
  return (
    <div>
      <div id="monaco-editor-root" style={{ height: '100vh', width: '100%' }}></div>
    </div>
  );
};
export default FileEditorContainer;

Path: src/components/FileEditorContainer.tsx

• Change 3: Configure Monaco Workers

import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
export const configureMonacoWorkers = () => {
  useWorkerFactory({
    ignoreMapping: true,
    workerLoaders: {
      editorWorkerService: () => new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), { type: 'module' }),
    }
  });
};

Path: src/utils/monacoConfig.ts

Tasks required:

• Replace the @tiptap/react editor with monaco-editor-wrapper.
• Implement the useFileByFilepath hook to initialize and manage the Monaco editor using monaco-editor-wrapper.
• Update the FileEditorContainer component to render the Monaco editor.
• Ensure the new editor supports Markdown files and integrates seamlessly with the existing architecture.

Benefits:

• Enhanced text-editing capabilities similar to VSCode.
• Improved user experience with features like multi-cursor support and selecting the next occurrence of a selected string.
• Extensible solution that can support other file types in the future.