From fd20db2dc8779a440928a2fbe1b1098a2f2ce281 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Sat, 29 Jul 2023 10:30:46 +0200
Subject: [PATCH] Font Size

---
 index.html         |   8 ++-
 package.json       |   1 +
 src/EditorSetup.ts | 121 ++++++++++++++++++++-------------------------
 src/main.ts        |  11 +++++
 yarn.lock          |  10 ++++
 5 files changed, 81 insertions(+), 70 deletions(-)

diff --git a/index.html b/index.html
index 98040ff..ad53ade 100644
--- a/index.html
+++ b/index.html
@@ -64,6 +64,7 @@
 
     <div id="app">
 
+      <!-- This modal is used for switching between buffers -->
       <div id="modal-buffers" class="invisible bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
         <div id="start-button" class="px-16 py-14 rounded-md text-center">
           <div id="disclaimer" class="pb-4">
@@ -83,6 +84,7 @@
           </div>
       </div>
 
+      <!-- This modal pops up when the page is first loaded and then disappears forever -->
       <div id="modal-container" class="motion-safe:animate-pulse flex min-h-screen flex flex-col">
       <div id="modal" class="bg-neutral-900 bg-opacity-50 flex justify-center items-center absolute top-0 right-0 bottom-0 left-0">
         <div id="start-button" class="bg-white px-16 py-14 rounded-md text-center">
@@ -94,7 +96,6 @@
 					<a href="https://google.fr">About</a>
 				 </div>
          <div id="disclaimer" class="pb-4">
-
           <p>This is Topos, an experimental live coding platform.</p>
           <p>Switch to the <b>Help</b> (<b>Ctrl+b</b>) universe for a tutorial!</p>
           <p>Have fun, press <b>Enter/Space</b> to get started!</p>
@@ -152,13 +153,15 @@
               </svg>
             </a>
 
-            <a id="settings-button" class="p-2 text-gray-700 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:bg-gray-800 bg-gray-100">
+            <a id="settings-button" data-modal-show="settingsModal" class="p-2 text-gray-700 ml-1 absolute bottom-2 focus:outline-nones transition-colors duration-200 rounded-lg dark:text-gray-200 dark:bg-gray-800 bg-gray-100">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
               <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
               </svg>
             </a>
         </aside>
+
+        <!-- Tabs for local files -->
         <div class="min-w-screen flex grow flex-col">
           <ul id="local-script-tabs" class="text-xl flex text-sm font-medium text-center text-white dark:text-white bg-neutral-900 space-x-2 lg:space-x-8">
             <li class="pl-5">
@@ -190,6 +193,7 @@
             </li>
  
          </ul>
+         <!-- Here comes the editor itself -->
           <div id="editor" class="invisible relative flex flex-row flex-grow w-100 overflow-hidden overflow-y-hidden">
         </div>
         </div>
diff --git a/package.json b/package.json
index 1c8b410..5202ab7 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.1.9",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@replit/codemirror-vim": "^6.0.14",
     "autoprefixer": "^10.4.14",
     "codemirror": "^6.0.1",
diff --git a/src/EditorSetup.ts b/src/EditorSetup.ts
index 30855ed..ab1b6d6 100644
--- a/src/EditorSetup.ts
+++ b/src/EditorSetup.ts
@@ -1,46 +1,32 @@
-import { javascript } from "@codemirror/lang-javascript"
+import { javascript } from "@codemirror/lang-javascript";
 import {
-    keymap, 
-    highlightSpecialChars, 
-    drawSelection, 
-    highlightActiveLine, 
-    dropCursor,
-    rectangularSelection, 
-    lineNumbers,
-    crosshairCursor,
-    highlightActiveLineGutter
-} from "@codemirror/view"
+  keymap,
+  highlightSpecialChars,
+  drawSelection,
+  highlightActiveLine,
+  dropCursor,
+  rectangularSelection,
+  lineNumbers,
+  crosshairCursor,
+  highlightActiveLineGutter,
+} from "@codemirror/view";
+import { Extension, EditorState } from "@codemirror/state";
 import {
-    Extension, 
-    EditorState
-} from "@codemirror/state"
+  defaultHighlightStyle,
+  syntaxHighlighting,
+  indentOnInput,
+  bracketMatching,
+  foldKeymap,
+} from "@codemirror/language";
+import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
+import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
 import {
-    defaultHighlightStyle, 
-    syntaxHighlighting, 
-    indentOnInput, 
-    bracketMatching,
-    foldKeymap
-} from "@codemirror/language"
-import {
-    defaultKeymap, 
-    historyKeymap,
-    history,
-} from "@codemirror/commands"
-import {
-    searchKeymap, 
-    highlightSelectionMatches
-} from "@codemirror/search"
-import {
-    autocompletion, 
-    completionKeymap, 
-    closeBrackets, 
-    closeBracketsKeymap
-} from "@codemirror/autocomplete"
-import {
-    lintKeymap
-} from "@codemirror/lint"
-
-import { materialDark } from "./themes/materialDark"
+  autocompletion,
+  completionKeymap,
+  closeBrackets,
+  closeBracketsKeymap,
+} from "@codemirror/autocomplete";
+import { lintKeymap } from "@codemirror/lint";
 
 // (The superfluous function calls around the list of extensions work
 // around current limitations in tree-shaking software.)
