A constantly open WebSocket connection to the WebSocketHandler is required for the Document Editor. This connection is necessary for document rendering synchronization and true WYSIWYG rendering. If the connection is closed for any reason, TX Text Control will attempt to reconnect to the same instance using a unique connection identifier. Reasons for a lost connection can include a brief interruption, network problems, or routing issues.

When you create an instance of the Document Editor, you can specify the number of seconds that TX Text Control will attempt to reconnect.

@Html.TXTextControl().TextControl(settings => {
    settings.ReconnectTimeout = 20;
}).Render()

Unsaved changes are not lost and the full document state is available when the connection is successfully restored. In case the connection is lost, the webSocketClosed event will fire with information about the reason.

TXTextControl.addEventListener("webSocketClosed", function(e) { console.log(e) });

TX Text Control will display a default alert message that informs the user that the connection is lost and that TX Text Control is attempting to reconnect.

We have seen reports of users not waiting to reconnect and hitting F5 to refresh the page. This will result in a full reload and the document will be lost after a full recycle. This will result in a full reload and the document will be lost after a full recycle.

let mutationObserver;

 TXTextControl.addEventListener("textControlLoaded", function () {
     TXTextControl.addEventListener("webSocketClosed", (e) => {
         observeDisconnect("#txErrMsgDiv");
     });
 });

 function observeDisconnect(selector) {
     const el = document.querySelector(selector);

     mutationObserver = new MutationObserver((mutationRecords, observer) => {
         Array.from(document.querySelectorAll(selector)).forEach((element) => {
             if (element.innerText.includes("Reconnecting")) {
                 element.innerHTML =
                     "<strong>Please wait!</strong> We are working on it!<br /><br /><div style='vertical-align: middle;' class='spinner-border' role='status'><span class='sr-only'></span></div>";
             }

             observer.disconnect();
         });
     }).observe(document.documentElement, {
         childList: true,
         subtree: true,
         characterData: false,
     });
 }

The following screenshot shows the custom message with a wait icon to visualize that something is happening.