fix(view-options): line numbers displaying issues; toggle line number…

… in settings

src/app.css

@@ -99,27 +99,3 @@ body,
 [hidden] {
   display: none;
 }
-
-.editor-container {
-  counter-reset: line;
-}
-
-.editor-container p {
-  margin-left: 28px !important;
-  padding-left: 6px !important;
-  border-left: 1px solid #888;
-  position: relative;
-}
-
-.editor-container p::before {
-  counter-increment: line;
-  content: counter(line);
-  width: 28px;
-  padding-right: 6px;
-  font-size: 12px;
-  text-align: right;
-  color: #888;
-  position: absolute;
-  left: 0;
-  transform: translateX(-100%);
-}

src/lib/components/Editor/Editor.css

@@ -0,0 +1,39 @@
+.ql-editor {
+  @apply h-full w-full overflow-y-auto border-none !px-3 !py-2.5 text-base leading-[136%] outline-none;
+}
+
+.ql-editor,
+.ql-editor * {
+  font-family: var(--editor-font-family);
+  font-size: var(--editor-font-size);
+}
+
+.ql-editor {
+  scale: var(--editor-zoom);
+  width: calc(100% / var(--editor-zoom));
+  height: calc(100% / var(--editor-zoom));
+  transform-origin: top left;
+}
+
+.ql-editor a {
+  @apply text-blue-500;
+}
+
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fake-caret {
+  animation: blink 1s infinite;
+  transition:
+    top 0s,
+    left 50ms ease-in-out;
+}

src/lib/components/Editor.svelte → src/lib/components/Editor/Editor.svelte

@@ -1,21 +1,23 @@
 <script lang="ts">
-  import { onMount, tick } from 'svelte';
+  import { afterUpdate, onMount, tick } from 'svelte';
   import throttle from 'lodash.throttle';
   import StatusBar from '@/components/StatusBar.svelte';
   import Quill from 'quill';
   import { position as getCaretPosition } from 'caret-pos';
   import { Notpad } from '@/helpers/notpad';
   import { settings, type EditorType } from '@/store/store';
   import 'quill/dist/quill.core.css';
+  import './Editor.css';
 
   export let editor: EditorType;
 
   let editorContainer: HTMLDivElement;
   let quill: Quill;
   let fakeCaret: HTMLDivElement | null = null;
   let caretPosition = { top: 10, left: 8, height: 24 };
-  let lineNo = 1;
-  let columnNo = 1;
+  let lineNo = 0;
+  let caretLineNo = 1;
+  let caretColumnNo = 1;
   let characterCount = 0;
   /**
    * Flag to track if update is already scheduled
@@ -55,34 +57,30 @@
     await Notpad.editors.setQuill(editor.id, quill);
 
     for (let e of ['input', 'scroll', 'click', 'keydown', 'focus', 'resize', 'load'])
-      quill.root.addEventListener(e, updates);
-    for (let e of ['scroll', 'resize', 'load']) window.addEventListener(e, updates);
+      quill.root.addEventListener(e, updateTextAreaInfo);
+    for (let e of ['scroll', 'resize', 'load']) window.addEventListener(e, updateTextAreaInfo);
 
     quill.setContents(Notpad.editors.getContent(editor.id)!);
 
-    // Adding a small delay, I don't know why, but it won't work without this
-    await new Promise((resolve) => setTimeout(resolve, 200));
-    updates();
-    settings.subscribe(updates);
+    updateTextAreaInfo();
+    settings.subscribe(updateTextAreaInfo);
   }
 
-  async function updates() {
-    await tick();
-    updateTextAreaInfo();
-    await tick();
+  afterUpdate(() => {
     updateCaretPosition();
-  }
+  });
 
   /**
    * Update line and column numbers.
    */
   function updateTextAreaInfo() {
     const selection = quill.getSelection();
     if (selection) {
+      lineNo = quill.getText().split('\n').length - 1; // quill.getLength() includes a trailing newline character
       const text = quill.getText(0, selection.index + selection.length);
       const lines = text.split('\n');
-      lineNo = lines.length;
-      columnNo = lines[lines.length - 1].length + 1;
+      caretLineNo = lines.length;
+      caretColumnNo = lines[lines.length - 1].length + 1;
       characterCount = quill.getLength() - 1; // quill.getLength() includes a trailing newline character
     }
   }
