chore: bump svelte to version 4

package.json

@@ -16,12 +16,12 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@tsconfig/svelte": "^3.0.0",
+    "@tsconfig/svelte": "^5.0.2",
     "@types/wicg-file-system-access": "^2020.9.5",
     "better-sqlite3": "^7.6.2",
-    "carbon-components-svelte": "^0.70.7",
-    "carbon-icons-svelte": "^11.3.0",
-    "carbon-preprocess-svelte": "^0.9.1",
+    "carbon-components-svelte": "^0.80.0",
+    "carbon-icons-svelte": "^12.1.0",
+    "carbon-preprocess-svelte": "^0.10.0",
     "expect": "^26.6.2",
     "node-fetch": "^2.6.1",
     "pixelmatch": "^5.2.1",
@@ -32,13 +32,13 @@
     "rollup-plugin-css-only": "^4.3.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-svelte": "^7.1.5",
     "rollup-plugin-workbox": "^6.2.0",
     "ssri": "^10.0.1",
-    "svelte": "^3.59.2",
-    "svelte-preprocess": "^5.0.1",
+    "svelte": "^4.2.0",
+    "svelte-preprocess": "^5.0.4",
     "tslib": "^2.4.0",
-    "typescript": "^4.9.4",
+    "typescript": "^5.2.2",
     "wrangler": "^2.11"
   },
   "dependencies": {

src/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy, onMount, tick } from "svelte";
+  import { onDestroy, onMount, tick, type ComponentEvents } from "svelte";
   import { type Cell, cellFactory } from "./cells/Cells";
   import { BaseCell } from "./cells/BaseCell";
   import MathCell from "./cells/MathCell";
@@ -22,7 +22,7 @@
   import { getHash, API_GET_PATH, API_SAVE_PATH } from "./database/utility";
   import type { SheetPostBody, History } from "./database/types";
   import { type Sheet, getDefaultConfig } from "./sheet/Sheet";
-  import CellList from "./CellList.svelte";
+  import CellList from "./CellList.svelte"; 
   import type { MathField } from "./cells/MathField";
   import DocumentTitle from "./DocumentTitle.svelte";
   import UnitsDocumentation from "./UnitsDocumentation.svelte";
@@ -50,10 +50,13 @@
     SkipToContent,
     HeaderUtilities,
     HeaderGlobalAction,
-    HeaderActionLink,
     Content,
-    SideNav, SideNavMenuItem, SideNavMenu, SideNavItems, SideNavLink,
-    CodeSnippet
+    SideNav,
+    SideNavMenuItem,
+    SideNavMenu,
+    SideNavItems,
+    SideNavLink,
+    HeaderActionLink
   } from "carbon-components-svelte";
 
   import CloudUpload from "carbon-icons-svelte/lib/CloudUpload.svelte";
@@ -322,7 +325,7 @@
     $autosaveNeeded = false;
     await refreshSheet(true);
 
-    window.addEventListener("hashchange", handleSheetChange);
+    window.addEventListener("hashchange", handleHashChange);
     window.addEventListener("popstate", handleSheetChange);
     window.addEventListener("beforeunload", handleBeforeUnload);
     window.addEventListener("keydown", handleKeyboardShortcuts);
@@ -477,6 +480,15 @@
     $prefersReducedMotion = event.matches;
   }
 
