How to add close bracket and close tag for react code mirror

Question

How to add close bracket and close tag for react code mirror

1.9k views Asked by Pranavan At 21 September 2024 at 12:27

I'm using react-codemirror2 in a react project. I want to add features like auto bracket close and auto tag close. There is a npm package called @codemirror/closebrackets but I can't find any documentation to do that.

        <ControlledEditor
            onBeforeChange={handleChange}
            value={value}
            className="code-mirror-wrapper"
            options={{
                linerWrapping: true,
                lint: true,
                mode: language,
                theme: 'material',
                lineNumbers: true
            }}
        />

This is my react component. Specify if there is a way to do without additional packages like @codemirror/closebrackets.

Original Q&A

There are 2 answers

Zezo Android On 19 May 2022 at 07:03

This really works:

    <!doctype html>
    <html>
      <head>
    <title>CodeMirror</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <link rel=stylesheet href="https://CodeMirror.net/doc/docs.css">
    <script src="https://CodeMirror.net/addon/hint/anyword-hint.js" id="anyword"></script>
    <link rel="stylesheet" href="https://CodeMirror.net/lib/codemirror.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/hint/show-hint.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/dialog/dialog.css">
    <link rel="stylesheet" href="https://CodeMirror.net/addon/search/matchesonscrollbar.css">
    <script src="https://CodeMirror.net/lib/codemirror.js"></script>
    <script src="https://CodeMirror.net/addon/edit/closetag.js"></script>
    <script src="https://CodeMirror.net/addon/hint/show-hint.js"></script>
    <script src="https://CodeMirror.net/addon/hint/sql-hint.js"></script>
     <script src="https://CodeMirror.net/addon/mode/loadmode.js"></script>
    <script src="https://CodeMirror.net/mode/meta.js"></script>
    <script src="https://CodeMirror.net/addon/hint/xml-hint.js"></script>
    <script src="https://CodeMirror.net/addon/hint/html-hint.js"></script>
    <script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script>
    <script src="https://CodeMirror.net/addon/hint/javascript-hint.js"></script>
    <script src="https://CodeMirror.net/mode/xml/xml.js"></script>
    <script src="https://CodeMirror.net/mode/javascript/javascript.js"></script>
    <script src="https://CodeMirror.net/mode/css/css.js"></script>
    <script src="https://CodeMirror.net/mode/htmlmixed/htmlmixed.js"></script>
    <script src="https://CodeMirror.net/addon/dialog/dialog.js"></script> 
    <script src="https://CodeMirror.net/addon/search/searchcursor.js"></script>
    <script src="https://CodeMirror.net/addon/search/jump-to-line.js"></script> 
    <script src="https://CodeMirror.net/addon/search/search.js"></script> 
    <script src="https://CodeMirror.net/addon/scroll/annotatescrollbar.js"></script> 
    <script src="https://CodeMirror.net/addon/search/matchesonscrollbar.js"></script>
    </head>
    <body>
    <div id="editor"></div>
<button onclick="closeBrackets()">Close Brackets</button>
    <script>
        function closeBrackets() {
            
            myCodeMirror.execCommand("closeBrackets");
        }
    </script>
    <script>
       var myCodeMirror = CodeMirror(
       document.getElementById('editor'), {
          lineNumbers: true,
          autoCloseBrackets: true,
       });
    </script>
    </body>
    </html>

**alisasani** · Accepted Answer · 2021-07-18 09:57:48

You can add autoCloseBrackets: true to your options and it'll work fine. From the doc:

Defines an option autoCloseBrackets that will auto-close brackets and quotes when typed.

import 'codemirror/addon/edit/closebrackets'

// other parts of the code//

<ControlledEditor
            onBeforeChange={handleChange}
            value={value}
            className="code-mirror-wrapper"
            options={{
                linerWrapping: true,
                lint: true,
                mode: language,
                theme: 'material',
                lineNumbers: true,
                autoCloseBrackets: true,
            }}
        />

TechQA.

How to add close bracket and close tag for react code mirror

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in CODEMIRROR

Related Questions in REACT-CODEMIRROR2

Popular Questions

Popular Tags

Trending Questions