react-monaco-editor

  • Version 0.45.0
  • Published
  • 59.9 kB
  • 2 dependencies
  • MIT license

Install

npm i react-monaco-editor
yarn add react-monaco-editor
pnpm add react-monaco-editor

Overview

Monaco Editor for React

Index

Classes

class MonacoDiffEditor

class MonacoDiffEditor extends React.Component<MonacoDiffEditorProps> {}

    constructor

    constructor(props: MonacoDiffEditorProps);

      property assignRef

      assignRef: (component: HTMLDivElement) => void;

        property defaultProps

        static defaultProps: {
        width: string;
        height: string;
        original: any;
        value: any;
        defaultValue: string;
        language: string;
        theme: any;
        options: {};
        overrideServices: {};
        editorDidMount: typeof noop;
        editorWillMount: typeof noop;
        onChange: typeof noop;
        className: any;
        };

          property editor

          editor?: any;

            property propTypes

            static propTypes: {
            width: any;
            height: any;
            original: any;
            value: any;
            defaultValue: any;
            language: any;
            theme: any;
            options: any;
            overrideServices: any;
            editorDidMount: any;
            editorWillMount: any;
            onChange: any;
            className: any;
            };

              method componentDidMount

              componentDidMount: () => void;

                method componentDidUpdate

                componentDidUpdate: (prevProps: MonacoDiffEditorProps) => void;

                  method componentWillUnmount

                  componentWillUnmount: () => void;

                    method destroyMonaco

                    destroyMonaco: () => void;

                      method editorDidMount

                      editorDidMount: (editor: any) => void;

                        method editorWillMount

                        editorWillMount: () => any;

                          method initModels

                          initModels: (value: string, original: string) => void;

                            method initMonaco

                            initMonaco: () => void;

                              method render

                              render: () => any;

                                class MonacoEditor

                                class MonacoEditor extends React.Component<MonacoEditorProps> {}

                                  constructor

                                  constructor(props: MonacoEditorProps);

                                    property assignRef

                                    assignRef: (component: HTMLDivElement) => void;

                                      property defaultProps

                                      static defaultProps: {
                                      width: string;
                                      height: string;
                                      value: any;
                                      defaultValue: string;
                                      language: string;
                                      theme: any;
                                      options: {};
                                      overrideServices: {};
                                      editorDidMount: typeof noop;
                                      editorWillMount: typeof noop;
                                      onChange: typeof noop;
                                      className: any;
                                      };

                                        property editor

                                        editor?: any;

                                          property propTypes

                                          static propTypes: {
                                          width: any;
                                          height: any;
                                          value: any;
                                          defaultValue: any;
                                          language: any;
                                          theme: any;
                                          options: any;
                                          overrideServices: any;
                                          editorDidMount: any;
                                          editorWillMount: any;
                                          onChange: any;
                                          className: any;
                                          };

                                            method componentDidMount

                                            componentDidMount: () => void;

                                              method componentDidUpdate

                                              componentDidUpdate: (prevProps: MonacoEditorProps) => void;

                                                method componentWillUnmount

                                                componentWillUnmount: () => void;

                                                  method destroyMonaco

                                                  destroyMonaco: () => void;

                                                    method editorDidMount

                                                    editorDidMount: (editor: any) => void;

                                                      method editorWillMount

                                                      editorWillMount: () => any;

                                                        method initMonaco

                                                        initMonaco: () => void;

                                                          method render

                                                          render: () => any;

                                                            Interfaces

                                                            interface MonacoDiffEditorProps

                                                            interface MonacoDiffEditorProps extends MonacoEditorBaseProps {}

                                                              property editorDidMount

                                                              editorDidMount?: DiffEditorDidMount;
                                                              • An event emitted when the editor has been mounted (similar to componentDidMount of React).

                                                              property editorWillMount

                                                              editorWillMount?: DiffEditorWillMount;
                                                              • An event emitted before the editor mounted (similar to componentWillMount of React).

                                                              property onChange

                                                              onChange?: DiffChangeHandler;
                                                              • An event emitted when the content of the current model has changed.

                                                              property options

                                                              options?: monacoEditor.editor.IDiffEditorConstructionOptions;
                                                              • Refer to Monaco interface {monaco.editor.IDiffEditorConstructionOptions}.

                                                              property original

                                                              original?: string;
                                                              • The original value to compare against.

                                                              property overrideServices

                                                              overrideServices?: monacoEditor.editor.IEditorOverrideServices;
                                                              • Refer to Monaco interface {monaco.editor.IEditorOverrideServices}.

                                                              property value

                                                              value?: string;
                                                              • Value of the auto created model in the editor. If you specify value property, the component behaves in controlled mode. Otherwise, it behaves in uncontrolled mode.

                                                              interface MonacoEditorBaseProps

                                                              interface MonacoEditorBaseProps {}

                                                                property className

                                                                className?: string | null;
                                                                • Optional string classname to append to the editor.

                                                                property defaultValue

                                                                defaultValue?: string;
                                                                • The initial value of the auto created model in the editor.

                                                                property height

                                                                height?: string | number;
                                                                • Height of editor. Defaults to 100%.

                                                                property language

                                                                language?: string;
                                                                • The initial language of the auto created model in the editor. Defaults to 'javascript'.

                                                                property theme

                                                                theme?: string | null;
                                                                • Theme to be used for rendering. The current out-of-the-box available themes are: 'vs' (default), 'vs-dark', 'hc-black'. You can create custom themes via monaco.editor.defineTheme.

                                                                property width

                                                                width?: string | number;
                                                                • Width of editor. Defaults to 100%.

                                                                interface MonacoEditorProps

                                                                interface MonacoEditorProps extends MonacoEditorBaseProps {}

                                                                  property editorDidMount

                                                                  editorDidMount?: EditorDidMount;
                                                                  • An event emitted when the editor has been mounted (similar to componentDidMount of React).

                                                                  property editorWillMount

                                                                  editorWillMount?: EditorWillMount;
                                                                  • An event emitted before the editor mounted (similar to componentWillMount of React).

                                                                  property onChange

                                                                  onChange?: ChangeHandler;
                                                                  • An event emitted when the content of the current model has changed.

                                                                  property options

                                                                  options?: monacoEditor.editor.IStandaloneEditorConstructionOptions;
                                                                  • Refer to Monaco interface {monaco.editor.IStandaloneEditorConstructionOptions}.

                                                                  property overrideServices

                                                                  overrideServices?: monacoEditor.editor.IEditorOverrideServices;
                                                                  • Refer to Monaco interface {monaco.editor.IEditorOverrideServices}.

                                                                  property value

                                                                  value?: string | null;
                                                                  • Value of the auto created model in the editor. If you specify null or undefined for this property, the component behaves in uncontrolled mode. Otherwise, it behaves in controlled mode.

                                                                  Type Aliases

                                                                  type ChangeHandler

                                                                  type ChangeHandler = (
                                                                  value: string,
                                                                  event: monacoEditor.editor.IModelContentChangedEvent
                                                                  ) => void;

                                                                    type DiffChangeHandler

                                                                    type DiffChangeHandler = ChangeHandler;

                                                                      type DiffEditorDidMount

                                                                      type DiffEditorDidMount = (
                                                                      editor: monacoEditor.editor.IStandaloneDiffEditor,
                                                                      monaco: typeof monacoEditor
                                                                      ) => void;

                                                                        type DiffEditorWillMount

                                                                        type DiffEditorWillMount = (
                                                                        monaco: typeof monacoEditor
                                                                        ) => void | monacoEditor.editor.IStandaloneEditorConstructionOptions;

                                                                          type EditorConstructionOptions

                                                                          type EditorConstructionOptions = NonNullable<
                                                                          Parameters<typeof monacoEditor.editor.create>[1]
                                                                          >;
                                                                          • Remarks

                                                                            This will be IStandaloneEditorConstructionOptions in newer versions of monaco-editor, or IEditorConstructionOptions in versions before that was introduced.

                                                                          type EditorDidMount

                                                                          type EditorDidMount = (
                                                                          editor: monacoEditor.editor.IStandaloneCodeEditor,
                                                                          monaco: typeof monacoEditor
                                                                          ) => void;

                                                                            type EditorWillMount

                                                                            type EditorWillMount = (
                                                                            monaco: typeof monacoEditor
                                                                            ) => void | EditorConstructionOptions;

                                                                              Package Files (4)

                                                                              Dependencies (2)

                                                                              Dev Dependencies (15)

                                                                              Peer Dependencies (2)

                                                                              Badge

                                                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-monaco-editor.

                                                                              • Markdown
                                                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-monaco-editor)
                                                                              • HTML
                                                                                <a href="https://www.jsdocs.io/package/react-monaco-editor"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>