Cloud Studio Editor SDK

Cloud Stuido 前端编辑器 SDK，让基于 IFrame 方式集成 Cloud Studio 方式，可以方便访问编辑器内部的能力。如执行一个编辑器内部命令等等操作。

安装

$ yarn add @cloudstudio/editor-sdk  # 或者 npm i @cloudstudio/editor-sdk

示例

import { createClient, RPC_CONTEXT } from '@cloudstudio/editor-sdk';

// 通过编辑器的 iframe.contentWindow 获取编辑器的 window 对象，注意不是 Workspace Loader 页面对应的 IFrame
const rpc = createClient(editorWindow); 

// 获取 CommandService 对应的代理对象，用于执行编辑器的命令
const commandService = rpc.getProxy(RPC_CONTEXT.CommandService);

// 执行 Editor 中的 `vscode.open` 命令：
await commandService.executeCommand('vscode.open', 'https://cloudstudio.net');

// 执行 Editor 中的 `cloudstudio.getBrowserUrl` 命令，并获取返回值：
const url = await commandService.executeCommand<string>('cloudstudio.getBrowserUrl');

// 设置编辑器配置项，如下是设置活动栏不可见
await commandService.executeCommand<string>('cloudstudio.settings.updateValue', 'workbench.activityBar.visible', false);

// 执行云部署套件的函数部署命令: `deploykit.deploy`
const url = await commandService.executeCommand<string>('deploykit.deploy', { notice: true });

// 执行云部署套件的函数部署命令: `deploykit.deploy`
await commandService.executeCommand('deploykit.deploy', {
    notice: true,
    deployConfig: {
        runtime: 'default',
        mode: [ 'scf', 'event', 'qq-guild-bot' ],              // 使用腾讯云函数部署，并且是普通的 Event 函数
        cloud: {
            disableProjectId: true,
            region: 'ap-guangzhou',
            namespace: {
                name: 'default'
            },
            'function': {
                name: 'foo',
                sync: 'onlyUpdateCode',    // 只更新函数代码，不更新函数配置
                timeout: 15,
                handler: 'index.handler'   // 不支持其他函数入口         
            }
        }

    }
});

// 对光标所在位置进行代码的插入
await commandService!.executeCommand('cloudstudio.insertTextForCursorPosition', 'text1');

// 保持所有未保存的文件
await commandService!.executeCommand('saveAll');

// 获取当前光标所在文件的文件路径
const { schema, path } = await commandService!.executeCommand('cloudstudio.getActiveCodeEditorUri');

// 获取 FileService 对应的代理对象，用于执行文件相关操作
const fileService = rpc.getProxy(RPC_CONTEXT.FileService);

// 创建文件
await fileService.createFile('vscode-remote:///Users/kevin/code/test/foo.txt', 'text1'); // 第二个参数可选

// 读文件内容
const { value } = await fileService.readFile('vscode-remote:///Users/kevin/code/test/foo.txt');

// 写文件内容
fileService.writeFile('vscode-remote:///Users/kevin/code/test/foo.txt', 'text1');

// 删除文件
await fileService.del('vscode-remote:///Users/kevin/code/test/foo.txt', { recursive: true });

// 判断文件是否存在
const isExists = await fileService.exists('vscode-remote:///Users/kevin/code/test/foo.txt');

// 拷贝文件
await fileService.copy('vscode-remote:///Users/kevin/code/test/foo.txt'， 'vscode-remote:///Users/kevin/code/test/bar.txt');

// 创建文件夹
await fileService.createFolder('vscode-remote:///Users/kevin/code/test/foo'); // 第二个参数可选

// 监听激活编辑器改变事件：onDidActiveEditorChange
const editorService = rpc.getLocal(RPC_CONTEXT.EditorService);
editorService.onDidActiveEditorChange({ uri, editorType } => {

});

// 监听远端工作空间连接状态：onDidStateChange
const remoteAgentConnection = rpc.getLocal(RPC_CONTEXT.RemoteAgentConnection);
remoteAgentConnection.onDidStateChange(event => {

});