Introduction

This project allows users to access an web editor which they can write code in. This editor uses the Ace Editor (https://ace.c9.io/), however it's using the React Extension of it (https://github.com/securingsincity/react-ace)

Adding custom mode/highlighting/worker to this project

The editor support a custom mode (Dhis2 mode) which assists users in using the DHIS2 API. DHIS2 delivers react components, allowing it's users to access the API through a declarative approach by using their UseDataQuery & UseDataMutation React components. The usage of these components requires a specific syntax. This editor helps users follow such syntax by highlighting & error/spell checking. The Mode (DHIS2 mode) assists in usage of the DHIS2 UseDataMutation/UseDataQuery.

How to edit the DHIS2 mode

The current DHIS2 mode is hosted in the ace-dhis2 repository. All javascript files related to the mode is under /lib/ace/mode & /lib/ace/mode/dhis2. It consists of the 4 files: dhis2.js - The "root" file of the mode dhis2_highlight_rules - The rules for highlightning syntax words. dhis2_worker - The worker which checks for syntax errors etc dhis2/dhis2_parse - A precise file specifying how syntax is allowed to be structured.

Check the readme-dhis2.md in that repository for seeing how to modify & test changes to either of these files.

How to build the DHIS2 mode

After all changes has been applied & tested, it's time to build it. Check out how to build it in their readme (https://github.com/ajaxorg/ace).

After building, you'll see the folder ace-builds. We wanna access the acebuilds/src-min-noflict as this is where our build mode is located.

How to add the mode to this project

There is already code on how it's added to the project with the imports etc: import 'ace-builds/src-noconflict/mode-dhis2'; import ace from 'ace-builds/src-noconflict/ace' // eslint-disable-next-line import/no-webpack-loader-syntax import dhisWorkerUrl from "!!file-loader!ace-builds/src-noconflict/worker-dhis2"; ace.config.setModuleUrl("ace/mode/dhis2_worker", dhisWorkerUrl);

HOWEVER: The issue is that the /ace-builds/src-nofconflict/dhis2-mode2 & other DHIS2 files inside this folder does not exist. This is because we're accessing /node_modules/ace-builds/src-conflict where these DHIS2 library files does not exist yet. So the last piece of the puzzle is to move the files we built to this node modules folder. This means we'll have /node_modules/ace-builds/src-noconflict/worker-dhis2 /node_modules/ace-builds/src-noconflict/mode-dhis2

And these files will make our syntax work and check for syntax errors based on what we defined earlier. Violla!

See these links regarding how to add the custom worker to the project. This worker does the syntax checking and marks error in the editor if there's syntax errors. https://github.com/securingsincity/react-ace/issues/725 https://github.com/securingsincity/react-ace/issues/1108