feat: add possibility to write the filename per editor

Author: dimaslz

components/Editor.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div ref="toolbar" class="flex items-center justify-between h-10 p-1 bg-white border-b">
-            <div>
+        <div ref="toolbar" class="flex items-center justify-between h-10 p-1 bg-white">
+            <div class="flex flex-row">
                 <select
                     name="language"
                     :value="language"
@@ -98,6 +98,16 @@
             </div>
         </div>
 
+        <div class="flex w-full px-1 pb-1 border-b">
+            <input
+                type="text"
+                :value="filename"
+                @input="(event) => $emit('filename-change', event.target.value)"
+                class="block w-full py-1 pl-3 pr-10 text-base border-gray-300 focus:outline-none rounded-lg focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="filename"
+            />
+        </div>
+
         <div
             ref="monaco"
             class="min-w-full"
@@ -129,6 +139,7 @@ export default {
         value: String,
         theme: String,
         tabSize: [String, Number],
+        filename: String,
         language: String,
         height: Number,
         availbleHeight: Number,

components/Page.vue

@@ -22,6 +22,7 @@
                 :key="editor.id"
                 :tab-size="editor.tabSize"
                 :language="editor.language"
+                :filename="editor.filename"
                 :width="isLandscape ? editorWidth : editorWidth / editors.length"
                 :height="isPortrait ? editorHeight : editorHeight / editors.length"
                 :landscape="isLandscape"
@@ -36,11 +37,13 @@
                 @update:layout="toggleLayout"
                 @update:tab-size="(size) => (editors[index].tabSize = size)"
                 @update:language="(lang) => (editors[index].language = lang)"
+                @filename-change="(filename) => (editors[index].filename = filename)"
             />
         </div>
 
         <Preview
             :tab="tab"
+            :filenames="filenames"
             :code="code"
             :languages="languages"
             class="flex flex-col justify-between w-full h-full overflow-scroll"
@@ -136,6 +139,10 @@ export default {
             }));
         },
 
+        filenames() {
+            return this.editors.map(({ filename }) => filename);
+        },
+
         canRemoveEditor() {
             return this.editors.length > 1;
         },

components/Preview.vue

@@ -83,6 +83,7 @@
                             ref="preview"
                             class="z-10"
                             :blocks="blocks"
+                            :filenames="filenames"
                             :font-size="settings.fontSize"
                             :line-height="settings.lineHeight"
                             :background="settings.background"
@@ -290,6 +291,7 @@ const DEFAULT_WIDTH = 450;
 
 export default {
     props: {
+        filenames: Array,
         tab: Object,
         code: Array,
         languages: Array,

components/Window.vue

@@ -37,6 +37,7 @@
         </div>
 
         <div v-for="(lines, index) in blocks" :key="index" :style="{ padding: `${padding}px` }">
+            <div class="text-sm mb-2 text-gray-400 w-full text-right">{{ filenames[index] }}</div>
             <Code
                 class="relative"
                 :lines="lines"
@@ -54,6 +55,7 @@ import FauxMenu from './FauxMenu';
 export default {
     props: {
         blocks: Array,
+        filenames: Array,
         fontSize: [String, Number],
         lineHeight: [String, Number],
         background: String,