feat(PopupMenu): allow imageHtml for header entries

bpmn-io · Oct 31, 2023 · a4e840d · a4e840d
1 parent a9d461d
commit a4e840d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 3 deletions.
diff --git a/CHANGELOG.md b/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))

diff --git a/lib/features/popup-menu/PopupMenuComponent.js b/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>

diff --git a/lib/features/popup-menu/PopupMenuProvider.ts b/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;
 };
 

diff --git a/test/spec/features/popup-menu/PopupMenuSpec.js b/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