From dc885c6ffa9ff7e775b9d0e0e91f13e404777e4d Mon Sep 17 00:00:00 2001
From: ProfBramble <1207107376@qq.com>
Date: Wed, 4 Aug 2021 11:00:36 +0800
Subject: [PATCH] feat: add story of open any file on disk

---
 src/model/workbench/menuBar.ts    |  7 ++--
 stories/extensions/test/index.tsx | 54 ++++++++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/model/workbench/menuBar.ts b/src/model/workbench/menuBar.ts
index 5550ee594..12d027b70 100644
--- a/src/model/workbench/menuBar.ts
+++ b/src/model/workbench/menuBar.ts
@@ -8,6 +8,7 @@ import {
     ACTION_QUICK_REDO,
     ACTION_QUICK_CREATE_FILE,
 } from 'mo/model/keybinding';
+
 /**
  * The activity bar event definition
  */
@@ -30,11 +31,7 @@ export interface IMenuBar {
     data?: IMenuBarItem[];
 }
 
-/**
- * menu preset action
- */
-export const MENU_FILE_CREATE = 'newFile';
-export const MENU_FILE_OPEN = 'openFile'; // default encoding with utf-8 ?
+export const MENU_FILE_OPEN = 'openFile';
 
 export const MENU_QUICK_COMMAND = 'editor.action.quickCommand';
 
diff --git a/stories/extensions/test/index.tsx b/stories/extensions/test/index.tsx
index 9dcbaa52a..084d8cb6b 100644
--- a/stories/extensions/test/index.tsx
+++ b/stories/extensions/test/index.tsx
@@ -6,6 +6,7 @@ import {
     MENU_VIEW_STATUSBAR,
 } from 'mo/model/workbench/menuBar';
 import { FileTypes, IExtension, TreeNodeModel } from 'mo/model';
+import { MENU_FILE_OPEN } from 'mo/model/workbench/menuBar';
 
 import TestPane from './testPane';
 import { Entry } from './entry';
@@ -85,6 +86,58 @@ export const ExtendTestPane: IExtension = {
             }
         });
 
+        molecule.menuBar.onSelect((menuId: string) => {
+            const openFile = () => {
+                const input = document.createElement('input');
+                const getFile = (event: Event) => {
+                    const input = event.target as HTMLInputElement;
+                    const file = (input.files?.[0] || {
+                        arrayBuffer: Promise.resolve(null),
+                    }) as File;
+
+                    document.removeEventListener('click', getFile);
+                    document.getElementById('upload')?.remove();
+                    if (!file) return;
+                    file.arrayBuffer().then((res) => {
+                        if (!res) return;
+
+                        const decoder = new TextDecoder();
+                        const nameArr = file.name?.split('.') || [];
+                        const extName = nameArr[nameArr.length - 1] || '';
+                        /**
+                         * TODO: Also need to deal with the display of static resources such as pictures
+                         */
+                        const contentFile = {
+                            data: {
+                                value: decoder.decode(res),
+                                language: extName,
+                            },
+                            fileType: 'File',
+                            icon: 'file-code',
+                            id: file.lastModified.toString(),
+                            location: `molecule/${file.name}`,
+                            name: file.name,
+                        };
+
+                        molecule.editor.open(contentFile);
+                    });
+                };
+
+                input.type = 'file';
+                input.id = 'upload';
+                input.hidden = true;
+                input.addEventListener('change', getFile);
+                document.body.append(input);
+                input.click();
+            };
+
+            switch (menuId) {
+                case MENU_FILE_OPEN:
+                    openFile();
+                    break;
+            }
+        });
+
         molecule.folderTree.onCreate((type, nodeId) => {
             if (type === 'RootFolder') {
                 molecule.folderTree.add(
@@ -110,7 +163,6 @@ export const ExtendTestPane: IExtension = {
                 );
             }
         });
-
         molecule.search.onSearch((value) => {
             const children = new Array(5).fill(1).map((_, index) => ({
                 key: index.toFixed(),