Contiamo Code editor
A Monaco editor with PSL and SQL languages ready to use!
Local development
npm i
npm start
- 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)} />;
}
}