CODEWITHSUNDEEP
reactjsace-editor
soulmachine
soulmachine

Reputation: 4153

A thin wrapper of ACE editor to make a React Component

I wrote a component which is a thin wrapper of ace editor. The ACE editor will appear for only a second then disappears, which is very weird.

The complete code is as the following:

import React, { PropTypes, Component } from 'react';

class AceEditor extends Component {

  static propTypes = {
    mode: PropTypes.string.isRequired,
    content: PropTypes.string.isRequired,
  };

  static defaultProps = {
    mode: 'javascript',
    code: '//write your code here',
  };

  render() {
      const jsCode = '<div id="my-ace-editor" style="font-size: 14px !important;border: 1px solid lightgray;">' +
        this.props.code + '</div> \
      <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js" type="text/javascript" charset="utf-8"></script> \
      <script> \
        var editor = ace.edit("my-ace-editor"); \
        editor.setTheme("ace/theme/clouds"); \
        editor.getSession().setMode("ace/mode/javascript"); \
        editor.setShowPrintMargin(false); \
        editor.setOptions({minLines: 25}); \
        editor.setOptions({maxLines: 50}); \
      </script>';

      return <div id="ace-editor-container" dangerouslySetInnerHTML={{__html: jsCode}} />
    //return <p>{this.props.code}</p>
  }
}

export default AceEditor;

The idea is simple, just insert the raw HTML code by using dangerouslySetInnerHTML, and the raw HTML code is as the following:

<div id="ace-editor-container">
<div id="my-ace-editor" style="font-size: 14px !important;border: 1px solid lightgray;">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("my-ace-editor");
    editor.setTheme("ace/theme/clouds");
    editor.getSession().setMode("ace/mode/javascript");
    editor.setShowPrintMargin(false);
    editor.setOptions({minLines: 25});
    editor.setOptions({maxLines: 50});
</script>
</div>

The raw HTML code comes from the official website https://ace.c9.io/#nav=embedding, with very few minor modifications.

Am I doing something wrong?

Upvotes: 3

Views: 3931

Answers (1)

romseguy
romseguy

Reputation: 1563

You'd want to hook on componentDidMount to bridge React with many other libraries:

import React, { PropTypes, Component } from 'react';

class AceEditor extends Component {

  static propTypes = {
    mode: PropTypes.string,
    content: PropTypes.string,
  };

  static defaultProps = {
    mode: 'javascript',
    code: '//write your code here',
  };

  componentDidMount(){
    const node = React.findDOMNode(this.refs.root);
    const editor = ace.edit(node);
    editor.setTheme("ace/theme/clouds");
    editor.getSession().setMode("ace/mode/javascript");
    editor.setShowPrintMargin(false);
    editor.setOptions({minLines: 25});
    editor.setOptions({maxLines: 50});
  }

  render() {
    const style = {fontSize: '14px !important', border: '1px solid lightgray'};
      return (
        <div ref="root" style={style}>
          {this.props.code}
        </div>
      );
  }
}

export default AceEditor;

Include ace.js elsewhere in your development build, or use CommonJS modules if the library supports it.

Working example: http://codepen.io/romseguy/pen/LGYxNj

Upvotes: 8

Related Questions