Skip to content

Creating an Editor Component

Now that we've created a component, we are going to make it render the Monaco Editor at https://www.npmjs.com/package/@monaco-editor/react, which is an editor for editing code, similar to the existing sc-ace-text.

To do this:

  1. Install the @monaco-editor/react module with:

    yarn add @monaco-editor/react

  2. Import the Monaco Editor library in src/components/JdMonacoEditorComponent.tsx with:

    import Editor from "@monaco-editor/react";

  3. In the returned JSX of the component, change: html <div> <p>jd-monaco-editor works. Please edit src/components/JdMonacoEditor.tsx to make changes</p> <h3>Next Steps</h3> <ul> . . . . </ul> </div> To:

html <Editor height="90vh" defaultLanguage="javascript" defaultValue="// some comment" />

You should see the component build in the npm watch window:

webpack 5.14.0 compiled <span style="color:green">successfully</span> in 208 ms

  1. Reload the component test template. A basic editor will display:

    Editor Basic

  2. We now need to make the editor load and save values in formbird documents. To load the value from the formbird document we can set the value property in the Monaco Editor component, shown at https://www.npmjs.com/package/@monaco-editor/react#editor, by replacing:

    defaultValue="// some comment"

    With: 

    value={value}

    value is a commonly used property name for the value property in a React component, but some library components may have a different property name.

  3. To make the value be saved in the document:

    Add a change handler for the onChange property from https://www.npmjs.com/package/@monaco-editor/react#editor:

    javascript function handleEditorChange(textValue, event) { // call valueChanged to trigger the document dirty, OnFieldChange, etc. This will set the value in the formbird document so it will be saved when the document is saved changedDocumentService.valueChanged({ document, fieldName, textValue, formParameters, template, componentDefinition, key }, textValue); } Then make the handleEditorChange function be called when the value in the editor changes:

    onChange={handleEditorChange}

    onChange is a commonly used name for the change handler in React components, but some libraries may have other names for the onChange function.

    This is how the jsx should look.

    html <Editor height="90vh" defaultLanguage="javascript" value={value} onChange={handleEditorChange} /> 7. Reload the component test template and update the value. The save tick will be visible:

    Editor Basic

This example is available at: https://github.com/formbird-components/component-examples/tree/master/jd-monaco-editor