Installing a CodeMirror addon

[Grahack]

Hi, First, thanks for react-codemirror2.

My question: is there any documentation about addons? I'd like to use one but don't know where to start.

I'm using react-codemirror2 from ClojureScript but will be able to adapt from jsx.

Thanks

[scniro]

Hm, I have not used an addon before. Looking over the docs, it appears as if you'll just need to require the file and maybe specify an option. I see some addons will extend the instance object that is passed back to you via various callbacks. At first glance, using addons seems to be a similar approach to specifying a mode or theme.

Do you have a particular one you are trying to use? Have you tried to implement one yet? I'll happily look at this with you but I'm unsure where you're at or what you've tried so far.

[AlanFoster]

Love the plugin; I was wondering the same question myself. I'm going to see if it's possible to use the addon CodeMirror.MergeView for viewing code diffs whilst using this react wrapper :+1:

[scniro]

@AlanFoster Please let me know how that goes! If there is an issue just let me know here and I'll happily square this way for you both 😃

[Grahack]

In fact, thanks to your « you'll just need to require the file » thing, I realized that I already integrated a CodeMirror mode. Addons can be integrated the same way. It works.

In my ClojureScript project, I integrate React modules the old ugly way. Adding a line with a dummy identifier in src/js/main.js made the addon available. Feel free to reopen if needed.

Cheerz!!!

[scniro]

@Grahack I'm happy to hear! @AlanFoster please let me know if you're all set as well when you can.

[PullJosh]

Hey folks! This is an old thread, but I was struggling with installing CodeMirror addons myself and eventually found a solution. I thought I'd leave it here in case it helps someone else in the future. ;)

What I Did

Here's how I managed to install an addon (in my case, emmet):

// Import regular old CodeMirror
import CodeMirror from 'codemirror'

// Import the addon and apply it to CodeMirror
import emmet from '@emmetio/codemirror-plugin'
emmet(CodeMirror)

// Then import the react wrapper...
import { Controlled as ReactCodeMirror } from 'react-codemirror2'

// ... and use it like normal
const ExampleComponent = () => (
    <ReactCodeMirror
        options={{
            // Specific settings for my chosen addon (emmet)
            extraKeys: {
                Tab: 'emmetExpandAbbreviation'
                Enter: 'emmetInsertLineBreak'
            }
        }}
        // ... other props
    />
)

Of course, if anyone has a better method, please let me know!