Bug: Toolbar doesn't work?

[BluDood]

Describe the bug I'm trying to add a toolbar with a Copy to Clipboard button to my parsed Markdown, but the toolbar and copy-to-clipboard plugins don't seem to do anything.

To Reproduce I use a parser function like this:

export async function parseMarkdown(md) {
  const html = await unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypePrism, { plugins: ['line-numbers', 'toolbar', 'copy-to-clipboard'] })
    .use(rehypeStringify)
    .process(md)
  return html.toString()
}

I have enabled the toolbar and copy-to-clipboard plugins, but they don't affect the output whatsoever.

Expected behavior The output should contain the toolbar section with the extra toolbar modules

Platform (please complete the following information):

• Environment: NodeJS 18 / Edge 111.0.1661.54 / React 18.2.0

[BluDood]

I am also using NextJS if that helps. I'm rendering the HTML inside getServerSideProps, and passing it down to the component. That shouldn't matter much though, as the output itself never has the toolbar element.

[Val-istar-Guo]

I review the code of toolbar plugin,It seems to only work on the browser rather than server.

Is there a demo project that can be used for testing, maybe we need to implement this plug-in, like line-numbers

[BluDood]

I have created a demo project here: BluDood/rehype-prism-test

[Val-istar-Guo]

https://github.com/PrismJS/prism/blob/59e5a3471377057de1f401ba38337aca27b80e03/plugins/toolbar/prism-toolbar.js#L3-L5

typeof document === 'undefined' is true on ssr. I have to rewrite this plugin....

[Val-istar-Guo]

https://github.com/PrismJS/prism/blob/59e5a3471377057de1f401ba38337aca27b80e03/plugins/copy-to-clipboard/prism-copy-to-clipboard.js#L115-L159

In order to support server-side rendering, we need inline js scripts to implement the copy function

<a href="#" onClick="(function(){
  // copy...
})();return false;">Copy</a>

[Val-istar-Guo]

install 2.2.2

[BluDood]

Thank you!