Custom widget implements ReactWidget，how to save the file?

hyy · 21 April 2021 09:16

custom editor widget implements ReactWidget.
when file close，how to save the file?
or how to implements SaveableSource?

vince-fugnitto · 22 April 2021 01:35

@hyy thank you for the question, your custom widget should implement SaveableSource as you pointed out:

You can look at the implementations of EditorWidget and CustomEditorWidget for inspiration as they both implement SaveableSource:

github.com

eclipse-theia/theia/blob/7d3b1d3b33cb565ec07965e5baf10c926006cdfd/packages/editor/src/browser/editor-widget.ts#L22


* https://www.gnu.org/software/classpath/license.html.
*
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import { Disposable, SelectionService, Event } from '@theia/core/lib/common';
import { Widget, BaseWidget, Message, Saveable, SaveableSource, Navigatable, StatefulWidget } from '@theia/core/lib/browser';
import URI from '@theia/core/lib/common/uri';
import { TextEditor } from './editor';

export class EditorWidget extends BaseWidget implements SaveableSource, Navigatable, StatefulWidget {

   constructor(
       readonly editor: TextEditor,
       protected readonly selectionService: SelectionService
   ) {
       super(editor);
       this.addClass('theia-editor');
       this.toDispose.push(this.editor);
       this.toDispose.push(this.editor.onSelectionChanged(() => this.setSelection()));
       this.toDispose.push(this.editor.onFocusChanged(() => this.setSelection()));

github.com

eclipse-theia/theia/blob/7d3b1d3b33cb565ec07965e5baf10c926006cdfd/packages/plugin-ext/src/main/browser/custom-editors/custom-editor-widget.ts#L27


import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
import URI from '@theia/core/lib/common/uri';
import { FileOperation } from '@theia/filesystem/lib/common/files';
import { NavigatableWidget, Saveable, SaveableSource, SaveOptions } from '@theia/core/lib/browser';
import { Reference } from '@theia/core/lib/common/reference';
import { WebviewWidget } from '../webview/webview';
import { UndoRedoService } from './undo-redo-service';
import { CustomEditorModel } from './custom-editors-main';

@injectable()
export class CustomEditorWidget extends WebviewWidget implements SaveableSource, NavigatableWidget {
    static FACTORY_ID = 'plugin-custom-editor';

    id: string;
    resource: URI;

    protected _modelRef: Reference<CustomEditorModel>;
    get modelRef(): Reference<CustomEditorModel> {
        return this._modelRef;
    }
    set modelRef(modelRef: Reference<CustomEditorModel>) {

hyy · 22 April 2021 01:35

@vince-fugnitto, Thank you for your help! The problem is resolved.