prism js copy to clipboard not working in my NextJs app

Question

I am trying to add copy to clipboard plugin from prismjs to my next app. but I don't found any documentation regarding this. I've gone through many websites and implemented this code.

All done but copy-to-clipboard plugin doesn't work.

Here is my code :

_app.js :

import '../styles/globals.css'
import "prismjs/themes/prism-twilight.css";

function MyApp({ Component, pageProps }) {
return (
   <>
   <Component {...pageProps} />
   </>
 )

}

export default MyApp

blogs/[blog].js :

import Head from 'next/head'
import { useRouter } from 'next/router'
import Navbar from '../components/Navbar'
import Prism from 'prismjs'
import 'prismjs/components/prism-java.min';
import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min'
import { useEffect } from 'react';

const Blog = () => {
    const router = useRouter()
    const { blog } = router.query

    useEffect(()=>{
        Prism.highlightAll();
    },[])

    return (
        <>
        <div></div>
        { // Other components }

        <pre className="copy-to-clipboard" ><code className="language-java" >

{`public Class Main{
    public static void main(String[]args) {
        System.out.println(\"Hello Java..!\");
    }
}`}

         </code></pre>
        </>
    )

EDIT: Fixed..!

Answer 1

We should import plugins from node_modules of prism js to perform specific role.

In this case you need to display copy button, for that below plugins should be imported - no other code changes are required other than import

import Prism from "prismjs";
import "prismjs/plugins/toolbar/prism-toolbar.min.css";
import "prismjs/plugins/toolbar/prism-toolbar.min";
import "prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min";