feat(PopupMenu): allow imageHtml for header entries

CHANGELOG.md

@@ -6,6 +6,8 @@ All notable changes to [diagram-js](https://github.com/bpmn-io/diagram-js) are d
 
 _**Note:** Yet to be released changes appear here._
 
+* `FEAT`: support `imageHtml` option for popup menu header entries ([#819](https://github.com/bpmn-io/diagram-js/pull/819))
+
 ## 12.6.0
 
 * `FEAT`: support custom outline providers ([#817](https://github.com/bpmn-io/diagram-js/pull/817))

lib/features/popup-menu/PopupMenuComponent.js

@@ -209,9 +209,8 @@ export default function PopupMenuComponent(props) {
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
             >
-              ${ entry.imageUrl ? html`
-                <img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />
-              ` : null }
+            ${(entry.imageUrl && html`<img class="djs-popup-entry-icon" src=${ entry.imageUrl } alt="" />`) ||
+            (entry.imageHtml && html`<div class="djs-popup-entry-icon" dangerouslySetInnerHTML=${ { __html: entry.imageHtml } } />`)}
 
               ${ entry.label ? html`
                 <span class="djs-popup-label">${ entry.label }</span>

lib/features/popup-menu/PopupMenuProvider.spec.ts

@@ -45,6 +45,8 @@ export class BarPopupMenuProvider implements PopupMenuProvider {
             }
           },
           className: 'foo',
+          imageUrl: 'https://example.com/',
+          imageHtml: '<img src="https://example.com/" />',
           label: 'Foo'
         }
       };
@@ -67,7 +69,10 @@ export class BarPopupMenuProvider implements PopupMenuProvider {
         active: false,
         className: 'bar',
         id: 'bar',
-        title: 'Bar'
+        imageUrl: 'https://example.com/',
+        imageHtml: '<img src="https://example.com/" />',
+        label: 'Bar',
+        title: 'Bar',
       }
     ];
   }

lib/features/popup-menu/PopupMenuProvider.ts

@@ -5,6 +5,8 @@ export type PopupMenuEntryAction = (event: Event, entry: PopupMenuEntry, action?
 export type PopupMenuEntry = {
   action: PopupMenuEntryAction;
   className: string;
+  imageUrl?: string;
+  imageHtml?: string;
   label: string;
 };
 
@@ -19,6 +21,9 @@ export type PopupMenuHeaderEntry = {
   active?: boolean;
   className: string;
   id: string;
+  imageUrl?: string;
+  imageHtml?: string;
+  label?: string;
   title: string;
 };
 

test/spec/features/popup-menu/PopupMenuSpec.js

@@ -1430,6 +1430,33 @@ describe('features/popup-menu', function() {
     }));
 
 
+    it('should add an image as html to the header section, if specified', inject(function(popupMenu) {
+
+      // given
+      var testMenuProvider = {
+        getHeaderEntries: function() {
+          return [
+            {
+              id: '1',
+              imageHtml: '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>',
+              className: 'image-1'
+            }
+          ];
+        },
+        getEntries: function() { return []; }
+      };
+
+      // when
+      popupMenu.registerProvider('test-menu', testMenuProvider);
+      popupMenu.open({}, 'test-menu', { x: 100, y: 100 });
+
+      // then
+      var svg = queryPopup('.image-1 svg');
+
+      expect(svg).to.exist;
+    }));
+
+
     it('should NOT allow XSS via imageUrl', inject(function(popupMenu) {
 
       // given