diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ea949223..b0a1a9147 100644 --- 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 index 658eb5d1f..70cd62105 100644 --- 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` - - ` : null } + ${(entry.imageUrl && html``) || + (entry.imageHtml && html`
`)} ${ entry.label ? html` ${ entry.label } diff --git a/lib/features/popup-menu/PopupMenuProvider.spec.ts b/lib/features/popup-menu/PopupMenuProvider.spec.ts index 4d7e034cd..ddaca7a41 100644 --- a/lib/features/popup-menu/PopupMenuProvider.spec.ts +++ b/lib/features/popup-menu/PopupMenuProvider.spec.ts @@ -45,6 +45,8 @@ export class BarPopupMenuProvider implements PopupMenuProvider { } }, className: 'foo', + imageUrl: 'https://example.com/', + imageHtml: '', label: 'Foo' } }; @@ -67,7 +69,10 @@ export class BarPopupMenuProvider implements PopupMenuProvider { active: false, className: 'bar', id: 'bar', - title: 'Bar' + imageUrl: 'https://example.com/', + imageHtml: '', + label: 'Bar', + title: 'Bar', } ]; } diff --git a/lib/features/popup-menu/PopupMenuProvider.ts b/lib/features/popup-menu/PopupMenuProvider.ts index 0f002af91..cbc7eeb44 100644 --- 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 index 310bb2b69..274461399 100755 --- 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: '', + 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