question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[@monaco-editor/react] formatDocument is not working

See original GitHub issue

I am trying to format the json text present in the Editor using editorDidMount method, but its not working when readOnly option is set as true.

I am using @monaco-editor/react": “^3.2.1”

PFA the code snippet. Any work around or suggestions will be helpful

  const editorDidMount = (_valueGetter: any, editor: any) => {
    if (editor) {
      setTimeout(function() {
        editor.getAction('editor.action.formatDocument').run();
      }, 300);
    }
  };
  
   <Editor
            language={props.language}
            value={props.data.payload || ''}
            height={'300px'}
            options={{
              readOnly: true,
              autoIndent: 'full',
              automaticLayout: true,
              minimap: {
                enabled: false,
              },
              wordWrap: 'on',
              formatOnPaste: true,
              formatOnType: true,
            }}
            editorDidMount={editorDidMount}
          />

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
chandrashekhar-patilcommented, Dec 21, 2022

Hi @rainy789, Thanks for the code snippet. It works!

0reactions
rainy789commented, Dec 21, 2022

The following workaround works.

  const handleEditorMount = (editor) => {
    setTimeout(function () {
      editor
        .getAction('editor.action.formatDocument')
        .run()
        .then(() => editor.updateOptions({ readOnly: true }));
    }, 500);
  };
Read more comments on GitHub >

github_iconTop Results From Across the Web

json automatic formatting · Issue #89 · react-monaco-editor ...
problem I used JSON.stringif to format the json, and set it to the value property, but it will not auto format document.
Read more >
how to format format a piece of codes - monaco editor
I am going to make a SQL editor which is not a built-in language. If you try to make "Format Document" and "Format...
Read more >
@monaco-editor/react - npm
Start using @monaco-editor/react in your project by running `npm i @monaco-editor/react`. There are 315 other projects in the npm registry ...
Read more >
Monaco Editor component for React.
React Monaco Editor ... MonacoEditor component for React. ... This library is supported for use in Windows Tailored Apps only. Build: 6.2.8100.0.
Read more >
Monaco Editor Playground
Press Chord Ctrl-K, Ctrl-M => the action will run if it is enabled. editor.addAction({. // An unique identifier of the contributed action.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found