Merge pull request #287 from Muhammed-Rahif/alpha

Updates from Alpha
Muhammed-Rahif · Dec 24, 2024 · 0c7bc4b · 0c7bc4b
2 parents d4e6aed + b46cdc1
commit 0c7bc4b
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 73 deletions.
diff --git a/.github/workflows/greetings.yml b/.github/workflows/greetings.yml
@@ -16,6 +16,7 @@ jobs:
   greet:
     name: Greet, Celebrate, and Encourage
     runs-on: ubuntu-latest
+    permissions: write-all
     steps:
       - name: Check User Contributions
         id: check_contributions

diff --git a/index.html b/index.html
@@ -1,14 +1,56 @@
 <!doctype html>
 <html lang="en">
   <head>
+    <!-- Character Encoding -->
     <meta charset="UTF-8" />
+
+    <!-- Viewport Meta -->
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, interactive-widget=resizes-content"
     />
 
+    <!-- Title -->
     <title>Notpad</title>
+    <!-- Favicon -->
     <link rel="icon" href="/Notpad/favicon.png" />
+
+    <!-- Description -->
+    <meta
+      name="description"
+      content="Notpad is a simple, open-source, and distraction-free note-taking app to organize your thoughts effortlessly."
+    />
+
+    <!-- Keywords -->
+    <meta name="keywords" content="Notpad, Notepad app, note-taking, text editor, smart notepad" />
+
+    <!-- Author -->
+    <meta name="author" content="Muhammed-Rahif" />
+
+    <!-- Open Graph Meta Tags for Social Media -->
+    <meta property="og:title" content="Notpad - The classic notepad, enhanced!" />
+    <meta
+      property="og:description"
+      content="Notpad is a simple, open-source, and distraction-free note-taking app to organize your thoughts effortlessly."
+    />
+    <meta property="og:image" content="/Notpad/logo_square.png" />
+    <meta property="og:url" content="https://muhammed-rahif.github.io/Notpad/" />
+    <meta property="og:type" content="website" />
+
+    <!-- Twitter Card Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Notpad - The classic notepad, enhanced!" />
+    <meta
+      name="twitter:description"
+      content="Notpad is a simple, open-source, and distraction-free note-taking app to organize your thoughts effortlessly."
+    />
+    <meta name="twitter:image" content="/Notpad/logo_square.png" />
+
+    <!-- Robots Meta Tag -->
+    <meta name="robots" content="index, follow" />
+
+    <!-- Theme Color for Mobile Browsers -->
+    <meta name="theme-color" content="#888888" />
   </head>
 
   <body spellcheck="false" oncontextmenu="return false;">

