diff --git a/en/docs/develop/basic-design/connection/index.html b/en/docs/develop/basic-design/connection/index.html index 7f234be8..8c5ca227 100644 --- a/en/docs/develop/basic-design/connection/index.html +++ b/en/docs/develop/basic-design/connection/index.html @@ -52,7 +52,7 @@ } } }) -

Front and Back Communication

OpenSumi is meant to seperate the frontend and backend. Whether in the Web or Electron environment, the interface displayed in the browser/window is called OpenSumi frontend, while functions including file reading and writing, terminal connection and extension process are operated in the OpenSumi backend. Unlike conventional B/S or C/S architecture, the communication between the frontend and backend of OpenSumi is made by a single long link.

+

Front and Back Communication

OpenSumi is meant to seperate the frontend and backend. Whether in the Web or Electron environment, the interface displayed in the browser/window is called OpenSumi frontend, while functions including file reading and writing, terminal connection and extension process are operated in the OpenSumi backend. Unlike conventional B/S or C/S architecture, the communication between the frontend and backend of OpenSumi is made by a single long link.

In the Web environment, the frontend and the backend will build a WebSocket connection.

Web Connection

In the Electron environment, a Socket connection is built for interprocess communication(IPC)

diff --git a/en/docs/develop/basic-design/contribution-point/index.html b/en/docs/develop/basic-design/contribution-point/index.html index f93a9528..9990d4bf 100644 --- a/en/docs/develop/basic-design/contribution-point/index.html +++ b/en/docs/develop/basic-design/contribution-point/index.html @@ -52,7 +52,7 @@ } } }) -

Contribution Point Mechanism

The concept of contribution point comes from a design philosophy in VS Code. By defining a basic contribution point, we can fully implement a capability and spread out the contribution point files for each submodule.

+

Contribution Point Mechanism

The concept of contribution point comes from a design philosophy in VS Code. By defining a basic contribution point, we can fully implement a capability and spread out the contribution point files for each submodule.

Samples

As there are plenty of hot keys in IDE, if a module wants to register a shortcut, it can depend on the shortcut module directly. While if the shortcut module wants to register a command, it will depend on the command module and other logical modules, which in turn makes the connection of these modules difficult to sustain.

With the contribution point mechanism, you can just execute the logic of the contribution point mechanism in the public module, and don't need to concern about the implementation details of specific shortcut keys, as shown in the figure:

diff --git a/en/docs/develop/basic-design/core-idea/index.html b/en/docs/develop/basic-design/core-idea/index.html index cb9369ee..bc9b6fd7 100644 --- a/en/docs/develop/basic-design/core-idea/index.html +++ b/en/docs/develop/basic-design/core-idea/index.html @@ -52,7 +52,7 @@ } } }) -

Core Idea

OpenSumi is positioned as an IDE framework, on which you can build IDE products based on Cloud or Desktop. OpenSumi provides the following capabilities by default:

+

Core Idea

