feat: Use prismjs as default highlighter mechanism. (#6)

* feat: Use prismjs as default highlighter mechanism.

* chore: Fix GHA workflows

* chore: Lint code

.github/workflows/acceptance.yml

@@ -0,0 +1,51 @@
+name: Acceptance tests
+on: [push]
+
+env:
+  ADDON_NAME: "@plonegovbr/volto-code-block"
+  ADDON_PATH: "volto-code-block"
+  VOLTO_VERSION: "16"
+
+jobs:
+
+  acceptance:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Install Cypress
+        run: |
+          cd acceptance
+          yarn
+      - name: "Cypress: Acceptance tests"
+        uses: cypress-io/github-action@v4
+        env:
+          BABEL_ENV: production
+          CYPRESS_RETRIES: 2
+        with:
+          parallel: false
+          browser: chrome
+          working-directory: acceptance
+          spec: cypress/tests/*.js
+          install: false
+          start: |
+            docker compose -f ci.yml --profile prod up
+          wait-on: 'npx wait-on --httpTimeout 20000 http-get://localhost:55001/plone http://localhost:3000'
+
+      # Upload Cypress screenshots
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-screenshots-acceptance
+          path: acceptance/cypress/screenshots
+
+      # Upload Cypress videos
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: cypress-videos-acceptance
+          path: acceptance/cypress/videos

.github/workflows/code.yml

@@ -3,21 +3,10 @@ on: [push]
 jobs:
   codeanalysis:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16.x]
-        python-version: [3.8]
 
     steps:
       - name: Main checkout
         uses: actions/checkout@v3
 
-      # node setup
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-
       - name: Linting
         run: make lint

.github/workflows/unit.yml

@@ -3,21 +3,10 @@ on: [push]
 jobs:
   unit:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16.x]
-        python-version: [3.8]
 
     steps:
       - name: Main checkout
         uses: actions/checkout@v3
 
-      # node setup
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-
       - name: Linting
         run: make test-ci

.gitignore

@@ -1,8 +1,6 @@
 .vscode
-addon-testing-project/
-project/
-node_modules
-cypress/videos/
+acceptance/node_modules
+acceptance/cypress/videos/
 results
 build
 .storybook

Makefile

@@ -22,7 +22,7 @@ RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
 PLONE_VERSION=6
-VOLTO_VERSION=16.10.0
+VOLTO_VERSION=16.12.0
 
 ADDON_NAME='@plonegovbr/volto-code-block'
 ADDON_PATH='volto-code-block'

README.md

@@ -29,15 +29,7 @@ You can also check its [Storybook](https://plonegovbr.github.io/volto-code-block
 
 ### New Volto Project
 
-Create a Volto project
-
-```shell
-npm install -g yo @plone/generator-volto
-yo @plone/volto my-volto-project --addon @plonegovbr/volto-code-block
-cd my-volto-project
-```
-
-Install new add-on and restart Volto:
+Create a Volto project, and nstall the new add-on and restart Volto:
 
 ```shell
 yarn install
@@ -58,44 +50,52 @@ If you already have a Volto project, just update `package.json`:
 }
 ```
 
-### Configure language available in block setting
+### Configure language available in the block setting
+
+You can specify the language available in the setting by changing in `config.js` (or index.js) by modifying the object in `config.settings.codeBlock.languages`. Each item is composed of an object containing:
+
+* label: Friendly name for the language. i.e.: Python
+* language: Reference to `prismjs` language component.
 
-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:
+Example:
+
 ```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';
+
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-docker';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-less';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-nginx';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-yaml';
+
+
+import { languages } from 'prismjs/components/prism-core';
+
 
 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],
-        ],
+        languages: {
+        bash: { label: 'Bash', language: languages.bash },
+        css: { label: 'CSS', language: languages.css },
+        dockerfile: { label: 'Dockerfile', language: languages.dockerfile },
+        javascript: { label: 'Javascript', language: languages.js },
+        json: { label: 'JSON', language: languages.json },
+        less: { label: 'LESS', language: languages.less },
+        markdown: { label: 'Markdown', language: languages.markdown },
+        nginx: { label: 'nginx', language: languages.nginx },
+        python: { label: 'Python', language: languages.python },
+        scss: { label: 'SCSS', language: languages.scss },
+        yaml: { label: 'Yaml', language: languages.yaml },
+        xml: { label: 'XML', language: languages.xml },
+        },
     };
 
     return config;
@@ -110,6 +110,6 @@ Go to http://localhost:3000/
 
 ## Credits
 
-The development of this add on was sponsored by the Brazilian Plone Community
+The development of this add-on was sponsored by the Brazilian Plone Community
 
 [![PloneGov-Br](docs/plonegovbr.png)](https://plone.org.br/)