Reply To: Code Editor

[R B ATTENBOROUGH]

Okay, very nearly there now. The code editor now accepts settings, so the block now looks like this:

return [
    isSelected && <Inspector { ...{setAttributes, ...props} } />,
    <div>
        <div>
            <h4>Language: {language}</h4>
        </div>
        <CodeEditor
            value={ content }
            settings={Object.assign(  {
                codemirror: {
                mode: language,
                lint: true
            } }) }
            onChange={ ( content ) => setAttributes( { content } ) }
        />
    </div>
];

I’m providing the language via an inspector block and currently the user can choose between html, javascript and css. When I update the language option this is reflected in the language title changing. However the CodeEditor component doesn’t change. Should I be adding something to the onChange method?

There’s some documentation here: https://github.com/WordPress/gutenberg/tree/master/components/code-editor which suggests editorRef and this.editorInstance.setOption( 'mode', 'css' ); can be used to change modes, but I’m not quite sure how to a) use the editorRef or b) how to change the language for a specific CodeEditor instance (user may want different editors using different languages on the same post).

No worries if you can’t help. I appreciate this component is pretty new! (By the way my code on https://github.com/BenAttenborough/rba-codeblock will only work with the Gutenberg taken direct from github).