Rich Text control - issues

[Pavel Danilchyk]

Good day.
I found two issues for current component:
1. If I have React component with pretty short life time (like a form switching), i can get this issue sometimes:

TypeError: Cannot read property 'destroy' of undefined

    at RichTextEditorComponent.push../node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/base/rich-text-editor.js.RichTextEditor.destroyDependentModules (rich-text-editor.js:722)

    at RichTextEditorComponent.push../node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/base/rich-text-editor.js.RichTextEditor.destroy (rich-text-editor.js:642)

    at RichTextEditorComponent../node_modules/@syncfusion/ej2-react-base/src/component-base.js.ComponentBase.componentWillUnmount (component-base.js:212)


2. Custom fonts - if I customize font family and click FontName button on toolbar, my action triggers FontSize event instead of FontName.

My tool bar config:

const TOOLBAR_CFG = {

    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough', 'FontName', 'FontSize', 'FontColor', 'BackgroundColor', 'LowerCase', 'UpperCase', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', 'Outdent', 'Indent', 'SuperScript', 'SubScript', '|', 'CreateTable', 'CreateLink', 'Image', 'SourceCode'],

    type: ToolbarType.MultiRow,

    enableFloating: false

}; My component:

          <RichTextEditorComponent

                    toolbarSettings={TOOLBAR_CFG}

                    value={value}

                    id={this.control}

                    onBlur={onBlur}

                    height={520}

                    insertImageSettings={{

                        saveFormat: 'Base64'

                    }}

                    fontFamily={{

                        default: 'Segoe UI',

                        width: '65px',

                        items: [

                            { text: 'TEST', value: 'TEST', cssClass: 'TEST', command: 'FontName', subCommand: 'FontName' },

                            { text: 'Segoe UI', value: 'Segoe UI', cssClass: 'e-segoe-ui', command: 'FontName', subCommand: 'FontName' },

                            { text: 'Arial', value: 'Arial,Helvetica,sans-serif', cssClass: 'e-arial', command: 'FontName', subCommand: 'FontName' },

                            { text: 'Georgia', value: 'Georgia,serif', cssClass: 'e-georgia', command: 'FontName', subCommand: 'FontName' },

                            { text: 'Impact', value: 'Impact,Charcoal,sans-serif', cssClass: 'e-impact', command: 'FontName', subCommand: 'FontName' },

                            { text: 'Tahoma', value: 'Tahoma,Geneva,sans-serif', cssClass: 'e-tahoma', command: 'FontName', subCommand: 'FontName' },

                            { text: 'Times New Roman', value: 'Times New Roman,Times,serif', cssClass: 'e-times-new-roman', command: 'FontName', subCommand: 'FontName' },

                            { text: 'Verdana', value: 'Verdana,Geneva,sans-serif', cssClass: 'e-verdana', command: 'FontName', subCommand: 'FontName' }

                        ]

                    }}

                    onFocus={onFocus}

                    placeholder={placeholder}                 

                    actionBegin={this.actionBegin}

                    disabled={disabled}

                    change={this.change}

                    dialogOpen={this.dialogOpened}

                >

                    <Inject services={[Toolbar, CustomImage, Link, HtmlEditor, QuickToolbar, Table, Count]} />

                </RichTextEditorComponent>

I tried with command and subCommand properties and without it.

[Revanth Krishnan]

Hi Pavel, 

 

Good day to you. 

 

Query 1: If I have React component with pretty short life time (like a form switching), I can get this issue sometimes. 

 

We have validated the issue and unable to reproduce the issue from our end. Could you please provide us with a sample or code snippet. So that we can reproduce the issue and able to resolve it from our end. 

 

Query 2: Custom fonts - if I customize font family and click FontName button on toolbar, my action triggers FontSize event instead of FontName. 

 

We have validated the issue and unable to reproduce the issue from our end. We have given the sample link below where you check for the replication of the issue, 

 

Sample: https://stackblitz.com/edit/react-gj4nhe-w6k86a 

 

Could you please try-out the above sample and confirm whether it meets your requirement? If the above-shared sample doesn’t meet your requirements, kindly share with us more details regarding your requirement to provide an appropriate solution at the earliest. 

 

Thanks, 

Revanth

[Pavel Danilchyk]

https://stackblitz.com/edit/react-gj4nhe-8kq97j

Sample of both issues.
1. Fill some text and wait autoupdate event. After this you will see issue with fonts.

2. Click on switch button a couple of times quickly. And you will get this issue. My form is large and has conditional logic. In one case I need to show 3 instances of rich text editor.

[Indrajith Srinivasan]

Hi Pavel, 

  

Query 1: “Fill some text and wait auto update event. After this you will see issue with fonts”.  

  

We have confirmed this as a bug from our end and logged the report for the same and the fix will be included in our upcoming patch release scheduled to be roll-out on 5^th February. 

  

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/11634/ 

  

Query 2: “Click on switch button a couple of times quickly.” 

  

The above issue is raised, because it destroys the elements are created in the DOM. We have confirmed this a bug from our end and we have logged the report for the same and the fix will be included in our upcoming patch release scheduled to roll-out on 12^th February .  

  

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/11647/ 

  

As a work around, to avoid the script error have generated spinner till the components are loaded in the page. Have also modified the sample based on your requirement.

Sample: https://stackblitz.com/edit/react-gj4nhe-zece8e?file=index.js 

  

Regards, 

Indrajith

[Indrajith Srinivasan]

Hi Pavel,   

   

Sorry for the inconvenience caused.   

 

We could not include the fix for “Fill some text and wait auto update event. After this you will see issue with fonts” with our weekly patch released today, due to complexity on resolving the reported issue from our end. As promised, we will include both the fix in our next patch release scheduled to roll-out on 12^th February.  

   

Regards,   

Indrajith 

[Indrajith Srinivasan]

Hi Pavel, 

  

Thanks for your patience, 

  

As mentioned earlier, we have resolved the issues “Fill some text and wait auto update event. After this you will see issue with fonts” & “Click on switch button a couple of times quickly” with RichTextEditor and the fix is now available with the package version 17.4.49. We have also prepared a sample based on your requirement. 

 

Release Notes: https://ej2.syncfusion.com/react/documentation/release-notes/17.4.49/#richtexteditor 

 

Sample:  https://stackblitz.com/edit/react-gj4nhe-wlunep?file=index.js 

 

Can you please update the package to this version to resolve the issue from your end ?  

 

Regards, 

Indrajith 

[Pavel Danilchyk]

Thanks. These issues have been resolved.

[Indrajith Srinivasan]

Hi Pavel, 

Thanks for the update, 

We are glad that your reported issues are resolved. Please let us know if you need any further assistance on this. 

Regards, 

Indrajith