add inline auto cut

public/manifest.json

@@ -15,6 +15,12 @@
       "js": ["src/pages/content/index.js"]
     }
   ],
+  "web_accessible_resources": [
+    {
+      "matches": ["<all_urls>"],
+      "resources": ["src/pages/arguflow/index.js"]
+    }
+  ],
   "background": {
     "service_worker": "src/pages/background/index.js"
   },
@@ -28,7 +34,13 @@
       "128": "/icons/app128.png"
     }
   },
-  "permissions": ["storage", "system.display", "tabs", "unlimitedStorage"],
+  "permissions": [
+    "storage",
+    "system.display",
+    "tabs",
+    "unlimitedStorage",
+    "contextMenus"
+  ],
   "host_permissions": [
     "https://api.arguflow.ai/*",
     "https://api.arguflow.ai/*/*"

src/components/Login.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { login as authLogin } from './arguflow';
+  import { login as authLogin } from '../pages/arguflow';
   import TextButton from './TextButton.svelte';
   import Icon from './Icon.svelte';
   import { messenger } from './stores';
@@ -12,7 +12,7 @@
   let password = '';
   onMount(function () {
     emailInput.focus();
-    chrome.storage.local.get('arguflowLogin', (result) => {
+    chrome.storage.session.get('arguflowLogin', (result) => {
       if (result.arguflowLogin) {
         email = result.arguflowLogin.email;
         password = result.arguflowLogin.password;

src/components/Main.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import type { IStorage, ICard } from '../types';
+  import type {
+    IStorage,
+    ICard,
+    ChromeMessage,
+    GetCardDataMessage,
+  } from '../types';
   import { onMount, setContext, SvelteComponent } from 'svelte';
   import { copyCard } from './clipboard';
 
@@ -19,7 +24,6 @@
   import Messages from './Messages.svelte';
   import { createTransition, transitionDuration } from './transition';
   import { messenger, popups } from './stores';
-  import { autoCut as arguflowAutoCut, htmlToParas } from './arguflow';
 
   export let context: 'popup' | 'popout' | 'options';
 
@@ -32,19 +36,21 @@
   let shrunk: Writable<boolean> = writable(false);
   setContext('shrunk', shrunk);
 
-  let card: Writable<ICard> = writable(null);
+  let card: Writable<ICard | null> = writable(null);
   setContext('card', card);
   let history = new EditHistory(card);
   setContext('history', history);
 
   function requestCardData() {
-    return new Promise<ICard>((resolve, reject) => {
-      chrome.runtime.sendMessage(
-        { message: 'getCardData' },
-        function (response) {
-          resolve(response.card);
+    return new Promise<ICard | null>((resolve, reject) => {
+      let message: GetCardDataMessage = {
+        message: 'getCardData',
+      };
+      chrome.runtime.sendMessage(message, function (response: ChromeMessage) {
+        if (response?.message == 'gotCardData') {
+          resolve(response?.card ?? null);
         }
-      );
+      });
     });
   }
   let cardElement: HTMLElement;
@@ -97,7 +103,7 @@
 
   let tagText: SvelteComponent;
   onMount(function () {
-    requestCardData().then((cardData: ICard) => {
+    requestCardData().then((cardData: ICard | null) => {
       card.set(cardData);
     });
   });
@@ -123,23 +129,41 @@
       e.stopPropagation();
       copyAndMessage();
     }
-    if (e.key == 'p' && !(e.metaKey || e.ctrlKey || e.shiftKey)) {
+    if (e.code == 'KeyP') {
       e.preventDefault();
       e.stopPropagation();
       $currentTool = null;
     }
-    if (e.key == 'h' && !(e.metaKey || e.ctrlKey || e.shiftKey)) {
+    if (e.code == 'KeyH') {
       e.preventDefault();
       e.stopPropagation();
       $currentTool = 'highlight';
-    } else if (e.key == 'u' && !(e.metaKey || e.ctrlKey || e.shiftKey)) {
+    } else if (e.code == 'KeyU') {
       e.preventDefault();
       e.stopPropagation();
       $currentTool = 'underline';
-    } else if (e.key == 'e' && !(e.metaKey || e.ctrlKey || e.shiftKey)) {
+    } else if (e.code == 'KeyE') {
       e.preventDefault();
       e.stopPropagation();
       $currentTool = 'eraser';
+    } else if (e.code == 'KeyS') {
+      e.preventDefault();
+      e.stopPropagation();
+      if ($shrunk) {
+        messenger.addMessage('Unshrunk paras');
+      } else {
+        messenger.addMessage('Shrunk paras');
+      }
+      $shrunk = !$shrunk;
+    } else if (e.code == 'KeyM') {
+      e.preventDefault();
+      e.stopPropagation();
+      if ($card.paras.length > 1) {
+        history.action('condenseParas', {});
+        messenger.addMessage('Merged paras');
+      } else {
+        messenger.addMessage('Paras already merged');
+      }
     }
   }
   async function animateReload() {
@@ -151,10 +175,13 @@
     // trigger reflow
     cardElement.offsetWidth;
     Promise.all([animateTime, requestCardData()]).then(
-      ([_, cardData]: [any, ICard]) => {
+      ([_, cardData]: [any, ICard | null]) => {
         messenger.addMessage('Card reset!');
 
         card.set(cardData);
+        if (cardData == null) {
+          return;
+        }
         // scroll to top
         cardElement.scrollTop = 0;
 
@@ -182,15 +209,17 @@
           ><Icon name="popout" /></Button
         >
       {/if}
-      <Button tooltip={'Copy card'} on:click={copyAndMessage}
-        ><Icon name="copy" /></Button
-      >
+      {#if $card != null}
+        <Button tooltip={'Copy card'} on:click={copyAndMessage}
+          ><Icon name="copy" /></Button
+        >
+      {/if}
       <Button on:click={animateReload} tooltip={'Reset card'}
         ><Icon name="reload" /></Button
       >
     </ButtonGroup>
   </div>
-  {#if $card}
+  {#if $card != null}
     <div class="card" on:scroll={handleScroll} bind:this={cardElement}>
       <div class="tag" class:moreWidth={context != 'popup'}>
         <Text
@@ -343,8 +372,8 @@
     justify-content: center;
   }
   .container.fixedWidth {
-    width: 400px;
-    height: 500px;
+    width: 450px;
+    height: 550px;
   }
 
   .card {

src/components/ParaTools.svelte

@@ -9,13 +9,13 @@
   import { createTransition } from './transition';
   import { messenger, popups } from './stores';
   import {
-    auth,
     logout,
     autoCut as arguflowAutoCut,
     htmlToParas,
     getUserId,
     URL_USER,
-  } from './arguflow';
+  } from '../pages/arguflow';
+  import { auth } from './stores';
 
   let currentTool: Writable<null | 'highlight' | 'underline' | 'eraser'> =
     getContext('currentTool');
@@ -71,9 +71,6 @@
   );
 
   export let paras: IPara[];
-  function condenseParas() {
-    history.action('condenseParas', {});
-  }
 
   let showVault = false;
 </script>
@@ -152,44 +149,51 @@
         <Button
           on:click={() => ($currentTool = null)}
           selected={$currentTool == null}
-          tooltip="Mouse"
+          tooltip={{ content: 'Mouse', shortcut: 'p' }}
         >
           <Icon name="cursor" />
         </Button>
         <Button
           on:click={() => ($currentTool = 'highlight')}
           selected={$currentTool == 'highlight'}
-          tooltip="Highlight"
+          tooltip={{ content: 'Highlight', shortcut: 'h' }}
         >
           <Icon name="highlight" />
         </Button>
         <Button
           on:click={() => ($currentTool = 'underline')}
           selected={$currentTool == 'underline'}
-          tooltip="Underline"
+          tooltip={{ content: 'Underline', shortcut: 'u' }}
         >
           <Icon name="underline" />
         </Button>
         <Button
           on:click={() => ($currentTool = 'eraser')}
           selected={$currentTool == 'eraser'}
-          tooltip="Eraser"
+          tooltip={{ content: 'Eraser', shortcut: 'e' }}
         >
           <Icon name="eraser" />
         </Button>
       </ButtonGroup>
       <ButtonGroup {floating}>
         <Button
-          on:click={condenseParas}
+          on:click={() => history.action('condenseParas', {})}
           disabled={paras.length <= 1}
-          tooltip={paras.length <= 1 ? 'Paragraphs merged' : 'Merge paragraphs'}
+          tooltip={{
+            content:
+              paras.length <= 1 ? 'Paragraphs merged' : 'Merge paragraphs',
+            shortcut: 'm',
+          }}
         >
           <Icon name="merge" />
         </Button>
         <Button
           on:click={() => (shrunk = !shrunk)}
           selected={shrunk}
-          tooltip={shrunk ? 'Expand text' : 'Shrink text'}
+          tooltip={{
+            content: shrunk ? 'Expand text' : 'Shrink text',
+            shortcut: 's',
+          }}
         >
           <Icon name="shrink" />
         </Button>

src/components/Tooltip.svelte

@@ -7,6 +7,7 @@
   export let content: string = '';
   export let disabled: boolean = false;
   export let layout: string = 'bottom';
+  export let shortcut: string | null = null;
 
   let isHovered: boolean = false;
   let x: number = 0;
@@ -123,6 +124,9 @@
     >
       <div class="content">
         {content}
+        {#if shortcut != null}
+          <span class="shortcut">{shortcut}</span>
+        {/if}
       </div>
     </div>
   {/if}
@@ -150,4 +154,14 @@
   .tooltip.disabled {
     color: var(--text-tooltip-weak);
   }
+
+  .content {
+    display: flex;
+    flex-direction: row;
+    gap: var(--padding);
+  }
+
+  .shortcut {
+    color: var(--text-tooltip-weak);
+  }
 </style>