Config Editor - Tools Library

This project includes editor tools for use in React based JSON Schema editors, incl. the CANedge config editor.

Installation

npm install --save config-editor-tools

Requirements (v2.x): Node >= 20, React >= 18, config-editor-base 4.x, react-redux >= 8 and react-select >= 5 as peers. Some transitive packages (react-files, react-gh-like-diff) declare stale React peer ranges - consumers should add npm overrides for them or install with --legacy-peer-deps.

---

Development testing

Use Node >= 20 (e.g. nvm use 24.13.0). Clone this repository, then run npm install in the root and in the example/ folder. After this, run npm start in the root (microbundle watch) and npm start in the example/ folder (Vite dev server on port 3000).

---

Publishing a new package via npm

To publish your own custom version as an npm package, you can modify the package.json and run npm publish. You'll need to be logged in first.

Usage in a parent app

The editor tools are self-contained modals and can be imported into parent apps in a simple way as below:

import React from 'react'

import { BitRateModal, FilterModal, EncryptionModal } from 'config-editor-tools'

const App = () => {
  return <FilterModal/>
}

export default App

---

Usage in a config-editor-base modules

A typical use case is to parse a list of editor tools to the config-editor-base module as in e.g. the CANedge configuration editor. This can be done via below syntax:

import React from 'react'
import { connect } from 'react-redux'

import { EncryptionModal } from 'config-editor-tools'
import { EditorSection } from 'config-editor-base'

import * as actionsAlert from '../alert/actions'
import AlertContainer from '../alert/AlertContainer'

class Editor extends React.Component {
  render() {
    let editorTools = [
      {
        name: 'encryption-modal',
        comment: 'Encryption tool',
        class: 'fa fa-lock',
        modal: <EncryptionModal showAlert={this.props.showAlert} />
      }
    ]

    return (
      <div className='file-explorer'>
        <div className='fe-body fe-body-offline'>
          <AlertContainer />
          <EditorSection
            editorTools={editorTools}
            showAlert={this.props.showAlert}
          />
        </div>
      </div>
    )
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    showAlert: (type, message) =>
      dispatch(actionsAlert.set({ type: type, message: message }))
  }
}

export default connect(null, mapDispatchToProps)(Editor)