Font size slider is now working

index.html

@@ -92,8 +92,8 @@
               <!-- Font Size Selection -->
               <div class="space-y-6 w-auto min-w-screen px-4">
                 <div id="font-size-selector" class="flex flex-row space-x-4 rounded-lg">
-                  <label for="default-range" class="text-xs lg:text-sm font-medium text-black w-2/5 lg:w-1/5">Font Size: 22px</label>
+                  <label id="font-size-witness" for="default-range" class="text-xs lg:text-sm font-medium text-black w-2/5 lg:w-1/5">Font Size: 22px</label>
-                  <input id="default-range" type="range" step=1 value="22" class="align-middle w-3/5 lg:w-4/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
+                  <input id="font-size-slider" type="range" step=1 value="22" class="align-middle w-3/5 lg:w-4/5 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
                 </div>
               </div>
               <!-- Font Family Selection -->
@@ -112,22 +112,21 @@
               </div>
               <!-- Information card -->
               <div class="flex lg:flex-row space-y-2 lg:space-y-0 flex-col w-auto min-w-screen px-4 lg:space-x-8 space-x-0">
-                <a class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
+                <a href="https://github.com/Bubobubobubobubo/Topos" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
                   <h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-gray-900 dark:text-white">GitHub</h5>
                   <p class="font-normal text-gray-700 dark:text-gray-400">Get involved in the dev process and or file an issue for a broken feature</p>
                 </a>
-                <a class="block max-w-sm p-6  border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
+                <a href="https://discord.gg/aPgV7mSFZh" class="block max-w-sm p-6  border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-700 hover:bg-gray-700">
                   <h5 class="mb-2 lg:text-2xl text-xl font-bold tracking-tight text-gray-900 dark:text-white">Discord</h5>
                   <p class="font-normal text-gray-700 dark:text-gray-400">Join the community on the official Topos/Sardine Discord Server.</p>
                 </a>
-                <a class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-800 hover:bg-gray-700">
+                <a href="https://topos.raphaelforment.fr" class="block max-w-sm p-6 border border-gray-200 rounded-lg shadow bg-gray-800 border-gray-800 hover:bg-gray-700">
                   <h5 class="mb-2 text-xl lg:text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Website</h5>
                   <p class="font-normal text-gray-700 dark:text-gray-400">Documentation, videos and more on the official website.</p>
                 </a>
               </div>
               <div class="flex space-x-6 border-t border-gray-200 rounded-b dark:border-gray-600 mx-4 border-spacing-y-4">
-                <button data-modal-hide="defaultModal" type="button" class="hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
+                <button id="close-settings-button" data-modal-hide="defaultModal" type="button" class="hover:bg-gray-700 bg-gray-800 mt-4 mb-4 text-white focus:ring-4  font-medium rounded-lg text-sm px-5 py-2.5 text-center">OK</button>
-                <button data-modal-hide="defaultModal" type="button" class="mt-4 mb-4 text-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Cancel</button>
               </div>
 
             </div>

src/main.ts

@@ -30,13 +30,14 @@ export const fontSizeModif = EditorView.theme(
   }
 )
 
-
 export class Editor {
   // Data structures for editor text management
   universes: Universes = template_universes;
   selected_universe: string;
   local_index: number = 1;
   editor_mode: "global" | "local" | "init" = "local";
+  fontSize: Compartment;
+  
 
   settings = new AppSettings();
   editorExtensions: Extension[] = [];
@@ -77,6 +78,9 @@ export class Editor {
   settings_button: HTMLButtonElement = document.getElementById(
     "settings-button"
   ) as HTMLButtonElement;
+  close_settings_button: HTMLButtonElement = document.getElementById(
+    'close-settings-button'
+  ) as HTMLButtonElement;
   universe_viewer: HTMLDivElement = document.getElementById(
     "universe-viewer"
   ) as HTMLDivElement;
@@ -94,6 +98,10 @@ export class Editor {
     "local-script-tabs"
   ) as HTMLDivElement;
 
+  // Font Size Slider
+  font_size_slider: HTMLInputElement = document.getElementById('font-size-slider') as HTMLInputElement;
+  font_size_witness: HTMLSpanElement = document.getElementById('font-size-witness') as HTMLSpanElement;
+
   constructor() {
     // ================================================================================
     // Loading the universe from local storage
@@ -120,10 +128,14 @@ export class Editor {
     // CodeMirror Management
     // ================================================================================
 
-    this.userPlugins = this.settings.vimMode ? [] : [vim()];
+    this.fontSize = new Compartment();
+    const vimPlugin = this.settings.vimMode ? vim() : [];
+    this.userPlugins = [
+      vimPlugin,
+    ];
 
     this.editorExtensions = [
-      fontSizeModif,
+      this.fontSize.of(fontSizeModif),
       editorSetup,
 			oneDark,
       rangeHighlighting(),
@@ -301,6 +313,29 @@ export class Editor {
       editor?.classList.add('invisible')
     })
 
+    this.close_settings_button.addEventListener("click", () => {
+      let modal_settings = document.getElementById('modal-settings');
+      let editor = document.getElementById('editor');
+      modal_settings?.classList.add('invisible')
+      editor?.classList.remove('invisible')
+    })
+
+    this.font_size_slider.addEventListener("input", () => {
+      const new_value = this.font_size_slider.value;
+      // Change the font-size-witness font size to value
+      this.font_size_witness.style.fontSize = `${new_value}px`;
+      this.font_size_witness.innerHTML = `Font Size: ${new_value}px`;
+      let new_font_size = EditorView.theme({
+        "&": { fontSize : new_value + "px", },
+        ".cm-gutters": { fontSize : new_value + "px", },
+      });
+      this.view.dispatch({
+        effects: this.fontSize.reconfigure(new_font_size)
+      });
+
+      console.log(this.font_size_slider.value);
+    })
+
     this.buffer_search.addEventListener("keydown", (event) => {
       this.changeModeFromInterface("local");
       if (event.key === "Enter") {