"mermaid": "10.1.0"

.vscode/settings.json

@@ -1,8 +1,10 @@
 {
  "editor.formatOnSave": true,
+ "cSpell.blockCheckingWhenLineLengthGreaterThan": 150,
  "cSpell.words": [
  "asyncable",
  "Browserslist",
+ "ckppp",
  "corg",
  "cssnano",
  "daisyui",
@@ -14,7 +16,8 @@
  "pako",
  "Serde",
  "serdes",
- "tailwindcss"
+ "tailwindcss",
+ "uparrow"
  ],
  "vitest.commandLine": "yarn test:unit",
  "vitest.enable": true,

cypress.config.js

@@ -6,10 +6,10 @@ export default defineConfig({
  viewportWidth: 1440,
  viewportHeight: 768,
  snapshotFileName: './cypress/snapshots.js',
- defaultCommandTimeout: 16000,
- requestTimeout: 16000,
+ defaultCommandTimeout: 5000,
+ requestTimeout: 5000,
  retries: {
- runMode: 4,
+ runMode: 2,
  openMode: 0
  },
  e2e: {

cypress/e2e/actions.spec.ts

@@ -1,4 +1,4 @@
-import { verifyFileSizeGreaterThan } from './util';
+import { typeInEditor, verifyFileSizeGreaterThan } from './util';
 describe('Check actions', () => {
  beforeEach(() => {
  cy.clearLocalStorage();
@@ -10,7 +10,7 @@ describe('Check actions', () => {
  cy.get('#markdown')
  .invoke('val')
  .then((oldText) => {
- cy.get('#editor').click('bottom').type('{enter}C --> HistoryTest');
+ typeInEditor('C --> HistoryTest', { bottom: true, newline: true });
  cy.get('#markdown')
  .invoke('val')
  .then((newText) => {
@@ -29,7 +29,7 @@ describe('Check actions', () => {
  cy.clock(new Date(2022, 0, 1).getTime());
 
  cy.get(`#downloadPNG`).click();
- verifyFileSizeGreaterThan('diagram', 'png', 35_000);
+ verifyFileSizeGreaterThan('diagram', 'png', 34_000);
 
  cy.get(`#downloadSVG`).click();
  verifyFileSizeGreaterThan('diagram', 'svg', 10_000);

cypress/e2e/diagramUpdate.spec.ts

@@ -1,16 +1,17 @@
-import { getEditor, cmd } from './util';
+import { typeInEditor, cmd } from './util';
 
 describe('Auto sync tests', () => {
  beforeEach(() => {
  cy.clearLocalStorage();
  cy.visit('/');
+ cy.url().should('contain', '/edit#pako');
  });
 
  it('should dim diagram when code is edited', () => {
  cy.contains('Auto sync').click();
  cy.get('#view').should('not.have.class', 'outOfSync');
  cy.get('#errorContainer').should('not.exist');
- getEditor({ bottom: true, newline: true }).type(' C --> Test');
+ typeInEditor(' C --> Test', { bottom: true });
  cy.get('#view').should('have.class', 'outOfSync');
  cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
  cy.getLocalStorage('codeStore').snapshot();
@@ -19,10 +20,10 @@ describe('Auto sync tests', () => {
  it('should update diagram when shortcut is used', () => {
  cy.contains('Auto sync').click();
  cy.get('#view').should('not.have.class', 'outOfSync');
- getEditor().type(' C --> Test');
+ typeInEditor(' C --> Test');
  cy.get('#view').should('have.class', 'outOfSync');
  cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
- getEditor().type(`${cmd}{enter}`);
+ typeInEditor(`${cmd}{enter}`);
  cy.get('#errorContainer').should('not.exist');
  cy.get('#view').should('not.have.class', 'outOfSync');
  });
@@ -38,21 +39,22 @@ describe('Auto sync tests', () => {
  it('should not dim diagram when code is in sync', () => {
  cy.contains('Auto sync').click();
  cy.get('#view').should('not.have.class', 'outOfSync');
- getEditor().type(' C --> Test');
+ typeInEditor(' C --> Test');
  cy.get('#view').should('have.class', 'outOfSync');
  cy.get('[data-cy=sync]').click();
  cy.get('#view').should('not.have.class', 'outOfSync');
  cy.get('#autoSync').check();
- getEditor().type('ing');
+ typeInEditor('ing');
  cy.get('#view').should('not.have.class', 'outOfSync');
  cy.getLocalStorage('codeStore').snapshot();
  });
 
  it('supports commenting code out/in', () => {
- getEditor({ bottom: true, newline: false }).type(`{uparrow}${cmd}/`);
+ cy.get('#editor').contains('Car').click();
+ cy.focused().type(`${cmd}/`);
  cy.get('#view').contains('Car').should('not.exist');
 
- getEditor().type(`{uparrow}${cmd}/`);
+ typeInEditor(`{uparrow}${cmd}/`);
  cy.get('#view').contains('Car').should('exist');
  });
 
@@ -61,7 +63,7 @@ describe('Auto sync tests', () => {
  '/edit#pako:eNpljjEKwzAMRa8SNOcEnlt6gK5eVFvYJsgOqkwpIXevg9smEE1PnyfxF3DFExgISW-CczQ2D21cYU7a-SGYXRwyvTp9jUhuKlVP-eHy7zA-leQsMEmg_QOM0BLG5FujZVMsaCQmC6ahR5ks2Lw2r84ela4-aREwKpVGwKrl_s7ut3fnkjAIcg_XDzuaUhs'
  );
  cy.get('#errorContainer').should('not.exist');
- getEditor({ newline: true }).type(`branch test`);
+ typeInEditor(`branch test`, { bottom: true, newline: true });
  cy.get('#editor').contains('branch test').should('exist');
  cy.get('#errorContainer')
  .contains(
@@ -72,9 +74,9 @@ describe('Auto sync tests', () => {
 
  it('should update diagram after entire text is removed', () => {
  // https://github.com/mermaid-js/mermaid-live-editor/issues/1102
- getEditor().type(`${cmd} a {backspace}`);
- getEditor().type('graph LR');
- getEditor().type(' {enter} A-->Car');
+ typeInEditor(`${cmd} a {backspace}`);
+ typeInEditor('graph LR');
+ typeInEditor(' {enter} A-->Car');
  cy.get('#view').contains('Car').should('exist');
  });
 });

cypress/e2e/history.spec.ts

@@ -1,4 +1,4 @@
-import { getEditor, verifyFileSnapshot } from './util';
+import { typeInEditor, verifyFileSnapshot } from './util';
 
 describe('Save History', () => {
  beforeEach(() => {
@@ -51,14 +51,14 @@ describe('Save History', () => {
  expect(str).to.equal('State already saved.');
  });
  cy.on('window:confirm', () => true);
- getEditor().type(' C --> HistoryTest');
+ typeInEditor(' C --> HistoryTest');
  cy.get('#saveHistory').click();
  cy.get('#historyList').find('li').should('have.length', 2);
  });
 
  it('should be able to restore and delete', () => {
  cy.get('#saveHistory').click();
- getEditor().type(' C --> HistoryTest');
+ typeInEditor(' C --> HistoryTest');
  cy.get('#historyList').find('No items in History').should('not.exist');
  cy.get('#historyList').find('li').should('have.length', 1);
  cy.contains('HistoryTest');
@@ -68,7 +68,7 @@ describe('Save History', () => {
  cy.get('#historyList').find('li').should('have.length', 0);
  cy.get('#historyList').contains('No items in History');
  cy.get('#saveHistory').click();
- getEditor().type(' C --> HistoryTest');
+ typeInEditor(' C --> HistoryTest');
  cy.get('#saveHistory').click();
  cy.get('#editor').type('ing');
  cy.get('#clearHistory').click();
@@ -81,7 +81,7 @@ describe('Save History', () => {
 
  // TODO: Fix #639
  xit('should auto save history', () => {
- getEditor().type(' C --> HistoryTest');
+ typeInEditor(' C --> HistoryTest');
  cy.tick(70_000);
  cy.contains('Timeline').click();
  cy.get('#historyList').find('li').should('have.length', 1);

cypress/e2e/loadSite.spec.ts

@@ -4,6 +4,7 @@ describe('Site Loads', () => {
  beforeEach(() => {
  cy.clearLocalStorage();
  cy.visit('/');
+ cy.url().should('include', '/edit#pako');
  });
 
  it('Check Home page load', () => {
@@ -93,7 +94,9 @@ describe('Site Loads', () => {
  cy.reload(true);
  cy.contains('Please Click here to Raise an issue in github.');
  });
+});
 
+describe('Verify types of URLs', () => {
  it('should load compressed URL', () => {
  cy.visit(
  '/edit#pako:eNpVkM2KwkAQhF-l6dMK5gVyEDRxvYi7sF6WjIcm0zqDzg_jBJEk725Hd2G3Tw31VVFUj23QjCWeEkUD-1p5kFs2O77BN1M6QFEshg1ncMHzfYDV2ybA1YQYrT_NXvhqgqDqtxPGkI315_ElVU__h-cB6mZLMYd4-Kvsb2GAdWM_jcT_V0xicb03RyqPVLSUoJI-OEfHyZHV0rqfDAqzYccKS3k1pbNC5Ufhuqgp81rbHBJKxuXKc6Quh6-7b7HMqeNfqLYkC7gfanwAlW1ZvQ'
@@ -105,18 +108,23 @@ describe('Site Loads', () => {
  cy.contains('Animal');
  });
 
- it('should load uncompressed URL', () => {
- cy.visit(
- '/edit/#eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
- );
- cy.contains('New Year');
- cy.visit(
- '/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
- );
- cy.contains('Animal');
- cy.visit(
- '/edit/#base64:eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW05ldyBZZWFyXSAtLT58R2V0IG1vbmV5fCBCKEdvIHNob3BwaW5nKVxuICAgIEIgLS0-IEN7TGV0IG1lIHRoaW5rfVxuICAgIEMgLS0-fE9uZXwgRFtMYXB0b3BdXG4gICAgQyAtLT58VHdvfCBFW2lQaG9uZV1cbiAgICBDIC0tPnxUaHJlZXwgRltmYTpmYS1jYXIgQ2FyXSIsIm1lcm1haWQiOiJ7XG4gIFwidGhlbWVcIjogXCJkZWZhdWx0XCJcbn0iLCJ1cGRhdGVFZGl0b3IiOmZhbHNlLCJhdXRvU3luYyI6dHJ1ZSwidXBkYXRlRGlhZ3JhbSI6ZmFsc2V9'
- );
- cy.contains('New Year');
+ describe('Uncompressed URLs', () => {
+ it('should load URL without specifier', () => {
+ cy.visit(
+ '/edit/#eyJjb2RlIjoiZ3JhcGhcbiAgICBUZXN0TGFiZWwiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+ );
+ cy.contains('TestLabel');
+ cy.visit(
+ '/edit#eyJjb2RlIjoiY2xhc3NEaWFncmFtXG4gICAgQW5pbWFsIDx8LS0gRHVja1xuICAgIEFuaW1hbCA8fC0tIEZpc2hcbiAgICBBbmltYWwgPHwtLSBaZWJyYVxuICAgIEFuaW1hbCA6ICtpbnQgYWdlXG4gICAgQW5pbWFsIDogK1N0cmluZyBnZW5kZXJcbiAgICBBbmltYWw6ICtpc01hbW1hbCgpXG4gICAgQW5pbWFsOiArbWF0ZSgpXG4gICAgY2xhc3MgRHVja3tcbiAgICAgICtTdHJpbmcgYmVha0NvbG9yXG4gICAgICArc3dpbSgpXG4gICAgICArcXVhY2soKVxuICAgIH1cbiAgICBjbGFzcyBGaXNoe1xuICAgICAgLWludCBzaXplSW5GZWV0XG4gICAgICAtY2FuRWF0KClcbiAgICB9XG4gICAgY2xhc3MgWmVicmF7XG4gICAgICArYm9vbCBpc193aWxkXG4gICAgICArcnVuKClcbiAgICB9XG4gICAgICAgICAgICAiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGFya1wiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+ );
+ cy.contains('Animal');
+ });
+
+ it('should load URL with "base64" specifier', () => {
+ cy.visit(
+ '/edit/#base64:eyJjb2RlIjoiZ3JhcGhcbiAgICBUZXN0TGFiZWwiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiXG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ'
+ );
+ cy.contains('TestLabel');
+ });
  });
 });

cypress/e2e/util.ts

@@ -1,12 +1,23 @@
 export const cmd = `{${Cypress.platform === 'darwin' ? 'meta' : 'ctrl'}}`;
 
-export const getEditor = ({ bottom = true, newline = false } = {}) =>
- cy
- .get('#editor textarea:first')
- .click()
- .focused()
- .type(`${bottom ? '{pageDown}' : cmd}`)
- .type(`${newline ? '{enter}' : cmd}`);
+interface EditorOptions {
+ bottom?: boolean;
+ newline?: boolean;
+}
+
+export const typeInEditor = (
+ text: string,
+ { bottom = true, newline = false }: EditorOptions = {}
+) => {
+ cy.get('#editor textarea:first').click();
+ if (bottom) {
+ cy.focused().type('{pageDown}');
+ }
+ if (newline) {
+ cy.focused().type('{enter}');
+ }
+ cy.focused().type(text);
+};
 
 const downloadsFolder = Cypress.config('downloadsFolder');
 

cypress/snapshots.js

@@ -16,7 +16,7 @@ module.exports = {
  "1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
  }
  },
- "__version": "11.2.0",
+ "__version": "12.9.0",
  "Auto sync tests": {
  "should dim diagram when code is edited": {
  "1": "{\"code\":\"flowchart TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Test\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"autoSync\":false,\"updateDiagram\":false}"

package.json

@@ -23,61 +23,61 @@
  },
  "devDependencies": {
  "@cypress/snapshot": "2.1.7",
- "@sveltejs/adapter-static": "1.0.6",
- "@sveltejs/kit": "1.5.0",
+ "@sveltejs/adapter-static": "2.0.2",
+ "@sveltejs/kit": "1.15.4",
  "@testing-library/jest-dom": "5.16.5",
  "@testing-library/svelte": "3.2.2",
  "@types/pako": "2.0.0",
- "@types/uuid": "8.3.4",
- "@typescript-eslint/eslint-plugin": "5.51.0",
- "@typescript-eslint/parser": "5.51.0",
- "@vitest/ui": "^0.28.0",
- "autoprefixer": "^10.4.13",
- "c8": "7.12.0",
+ "@types/uuid": "9.0.1",
+ "@typescript-eslint/eslint-plugin": "5.58.0",
+ "@typescript-eslint/parser": "5.58.0",
+ "@vitest/ui": "^0.30.1",
+ "autoprefixer": "^10.4.14",
+ "c8": "7.13.0",
  "chai": "^4.3.7",
- "cssnano": "^5.1.14",
- "cy-verify-downloads": "0.1.11",
- "cypress": "11.2.0",
- "cypress-localstorage-commands": "2.2.2",
- "eslint": "8.33.0",
- "eslint-config-prettier": "8.6.0",
- "eslint-plugin-cypress": "2.12.1",
+ "cssnano": "^6.0.0",
+ "cy-verify-downloads": "0.1.14",
+ "cypress": "12.9.0",
+ "cypress-localstorage-commands": "2.2.3",
+ "eslint": "8.38.0",
+ "eslint-config-prettier": "8.8.0",
+ "eslint-plugin-cypress": "2.13.2",
  "eslint-plugin-es": "4.1.0",
  "eslint-plugin-no-only-tests": "^3.1.0",
  "eslint-plugin-postcss-modules": "2.0.0",
  "eslint-plugin-svelte3": "4.0.0",
- "eslint-plugin-tailwindcss": "3.8.3",
- "eslint-plugin-unicorn": "^45.0.0",
- "eslint-plugin-vitest": "^0.0.32",
+ "eslint-plugin-tailwindcss": "3.11.0",
+ "eslint-plugin-unicorn": "^46.0.0",
+ "eslint-plugin-vitest": "^0.1.4",
  "esserializer": "1.3.10",
  "font-awesome": "^4.7.0",
- "husky": "^8.0.2",
+ "husky": "^8.0.3",
  "jsdom": "20.0.3",
- "lint-staged": "13.1.1",
- "node-html-parser": "^6.1.4",
- "postcss": "^8.4.19",
+ "lint-staged": "13.2.1",
+ "node-html-parser": "^6.1.5",
+ "postcss": "^8.4.21",
  "postcss-load-config": "4.0.1",
- "prettier": "2.8.3",
- "prettier-plugin-svelte": "^2.8.1",
- "svelte": "3.55.1",
- "svelte-preprocess": "4.10.7",
- "tailwindcss": "^3.2.4",
- "tslib": "^2.4.1",
- "typescript": "4.9.5",
- "vite": "^4.0.1",
- "vitest": "^0.28.0"
+ "prettier": "2.8.7",
+ "prettier-plugin-svelte": "^2.10.0",
+ "svelte": "3.58.0",
+ "svelte-preprocess": "5.0.3",
+ "tailwindcss": "^3.3.1",
+ "tslib": "^2.5.0",
+ "typescript": "5.0.4",
+ "vite": "^4.2.1",
+ "vitest": "^0.30.1"
  },
  "dependencies": {
  "analytics": "0.8.1",
  "analytics-plugin-plausible": "0.0.6",
- "daisyui": "2.50.0",
+ "daisyui": "2.51.5",
  "dayjs": "^1.11.7",
- "js-base64": "3.7.4",
- "mermaid": "10.0.0",
- "monaco-editor": "0.34.1",
+ "js-base64": "3.7.5",
+ "mermaid": "10.1.0",
+ "monaco-editor": "0.37.1",
  "monaco-mermaid": "1.0.8",
  "pako": "2.1.0",
- "random-word-slugs": "0.1.6",
+ "random-word-slugs": "0.1.7",
  "svg-pan-zoom": "3.6.1",
  "uuid": "9.0.0"
  },