Merge branch 'develop' into develop

package.json

@@ -24,19 +24,19 @@
  "devDependencies": {
  "@cypress/snapshot": "2.1.7",
  "@sveltejs/adapter-static": "2.0.3",
- "@sveltejs/kit": "1.25.0",
+ "@sveltejs/kit": "1.25.2",
  "@testing-library/jest-dom": "5.17.0",
  "@testing-library/svelte": "3.2.2",
- "@types/pako": "2.0.0",
- "@types/uuid": "9.0.4",
+ "@types/pako": "2.0.3",
+ "@types/uuid": "9.0.7",
  "@typescript-eslint/eslint-plugin": "5.62.0",
  "@typescript-eslint/parser": "5.62.0",
  "@vitest/ui": "^0.34.0",
  "autoprefixer": "^10.4.14",
  "c8": "7.14.0",
  "chai": "^4.3.7",
  "cssnano": "^6.0.0",
- "cy-verify-downloads": "0.2.0",
+ "cy-verify-downloads": "0.2.2",
  "cypress": "12.17.4",
  "cypress-localstorage-commands": "2.2.4",
  "eslint": "8.49.0",
@@ -73,7 +73,7 @@
  "daisyui": "2.52.0",
  "dayjs": "^1.11.7",
  "js-base64": "3.7.5",
- "mermaid": "10.4.0",
+ "mermaid": "10.6.1",
  "monaco-editor": "0.43.0",
  "pako": "2.1.0",
  "random-word-slugs": "0.1.7",

src/lib/components/Actions.svelte

@@ -53,7 +53,7 @@
  if (!context) {
  throw new Error('context not found');
  }
- context.fillStyle = 'white';
+ context.fillStyle = `hsl(${window.getComputedStyle(document.body).getPropertyValue('--b1')})`;
  context.fillRect(0, 0, canvas.width, canvas.height);
 
  const image = new Image();

src/lib/components/Navbar.svelte

@@ -8,6 +8,11 @@
 
 <script lang="ts">
  import Theme from './Theme.svelte';
+ let isMenuOpen = false;
+
+ function toggleMenu() {
+ isMenuOpen = !isMenuOpen;
+ }
 
  interface Link {
  href: string;
@@ -18,7 +23,7 @@
  const links: Link[] = [
  {
  title: 'Documentation',
- href: 'https://mermaid.js.org/intro/n00b-gettingStarted.html'
+ href: 'https://mermaid.js.org/intro/getting-started.html'
  },
  {
  title: 'Tutorial',
@@ -38,7 +43,7 @@
  },
  {
  href: 'https://mermaidchart.com',
- img: '/mermaidchart-logo.svg'
+ img: './mermaidchart-logo.svg'
  }
  ];
 </script>
@@ -49,19 +54,48 @@
  <a href="/">Mermaid<span class="text-xs font-thin">v{version}</span> Live Editor</a>
  </span>
  </div>
- <label for="menu-toggle" class="pointer-cursor lg:hidden block"
- ><svg
+
+ <label
+ for="menu-toggle"
+ class={isMenuOpen ? 'hidden' : 'pointer-cursor lg:hidden fixed right-4 z-[1000]'}>
+ <svg
+ xmlns="http:https://www.w3.org/2000/svg"
+ xmlns:xlink="http:https://www.w3.org/1999/xlink"
  class="fill-current"
+ width="20"
+ height="20"
+ viewBox="0 0 20 20">
+ <title>Menu</title>
+ <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+ </svg>
+ </label>
+
+ <!-- Cross SVG -->
+ <label
+ for="menu-toggle"
+ class={isMenuOpen ? 'pointer-cursor lg:hidden fixed right-4 z-[1000]' : 'hidden'}>
+ <svg
  xmlns="http:https://www.w3.org/2000/svg"
+ xmlns:xlink="http:https://www.w3.org/1999/xlink"
+ class="fill-current"
  width="20"
  height="20"
- viewBox="0 0 20 20"
- ><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" /></svg
- ></label>
- <input class="hidden" type="checkbox" id="menu-toggle" />
+ viewBox="0 0 20 20">
+ <title>Cross</title>
+ <line x1="5" y1="5" x2="15" y2="15" stroke="white" stroke-width="2" />
+ <line x1="5" y1="15" x2="15" y2="5" stroke="white" stroke-width="2" />
+ </svg>
+ </label>
 
- <Theme />
+ <input
+ class="hidden"
+ type="checkbox"
+ id="menu-toggle"
+ bind:checked={isMenuOpen}
+ on:click={toggleMenu} />
+
  <div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
+ <Theme />
  <ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
  {#each links as { title, href, icon, img }}
  <li>
@@ -81,10 +115,16 @@
  </div>
 </div>
 
+
 <style>
  #menu-toggle:checked + #menu {
- display: block;
+ position: absolute;
+ top: 2.5rem;
+ padding: 1rem 0;
+ background: #661ae6;
+ display: flex;
  }
+
  .navbar {
  z-index: 10000;
  }

src/lib/util/monacoExtra.ts

@@ -204,6 +204,11 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
  'Rel_Back',
  'RelIndex'
  ]
+ },
+ sankey: {
+ typeKeywords: ['sankey-beta'],
+ blockKeywords: [],
+ keywords: []
  }
  };
 
@@ -248,6 +253,7 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
  [/^\s*stateDiagram(-v2)?/, 'typeKeyword', 'stateDiagram'],
  [/^\s*er(Diagram)?/, 'typeKeyword', 'erDiagram'],
  [/^\s*requirement(Diagram)?/, 'typeKeyword', 'requirementDiagram'],
+ [/^\s*sankey-beta/m, 'typeKeyword', 'sankey'],
  [
  /^\s*(C4Context|C4Container|C4Component|C4Dynamic|C4Deployment)/m,
  'typeKeyword',
@@ -535,6 +541,16 @@ export const initEditor = (monacoEditor: typeof Monaco): void => {
  [/,/, 'delimiter.bracket'],
  [/\)/, { next: '@pop', token: 'delimiter.bracket' }],
  [/[^),]/, 'string']
+ ],
+ sankey: [
+ configDirectiveHandler,
+ [/(title)(.*)/, ['keyword', 'string']],
+ [/(accTitle|accDescr)(\s*:)(\s*[^\n\r]+$)/, ['keyword', 'delimiter.bracket', 'string']],
+ [/".*?"/, 'string'],
+ [/[A-Za-z]+/, 'string'],
+ [/\s*\d+/, 'number'],
+ [/,/, 'delimiter.bracket'],
+ [/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
  ]
  }
  });

src/routes/edit/+page.svelte

@@ -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="w-5 h-5" alt="Mermaid chart logo" />Save to
  Mermaid Chart</a>
  </div>