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,16 +82,16 @@
  </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>
  </div>
 
  <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:https://www.w3.org/2000/svg"
  xmlns:xlink="http:https://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:https://www.w3.org/2000/svg"
  xmlns:xlink="http:https://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:https://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:https://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,20 +127,20 @@
 
 {#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.
  {/if}
  </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,15 +176,15 @@
  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>
 
  <div class="flex-1 overflow-auto">
  <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>