From b09cb76cdcf00478f79feb239c103a59a1d3be10 Mon Sep 17 00:00:00 2001
From: Martin Stamm <martin.stamm@camunda.com>
Date: Mon, 16 Oct 2023 10:53:17 +0200
Subject: [PATCH] chore(bpmn): integrate popup editor

closes #3877
---
 .../FeelPopupKeyboardBindings.js              | 46 +++++++++++++++++++
 .../index.js                                  |  6 ++-
 client/src/app/tabs/cloud-bpmn/BpmnEditor.js  |  7 ++-
 3 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 client/src/app/tabs/bpmn/modeler/features/properties-panel-keyboard-bindings/FeelPopupKeyboardBindings.js

diff --git a/client/src/app/tabs/bpmn/modeler/features/properties-panel-keyboard-bindings/FeelPopupKeyboardBindings.js b/client/src/app/tabs/bpmn/modeler/features/properties-panel-keyboard-bindings/FeelPopupKeyboardBindings.js
new file mode 100644
index 0000000000..851c1a93a1
--- /dev/null
+++ b/client/src/app/tabs/bpmn/modeler/features/properties-panel-keyboard-bindings/FeelPopupKeyboardBindings.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright Camunda Services GmbH and/or licensed to Camunda Services GmbH
+ * under one or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information regarding copyright
+ * ownership.
+ *
+ * Camunda licenses this file to you under the MIT; you may not use this file
+ * except in compliance with the MIT License.
+ */
+
+export default class FeelPopupKeyboardBindings {
+  constructor(eventBus) {
+    this._eventBus = eventBus;
+
+    eventBus.on('feelPopup.opened', this._addEventListeners);
+    eventBus.on('feelPopup.close', this._removeEventListeners);
+  }
+
+  _addEventListeners = (event) => {
+    const container = event.domNode;
+
+    container.addEventListener('focusin', this.handleFocusin);
+    container.addEventListener('focusout', this.handleFocusout);
+  };
+
+  _removeEventListeners = () => {
+    const container = this._getContainer();
+
+    container.removeEventListener('focusin', this.handleFocusin);
+    container.removeEventListener('focusout', this.handleFocusout);
+  };
+
+  handleFocusin = () => {
+    this._eventBus.fire('feelPopup.focusin');
+  };
+
+  handleFocusout = () => {
+    this._eventBus.fire('feelPopup.focusout');
+  };
+
+  _getContainer() {
+    return document.querySelector('.bio-properties-panel-feel-popup');
+  }
+}
+
+FeelPopupKeyboardBindings.$inject = [ 'eventBus' ];
diff --git a/client/src/app/tabs/bpmn/modeler/features/properties-panel-keyboard-bindings/index.js b/client/src/app/tabs/bpmn/modeler/features/properties-panel-keyboard-bindings/index.js
index 504b281779..1abea6eec9 100644
--- a/client/src/app/tabs/bpmn/modeler/features/properties-panel-keyboard-bindings/index.js
+++ b/client/src/app/tabs/bpmn/modeler/features/properties-panel-keyboard-bindings/index.js
@@ -9,8 +9,10 @@
  */
 
 import PropertiesPanelKeyboardBindings from './PropertiesPanelKeyboardBindings';
+import FeelPopupKeyboardBindings from './FeelPopupKeyboardBindings';
 
 export default {
-  __init__: [ 'propertiesPanelKeyboardBindings' ],
-  propertiesPanelKeyboardBindings: [ 'type', PropertiesPanelKeyboardBindings ]
+  __init__: [ 'propertiesPanelKeyboardBindings', 'feelPopupKeyboardBindings' ],
+  propertiesPanelKeyboardBindings: [ 'type', PropertiesPanelKeyboardBindings ],
+  feelPopupKeyboardBindings: [ 'type', FeelPopupKeyboardBindings ]
 };
diff --git a/client/src/app/tabs/cloud-bpmn/BpmnEditor.js b/client/src/app/tabs/cloud-bpmn/BpmnEditor.js
index 1520a9964e..085aee45e6 100644
--- a/client/src/app/tabs/cloud-bpmn/BpmnEditor.js
+++ b/client/src/app/tabs/cloud-bpmn/BpmnEditor.js
@@ -220,7 +220,11 @@ export class BpmnEditor extends CachedComponent {
       'searchPad.closed',
       'searchPad.opened',
       'popupMenu.opened',
-      'popupMenu.closed'
+      'popupMenu.closed',
+      'feelPopup.opened',
+      'feelPopup.closed',
+      'feelPopup.focusin',
+      'feelPopup.focusout'
     ].forEach((event) => {
       modeler[fn](event, this.handleChanged);
     });
@@ -838,6 +842,7 @@ export class BpmnEditor extends CachedComponent {
       },
       propertiesPanel: {
         feelTooltipContainer: '.editor',
+        feelPopupContainer: '.bjs-container',
         layout: layout.propertiesPanel
       },
       elementTemplateChooser: false