React-quill: syntax :true Don't work

[An0nymous0]

import hljs from 'highlight.js' import 'highlight.js/styles/monokai-sublime.css' import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; modules= { toolbar: [ [ 'code-block'] ], syntax: true }

Error: Syntax module requires highlight.js. Please include the library on the page before Quill.

OR

import hljs from 'highlight.js' import 'highlight.js/styles/monokai-sublime.css' import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css'; modules= { toolbar: [ [ 'code-block'] ], syntax: { highlight: text => hljs.highlightAuto(text).value } }

issue:Each input is lost focus

https://github.com/zenoamaro/react-quill/issues/284 Could not find a solution

[alexkrolick]

Try importing hljs into the global namespace:

import highlightjs

[An0nymous0]

@alexkrolick I tried it, the result was high。
import 'highlight.js' import ReactQuill from 'react-quill'
Error: Syntax module requires highlight.js. Please include the library on the page before Quill.

[koffeinfrei]

Global dependencies need to be pushed in a separate file, and need to be the first import statement, see https://github.com/facebook/create-react-app/issues/4281#issuecomment-381119612.

Something like the following should work:

// highlight.js

// assumption: package `highlight.js` is installed
import highlight from 'highlight.js/lib/highlight';
import 'highlight.js/styles/railscasts.css';

window.hljs = highlight;

import './highlight.js';
import ReactQuill from 'react-quill';

[koffeinfrei]

@alexkrolick I think it would be useful to add support to this to react-quill or at least document in the README how to achieve this. After all syntax: true is a core feature of quill.

[alexkrolick]

It really depends on your bundle set up (Webpack/Typescript/Babel/script). If you want to document a few common patterns, a PR is welcome.

[jgarboza813]

Here is the solution, it took me a long time to find : https://codesandbox.io/s/nww9q0v67p?from-embed