feat(editor): custom caret options (enable/disable, caret style and c…

…aret animation)
Muhammed-Rahif · Dec 28, 2024 · 7a5f61e · 7a5f61e
1 parent 802e953
commit 7a5f61e
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 54 deletions.
diff --git a/src/lib/components/editor/Editor.css b/src/lib/components/editor/Editor.css
@@ -51,7 +51,3 @@
 .editor-container[data-wrap-lines='false'] .ql-editor > * {
   @apply w-max;
 }
-
-.fake-caret {
-  transition: all 250ms cubic-bezier(0, 0.55, 0.45, 1);
-}
diff --git a/src/lib/components/editor/Editor.svelte b/src/lib/components/editor/Editor.svelte
@@ -113,15 +113,17 @@
   });
 </script>
 
-<div class="relative h-full overflow-hidden">
+<div
+  class="relative h-full overflow-hidden"
+  style:--editor-zoom={$settings.zoom}
+  style:--editor-font-size="{$settings.fontSize}px"
+  style:--editor-font-family={$settings.fontFamily}
+  style:--line-no-digits-count={lineNo.toString().length}
+>
   <div
     class="editor-container relative flex overflow-hidden
-    rounded-none bg-transparent text-sm caret-transparent
-    duration-300"
-    style="--editor-font-family: '{$settings.fontFamily}';
-    --editor-font-size: {$settings.fontSize}px;
-    --editor-zoom: {$settings.zoom};
-    --line-no-digits-count: {lineNo.toString().length}"
+    rounded-none bg-transparent text-sm duration-300"
+    class:caret-transparent={$settings.caret.enable}
     data-line-numbers={$settings.lineNumbers}
     data-wrap-lines={$settings.wrapLines}
     bind:this={editorContainer}

diff --git a/src/lib/components/editor/FakeCaret.svelte b/src/lib/components/editor/FakeCaret.svelte
@@ -4,6 +4,8 @@
   import { position as getCaretPosition } from 'caret-pos';
   import { settings } from '@/store/store';
   import type Quill from 'quill';
+  import { cn } from '@/utils';
+  import { CaretAnimation, CaretStyle } from '@/types/SettingsType';
 
   interface Props {
     quill: Quill;
@@ -46,13 +48,29 @@
   });
 </script>
 
-<span
-  class="fake-caret absolute z-0 w-0.5 animate-caret-blink
-    rounded-[.06em] bg-primary"
-  bind:this={fakeCaretElement}
-  style="top: {caret.top}px;
-    left: {caret.left}px;
-    height: {caret.height}px;
-    width: {$settings.zoom * 2}px"
-  spellcheck="false"
-></span>
+{#if $settings.caret.enable}
+  <span
+    class={cn('fake-caret absolute z-0 w-0.5 animate-caret-blink rounded-[.06em]', {
+      '[transition:left_600ms,top_600ms]': $settings.caret.animation == CaretAnimation.Slow,
+      '[transition:left_100ms,top_100ms]': $settings.caret.animation == CaretAnimation.Fast,
+      '[transition:left_300ms,top_300ms]': $settings.caret.animation == CaretAnimation.Medium,
+      '[transition:left_0s,top_0s]': $settings.caret.animation == CaretAnimation.Off,
+      'bg-primary': $settings.caret.style != CaretStyle.HollowBlock,
+      'border border-primary': $settings.caret.style == CaretStyle.HollowBlock
+    })}
+    style:width="calc({$settings.caret.style == CaretStyle.VerticalBar ? '2px' : '1ch'} * var(--editor-zoom))"
+    style:height={$settings.caret.style == CaretStyle.Underline ? '2px' : `${caret.height}px`}
+    style:margin-top={$settings.caret.style == CaretStyle.Underline
+      ? `${caret.height + 2}px`
+      : undefined}
+    style:top="{caret.top}px"
+    style:left="{caret.left}px"
+    bind:this={fakeCaretElement}
+  ></span>
+{/if}
+
+<style>
+  .fake-caret {
+    transition-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
+  }
+</style>
diff --git a/src/lib/components/menubar/SettingsMenu.svelte b/src/lib/components/menubar/SettingsMenu.svelte
@@ -18,6 +18,14 @@
       <ALargeSmallIcon class="ml-auto text-muted-foreground" />
     </Menubar.Item>
 
+    <Menubar.Separator />
+    <Menubar.CheckboxItem
+      checked={$settings.caret.enable}
+      onclick={Notpad.settings.toggleCustomCaret}
+    >
+      Custom Caret
+    </Menubar.CheckboxItem>
+
     <Menubar.Separator />
     <Menubar.Sub>
       <Menubar.SubTrigger>Theme</Menubar.SubTrigger>
@@ -65,38 +73,40 @@
       </Menubar.SubContent>
     </Menubar.Sub>
 
-    <Menubar.Sub>
-      <Menubar.SubTrigger>Caret</Menubar.SubTrigger>
-      <Menubar.SubContent>
-        <Menubar.Sub>
-          <Menubar.SubTrigger class="gap-2">Style</Menubar.SubTrigger>
-          <Menubar.SubContent>
-            {#each Object.values(CaretStyle) as caretStyle}
-              <Menubar.CheckboxItem
-                checked={$settings.caret.style == caretStyle}
-                onclick={() => Notpad.settings.updateCaret({ style: caretStyle })}
-              >
-                {caretStyle}
-              </Menubar.CheckboxItem>
-            {/each}
-          </Menubar.SubContent>
-        </Menubar.Sub>
+    {#if $settings.caret.enable}
+      <Menubar.Sub>
+        <Menubar.SubTrigger>Caret</Menubar.SubTrigger>
+        <Menubar.SubContent>
+          <Menubar.Sub>
+            <Menubar.SubTrigger class="gap-2">Style</Menubar.SubTrigger>
+            <Menubar.SubContent>
+              {#each Object.values(CaretStyle) as caretStyle}
+                <Menubar.CheckboxItem
+                  checked={$settings.caret.style == caretStyle}
+                  onclick={() => Notpad.settings.updateCaret({ style: caretStyle })}
+                >
+                  {caretStyle}
+                </Menubar.CheckboxItem>
+              {/each}
+            </Menubar.SubContent>
+          </Menubar.Sub>
 
-        <Menubar.Sub>
-          <Menubar.SubTrigger class="gap-2">Animation</Menubar.SubTrigger>
-          <Menubar.SubContent>
-            {#each Object.values(CaretAnimation) as caretAnimation}
-              <Menubar.CheckboxItem
-                checked={$settings.caret.animation == caretAnimation}
-                onclick={() => Notpad.settings.updateCaret({ animation: caretAnimation })}
-              >
-                {caretAnimation}
-              </Menubar.CheckboxItem>
-            {/each}
-          </Menubar.SubContent>
-        </Menubar.Sub>
-      </Menubar.SubContent>
-    </Menubar.Sub>
+          <Menubar.Sub>
+            <Menubar.SubTrigger class="gap-2">Animation</Menubar.SubTrigger>
+            <Menubar.SubContent>
+              {#each Object.values(CaretAnimation) as caretAnimation}
+                <Menubar.CheckboxItem
+                  checked={$settings.caret.animation == caretAnimation}
+                  onclick={() => Notpad.settings.updateCaret({ animation: caretAnimation })}
+                >
+                  {caretAnimation}
+                </Menubar.CheckboxItem>
+              {/each}
+            </Menubar.SubContent>
+          </Menubar.Sub>
+        </Menubar.SubContent>
+      </Menubar.Sub>
+    {/if}
 
     <Menubar.Separator />
     <Menubar.Item

diff --git a/src/lib/helpers/settings.ts b/src/lib/helpers/settings.ts
@@ -17,7 +17,8 @@ export class Settings {
     wrapLines: true,
     caret: {
       animation: CaretAnimation.Medium,
-      style: CaretStyle.VerticalBar
+      style: CaretStyle.VerticalBar,
+      enable: true
     }
   };
 
@@ -35,4 +36,11 @@ export class Settings {
       caret: { ...value.caret, ...caret }
     }));
   }
+
+  toggleCustomCaret() {
+    settings.update((value) => ({
+      ...value,
+      caret: { ...value.caret, enable: !value.caret.enable }
+    }));
+  }
 }
diff --git a/src/lib/types/SettingsType.ts b/src/lib/types/SettingsType.ts
@@ -75,10 +75,11 @@ export interface SettingsType {
    */
   wrapLines: boolean;
   /**
-   * Caret's specific configs. Style and Animation.
+   * Caret's specific configs. Style and Animation. Enable or disable.
    */
   caret: {
     style: CaretStyle;
     animation: CaretAnimation;
+    enable: boolean;
   };
 }