gtgalone / react-quilljs

React Hook Wrapper for Quill, powerful rich text editor.
https://www.npmjs.com/package/react-quilljs
MIT License
248 stars 28 forks source link

Question: Registering modules #53

Closed nesh325 closed 2 years ago

nesh325 commented 2 years ago

Are we able to register modules to quill using this wrapper? Would it be the 'quill' from useQuill that we'd register it to?

Edit - I found that there's a "Quill" instance you can destructure from useQuill. I'm trying to implement this https://lucidar.me/en/rich-content-editor/mathjax-and-quill-editor/

Here's a sandbox link - https://codesandbox.io/s/react-quilljs-basic-forked-4d4tc0?file=/src/App.js

I've tried setting it the way the guide has set it up. I think modules isn't being registered properly.

Edit - I was playing around with this jsfiddle which has the working implementation from the above link https://jsfiddle.net/2cpf3wk5/1/

It's definitely not being registered correctly. The Mathjax class I have implemented doesn't console.log() while the one in jsfiddle does

Any idea how I can fix this @gtgalone

gtgalone commented 2 years ago

Hello! @nesh325

Did you try with this?

https://github.com/gtgalone/react-quilljs#counter

gtgalone commented 2 years ago

@nesh325

I just checked code sandbox. you need to change to below sample

const { quill, quillRef, Quill } = useQuill({ modules: { mathjax: true } });

Quill.register('modules/mathjax', Mathjax);

but still not working. you should check Mathjax library too.

nesh325 commented 2 years ago

Hey @gtgalone

I've tried that approach as well but not working. If you check here https://codesandbox.io/s/react-quilljs-basic-forked-4d4tc0?file=/src/Mathjax.js I've included a console log that never reaches.

If you add a console.log to the jsfiddle it does https://jsfiddle.net/2cpf3wk5/1/ however so I think it's still not registerying it properly

nesh325 commented 2 years ago

@gtgalone

Recreated using js in html following the guide and works fine here - https://codesandbox.io/s/quilljs-forked-s50f3l?file=/index.html Just the wrapper library isn't registering it properly

This is an issue with React-Quill as well, was hoping this package would work since it's not restrictive like that one