Having trouble with NodeJS require and CodeMirror addons

1

I’ve done the following code segment. It loads codemirror just fine in a div, but the addons that I’d like do not seem to work. Anyone have some insight on what I may be doing incorrectly

var CODE = require("codemirror");
require('codemirror/addon/edit/matchbrackets');
require('codemirror/addon/edit/closebrackets');
require('codemirror/addon/scroll/annotatescrollbar');
require('codemirror/addon/search/matchesonscrollbar');
require('codemirror/addon/search/searchcursor');
require('codemirror/addon/search/match-highlighter');

var codemirror = CODE(document.getElementById("txtbox"), {
		mode: "javascript",
		lineWrapping: false,
		extraKeys: {
			'Ctrl-Space': 'autocomplete',
			'Ctrl-S': fn_saveScript
		},
		lineNumbers: true,
		theme: 'monokai',
		value: "",
		indentUnit: 4,
		highlightSelectionMatches: {showToken: /\w/, annotateScrollbar: true}
	});
2

You don’t seem to be actually enabling the addons you’re loading. Could you be more specific on what you were expecting to happen?

3

Well match-highlighter is supposed to search and highlight instances of a word when one instance of that word is highlighted. But that doesn’t seem to happen with the code above.

How would I go about enabling the addons I’m loading? I figured “highlightSelectionMatches” was supposed to do that.

4

It is, yes, that’s the addon you did enable. Since NodeJS require doesn’t exist in the browser, I assume you’re using some kind of bundler or client-side module loader. Which one?

5

I’m using Electron and npm to install codemiror.

6

Could you verify that CodeMirror’s main lib is only loaded once (for example by putting a console.log in codemirror.js)? Sometimes module loaders end up resolving the library differently when required from addons, and they get a different instance and thus don’t register themselves with the instance you’re actually using.

7

I put a console.log at the top of codemirror/lib/codemirror.js and it only printed once for the entire duration of running my program.

8

bump… any thoughts? Still can’t figure this out.

9 
require('codemirror/addon/edit/matchbrackets');
require('codemirror/addon/edit/closebrackets');
require('codemirror/addon/scroll/annotatescrollbar');
require('codemirror/addon/search/matchesonscrollbar');
require('codemirror/addon/search/searchcursor');
require('codemirror/addon/search/match-highlighter');
var CODE = require("codemirror");

You could try to require the addons before requiring codemirror itself…

10

Just tried that one. Didn’t seem to work either. I’ve also tried adding .js to the end of the imports, but no luck with that as well.

11

You might be able to see whether your plugins managed to load by calling CodeMirror.defaults.hasOwnProperty("highlightSelectionMatches"). If that’s false, the plugin wasn’t loaded, or was loaded against a different instance of the core library.

12

It raises the error

Uncaught TypeError: Cannot read property 'hasOwnProperty' of undefined

Printing the codemirror instance itself gives

I only have one instance of codemirror running in my program so it doesn’t seem to be an instance problem.

13

With CodeMirror, I mean the constructor, not your instance.

14

Oh I see. I fixed that. It returns false.

15

Then I guess Electron is somehow failing to unify the various references to the codemirror libary, and your addons are loaded into a different instance from the one that you get. You could try changing your first line to var CODE = require("codemirror/lib/codemirror") and see if that helps.

16

Now it returns true :slight_smile: , however the addons still do not seem to be activated. using

require('codemirror/mode/' + language + '/' + language);

seems to work fine btw.