HCP Calcs Editor

Customized editor built on 'react-ace' component.

Setup and execute

• Execute the below command in terminal/command prompt to install the dependencies.

npm install

• Execute the below command to fix the vulnerabilities.

npm audit fix

• Execute the below command to build the project.

npm run build

• Execute the below command to prepare and launch the Calcs Editor in the development server.

npm run HCPCalcsEditor

Open the link http://localhost:9000/ in browser to check the Calcs Editor in the development server.

Information for the development team

1. Calcs Editor configurations like mode, theme are set in the below file,

HCPCalcsEditor\index.js

2. If there is change in the HCP Grammar, get the newly generated HCPGrammar JavaScript files and update them under,

src\parser

Go through the # Custom changes section as there are path updates required in the newly generated HCPGrammar JavaScript files.

3. Code editor files are placed under,

node_modules\brace

node_modules\brace\ext\language_tools.js node_modules\brace\mode\hcpgrammar.js node_modules\brace\snippets\hcpgrammar.js node_modules\brace\worker\hcpgrammar.js

The 'node_modules\brace\worker\hcpgrammar.js' file is stringified. Original source code for this worker is present under,

tools\brace\workersrc

If any change is required in this worker file, please follow the below steps.

• Open 'brace' project from 'tools\brace'

• Execute the command to install the dependencies 'npm install'

• Make the required changes to the file 'tools\brace\workersrc\hcpgrammar.js'

• Execute the command to get the updated file 'npm run update'

• The updated file can be found in 'tools\brace\worker\hcpgrammar.js'

• Copy this file and place it under 'node_modules\brace\worker'

Custom changes

Here are the modules/files customized here. These may require merge while upgrading the corresponding projects in future.

Parser:

src\parser\JavaScriptBaseLexer.js src\parser\JavaScriptBaseParser.js

HCPGrammar files:

While placing newly generated HCPGrammar files, it is required to update the antlr4/index path as require('./antlr4/index') in the below files.

src\parser\HCPGrammarErrorListener.js src\parser\HCPGrammarParser.js src\parser\HCPGrammarParserListener.js src\parser\HCPGrammarParserVisitor.js

Brace:

node_modules\brace\ext\language_tools.js node_modules\brace\mode\hcpgrammar.js node_modules\brace\snippets\hcpgrammar.js node_modules\brace\worker\hcpgrammar.js

Information for the development team uses this component

// javascript import React from 'react'; import { render } from 'react-dom'; import brace from 'brace'; import Editor from 'HCPCalcsEditor';

// Render editor render( <Editor mode="hcpgrammar" theme="monokai" name="UNIQUE_ID_OF_DIV" editorProps={{$blockScrolling: true}} />, document.getElementById('Editor') );