diff --git a/public/logo_square.png b/public/logo_square.png
diff --git a/src/app.css b/src/app.css
@@ -67,7 +67,7 @@
 
 @layer base {
   * {
-    @apply border-border;
+    @apply box-border border-border;
   }
   body {
     @apply bg-background text-foreground;

diff --git a/src/lib/components/Editor/Editor.css b/src/lib/components/Editor/Editor.css
@@ -1,5 +1,5 @@
 .ql-editor {
-  @apply h-full w-full overflow-y-auto border-none !px-3 !py-2.5 text-base leading-[136%] outline-none duration-100;
+  @apply h-full w-full overflow-y-auto border-none !px-3 !py-2.5 text-base leading-[136%] outline-none duration-300;
 }
 
 .ql-editor,
@@ -8,19 +8,48 @@
   font-size: var(--editor-font-size);
 }
 
-.ql-editor {
+.editor-container {
   scale: var(--editor-zoom);
   width: calc(100% / var(--editor-zoom));
   height: calc(100% / var(--editor-zoom));
   transform-origin: top left;
+  position: relative;
 }
 
 .ql-editor a {
   @apply text-blue-500;
 }
 
 .ql-editor > * {
-  @apply !pl-0 duration-100;
+  @apply !pl-0 duration-300;
+}
+
+.editor-container[data-line-numbers='true'] .ql-editor {
+  counter-reset: line;
+  --line-no-font-size-factor: 0.8;
+  @apply !pl-0;
+}
+
+.editor-container[data-line-numbers='true'] .ql-editor > * {
+  margin-left: calc(
+    max(var(--line-no-digits-count), 3) * 1em * var(--line-no-font-size-factor)
+  ) !important;
+  padding-left: calc(var(--editor-font-size) * 0.5) !important;
+  @apply relative border-l-2 border-muted duration-300;
+}
+
+.editor-container[data-line-numbers='true'] .ql-editor > *::before {
+  font-size: calc(var(--editor-font-size) * var(--line-no-font-size-factor));
+  counter-increment: line;
+  content: counter(line);
+  width: calc(max(var(--line-no-digits-count), 3) * 1em) !important;
+  transform: translateX(0);
+  /* padding: 0 1em; */
+  @apply absolute left-0 top-0 -translate-x-full text-center text-primary duration-300;
+}
+
+.editor-container[data-wrap-long-lines='true'] .ql-editor > * {
+  @apply w-max;
 }
 
 @keyframes blink {

diff --git a/src/lib/components/Editor/Editor.svelte b/src/lib/components/Editor/Editor.svelte
@@ -8,8 +8,9 @@
   import { Notpad } from '@/helpers/notpad';
   import { settings } from '@/store/store';
   import 'quill/dist/quill.core.css';
-  import './Editor.css';
   import type { EditorType } from '@/types/EditorTypes';
+  import { RichTextEditor } from '@/helpers/rich-text-editor';
+  import './Editor.css';
 
   interface Props {
     editor: EditorType;
@@ -27,30 +28,10 @@
   let wordCount = $state(0);
 
   async function setupQuill() {
-    quill = new Quill(editorContainer!, {
-      formats: [
-        'bold',
-        'code',
-        'italic',
-        'link',
-        'size',
-        'strike',
-        'script',
-        'underline',
-        'blockquote',
-        'header',
-        'indent',
-        'list',
-        'align',
-        'direction',
-        'code-block',
-        'formula'
-        // 'background',
-        // 'font',
-        // 'image',
-        // 'video'
-      ]
+    const richTextEditor = new RichTextEditor({
+      editorContainer
     });
+    quill = richTextEditor.quill;
 
     await Notpad.editors.setQuill(editor.id, quill);
     quill.setContents(Notpad.editors.getContent(editor.id)!);
@@ -82,7 +63,7 @@
 
   // Using requestAnimationFrame for smooth updates
   const updateCaretPosition = throttle(() => {
-    console.count('Update caret');
+    // console.count('Update caret');
     requestAnimationFrame(async () => {
       if (fakeCaret) fakeCaret.style.animationDuration = '0s';
 
@@ -132,7 +113,7 @@
       await tick();
       // If line numbers are enabled or disabled, update the caret position after a delay
       // of 300ms to complete the line numbers animated entry or exit.
-      await new Promise((resolve) => setTimeout(resolve, 100));
+      await new Promise((resolve) => setTimeout(resolve, 300));
       updateCaretPosition();
     },
     () => [$settings.lineNumbers, lineNo]
@@ -163,18 +144,22 @@
 
 <div class="relative h-full overflow-hidden">
   <div
-    class="editor-container overflow-hidden rounded-none
-    bg-transparent text-sm caret-transparent"
-    bind:this={editorContainer}
+    class="editor-container relative flex overflow-hidden
+    rounded-none bg-transparent text-sm caret-transparent"
     style="--editor-font-family: '{$settings.fontFamily}';
     --editor-font-size: {$settings.fontSize}px;
     --editor-zoom: {$settings.zoom};
     --line-no-digits-count: {lineNo.toString().length}"
+    data-line-numbers={$settings.lineNumbers}
+    data-wrap-long-lines={$settings.wrapLongLines}
+    bind:this={editorContainer}
   ></div>
+
   <span
-    class="fake-caret absolute z-0 w-0.5 rounded-[.06em] bg-primary"
+    class="fake-caret absolute z-0 w-0.5 rounded-[.06em]
+    bg-primary"
     bind:this={fakeCaret}
-    style="top: calc({caretPosition.top}px);
+    style="top: {caretPosition.top}px;
     left: {caretPosition.left}px;
     height: {caretPosition.height}px;
     width: {$settings.zoom * 2}px"
@@ -183,34 +168,3 @@
 </div>
 
 <StatusBar {caretLineNo} {caretColumnNo} {characterCount} {wordCount} />
-
-{#if $settings.lineNumbers}
-  <style>
-    .ql-editor {
-      counter-reset: line;
-      @apply !pl-0;
-    }
-
-    .ql-editor {
-      --line-no-font-size-factor: 0.8;
-    }
-
-    .ql-editor > * {
-      margin-left: calc(
-        max(var(--line-no-digits-count), 3) * 1em * var(--line-no-font-size-factor)
-      ) !important;
-      padding-left: calc(var(--editor-font-size) * 0.5) !important;
-      @apply relative border-l-2 border-muted duration-100;
-    }
-
-    .ql-editor > *::before {
-      font-size: calc(var(--editor-font-size) * var(--line-no-font-size-factor));
-      counter-increment: line;
-      content: counter(line);
-      transform: translateX(-100%);
-      width: calc(max(var(--line-no-digits-count), 3) * 1em) !important;
-      /* padding: 0 1em; */
-      @apply absolute left-0 text-center text-primary duration-100;
-    }
-  </style>
-{/if}
diff --git a/src/lib/components/EditorTabs.svelte b/src/lib/components/EditorTabs.svelte
@@ -6,7 +6,6 @@
   import { activeTabId, editors } from '@/store/store';
   import { Notpad } from '@/helpers/notpad';
   import { slide } from 'svelte/transition';
-  import { cn } from '@/utils';
 
   let innerWidth = $state(window.innerWidth);
 
@@ -32,10 +31,7 @@
             <div
               role="button"
               tabindex="0"
-              class={cn(
-                'flex items-center justify-center',
-                $activeTabId === editor.id ? 'bg-background' : 'bg-secondary'
-              )}
+              class="flex items-center justify-center"
               onclick={() => ($activeTabId = editor.id)}
               onkeydown={(e) => {
                 if (e.key === 'Enter' || e.key === ' ') {

diff --git a/src/lib/components/MenuBar.svelte b/src/lib/components/MenuBar.svelte
@@ -32,7 +32,7 @@
 
 <svelte:window bind:innerWidth />
 
-<Menubar.Root class="relative z-10 rounded-none">
+<Menubar.Root class="relative z-10">
   <Menubar.Menu>
     <Menubar.Trigger>File</Menubar.Trigger>
     <Menubar.Content>
@@ -138,6 +138,12 @@
       >
         Line Numbers
       </Menubar.CheckboxItem>
+      <Menubar.CheckboxItem
+        checked={$settings.wrapLongLines}
+        onclick={Notpad.viewOptions.toggleWrapLongLines}
+      >
+        Wrap Long Lines
+      </Menubar.CheckboxItem>
       <Menubar.CheckboxItem checked={$mode == 'dark'} onclick={toggleMode}>
         Dark Mode
       </Menubar.CheckboxItem>

diff --git a/src/lib/helpers/menubar/view-options.ts b/src/lib/helpers/menubar/view-options.ts
@@ -13,6 +13,11 @@ export class ViewOptions {
     settings.update((value) => ({ ...value, lineNumbers: !get(settings).lineNumbers }));
   }
 
+  public toggleWrapLongLines() {
+    Notpad.editors.focus();
+    settings.update((value) => ({ ...value, wrapLongLines: !get(settings).wrapLongLines }));
+  }
+
   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];

diff --git a/src/lib/helpers/rich-text-editor.ts b/src/lib/helpers/rich-text-editor.ts
@@ -0,0 +1,37 @@
+import Quill from 'quill';
+
+export class RichTextEditor {
+  editorContainer: HTMLElement;
+  quill: Quill;
+
+  constructor({ editorContainer }: { editorContainer: HTMLElement }) {
+    this.editorContainer = editorContainer;
+    const options = {
+      formats: [
+        'bold',
+        'code',
+        'italic',
+        'link',
+        'size',
+        'strike',
+        'script',
+        'underline',
+        'blockquote',
+        'header',
+        'indent',
+        'list',
+        'align',
+        'direction',
+        'code-block',
+        'formula'
+        // 'background',
+        // 'font',
+        // 'image',
+        // 'video'
+      ]
+    };
+
+    this.quill = new Quill(this.editorContainer!, options);
+    return this;
+  }
+}
diff --git a/src/lib/helpers/settings.ts b/src/lib/helpers/settings.ts
@@ -7,7 +7,8 @@ export class Settings {
     statusBar: true,
     fontFamily: FontFamily.SUSE,
     fontSize: FontSize.Size16,
-    lineNumbers: false
+    lineNumbers: false,
+    wrapLongLines: false
   };
 
   setFontFamily(fontFamily: FontFamily) {

diff --git a/src/lib/types/SettingsTypes.ts b/src/lib/types/SettingsTypes.ts
@@ -56,4 +56,8 @@ export interface SettingsType {
    * The font size of the editor.
    */
   fontSize: FontSize;
+  /**
+   * Should wrap long lines.
+   */
+  wrapLongLines: boolean;
 }