From 74580286dfec0b99169ad6fbae24a0167eac7787 Mon Sep 17 00:00:00 2001 From: jimbiscuit Date: Mon, 21 Nov 2022 12:42:32 +0100 Subject: [PATCH] feat: Add easy language list configuration --- README.md | 46 ++++++++++++++++ src/components/Block/DefaultView.jsx | 3 +- src/components/Block/schema.js | 4 +- .../SyntaxHighlighter/SyntaxHighlighter.jsx | 52 ++++--------------- src/index.js | 31 +++++++++++ 5 files changed, 90 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 54c3d77..9c24393 100644 --- a/README.md +++ b/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/ diff --git a/src/components/Block/DefaultView.jsx b/src/components/Block/DefaultView.jsx index 1b37330..e067aa9 100644 --- a/src/components/Block/DefaultView.jsx +++ b/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(); diff --git a/src/components/Block/schema.js b/src/components/Block/schema.js index b9ae935..0a16dd1 100644 --- a/src/components/Block/schema.js +++ b/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'; @@ -32,7 +31,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 = () => { diff --git a/src/components/SyntaxHighlighter/SyntaxHighlighter.jsx b/src/components/SyntaxHighlighter/SyntaxHighlighter.jsx index 5422f63..8b977ed 100644 --- a/src/components/SyntaxHighlighter/SyntaxHighlighter.jsx +++ b/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; +}; diff --git a/src/index.js b/src/index.js index 78d7268..a1018f1 100644 --- a/src/index.js +++ b/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; };