Remove form field via keyboard

packages/form-js-editor/src/features/editor-actions/FormEditorActions.js

@@ -17,6 +17,7 @@ export default class FormEditorActions extends EditorActions {
   _registerDefaultActions(injector) {
     const commandStack = injector.get('commandStack', false),
           formFieldRegistry = injector.get('formFieldRegistry', false),
+          modeling = injector.get('modeling', false),
           selection = injector.get('selection', false);
 
     if (commandStack) {
@@ -48,11 +49,45 @@ export default class FormEditorActions extends EditorActions {
           selection.set(formField);
         }
       });
+
+    }
+
+    if (modeling && selection) {
+
+      // @ts-ignore
+      this.register('removeSelection', () => {
+        const selectedFormField = selection.get();
+
+        if (!selectedFormField) {
+          return;
+        }
+
+        const parentField = formFieldRegistry.get(selectedFormField._parent);
+
+        const index = getFormFieldIndex(parentField, selectedFormField);
+
+        modeling.removeFormField(selectedFormField, parentField, index);
+      });
     }
   }
 }
 
 FormEditorActions.$inject = [
   'eventBus',
   'injector'
-];
+];
+
+
+// helper ////////////
+
+function getFormFieldIndex(parent, formField) {
+  let fieldFormIndex = parent.components.length;
+
+  parent.components.forEach(({ id }, index) => {
+    if (id === formField.id) {
+      fieldFormIndex = index;
+    }
+  });
+
+  return fieldFormIndex;
+}

packages/form-js-editor/src/features/keyboard/FormEditorKeyboardBindings.js

@@ -53,6 +53,19 @@ export default class FormEditorKeyboardBindings {
       }
     });
 
+    // delete selected field
+    // DEL
+    addListener('removeSelection', (context) => {
+
+      const { keyEvent } = context;
+
+      if (isKey([ 'Backspace', 'Delete', 'Del' ], keyEvent)) {
+
+        editorActions.trigger('removeSelection');
+
+        return true;
+      }
+    });
   }
 }
 

packages/form-js-playground/src/Playground.js

@@ -11,7 +11,7 @@ import { PlaygroundRoot } from './components/PlaygroundRoot';
  *  actions?: { display: Boolean }
  *  container?: Element
  *  data: any
- *  editor?: { inlinePropertiesPanel: Boolean }
+ *  editor?: { inlinePropertiesPanel: Boolean, keyboard?: { bindTo: Element } }
  *  exporter?: { name: String, version: String }
  *  schema: any
  * } } FormPlaygroundOptions

packages/form-js-playground/src/components/PlaygroundRoot.js

@@ -35,7 +35,8 @@ export function PlaygroundRoot(props) {
   } = actionsConfig;
 
   const {
-    inlinePropertiesPanel = true
+    inlinePropertiesPanel = true,
+    keyboard = {}
   } = editorConfig;
 
   const paletteContainerRef = useRef();
@@ -107,7 +108,8 @@ export function PlaygroundRoot(props) {
       propertiesPanel: {
         parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current
       },
-      exporter: exporterConfig
+      exporter: exporterConfig,
+      keyboard
     });
 
     paletteRef.current = formEditor.get('palette');

packages/form-js-playground/test/spec/Playground.spec.js

@@ -82,7 +82,10 @@ describe('playground', function() {
     playground = new Playground({
       container,
       schema,
-      data
+      data,
+      editor: {
+        keyboard: { bindTo: document }
+      }
     });
 
     // then