Merge pull request #4 from affinitic/language-config

feat: Add easy language list configuration

README.md

@@ -58,6 +58,52 @@ If you already have a Volto project, just update `package.json`:
 }
 ```
 
+### Configure language available in block setting
+
+You can specify the language available in the setting by changing in you config.js (or index.js) by modify the list in `config.settings.codeBlock.languages`. Each item of the list is compose of a list :
+* index 0 : language id
+* index 1 : language title
+* index 2 : module use for syntax highlight import from `react-syntax-highlighter/dist/cjs/languages/hljs`
+
+Exemple:
+```javascript
+import bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash';
+import css from 'react-syntax-highlighter/dist/cjs/languages/hljs/css';
+import dockerfile from 'react-syntax-highlighter/dist/cjs/languages/hljs/dockerfile';
+import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
+import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
+import less from 'react-syntax-highlighter/dist/cjs/languages/hljs/less';
+import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
+import nginx from 'react-syntax-highlighter/dist/cjs/languages/hljs/nginx';
+import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python';
+import scss from 'react-syntax-highlighter/dist/cjs/languages/hljs/scss';
+import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml';
+import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
+
+const applyConfig = (config) => {
+    config.settings['codeBlock'] = {
+        languages: [
+        ['bash', 'Bash', bash],
+        ['css', 'CSS', css],
+        ['dockerfile', 'Dockerfile', dockerfile],
+        ['javascript', 'Javascript', javascript],
+        ['json', 'JSON', json],
+        ['less', 'LESS', less],
+        ['markdown', 'Markdown', markdown],
+        ['nginx', 'nginx', nginx],
+        ['python', 'Python', python],
+        ['scss', 'SCSS', scss],
+        ['yaml', 'Yaml', yaml],
+        ['xml', 'XML', xml],
+        ],
+    };
+
+    return config;
+};
+
+export default applyConfig;
+```
+
 ### Test it
 
 Go to http://localhost:3000/

src/components/Block/DefaultView.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import useCopy from 'use-copy';
-import { SyntaxHighlighter } from '../SyntaxHighlighter/SyntaxHighlighter';
+import { SyntaxHighlighterConfig } from '../SyntaxHighlighter/SyntaxHighlighter';
 import { Icon } from '@plone/volto/components';
 import checkSVG from '@plone/volto/icons/check.svg';
 import clipboardSVG from '@plone/volto/icons/copy.svg';
@@ -11,6 +11,7 @@ const CodeView = (props) => {
   const styleWrap = wrapLongLines ? 'wrapLongLines' : '';
   const className = `code-block-wrapper ${style} ${styleWrap}`;
   const [copied, copy, setCopied] = useCopy(data.code);
+  const SyntaxHighlighter = SyntaxHighlighterConfig();
 
   const copyText = () => {
     copy();

src/components/Block/schema.js

@@ -1,5 +1,4 @@
 import { defineMessages } from 'react-intl';
-import { LANGUAGES } from '../SyntaxHighlighter/SyntaxHighlighter';
 import STYLES from '../SyntaxHighlighter/Styles';
 import config from '@plone/volto/registry';
 
@@ -36,7 +35,8 @@ export const codeSchema = (props) => {
   const defaultStyle = config.blocks?.blocksConfig?.codeBlock?.defaultStyle;
 
   const availableLanguages = () => {
-    return LANGUAGES.map((item) => [item[0], item[1]]);
+    const languages = config.settings.codeBlock.languages || [];
+    return languages.map((item) => [item[0], item[1]]);
   };
 
   const availableStyles = () => {

src/components/SyntaxHighlighter/SyntaxHighlighter.jsx

@@ -1,45 +1,11 @@
 // Languages: https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/languages/hljs/supported-languages.js
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-
-import bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash';
-import css from 'react-syntax-highlighter/dist/cjs/languages/hljs/css';
-import dockerfile from 'react-syntax-highlighter/dist/cjs/languages/hljs/dockerfile';
-import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
-import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
-import less from 'react-syntax-highlighter/dist/cjs/languages/hljs/less';
-import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
-import nginx from 'react-syntax-highlighter/dist/cjs/languages/hljs/nginx';
-import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python';
-import scss from 'react-syntax-highlighter/dist/cjs/languages/hljs/scss';
-import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
-import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml';
-
-SyntaxHighlighter.registerLanguage('bash', bash);
-SyntaxHighlighter.registerLanguage('css', css);
-SyntaxHighlighter.registerLanguage('dockerfile', dockerfile);
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-SyntaxHighlighter.registerLanguage('json', json);
-SyntaxHighlighter.registerLanguage('less', less);
-SyntaxHighlighter.registerLanguage('markdown', markdown);
-SyntaxHighlighter.registerLanguage('nginx', nginx);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('scss', scss);
-SyntaxHighlighter.registerLanguage('xml', xml);
-SyntaxHighlighter.registerLanguage('yaml', yaml);
-
-const LANGUAGES = [
-  ['bash', 'Bash'],
-  ['css', 'CSS'],
-  ['dockerfile', 'Dockerfile'],
-  ['javascript', 'Javascript'],
-  ['json', 'JSON'],
-  ['less', 'LESS'],
-  ['markdown', 'Markdown'],
-  ['nginx', 'nginx'],
-  ['python', 'Python'],
-  ['scss', 'SCSS'],
-  ['yaml', 'Yaml'],
-  ['xml', 'XML'],
-];
-
-export { LANGUAGES, SyntaxHighlighter };
+import config from '@plone/volto/registry';
+
+export const SyntaxHighlighterConfig = () => {
+  const languages = config.settings.codeBlock.languages || [];
+  languages.forEach(async (element, i) => {
+    SyntaxHighlighter.registerLanguage(element[0], element[2]);
+  });
+  return SyntaxHighlighter;
+};

src/index.js

@@ -5,6 +5,19 @@ import './theme/main.less';
 import './theme/theme-dark.less';
 import './theme/theme-light.less';
 
+import bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash';
+import css from 'react-syntax-highlighter/dist/cjs/languages/hljs/css';
+import dockerfile from 'react-syntax-highlighter/dist/cjs/languages/hljs/dockerfile';
+import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
+import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
+import less from 'react-syntax-highlighter/dist/cjs/languages/hljs/less';
+import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
+import nginx from 'react-syntax-highlighter/dist/cjs/languages/hljs/nginx';
+import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python';
+import scss from 'react-syntax-highlighter/dist/cjs/languages/hljs/scss';
+import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml';
+import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
+
 const applyConfig = (config) => {
   config.blocks.blocksConfig.codeBlock = {
     id: 'codeBlock',
@@ -20,6 +33,24 @@ const applyConfig = (config) => {
     defaultLanguage: 'python',
     defaultStyle: 'dark',
   };
+
+  config.settings['codeBlock'] = {
+    languages: [
+      ['bash', 'Bash', bash],
+      ['css', 'CSS', css],
+      ['dockerfile', 'Dockerfile', dockerfile],
+      ['javascript', 'Javascript', javascript],
+      ['json', 'JSON', json],
+      ['less', 'LESS', less],
+      ['markdown', 'Markdown', markdown],
+      ['nginx', 'nginx', nginx],
+      ['python', 'Python', python],
+      ['scss', 'SCSS', scss],
+      ['yaml', 'Yaml', yaml],
+      ['xml', 'XML', xml],
+    ],
+  };
+
   return config;
 };