chore: Auto format and fix warnings

.vscode/settings.json

@@ -16,6 +16,8 @@
     "mindmap",
     "Pageview",
     "pako",
+    "panzoom",
+    "pzoom",
     "Serde",
     "serdes",
     "tailwindcss",

src/lib/components/Actions.svelte

@@ -185,7 +185,7 @@
 </script>
 
 <Card title="Actions" isOpen={false}>
-  <div class="flex flex-wrap gap-2 m-2">
+  <div class="m-2 flex flex-wrap gap-2">
     {#if isClipboardAvailable()}
       <button class="action-btn w-full" on:click={onCopyClipboard}
         ><i class="far fa-copy mr-2" /> Copy Image to clipboard
@@ -213,7 +213,7 @@
       </button>
     </a>
 
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       PNG size
       <label for="autosize">
         <input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} /> Auto
@@ -238,7 +238,7 @@
       {/if}
     </div>
 
-    <div class="w-full flex gap-2 items-center">
+    <div class="flex w-full items-center gap-2">
       <input class="input" id="markdown" type="text" value={mdCode} on:click={onCopyMarkdown} />
       <label for="markdown">
         <button class="btn btn-primary btn-md flex-auto" on:click={onCopyMarkdown}>
@@ -247,7 +247,7 @@
       </label>
     </div>
 
-    <div class="w-full flex gap-2 items-center">
+    <div class="flex w-full items-center gap-2">
       <input
         class="input"
         id="gist"
@@ -259,8 +259,8 @@
       </label>
     </div>
     {#if isNetlify}
-      <div class="w-full flex items-center justify-center">
-        <a class="link underline text-gray-500 text-sm" href="https://netlify.com">
+      <div class="flex w-full items-center justify-center">
+        <a class="link text-sm text-gray-500 underline" href="https://netlify.com">
           This site is powered by Netlify
         </a>
       </div>

src/lib/components/Card/Card.svelte

@@ -11,20 +11,22 @@
   $: isTabsShown = isOpen && tabs.length > 0;
 </script>
 
-<div class="card rounded overflow-hidden m-2 flex-grow flex flex-col shadow-2xl">
+<div class="card m-2 flex flex-grow flex-col overflow-hidden rounded shadow-2xl">
   <div
+    role="toolbar"
+    tabindex="0"
     class="bg-primary p-2 {isTabsShown ? 'pb-0' : ''} flex-none cursor-pointer"
     on:click={() => (isOpen = !isOpen)}
     on:keypress={() => (isOpen = !isOpen)}>
     <div class="flex justify-between">
       <Tabs on:select {tabs} bind:isOpen {title} {isCloseable} {activeTabID} />
-      <div class="flex gap-x-4 items-center {isTabsShown ? '-mt-2' : ''}">
+      <div class="flex items-center gap-x-4 {isTabsShown ? '-mt-2' : ''}">
         <slot name="actions" />
       </div>
     </div>
   </div>
   {#if isOpen}
-    <div class="card-body p-0 flex-grow overflow-auto text-base-content" transition:slide>
+    <div class="card-body flex-grow overflow-auto p-0 text-base-content" transition:slide>
       <slot />
     </div>
   {/if}

src/lib/components/Card/Tabs.svelte

@@ -20,6 +20,8 @@
 
 <div class="flex cursor-default">
   <span
+    role="menubar"
+    tabindex="0"
     class="mr-2 font-semibold"
     on:click|stopPropagation={() => (isOpen = !isOpen)}
     on:keypress|stopPropagation={() => (isOpen = !isOpen)}>
@@ -31,6 +33,8 @@
     <ul class="tabs" transition:fade>
       {#each tabs as tab}
         <div
+          role="tab"
+          tabindex="0"
           class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}"
           on:click|stopPropagation={() => toggleTabs(tab)}
           on:keypress|stopPropagation={() => toggleTabs(tab)}>

src/lib/components/Editor.svelte

@@ -64,7 +64,7 @@
     }
   };
 
