performance improvements

Author: Clevis22

index.html

@@ -48,7 +48,7 @@
       </div>
     </div>
     <div class="editor-preview">
-      <textarea id="editor" class="markdown-body"></textarea>
+      <textarea autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="editor" class="markdown-body"></textarea>
       <div id="preview" class="preview markdown-body"></div>
     </div>
     <script src="dependencies/html2pdf.js"></script>

previewWorker.js

@@ -23,7 +23,7 @@ var converter = new showdown.Converter({
 
 // Dynamically calculate debounce time based on document length
 function getDebounceTime(length) {
-    if (length <= 10000) return 2; // Base case for documents up to 10,000 characters
+    if (length <= 10000) return 0; // Base case for documents up to 10,000 characters
     if (length <= 20000) return 500; // Increase debounce time as document grows
     if (length <= 30000) return 700; // Further increase for longer documents
     if (length <= 40000) return 900;

script.js

@@ -32,20 +32,38 @@ function updatePreview() {
   debouncedAutosave = debounce(autosave, debounceTime);
 
   previewWorker.postMessage(editor.value);
-  const paddingHeight = 30; 
-  const currentScrollPos = editor.scrollTop;
-  const maxScrollPos = editor.scrollHeight - editor.clientHeight - paddingHeight;
+  const paddingHeight = 30;
+  let clientHeight = editor.clientHeight; // Read once and store
+  let scrollHeight = editor.scrollHeight; // Reduce accessing this property
+  let currentScrollPos = editor.scrollTop; // Less frequent property accesses
+  let maxScrollPos = scrollHeight - clientHeight - paddingHeight;
   if (currentScrollPos >= maxScrollPos) {
-    editor.scrollTop = editor.scrollHeight - editor.clientHeight;
+    editor.scrollTop = scrollHeight - clientHeight;
   }
 }
 
 // Call the updated updatePreview function in the existing input event listener
+/*
 editor.addEventListener('input', function() {
   updatePreview();
   debouncedAutosave();
-  syncScrollEditor();
 });
+*/
+
+let queued = false;
+
+editor.addEventListener('input', () => {
+  if (!queued) {
+    queued = true;
+    requestIdleCallback(() => {
+      updatePreview(); // Ensure this function is optimized for performance.
+      debouncedAutosave(); // Debounce to reduce the frequency of execution.
+      queued = false;
+    }, {timeout: 500}); // The timeout option ensures it runs even under heavy load.
+  }
+});
+
+
 
 
 // get the message from the worker
@@ -55,10 +73,12 @@ previewWorker.addEventListener('message', function(event) {
   // Ensure scrolling happens after rendering
   requestAnimationFrame(function() {
     preview.scrollTop = scrollTop;
+    /*
     preview.querySelectorAll('pre code').forEach((block) => {
       hljs.highlightBlock(block);
     });
     // After the highlighting, sync the scroll again
+    */
     syncScrollEditor();
   });
 });

shortcuts.js

@@ -181,63 +181,70 @@ function newLine(){
 
 // Main event listener for keyboard shortcuts
 document.addEventListener('keydown', function(event) {
-    if ((event.ctrlKey || event.metaKey) && !event.altKey) {
+    var editor = document.getElementById('editor');
+    // Handling tab key for inserting tabs in the editor
+    if (event.key === 'Tab') {
+        event.preventDefault(); // Prevent the tab key's default behavior
+        var start = editor.selectionStart;
+        var end = editor.selectionEnd;
+        editor.value = editor.value.substring(0, start) + '\t' + editor.value.substring(end);
+        editor.selectionStart = editor.selectionEnd = start + 1; // Move cursor
+    }
+    // Handling shortcuts with Ctrl or Cmd key
+    if (event.ctrlKey || event.metaKey) {
         switch (event.key.toLowerCase()) {
             case 'b':
-                event.preventDefault();
-                toggleBold();
+                event.preventDefault(); // Prevent default event (usually open bookmarks in browser)
+                toggleBold(); // Call function to toggle bold
                 break;
             case 'i':
-                event.preventDefault();
-                toggleItalics();
+                event.preventDefault(); // Prevent default event (usually open browser settings)
+                toggleItalics(); // Call function to toggle italics
                 break;
             case 's':
-                event.preventDefault();
-                toggleStrikethrough();
+                event.preventDefault(); // Prevent default event (usually save the webpage)
+                toggleStrikethrough(); // Call function to toggle strikethrough
                 break;
             case 'e':
+                event.preventDefault(); // Prevent default event
+                toggleEmoji(); // Call function to toggle emoji
+                break;
+            case '=': // Handling Ctrl + '=' for increasing font size
                 event.preventDefault();
-                toggleEmoji();
+                changeFontSize(2); // Increase font size
                 break;
-            case 'enter':
+            case '-': // Handling Ctrl + '-' for decreasing font size
                 event.preventDefault();
-                toggleViewMode();
+                changeFontSize(-2); // Decrease font size
                 break;
-            case 'l':
+            case 'enter': // Ctrl+Enter for toggling view mode
                 event.preventDefault();
-                newLine();
-            break;
-            case '=': // Ctrl + '=' is the actual result when pressing Ctrl + '+'
-                if (event.key === '=' || event.key === '+') {
-                    event.preventDefault();
-                    changeFontSize(2);
-                }
+                toggleViewMode();
                 break;
-            case '-':
+            case 'l': // Ctrl+L for a new line (custom feature not typically found in editors)
                 event.preventDefault();
-                changeFontSize(-2);
+                newLine();
                 break;
         }
-    } else if (!event.ctrlKey && !event.metaKey && !event.altKey) {
+    } else {
+        // Handling non-Ctrl shortcuts such as '[' or '(', for surrounding text or cursor with brackets or parentheses
         switch (event.key) {
             case '[':
-                event.preventDefault();
-                insertSquareBrackets();
+                event.preventDefault(); // Prevent default event
+                insertSquareBrackets(); // Call function to insert square brackets
                 break;
             case '(':
-                event.preventDefault();
-                insertParentheses();
+                event.preventDefault(); // Prevent default event
+                insertParentheses(); // Call function to insert parentheses
                 break;
         }
     }
-    // Update preview and autosave after applying the formatting
+    // Update preview and autosave after applying shortcut actions
     updatePreview();
     autosave();
-});
-
-window.addEventListener('keydown', function(event) {
+    // Handling of quick word count and reading time display with Ctrl+Shift+C
     if (event.ctrlKey && event.shiftKey && event.code === 'KeyC') {
         showWordCountAndReadingTime();
-        event.preventDefault(); // Prevents any default action associated with the Control+Shift+C shortcut
+        event.preventDefault(); // To prevent default action of Ctrl+Shift+C if any
     }
 });