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

ql-tooltip-editor appearing unexpectedly #25

Closed mkamalkayani closed 3 years ago

mkamalkayani commented 3 years ago

I am using useQuill with the following options:

const modules = {
  toolbar: [['bold', 'italic', 'underline', 'strike'], ['clean']],
  history: {
    userOnly: true
  }
};

const formats = ['bold', 'italic', 'underline', 'strike', 'clean'];
const placeholder = 'enter text ...'

const { quillRef, quill } = useQuill({ modules, formats, theme: 'bubble', placeholder });

Most of the time it works fine but sometimes ql-tooltip-editor and ql-toolbar (as shown in the picture) unexpectely and randomly appears. I looked at the BubbleTooltip code and found out that this is the default template of the tooltip. Since, I am providing the toolbar in the options, I donot understand why the default template appears. Any suggestions?

<div class="ql-tooltip-editor"><input type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL"><a class="ql-close"></a></div>

<div class="ql-toolbar"><span class="ql-formats"><button type="button" class="ql-bold"><svg viewBox="0 0 18 18"> <path class="ql-stroke" d="M5,4H9.5A2.5,2.5,0,0,1,12,6.5v0A2.5,2.5,0,0,1,9.5,9H5A0,0,0,0,1,5,9V4A0,0,0,0,1,5,4Z"></path> <path class="ql-stroke" d="M5,9h5.5A2.5,2.5,0,0,1,13,11.5v0A2.5,2.5,0,0,1,10.5,14H5a0,0,0,0,1,0,0V9A0,0,0,0,1,5,9Z"></path> </svg></button><button type="button" class="ql-italic"><svg viewBox="0 0 18 18"> <line class="ql-stroke" x1="7" x2="13" y1="4" y2="4"></line> <line class="ql-stroke" x1="5" x2="11" y1="14" y2="14"></line> <line class="ql-stroke" x1="8" x2="10" y1="14" y2="4"></line> </svg></button><button type="button" class="ql-underline"><svg 

Screenshot 2021-06-23 at 16 34 26

gtgalone commented 3 years ago

@mkamalkayani Thank you for using.

Could you provide your full code?

mkamalkayani commented 3 years ago

Thank you too for this wonderful package.

I have created a codesandbox which resembles the use case in the actual app.

Edit react-quilljs/basic (forked)

However, I am unable to reproduce the exact issue. Currently, it has stoped appearing in the actual app as well.

Closing as I have no concrete way to reproduce the issue. I will open it again once I have more info about reproducing it.

gtgalone commented 3 years ago

@mkamalkayani Sure!

Thank you!