-  onMount(async () => {
+  onMount(() => {
     self.MonacoEnvironment = {
       getWorker(_, label) {
         if (label === 'json') {

src/lib/components/History/History.svelte

@@ -57,13 +57,13 @@
     input.type = 'file';
     input.accept = 'application/json';
     input.addEventListener('change', ({ target }: Event) => {
-      const file = (<HTMLInputElement>target).files[0];
+      const file = (target as HTMLInputElement)?.files?.[0];
       if (!file) {
         return;
       }
       const reader = new FileReader();
       reader.onload = (e) => {
-        const data: HistoryEntry[] = JSON.parse(e.target.result as string);
+        const data: HistoryEntry[] = JSON.parse(e.target?.result as string);
         restoreHistory(data);
       };
       reader.readAsText(file);
@@ -129,34 +129,34 @@
   <div slot="actions">
     <button
       id="uploadHistory"
-      class="btn btn-xs btn-secondary w-12"
+      class="btn btn-secondary btn-xs w-12"
       on:click|stopPropagation={() => uploadHistory()}
       title="Upload history"><i class="fa fa-upload" /></button>
     {#if $historyStore.length > 0}
       <button
         id="downloadHistory"
-        class="btn btn-xs btn-secondary w-12"
+        class="btn btn-secondary btn-xs w-12"
         on:click|stopPropagation={() => downloadHistory()}
         title="Download history"><i class="fa fa-download" /></button>
     {/if}
     |
     <button
       id="saveHistory"
-      class="btn btn-xs btn-success w-12"
+      class="btn btn-success btn-xs w-12"
       on:click|stopPropagation={() => saveHistory()}
       title="Save current state"><i class="far fa-save" /></button>
     {#if $historyModeStore !== 'loader'}
       <button
         id="clearHistory"
-        class="btn btn-xs btn-error w-12"
+        class="btn btn-error btn-xs w-12"
         on:click|stopPropagation={() => clearHistory()}
         title="Delete all saved states"><i class="fas fa-trash-alt" /></button>
     {/if}
   </div>
-  <ul class="p-2 space-y-2 overflow-auto h-56" id="historyList">
+  <ul class="h-56 space-y-2 overflow-auto p-2" id="historyList">
     {#if $historyStore.length > 0}
       {#each $historyStore as { id, state, time, name, url, type }}
-        <li class="rounded p-2 shadow flex-col">
+        <li class="flex-col rounded p-2 shadow">
           <div class="flex">
             <div class="flex-1">
               <div class="flex flex-col text-base-content">
@@ -165,14 +165,14 @@
                     href={url}
                     target="_blank"
                     title="Open revision in new tab"
-                    class="hover:underline text-blue-500">{name}</a>
+                    class="text-blue-500 hover:underline">{name}</a>
                 {:else}
                   <span>{name}</span>
                 {/if}
-                <span class="text-gray-400 text-sm">{relativeTime(time)}</span>
+                <span class="text-sm text-gray-400">{relativeTime(time)}</span>
               </div>
             </div>
-            <div class="flex gap-2 content-center">
+            <div class="flex content-center gap-2">
               <button class="btn btn-success" on:click={() => restoreHistoryItem(state)}
                 ><i class="fas fa-undo mr-1" />Restore</button>
               {#if type !== 'loader'}

src/lib/components/Navbar.svelte

@@ -62,8 +62,13 @@
 
 {#if activePromotion}
   <div
-    class="z-10 w-full top-bar bg-gradient-to-r from-[#bd34fe] to-[#ff3670] flex items-center text-center justify-center p-1 text-white">
-    <div class="flex flex-grow" on:click={trackBannerClick} on:keypress={trackBannerClick}>
+    class="top-bar z-10 flex w-full items-center justify-center bg-gradient-to-r from-[#bd34fe] to-[#ff3670] p-1 text-center text-white">
+    <div
+      class="flex flex-grow"
+      role="button"
+      tabindex="0"
+      on:click={trackBannerClick}
+      on:keypress={trackBannerClick}>
       <svelte:component this={activePromotion.component} />
     </div>
     <button
@@ -77,8 +82,8 @@
   </div>
 {/if}
 
-<div class="navbar shadow-lg bg-primary p-0">
-  <div class="flex-1 px-2 mx-2">
+<div class="navbar bg-primary p-0 shadow-lg">
+  <div class="mx-2 flex-1 px-2">
     <span class="text-lg font-bold">
       <a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
     </span>
@@ -86,7 +91,7 @@
 
   <label
     for="menu-toggle"
-    class={isMenuOpen ? 'hidden' : 'pointer-cursor lg:hidden fixed right-4 z-[1000]'}>
+    class={isMenuOpen ? 'hidden' : 'pointer-cursor fixed right-4 z-[1000] lg:hidden'}>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -102,7 +107,7 @@
   <!-- Cross SVG -->
   <label
     for="menu-toggle"
-    class={isMenuOpen ? 'pointer-cursor lg:hidden fixed right-4 z-[1000]' : 'hidden'}>
+    class={isMenuOpen ? 'pointer-cursor fixed right-4 z-[1000] lg:hidden' : 'hidden'}>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -123,9 +128,9 @@
     bind:checked={isMenuOpen}
     on:click={toggleMenu} />
 
-  <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
+  <div class="hidden w-full lg:flex lg:w-auto lg:items-center" id="menu">
     <Theme />
-    <ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
+    <ul class="items-center justify-between pt-4 text-base lg:flex lg:pt-0">
       {#each links as { title, href, icon, img }}
         <li>
           <a class="btn btn-ghost" target="_blank" {href}>

src/lib/components/Preset.svelte

@@ -153,14 +153,14 @@
 </script>
 
 <Card title="Sample Diagrams" isOpen={false}>
-  <div class="flex flex-wrap p-2 gap-2">
+  <div class="flex flex-wrap gap-2 p-2">
     {#each diagramOrder as sample}
       <button
-        class="btn btn-sm btn-primary w-28 normal-case flex-grow"
+        class="btn btn-primary btn-sm w-28 flex-grow normal-case"
         on:click={() => loadSampleDiagram(sample)}>
         {sample}
         {#if newDiagrams.includes(sample)}
-          <span class="ml-2 fa fa-heart" />
+          <span class="fa fa-heart ml-2" />
         {/if}
       </button>
     {/each}

src/lib/components/Theme.svelte

@@ -26,14 +26,14 @@
   ];
 </script>
 
-<div class="hidden lg:block dropdown">
+<div class="dropdown hidden lg:block">
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <div tabindex="0" class="btn btn-ghost">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
-      class="inline-block w-6 h-6 stroke-current md:mr-2"
+      class="inline-block h-6 w-6 stroke-current md:mr-2"
       ><path
         stroke-linecap="round"
         stroke-linejoin="round"
@@ -43,17 +43,19 @@
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 1792 1792"
-      class="inline-block w-4 h-4 ml-1 fill-current"
+      class="ml-1 inline-block h-4 w-4 fill-current"
       ><path
         d="M1395 736q0 13-10 23l-466 466q-10 10-23 10t-23-10l-466-466q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l393 393 393-393q10-10 23-10t23 10l50 50q10 10 10 23z" /></svg>
   </div>
   <div
-    class="mt-14 overflow-y-auto shadow-2xl top-px dropdown-content h-96 w-56 bg-base-200 text-base-content">
+    class="dropdown-content top-px mt-14 h-96 w-56 overflow-y-auto bg-base-200 text-base-content shadow-2xl">
     <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-    <ul tabindex="0" class="p-4 menu compact">
+    <ul tabindex="0" class="menu compact p-4">
       {#each themes as theme}
         <li class:bordered={$themeStore.theme !== undefined && theme.includes($themeStore.theme)}>
           <span
+            role="menuitem"
+            tabindex="0"
             class="btn btn-ghost justify-start"
             on:click={() => setTheme(theme)}
             on:keypress={() => setTheme(theme)}>{theme}</span>

src/lib/components/View.svelte

@@ -127,12 +127,12 @@
 
 {#if (error && $stateStore.error instanceof Error) || outOfSync}
   <div
-    class="absolute w-full p-2 z-10 font-mono {error
+    class="absolute z-10 w-full p-2 font-mono {error
       ? 'text-red-600'
       : 'text-yellow-600'} bg-base-100 bg-opacity-80 text-left"
     id="errorContainer">
     {#if error}
-      {@html $stateStore.error?.toString().replace(/\n/g, '<br />')}
+      {@html $stateStore.error?.toString().replaceAll('\n', '<br />')}
     {:else}
       Diagram out of sync. <br />
       Press <i class="fas fa-sync" /> (Sync button) or <kbd>{cmdKey} + Enter</kbd> to sync.
@@ -140,7 +140,7 @@
   </div>
 {/if}
 
-<div id="view" bind:this={view} class="p-2 h-full" class:error class:outOfSync>
+<div id="view" bind:this={view} class="h-full p-2" class:error class:outOfSync>
   <div id="container" bind:this={container} class="h-full overflow-auto" class:hide />
 </div>
 

src/lib/util/promos/Holiday2023.svelte

@@ -1,7 +1,7 @@
 <a
   href="https://www.mermaidchart.com/app/user/billing/checkout?coupon=HOLIDAYS2023"
   target="_blank"
-  class="tracking-wide flex-grow">
+  class="flex-grow tracking-wide">
   Get AI, team collaboration, storage, and more with
   <span class="font-bold underline">Mermaid Chart Pro. Start free trial today & get 25% off.</span>
 </a>

src/routes/+layout.svelte

@@ -47,8 +47,8 @@
 
 {#if $loadingStateStore.loading}
   <div
-    class="w-screen h-screen z-50 absolute left-0 top-0 bg-gray-600 opacity-50 flex align-middle justify-center">
-    <div class="text-indigo-100 text-4xl font-bold my-auto">
+    class="absolute left-0 top-0 z-50 flex h-screen w-screen justify-center bg-gray-600 align-middle opacity-50">
+    <div class="my-auto text-4xl font-bold text-indigo-100">
       <div class="loader mx-auto" />
       <div>{$loadingStateStore.message}</div>
     </div>

src/routes/edit/+page.svelte

@@ -111,14 +111,14 @@
   });
 </script>
 
-<div class="h-full flex flex-col overflow-hidden">
+<div class="flex h-full flex-col overflow-hidden">
   <Navbar />
-  <div class="flex-1 flex overflow-hidden">
-    <div class="hidden md:flex flex-col" id="editorPane" style="width: 40%">
+  <div class="flex flex-1 overflow-hidden">
+    <div class="hidden flex-col md:flex" id="editorPane" style="width: 40%">
       <Card on:select={tabSelectHandler} {tabs} isCloseable={false} {activeTabID} title="Mermaid">
         <div slot="actions" class="flex flex-row items-center">
           <div class="form-control flex-row items-center">
-            <label class="cursor-pointer label" for="autoSync">
+            <label class="label cursor-pointer" for="autoSync">
               <span> Auto sync</span>
               <input
                 type="checkbox"
@@ -155,10 +155,10 @@
       </div>
     </div>
     <div id="resizeHandler" class="hidden md:block" />
-    <div class="flex-1 flex flex-col overflow-hidden">
+    <div class="flex flex-1 flex-col overflow-hidden">
       <Card title="Diagram" isCloseable={false}>
         <div slot="actions" class="flex flex-row items-center gap-2">
-          <label class="cursor-pointer label py-0" for="panZoom">
+          <label class="label cursor-pointer py-0" for="panZoom">
             <span>Pan & Zoom</span>
             <input
               type="checkbox"
@@ -176,7 +176,7 @@
             target="_blank"
             class="btn btn-secondary btn-xs gap-1 bg-[#FF3570]"
             title="Save diagram in Mermaid Chart"
-            ><img src="./mermaidchart-logo.svg" class="w-5 h-5" alt="Mermaid chart logo" />Save to
+            ><img src="./mermaidchart-logo.svg" class="h-5 w-5" alt="Mermaid chart logo" />Save to
             Mermaid Chart</a>
         </div>
 
@@ -184,7 +184,7 @@
           <View />
         </div>
       </Card>
-      <div class="md:hidden rounded shadow p-2 mx-2">
+      <div class="mx-2 rounded p-2 shadow md:hidden">
         Code editing not supported on mobile. Please use a desktop browser.
       </div>
     </div>