xm-code-editor

Code editor component for React. Based on the Monaco Editor.

Installation

npm i @beisen/code-editor

Properties

• includes all props of react-monaco-editor
• storageKey: localstorage key
• onChange: instead of react-monaco-editor onChange props, params as:

type EditorValueProps = {
  source: string;
  transformed: string;
};
onChange: (value: EditorValueProps) => void; // 输入内容变化时触发

Usage

import React, { Component } from "react";
import { Dialog } from "@alifd/next";
import Editor from "./Editor";

export default class EditorModal extends Component {
  static defaultProps = {
    title: "代码编辑"
  };
  constructor(props) {
    super(props);
    this.state = {
      code: props.defaultValue || ""
    };
  }
  handleCloseEditor = () => {
    this.props.onCancel && this.props.onCancel();
  };
  handleConfirmEditor = () => {
    this.props.onOk && this.props.onOk(this.state.code);
  };
  handleChange = value => {
    this.setState({
      code: value.source
    });
  };
  render() {
    const { title, visible } = this.props;
    return (
      <Dialog
        {...this.props}
        className="editor-dialog"
        title={title}
        visible={visible}
        onOk={this.handleConfirmEditor}
        onCancel={this.handleCloseEditor}
        onClose={this.handleCloseEditor}
        height="calc(100vh - 100px)"
      >
        <Editor
          {...this.props}
          value={this.state.code}
          onChange={this.handleChange}
          width="800"
          height="calc(100vh - 220px)"
        />
      </Dialog>
    );
  }
}