[Feature]: Enable/disable options RichTextEditor

[lublak]

Is there an existing issue for this?

• I have searched the existing issues

Summary

It would be handy to be able to deactivate different things in the Rich Text Editor.

• Paragraph
• Bold
• Italic
• Background Color
• Text Color
• Align
• Bullet List
• Numbered List
• Identifying
• Link
• Image
• Table
• Print
• preview
• Media

Why should this be worked on?

Since you can't currently set what things you want to allow in the editor.
For example, I do not want to have images media etc.. Only text, bullet lists and links.

[dilippitchika]

@lublak thanks for raising this.

While RTE is for editing rich texts, I can understand why you would like to control the behavior.

@Tooluloope can you help me understand if introducing an underlying logic for disabling these features is possible?

We should at-least expose a way to disable media for sure

[Tooluloope]

the best way to go about this would be to load most of these plugins which we have done here #10633 and then use a multi-select in the property pane to allow the app developer to include or exclude any plugin.

[dilippitchika]

I have the same idea for now, adding this to needs PRD bucket for me to suggest the design change and move.

[lublak]

It can also be used the toolbar options:
https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
https://www.tiny.cloud/docs/advanced/available-toolbar-buttons/

[andrew-bach]

Having the ability to modify the toolbar options in the RTE would be helpful for my team.

We use rich text fields in an info gathering form for reporting issues to our team. Once the form is submitted we use API calls to send the information to other systems like Jira that have their own formatting/markup. We either have to account for all the possibilities and adjust the formatting or accept there will be some problems in message formatting in the receiving system.

For example, Insert Images/ Insert Media are not needed for our use case and add complexity if we were to try and support embedded images.

It would also be helpful to be able to add a code block formatting option. This comment box on github has a code button < > , but the RTE does not have that option in the toolbar.

Being able to control limited input options helps simplify other development efforts for processing the inputted data.

I can probably implement a custom widget importing a library like quill.js, but that adds another complication to track and contend with future changes. It would be ideal to be able to configure the built in RTE.

[daaliachhak17]

ticket created in Jira-https://zemoso.atlassian.net/browse/TNOSB-472

[SaiCharanChetpelly31]

Hi @Nikhil-Nandagopal Im picking up this issue.I will update the approach once i complete exploring code.

[Nikhil-Nandagopal]

@SaiCharanChetpelly31 the solution is to have a simple multi-select property in the rich text editor

[SaiCharanChetpelly31]

Hi @Nikhil-Nandagopal

I’ve added a multi-select property in the property pane of the RTE widget. While I can retrieve the selected options from the multi-select field, I’m having trouble enabling or disabling toolbar options in the RTE widget based on the user’s selections. I’ve reviewed the TinyMCE documentation but couldn’t find a solution.

Could you please tag someone familiar with the RTE widget or TinyMCE documentation who might be able to help me resolve this blocker?

Looking forward to your response.
Thanks!

[Nikhil-Nandagopal]

@SaiCharanChetpelly31 I believe the documentation is here
https://www.tiny.cloud/docs/tinymce/latest/toolbar-configuration-options/
https://www.tiny.cloud/docs/tinymce/latest/menus-configuration-options/

[SaiCharanChetpelly31]

Hi @Nikhil-Nandagopal,

I reviewed the documentation, but I couldn't find any information on enabling or disabling specific toolbar options.
There is an option to enable or disable entire toolbar. However, I was able to implement functionality to show or hide specific toolbar options based on the user's selection of disabled plugin types.

I created a multi-select property in the property pane for user selection, which includes all toolbar options like bold, italic, link, image, media, etc. The selected disablePluginTypes are passed as a prop to the RTE component, where I'm filtering the toolbarConfig based on these disabled plugin types.

The toolbar is then set according to the following conditions:

If props.isToolbarHidden is true, the toolbar is set to false.
If disablePluginTypes has a length greater than zero, the toolbar is set to the filtered toolbar.
Otherwise, the toolbar is set to the default toolbar.

doc-fafs-jqq.2024-08-12.09_50.GMT+5_30.mp4

[Nikhil-Nandagopal]

@SaiCharanChetpelly31 can you ensure the multi-select has a checkbox and does not highlight the entire option but just checks the box?

[SaiCharanChetpelly31]

@Nikhil-Nandagopal, for consistency, I have followed the approach used in the FilePickerWidget. Should I make the MultiSelect component with checkboxes for each option and avoid highlighting the entire option, or should I keep it the same as the FilePickerWidget?

[Nikhil-Nandagopal]

@SaiCharanChetpelly31 ok for consistency it makes sense