b-kelly / prosemirror-highlightjs Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
Hi Kelly,
I have implemented your plugin but for some reason nothing happens.
Do you have a working demo website?
Thanks in advance.
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)
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.