fix: remove deprecated dom api DOMSubtreeModified

phcode-dev · Jan 6, 2024 · c53ddca · c53ddca
1 parent 851090a
commit c53ddca
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/src/features/QuickViewManager.js b/src/features/QuickViewManager.js
@@ -193,8 +193,21 @@ define(function (require, exports, module) {
         ViewUtils           = require("utils/ViewUtils"),
         AppInit             = require("utils/AppInit"),
         WorkspaceManager    = require("view/WorkspaceManager"),
+        EventDispatcher     = require("utils/EventDispatcher"),
         ProviderRegistrationHandler = require("features/PriorityBasedRegistration").RegistrationHandler;
 
+    EventDispatcher.makeEventDispatcher(exports);
+    const _EVENT_POPUP_CONTENT_MUTATED = "_popupContentMutated";
+    // Create a new MutationObserver instance
+    const observer = new MutationObserver(mutations => {
+        for (let mutation of mutations) {
+            if (mutation.type === 'childList' || mutation.type === 'subtree') {
+                exports.trigger(_EVENT_POPUP_CONTENT_MUTATED, mutations);
+                break; // Optional: Break after the first change if only one change is needed
+            }
+        }
+    });
+
     const previewContainerHTML       = '<div id="quick-view-container">\n' +
         '    <div class="preview-content">\n' +
         '    </div>\n' +
@@ -454,9 +467,12 @@ define(function (require, exports, module) {
             popoverState.visible = true;
             positionPreview(editor, popoverState.xpos, popoverState.ytop, popoverState.ybot);
 
-            $popoverContent[0].addEventListener('DOMSubtreeModified', ()=>{
+            exports.on(_EVENT_POPUP_CONTENT_MUTATED, ()=>{
+                if(!popoverState || !editor){
+                    return;
+                }
                 positionPreview(editor, popoverState.xpos, popoverState.ytop, popoverState.ybot);
-            }, false);
+            });
         }
     }
 
@@ -710,6 +726,10 @@ define(function (require, exports, module) {
         // Create the preview container
         $previewContainer = $(previewContainerHTML).appendTo($("body"));
         $previewContent = $previewContainer.find(".preview-content");
+        observer.observe($previewContent[0], {
+            childList: true, // Observe direct children
+            subtree: true // And lower descendants too
+        });
 
         // Register command
         // Insert menu at specific pos since this may load before OR after code folding extension

diff --git a/src/features/SelectionViewManager.js b/src/features/SelectionViewManager.js
@@ -149,13 +149,26 @@ define(function (require, exports, module) {
         ViewUtils           = require("utils/ViewUtils"),
         AppInit             = require("utils/AppInit"),
         WorkspaceManager    = require("view/WorkspaceManager"),
+        EventDispatcher     = require("utils/EventDispatcher"),
         ProviderRegistrationHandler = require("features/PriorityBasedRegistration").RegistrationHandler;
 
     const previewContainerHTML       = '<div id="selection-view-container">\n' +
         '    <div class="preview-content">\n' +
         '    </div>\n' +
         '</div>';
 
+    EventDispatcher.makeEventDispatcher(exports);
+    const _EVENT_POPUP_CONTENT_MUTATED = "_popupContentMutated";
+    // Create a new MutationObserver instance
+    const observer = new MutationObserver(mutations => {
+        for (let mutation of mutations) {
+            if (mutation.type === 'childList' || mutation.type === 'subtree') {
+                exports.trigger(_EVENT_POPUP_CONTENT_MUTATED, mutations);
+                break; // Optional: Break after the first change if only one change is needed
+            }
+        }
+    });
+
     const _providerRegistrationHandler = new ProviderRegistrationHandler(),
         registerSelectionViewProvider = _providerRegistrationHandler.registerProvider.bind(_providerRegistrationHandler),
         removeSelectionViewProvider = _providerRegistrationHandler.removeProvider.bind(_providerRegistrationHandler);
@@ -364,9 +377,12 @@ define(function (require, exports, module) {
             popoverState.visible = true;
             positionPreview(editor);
 
-            $popoverContent[0].addEventListener('DOMSubtreeModified', ()=>{
+            exports.on(_EVENT_POPUP_CONTENT_MUTATED, ()=>{
+                if(!popoverState || !editor){
+                    return;
+                }
                 positionPreview(editor);
-            }, false);
+            });
         }
     }
 
@@ -517,6 +533,10 @@ define(function (require, exports, module) {
         // Create the preview container
         $previewContainer = $(previewContainerHTML).appendTo($("body"));
         $previewContent = $previewContainer.find(".preview-content");
+        observer.observe($previewContent[0], {
+            childList: true, // Observe direct children
+            subtree: true // And lower descendants too
+        });
 
         // Register command
         // Insert menu at specific pos since this may load before OR after code folding extension