React-quill: [Snow Theme] Add Custom Dropdown to Toolbar

[akhileshbetanamudi]

I am building an Email Editor and trying to add a Custom dropdown which would have text snippets. When a user selects one of the options, it would be inserted into the position of the cursor.

I have created a custom HTML Toolbar and am passing that via modules.toolbar. The dropdown is visible but the options do not have any label (all the options are empty, however those empty options can be selected).

On further inspection I found that the 'select' tags are overwritten into 'span' and are getting the labels from the css::before tag (hardcoded in the snow.css file for font / size etc dropdowns).

Could you point me in the right direction ?

Quill version:
1.0.0-beta5

[alexkrolick]

Does this help? http://codepen.io/alexkrolick/pen/gmroPj?editors=0010

[akhileshbetanamudi]

No.
The problem is when we use a dropdown, not a button

[alexkrolick]

• The size dropdown is implemented with jsx, can you use it as a reference?
• Do you think you could make a codepen sample?

On Tue, Apr 11, 2017, 10:25 PM akhilesh [e-mail] wrote:

No.
The problem is when we use a dropdown, not a button

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
https://github.com/zenoamaro/react-quill/issues/182#issuecomment-293477298,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABf7UybUmiFdV74Bnzf3Eo1g8fp6XfaIks5rvGBmgaJpZM4M6Cxw
.

[akhileshbetanamudi]

I have forked your 'insertStar' example on Codepen, and added a Custom select dropdown: https://codepen.io/anon/pen/vmBqjx?editors=0010

The select dropdown renders but does not have any labels. Also, the handler is not triggered. On exploring the react-quill.js library yesterday, I had seen that the "select" tags are overwritten internally, and a number of "span" tags are introduced in place of those. To verify this, you can inspect the rendered select-dropdown, and see the original "select" tag has an addition style: "display: none".

Thanks

[alexkrolick]

OK, thank you for the demo. I would say this is an issue upstream with Quill.

You could workaround by writing toolbar CSS using Quill's style: https://github.com/quilljs/quill/blob/develop/assets/base.styl#L257-L271

Eg: https://codepen.io/alexkrolick/pen/bWGWqE?editors=0100

[akhileshbetanamudi]

Thanks for the update. The dropdown options are going to be dynamically generated. As such, could you suggest a approach which does not require hard coding the values in a CSS file ?

[zenoamaro]

I'm afraid Quill has removed the possibility to inject styles via a property –

but you can still dynamically add styles to a <style> tag next to the editor when you need them.

Would that work?

[akhileshbetanamudi]

I dont think we can give pseudo elements(:before, :after) inline. The codepen shared by @alexkrolick gives such styles in css file.
My requirement is to have a dropdown in the toolbar whose options are dynamically determined.

[zenoamaro]

I meant something like:

class MyComponent {
  render() {
    return (
      <div>
        <style dangerouslySetInnerHTML={{__html:this.generateStylesDynamically()}}/>
        <ReactQuill .../>
      </div>
    );
  }
}

See: https://codepen.io/anon/pen/dWyzvV

[alexkrolick]

If you find yourself using dynamic styles a lot you could also take a look at Glamour or similar CSS-in-JS libs. Another idea would be to simply position:absolute something resembling your dropdown in the same area as the dynamic Quill toolbar.

[akhileshbetanamudi]

Thanks alot @alexkrolick and @zenoamaro
I was able to solve my problem by adding the style tag as suggested.

[Tonvengo]

Is there any new solution for this problem except dynamic styles?