chore: better event handler registration in live preview

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -83,18 +83,42 @@ function RemoteFunctions(config = {}) {
         }, time * 1000);
     }
 
+    // the following fucntions can be in the handler and live preview will call those functions when the below
+    // events happen
+    const allowedHandlerFns = [
+        "dismiss", // when handler gets this event, it should dismiss all ui it renders in the live preview
+        // render an icon or html when the selected element toolbox appears in edit mode.
+        "renderToolBoxItem",
+        "redraw",
+        "onElementSelected", // an item is selected in live preview
+        "onElementCleanup",
+        "handleConfigChange",
+        // below  function gets called to render the dropdown when user clicks on the ... menu in the options box,
+        // the handler should retrun html tor ender the dropdown item.
+        "renderDropdownItems",
+        // called when an item is selected from the more options dropdown
+        "handleDropdownClick",
+        "reRegisterEventHandlers",
+        "handleClick" // handle click on an icon in the more options box.
+    ];
+
     const _moreOptionsHandlers = new Map();
     function registerNodeMoreOptionsHandler(handlerName, handler) {
         if(_moreOptionsHandlers[handlerName]) {
             console.error(`lp: More options handler '${handlerName}' already registered. Ignoring new registration`);
             return;
         }
-        if(!handler || !handler.dismiss){
-            console.error(`lp: More options handler  Ignoring registration: '${
-                handlerName}' missing required function: 'dismiss'`);
+        if (!handler || typeof handler !== "object") {
+            console.error(`lp: More options handler '${handlerName}' value is invalid ${JSON.stringify(handler)}.`);
             return;
         }
         handler.handlerName = handlerName;
+        for (const key of Object.keys(handler)) {
+            if (key !== "handlerName" && !allowedHandlerFns.includes(key)) {
+                console.warn(`lp: More options handler '${handlerName}' has unknown property '${key}'`,
+                    `should be one of ${allowedHandlerFns.join(",")}`);
+            }
+        }
         _moreOptionsHandlers.set(handlerName, handler);
     }
     function getNodeMoreOptionsHandler(handlerName) {
@@ -900,10 +924,10 @@ function RemoteFunctions(config = {}) {
             // Render handler options with ordering support
             const handlerOptions = LivePreviewView.getAllNodeMoreOptionsHandlers()
                 .map((handler, index) => {
-                    if (!handler.renderMoreOptionsDropdown) {
+                    if (!handler.renderToolBoxItem) {
                         return null;
                     }
-                    const result = handler.renderMoreOptionsDropdown(this.element);
+                    const result = handler.renderToolBoxItem(this.element);
                     if (!result) {
                         return null;
                     }
@@ -3933,7 +3957,7 @@ function RemoteFunctions(config = {}) {
         dismissNodeInfoBox();
         dismissImageRibbonGallery();
         dismissToastMessage();
-        getAllNodeMoreOptionsHandlers().forEach(handler => handler.dismiss());
+        getAllNodeMoreOptionsHandlers().forEach(handler => (handler.dismiss && handler.dismiss()));
     }
 
     let _toastTimeout = null;
@@ -4339,11 +4363,5 @@ function RemoteFunctions(config = {}) {
     // DONT_STRIP_MINIFY:REPLACE_WITH_ADDED_REMOTE_SCRIPTS
 
     registerHandlers();
-    // Notify handlers about config initialization
-    getAllNodeMoreOptionsHandlers().forEach(handler => {
-        if (handler.handleConfigChange) {
-            handler.handleConfigChange({}, config);
-        }
-    });
     return customReturns;
 }

src/extensionsIntegrated/phoenix-pro/browser-context/hyperlink-editor.js

@@ -156,5 +156,5 @@ function renderHyperlinkOptions(element, shadow) {
 LivePreviewView.registerNodeMoreOptionsHandler("HyperlinkEditor", {
     dismiss: dismissHyperlinkEditor,
     handleClick: _handleEditHyperlinkOptionClick,
-    renderMoreOptionsDropdown: renderHyperlinkOptions
+    renderToolBoxItem: renderHyperlinkOptions
 });

src/extensionsIntegrated/phoenix-pro/browser-context/ruler-lines.js

@@ -299,7 +299,6 @@ window.addEventListener("scroll", _rulerLinesScrollHandler, true);
 // Register with LivePreviewView
 LivePreviewView.registerNodeMoreOptionsHandler("RulerLines", {
     dismiss: dismissRulerLines,
-    renderMoreOptionsDropdown: () => '', // No options box button
     redraw: redrawRulerLines,
     onElementSelected: onRulerLinesElementSelected,
     onElementCleanup: onRulerLinesElementCleanup,