OpenSumi is positioned as an IDE framework, on which you can build IDE products based on Cloud or Desktop. OpenSumi provides the following capabilities by default:

  • Basic functional modules, such as FileTree, Editor, and SCM.
  • Rich customizable features, such as integration and extensions.
  • diff --git a/en/docs/develop/basic-design/core-modules/index.html b/en/docs/develop/basic-design/core-modules/index.html index 9fe54541..f63ef377 100644 --- a/en/docs/develop/basic-design/core-modules/index.html +++ b/en/docs/develop/basic-design/core-modules/index.html @@ -52,7 +52,7 @@ } } }) -

    Core Modules

    OpenSumi warehouse code is organized through [Monorepo] (https://www.perforce.com/blog/vcs/what-monorepo), and those under packages directory are all OpenSumi built-in modules as of version 2.8.0. There are 53 modules in the OpenSumi codebase. Some of them are fully pluggable while others provide core functionality. Some early designs are unsuitable for the current architecture and may be removed or incorporated into other modules in future.

    +

    Core Modules

    OpenSumi warehouse code is organized through [Monorepo] (https://www.perforce.com/blog/vcs/what-monorepo), and those under packages directory are all OpenSumi built-in modules as of version 2.8.0. There are 53 modules in the OpenSumi codebase. Some of them are fully pluggable while others provide core functionality. Some early designs are unsuitable for the current architecture and may be removed or incorporated into other modules in future.

    Introduction to Core Modules

    OpenSumi contains dozens of modules, while you don't need to reach every module in development. In general, you should have some basic understanding on following modules.

    Core Browser

    diff --git a/en/docs/develop/basic-design/dependence-injector/index.html b/en/docs/develop/basic-design/dependence-injector/index.html index bf99f3cc..261ec152 100644 --- a/en/docs/develop/basic-design/dependence-injector/index.html +++ b/en/docs/develop/basic-design/dependence-injector/index.html @@ -52,7 +52,7 @@ } } }) -

    Dependence Injector

    To promote developers to focus on their own modules and less-concern about the implementation details of other modules, we use @opensumi/di for dependency decoupling.

    +

    Dependence Injector

    To promote developers to focus on their own modules and less-concern about the implementation details of other modules, we use @opensumi/di for dependency decoupling.

    User Guide

    In the dependency injection coding pattern, if we want to use a service within a module, we do not need to rely on its concrete implementation, but only on the Token it displayed and declared.

    For eaxmple,IDialogService uses pop-ups services in the module:

    diff --git a/en/docs/develop/basic-design/extension-mechanism/index.html b/en/docs/develop/basic-design/extension-mechanism/index.html index cbfc3a30..5d5238a9 100644 --- a/en/docs/develop/basic-design/extension-mechanism/index.html +++ b/en/docs/develop/basic-design/extension-mechanism/index.html @@ -52,7 +52,7 @@ } } }) -

    Extension Mechanism

    OpenSumi extension system is a superset of VS Code extensions. In addition to official VS Code APIs, we also have extended some API extensions of our own, including frontend and WebWorker extensions. This section mainly introduces the basic principle and API implementation process of OpenSumi extensions.

    +

    Extension Mechanism

    OpenSumi extension system is a superset of VS Code extensions. In addition to official VS Code APIs, we also have extended some API extensions of our own, including frontend and WebWorker extensions. This section mainly introduces the basic principle and API implementation process of OpenSumi extensions.

    Basic Principle

    OpenSumi Extension

    The preceding figure illustrates that the whole extension system involves four environments: frontend UI, Web Worker, backend main process and extension process.

    diff --git a/en/docs/develop/basic-design/lifecycle/index.html b/en/docs/develop/basic-design/lifecycle/index.html index 26d363d5..f2eb85cb 100644 --- a/en/docs/develop/basic-design/lifecycle/index.html +++ b/en/docs/develop/basic-design/lifecycle/index.html @@ -52,7 +52,7 @@ } } }) -

    Application Lifecycle

    In Quick Start, we create an instance of a ClientAPP and call its start mode to enable OpenSumi.

    +

    Application Lifecycle

    In Quick Start, we create an instance of a ClientAPP and call its start mode to enable OpenSumi.

    const app = new ClientAPP(/*..options*/);
     app.start();

    The Start process is simple and perceivable, mainly responsible for the following tasks:

    diff --git a/en/docs/develop/how-to-contribute/index.html b/en/docs/develop/how-to-contribute/index.html index a4266d66..642b6f34 100644 --- a/en/docs/develop/how-to-contribute/index.html +++ b/en/docs/develop/how-to-contribute/index.html @@ -52,7 +52,7 @@ } } }) -

    How To Contribute

    Generally speaking, you have many ways to help develop OpenSumi code, for example, find a bug, write it down and submit a PR (Pull Requests), or simply give a piece of advice on a feature.

    +

    How To Contribute

    Generally speaking, you have many ways to help develop OpenSumi code, for example, find a bug, write it down and submit a PR (Pull Requests), or simply give a piece of advice on a feature.

    For issue marked with PR Welcome, it is best to submit your first PR when you have any questions in the process. You can always consult any project member in the comment area by using "@" any project member.

    Prepare Development Environment

    diff --git a/en/docs/develop/how-to-design-module/index.html b/en/docs/develop/how-to-design-module/index.html index d540f5a4..75a39491 100644 --- a/en/docs/develop/how-to-design-module/index.html +++ b/en/docs/develop/how-to-design-module/index.html @@ -52,7 +52,7 @@ } } }) -

    How to Design Modules

    Based on the OpenSumi system, this section mainly introduces the idea of building modules, aiming to extend native framework functions. The creation of modules and specific practices can be found in our classic case, which contains basic ideas and practices to create specific modules.

    +

    How to Design Modules

    Based on the OpenSumi system, this section mainly introduces the idea of building modules, aiming to extend native framework functions. The creation of modules and specific practices can be found in our classic case, which contains basic ideas and practices to create specific modules.

    Know about Dependency Injection

    Before learning the module, we recommend you to read Dependency Injection. In OpenSumi, all service registrations and invocations are based on this unified dependency injection structure to decouple service implementation and invocation logic, allowing framework developers to focus on developing modules and achieving more independent module construction.

    What Is a Module?

    diff --git a/en/docs/develop/module-apis/decoration/index.html b/en/docs/develop/module-apis/decoration/index.html index e6c29d99..4c7237d2 100644 --- a/en/docs/develop/module-apis/decoration/index.html +++ b/en/docs/develop/module-apis/decoration/index.html @@ -52,7 +52,7 @@ } } }) -

    Decoration Module

    The FileDecoration module is used to register, manag or distribute filename related Decoration services.

    +

    Decoration Module

    The FileDecoration module is used to register, manag or distribute filename related Decoration services.

    Basic Concepts

    Decoration ——a decorator, a means to to "decorate" the file tree style. The following figure is a common scenario that shows Git project special decoration

    git-sample

    diff --git a/en/docs/develop/module-apis/editor/index.html b/en/docs/develop/module-apis/editor/index.html index 027a7965..648beaba 100644 --- a/en/docs/develop/module-apis/editor/index.html +++ b/en/docs/develop/module-apis/editor/index.html @@ -52,7 +52,7 @@ } } }) -

    Editor Mode

    Basic Concept

    +

    Editor Mode

    Basic Concept

    The following diagram shows a complete process to open an editor tab, which can help to understand the core concepts of the editor module.

      diff --git a/en/docs/develop/module-apis/layout/index.html b/en/docs/develop/module-apis/layout/index.html index 72a5f603..96f2d4b4 100644 --- a/en/docs/develop/module-apis/layout/index.html +++ b/en/docs/develop/module-apis/layout/index.html @@ -52,7 +52,7 @@ } } }) -

      Layout Module

      Basic Concept

      +

      Layout Module

      Basic Concept

      The layout module(that is, @OpenSumi/IDE-main-Layout) is responsible for the basic layout of the IDE, dividing the entire window into several areas in the shape of left, main and bottom. We define those areas as slots. After we partition the layout, several large views registered to the slot are consumed through the provided slot renderer component. In special slots such as the left sidebar, a large view(called a view container) also supports registering multiple small subviews, so the final organizational relationship between the entire layout and the React view component is:

      The Organizational Relations Between Layout and View

      The views we register will end up inside the view container or sub-views. Each view will be injected with a global DI instance through the ContextProvider, and the instances of each class will be available inside the view through the useInjectable method.

      diff --git a/en/docs/develop/module-apis/overlay/index.html b/en/docs/develop/module-apis/overlay/index.html index e14b53b7..09ed85d9 100644 --- a/en/docs/develop/module-apis/overlay/index.html +++ b/en/docs/develop/module-apis/overlay/index.html @@ -52,7 +52,7 @@ } } }) -

      Overlay Module

      Overlay modules are the covering modules on the IDE, such as Dialog and Message modules. You can use this module when you need to notify the user of a message from the IDE or when you need a modal dialog box to interact with the user.

      +

      Overlay Module

      Overlay modules are the covering modules on the IDE, such as Dialog and Message modules. You can use this module when you need to notify the user of a message from the IDE or when you need a modal dialog box to interact with the user.

      Message

      Message will pop up a prompt in the lower right corner of the IDE.

      message

      diff --git a/en/docs/develop/module-apis/preference/index.html b/en/docs/develop/module-apis/preference/index.html index 460e9449..f4a2b3de 100644 --- a/en/docs/develop/module-apis/preference/index.html +++ b/en/docs/develop/module-apis/preference/index.html @@ -52,7 +52,7 @@ } } }) -

      Preference Module

      The Preferences module is used to process the reading logic of the entire IDE configuration, including color theme, icon theme, automatic save, and so on.

      +

      Preference Module

      The Preferences module is used to process the reading logic of the entire IDE configuration, including color theme, icon theme, automatic save, and so on.

      Storage Paths

      The directory location of the configuration file can be read by passing userPreferenceDirName and workspacePreferenceDirName to settings.json when configuring AppConfig for global configuration and workspace configuration, respectively.

      diff --git a/en/docs/develop/module-samples/index.html b/en/docs/develop/module-samples/index.html index 09d3789a..b562054b 100644 --- a/en/docs/develop/module-samples/index.html +++ b/en/docs/develop/module-samples/index.html @@ -52,7 +52,7 @@ } } }) -

      Module Samples

      We officially provide a case repository for module expansion opensumi-module-samples. You can learn the following contents in the template repository:

      +

      Module Samples

      We officially provide a case repository for module expansion opensumi-module-samples. You can learn the following contents in the template repository:

      diff --git a/en/docs/develop/sample/connection-between-browser-and-node/index.html b/en/docs/develop/sample/connection-between-browser-and-node/index.html index 194ce15b..5ff49a58 100644 --- a/en/docs/develop/sample/connection-between-browser-and-node/index.html +++ b/en/docs/develop/sample/connection-between-browser-and-node/index.html @@ -52,7 +52,7 @@ } } }) -

      Front-end and Back-end Connection Implementation

      To implement two-way communication between the frontend and the backend, we rely on special service declarations of BrowserModule and NodeModule.

      +

      Front-end and Back-end Connection Implementation

      To implement two-way communication between the frontend and the backend, we rely on special service declarations of BrowserModule and NodeModule.

      First of all, you need to define a single channel for two-way communication message. We define a ITodoConnectionServerPath as the only ID message channel. Frontend and backend distributes the service through the channel.

      export const ITodoConnectionServerPath = 'ITodoConnectionServerPath';

      Associate Front-end and Back-end Services

      diff --git a/en/docs/develop/sample/create-module/index.html b/en/docs/develop/sample/create-module/index.html index a49d0550..2453e326 100644 --- a/en/docs/develop/sample/create-module/index.html +++ b/en/docs/develop/sample/create-module/index.html @@ -52,7 +52,7 @@ } } }) -

      Create Module

      Because the OpenSumi module does not run independently, we recommend you create your module directory outside the project directory when creating the module. Taking the template repository provided by Quick Start as an example, you can quickly start an IDE project:

      +

      Create Module

      Because the OpenSumi module does not run independently, we recommend you create your module directory outside the project directory when creating the module. Taking the template repository provided by Quick Start as an example, you can quickly start an IDE project:

      $ git clone git@github.com:opensumi/ide-startup.git
       $ cd ide-startup
       $ yarn					   # Install dependencies  
      diff --git a/en/docs/develop/sample/display-list/index.html b/en/docs/develop/sample/display-list/index.html
      index 16e63396..40b33f0c 100644
      --- a/en/docs/develop/sample/display-list/index.html
      +++ b/en/docs/develop/sample/display-list/index.html
      @@ -52,7 +52,7 @@
               }
             }
           })
      -  

      Display List

      To reach a list of high performance, we usually need some three-party libraries to implement it. However, we have established a number of common components in @opensumi/ide-components under OpenSumi, and we will show how to render our TodoList list with these components.

      +

      Display List

      To reach a list of high performance, we usually need some three-party libraries to implement it. However, we have established a number of common components in @opensumi/ide-components under OpenSumi, and we will show how to render our TodoList list with these components.

      Data Structure

      In panels registered by IMainLayoutService service, components render with a default viewState property, from which you can get the width and height of the entire panel.

      export interface ITodo {
      diff --git a/en/docs/develop/sample/overview/index.html b/en/docs/develop/sample/overview/index.html
      index cfe2ac8a..56c784b0 100644
      --- a/en/docs/develop/sample/overview/index.html
      +++ b/en/docs/develop/sample/overview/index.html
      @@ -52,7 +52,7 @@
               }
             }
           })
      -  

      Case Introduction

      This case teaches you how to develop your own modules from scratch, step by step, by implementing a TodoList list in OpenSumi, and by this case you will gain some knowledge:

      +

      Case Introduction

      This case teaches you how to develop your own modules from scratch, step by step, by implementing a TodoList list in OpenSumi, and by this case you will gain some knowledge:

      • How to create a module.
      • How to present a list.
      • diff --git a/en/docs/develop/sample/use-contribution-point/index.html b/en/docs/develop/sample/use-contribution-point/index.html index a12af6bc..23350bf6 100644 --- a/en/docs/develop/sample/use-contribution-point/index.html +++ b/en/docs/develop/sample/use-contribution-point/index.html @@ -52,7 +52,7 @@ } } }) -

        Use Contribution Point

        In module development, You may need to deal with contribution points on a regular basis. In OpenSumi we implement a contribution point mechanism for many key logics. For more details, you can see contribution points.

        +

        Use Contribution Point

        In module development, You may need to deal with contribution points on a regular basis. In OpenSumi we implement a contribution point mechanism for many key logics. For more details, you can see contribution points.

        To register our TodoList list on the left Explorer panel, we need to use the MainLayoutContribution to register the panel.

        Create a Front View

        First, the following code shows a simple front-end presentation component:

        diff --git a/en/docs/develop/sample/use-service-by-di/index.html b/en/docs/develop/sample/use-service-by-di/index.html index f4c6096a..3cc2e116 100644 --- a/en/docs/develop/sample/use-service-by-di/index.html +++ b/en/docs/develop/sample/use-service-by-di/index.html @@ -52,7 +52,7 @@ } } }) -

        Register and Use the service by DI

        DI (Dependency Injection) is one of the core mechanisms of OpenSumi framework. By using DI, we can easily achieve the decoupling of dependencies and reuse of services. For more details, please see Dependency Injection .

        +

        Register and Use the service by DI

        DI (Dependency Injection) is one of the core mechanisms of OpenSumi framework. By using DI, we can easily achieve the decoupling of dependencies and reuse of services. For more details, please see Dependency Injection .

        This section will start from use cases. Rgister ITodoService service When you are using the IMessageService service offered by the framework. Todo items switch state to display handover information.

        Registration Service

        Declare ITodoService service interface:

        diff --git a/en/docs/integrate/browser-extension/opensumi-devtools/index.html b/en/docs/integrate/browser-extension/opensumi-devtools/index.html index b39de65e..5f73c80c 100644 --- a/en/docs/integrate/browser-extension/opensumi-devtools/index.html +++ b/en/docs/integrate/browser-extension/opensumi-devtools/index.html @@ -52,7 +52,7 @@ } } }) -

        OpenSumi DevTools

        A Chrome DevTools Extension for any OpenSumi based IDE, with support for both Web clients and Electron clients.

        +

        OpenSumi DevTools

        A Chrome DevTools Extension for any OpenSumi based IDE, with support for both Web clients and Electron clients.

        OpenSumi DevTools Gif

        GitHub:https://github.com/opensumi/devtools

        Features

        diff --git a/en/docs/integrate/browser-extension/shortcuts-guard/index.html b/en/docs/integrate/browser-extension/shortcuts-guard/index.html index dd751b63..294a0f54 100644 --- a/en/docs/integrate/browser-extension/shortcuts-guard/index.html +++ b/en/docs/integrate/browser-extension/shortcuts-guard/index.html @@ -52,7 +52,7 @@ } } }) -

        Shortcuts Guard

        The shortcuts of IDEs developed based on OpenSumi conflict with those of Chrome, which makes the corresponding actions of IDEs unable to take effect. For example, the Ctrl/Cmd + W shortcut will close the current browser tab, making IDEs unable to handle this shortcut event. Shortcuts Guard solve the most common used shortcuts conflict.

        +

        Shortcuts Guard

        The shortcuts of IDEs developed based on OpenSumi conflict with those of Chrome, which makes the corresponding actions of IDEs unable to take effect. For example, the Ctrl/Cmd + W shortcut will close the current browser tab, making IDEs unable to handle this shortcut event. Shortcuts Guard solve the most common used shortcuts conflict.

        popup page

        Usage

          diff --git a/en/docs/integrate/extensions-usage/language-for-java/index.html b/en/docs/integrate/extensions-usage/language-for-java/index.html index 933bbf7a..b69ad27c 100644 --- a/en/docs/integrate/extensions-usage/language-for-java/index.html +++ b/en/docs/integrate/extensions-usage/language-for-java/index.html @@ -52,7 +52,7 @@ } } }) -

          Java Project Supporting Extensions

          With the support of a powerful extension system and complete implementation of LSP, DAP, and Testing protocols, OpenSumi can also develop Java projects, such as Spring Boot or SOFA. It can use the Maven build tool to compile and run projects, and supports the full development, debugging, and testing of Java projects.

          +

          Java Project Supporting Extensions

          With the support of a powerful extension system and complete implementation of LSP, DAP, and Testing protocols, OpenSumi can also develop Java projects, such as Spring Boot or SOFA. It can use the Maven build tool to compile and run projects, and supports the full development, debugging, and testing of Java projects.

          To use Java projects, you need to install the following extensions, which can be searched, installed, and downloaded directly from the extension marketplace:

          Language Support for Java: 1.4.0 版本
           Debugger for Java: 0.38.0 版本
          diff --git a/en/docs/integrate/module-usage/3-way-merge-editor/index.html b/en/docs/integrate/module-usage/3-way-merge-editor/index.html
          index 62836371..8c0c4bba 100644
          --- a/en/docs/integrate/module-usage/3-way-merge-editor/index.html
          +++ b/en/docs/integrate/module-usage/3-way-merge-editor/index.html
          @@ -52,7 +52,7 @@
                   }
                 }
               })
          -  

          Using 3-way view new interaction

          Integration Method

          +

          Using 3-way view new interaction

          Integration Method

          Just install the Git plugin.

          If you are installing version 1.68.1, you need to configure the setting git.experimental.mergeEditor to true. If you are installing version 1.69.0 or later, you need to configure the setting git.mergeEditor to true.

          diff --git a/en/docs/integrate/module-usage/ai-native-module/index.html b/en/docs/integrate/module-usage/ai-native-module/index.html index 38429579..230458f3 100644 --- a/en/docs/integrate/module-usage/ai-native-module/index.html +++ b/en/docs/integrate/module-usage/ai-native-module/index.html @@ -52,7 +52,7 @@ } } }) -

          AI Native Module

          Overview

          +

          AI Native Module

          Overview

          Starting from OpenSumi 3.0, it supports customizing AI capabilities through the integration of AI Native Module, including but not limited to:

          • Built-in AI Chat assistant
          • diff --git a/en/docs/integrate/module-usage/collaboration/index.html b/en/docs/integrate/module-usage/collaboration/index.html index 2f2d3d3e..57006aff 100644 --- a/en/docs/integrate/module-usage/collaboration/index.html +++ b/en/docs/integrate/module-usage/collaboration/index.html @@ -52,7 +52,7 @@ } } }) -

            Collaboration Module

            Overview

            +

            Collaboration Module

            Overview

            You can use the hot-pluggable module @opensumi/ide-collaboration to implement real-time multi-person collaborative editing for the editor part of your IDE.