Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sidharth Vinod
|
acd1353b12 |
@@ -1,21 +0,0 @@
|
||||
name: Create release pull request
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- develop
|
||||
jobs:
|
||||
productionPromotion:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
ref: master
|
||||
- name: Reset promotion branch
|
||||
run: |
|
||||
git fetch origin develop:develop
|
||||
git reset --hard develop
|
||||
- name: Create Pull Request
|
||||
uses: peter-evans/create-pull-request@v5
|
||||
with:
|
||||
branch: release-promotion
|
||||
title: Release live editor
|
||||
@@ -8,7 +8,7 @@ jobs:
|
||||
stale:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/stale@v8
|
||||
- uses: actions/stale@v6
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
exempt-issue-labels: 'retained'
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
name: Update Monaco-editor
|
||||
on:
|
||||
workflow_dispatch:
|
||||
push:
|
||||
branches:
|
||||
- 'dependabot/npm_and_yarn/develop/monaco-editor-**'
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18
|
||||
- name: Update monaco version
|
||||
run: |
|
||||
yarn install
|
||||
node ./bin/update-monaco.js
|
||||
- name: Commit changes
|
||||
uses: EndBug/add-and-commit@v9
|
||||
with:
|
||||
author_name: ${{ github.actor }}
|
||||
author_email: ${{ github.actor }}@users.noreply.github.com
|
||||
message: 'Update Monaco-editor'
|
||||
Vendored
+4
-8
@@ -1,23 +1,19 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"cSpell.blockCheckingWhenLineLengthGreaterThan": 150,
|
||||
"cSpell.words": [
|
||||
"asyncable",
|
||||
"Browserslist",
|
||||
"ckppp",
|
||||
"KROKI",
|
||||
"Serde",
|
||||
"asyncable",
|
||||
"corg",
|
||||
"cssnano",
|
||||
"daisyui",
|
||||
"esserializer",
|
||||
"KROKI",
|
||||
"localstorage",
|
||||
"mermaidchart",
|
||||
"mindmap",
|
||||
"pako",
|
||||
"Serde",
|
||||
"serdes",
|
||||
"tailwindcss",
|
||||
"uparrow"
|
||||
"tailwindcss"
|
||||
],
|
||||
"vitest.commandLine": "yarn test:unit",
|
||||
"vitest.enable": true,
|
||||
|
||||
+3
-3
@@ -1,17 +1,17 @@
|
||||
# Two-stage docker container for mermaid-js/mermaid-live-editor
|
||||
# Build : docker build -t mermaid-js/mermaid-live-editor .
|
||||
# Run : docker run --name mermaid-live-editor --publish 8080:8080 mermaid-js/mermaid-live-editor
|
||||
# Run : docker run --name mermaid-live-editor --publish 8080:80 mermaid-js/mermaid-live-editor
|
||||
# Start : docker start mermaid-live-editor
|
||||
# Use webbrowser : http://localhost:8080
|
||||
# Stop : press ctrl + c
|
||||
# or
|
||||
# docker stop mermaid-live-editor
|
||||
FROM node:18.17.1 as mermaid-live-editor-builder
|
||||
FROM node:18.14.0 as mermaid-live-editor-builder
|
||||
COPY --chown=node:node . /home
|
||||
WORKDIR /home
|
||||
RUN yarn install
|
||||
RUN yarn build
|
||||
|
||||
FROM nginxinc/nginx-unprivileged:alpine as mermaid-live-editor-runner
|
||||
FROM nginx:alpine as mermaid-live-editor-runner
|
||||
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=mermaid-live-editor-builder --chown=nginx:nginx /home/docs /usr/share/nginx/html
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
FROM node:18.17.1
|
||||
FROM node:18
|
||||
WORKDIR /app
|
||||
COPY package.json .
|
||||
COPY yarn.lock .
|
||||
RUN npm install
|
||||
COPY . .
|
||||
RUN ls
|
||||
CMD ["yarn", "dev"]
|
||||
CMD ["yarn", "dev"]
|
||||
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020 - 2023 Knut Sveidqvist
|
||||
Copyright (c) 2020 - 2021 Knut Sveidqvist
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@@ -24,7 +24,7 @@ You can try out a live version [here](https://mermaid.live/).
|
||||
### Run published image
|
||||
|
||||
```bash
|
||||
docker run --platform linux/amd64 --publish 8000:8080 ghcr.io/mermaid-js/mermaid-live-editor
|
||||
docker run --publish 8000:80 ghcr.io/mermaid-js/mermaid-live-editor
|
||||
```
|
||||
|
||||
### To configure renderer URL
|
||||
@@ -43,7 +43,7 @@ Default is `https://kroki.io`
|
||||
docker compose up --build
|
||||
```
|
||||
|
||||
Then open http://localhost:3000
|
||||
Then open http://localhost:8000
|
||||
|
||||
## Setup
|
||||
|
||||
|
||||
+3
-3
@@ -6,10 +6,10 @@ export default defineConfig({
|
||||
viewportWidth: 1440,
|
||||
viewportHeight: 768,
|
||||
snapshotFileName: './cypress/snapshots.js',
|
||||
defaultCommandTimeout: 5000,
|
||||
requestTimeout: 5000,
|
||||
defaultCommandTimeout: 16000,
|
||||
requestTimeout: 16000,
|
||||
retries: {
|
||||
runMode: 2,
|
||||
runMode: 4,
|
||||
openMode: 0
|
||||
},
|
||||
e2e: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { typeInEditor, verifyFileSizeGreaterThan } from './util';
|
||||
import { verifyFileSizeGreaterThan } from './util';
|
||||
describe('Check actions', () => {
|
||||
beforeEach(() => {
|
||||
cy.clearLocalStorage();
|
||||
@@ -10,7 +10,7 @@ describe('Check actions', () => {
|
||||
cy.get('#markdown')
|
||||
.invoke('val')
|
||||
.then((oldText) => {
|
||||
typeInEditor('C --> HistoryTest', { bottom: true, newline: true });
|
||||
cy.get('#editor').click('bottom').type('{enter}C --> HistoryTest');
|
||||
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', 34_000);
|
||||
verifyFileSizeGreaterThan('diagram', 'png', 35_000);
|
||||
|
||||
cy.get(`#downloadSVG`).click();
|
||||
verifyFileSizeGreaterThan('diagram', 'svg', 10_000);
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
import { typeInEditor, cmd } from './util';
|
||||
import { getEditor, cmd } from './util';
|
||||
|
||||
describe('Auto sync tests', () => {
|
||||
beforeEach(() => {
|
||||
cy.clearLocalStorage();
|
||||
cy.visit('/');
|
||||
cy.url().should('contain', '/edit#pako');
|
||||
cy.window().should('have.property', 'editorLoaded', true);
|
||||
});
|
||||
|
||||
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');
|
||||
typeInEditor(' C --> Test', { bottom: true });
|
||||
getEditor({ bottom: true, newline: true }).type(' C --> Test');
|
||||
cy.get('#view').should('have.class', 'outOfSync');
|
||||
cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
|
||||
cy.getLocalStorage('codeStore').snapshot();
|
||||
@@ -21,10 +19,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');
|
||||
typeInEditor(' C --> Test');
|
||||
getEditor().type(' C --> Test');
|
||||
cy.get('#view').should('have.class', 'outOfSync');
|
||||
cy.get('#errorContainer').should('contain.text', 'Diagram out of sync.');
|
||||
typeInEditor(`${cmd}{enter}`);
|
||||
getEditor().type(`${cmd}{enter}`);
|
||||
cy.get('#errorContainer').should('not.exist');
|
||||
cy.get('#view').should('not.have.class', 'outOfSync');
|
||||
});
|
||||
@@ -40,22 +38,21 @@ 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');
|
||||
typeInEditor(' C --> Test');
|
||||
getEditor().type(' 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();
|
||||
typeInEditor('ing');
|
||||
getEditor().type('ing');
|
||||
cy.get('#view').should('not.have.class', 'outOfSync');
|
||||
cy.getLocalStorage('codeStore').snapshot();
|
||||
});
|
||||
|
||||
it('supports commenting code out/in', () => {
|
||||
cy.get('#editor').contains('Car').click();
|
||||
cy.get('#editor').get('textarea').type(`${cmd}/`, { force: true });
|
||||
getEditor({ bottom: true, newline: false }).type(`{uparrow}${cmd}/`);
|
||||
cy.get('#view').contains('Car').should('not.exist');
|
||||
|
||||
typeInEditor(`{uparrow}${cmd}/`);
|
||||
getEditor().type(`{uparrow}${cmd}/`);
|
||||
cy.get('#view').contains('Car').should('exist');
|
||||
});
|
||||
|
||||
@@ -64,7 +61,7 @@ describe('Auto sync tests', () => {
|
||||
'/edit#pako:eNpljjEKwzAMRa8SNOcEnlt6gK5eVFvYJsgOqkwpIXevg9smEE1PnyfxF3DFExgISW-CczQ2D21cYU7a-SGYXRwyvTp9jUhuKlVP-eHy7zA-leQsMEmg_QOM0BLG5FujZVMsaCQmC6ahR5ks2Lw2r84ela4-aREwKpVGwKrl_s7ut3fnkjAIcg_XDzuaUhs'
|
||||
);
|
||||
cy.get('#errorContainer').should('not.exist');
|
||||
typeInEditor(`branch test`, { bottom: true, newline: true });
|
||||
getEditor({ newline: true }).type(`branch test`);
|
||||
cy.get('#editor').contains('branch test').should('exist');
|
||||
cy.get('#errorContainer')
|
||||
.contains(
|
||||
@@ -75,9 +72,9 @@ describe('Auto sync tests', () => {
|
||||
|
||||
it('should update diagram after entire text is removed', () => {
|
||||
// https://github.com/mermaid-js/mermaid-live-editor/issues/1102
|
||||
typeInEditor(`${cmd} a {backspace}`);
|
||||
typeInEditor('graph LR');
|
||||
typeInEditor(' {enter} A-->Car');
|
||||
getEditor().type(`${cmd} a {backspace}`);
|
||||
getEditor().type('graph LR');
|
||||
getEditor().type(' {enter} A-->Car');
|
||||
cy.get('#view').contains('Car').should('exist');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -14,23 +14,23 @@ describe('Editor docs tests', () => {
|
||||
|
||||
it('Test to see if the correct URL loads when changing from one diagram to other', () => {
|
||||
cy.contains('Flow').click();
|
||||
cy.get(`[data-cy=docs][href$="/syntax/flowchart"]`).should('exist');
|
||||
cy.get(`[data-cy=docs][href$="/#/flowchart"]`).should('exist');
|
||||
|
||||
cy.contains('Config').click();
|
||||
cy.get(`[data-cy=docs][href$="/syntax/flowchart?id=configuration"]`).should('exist');
|
||||
cy.get(`[data-cy=docs][href$="/#/flowchart?id=configuration"]`).should('exist');
|
||||
|
||||
cy.contains('Sequence').click();
|
||||
cy.get(`[data-cy=docs][href$="/syntax/sequenceDiagram?id=configuration"]`).should('exist');
|
||||
cy.get(`[data-cy=docs][href$="/#/sequenceDiagram?id=configuration"]`).should('exist');
|
||||
|
||||
cy.contains('Code').click();
|
||||
cy.get(`[data-cy=docs][href$="/syntax/sequenceDiagram"]`).should('exist');
|
||||
cy.get(`[data-cy=docs][href$="/#/sequenceDiagram"]`).should('exist');
|
||||
});
|
||||
|
||||
it("Test to check URLs for a case where config URL doesn't exist", () => {
|
||||
cy.contains('State').click();
|
||||
cy.get(`[data-cy=docs][href$="/syntax/stateDiagram"]`).should('exist');
|
||||
cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
|
||||
|
||||
cy.contains('Config').click();
|
||||
cy.get(`[data-cy=docs][href$="/syntax/stateDiagram"]`).should('exist');
|
||||
cy.get(`[data-cy=docs][href$="/#/stateDiagram"]`).should('exist');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { typeInEditor, verifyFileSnapshot } from './util';
|
||||
import { getEditor, 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);
|
||||
typeInEditor(' C --> HistoryTest');
|
||||
getEditor().type(' 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();
|
||||
typeInEditor(' C --> HistoryTest');
|
||||
getEditor().type(' 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();
|
||||
typeInEditor(' C --> HistoryTest');
|
||||
getEditor().type(' 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', () => {
|
||||
typeInEditor(' C --> HistoryTest');
|
||||
getEditor().type(' C --> HistoryTest');
|
||||
cy.tick(70_000);
|
||||
cy.contains('Timeline').click();
|
||||
cy.get('#historyList').find('li').should('have.length', 1);
|
||||
|
||||
@@ -4,7 +4,6 @@ describe('Site Loads', () => {
|
||||
beforeEach(() => {
|
||||
cy.clearLocalStorage();
|
||||
cy.visit('/');
|
||||
cy.url().should('include', '/edit#pako');
|
||||
});
|
||||
|
||||
it('Check Home page load', () => {
|
||||
@@ -13,12 +12,6 @@ describe('Site Loads', () => {
|
||||
cy.getLocalStorage('codeStore').snapshot();
|
||||
});
|
||||
|
||||
it('should keep code after reload', () => {
|
||||
cy.get('#editor').contains('Car');
|
||||
cy.reload();
|
||||
cy.get('#editor').contains('Car');
|
||||
});
|
||||
|
||||
it('Check Redirect from old URL', () => {
|
||||
cy.visit(
|
||||
'/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0NocmlzdG1hc10gLS0-fEdldCBtb25leXwgQihHbyBzaG9wcGluZylcbiAgICBCIC0tPiBDe0xldCBtZSB0aGlua31cbiAgICBDIC0tPnxPbmV8IERbTGFwdG9wXVxuICAgIEMgLS0-fFR3b3wgRVtpUGhvbmVdXG4gICAgQyAtLT58VGhyZWV8IEZbZmE6ZmEtY2FyIENhcl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9LCJ1cGRhdGVFZGl0b3IiOmZhbHNlfQ'
|
||||
@@ -100,9 +93,7 @@ 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'
|
||||
@@ -114,23 +105,18 @@ describe('Verify types of URLs', () => {
|
||||
cy.contains('Animal');
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -12,7 +12,7 @@ describe('Test themes', () => {
|
||||
});
|
||||
}
|
||||
});
|
||||
cy.contains('Theme').click();
|
||||
cy.contains('Change Theme').click();
|
||||
});
|
||||
|
||||
it('should set light theme as default', () => {
|
||||
@@ -44,7 +44,7 @@ describe('Test themes', () => {
|
||||
});
|
||||
}
|
||||
});
|
||||
cy.contains('Theme').click();
|
||||
cy.contains('Change Theme').click();
|
||||
});
|
||||
|
||||
it('should set dark theme as default', () => {
|
||||
|
||||
+7
-21
@@ -1,26 +1,12 @@
|
||||
export const cmd = `{${Cypress.platform === 'darwin' ? 'meta' : 'ctrl'}}`;
|
||||
|
||||
interface EditorOptions {
|
||||
bottom?: boolean;
|
||||
newline?: boolean;
|
||||
}
|
||||
|
||||
export const typeInEditor = (
|
||||
text: string,
|
||||
{ bottom = true, newline = false }: EditorOptions = {}
|
||||
) => {
|
||||
cy.window().should('have.property', 'editorLoaded', true);
|
||||
cy.get('#editor').click();
|
||||
cy.get('#editor').within(($editor) => {
|
||||
if (bottom) {
|
||||
cy.get('textarea').type('{pageDown}', { force: true });
|
||||
}
|
||||
if (newline) {
|
||||
cy.get('textarea').type('{enter}', { force: true });
|
||||
}
|
||||
cy.get('textarea').type(text, { force: true });
|
||||
});
|
||||
};
|
||||
export const getEditor = ({ bottom = true, newline = false } = {}) =>
|
||||
cy
|
||||
.get('#editor textarea:first')
|
||||
.click()
|
||||
.focused()
|
||||
.type(`${bottom ? '{pageDown}' : cmd}`)
|
||||
.type(`${newline ? '{enter}' : cmd}`);
|
||||
|
||||
const downloadsFolder = Cypress.config('downloadsFolder');
|
||||
|
||||
|
||||
@@ -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": "12.17.4",
|
||||
"__version": "11.2.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}"
|
||||
|
||||
+1
-1
@@ -7,5 +7,5 @@ services:
|
||||
volumes:
|
||||
- ./src:/app/src
|
||||
ports:
|
||||
- 3000:3000
|
||||
- 8080:8080
|
||||
- 24678:24678
|
||||
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
server {
|
||||
listen 8080;
|
||||
listen 80;
|
||||
server_name mermaid;
|
||||
location / {
|
||||
root /usr/share/nginx/html;
|
||||
|
||||
+43
-42
@@ -23,62 +23,63 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cypress/snapshot": "2.1.7",
|
||||
"@sveltejs/adapter-static": "2.0.3",
|
||||
"@sveltejs/kit": "1.25.0",
|
||||
"@testing-library/jest-dom": "5.17.0",
|
||||
"@sveltejs/adapter-static": "1.0.6",
|
||||
"@sveltejs/kit": "1.5.0",
|
||||
"@testing-library/jest-dom": "5.16.5",
|
||||
"@testing-library/svelte": "3.2.2",
|
||||
"@types/pako": "2.0.0",
|
||||
"@types/uuid": "9.0.4",
|
||||
"@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",
|
||||
"@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",
|
||||
"chai": "^4.3.7",
|
||||
"cssnano": "^6.0.0",
|
||||
"cy-verify-downloads": "0.2.0",
|
||||
"cypress": "12.17.4",
|
||||
"cypress-localstorage-commands": "2.2.4",
|
||||
"eslint": "8.49.0",
|
||||
"eslint-config-prettier": "8.10.0",
|
||||
"eslint-plugin-cypress": "2.14.0",
|
||||
"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",
|
||||
"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.13.0",
|
||||
"eslint-plugin-unicorn": "^46.0.0",
|
||||
"eslint-plugin-vitest": "^0.3.0",
|
||||
"esserializer": "1.3.11",
|
||||
"eslint-plugin-tailwindcss": "3.8.3",
|
||||
"eslint-plugin-unicorn": "^45.0.0",
|
||||
"eslint-plugin-vitest": "^0.0.32",
|
||||
"esserializer": "1.3.10",
|
||||
"font-awesome": "^4.7.0",
|
||||
"husky": "^8.0.3",
|
||||
"jsdom": "21.1.2",
|
||||
"lint-staged": "13.3.0",
|
||||
"node-html-parser": "^6.1.5",
|
||||
"postcss": "^8.4.21",
|
||||
"husky": "^8.0.2",
|
||||
"jsdom": "20.0.3",
|
||||
"lint-staged": "13.1.1",
|
||||
"node-html-parser": "^6.1.4",
|
||||
"postcss": "^8.4.19",
|
||||
"postcss-load-config": "4.0.1",
|
||||
"prettier": "2.8.8",
|
||||
"prettier-plugin-svelte": "^2.10.0",
|
||||
"svelte": "3.59.2",
|
||||
"svelte-preprocess": "5.0.4",
|
||||
"tailwindcss": "^3.3.1",
|
||||
"tslib": "^2.5.0",
|
||||
"typescript": "5.2.2",
|
||||
"vite": "^4.3.9",
|
||||
"vitest": "^0.34.0"
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"analytics": "0.8.9",
|
||||
"analytics": "0.8.1",
|
||||
"analytics-plugin-plausible": "0.0.6",
|
||||
"daisyui": "2.52.0",
|
||||
"daisyui": "2.50.0",
|
||||
"dayjs": "^1.11.7",
|
||||
"js-base64": "3.7.5",
|
||||
"mermaid": "10.5.0",
|
||||
"monaco-editor": "0.43.0",
|
||||
"js-base64": "3.7.4",
|
||||
"mermaid": "10.0.2",
|
||||
"monaco-editor": "0.34.1",
|
||||
"monaco-mermaid": "1.0.8",
|
||||
"pako": "2.1.0",
|
||||
"random-word-slugs": "0.1.7",
|
||||
"random-word-slugs": "0.1.6",
|
||||
"svg-pan-zoom": "3.6.1",
|
||||
"uuid": "9.0.1"
|
||||
"uuid": "9.0.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{ts,svelte,js,css,md,json}": [
|
||||
@@ -87,7 +88,7 @@
|
||||
]
|
||||
},
|
||||
"volta": {
|
||||
"node": "18.17.1",
|
||||
"node": "18.14.0",
|
||||
"yarn": "1.22.19"
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@@ -11,10 +11,6 @@
|
||||
":automergePatch"
|
||||
],
|
||||
"packageRules": [
|
||||
{
|
||||
"matchPackagePatterns": ["^mermaid"],
|
||||
"groupName": "Mermaid packages"
|
||||
},
|
||||
{
|
||||
"matchUpdateTypes": ["minor", "patch", "pin", "digest"],
|
||||
"automerge": true
|
||||
|
||||
+30
-2
@@ -17,10 +17,38 @@
|
||||
<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
|
||||
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
|
||||
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.min.css"
|
||||
integrity="sha512-GzcoZD7y5zvBofYtImXPZaPVhoY7xLPt+ysmbPb/vU+quSKFkcngxaSrxuwprDZL4MALUqGFmnqCxQZqMozv1Q=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer" />
|
||||
<script>
|
||||
var require = {
|
||||
paths: {
|
||||
vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs'
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/loader.min.js"
|
||||
integrity="sha512-6bIYsGqvLpAiEBXPdRQeFf5cueeBECtAKJjIHer3BhBZNTV3WLcLA8Tm3pDfxUwTMIS+kAZwTUvJ1IrMdX8C5w=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.nls.min.js"
|
||||
integrity="sha512-CCv+DKWw+yZhxf4Z+ExT6HC5G+3S45TeMTYcJyYbdrv4BpK2vyALJ4FoVR/KGWDIPu7w4tNCOC9MJQIkYPR5FA=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"></script>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.1/min/vs/editor/editor.main.js"
|
||||
integrity="sha512-BtSZPhzoyN8kq1axY6cgOFPSgLJgFwvAZ3WxeDGxEFXeFcFuK2s7Hr+zF75npVHASUY1dxudAfIVzwmgdR89Bw=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"></script>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -3,15 +3,14 @@
|
||||
import { stateStore, updateCode, updateConfig } from '$lib/util/state';
|
||||
import { themeStore } from '$lib/util/theme';
|
||||
import { errorDebug, syncDiagram } from '$lib/util/util';
|
||||
import * as monaco from 'monaco-editor';
|
||||
import monacoJsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
|
||||
import monacoEditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
||||
import type monaco from 'monaco-editor';
|
||||
import { onMount } from 'svelte';
|
||||
import { initEditor } from '$lib/util/monacoExtra';
|
||||
import initEditor from 'monaco-mermaid';
|
||||
import { logEvent } from '$lib/util/stats';
|
||||
|
||||
let divEl: HTMLDivElement | undefined = undefined;
|
||||
let editor: monaco.editor.IStandaloneCodeEditor | undefined;
|
||||
let Monaco: typeof monaco | undefined;
|
||||
let editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
|
||||
minimap: {
|
||||
enabled: false
|
||||
@@ -23,7 +22,7 @@
|
||||
|
||||
stateStore.subscribe(({ errorMarkers, editorMode, code, mermaid }) => {
|
||||
// console.log('editor store subscription', { code, mermaid });
|
||||
if (!editor) {
|
||||
if (!editor || !Monaco) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -31,7 +30,6 @@
|
||||
const newText = editorMode === 'code' ? code : mermaid;
|
||||
if (newText !== text) {
|
||||
// console.log('updating editor text', newText);
|
||||
editor.setScrollTop(0);
|
||||
editor.setValue(newText);
|
||||
text = newText;
|
||||
}
|
||||
@@ -44,15 +42,15 @@
|
||||
return;
|
||||
}
|
||||
if (model.getLanguageId() !== language) {
|
||||
monaco.editor.setModelLanguage(model, language);
|
||||
Monaco.editor.setModelLanguage(model, language);
|
||||
}
|
||||
|
||||
// Display/clear errors
|
||||
monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers);
|
||||
Monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers);
|
||||
});
|
||||
|
||||
themeStore.subscribe(({ isDark }) => {
|
||||
editor && monaco.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
|
||||
editor && Monaco?.editor.setTheme(isDark ? 'mermaid-dark' : 'mermaid');
|
||||
});
|
||||
|
||||
const handleUpdate = (text: string, mode: EditorMode) => {
|
||||
@@ -64,23 +62,33 @@
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
self.MonacoEnvironment = {
|
||||
getWorker(_, label) {
|
||||
if (label === 'json') {
|
||||
return new monacoJsonWorker();
|
||||
}
|
||||
return new monacoEditorWorker();
|
||||
const loadMonaco = async () => {
|
||||
console.log('Loading Monaco...');
|
||||
// errorDebug();
|
||||
let i = 0;
|
||||
while (i++ < 500) {
|
||||
// @ts-expect-error : This is a hack to handle a svelte-kit error when importing monaco.
|
||||
Monaco = window.monaco;
|
||||
if (Monaco !== undefined) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
await new Promise((r) => setTimeout(r, 100));
|
||||
}
|
||||
alert('Loading Monaco Editor failed. Please try refreshing the page.');
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
await loadMonaco(); // Fix https://github.com/mermaid-js/mermaid-live-editor/issues/175
|
||||
if (!Monaco) {
|
||||
throw new Error('Monaco failed to load');
|
||||
}
|
||||
if (!divEl) {
|
||||
throw new Error('divEl is undefined');
|
||||
}
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
||||
initEditor(monaco);
|
||||
initEditor(Monaco);
|
||||
errorDebug(100);
|
||||
editor = monaco.editor.create(divEl, editorOptions);
|
||||
editor = Monaco.editor.create(divEl, editorOptions);
|
||||
editor.onDidChangeModelContent(({ isFlush, changes }) => {
|
||||
const newText = editor?.getValue();
|
||||
// console.log('editor onDidChangeModelContent', { text, newText, isFlush, changes });
|
||||
@@ -93,17 +101,17 @@
|
||||
editor.addAction({
|
||||
id: 'mermaid-render-diagram',
|
||||
label: 'Render Diagram',
|
||||
keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
|
||||
keybindings: [Monaco.KeyMod.CtrlCmd | Monaco.KeyCode.Enter],
|
||||
run: function () {
|
||||
syncDiagram();
|
||||
logEvent('renderDiagram', {
|
||||
method: 'keyboardShortcut'
|
||||
method: 'keyboadShortcut'
|
||||
});
|
||||
}
|
||||
});
|
||||
monaco.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
|
||||
Monaco.editor.setTheme($themeStore.isDark ? 'mermaid-dark' : 'mermaid');
|
||||
const resizeObserver = new ResizeObserver((entries) => {
|
||||
editor?.layout({
|
||||
editor!.layout({
|
||||
height: entries[0].contentRect.height,
|
||||
width: entries[0].contentRect.width
|
||||
});
|
||||
@@ -112,12 +120,7 @@
|
||||
if (divEl.parentElement) {
|
||||
resizeObserver.observe(divEl.parentElement);
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
if (window.Cypress) {
|
||||
// @ts-ignore
|
||||
window.editorLoaded = true;
|
||||
}
|
||||
// console.log(`editor mounted`);
|
||||
return () => {
|
||||
// console.log(`editor disposed`);
|
||||
editor?.dispose();
|
||||
|
||||
@@ -164,6 +164,7 @@
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
title="Open revision in new tab"
|
||||
class="hover:underline text-blue-500">{name}</a>
|
||||
{:else}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
/* eslint-disable @typescript-eslint/no-unnecessary-condition */
|
||||
import type { HistoryEntry } from '$lib/types';
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
|
||||
@@ -73,10 +73,10 @@ export const addHistoryEntry = (entryToAdd: Optional<HistoryEntry, 'id'>): void
|
||||
}
|
||||
return [entry, ...entries];
|
||||
});
|
||||
} else if (entry.type === 'manual') {
|
||||
manualHistoryStore.update((entries) => [entry, ...entries]);
|
||||
logEvent('history', { action: 'save' });
|
||||
}
|
||||
|
||||
manualHistoryStore.update((entries) => [entry, ...entries]);
|
||||
logEvent('history', { action: 'save' });
|
||||
};
|
||||
|
||||
export const clearHistoryData = (idToClear?: string): void => {
|
||||
|
||||
@@ -10,19 +10,18 @@
|
||||
import Theme from './Theme.svelte';
|
||||
|
||||
interface Link {
|
||||
title: string;
|
||||
href: string;
|
||||
title?: string;
|
||||
icon?: string;
|
||||
img?: string;
|
||||
}
|
||||
const links: Link[] = [
|
||||
{
|
||||
title: 'Documentation',
|
||||
href: 'https://mermaid.js.org/intro/n00b-gettingStarted.html'
|
||||
href: 'https://mermaid-js.github.io/mermaid/intro/n00b-gettingStarted.html'
|
||||
},
|
||||
{
|
||||
title: 'Tutorial',
|
||||
href: 'https://mermaid.js.org/config/Tutorials.html'
|
||||
href: 'https://mermaid-js.github.io/mermaid/config/Tutorials.html'
|
||||
},
|
||||
{
|
||||
title: 'Mermaid',
|
||||
@@ -33,12 +32,9 @@
|
||||
href: 'https://github.com/mermaid-js/mermaid-cli'
|
||||
},
|
||||
{
|
||||
title: '',
|
||||
href: 'https://github.com/mermaid-js/mermaid-live-editor',
|
||||
icon: 'fab fa-github fa-lg'
|
||||
},
|
||||
{
|
||||
href: 'https://mermaidchart.com',
|
||||
img: '/mermaidchart-logo.svg'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
@@ -51,7 +47,7 @@
|
||||
</div>
|
||||
<label for="menu-toggle" class="pointer-cursor lg:hidden block"
|
||||
><svg
|
||||
class="fill-current"
|
||||
class="fill-current "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
@@ -63,18 +59,13 @@
|
||||
<Theme />
|
||||
<div class="hidden lg:flex lg:items-center lg:w-auto w-full" id="menu">
|
||||
<ul class="lg:flex items-center justify-between text-base pt-4 lg:pt-0">
|
||||
{#each links as { title, href, icon, img }}
|
||||
{#each links as { title, href, icon }}
|
||||
<li>
|
||||
<a class="btn btn-ghost" target="_blank" {href}>
|
||||
<a class="btn btn-ghost" target="_blank" rel="noreferrer" {href}>
|
||||
{#if icon}
|
||||
<i class={icon} />
|
||||
{:else if img}
|
||||
<img src={img} alt={title} />
|
||||
{/if}
|
||||
{#if title}
|
||||
{title}
|
||||
{/if}
|
||||
</a>
|
||||
{title}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
@@ -88,9 +79,4 @@
|
||||
.navbar {
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -101,21 +101,7 @@
|
||||
Argument mapping
|
||||
Tools
|
||||
Pen and paper
|
||||
Mermaid`,
|
||||
QuadrantChart: `quadrantChart
|
||||
title Reach and engagement of campaigns
|
||||
x-axis Low Reach --> High Reach
|
||||
y-axis Low Engagement --> High Engagement
|
||||
quadrant-1 We should expand
|
||||
quadrant-2 Need to promote
|
||||
quadrant-3 Re-evaluate
|
||||
quadrant-4 May be improved
|
||||
Campaign A: [0.3, 0.6]
|
||||
Campaign B: [0.45, 0.23]
|
||||
Campaign C: [0.57, 0.69]
|
||||
Campaign D: [0.78, 0.34]
|
||||
Campaign E: [0.40, 0.34]
|
||||
Campaign F: [0.35, 0.78]`
|
||||
Mermaid`
|
||||
};
|
||||
|
||||
type SampleTypes = keyof typeof samples;
|
||||
@@ -128,7 +114,7 @@
|
||||
};
|
||||
|
||||
// Adding in this array will add an icon to the preset menu
|
||||
const newDiagrams: SampleTypes[] = ['Mindmap', 'QuadrantChart'];
|
||||
const newDiagrams: SampleTypes[] = ['Mindmap'];
|
||||
const diagramOrder: SampleTypes[] = [
|
||||
'Sequence',
|
||||
'Flow',
|
||||
@@ -139,8 +125,7 @@
|
||||
'User Journey',
|
||||
'Git',
|
||||
'Pie',
|
||||
'Mindmap',
|
||||
'QuadrantChart'
|
||||
'Mindmap'
|
||||
];
|
||||
</script>
|
||||
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
|
||||
<div class="hidden lg:block dropdown">
|
||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
||||
<div tabindex="0" class="btn btn-ghost">
|
||||
<div tabindex="0" class="btn btn-ghost ">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
@@ -39,7 +39,7 @@
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /></svg>
|
||||
<span class="hidden md:inline">Theme</span>
|
||||
<span class="hidden md:inline"> Change Theme </span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1792 1792"
|
||||
|
||||
@@ -122,6 +122,7 @@
|
||||
pzoom.resize();
|
||||
}
|
||||
});
|
||||
// console.log('View mounted');
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -129,7 +130,7 @@
|
||||
<div
|
||||
class="absolute w-full p-2 z-10 font-mono {error
|
||||
? 'text-red-600'
|
||||
: 'text-yellow-600'} bg-base-100 bg-opacity-80 text-left"
|
||||
: 'text-yellow-600'} bg-base-100 bg-opacity-80 text-center"
|
||||
id="errorContainer">
|
||||
{#if error}
|
||||
{@html $stateStore.error?.toString().replace(/\n/g, '<br />')}
|
||||
|
||||
@@ -1,621 +0,0 @@
|
||||
// Modified from https://github.com/Yash-Singh1/monaco-mermaid/blob/main/index.ts
|
||||
|
||||
import type * as Monaco from 'monaco-editor';
|
||||
|
||||
export const initEditor = (monacoEditor: typeof Monaco): void => {
|
||||
monacoEditor.languages.register({ id: 'mermaid' });
|
||||
const requirementDiagrams = [
|
||||
'requirement',
|
||||
'functionalRequirement',
|
||||
'interfaceRequirement',
|
||||
'performanceRequirement',
|
||||
'physicalRequirement',
|
||||
'designConstraint'
|
||||
];
|
||||
const keywords: Record<
|
||||
string,
|
||||
{
|
||||
typeKeywords: string[];
|
||||
blockKeywords: string[];
|
||||
keywords: string[];
|
||||
}
|
||||
> = {
|
||||
flowchart: {
|
||||
typeKeywords: ['flowchart', 'flowchart-v2', 'graph'],
|
||||
blockKeywords: ['subgraph', 'end'],
|
||||
keywords: [
|
||||
'TB',
|
||||
'TD',
|
||||
'BT',
|
||||
'RL',
|
||||
'LR',
|
||||
'click',
|
||||
'call',
|
||||
'href',
|
||||
'_self',
|
||||
'_blank',
|
||||
'_parent',
|
||||
'_top',
|
||||
'linkStyle',
|
||||
'style',
|
||||
'classDef',
|
||||
'class',
|
||||
'direction',
|
||||
'interpolate'
|
||||
]
|
||||
},
|
||||
sequenceDiagram: {
|
||||
typeKeywords: ['sequenceDiagram'],
|
||||
blockKeywords: ['alt', 'par', 'and', 'loop', 'else', 'end', 'rect', 'opt', 'alt', 'rect'],
|
||||
keywords: [
|
||||
'participant',
|
||||
'as',
|
||||
'Note',
|
||||
'note',
|
||||
'right of',
|
||||
'left of',
|
||||
'over',
|
||||
'activate',
|
||||
'deactivate',
|
||||
'autonumber',
|
||||
'title',
|
||||
'actor',
|
||||
'accDescription',
|
||||
'link',
|
||||
'links'
|
||||
]
|
||||
},
|
||||
classDiagram: {
|
||||
typeKeywords: ['classDiagram', 'classDiagram-v2'],
|
||||
blockKeywords: ['class'],
|
||||
keywords: [
|
||||
'link',
|
||||
'click',
|
||||
'callback',
|
||||
'call',
|
||||
'href',
|
||||
'cssClass',
|
||||
'direction',
|
||||
'TB',
|
||||
'BT',
|
||||
'RL',
|
||||
'LR',
|
||||
'title',
|
||||
'accDescription',
|
||||
'order'
|
||||
]
|
||||
},
|
||||
stateDiagram: {
|
||||
typeKeywords: ['stateDiagram', 'stateDiagram-v2'],
|
||||
blockKeywords: ['state', 'note', 'end'],
|
||||
keywords: ['state', 'as', 'hide empty description', 'direction', 'TB', 'BT', 'RL', 'LR']
|
||||
},
|
||||
erDiagram: {
|
||||
typeKeywords: ['erDiagram'],
|
||||
blockKeywords: [],
|
||||
keywords: ['title', 'accDescription']
|
||||
},
|
||||
journey: {
|
||||
typeKeywords: ['journey'],
|
||||
blockKeywords: ['section'],
|
||||
keywords: ['title']
|
||||
},
|
||||
info: {
|
||||
typeKeywords: ['info'],
|
||||
blockKeywords: [],
|
||||
keywords: ['showInfo']
|
||||
},
|
||||
gantt: {
|
||||
typeKeywords: ['gantt'],
|
||||
blockKeywords: [],
|
||||
keywords: [
|
||||
'title',
|
||||
'dateFormat',
|
||||
'axisFormat',
|
||||
'todayMarker',
|
||||
'section',
|
||||
'excludes',
|
||||
'inclusiveEndDates'
|
||||
]
|
||||
},
|
||||
requirementDiagram: {
|
||||
typeKeywords: ['requirement', 'requirementDiagram'],
|
||||
blockKeywords: [...requirementDiagrams, 'element'],
|
||||
keywords: []
|
||||
},
|
||||
gitGraph: {
|
||||
typeKeywords: ['gitGraph'],
|
||||
blockKeywords: [],
|
||||
keywords: [
|
||||
'accTitle',
|
||||
'accDescr',
|
||||
'commit',
|
||||
'cherry-pick',
|
||||
'branch',
|
||||
'merge',
|
||||
'reset',
|
||||
'checkout',
|
||||
'LR',
|
||||
'BT',
|
||||
'id',
|
||||
'msg',
|
||||
'type',
|
||||
'tag',
|
||||
'NORMAL',
|
||||
'REVERSE',
|
||||
'HIGHLIGHT'
|
||||
]
|
||||
},
|
||||
pie: {
|
||||
typeKeywords: ['pie'],
|
||||
blockKeywords: [],
|
||||
keywords: ['showData', 'title', 'accDescr', 'accTitle']
|
||||
},
|
||||
c4Diagram: {
|
||||
typeKeywords: ['C4Context', 'C4Container', 'C4Component', 'C4Dynamic', 'C4Deployment'],
|
||||
blockKeywords: [
|
||||
'Boundary',
|
||||
'Enterprise_Boundary',
|
||||
'System_Boundary',
|
||||
'Container_Boundary',
|
||||
'Node',
|
||||
'Node_L',
|
||||
'Node_R'
|
||||
],
|
||||
keywords: [
|
||||
'title',
|
||||
'accDescription',
|
||||
'direction',
|
||||
'TB',
|
||||
'BT',
|
||||
'RL',
|
||||
'LR',
|
||||
'Person_Ext',
|
||||
'Person',
|
||||
'SystemQueue_Ext',
|
||||
'SystemDb_Ext',
|
||||
'System_Ext',
|
||||
'SystemQueue',
|
||||
'SystemDb',
|
||||
'System',
|
||||
'ContainerQueue_Ext',
|
||||
'ContainerDb_Ext',
|
||||
'Container_Ext',
|
||||
'ContainerQueue',
|
||||
'ContainerDb',
|
||||
'Container',
|
||||
'ComponentQueue_Ext',
|
||||
'ComponentDb_Ext',
|
||||
'Component_Ext',
|
||||
'ComponentQueue',
|
||||
'ComponentDb',
|
||||
'Component',
|
||||
'Deployment_Node',
|
||||
'Rel',
|
||||
'BiRel',
|
||||
'Rel_Up',
|
||||
'Rel_U',
|
||||
'Rel_Down',
|
||||
'Rel_D',
|
||||
'Rel_Left',
|
||||
'Rel_L',
|
||||
'Rel_Right',
|
||||
'Rel_R',
|
||||
'Rel_Back',
|
||||
'RelIndex'
|
||||
]
|
||||
},
|
||||
sankey: {
|
||||
typeKeywords: ['sankey-beta'],
|
||||
blockKeywords: [],
|
||||
keywords: []
|
||||
}
|
||||
};
|
||||
|
||||
const configDirectiveHandler = [
|
||||
/^\s*%%(?={)/,
|
||||
{
|
||||
token: 'string',
|
||||
next: '@configDirective',
|
||||
nextEmbedded: 'javascript'
|
||||
}
|
||||
] as Monaco.languages.IShortMonarchLanguageRule1;
|
||||
|
||||
// Register a tokens provider for the mermaid language
|
||||
monacoEditor.languages.setMonarchTokensProvider('mermaid', {
|
||||
...Object.entries(keywords)
|
||||
.map((entry) =>
|
||||
Object.fromEntries(
|
||||
Object.entries(entry[1]).map((deepEntry) => [
|
||||
entry[0] + deepEntry[0][0].toUpperCase() + deepEntry[0].slice(1),
|
||||
deepEntry[1]
|
||||
])
|
||||
)
|
||||
)
|
||||
// eslint-disable-next-line unicorn/no-array-reduce
|
||||
.reduce(
|
||||
(overallKeywords, nextKeyword) => ({
|
||||
...overallKeywords,
|
||||
...nextKeyword
|
||||
}),
|
||||
{}
|
||||
),
|
||||
tokenizer: {
|
||||
root: [
|
||||
[/^\s*gitGraph/m, 'typeKeyword', 'gitGraph'],
|
||||
[/^\s*info/m, 'typeKeyword', 'info'],
|
||||
[/^\s*pie/m, 'typeKeyword', 'pie'],
|
||||
[/^\s*(flowchart|flowchart-v2|graph)/m, 'typeKeyword', 'flowchart'],
|
||||
[/^\s*sequenceDiagram/, 'typeKeyword', 'sequenceDiagram'],
|
||||
[/^\s*classDiagram(-v2)?/, 'typeKeyword', 'classDiagram'],
|
||||
[/^\s*journey/, 'typeKeyword', 'journey'],
|
||||
[/^\s*gantt/, 'typeKeyword', 'gantt'],
|
||||
[/^\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',
|
||||
'c4Diagram'
|
||||
],
|
||||
configDirectiveHandler,
|
||||
[/%%[^${].*$/, 'comment']
|
||||
],
|
||||
configDirective: [[/%%$/, { token: 'string', next: '@pop', nextEmbedded: '@pop' }]],
|
||||
gitGraph: [
|
||||
configDirectiveHandler,
|
||||
[/option(?=s)/, { token: 'typeKeyword', next: 'optionsGitGraph' }],
|
||||
[/(accTitle|accDescr)(\s*:)(\s*[^\n\r]+$)/, ['keyword', 'delimiter.bracket', 'string']],
|
||||
[
|
||||
/(^\s*branch)(.*?)(\s+order)(:\s*)(\d+\s*$)/,
|
||||
['keyword', 'variable', 'keyword', 'delimiter.bracket', 'number']
|
||||
],
|
||||
[/".*?"/, 'string'],
|
||||
[
|
||||
/(^\s*)(branch|reset|merge|checkout)(\s*\S+)/m,
|
||||
['delimiter.bracket', 'keyword', 'variable']
|
||||
],
|
||||
[
|
||||
/[A-Za-z][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@gitGraphBlockKeywords': 'typeKeyword',
|
||||
'@gitGraphKeywords': 'keyword'
|
||||
}
|
||||
}
|
||||
],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
|
||||
[/\^/, 'delimiter.bracket']
|
||||
],
|
||||
optionsGitGraph: [
|
||||
[
|
||||
/s$/,
|
||||
{
|
||||
token: 'typeKeyword',
|
||||
nextEmbedded: 'json'
|
||||
}
|
||||
],
|
||||
['end', { token: 'typeKeyword', next: '@pop', nextEmbedded: '@pop' }]
|
||||
],
|
||||
info: [
|
||||
[
|
||||
/[A-Za-z][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@infoBlockKeywords': 'typeKeyword',
|
||||
'@infoKeywords': 'keyword'
|
||||
}
|
||||
}
|
||||
]
|
||||
],
|
||||
pie: [
|
||||
configDirectiveHandler,
|
||||
[/(title|accDescription)(.*$)/, ['keyword', 'string']],
|
||||
[
|
||||
/[A-Za-z][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@pieBlockKeywords': 'typeKeyword',
|
||||
'@pieKeywords': 'keyword'
|
||||
}
|
||||
}
|
||||
],
|
||||
[/".*?"/, 'string'],
|
||||
[/\s*\d+/, 'number'],
|
||||
[/:/, 'delimiter.bracket'],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
|
||||
],
|
||||
flowchart: [
|
||||
configDirectiveHandler,
|
||||
[/[ox]?(--+|==+)[ox]/, 'transition'],
|
||||
[
|
||||
/[A-Za-z][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@flowchartBlockKeywords': 'typeKeyword',
|
||||
'@flowchartKeywords': 'keyword',
|
||||
'@default': 'variable'
|
||||
}
|
||||
}
|
||||
],
|
||||
[/\|+.+?\|+/, 'string'],
|
||||
[/\[+(\\.+?[/\\]|\/.+?[/\\])]+/, 'string'],
|
||||
[/[>[]+[^[\]|]+?]+/, 'string'],
|
||||
[/{+.+?}+/, 'string'],
|
||||
[/\(+.+?\)+/, 'string'],
|
||||
[/-\.+->?/, 'transition'],
|
||||
[/(-[.-])([^>-][^-]+?)(-{3,}|-{2,}>|\.-+>)/, ['transition', 'string', 'transition']],
|
||||
[/(==+)([^=]+?)(={3,}|={2,}>)/, ['transition', 'string', 'transition']],
|
||||
[/<?(--+|==+)>|===+|---+/, 'transition'],
|
||||
[/:::/, 'transition'],
|
||||
[/[&;]/, 'delimiter.bracket'],
|
||||
[/".*?"/, 'string'],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
|
||||
],
|
||||
sequenceDiagram: [
|
||||
configDirectiveHandler,
|
||||
[/(title:?|accDescription)([^\n\r;]*$)/, ['keyword', 'string']],
|
||||
[/(autonumber)([^\S\n\r]+off[^\S\n\r]*$)/, ['keyword', 'keyword']],
|
||||
[/(autonumber)((?:[^\S\n\r]+\d+){2}[^\S\n\r]*$)/, ['keyword', 'number']],
|
||||
[/(autonumber)([^\S\n\r]+\d+[^\S\n\r]*$)/, ['keyword', 'number']],
|
||||
[
|
||||
/(link\s+)(.*?)(:)(\s*.*?)(\s*@)(\s*[^\n\r;]+)/,
|
||||
['keyword', 'variable', 'delimiter.bracket', 'string', 'delimiter.bracket', 'string']
|
||||
],
|
||||
[
|
||||
/((?:links|properties)\s+)([^\n\r:]*?)(:\s+)/,
|
||||
[
|
||||
{ token: 'keyword' },
|
||||
{ token: 'variable' },
|
||||
{
|
||||
token: 'delimiter.bracket',
|
||||
nextEmbedded: 'javascript',
|
||||
next: '@sequenceDiagramLinksProps'
|
||||
}
|
||||
]
|
||||
],
|
||||
[
|
||||
/[A-Za-z][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@sequenceDiagramBlockKeywords': 'typeKeyword',
|
||||
'@sequenceDiagramKeywords': 'keyword',
|
||||
'@default': 'variable'
|
||||
}
|
||||
}
|
||||
],
|
||||
[/(--?>?>|--?[)x])[+-]?/, 'transition'],
|
||||
[/(:)([^\n:]*?$)/, ['delimiter.bracket', 'string']],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
|
||||
],
|
||||
sequenceDiagramLinksProps: [
|
||||
// [/^:/, { token: 'delimiter.bracket', nextEmbedded: 'json' }],
|
||||
[/$|;/, { nextEmbedded: '@pop', next: '@pop', token: 'delimiter.bracket' }]
|
||||
],
|
||||
classDiagram: [
|
||||
configDirectiveHandler,
|
||||
[/(^\s*(?:title|accDescription))(\s+.*$)/, ['keyword', 'string']],
|
||||
[
|
||||
/(\*|<\|?|o|)(--|\.\.)(\*|\|?>|o|)([\t ]*[A-Za-z]+[\t ]*)(:)(.*?$)/,
|
||||
['transition', 'transition', 'transition', 'variable', 'delimiter.bracket', 'string']
|
||||
],
|
||||
[/(?!class\s)([A-Za-z]+)(\s+[A-Za-z]+)/, ['type', 'variable']],
|
||||
[/(\*|<\|?|o)?(--|\.\.)(\*|\|?>|o)?/, 'transition'],
|
||||
[/^\s*class\s(?!.*{)/, 'keyword'],
|
||||
[
|
||||
/[A-Za-z][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@classDiagramBlockKeywords': 'typeKeyword',
|
||||
'@classDiagramKeywords': 'keyword',
|
||||
'@default': 'variable'
|
||||
}
|
||||
}
|
||||
],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
|
||||
[/(<<)(.+?)(>>)/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']],
|
||||
[/".*?"/, 'string'],
|
||||
[/:::/, 'transition'],
|
||||
[/:|\+|-|#|~|\*\s*$|\$\s*$|\(|\)|{|}/, 'delimiter.bracket']
|
||||
],
|
||||
journey: [
|
||||
configDirectiveHandler,
|
||||
[/(title)(.*)/, ['keyword', 'string']],
|
||||
[/(section)(.*)/, ['typeKeyword', 'string']],
|
||||
[
|
||||
/[A-Za-z][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@journeyBlockKeywords': 'typeKeyword',
|
||||
'@journeyKeywords': 'keyword',
|
||||
'@default': 'variable'
|
||||
}
|
||||
}
|
||||
],
|
||||
[
|
||||
/(^\s*.+?)(:)(.*?)(:)(.*?)([$,])/,
|
||||
[
|
||||
'string',
|
||||
'delimiter.bracket',
|
||||
'number',
|
||||
'delimiter.bracket',
|
||||
'variable',
|
||||
'delimiter.bracket'
|
||||
]
|
||||
],
|
||||
[/,/, 'delimiter.bracket'],
|
||||
[/(^\s*.+?)(:)([^:]*?)$/, ['string', 'delimiter.bracket', 'variable']],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
|
||||
],
|
||||
gantt: [
|
||||
configDirectiveHandler,
|
||||
[/(title)(.*)/, ['keyword', 'string']],
|
||||
[/(section)(.*)/, ['typeKeyword', 'string']],
|
||||
[/^\s*([^\n:]*?)(:)/, ['string', 'delimiter.bracket']],
|
||||
[
|
||||
/[A-Za-z][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@ganttBlockKeywords': 'typeKeyword',
|
||||
'@ganttKeywords': 'keyword'
|
||||
}
|
||||
}
|
||||
],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
|
||||
[/:/, 'delimiter.bracket']
|
||||
],
|
||||
stateDiagram: [
|
||||
configDirectiveHandler,
|
||||
[/note[^:]*$/, { token: 'typeKeyword', next: 'stateDiagramNote' }],
|
||||
['hide empty description', 'keyword'],
|
||||
[/^\s*state\s(?!.*{)/, 'keyword'],
|
||||
[/(<<)(fork|join|choice)(>>)/, 'annotation'],
|
||||
[/(\[\[)(fork|join|choice)(]])/, ['delimiter.bracket', 'annotation', 'delimiter.bracket']],
|
||||
[
|
||||
/[A-Za-z][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@stateDiagramBlockKeywords': 'typeKeyword',
|
||||
'@stateDiagramKeywords': 'keyword',
|
||||
'@default': 'variable'
|
||||
}
|
||||
}
|
||||
],
|
||||
[/".*?"/, 'string'],
|
||||
[/(:)([^\n:]*?$)/, ['delimiter.bracket', 'string']],
|
||||
[/{|}/, 'delimiter.bracket'],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
|
||||
[/-->/, 'transition'],
|
||||
[/\[.*?]/, 'string']
|
||||
],
|
||||
stateDiagramNote: [
|
||||
[/^\s*end note$/, { token: 'typeKeyword', next: '@pop' }],
|
||||
[/.*/, 'string']
|
||||
],
|
||||
erDiagram: [
|
||||
configDirectiveHandler,
|
||||
[/(title|accDescription)(.*$)/, ['keyword', 'string']],
|
||||
[/[|}][o|](--|\.\.)[o|][{|]/, 'transition'],
|
||||
[/".*?"/, 'string'],
|
||||
[/(:)(.*?$)/, ['delimiter.bracket', 'string']],
|
||||
[/[:{}]/, 'delimiter.bracket'],
|
||||
[/([A-Za-z]+)(\s+[A-Za-z]+)/, ['type', 'variable']],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
|
||||
[/[A-Z_a-z-][\w$]*/, 'variable']
|
||||
],
|
||||
requirementDiagram: [
|
||||
configDirectiveHandler,
|
||||
[/->|<-|-/, 'transition'],
|
||||
[/(\d+\.)*\d+/, 'number'],
|
||||
[
|
||||
/[A-Z_a-z-][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@requirementDiagramBlockKeywords': 'typeKeyword',
|
||||
'@default': 'variable'
|
||||
}
|
||||
}
|
||||
],
|
||||
[/[/:{}]/, 'delimiter.bracket'],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment'],
|
||||
[/".*?"/, 'string']
|
||||
],
|
||||
c4Diagram: [
|
||||
configDirectiveHandler,
|
||||
[/(title|accDescription)(.*$)/, ['keyword', 'string']],
|
||||
[/\(/, { token: 'delimiter.bracket', next: 'c4DiagramParenthesis' }],
|
||||
[
|
||||
/[A-Z_a-z-][\w$]*/,
|
||||
{
|
||||
cases: {
|
||||
'@c4DiagramBlockKeywords': 'typeKeyword',
|
||||
'@c4DiagramKeywords': 'keyword',
|
||||
'@default': 'variable'
|
||||
}
|
||||
}
|
||||
],
|
||||
[/%%[^$]([^%]*(?!%%$)%?)*$/, 'comment']
|
||||
],
|
||||
c4DiagramParenthesis: [
|
||||
[/,/, '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']
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
monacoEditor.editor.defineTheme('mermaid-dark', {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
colors: {},
|
||||
rules: [
|
||||
{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
|
||||
{ token: 'transition', foreground: '008800', fontStyle: 'bold' },
|
||||
{ token: 'identifier', foreground: '9cdcfe' }
|
||||
]
|
||||
});
|
||||
|
||||
monacoEditor.editor.defineTheme('mermaid', {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
colors: {},
|
||||
rules: [
|
||||
{ token: 'typeKeyword', foreground: '9650c8', fontStyle: 'bold' },
|
||||
{ token: 'keyword', foreground: '649696' },
|
||||
{ token: 'custom-error', foreground: 'ff0000', fontStyle: 'bold' },
|
||||
{ token: 'string', foreground: 'AA8500' },
|
||||
{ token: 'transition', foreground: '008800', fontStyle: 'bold' },
|
||||
{ token: 'delimiter.bracket', foreground: '000000', fontStyle: 'bold' },
|
||||
{ token: 'annotation', foreground: '4b4b96' },
|
||||
{ token: 'number', foreground: '4b4b96' },
|
||||
{ token: 'comment', foreground: '888c89' },
|
||||
{ token: 'variable', foreground: 'A22889' },
|
||||
{ token: 'type', foreground: '2BDEA8' },
|
||||
{ token: 'identifier', foreground: '9cdcfe' }
|
||||
]
|
||||
});
|
||||
|
||||
monacoEditor.languages.registerCompletionItemProvider('mermaid', {
|
||||
provideCompletionItems: () => {
|
||||
return {
|
||||
suggestions: []
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
monacoEditor.languages.setLanguageConfiguration('mermaid', {
|
||||
autoClosingPairs: [
|
||||
{
|
||||
open: '(',
|
||||
close: ')'
|
||||
},
|
||||
{
|
||||
open: '{',
|
||||
close: '}'
|
||||
},
|
||||
{
|
||||
open: '[',
|
||||
close: ']'
|
||||
}
|
||||
],
|
||||
brackets: [
|
||||
['(', ')'],
|
||||
['{', '}'],
|
||||
['[', ']']
|
||||
],
|
||||
comments: {
|
||||
lineComment: '%%'
|
||||
}
|
||||
});
|
||||
};
|
||||
+4
-26
@@ -15,8 +15,8 @@ export const initAnalytics = async (): Promise<void> => {
|
||||
plausible({
|
||||
domain: 'mermaid.live',
|
||||
hashMode: false,
|
||||
// All tracked stats are public and available at https://p.mermaid.live/mermaid.live
|
||||
apiHost: 'https://p.mermaid.live'
|
||||
trackLocalhost: false, // By default 'false'
|
||||
apiHost: 'https://plausible.io'
|
||||
})
|
||||
]
|
||||
});
|
||||
@@ -37,9 +37,7 @@ export const detectType = (text: string): string | undefined => {
|
||||
'graph',
|
||||
'journey',
|
||||
'pie',
|
||||
'stateDiagram',
|
||||
'quadrantChart',
|
||||
'mindmap'
|
||||
'stateDiagram'
|
||||
];
|
||||
const firstLine = text
|
||||
.replace(/^\s*%%.*\n/g, '\n')
|
||||
@@ -60,27 +58,7 @@ export const saveStatistics = (graph: string): void => {
|
||||
return;
|
||||
}
|
||||
const length = countLines(graph);
|
||||
const lengthBucket =
|
||||
length < 10
|
||||
? '0-10'
|
||||
: length < 25
|
||||
? '10-25'
|
||||
: length < 50
|
||||
? '25-50'
|
||||
: length < 100
|
||||
? '50-100'
|
||||
: length < 200
|
||||
? '100-200'
|
||||
: length < 500
|
||||
? '200-500'
|
||||
: length < 700
|
||||
? '500-700'
|
||||
: length < 1000
|
||||
? '700-1000'
|
||||
: length < 1500
|
||||
? '1000-1500'
|
||||
: '1500+';
|
||||
logEvent('render', { graphType, length, lengthBucket });
|
||||
logEvent('render', { graphType, length });
|
||||
};
|
||||
|
||||
const minutesToMilliSeconds = (minutes: number): number => {
|
||||
|
||||
@@ -9,56 +9,47 @@
|
||||
import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
|
||||
import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
|
||||
import { onMount } from 'svelte';
|
||||
import { base } from '$app/paths';
|
||||
import { dev } from '$app/environment';
|
||||
import type { Tab, DocumentationConfig, EditorMode, ValidatedState } from '$lib/types';
|
||||
import { base } from '$app/paths';
|
||||
|
||||
const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
|
||||
const docURLBase = 'https://mermaid-js.github.io/mermaid';
|
||||
const docMap: DocumentationConfig = {
|
||||
classDiagram: {
|
||||
code: '/syntax/classDiagram',
|
||||
config: '/syntax/classDiagram#configuration'
|
||||
},
|
||||
erDiagram: {
|
||||
code: '/syntax/entityRelationshipDiagram'
|
||||
graph: {
|
||||
code: '/#/flowchart',
|
||||
config: '/#/flowchart?id=configuration'
|
||||
},
|
||||
flowchart: {
|
||||
code: '/syntax/flowchart',
|
||||
config: '/syntax/flowchart#configuration'
|
||||
},
|
||||
gantt: {
|
||||
code: '/syntax/gantt',
|
||||
config: '/syntax/gantt#configuration'
|
||||
},
|
||||
gitGraph: {
|
||||
code: '/syntax/gitgraph',
|
||||
config: '/syntax/gitgraph#gitgraph-specific-configuration-options'
|
||||
},
|
||||
graph: {
|
||||
code: '/syntax/flowchart',
|
||||
config: '/syntax/flowchart#configuration'
|
||||
},
|
||||
journey: {
|
||||
code: '/syntax/userJourney'
|
||||
},
|
||||
mindmap: {
|
||||
code: '/syntax/mindmap'
|
||||
},
|
||||
pie: {
|
||||
code: '/syntax/pie',
|
||||
config: '/syntax/pie#configuration'
|
||||
},
|
||||
quadrantChart: {
|
||||
code: '/syntax/quadrantChart',
|
||||
config: '/syntax/quadrantChart#chart-configurations'
|
||||
code: '/#/flowchart',
|
||||
config: '/#/flowchart?id=configuration'
|
||||
},
|
||||
sequenceDiagram: {
|
||||
code: '/syntax/sequenceDiagram',
|
||||
config: '/syntax/sequenceDiagram#configuration'
|
||||
code: '/#/sequenceDiagram',
|
||||
config: '/#/sequenceDiagram?id=configuration'
|
||||
},
|
||||
classDiagram: {
|
||||
code: '/#/classDiagram',
|
||||
config: '/#/classDiagram?id=configuration'
|
||||
},
|
||||
'stateDiagram-v2': {
|
||||
code: '/syntax/stateDiagram'
|
||||
code: '/#/stateDiagram'
|
||||
},
|
||||
gantt: {
|
||||
code: '/#/gantt',
|
||||
config: '/#/gantt?id=configuration'
|
||||
},
|
||||
pie: {
|
||||
code: '/#/pie'
|
||||
},
|
||||
erDiagram: {
|
||||
code: '/#/entityRelationshipDiagram',
|
||||
config: '/#/entityRelationshipDiagram?id=styling'
|
||||
},
|
||||
journey: {
|
||||
code: '/#/user-journey'
|
||||
},
|
||||
gitGraph: {
|
||||
code: '/#/gitgraph',
|
||||
config: '/#/gitgraph?id=gitgraph-specific-configuration-options'
|
||||
}
|
||||
};
|
||||
let docURL = docURLBase;
|
||||
@@ -146,7 +137,7 @@
|
||||
<button
|
||||
class="btn btn-secondary btn-xs"
|
||||
title="View documentation for {docKey.replace('Diagram', '')} diagram">
|
||||
<a target="_blank" href={docURL} data-cy="docs">
|
||||
<a target="_blank" rel="noreferrer" href={docURL} data-cy="docs">
|
||||
<i class="fas fa-book mr-1" />Docs
|
||||
</a>
|
||||
</button>
|
||||
@@ -164,27 +155,22 @@
|
||||
<div id="resizeHandler" class="hidden md:block" />
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<Card title="Diagram" isCloseable={false}>
|
||||
<div slot="actions" class="flex flex-row items-center gap-2">
|
||||
<div slot="actions" class="flex flex-row items-center">
|
||||
<label class="cursor-pointer label py-0" for="panZoom">
|
||||
<span>Pan & Zoom</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle {$stateStore.panZoom ? 'btn-secondary' : 'toggle-primary'}"
|
||||
class="toggle {$stateStore.panZoom ? 'btn-secondary' : 'toggle-primary'} ml-1"
|
||||
id="panZoom"
|
||||
bind:checked={$inputStateStore.panZoom} />
|
||||
</label>
|
||||
<a
|
||||
href={`${base}/view#${$stateStore.serialized}`}
|
||||
target="_blank"
|
||||
class="btn btn-secondary btn-xs gap-1"
|
||||
title="View diagram in new page"><i class="fas fa-external-link-alt" />Full screen</a>
|
||||
<a
|
||||
href={`${MCBaseURL}/app/plugin/save?state=${$stateStore.serialized}`}
|
||||
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
|
||||
Mermaid Chart</a>
|
||||
rel="noreferrer"
|
||||
class="btn btn-secondary btn-xs"
|
||||
title="View diagram in new page"
|
||||
><i class="fas fa-external-link-alt mr-1" />Full screen</a>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 overflow-auto">
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16"><defs><style>.cls-1{fill:#ff3670;}.cls-2{fill:#fff;}</style></defs><rect class="cls-1" width="490.16" height="490.16" rx="84.61"/><path class="cls-2" d="M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z"/><path class="cls-2" d="M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z"/><path class="cls-2" d="M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 772 B |
Reference in New Issue
Block a user