Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

monaco-editor: web ide app `worksapce/symbol` Reuse document/symbol s… #47544

Merged

Conversation

@vincentLiuxiang
Copy link
Contributor

commented Apr 10, 2018

monaco-editor don't support workspace/symbol

Now, we are developing an web ide base on monaco-editor,
and we want to realize the workspace/symbol feature which can make multi files switch(cmd + p), just like:
2018-04-10 12 03 59

However, monaco-editor only support document/symbol (cmd + shift + O).

We want to reuse the document/symbol ui Widget to realize workspace/symbol feature, but we meet an problew:

// class SymbolEntry extends QuickOpenEntryGroup {
// change to 
export class SymbolEntry extends QuickOpenEntryGroup {
	private name: string;
	private type: string;
        ...

        // selected action
	public run(mode: Mode, context: IContext): boolean {
		if (mode === Mode.OPEN) {
			return this.runOpen(context);
		}

		return this.runPreview();
	}

SymbolEntry was not export in quickOutline.ts, that I cannot change the action after select an item.

if we export SymbolEntry, I can overwrite the SymbolEntry.prototype.run method in my code, like:

```js
import { QuickOutlineAction, SymbolEntry } from 'monaco-editor/esm/vs/editor/standalone/browser/quickOpen/quickOutline';

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_P, () => {
SymbolEntry.prototype.customType = 'workspace';
SymbolEntry.prototype.webideRun = SymbolEntry.prototype.run;
SymbolEntry.prototype.run = function(...args) {
if (this.customType !== 'workspace') {
return this.webideRun(...args);
}
this.customType = '';
// do something for workspace/symbol
}
(new QuickOutlineAction()).run('', eiditor);
})

@vincentLiuxiang

This comment has been minimized.

Copy link
Contributor Author

commented Apr 12, 2018

now, I can add a command ctrl/cmd + p, to support workspace symbol:

my code:

workspace.js

import { QuickOutlineAction, SymbolEntry } from 'monaco-editor/esm/vs/editor/standalone/browser/quickOpen/quickOutline';
import { Mode } from 'monaco-editor/esm/vs/base/parts/quickopen/common/quickOpen';

export class WorkspaceQuickOutlineAction extends QuickOutlineAction {
  constructor() {
    super();
  }

  // overwrite
  symbolEntry(...args) {
    return new WorkspaceSymbolEntry(...args);
  }
}

export class WorkspaceSymbolEntry extends SymbolEntry {
  constructor(...args) {
    super(...args)
  }
  
  // overwrite
  run(mode, context) {
    if (mode !== Mode.OPEN)  return;
    // to do
    // workspace symbol
  }
}

lsp.js

import { QuickOpenEditorWidget } from 'monaco-editor/esm/vs/editor/standalone/browser/quickOpen/quickOpenEditorWidget';
import { QuickOpenController } from 'monaco-editor/esm/vs/editor/standalone/browser/quickOpen/editorQuickOpen';
import { QuickOpenModel } from 'monaco-editor/esm/vs/base/parts/quickopen/browser/quickOpenModel';
import { WorkspaceQuickOutlineAction } from './workspace'

...

function request(editor, value) {
  return this.getConnection(editor.model)
      .sendRequest('workspace/symbol',
        convert.MonacoToLsp.workspaceSymbol(value))
      .then(symbol => convert.LspToMonaco.documentSymbol(symbol, editor.model.uri));
}

editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_P, () => {
  const { themeService, lastKnownEditorSelection } = QuickOpenController.get(editor);
  this.widget = new QuickOpenEditorWidget(editor,
    () => {},
    () => {},
    (value) => {
        clearTimeout(this._timer);
        this._timer = setTimeout(() => {
          let promise = Promise.resolve([]);
          if (value) promise = request(this.editor, value);
          const workspaceQuickOutlineAction = new WorkspaceQuickOutlineAction();
          promise.then(result => this.widget.setInput(
            new QuickOpenModel(result),
            getAutoFocus(value)
          ));
        }, this.delay);
    },
    {
      inputAriaLabel: 'workspace symbol'
    },
    themeService
  );
  this.widget.show('');
});

then, I can reuse the document/symbol widget ui, and I can switch files in WorkspaceSymbolEntry

  // overwrite
  run(mode, context) {
    if (mode !== Mode.OPEN)  return;
    // to do
    // workspace symbol
  }

2018-04-12 2 14 45

@alexandrudima alexandrudima merged commit 6705b91 into microsoft:master Apr 17, 2018

3 checks passed

continuous-integration/appveyor/pr AppVeyor build succeeded
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
license/cla All CLA requirements met.

@alexandrudima alexandrudima added this to the April 2018 milestone Apr 17, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.