1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Bookmark manipulation causes editor crash

Bookmark manipulation causes editor crash

Hello,

On the 27.1.58 version of the DocumentEditor, we have discovered a scenario where the editor will crash when manipulating the bookmarks. 
I have created a demo that reproduces this behavior:
https://stackblitz.com/edit/7xxc69-r5ecqe?file=index.html
This demo does the following:

  1. It inserts some text, then two bookmarks, one after the other and finally some other text with line breaks
  2. It performs a selection. Any selection that follows the following criteria will do:
    1. It must select part of the first bookmark, not the entire bookmark
    2. It must select the entire second bookmark
    3. It must select text after the second bookmark, including a line break
  3. Once we have this selected text, we delete the selection. This will cause the first bookmark to no longer display its end bracket.
  4. Once we have this broken bookmark, several bookmark related operations will fail and some may crash the editor. In the demo we:
    1. List the editor bookmarks, it shows an outdated list
    2. We try selecting the broken bookmark, this causes the editor to crash



While this may seem a very specific scenario, it has affected several of our users, so any help would be largely appreciated. Please let me know if there is anything else I can do to help with this issue. 

Best regards, 
Daniel Souz


5 Replies 1 reply marked as answer
AD Aravind Dharani Syncfusion Team November 20, 2024 10:16 AM UTC

Daniel Souza,

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


Regards,

Aravind D


NA Niranjan Anumuthu Syncfusion Team November 22, 2024 12:47 PM UTC

Hi Daniel Souza, 
We have confirmed the reported issue ''Bookmark manipulation causes editor crash" as a defect and logged a defect report. We will fix this issue and provide fix in first patch release after Volume 4 release. which is expected on December 17,2024.

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

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,
Niranjan.N.A.

NA Niranjan Anumuthu Syncfusion Team December 19, 2024 02:03 PM UTC

Hi Daniel Souza,


We are glad to announce that our patch release (v28.1.35) has been rolled out successfully. In this release, we have added the fix for the reported issue "Bookmark manipulation causes editor crash".


Please upgrade to the latest version packages to resolve this issue:
NPM link:
NuGet links:‎
Feedback Link:


Root cause:
When selecting and delete the multiple paragraphs When the first block contains any bookmark. We don’t push the bookmark in  removeBookmarkselement. So iterate and push the bookmark element in the reovebookmarkelement.


Regards,
Niranjan.N.A.

Marked as answer
AS Adrian Scott December 19, 2024 02:34 PM UTC

If you’re experiencing editor crashes due to bookmark manipulation in JavaScript, it likely stems from improper handling of DOM elements or an issue with how the editor processes its internal state when bookmarks are altered. Here's a breakdown of how to address this issue:

Understanding the Problem

  1. Dynamic Bookmark Handling: Bookmarks are often tied to specific elements in the DOM. If those elements are removed or modified without proper cleanup, the editor may encounter inconsistencies.
  2. Circular References: Improper references between objects, especially in custom implementations, can lead to memory leaks or unexpected behavior.
  3. Editor State Updates: When bookmarks are manipulated, the editor's state must be updated correctly to prevent it from working on outdated references.

Steps to Resolve

  1. Verify Bookmark Creation and Removal:
    Ensure bookmarks are created and removed using the editor's API. For example, if you are using a rich text editor like TinyMCE or Quill, follow their specific bookmark handling methods to avoid tampering directly with the DOM.

// Example: Removing a bookmark safely

const bookmark = editor.selection.getBookmark();

editor.selection.moveToBookmark(bookmark);

editor.execCommand('RemoveFormat'); // Clean up bookmark formatting


Monitor DOM Changes:
If bookmarks are tied to specific nodes, use MutationObserver to monitor DOM changes and handle unexpected deletions or modifications.

const observer = new MutationObserver((mutations) => {

    mutations.forEach((mutation) => {

        if (mutation.removedNodes) {

            // Check if a bookmark node was removed

        }

    });

});

observer.observe(document.body, { childList: true, subtree: true });


Use Proper Editor APIs:

Avoid direct DOM manipulation for bookmarks. Use APIs provided by your editor to ensure its internal state remains consistent.


Error Handling:

Add error handling to gracefully manage unexpected crashes during bookmark manipulation.

try {

    // Bookmark manipulation code

} catch (error) {

    console.error("An error occurred during bookmark manipulation:", error);

}


  1. Update or Patch the Editor:
    If the issue is caused by a bug in the editor itself, check the documentation or community forums for updates or patches that address bookmark-related crashes.

Best Practices

  • Test Extensively: Ensure bookmark functionality is thoroughly tested under various scenarios.
  • Follow Documentation: Stick to the recommended APIs and methods from the editor's official documentation.
  • Minimize Direct DOM Access: Directly manipulating DOM elements tied to the editor can lead to unexpected issues.

By following these practices, you can resolve or mitigate the crashes caused by bookmark manipulation and ensure a more stable editor experience.


MA Mohammed Affan Saqib Hussain Syncfusion Team December 23, 2024 07:45 AM UTC

Hi Adrian Scott,

We have included the fix for the reported issue in the latest patch release (v28.1.35). Please upgrade to the latest version to resolve this issue.

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

Please let us know if you need any further assistance.

Regards,

Mohammed Affan C


Loader.
Up arrow icon