@contiamo/code-editor
TypeScript icon, indicating that this package has built-in type declarations

3.12.1 • Public • Published

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:

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)} />;
  }
}

Readme

Keywords

none

Package Sidebar

Install

npm i @contiamo/code-editor

Weekly Downloads

1

Version

3.12.1

License

ISC

Unpacked Size

3.64 MB

Total Files

120

Last publish

Collaborators

  • tejaskumar
  • fabien0102
  • mpotomin