Merge pull request #28 from tmr232/talk-prep

Demo: Learned to change font size

Author: tmr232

CHANGELOG.md

@@ -10,6 +10,7 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 - Added JetBrains frontend for use in JetBrains IDE plugin
 - Demo: Added a link to the JetBrains plugin page
+- Demo learned to change font-size
 
 ## [0.0.8] - 2024-10-10
 

src/components/Demo.svelte

@@ -44,6 +44,13 @@
   let verbose = urlParams.has("verbose");
   let showSegmentation = urlParams.has("segmentation");
   let debugMode = urlParams.has("debug");
+  let fontSize = "1em";
+  const range = (start: number, end: number) =>
+    Array.from({ length: end - start }, (_v, k) => k + start);
+  const fontSizes: { label: string; value: string }[] = [
+    { label: "Default", value: "1em" },
+    ...range(8, 31).map((n) => ({ label: `${n}`, value: `${n}px` })),
+  ];
 
   let selection = languages[parseInt(urlParams.get("language")) || 0];
   let code = codeGo;
@@ -181,6 +188,13 @@
             </option>
           {/each}
         </select>
+        <select bind:value={fontSize}>
+          {#each fontSizes as { label, value }}
+            <option {value}>
+              {label}
+            </option>
+          {/each}
+        </select>
         <button on:click={share}>Share (experimental)</button>
       </div>
       <div class="codemirror">
@@ -190,20 +204,23 @@
             bind:code={codeGo}
             lang={go()}
             on:cursorMoved={cursorMoved}
+            {fontSize}
           />
         {:else if selection.language === "C"}
           <Editor
             bind:this={editor}
             bind:code={codeC}
             lang={cpp()}
             on:cursorMoved={cursorMoved}
+            {fontSize}
           />
         {:else if selection.language === "Python"}
           <Editor
             bind:this={editor}
             bind:code={codePython}
             lang={python()}
             on:cursorMoved={cursorMoved}
+            {fontSize}
           />
         {/if}
       </div>

src/components/Editor.svelte

@@ -1,17 +1,26 @@
 <script lang="ts">
   import type { LanguageSupport } from "@codemirror/language";
-  import type { EditorView } from "@codemirror/view";
+  import { EditorView } from "@codemirror/view";
+  import type { Extension } from "@codemirror/state";
   import { createEventDispatcher } from "svelte";
   import CodeMirror from "svelte-codemirror-editor";
   import { oneDark } from "@codemirror/theme-one-dark";
   import { isDark } from "./lightdark.ts";
   export let code: string;
   export let lang: LanguageSupport;
+  export let fontSize: string = "1em";
 
   let editorView: EditorView;
   let cursorPos: { row: number; column: number; index: number };
 
   const dispatch = createEventDispatcher();
+  const fontSizeTheme = (
+    fontSize: string,
+    baseTheme?: Extension | undefined,
+  ): Extension[] =>
+    [EditorView.theme({ "&": { fontSize: fontSize } }), baseTheme].filter(
+      (item) => item !== undefined,
+    );
 
   function updateCursorPosition() {
     const pos = editorView.state.selection.main.head;
@@ -57,5 +66,5 @@
   tabSize={4}
   lineWrapping={true}
   on:ready={onEditorReady}
-  theme={$isDark ? oneDark : undefined}
+  theme={$isDark ? fontSizeTheme(fontSize, oneDark) : fontSizeTheme(fontSize)}
 />