CODEWITHSUNDEEP
javascriptreactjsnext.jssyntax-highlightingreact-quill
LuckyA
LuckyA

Reputation: 55

React-Quill can't highlight syntax with highlightJS in NextJs

I have a NextJs app (blog) and I'm using react-quill as a rich text-editor in it. I'm using a Next custom 'app' feature where my UserProvider comp is wrapping the everything so i can have global access to certain things. My next/head comp is also there.

Been reading the docs on Quill -Syntax and Highlight.Js on usage but for the life of me keep getting 'Error: nextjs Syntax module requires highlight.js' what am I missing here? This is how my app component look:

_app.js:

function MyApp({ Component, pageProps }) {
  return (
    <UserProvider>
      <Head>
        <link rel='stylesheet' href='/css/styles.css' />
      </Head>
      <Nav />
      <ToastContainer
        position='top-center'
        autoClose={2000}
        pauseOnFocusLoss={false}
        pauseOnHover={false}
        theme='dark'
        transition={Zoom}
      />
      <Component {...pageProps} />
    </UserProvider>
  );
}

Things I tried:

  1. Importing hljs and link ref as per the docs in app to have global access.
  2. Importing hljs in module and calling hljs.initHighlightOnLoad() with link ref in App->Head tag
  3. Using hljs Script with next/script and link ref (as per highlightjs docs) in my App comp.

Any help here? I have my Quill module customized so it includes ['code-block'] therefore I am already able to have code snippets but they are white font/black background only. This is my custom module for quill (syntax:true is commented out so far for obvs reasons)

const customPostToolbar = {
    // syntax: true,
    toolbar: [
      [{ header: [2, 3, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [
        { script: 'sub' },
        { script: 'super' },
        { list: 'ordered' },
        { list: 'bullet' },
        { indent: '-1' },
        { indent: '+1' },
      ],
      ['link', 'image'],
      ['code-block'],
    ],
  };

Appreciate if anyone knows, this has been doing my head all of yesterday 😅

Upvotes: 3

Views: 3203

Answers (3)

Alex Chika
Alex Chika

Reputation: 1

Solution for NextJs appdir v13 upwards

import ReactQuill from "react-quill";
import hljs from "highlight.js/lib/common"; //common languages


interface CustomQuillProps extends ReactQuill.ReactQuillProps {
  hookRef: (ref: ReactQuill | null) => void; 
}

 

 const MyReactQuill = dynamic(
   async () => {
     // @ts-ignore
   window.hljs = hljs;
   const { default: RQ } = await import("react-quill");

   return function ReactQuillHoc(props: CustomQuillProps) {
     const { hookRef, ...rest } = props;
     // eslint-disable-next-line react/jsx-props-no-spreading
    return <RQ ref={hookRef} {...{ ...rest }} />;
   };
 },
  {
    ssr: false,
   loading: () => <Loading loading />
   }
)}

In your react component

  function MyComponent (){

   return <div>
          <MyReactQuill hookRef={(ref) => console.log(ref)} theme="snow" 
           value={value} 
          onChange={setValue} />;
       </div/>

  }

Sample Code setting Up Unpriviledge editor

 function MyComponent2 (){
   const UnprivilegedEditor = useRef<null | ReturnType<
   ReactQuill["makeUnprivilegedEditor"]
   >>(null);

   return <div>
         <MyReactQuill 
          hookRef={(ref) => {
            if (ref) {
             const editor = ref.getEditor();
             UnprivilegedEditor.current = 
             ref.makeUnprivilegedEditor(editor);
           }
          }} 
          theme="snow" 
          value={value} 
          onChange={setValue} />;
       </div/>

  }

Upvotes: 0

Warfacez
Warfacez

Reputation: 39

We can add highlight to window on client side, so Solution is:

import hljs from "highlight.js";

const ReactQuill = dynamic(
    () => {
        hljs.configure({   // optionally configure hljs
            languages: ['javascript', 'php', 'go']
        })
        // @ts-ignore
        window.hljs = hljs
       return  import ("react-quill")
    }, {
    ssr: false,
    loading: () => <p>Loading</p>
})

const modules = {
  syntax: true,
  // ...
}

Upvotes: 1

Prasun Das
Prasun Das

Reputation: 101

Install highlight.js import its css .Example: import 'highlight.js/styles/monokai-sublime.css';

Adding something like this would work

const modules = {
  //syntax: true,
  syntax: {
    highlight: text => hljs.highlightAuto(text).value
  }
};

Upvotes: 1

Related Questions