Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@contiamo/code-editor

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contiamo/code-editor

Monaco editor preconfigured with PSL and SQL languages

  • 3.12.1
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
2
decreased by-93.33%
Maintainers
4
Weekly downloads
 
Created

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

FAQs

Package last updated on 27 Aug 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts