feat: Add Mermaid Diagram block

* chore: Add tsx to editorconfig

* feat: Add Mermaid Diagram block

.editorconfig

@@ -25,7 +25,7 @@ max_line_length = off
 # 4 space indentation
 indent_size = 4
 
-[*.{html,dtml,pt,zpt,xml,zcml,js,jsx,json,less,css}]
+[*.{html,dtml,pt,zpt,xml,zcml,js,jsx,tsx,json,less,css}]
 # 2 space indentation
 indent_size = 2
 

.prettierignore

@@ -0,0 +1 @@
+.storybook

Makefile

@@ -63,6 +63,11 @@ start-storybook: ## Starts Storybook
 	@echo "$(GREEN)==> Start Storybook $(RESET)"
 	${DOCKER_COMPOSE} up addon-storybook
 
+.PHONY: debug
+debug: ## Starts Dev container
+	@echo "$(GREEN)==> Start Addon Development container $(RESET)"
+	${DOCKER_COMPOSE} exec -it addon-dev bash
+
 .PHONY: dev
 dev: ## Develop the addon
 	@echo "$(GREEN)==> Start Development Environment $(RESET)"

dockerfiles/docker-compose.yml

@@ -18,8 +18,6 @@ services:
     ports:
       - 3000:3000
       - 3001:3001
-    depends_on:
-      - backend
     tty: true
     profiles:
       - dev

src/components/Block/DefaultView.jsx → src/components/Blocks/Code/DefaultView.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import SyntaxHighlighter from '../SyntaxHighlighter/SyntaxHighlighter';
+import SyntaxHighlighter from '../../SyntaxHighlighter/SyntaxHighlighter';
 
 const CodeView = (props) => {
   const { data } = props;

src/components/Block/Edit.jsx → src/components/Blocks/Code/Edit.jsx

@@ -3,7 +3,7 @@ import { withBlockExtensions } from '@plone/volto/helpers';
 import { SidebarPortal } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 import CodeBlockData from './Data';
-import Editor from '../Editor/Editor.tsx';
+import Editor from '../../Editor/Editor.tsx';
 import { highlight } from 'prismjs/components/prism-core';
 
 const CodeBlockEdit = (props) => {

src/components/Block/schema.js → src/components/Blocks/Code/schema.js

@@ -1,5 +1,5 @@
 import { defineMessages } from 'react-intl';
-import STYLES from '../SyntaxHighlighter/Styles';
+import STYLES from '../../SyntaxHighlighter/Styles';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({

src/components/Blocks/Mermaid/DefaultView.jsx

@@ -0,0 +1,19 @@
+import React, { useEffect, useState } from 'react';
+
+const MermaidView = (props) => {
+  const { code } = props;
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    if (window.mermaid) {
+      setLoaded(true);
+    }
+  }, [loaded]);
+  useEffect(() => {
+    if (loaded && window.mermaid) {
+      window.mermaid.contentLoaded();
+    }
+  }, [loaded, code]);
+  return <>{code && <pre className="mermaid">{code}</pre>}</>;
+};
+
+export default MermaidView;

src/components/Blocks/Mermaid/Edit.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+import Editor from '../../Editor/Editor.tsx';
+import { highlight } from 'prismjs/components/prism-core';
+
+const MermaidBlockEdit = (props) => {
+  const { data, block, onChangeBlock } = props;
+  const [code, setCode] = React.useState(data.code || '');
+  const className = `code-block-wrapper edit light`;
+  const allLanguages = config.settings.codeBlock.languages;
+  const language = allLanguages['mermaid'].language;
+
+  const handleChange = (code) => {
+    setCode(code);
+    onChangeBlock(block, { ...data, code: code });
+  };
+
+  return (
+    <div className="block code">
+      <div className={className}>
+        <Editor
+          value={code}
+          onValueChange={(code) => handleChange(code)}
+          highlight={(code) => highlight(code, language)}
+          padding={10}
+          preClassName={`code-block-wrapper ${data.style} language-mermaid`}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default withBlockExtensions(MermaidBlockEdit);

src/components/Blocks/Mermaid/View.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import MermaidView from './DefaultView';
+import { withBlockExtensions } from '@plone/volto/helpers';
+
+const MermaidBlockView = (props) => {
+  const { data } = props;
+  const code = data.code || '';
+  return <>{code && <MermaidView code={code} />}</>;
+};
+
+export default withBlockExtensions(MermaidBlockView);

src/helpers/Mermaid/MermaidConfig.jsx

@@ -0,0 +1,19 @@
+const MermaidConfig = () => {
+  const script = `
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+  window.mermaid = mermaid;
+  mermaid.initialize(
+    { startOnLoad: true }
+  );
+  `;
+  return (
+    <script
+      type="module"
+      dangerouslySetInnerHTML={{
+        __html: script,
+      }}
+    />
+  );
+};
+
+export default MermaidConfig;

src/index.js

@@ -1,6 +1,13 @@
 import codeSVG from '@plone/volto/icons/code.svg';
-import CodeBlockViewBlock from './components/Block/View';
-import CodeBlockEditBlock from './components/Block/Edit';
+import showcaseSVG from '@plone/volto/icons/showcase.svg';
+
+import MermaidConfig from './helpers/Mermaid/MermaidConfig';
+
+import CodeBlockViewBlock from './components/Blocks/Code/View';
+import CodeBlockEditBlock from './components/Blocks/Code/Edit';
+
+import MermaidBlockEdit from './components/Blocks/Mermaid/Edit';
+import MermaidBlockView from './components/Blocks/Mermaid/View';
 
 import './theme/main.less';
 import './theme/theme-dark.less';
@@ -15,6 +22,7 @@ import 'prismjs/components/prism-json';
 import 'prismjs/components/prism-less';
 // import 'prismjs/components/prism-markdown';
 import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-mermaid';
 import 'prismjs/components/prism-nginx';
 import 'prismjs/components/prism-python';
 import 'prismjs/components/prism-scss';
@@ -23,6 +31,14 @@ import 'prismjs/components/prism-yaml';
 import { languages } from 'prismjs/components/prism-core';
 
 const applyConfig = (config) => {
+  config.settings.appExtras = [
+    ...config.settings.appExtras,
+    {
+      match: '',
+      component: MermaidConfig,
+    },
+  ];
+
   config.blocks.blocksConfig.codeBlock = {
     id: 'codeBlock',
     title: 'Code Block',
@@ -37,6 +53,20 @@ const applyConfig = (config) => {
     defaultLanguage: 'python',
     defaultStyle: 'dark',
   };
+
+  config.blocks.blocksConfig.mermaidBlock = {
+    id: 'mermaidBlock',
+    title: 'Mermaid Diagram',
+    icon: showcaseSVG,
+    group: 'text',
+    view: MermaidBlockView,
+    edit: MermaidBlockEdit,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 0,
+    blockHasOwnFocusManagement: false,
+  };
+
   config.settings['codeBlock'] = {
     languages: {
       bash: { label: 'Bash', language: languages.bash },
@@ -46,6 +76,7 @@ const applyConfig = (config) => {
       json: { label: 'JSON', language: languages.json },
       less: { label: 'LESS', language: languages.less },
       markdown: { label: 'Markdown', language: languages.markdown },
+      mermaid: { label: 'Mermaid', language: languages.mermaid },
       nginx: { label: 'nginx', language: languages.nginx },
       python: { label: 'Python', language: languages.python },
       scss: { label: 'SCSS', language: languages.scss },