feat(playground): configure editor#keyboard

Author: Niklas Kiefer

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

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