Incorrect Prism global in browser environment

[thompsongl]

Related to #38, but in this case focused on browser environments. The global Prism instance is not correctly setting manual or disableWorkerMessageHandler as intended in core.js: https://github.com/wooorm/refractor/blob/e399dffa4017f8f2a639568fd92a408e76e7c23d/lib/core.js#L59

The result is that code elements are automatically processed by Prism, and in my case altering the DOM in an unwanted manner.

Minimal reproduction in codesandbox: https://codesandbox.io/s/stoic-mccarthy-9fjzr?file=/src/App.js

N.B.: I think this only affects v4.x; window.Prism is not defined in v3.4.0

[wooorm]

• Weird that 3.4.0 is not affected? I think #38 was about #37, which is on both 3 and 4?
• Do you have an idea on how it can be solved?

[thompsongl]

Thanks for the quick reply, @wooorm!

Something as simple as

// Inherit.
function Refractor() {}

+ Prism.manual = true;
+ Prism.disableWorkerMessageHandler = true;

Refractor.prototype = Prism

in core.js#L76 appears to do the trick, but I'm lacking background on the reason for the ctx logic.

[wooorm]

Hmm. The Prism code is a bit complex to read. They suggest setting window.Prism = {manual: true} to not auto-highlight the document.

With your technique, I’m guessing that this line still runs, but this one doesn’t? 🤔

[thompsongl]

This might be better:

- ctx.Prism = {manual: true, disableWorkerMessageHandler: true}
+ ctx.Prism = ctx.Prism || {};
+ ctx.Prism.manual = true;
+ ctx.Prism.disableWorkerMessageHandler = true;

Appears to resolve the problem.

[wooorm]

/cc @rexxars, as you today forked refractor, and opened GH-38 — thoughts on this?

[thompsongl]

👍 I'm happy to open a PR if we all agree this is the right approach

[thompsongl]

Created #53 after confirming it fixes the browser environment problem. Happy make changes if more is needed to also resolve #38

[rexxars]

I never managed to fully isolate and reproduce #38, but the suggested fix seems logical to me