b-kelly/prosemirror-highlightjs

prosemirror-highlightjs's Issues

How to use it?

Hi Kelly,

I have implemented your plugin but for some reason nothing happens.
Do you have a working demo website?

Thanks in advance.

Default autohighlightCallback causes freeze and "Maximum call stack size exceeded"

My users and I noticed this issue in my program Codex, that when you create a code block with a language it works fine, but when you create a code block with no language to be auto-highlighted, it freezes the program for 10+ seconds and spits out an Uncaught RangeError: Maximum call stack size exceeded error when creating and when typing. One user reported that this caused his entire code block to be erased and he couldn't get it back using Undo

To make sure this wasn't something in my program causing this I made a completely barebones empty project with electron, prosemirror-example-setup, prosemirror-highlightjs(0.7.1), and highlightjs(11.2.0) and it does the same thing.

The solution on my end was to disable the autohighlightCallback all together in getHighlightDecorations.ts:

// if we autohighlighted and have a callback set, call it
if (!language && options?.autohighlightCallback) {

    // COMMENTING OUT THIS LINE 
    // options.autohighlightCallback(b.node, b.pos, result.language);

}

Here's the error message:

C:\Users\jcv8000\Desktop\hljstest\node_modules\highlight.js\lib\core.js:2184 Uncaught RangeError: Maximum call stack size exceeded
    at Array.sort (<anonymous>)
    at Object.highlightAuto (C:\Users\jcv8000\Desktop\hljstest\node_modules\highlight.js\lib\core.js:2184)
    at C:\Users\jcv8000\Desktop\hljstest\node_modules\prosemirror-highlightjs\dist\index.js:1
    at Array.forEach (<anonymous>)
    at r (C:\Users\jcv8000\Desktop\hljstest\node_modules\prosemirror-highlightjs\dist\index.js:1)
    at d (C:\Users\jcv8000\Desktop\hljstest\node_modules\prosemirror-highlightjs\dist\index.js:1)
    at Plugin.apply (C:\Users\jcv8000\Desktop\hljstest\node_modules\prosemirror-highlightjs\dist\index.js:1)
    at EditorState.applyInner (C:\Users\jcv8000\Desktop\hljstest\node_modules\prosemirror-state\dist\index.js:871)
    at EditorState.applyTransaction (C:\Users\jcv8000\Desktop\hljstest\node_modules\prosemirror-state\dist\index.js:835)
    at EditorState.apply (C:\Users\jcv8000\Desktop\hljstest\node_modules\prosemirror-state\dist\index.js:811)

Some words are getting multiple hljs classes?

Hey, this is a really awesome plugin and I wanted to say thank you because it made my life a hell of a lot easier.

I was just testing different themes and I realized that some of the words in the code blocks like "public static void Main()" were plain white. I used inspect element and saw that most words in the code block are getting multiple hljs CSS classes (mostly hljs-class, hljs-title and hljs-function) on top of their correct css class. Some whitespace characters are also getting the hljs-class class.

And this is causing highlighted code to have the wrong colors in some places

For comparison I made a regular highlight.js block outside of prosemirror and every word is only getting a max of 1 hljs CSS class.

I was just wondering if there was something that I need to change in my project or if this was a bug?

Edit: by the way I'm using prosemirror-example-setup and sticking this plugin in that setup, not writing my own plugin like the 2nd example in the readme

Decorations are applied on every doc change

Hi,
really nice plugin!
I did try it out and seems like decorations are applied on every doc change, even if the change is not affecting a code_block node, resulting in a really 'slow' typing experience. This happens even if you just have 2-3 code blocks on the doc, or am I missing something? As I can get the plugin(just noticed it) I guess I can change that, but wondering if that what i should do.