@contiamo/code-editor
v3.12.1
Published
Monaco editor preconfigured with PSL and SQL languages
Downloads
80
Readme
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)} />;
}
}