How to put text editor into custom editor

[wss]

Hi,
A custom file can open in theia with a text editor. If I create a custom open handler for this custom file, theia will open it with my custom editor
1.default text editor

2. now I want to create a custom editor which contains the default text editor. As you can see in the following image when I click the script tab I can edit the file text when I click the property tab I can change to another view in my custom editor

I have no idea about put default text editor into my custom editor. who can give some idea?

[msujew]

Hey @wss,

you should be able to reuse our own MonacoEditor. It accepts a HTMLElement as a container, where it will render itself into. That should behave just as the normal monaco editor from the normal editor widget.

[wss]

Hi,
I look at the output widget which wraps MonacoEditor and write myself. code as follow
export const RobotFileEditorOptions = Symbol(‘RobotFileEditorOptions’);
export interface RobotFileEditorOptions {
uri: string;
}

@injectable()
export class RobotFileEditor extends BaseWidget {
static ID = ‘robot-file-editor’;
@inject(RobotFileEditorOptions) protected readonly options: RobotFileEditorOptions;
@inject(SelectionService) protected readonly selectionService: SelectionService;
@inject(MonacoEditorProvider) protected readonly editorProvider: MonacoEditorProvider;
protected readonly editorContainer: DockPanel;
protected _input: MonacoEditor;

constructor() {
    super();
    this.addClass('theia-output');
    this.editorContainer = new DockPanel({ spacing: 0, mode: 'single-document' });
    this.editorContainer.addClass('editor-container');
    this.editorContainer.node.tabIndex = -1;
}

@postConstruct()
protected init(): void {
    this.doInit();
}

protected async doInit(): Promise<void> {
    this.id = RobotFileEditor.ID + ':' + this.options.uri;
    this.title.closable = true;
    const label = this.uri.path.base;
    this.title.label = label;
    this.title.caption = label;

    const widget = await this.createEditorWidget();
    this.editorContainer.addWidget(widget);
    this.update();
}

private async createEditorWidget(): Promise<EditorWidget> {
    const editor = await this.editorProvider.get(this.uri);
    return new EditorWidget(editor, this.selectionService);
}

protected override onAfterAttach(message: Message): void {
    super.onAfterAttach(message);
    Widget.attach(this.editorContainer, this.node);
    this.toDisposeOnDetach.push(Disposable.create(() => Widget.detach(this.editorContainer)));
}

protected get uri(): URI {
    return new URI(this.options.uri);
}

}

everything is ok except that, the editor width and height are only 100px, I look at the code and do not find the place, and I did not see any setting in the output widget

[wss]

I find the problem
need add this code