From 3bed2f11d3258b1f80aa3a365a4da4db9fb6a307 Mon Sep 17 00:00:00 2001
From: dimaslz <me@dimaslz.io>
Date: Tue, 23 Nov 2021 22:11:13 +0100
Subject: [PATCH] feat: add possibility to write the filename per editor

---
 components/Editor.vue  | 15 +++++++++++++--
 components/Page.vue    |  7 +++++++
 components/Preview.vue |  2 ++
 components/Window.vue  |  2 ++
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/components/Editor.vue b/components/Editor.vue
index acca1d87..0ef48193 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="overflow-hidden">
-        <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"
@@ -90,6 +90,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="w-full h-full"></div>
     </div>
 </template>
@@ -114,6 +124,7 @@ export default {
         value: String,
         theme: String,
         tabSize: [String, Number],
+        filename: String,
         language: String,
         options: Object,
         landscape: Boolean,
diff --git a/components/Page.vue b/components/Page.vue
index e1ac94c2..96be3967 100644
--- a/components/Page.vue
+++ b/components/Page.vue
@@ -21,6 +21,7 @@
                 :key="editor.id"
                 :tab-size="editor.tabSize"
                 :language="editor.language"
+                :filename="editor.filename"
                 :landscape="isLandscape"
                 :can-move-up="index !== 0"
                 :can-move-down="index !== editors.length - 1"
@@ -33,11 +34,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"
@@ -129,6 +132,10 @@ export default {
             }));
         },
 
+        filenames() {
+            return this.editors.map(({ filename }) => filename);
+        },
+
         canRemoveEditor() {
             return this.editors.length > 1;
         },
diff --git a/components/Preview.vue b/components/Preview.vue
index a4ceeb50..e9efb96e 100644
--- a/components/Preview.vue
+++ b/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,
diff --git a/components/Window.vue b/components/Window.vue
index db08f74f..de3cd021 100644
--- a/components/Window.vue
+++ b/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,