Merge pull request #165 from Stardown-app/fix-char-limit

Enforce notepad character and save time limits

README.md

@@ -26,7 +26,7 @@ Copy and paste like you're used to. Press `Alt+C` to copy (Mac: `⌥+C`).
 - Copy almost anything as markdown including links, images, videos, lists, bold, italics, quotes, code blocks, etc.
 - Copy tables as markdown, CSV, JSON, and more.
 - Automatically extract the main content of pages.
-- Copy links for the current tab or all tabs. Select tabs to copy links for those tabs.
+- Copy links for the current tab, all tabs, or selected tabs.
 - Instantly clip into a note using Stardown's sidebar notepad to simultaneously copy and paste.
 - Create [text fragments](https://developer.mozilla.org/en-US/docs/Web/URI/Fragment/Text_fragments) so you can link to specific parts of pages.
 
@@ -38,7 +38,7 @@ We're still finding sites where Stardown doesn't work as well as it could. If yo
 
 ## Privacy
 
-Stardown will never sell any data to anyone and does not collect any personal data. Everything you copy with Stardown is stored in your clipboard, local files, and/or your browser's settings depending on which features you use. Stardown's optional notepad saves to your browser's settings.
+Stardown will never sell any data to anyone and does not collect any personal data. Everything you copy with Stardown is stored in your clipboard, local files, and/or your browser's settings depending on which features you use. Stardown's optional notepad saves to your browser's sync storage.
 
 ## Permissions
 

src/sidebar.html

@@ -21,6 +21,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Stardown</title>
+    <link rel="icon" type="image/x-icon" href="./images/favicon.ico" />
     <style>
       body {
         font-family: sans-serif;
@@ -39,6 +40,11 @@
         height: 95vh;
         padding: 10px;
       }
+
+      #char-count {
+        margin-top: -5px;
+        margin-left: 20px;
+      }
     </style>
   </head>
 
@@ -47,6 +53,7 @@
       <div class="notepad-container">
         <textarea id="notepad"></textarea>
       </div>
+      <p id="char-count"></p>
     </main>
     <script src="./sidebar.js"></script>
   </body>

src/sidebar.js

@@ -14,10 +14,18 @@
    limitations under the License.
 */
 
-import { browser } from './browserSpecific.js';
+import { browser, sleep } from './browserSpecific.js';
 import { getSetting } from './getSetting.js';
 
 const notepad = document.getElementById('notepad');
+const MAX_CHARS = 8100; // sync storage character limit: https://developer.chrome.com/docs/extensions/reference/api/storage#property-sync-sync-QUOTA_BYTES_PER_ITEM:~:text=quota_bytes_per_item
+notepad.setAttribute('maxlength', MAX_CHARS);
+// if we switch to local storage to save the notepad, set MAX_CHARS to 10485000
+
+const charCount = document.getElementById('char-count');
+
+const SAVE_DELAY = 500; // milliseconds // sync storage time limit: https://developer.chrome.com/docs/extensions/reference/api/storage#property-sync-sync-MAX_WRITE_OPERATIONS_PER_MINUTE
+let lastEditTime = 0; // milliseconds
 
 browser.commands.getAll().then(cmds => {
     const copySelectionShortcut = cmds.find(
@@ -29,30 +37,56 @@ browser.commands.getAll().then(cmds => {
 // load the notepad content when the page loads
 getSetting('notepadContent').then(content => {
     notepad.value = content || '';
+    updateCharacterCount();
 });
 
 // save the notepad content when it changes
-notepad.addEventListener('input', () => {
-    browser.storage.sync.set({ notepadContent: notepad.value });
+notepad.addEventListener('input', async () => {
+    lastEditTime = Date.now();
+    updateCharacterCount();
+    charCount.setAttribute('style', 'color: black;');
+    await saveNotepad();
 });
 
-browser.runtime.onMessage.addListener(message => {
+browser.runtime.onMessage.addListener(async message => {
     if (message.destination !== 'sidebar') {
         return;
     }
 
     switch (message.category) {
         case 'sendToNotepad':
             const newText = '\n\n' + message.text.trim() + '\n\n';
+            // if the new text to add would go over the character limit
+            if (newText.length + notepad.value.length > MAX_CHARS) {
+                // ignore the new text and turn the character counter red
+                charCount.setAttribute('style', 'color: red;');
+                return;
+            }
+            charCount.setAttribute('style', 'color: black;');
 
             const before = notepad.value.slice(0, notepad.selectionStart).trimEnd();
             const after = notepad.value.slice(notepad.selectionEnd).trimStart();
 
             notepad.value = (before + newText + after).trim();
-            browser.storage.sync.set({ notepadContent: notepad.value });
+            lastEditTime = Date.now();
+            updateCharacterCount();
+            await saveNotepad();
             break;
         default:
             console.error(`Unknown message category: ${message.category}`);
             throw new Error(`Unknown message category: ${message.category}`);
     }
 });
+
+async function saveNotepad() {
+    await sleep(SAVE_DELAY);
+    if (lastEditTime + SAVE_DELAY > Date.now()) {
+        return;
+    }
+
+    browser.storage.sync.set({ notepadContent: notepad.value });
+}
+
+function updateCharacterCount() {
+    charCount.textContent = `${notepad.value.length}/${MAX_CHARS} characters`;
+}