@@ -105,7 +103,7 @@
         updateScheduled = false;
       });
     }
-  }, 50);
+  });
 </script>
 
 <div class="relative h-full overflow-hidden">
@@ -115,7 +113,8 @@
     bind:this={editorContainer}
     style="--editor-font-family: '{$settings.fontFamily}';
     --editor-font-size: {$settings.fontSize}px;
-    --editor-zoom: {$settings.zoom};"
+    --editor-zoom: {$settings.zoom};
+    --line-no-digits-count: {lineNo.toString().length}"
   />
   <div
     class="fake-caret absolute z-0 w-0.5 rounded-[2px] bg-primary"
@@ -125,53 +124,35 @@
   />
 </div>
 
-<StatusBar {lineNo} {columnNo} {characterCount} />
+<StatusBar {caretLineNo} {caretColumnNo} {characterCount} />
 
-{#if updateScheduled}
-  <style lang="postcss">
+<!-- {#if updateScheduled}
+  <style>
     .fake-caret {
       animation: none !important;
     }
   </style>
-{/if}
+{/if} -->
 
-<style lang="postcss">
-  :global(.ql-editor) {
-    @apply h-full w-full overflow-y-auto border-none !px-3 !py-2.5 text-base leading-[136%] outline-none;
-  }
-
-  :global(.ql-editor, .ql-editor *) {
-    font-family: var(--editor-font-family);
-    font-size: var(--editor-font-size);
-  }
-
-  :global(.ql-editor) {
-    scale: var(--editor-zoom);
-    width: calc(100% / var(--editor-zoom));
-    height: calc(100% / var(--editor-zoom));
-    transform-origin: top left;
-  }
-
-  :global(.ql-editor a) {
-    @apply text-blue-500;
-  }
-
-  @keyframes blink {
-    0% {
-      opacity: 1;
+{#if $settings.lineNumbers}
+  <style>
+    .ql-editor {
+      counter-reset: line;
+      @apply !pl-0;
     }
-    50% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
+
+    .ql-editor > * {
+      margin-left: clamp(22px, calc(1.6ch * var(--line-no-digits-count)), 10vw) !important;
+      @apply relative border-l-2 border-muted !pl-2 duration-300;
     }
-  }
 
-  .fake-caret {
-    animation: blink 1s infinite;
-    transition:
-      top 0s,
-      left 50ms ease-in-out;
-  }
-</style>
+    .ql-editor > *::before {
+      counter-increment: line;
+      content: counter(line);
+      transform: translateX(-100%);
+      width: clamp(20px, calc(2ch * var(--line-no-digits-count)), 10vw) !important;
+      padding-right: clamp(10px, calc(0.6ch * var(--line-no-digits-count)), 10vw) !important;
+      @apply absolute left-0 mt-1 text-right text-xs text-primary duration-300;
+    }
+  </style>
+{/if}

src/lib/components/EditorTabs.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Editor from '@/components/Editor.svelte';
+  import Editor from '@/src/lib/components/Editor/Editor.svelte';
   import * as Tabs from '@/components/ui/tabs';
   import * as ContextMenu from '@/components/ui/context-menu';
   import EditorTitle from '@/components/EditorTitle.svelte';

src/lib/components/MenuBar.svelte

@@ -121,16 +121,22 @@
       </Menubar.Sub>
 
       <Menubar.Separator />
-      <Menubar.CheckboxItem bind:checked={isFullScreen} on:click={() => screenfull.toggle()}>
+      <Menubar.CheckboxItem checked={isFullScreen} on:click={() => screenfull.toggle()}>
         Full Screen
         <Menubar.Shortcut>F11</Menubar.Shortcut>
       </Menubar.CheckboxItem>
       <Menubar.CheckboxItem
-        bind:checked={$settings.statusBar}
+        checked={$settings.statusBar}
         on:click={Notpad.viewOptions.toggleStatusBar}
       >
         Status Bar
       </Menubar.CheckboxItem>
+      <Menubar.CheckboxItem
+        checked={$settings.lineNumbers}
+        on:click={Notpad.viewOptions.toggleLineNumbers}
+      >
+        Line Numbers
+      </Menubar.CheckboxItem>
       <Menubar.CheckboxItem checked={$mode == 'dark'} on:click={toggleMode}>
         Dark Mode
       </Menubar.CheckboxItem>

src/lib/components/StatusBar.svelte

@@ -3,8 +3,8 @@
   import { settings } from '@/store/store';
   import { slide } from 'svelte/transition';
 
-  export let lineNo = 1;
-  export let columnNo = 1;
+  export let caretLineNo = 1;
+  export let caretColumnNo = 1;
   export let characterCount = 0;
 
   const inAnimation = {
@@ -27,15 +27,15 @@
     >
       <span class="flex items-center justify-center">
         Line:
-        {#key lineNo}
+        {#key caretLineNo}
           <span in:slide={inAnimation} class="ml-1 inline-block">
-            {lineNo}
+            {caretLineNo}
           </span>
         {/key}
         , Column:
-        {#key columnNo}
+        {#key caretColumnNo}
           <span in:slide={inAnimation} class="ml-1 inline-block">
-            {columnNo}
+            {caretColumnNo}
           </span>
         {/key}
       </span>

src/lib/helpers/search-options.ts → src/lib/helpers/menubar/search-options.ts

@@ -1,5 +1,5 @@
 import { toast } from 'svelte-sonner';
-import { Notpad } from './notpad';
+import { Notpad } from '../notpad';
 import { Range } from 'quill';
 
 export class SearchOptions {

src/lib/helpers/view-options.ts → src/lib/helpers/menubar/view-options.ts

@@ -6,6 +6,10 @@ export class ViewOptions {
     settings.update((value) => ({ ...value, statusBar: !get(settings).statusBar }));
   }
 
+  public toggleLineNumbers() {
+    settings.update((value) => ({ ...value, lineNumbers: !get(settings).lineNumbers }));
+  }
+
   public zoom(zoom: 'in' | 'out' | 'reset') {
     const zoomSettings = get(settings).zoom;
     const zoomLevels: SettingsType['zoom'][] = [0.5, 0.75, 0.9, 1, 1.2, 1.5, 1.75, 2];

src/lib/helpers/notpad.ts

@@ -1,12 +1,12 @@
 import { toast } from 'svelte-sonner';
-import { FileOptions } from '@/helpers/file-options';
+import { FileOptions } from '@/src/lib/helpers/menubar/file-options';
 import { Editors } from '@/helpers/editors';
 import { NotpadStorage } from '@/store/storage';
 import { Settings } from '@/helpers/settings';
-import { EditOptions } from '@/helpers/edit-options';
+import { EditOptions } from '@/src/lib/helpers/menubar/edit-options';
 import { GithubApi } from '@/helpers/github-api';
-import { SearchOptions } from '@/helpers/search-options';
-import { ViewOptions } from '@/helpers/view-options';
+import { SearchOptions } from '@/src/lib/helpers/menubar/search-options';
+import { ViewOptions } from '@/src/lib/helpers/menubar/view-options';
 
 export class Notpad {
   public static fileOptions: FileOptions = new FileOptions();

src/lib/store/store.ts

@@ -80,15 +80,19 @@ export interface SettingsType {
    */
   zoom: 0.5 | 0.75 | 0.9 | 1 | 1.2 | 1.5 | 1.75 | 2;
   /**
-   * Enable/disable bottom status bar
+   * Is bottom status bar visible.
    */
   statusBar: boolean;
   /**
-   * The font family for the editor.
+   * Is line numbers visible.
+   */
+  lineNumbers: boolean;
+  /**
+   * The font family of the editor.
    */
   fontFamily: FontFamily;
   /**
-   * The font size for the editor.
+   * The font size of the editor.
    */
   fontSize: FontSize;
 }
@@ -122,5 +126,6 @@ export const settings = writable<SettingsType>({
   zoom: 1,
   statusBar: true,
   fontFamily: FontFamily.SUSE,
-  fontSize: 16
+  fontSize: 16,
+  lineNumbers: false
 });