Method componentDidMount

src/ace.tsx:186–328

()

    return false;
  }
  public componentDidMount() {
    const {
      className,
      onBeforeLoad,
      onValidate,
      mode,
      focus,
      theme,
      fontSize,
      lineHeight,
      value,
      defaultValue,
      showGutter,
      wrapEnabled,
      showPrintMargin,
      scrollMargin = [0, 0, 0, 0],
      keyboardHandler,
      onLoad,
      commands,
      annotations,
      markers,
      placeholder
    } = this.props;

    this.editor = ace.edit(this.refEditor) as IAceEditor;

    if (onBeforeLoad) {
      onBeforeLoad(ace);
    }

    const editorProps = Object.keys(this.props.editorProps);
    for (let i = 0; i < editorProps.length; i++) {
      this.editor[editorProps[i]] = this.props.editorProps[editorProps[i]];
    }
    if (this.props.debounceChangePeriod) {
      this.onChange = this.debounce(
        this.onChange,
        this.props.debounceChangePeriod
      );
    }
    this.editor.renderer.setScrollMargin(
      scrollMargin[0],
      scrollMargin[1],
      scrollMargin[2],
      scrollMargin[3]
    );
    if (this.isInShadow(this.refEditor)) {
      this.editor.renderer.attachToShadowRoot();
    }
    this.editor
      .getSession()
      .setMode(
        typeof mode === "string" ? `ace/mode/${mode}` : (mode as Ace.SyntaxMode)
      );
    if (theme && theme !== "") this.editor.setTheme(`ace/theme/${theme}`);
    this.editor.setFontSize(
      typeof fontSize === "number" ? `${fontSize}px` : fontSize
    );