Open external files by DND into main panel (#9955)

Drag and dropping files from the file system into the main panel now
opens their respective editors in the electron app. Previously, files
that could not be matched to a navigator tree node were ignored.

Signed-off-by: Alexandra Buzila <abuzila@eclipsesource.com>

Author: AlexandraBuzila

CHANGELOG.md

@@ -5,6 +5,7 @@
 [1.17.0 Milestone](https://github.com/eclipse-theia/theia/milestone/23)
 
 - [core] modified handling of toolbar items for `ViewContainer`s to handle `onDidChange` correctly. [#9798](https://github.com/eclipse-theia/theia/pull/9798)
+- [navigator] added support for opening external files by drag and dropping into the main panel [#9543](https://github.com/eclipse-theia/theia/issues/9543)
 
 <a name="breaking_changes_1.17.0">[Breaking Changes:](#breaking_changes_1.17.0)</a>
 

packages/navigator/src/browser/navigator-widget.tsx

@@ -18,7 +18,7 @@ import { injectable, inject, postConstruct } from '@theia/core/shared/inversify'
 import { Message } from '@theia/core/shared/@phosphor/messaging';
 import URI from '@theia/core/lib/common/uri';
 import { CommandService, SelectionService } from '@theia/core/lib/common';
-import { CorePreferences, Key, TreeModel, SelectableTreeNode } from '@theia/core/lib/browser';
+import { CorePreferences, Key, TreeModel, SelectableTreeNode, OpenerService } from '@theia/core/lib/browser';
 import {
     ContextMenuRenderer, ExpandableTreeNode,
     TreeProps, TreeNode
@@ -45,6 +45,8 @@ export class FileNavigatorWidget extends FileTreeWidget {
     @inject(NavigatorContextKeyService)
     protected readonly contextKeyService: NavigatorContextKeyService;
 
+    @inject(OpenerService) protected readonly openerService: OpenerService;
+
     constructor(
         @inject(TreeProps) readonly props: TreeProps,
         @inject(FileNavigatorModel) readonly model: FileNavigatorModel,
@@ -106,13 +108,20 @@ export class FileNavigatorWidget extends FileTreeWidget {
         const mainPanelNode = this.shell.mainPanel.node;
         this.addEventListener(mainPanelNode, 'drop', async ({ dataTransfer }) => {
             const treeNodes = dataTransfer && this.getSelectedTreeNodesFromData(dataTransfer) || [];
-            treeNodes.filter(FileNode.is).forEach(treeNode => {
-                if (!SelectableTreeNode.isSelected(treeNode)) {
-                    this.model.toggleNode(treeNode);
-                }
-            });
             if (treeNodes.length > 0) {
+                treeNodes.filter(FileNode.is).forEach(treeNode => {
+                    if (!SelectableTreeNode.isSelected(treeNode)) {
+                        this.model.toggleNode(treeNode);
+                    }
+                });
                 this.commandService.executeCommand(FileNavigatorCommands.OPEN.id);
+            } else if (dataTransfer && dataTransfer.files?.length > 0) {
+                // the files were dragged from the outside the workspace
+                Array.from(dataTransfer.files).forEach(async file => {
+                    const fileUri = new URI(file.path);
+                    const opener = await this.openerService.getOpener(fileUri);
+                    opener.open(fileUri);
+                });
             }
         });
         const handler = (e: DragEvent) => {