Contiamo Code editor

A Monaco editor with PSL and SQL languages ready to use!

Local development

1. npm i
2. npm start
3. Start hacking 🤟

How to update lexer and parser?

If you want/need to update grammar files (*.g4), you need to regenerate the lexer/parser from antlr.

To do this you need:

• a working antlr environment locally -> https://www.antlr.org/
• exec npm run generate-parser

Note: Generated files are versionned, so you don't need java or antlr if you don't need to update grammars 😉

Integration

Webpack configuration

To integrate this in your application, first you need style-loader and css-loader for webpack.

$ npm i -D style-loader css-loader

// webpack.config.js
+ module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: ["style-loader", "css-loader"],
+       },
+     ],
+   },

You will also need to copy the service worker file to your public directory.

$ npm i -D copy-webpack-plugin

// webpack.config.js
+ const CopyWebpackPlugin = require("copy-webpack-plugin");
...
+ plugins: [
+    new CopyWebpackPlugin([{ from: "node_modules/@contiamo/code-editor/dist/editor.worker.*.js", flatten: true }]),
+  ],

React Wrapper

import React from "react";
import bootstrapMonaco, { Config, Editor } from "@contiamo/code-editor";

export interface MyEditorProps {
  value: string;
  language: Config["language"];
  disabled: boolean;
  onChange: (value: string) => void;
}
export class MyEditor extends React.Component<MyEditorProps> {
  private editor: Editor | undefined;
  private containerNode: HTMLElement | undefined;

  componentDidMount() {
    if (!this.containerNode) {
      return;
    }

    this.editor = bootstrapMonaco(this.containerNode, {
      language: this.props.language,
      value: this.props.value,
      disabled: this.props.disabled,
    });

    // handle onChange
    this.editor.subscribe((value: string) => {
      if (this.props.onChange && !this.props.disabled) {
        this.props.onChange(value);
      }
    });
  }

  componentWillUnmount() {
    if (this.editor) {
      this.editor.unmount();
    }
  }

  render() {
    return <div innerRef={node => (this.containerNode = node)} />;
  }
}