Merge pull request #9 from AlexMikhalev/main

Added mermaid shortcut

README.md

@@ -64,11 +64,13 @@ To delete a saved or last used color just click it with the right mouse button.
 
 ## Changelog
 
+- Version 0.2.2
+  - added /mermaid snipplet to generate mermaid code block - allows drawing diagrams ![](assets/Mermaid.png)
 - Version 0.2.1
   ⁻ Some Bug Fixes
-  - No input preview mode
-  - Highlighting of the html buttons when hover
-  - Replace selection when insert colors.
+    - No input preview mode
+    - Highlighting of the html buttons when hover
+    - Replace selection when insert colors.
   - Saved Colors can be added and edited in the settings.
   - New HTML Tags `<details></details>` and `<summary></summary>`
 - Vesion 0.2.0

src/SidePanelControlView.ts

@@ -210,6 +210,9 @@ export class SidePanelControlView extends ItemView {
     button = row.createDiv({ cls: 'nav-action-button' });
     addClickEvent(button, 'link');
     button.appendChild(svgToElement('link'));
+    button = row.createDiv({ cls: 'nav-action-button' });
+    addClickEvent(button, 'mermaidBlock');
+    button.appendChild(svgToElement('mermaidBlock'));
 
     button = row.createDiv({ cls: 'nav-action-button' });
     addClickEvent(button, 'internalLink');

src/formatter.ts

@@ -90,15 +90,6 @@ export const formatSettings = {
     newLine: false,
     enclose: false,
   },
-  codeInline: {
-    des: 'code_inline',
-    icon: 'codeInline',
-    symbol: '``',
-    shift: 1,
-    selectionInput: 1,
-    newLine: false,
-    enclose: false,
-  },
   codeBlock: {
     des: 'code_block',
     icon: 'codeBlock',
@@ -108,6 +99,24 @@ export const formatSettings = {
     newLine: true,
     enclose: true,
   },
+  mermaidBlock: {
+    des: 'mermaid_block',
+    icon: 'mermaidBlock',
+    symbol: '```mermaid \n```',
+    shift: 4,
+    selectionInput: 4,
+    newLine: true,
+    enclose: true,
+  },
+  codeInline: {
+    des: 'code_inline',
+    icon: 'codeInline',
+    symbol: '``',
+    shift: 1,
+    selectionInput: 1,
+    newLine: false,
+    enclose: false,
+  },
   link: {
     des: 'link',
     icon: 'link',
@@ -235,7 +244,7 @@ export function iconFormatter(
         editor.replaceRange(item.symbol, curserStart);
         editor.setCursor(curserStart.line, curserStart.ch + item.shift);
       }
-    } else if (['code_block'].contains(item.des)) {
+    } else if (['code_block'].contains(item.des)||['mermaid_block'].contains(item.des)) {
       if (isSelection) {
         const re = new RegExp('^(```).*(```)$', 'gs');
         const match = selection.trim().match(re);

src/icons.ts

@@ -20,6 +20,7 @@ export const icons: Record<string, string> = {
   codeInline: pathToSvg(mdiIcons.mdiCodeTags),
   codeBlock: pathToSvg(mdiIcons.mdiXml),
   link: pathToSvg(mdiIcons.mdiLinkVariant),
+  mermaidBlock: pathToSvg(mdiIcons.mdiGraph),
   fileLink: pathToSvg(mdiIcons.mdiFileLink),
   image: pathToSvg(mdiIcons.mdiImage),
   quote: pathToSvg(mdiIcons.mdiFormatIndentIncrease),