+  function handleInsertMathCell(event: ComponentEvents<CellList>['insertMathCell']) {
+    addCell('math', event.detail.index+1);
+  }
+
+  function handleInsertInsertCell(event: ComponentEvents<CellList>['insertInsertCells']) {
+    $inCellInsertMode = true;
+    addCell('insert', event.detail.index+1);
+  }
+
   function handleKeyboardShortcuts(event: KeyboardEvent) {
     // this first switch statement is for keyboard shortcuts that should ignore defaultPrevented
     // since some components try to handle these particular events
@@ -563,41 +575,21 @@
         fileDropActive = false;
         break;
       case "Enter":
-        if ($cells[$activeCell]?.type === "math" && !modalInfo.modalOpen &&
-            !event[$modifierKey]) {
-          addCell('math', $activeCell+1);
-          break;
-        } else if (event.shiftKey && !modalInfo.modalOpen) {
-          let insertionPoint: number;
-          if ($activeCell < 0) {
-            insertionPoint = 0;
-          } else if ($activeCell >= $cells.length) {
-            insertionPoint = $cells.length 
-          } else {
-            insertionPoint = $activeCell + 1
-          }
-          addCell('math', insertionPoint);
+        if ($activeCell < 0 && event.shiftKey && !modalInfo.modalOpen) {
+          addCell('math', 0);
           break;
         } else if (event[$modifierKey] && !modalInfo.modalOpen) {
-          if (!$inCellInsertMode ) {
-            let insertionPoint: number;
-            if ($activeCell < 0) {
-              insertionPoint = 0;
-            } else if ($activeCell >= $cells.length) {
-              insertionPoint = $cells.length 
-            } else {
-              insertionPoint = $activeCell + 1
-            }
+          if ($activeCell < 0 && !$inCellInsertMode ) {
             $inCellInsertMode = true;
-            addCell('insert', insertionPoint);
+            addCell('insert', 0);
             break;
           } else {
             // Ctrl-Enter when in cell insert mode
             // break to prevent default so that Ctrl-Enter doesn't click insert math cell button
             break;
           }
         } else {
-          // not in a math cell and no shift or modifier
+          // there is already a cell selected, already handled directly by cell events
           return;
         }
       case "1":
@@ -647,7 +639,18 @@
     return hash;
   }
 
-  async function handleSheetChange(event: PopStateEvent | HashChangeEvent) {
+  async function handleHashChange(event: HashChangeEvent) {
+    const url = new URL(event.newURL);
+
+    // Old version of app use hash for sheet ID's, need to check for this possibility
+    // otherwise let default browser behavior happen (jumping to anchor location on)
+    if (url.hash.length === 23) {
+      event.preventDefault();
+      await refreshSheet();
+    }
+  }
+
+  async function handleSheetChange(event: PopStateEvent) {
     await refreshSheet();
   }
 
@@ -2084,6 +2087,11 @@ Please include a link to this sheet in the email to assist in debugging the prob
   />
 {/if}
 
+<!-- The nonstatic element actions (drag and drop to open file and click margin to unselect all) duplicate functionality  
+     available through keyboard shortcuts (Cntrl-O and Escape, respectively). File open is also avialable through a separate button -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+
 <div
   class="page"
   class:inIframe
@@ -2135,14 +2143,13 @@ Please include a link to this sheet in the email to assist in debugging the prob
 
     <HeaderUtilities>
       {#if !inIframe}
-        <div on:click={ (e) => handleLinkPushState(e, '/') }>
-          <HeaderActionLink 
-            id="new-sheet"
-            title="New Sheet"
-            href="/" 
-            icon={DocumentBlank}
-          /> 
-        </div>
+        <HeaderActionLink
+          id="new-sheet"
+          title="New Sheet"
+          href="/" 
+          icon={DocumentBlank}
+          on:click={ (e) => handleLinkPushState(e, '/') }
+        />
         <HeaderGlobalAction
           id="open-sheet"
           title="Open Sheet From File"
@@ -2161,17 +2168,13 @@ Please include a link to this sheet in the email to assist in debugging the prob
           on:click={handleGetShareableLink} 
           icon={CloudUpload}
         />
-        <div
-          class="hide-when-really-narrow"
+        <HeaderActionLink
+          href={`/${tutorialHash}`}
+          title="Tutorial"
+          rel="nofollow"
+          icon={Help}
           on:click={(e) => handleLinkPushState(e, `/${tutorialHash}`) }
-        >
-          <HeaderActionLink 
-            href={`/${tutorialHash}`}
-            title="Tutorial"
-            rel="nofollow"
-            icon={Help}
-          />
-        </div>
+        />
         <div class="dot-container">
           <HeaderGlobalAction 
             title={"Sheet Settings" + (usingDefaultConfig ? "" : " (Modified)")}
@@ -2382,6 +2385,8 @@ Please include a link to this sheet in the email to assist in debugging the prob
         on:insertSheet={loadInsertSheetModal}
         on:updateNumberFormat={loadCellNumberFormatModal}
         on:generateCode={loadGenerateCodeModal}
+        on:insertMathCellAfter={handleInsertMathCell}
+        on:insertInsertCellAfter={handleInsertInsertCell}
       />
 
       <div class="print-logo">

src/Cell.svelte

@@ -20,7 +20,6 @@
   export let container = null;
 
   let selected = false;
-  let pointerDown = false;
   let contentDiv = null;
 
   const dispatch = createEventDispatcher();
@@ -79,16 +78,6 @@
     });
   }
 
-
-  function handlePointerDown(e) {
-    pointerDown = true;
-  }
-
-  function handleFocusIn() {
-    // this covers the case where someone tabs to get a cell element into focus
-    handleClickInCell(index);
-  }
-
   $: if ($activeCell === index) {
     selected = true;
   } else {
@@ -183,6 +172,7 @@
       </IconButton>
     </span>
     <span
+      role="none"
       class="handle button-container"
       on:mousedown={startDrag}
       on:touchstart|nonpassive={startDrag}
@@ -204,31 +194,73 @@
     </span>
   </div>
 
+  <!-- The static element action to select is cell is made available through the keyboard shortcuts
+       of Ctrl+ArrowUp and Ctrl+ArrowDown -->
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+
   <div
     class="content" class:selected
     id={`cell-${index}`}
     on:click|capture={() => handleClickInCell(index)}
-    on:focusin={handleFocusIn}
-    on:pointerdown={handlePointerDown}
-    on:pointerup={() => pointerDown = false}
+    on:focusin={() => handleClickInCell(index)}
     bind:this={contentDiv}
   >
     {#if $cells[index]?.type === "math"}
-      <MathCell on:updateNumberFormat on:generateCode index={index} mathCell={$cells[index]}/>
+      <MathCell
+        on:updateNumberFormat
+        on:generateCode
+        on:insertMathCellAfter
+        on:insertInsertCellAfter
+        index={index}
+        mathCell={$cells[index]}
+      />
     {:else if $cells[index]?.type === "documentation"}
-      <DocumentationCell index={index} documentationCell={$cells[index]}/>
+      <DocumentationCell
+        on:insertMathCellAfter
+        on:insertInsertCellAfter
+        index={index}
+        documentationCell={$cells[index]}
+      />
     {:else if $cells[index]?.type === "plot"}
-      <PlotCell index={index} plotCell={$cells[index]}/>
+      <PlotCell
+        on:insertMathCellAfter
+        on:insertInsertCellAfter
+        index={index}
+        plotCell={$cells[index]}
+      />
     {:else if $cells[index]?.type === "table"}
-      <TableCell index={index} tableCell={$cells[index]}/>
+      <TableCell
+        on:insertMathCellAfter
+        on:insertInsertCellAfter
+        index={index}
+        tableCell={$cells[index]}
+      />
     {:else if $cells[index]?.type === "piecewise"}
-      <PiecewiseCell index={index} piecewiseCell={$cells[index]}/>
+      <PiecewiseCell
+        on:insertMathCellAfter
+        on:insertInsertCellAfter
+        index={index}
+        piecewiseCell={$cells[index]}
+      />
     {:else if $cells[index]?.type === "system"}
-      <SystemCell index={index} systemCell={$cells[index]}/>
+      <SystemCell
+        on:insertMathCellAfter
+        on:insertInsertCellAfter
+        index={index}
+        systemCell={$cells[index]}
+      />
     {:else if $cells[index]?.type === "deleted"}
-      <DeletedCell index={index} deletedCell={$cells[index]}/>
+      <DeletedCell
+        index={index}
+        deletedCell={$cells[index]}
+      />
     {:else if $cells[index]?.type === "insert"}
-      <InsertCell on:insertSheet index={index} insertCell={$cells[index]}/>
+      <InsertCell
+        on:insertSheet
+        index={index}
+        insertCell={$cells[index]}
+      />
     {/if}
   </div>
 

src/CellList.svelte

@@ -135,13 +135,14 @@
 </script>
 
 <style>
-  div.sheet-body {
+  ul.sheet-body {
     display: flex;
     flex-direction: column;
+    list-style-type: none;
   }
 
   @media print {
-    div.sheet-body {
+    ul.sheet-body {
       display: block;
     }
   }
@@ -167,10 +168,13 @@
 
 <div id="dragging-skeleton" class:dragging bind:this={draggingSkeleton}></div>
 
-<div class="sheet-body" bind:this={sheetBody}>
+<ul
+  class="sheet-body"
+  bind:this={sheetBody}
+>
 
   {#each $cells as cell, i (cell.id)}
-    <div>
+    <li>
       <ButtonBar on:insertSheet index={i} />
       <div class="outer-container" class:first={i===0} class:last={i===$cells.length-1}
         bind:this={containers[i]}
@@ -182,10 +186,14 @@
           on:insertSheet 
           on:updateNumberFormat
           on:generateCode
+          on:insertMathCellAfter
+          on:insertInsertCellAfter
         />
       </div>
-    </div>
+    </li>
   {/each}
-  <ButtonBar on:insertSheet index={$cells.length} last={true}/>  
-</div>
+  <li>
+    <ButtonBar on:insertSheet index={$cells.length} last={true}/>
+  </li>
+</ul>