react-monaco-editor

  • Version 0.47.0
  • Published
  • 63.4 kB
  • 1 dependency
  • 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: {};
        editorWillMount: typeof noop;
        editorDidMount: typeof noop;
        editorWillUnmount: 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;
            editorWillMount: any;
            editorDidMount: any;
            editorWillUnmount: 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 editorWillUnmount

                          editorWillUnmount: (editor: any) => void;

                            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: {};
                                        editorWillMount: typeof noop;
                                        editorDidMount: typeof noop;
                                        editorWillUnmount: 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;
                                            editorWillMount: any;
                                            editorDidMount: any;
                                            editorWillUnmount: 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 editorWillUnmount

                                                          editorWillUnmount: (editor: any) => void;

                                                            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 editorWillUnmount

                                                                  editorWillUnmount?: DiffEditorWillUnmount;
                                                                  • An event emitted before the editor unmount (similar to componentWillUnmount 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 editorWillUnmount

                                                                      editorWillUnmount?: EditorWillUnmount;
                                                                      • An event emitted before the editor unmount (similar to componentWillUnmount 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 DiffEditorWillUnmount

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

                                                                                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;

                                                                                    type EditorWillUnmount

                                                                                    type EditorWillUnmount = (
                                                                                    editor: monacoEditor.editor.IStandaloneCodeEditor,
                                                                                    monaco: typeof monacoEditor
                                                                                    ) => void | EditorConstructionOptions;

                                                                                      Package Files (4)

                                                                                      Dependencies (1)

                                                                                      Dev Dependencies (16)

                                                                                      Peer Dependencies (3)

                                                                                      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>