A problem with changing paragraph style on DocumentEditor

[Ahmet Sureyya Keskin]

Hi,

We have a problem. 

The end user scenario we are experiencing the problem with is as follows:

The user selects a text on the editor and selects a different style from the paragraph style change drop-down box. Then, he does not make any entries or other changes to the editor again. (This is important for because if the user makes changes, the problem we mentioned does not occur) After this, we save the file as docx as explained below. When the user reopens the saved file in the system to work on it, he sees that the last change he made is not applied in the file.

The method we use in our project is briefly as follows:

-After each change made by the user, when the contentChange event is triggered, we keep it as DOCX in a hidden input on the page as base64. And the user posts the form to our server whenever he wants. And we save DOCX to our database.

-In addition, with the mechanism we set up for our data recovery scenario, we keep the editor content in the localStorage area as sfdt every 15 seconds.

Used js functions are as follows:

onChange(args) {

            console.log("onChange");

            var container = document.getElementById("docEditorContainer").ej2_instances[0];

            docEditorSaveAsBase64(container.documentEditor,"EditorInputId");

            _contentChanged = true;

        }

....

...

..

function docEditorSaveAsBase64(documentEditor, targetId) {

    documentEditor.saveAsBlob("Docx").then(function (blob) {

        var fileReader = new FileReader();

        fileReader.onload = function () {

            var base64Text = ";base64,";

            var documentData = fileReader.result.substring(fileReader.result.indexOf(base64Text) + base64Text.length);

            $("#" + targetId).val(documentData);

        };

        fileReader.readAsDataURL(blob);

    });

}

//for the data recovery scenario,

function docEditorDraftSaveLocalStorage(documentEditor,autoSaveKey) {

    documentEditor.saveAsBlob("Sfdt").then(function (blob) {

        var fileReader = new FileReader();

        fileReader.onload = function () {

            var base64Text = ";base64,";

            var documentData = fileReader.result.substring(fileReader.result.indexOf(base64Text) + base64Text.length);

            localStorage.setItem(autoSaveKey, documentData);

            console.log("autosave draft saved : "+autoSaveKey);

        };

        fileReader.readAsDataURL(blob);

    });

}

When we investigated to detect and solve our problem, we found the following situations:

1- While the contentChange event is triggered once for other changes (typing, font change etc.), it is triggered twice when we change the paragraph style, for reasons we cannot understand.

2- While the relevant change is applied in the SFDT file stored in localStorage as mentioned above, it is not applied in the DOCX version. The change is not applied and also disrupts the previous style in the DOCX. (For example, if it was 'Heading 3' before, when we click and change it to 'Heading 4', the final result in the DOCX file appears as 'Normal'.)

 Conclusion : 

We wanted to inform you that we could not find a solution as a result of our investigations. Also, if you cannot obtain a specific solution to this problem, can you add a parameter or a separate event be created for the contentChange event to detect that a paragraph style change has been made so that we can produce a solution?

Thank you.

 

[Mohammed Affan Saqib Hussain]

Hi Ahmet Sureyya Keskin,

Regarding Content change triggered twice:

We can able to reproduce the reported issue. Currently, we are validating the issue and get back to you with more details by January 22,2025.

Regarding style change when saving in docx:

We attempted to replicate the issue but were unsuccessful. We have included the sample used in our attempts to reproduce the issue, along with a reference video. Please utilize the attached sample to verify this issue. The attached sample contains an 'Export to Blob' button that uses the 'saveAsBlob' method to export the document as a DOCX file. If the issue continues, please share the sample used on your side or modify the attached sample to reproduce the issue and return it to us. We will then conduct further analysis and offer you an appropriate solution as soon as possible.

Sample - https://stackblitz.com/edit/2eekgc-hus2ckcv?file=index.html,index.js

Regards,

Mohammed Affan C

Attachment: Paragraph_Style_issue_7631f93.zip

[Thamizhselvan Varadharajan]

Hi Ahmet Sureyya Keskin,

We have confirmed the reported issue 'the content change event triggered twice when applying the paragraph style' as a defect and logged a defect report. We will include this fix in our upcoming weekly patch release which is expected on February 11, 2025.

You can track the status of the bug through the below feedback link:

https://www.syncfusion.com/feedback/64831/resolve-the-content-change-event-triggered-twice-when-applying-the-paragraph-style

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards,

Thamizhselvan.

[Ahmet Sureyya Keskin]

Hi, 

I opened the sample you sent to try it out. However, when it is opened, the following error occurs. I couldn't find how to fix it.

Sample - https://stackblitz.com/edit/2eekgc-hus2ckcv?file=index.html,index.js

Error  : 

Error in /~/index.js (36:34)

Cannot read properties of null (reading 'addEventListener')

[Mohammed Affan Saqib Hussain]

Hi Ahmet Sureyya Keskin,

I apologize for the inconvenience. I have attached an updated sample for your reference.

Please use the revised sample to verify the issue.

Sample - https://stackblitz.com/edit/2eekgc-hf22tweo?file=index.html,index.js

Regards,

Mohammed Affan C

[Ahmet Sureyya Keskin]

Hello,

First of all, thank you. There is no problem with the documentEditor.saveAsBlob("Docx") method in the sample you sent. In fact, we copied the same method to our own project and saw that the issue did not occur.

As far as I have determined, the reason for the problem is that we are calling the documentEditor.saveAsBlob("Docx") method in the onChange event. Because the base64 string created when we press the blob button is not the same as the base64 string we generate from the blob created in onChange. Maybe its reason is event triggered twice , i could not know.

We will look for other ways for the save method here. If you have a more accurate method that you can suggest for our situation, we would like to know.

[Kavitha Muralitharan]

Hi Ahmet Sureyya Keskin,

We have provided a sample that serves to save the document within some interval (e.g., 15 seconds) when the content changes occur. It triggers the save process for the document in the container using saveAsBlob('Docx') to save it as a .docx file.

Sample: https://stackblitz.com/edit/2eekgc-yhthzmhq?file=index.html,index.js

Regards,

Kavitha M

[Ahmet Sureyya Keskin]

Hi,

We seem to have solved our problem for now with a method similar to this, using your previous answers. Thank you for support.

[Mohammed Affan Saqib Hussain]

Hi Ahmet Sureyya Keskin,

Thank you for the update.

We are glad that to hear that the issue is resolved. As we mentioned earlier, We will include this fix in our upcoming weekly patch release which is expected on February 11, 2025.

Regards,

Mohammed Affan C

[Aravind Dharani]

We are glad to announce that our patch release (v28.2.5) has been rolled out successfully. In this release, we have added the fix for the reported issue
"the content change event triggered twice when applying the paragraph style".

Please upgrade to the latest version packages to resolve this issue:

Client side:

https://www.npmjs.com/package/@syncfusion/ej2-documenteditor

Server side:

https://www.nuget.org/packages/Syncfusion.Ej2.Wordeditor.ASPNet.Core/ 

https://www.nuget.org/packages/Syncfusion.Ej2.Wordeditor.ASPNet.MVC5/

Feedback link: 

https://www.syncfusion.com/feedback/64831/resolve-the-content-change-event-triggered-twice-when-applying-the-paragraph-style

 Root Cause:

When we apply the paragraph style, the `updateComplexHistory` method is called twice: once from the `clearFormattingInternal` method and once from the `applyStyle` method. As a result, the content change event is triggered twice when applying the paragraph style.

Regards,

Aravind D