Select widget in preview when navigating to widget settings

REDMINE-20895
codevise · Feb 4, 2025 · 5129f8d · 5129f8d
1 parent b1cfe4c
commit 5129f8d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 1 deletion.
diff --git a/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js b/entry_types/scrolled/package/spec/editor/controllers/PreviewMessageController-spec.js
@@ -208,6 +208,32 @@ describe('PreviewMessageController', () => {
     })).resolves.toMatchObject({type: 'SELECT', payload: {id: 1, type: 'sectionTransition'}});
   });
 
+  it('sends SELECT message to iframe on selectWidget event on model', async () => {
+    const entry = factories.entry(ScrolledEntry, {}, {
+      widgetTypes: factories.widgetTypes([{
+        role: 'header', name: 'someNavigation'
+      }]),
+      widgetsAttributes: [{
+        type_name: 'someNavigation',
+        role: 'header'
+      }],
+      entryTypeSeed: normalizeSeed()
+    });
+    const iframeWindow = createIframeWindow();
+    controller = new PreviewMessageController({entry, iframeWindow});
+
+    await postReadyMessageAndWaitForAcknowledgement(iframeWindow);
+
+    return expect(new Promise(resolve => {
+      iframeWindow.addEventListener('message', event => {
+        if (event.data.type === 'SELECT') {
+          resolve(event.data);
+        }
+      });
+      entry.trigger('selectWidget', entry.widgets.first());
+    })).resolves.toMatchObject({type: 'SELECT', payload: {id: 'header', type: 'widget'}});
+  });
+
   it('supports sending CONTENT_ELEMENT_EDITOR_COMMAND message to iframe', async () => {
     const entry = factories.entry(ScrolledEntry, {}, {
       entryTypeSeed: normalizeSeed({

diff --git a/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js b/entry_types/scrolled/package/src/editor/controllers/PreviewMessageController.js
@@ -91,6 +91,16 @@ export const PreviewMessageController = Object.extend({
           })
         });
 
+        this.listenTo(this.entry, 'selectWidget', widget => {
+          postMessage({
+            type: 'SELECT',
+            payload: {
+              id: widget.get('role'),
+              type: 'widget'
+            }
+          })
+        });
+
         this.listenTo(this.entry, 'resetSelection', contentElement =>
           postMessage({
             type: 'SELECT',

diff --git a/package/src/editor/controllers/SidebarController.js b/package/src/editor/controllers/SidebarController.js
@@ -77,9 +77,13 @@ export const SidebarController = Marionette.Controller.extend({
   },
 
   widget: function(id) {
+    const model = this.entry.widgets.get(id);
+
     this.region.show(new EditWidgetView({
       entry: this.entry,
-      model: this.entry.widgets.get(id)
+      model
     }));
+
+    this.entry.trigger('selectWidget', model);
   },
 });