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.