@@ -82,31 +68,30 @@ import { materialDark } from "./themes/materialDark"
 /// as desired.
 
 export const editorSetup: Extension = (() => [
-    materialDark,
-    lineNumbers(),
-    javascript(),
-    highlightActiveLineGutter(),
-    highlightSpecialChars(),
-    history(),
-    // foldGutter(),
-    drawSelection(),
-    dropCursor(),
-    EditorState.allowMultipleSelections.of(true),
-    indentOnInput(),
-    syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
-    bracketMatching(),
-    closeBrackets(),
-    autocompletion(),
-    rectangularSelection(),
-    crosshairCursor(),
-    highlightActiveLine(),
-    highlightSelectionMatches(),
-    keymap.of([
-        ...closeBracketsKeymap,
-        ...defaultKeymap,
-        ...historyKeymap,
-        ...foldKeymap,
-        ...completionKeymap,
-        ...lintKeymap
-    ])
-])()
\ No newline at end of file
+  lineNumbers(),
+  javascript(),
+  highlightActiveLineGutter(),
+  highlightSpecialChars(),
+  history(),
+  // foldGutter(),
+  drawSelection(),
+  dropCursor(),
+  EditorState.allowMultipleSelections.of(true),
+  indentOnInput(),
+  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+  bracketMatching(),
+  closeBrackets(),
+  autocompletion(),
+  rectangularSelection(),
+  crosshairCursor(),
+  highlightActiveLine(),
+  highlightSelectionMatches(),
+  keymap.of([
+    ...closeBracketsKeymap,
+    ...defaultKeymap,
+    ...historyKeymap,
+    ...foldKeymap,
+    ...completionKeymap,
+    ...lintKeymap,
+  ]),
+])();
diff --git a/src/main.ts b/src/main.ts
index c10cd01..08392fe 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -21,6 +21,15 @@ import {
   template_universes,
 } from "./AppSettings";
 import { tryEvaluate } from "./Evaluator";
+import { materialDark } from "./themes/materialDark";
+import { oneDark } from "@codemirror/theme-one-dark";
+
+export const fontSizeModif = EditorView.theme(
+  {
+    "&": { fontSize: "22px", }
+  }
+)
+
 
 export class Editor {
   // Data structures for editor text management
@@ -114,7 +123,9 @@ export class Editor {
     this.userPlugins = this.settings.vimMode ? [] : [vim()];
 
     this.editorExtensions = [
+      fontSizeModif,
       editorSetup,
+			oneDark,
       rangeHighlighting(),
       javascript(),
       EditorView.updateListener.of((v: ViewUpdate) => {
diff --git a/yarn.lock b/yarn.lock
index 6ede25a..f5a173f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -82,6 +82,16 @@
   resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.2.1.tgz#6dc8d8e5abb26b875e3164191872d69a5e85bd73"
   integrity sha512-RupHSZ8+OjNT38zU9fKH2sv+Dnlr8Eb8sl4NOnnqz95mCFTZUaiRP8Xv5MeeaG0px2b8Bnfe7YGwCV3nsBhbuw==
 
+"@codemirror/theme-one-dark@^6.1.2":
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz#fcef9f9cfc17a07836cb7da17c9f6d7231064df8"
+  integrity sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==
+  dependencies:
+    "@codemirror/language" "^6.0.0"
+    "@codemirror/state" "^6.0.0"
+    "@codemirror/view" "^6.0.0"
+    "@lezer/highlight" "^1.0.0"
+
 "@codemirror/view@^6.0.0", "@codemirror/view@^6.6.0":
   version "6.15.3"
   resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.15.3.tgz#b26dac3e1812821daa6da25f59ffb26c9b9b75f3"