close file

Author: hatemhosny

src/livecodes/UI/create-language-menus.ts

@@ -178,20 +178,24 @@ export const createMultiFileEditorTab = ({
   addFile,
   renameFile,
   deleteFile,
+  closeFile,
   isMainFile,
   isNewFile = false,
   isHidden = false,
   isLocked = false,
+  isFilesSectionEnabled = false,
 }: {
   title: string;
   showEditor: (filename: string) => void;
   addFile?: (filename: string) => Promise<boolean>;
   renameFile: (filename: string, newName: string) => boolean;
   deleteFile: (filename: string) => void;
+  closeFile: (filename: string) => void;
   isMainFile: boolean;
   isNewFile: boolean;
   isHidden?: boolean;
   isLocked?: boolean;
+  isFilesSectionEnabled?: boolean;
 }) => {
   let currentFileName = title;
   if (getEditorTab(currentFileName)) return;
@@ -231,11 +235,21 @@ export const createMultiFileEditorTab = ({
     label.appendChild(fileNameSpan);
   }
 
-  if (!isMainFile && !isLocked) {
+  if (isFilesSectionEnabled) {
+    const closeButton = document.createElement('button');
+    closeButton.classList.add('delete-file-button');
+    closeButton.innerHTML = deleteIcon;
+    closeButton.addEventListener('click', (ev) => {
+      ev.stopPropagation();
+      closeFile(currentFileName);
+    });
+    editorSelector.appendChild(closeButton);
+  } else if (!isMainFile && !isLocked) {
     const deleteButton = document.createElement('button');
     deleteButton.classList.add('delete-file-button');
     deleteButton.innerHTML = deleteIcon;
-    deleteButton.addEventListener('click', () => {
+    deleteButton.addEventListener('click', (ev) => {
+      ev.stopPropagation();
       if (
         confirm(
           window.deps.translateString('core.files.deleteFile', 'Delete: {{path}}?', {

src/livecodes/config/default-config.ts

@@ -51,7 +51,6 @@ export const defaultConfig: Config = {
     content: '',
   },
   sidebar: {
-    files: {},
     enabled: 'all',
     active: '',
     status: '',

src/livecodes/core.ts

@@ -596,10 +596,38 @@ const openFile = async (
   });
   editorLanguages![filename] = language;
   editors[filename] = editor;
-  editorIds.push(filename);
+  if (!editorIds.includes(filename)) {
+    editorIds.push(filename);
+  }
   handleChangeContent(editor);
 };
 
+const closeFile = (filename: string) => {
+  if (editorLanguages && editorLanguages[filename]) {
+    delete editorLanguages[filename];
+  }
+  if (editors[filename]) {
+    editors[filename].destroy();
+    delete editors[filename];
+  }
+  const id = editorIds.findIndex((editorId) => editorId === filename);
+  if (id > -1) {
+    if (editorIds.length > 1) {
+      const editorIdToShow = id === 0 ? 1 : id - 1;
+      showEditor(editorIds[editorIdToShow]);
+    }
+    editorIds.splice(id, 1);
+  }
+  UI.getEditorDivs().forEach((editorDiv) => {
+    if (editorDiv.dataset.editorId === filename) {
+      editorDiv.remove();
+    }
+  });
+  UI.getEditorTab(filename)?.remove();
+  setSavedStatus();
+  dispatchChangeEvent();
+};
+
 const renameFile = (filename: string, newName: string) => {
   const config = getConfig();
   const validName = checkFileName(newName, config, filename);
@@ -660,30 +688,10 @@ const deleteFile = (filename: string) => {
     ...config,
     files: config.files.filter((f) => f.filename !== filename),
   });
-  if (editorLanguages && editorLanguages[filename]) {
-    delete editorLanguages[filename];
-  }
-  if (editors[filename]) {
-    editors[filename].destroy();
-    delete editors[filename];
-  }
-  const id = editorIds.findIndex((editorId) => editorId === filename);
-  if (id > -1) {
-    const editorIdToShow = id === 0 ? 1 : id - 1;
-    showEditor(editorIds[editorIdToShow]);
-    editorIds.splice(id, 1);
-  }
-  UI.getEditorDivs().forEach((editorDiv) => {
-    if (editorDiv.dataset.editorId === filename) {
-      editorDiv.remove();
-    }
-  });
-  UI.getEditorTab(filename)?.remove();
+  closeFile(filename);
   if (config.autoupdate) {
     run();
   }
-  setSavedStatus();
-  dispatchChangeEvent();
   if (sidebar?.files) {
     const newConfig = getConfig();
     sidebar?.files?.update({
@@ -709,10 +717,12 @@ const createEditorUI = (title: string, isHidden = false) => {
     showEditor,
     renameFile,
     deleteFile,
+    closeFile,
     isMainFile: title === getMainFile(config),
     isNewFile: false,
     isHidden,
     isLocked: config.lockFiles || config.readonly,
+    isFilesSectionEnabled: sidebar?.isEnabled('files'),
   });
   return container;
 };
@@ -840,9 +850,11 @@ const createEditors = async (config: Config) => {
             addFile: async (filename: string) => addFile(filename),
             renameFile,
             deleteFile,
+            closeFile,
             isMainFile: false,
             isNewFile: true,
             isLocked: false,
+            isFilesSectionEnabled: sidebar?.isEnabled('files'),
           }),
       });
     }
@@ -1048,9 +1060,8 @@ const showEditor = (
   { isUpdate = false, source }: { isUpdate?: boolean; source?: 'sidebar-files' } = {},
 ) => {
   const config = getConfig();
-
   if (getSource(editorId, config)?.hidden) return;
-  if (!editors[editorId]) {
+  if (!editorIds.includes(editorId)) {
     if (config.files.find((f) => f.filename === editorId)) {
       openFile(editorId, getEditorOptions(editorId)).then(() => showEditor(editorId));
     }

src/livecodes/result/multi-file-result-page.ts

@@ -313,7 +313,6 @@ export const createMultiFileResultPage = async ({
         } catch (e) {
           // invalid sourceMap
         }
-        console.log(sourceMapObj);
         const sourceMappingURL = `data:application/json;base64,${btoa(JSON.stringify(sourceMapObj))}`;
         const supportsSourceUrl = consoleEnabled && hasValidSourceMap;
         file.compiled = supportsSourceUrl