More flexible editor and editor preview handling

Author: Colin Grant

packages/core/src/browser/shell/application-shell.ts

@@ -795,36 +795,13 @@ export class ApplicationShell extends Widget {
      *
      * Widgets added to the top area are not tracked regarding the _current_ and _active_ states.
      */
-    async addWidget(widget: Widget, options: Readonly<ApplicationShell.WidgetOptions> = {}): Promise<void> {
+    async addWidget(widget: Widget, options?: Readonly<ApplicationShell.WidgetOptions>): Promise<void> {
         if (!widget.id) {
             console.error('Widgets added to the application shell must have a unique id property.');
             return;
         }
-        let ref: Widget | undefined = options.ref;
-        let area: ApplicationShell.Area = options.area || 'main';
-        if (!ref && (area === 'main' || area === 'bottom')) {
-            const tabBar = this.getTabBarFor(area);
-            ref = tabBar && tabBar.currentTitle && tabBar.currentTitle.owner || undefined;
-        }
-        // make sure that ref belongs to area
-        area = ref && this.getAreaFor(ref) || area;
-        const addOptions: DockPanel.IAddOptions = {};
-        if (ApplicationShell.isOpenToSideMode(options.mode)) {
-            const areaPanel = area === 'main' ? this.mainPanel : area === 'bottom' ? this.bottomPanel : undefined;
-            const sideRef = areaPanel && ref && (options.mode === 'open-to-left' ?
-                areaPanel.previousTabBarWidget(ref) :
-                areaPanel.nextTabBarWidget(ref));
-            if (sideRef) {
-                addOptions.ref = sideRef;
-            } else {
-                addOptions.ref = ref;
-                addOptions.mode = options.mode === 'open-to-left' ? 'split-left' : 'split-right';
-            }
-        } else {
-            addOptions.ref = ref;
-            addOptions.mode = options.mode;
-        }
-        const sidePanelOptions: SidePanel.WidgetOptions = { rank: options.rank };
+        const { area, addOptions } = this.getInsertionOptions(options);
+        const sidePanelOptions: SidePanel.WidgetOptions = { rank: options?.rank };
         switch (area) {
             case 'main':
                 this.mainPanel.addWidget(widget, addOptions);
@@ -842,13 +819,41 @@ export class ApplicationShell extends Widget {
                 this.rightPanelHandler.addWidget(widget, sidePanelOptions);
                 break;
             default:
-                throw new Error('Unexpected area: ' + options.area);
+                throw new Error('Unexpected area: ' + options?.area);
         }
         if (area !== 'top') {
             this.track(widget);
         }
     }
 
+    getInsertionOptions(options?: Readonly<ApplicationShell.WidgetOptions>): { area: string; addOptions: DockLayout.IAddOptions; } {
+        let ref: Widget | undefined = options?.ref;
+        let area: ApplicationShell.Area = options?.area || 'main';
+        if (!ref && (area === 'main' || area === 'bottom')) {
+            const tabBar = this.getTabBarFor(area);
+            ref = tabBar && tabBar.currentTitle && tabBar.currentTitle.owner || undefined;
+        }
+        // make sure that ref belongs to area
+        area = ref && this.getAreaFor(ref) || area;
+        const addOptions: DockPanel.IAddOptions = {};
+        if (ApplicationShell.isOpenToSideMode(options?.mode)) {
+            const areaPanel = area === 'main' ? this.mainPanel : area === 'bottom' ? this.bottomPanel : undefined;
+            const sideRef = areaPanel && ref && (options?.mode === 'open-to-left' ?
+                areaPanel.previousTabBarWidget(ref) :
+                areaPanel.nextTabBarWidget(ref));
+            if (sideRef) {
+                addOptions.ref = sideRef;
+            } else {
+                addOptions.ref = ref;
+                addOptions.mode = options?.mode === 'open-to-left' ? 'split-left' : 'split-right';
+            }
+        } else {
+            addOptions.ref = ref;
+            addOptions.mode = options?.mode;
+        }
+        return { area, addOptions };
+    }
+
     /**
      * The widgets contained in the given shell area.
      */

packages/editor-preview/src/browser/editor-preview-manager.ts

@@ -17,7 +17,7 @@
 import { EditorManager, EditorOpenerOptions, EditorWidget } from '@theia/editor/lib/browser';
 import { inject, injectable, postConstruct } from '@theia/core/shared/inversify';
 import { EditorPreviewPreferences } from './editor-preview-preferences';
-import { DisposableCollection, MaybePromise } from '@theia/core/lib/common';
+import { MaybePromise } from '@theia/core/lib/common';
 import URI from '@theia/core/lib/common/uri';
 import { EditorPreviewWidgetFactory, EditorPreviewOptions } from './editor-preview-widget-factory';
 import { EditorPreviewWidget } from './editor-preview-widget';
@@ -30,8 +30,6 @@ export class EditorPreviewManager extends EditorManager {
     @inject(EditorPreviewPreferences) protected readonly preferences: EditorPreviewPreferences;
     @inject(FrontendApplicationStateService) protected readonly stateService: FrontendApplicationStateService;
 
-    protected currentPreview: EditorPreviewWidget | undefined;
-    protected toDisposeOnPreviewChange = new DisposableCollection();
     /**
      * Until the layout has been restored, widget state is not reliable, so we ignore creation events.
      */
@@ -44,17 +42,19 @@ export class EditorPreviewManager extends EditorManager {
         this.onCreated((widget: EditorPreviewWidget) => {
             if (this.layoutIsSet && widget.isPreview) {
                 const oneTimeDisposable = widget.onDidChangeVisibility(() => {
-                    const { currentPreview } = this;
                     this.handleNewPreview(widget);
-                    currentPreview?.dispose();
                     oneTimeDisposable.dispose();
                 });
             }
         });
 
         this.preferences.onPreferenceChanged(change => {
             if (!change.newValue) {
-                this.currentPreview?.convertToNonPreview();
+                this.all.forEach((editor: EditorPreviewWidget) => {
+                    if (editor.isPreview) {
+                        editor.convertToNonPreview();
+                    }
+                });
             };
         });
 
@@ -73,13 +73,8 @@ export class EditorPreviewManager extends EditorManager {
     protected override async doOpen(widget: EditorPreviewWidget, options?: EditorOpenerOptions): Promise<void> {
         const { preview, widgetOptions = { area: 'main' }, mode = 'activate' } = options ?? {};
         if (!widget.isAttached) {
-            if (preview) {
-                const insertionOptions = this.currentPreview ? { ref: this.currentPreview } : widgetOptions;
-                await this.shell.addWidget(widget, insertionOptions);
-            } else {
-                this.shell.addWidget(widget, widgetOptions);
-            }
-        } else if (!preview && widget === this.currentPreview) {
+            this.shell.addWidget(widget, widgetOptions);
+        } else if (!preview && widget.isPreview) {
             widget.convertToNonPreview();
         }
 
@@ -90,12 +85,17 @@ export class EditorPreviewManager extends EditorManager {
         }
     }
 
-    protected handleNewPreview(widget: EditorPreviewWidget): void {
-        this.toDisposeOnPreviewChange.dispose();
-        this.currentPreview = widget;
-        this.toDisposeOnPreviewChange.push({ dispose: () => this.currentPreview = undefined });
-        this.toDisposeOnPreviewChange.push(widget.onDidChangePreviewState(() => this.toDisposeOnPreviewChange.dispose()));
-        this.toDisposeOnPreviewChange.push(widget.onDidDispose(() => this.toDisposeOnPreviewChange.dispose()));
+    protected handleNewPreview(newPreviewWidget: EditorPreviewWidget): void {
+        if (newPreviewWidget.isPreview) {
+            const tabbar = this.shell.getTabBarFor(newPreviewWidget);
+            if (tabbar) {
+                for (const title of tabbar.titles) {
+                    if (title.owner !== newPreviewWidget && title.owner instanceof EditorPreviewWidget && title.owner.isPreview) {
+                        title.owner.dispose();
+                    }
+                }
+            }
+        }
     }
 
     protected override tryGetPendingWidget(uri: URI, options?: EditorOpenerOptions): MaybePromise<EditorWidget> | undefined {
@@ -118,8 +118,8 @@ export class EditorPreviewManager extends EditorManager {
 
     protected convertEditorOnDoubleClick(event: Event): void {
         const widget = this.shell.findTargetedWidget(event);
-        if (widget === this.currentPreview) {
-            this.currentPreview?.convertToNonPreview();
+        if (widget instanceof EditorPreviewWidget && widget.isPreview) {
+            widget.convertToNonPreview();
         }
     }
 }

packages/editor/src/browser/editor-manager.ts

@@ -185,20 +185,28 @@ export class EditorManager extends NavigatableWidgetOpenHandler<EditorWidget> {
         return 100;
     }
 
-    // This override only serves to inform external callers that they can use EditorOpenerOptions.
     override open(uri: URI, options?: EditorOpenerOptions): Promise<EditorWidget> {
-
-        /* check whether we have a split request without a counter */
-        if (options && options.counter === undefined && options.widgetOptions?.mode) {
-            switch (options.widgetOptions.mode) {
-                case 'split-right':
-                case 'split-bottom':
-                case 'split-top':
-                case 'split-left':
-                    const counter = this.createCounterForUri(uri);
-                    const splitOptions: EditorOpenerOptions = { counter, ...options };
-                    return super.open(uri, splitOptions);
+        if (options?.counter === undefined) {
+            const insertionOptions = this.shell.getInsertionOptions(options?.widgetOptions);
+            // Definitely creating a new tabbar - no widget can match.
+            if (insertionOptions.addOptions.mode?.startsWith('split')) {
+                return super.open(uri, { counter: this.createCounterForUri(uri), ...options });
+            }
+            // Check the target tabbar for an existing widget.
+            const tabbar = insertionOptions.addOptions.ref && this.shell.getTabBarFor(insertionOptions.addOptions.ref);
+            if (tabbar) {
+                const currentUri = uri.toString();
+                for (const title of tabbar.titles) {
+                    if (title.owner instanceof EditorWidget) {
+                        const { uri: otherWidgetUri, id } = this.extractIdFromWidget(title.owner);
+                        if (otherWidgetUri === currentUri) {
+                            return super.open(uri, { counter: id, ...options });
+                        }
+                    }
+                }
             }
+            // Open a new widget.
+            return super.open(uri, { counter: this.createCounterForUri(uri), ...options });
         }
 
         return super.open(uri, options);

packages/plugin-ext/src/main/browser/documents-main.ts

@@ -251,12 +251,19 @@ export class DocumentsMainImpl implements DocumentsMain, Disposable {
         if (viewColumn === undefined || viewColumn === -1) {
             /* active group -> skip (default behaviour) */
             widgetOptions = undefined;
-        } else if (viewColumn > 0) {
+        } else if (viewColumn > 0 && shell.mainAreaTabBars.length > 0) {
             const tabBars = shell.mainAreaTabBars;
-            // convert to zero-based index
-            const tabBar = tabBars[viewColumn - 1];
-            if (tabBar && tabBar.currentTitle) {
-                widgetOptions = { ref: tabBar.currentTitle.owner };
+            if (viewColumn <= tabBars.length) {
+                // convert to zero-based index
+                const tabBar = tabBars[viewColumn - 1];
+                if (tabBar?.currentTitle) {
+                    widgetOptions = { ref: tabBar.currentTitle.owner };
+                }
+            } else {
+                const tabBar = tabBars[tabBars.length - 1];
+                if (tabBar?.currentTitle) {
+                    widgetOptions!.ref = tabBar.currentTitle.owner;
+                }
             }
         }
         return {