️ Issue #3442698: Improve onload scripts

js/visual_editor.node_view.js

@@ -61,9 +61,10 @@
           $.fn.dialogToggle();
         });
       }
-      // Open dialog on load
+      // Body ready events
       once('visual_editor', selector, context).forEach(() => {
         if (openLoad && node) {
+          // Open dialog
           $.fn.visualEditorOpenDialog(
             `/visual_editor/form/node/${node}/edit?preview=${isPreview}`,
             {
@@ -71,16 +72,14 @@
               resizable: false,
             },
           );
-        }
-      });
-      // Dialog aftercreate event
-      once('dialog-beforecreate', 'body', context).forEach(function () {
-        jQuery(window).on('dialog:aftercreate', function () {
-          jQuery('#drupal-off-canvas').dialog('option', {
-            width,
-            resizable: false,
+          // Remove resizable from dialog
+          jQuery(window).on('dialog:aftercreate', function () {
+            jQuery('#drupal-off-canvas').dialog('option', {
+              width,
+              resizable: false,
+            });
           });
-        });
+        }
       });
     },
   };
@@ -92,20 +91,25 @@
         (event) => {
           const { wrapper } = drupalSettings.visual_editor;
           const { data } = event;
-          if (data.type === 'VISUAL_EDITOR_COMPONENT') {
-            // Exapnd dialog if collapsed
-            $.fn.dialogToggleOnlyWhenCollapsed();
+          const { type, uuid } = data;
 
-            const { uuid } = data;
-            const uuidInput = $(`input[data-visual-editor-uuid="${uuid}"]`);
-            const inputId = uuidInput.attr('id');
-            const divSelector = `edit-${inputId.substring(
-              0,
-              inputId.indexOf('-edit--'),
-            )}`;
-            const divId = $(`div[data-drupal-selector="${divSelector}"]`).attr(
-              'id',
-            );
+          if (!type || !uuid) {
+            return;
+          }
+
+          if (type === 'VISUAL_EDITOR_COMPONENT') {
+            const paragraph = $(`input[data-visual-editor-uuid="${uuid}"]`);
+            const paragraphId = paragraph.attr('id');
+            const paragraphSelector = jQuery(`#${paragraphId}`)
+              .parent()
+              .parent()
+              .parent()
+              .data('drupal-selector');
+
+            // Expand paragraph
+            paragraph.trigger('mousedown');
+            // Expand dialog
+            $.fn.dialogToggleOnlyWhenCollapsed();
 
             if (
               wrapper.type &&
@@ -125,14 +129,17 @@
               }
             }
 
-            // Expand paragraph
-            uuidInput.trigger('mousedown');
+            // @todo: find why scrollIntoView got reset
             // Scroll to paragraph
-            document.getElementById(divId).scrollIntoView({
-              behavior: 'smooth',
-              block: 'start',
-              inline: 'end',
-            });
+            if (paragraphSelector) {
+              const selector = `[data-drupal-selector="${paragraphSelector}"]`;
+              document.querySelector(selector).scrollIntoView({
+                behavior: 'auto',
+                block: 'center',
+                inline: 'nearest',
+              });
+            }
+
             event.stopImmediatePropagation();
           }
         },