feat(lib): add event listener for ESC key handler

packages/field-plugin/src/createFieldPlugin/createFieldPlugin.ts

@@ -1,5 +1,6 @@
 import { createPluginActions, ValidateContent } from './createPluginActions'
 import { createHeightChangeListener } from './createHeightChangeListener'
+import { createKeydownEscListener } from './createKeydownEscListener'
 import { disableDefaultStoryblokStyles } from './disableDefaultStoryblokStyles'
 import { pluginUrlParamsFromUrl } from '../messaging'
 import { FieldPluginResponse } from './FieldPluginResponse'
@@ -48,6 +49,8 @@
   }
 
   const { uid, host } = params
+
+  // ToDo: In development we need to load localhost:3300
   const origin =
     host === 'plugin-sandbox.storyblok.com'
       ? 'https://plugin-sandbox.storyblok.com'
@@ -83,24 +86,31 @@
     Exclude<typeof validateContent, undefined>
   >['content']
 
-  const { actions, messageCallbacks, onHeightChange, initialize } =
-    createPluginActions<InferredContent>({
-      uid,
-      postToContainer,
-      onUpdateState: (data) => {
-        onUpdateState({
-          type: 'loaded',
-          data,
-          actions,
-        })
-      },
-      validateContent:
-        validateContent ||
-        ((content) => ({ content: content as InferredContent })),
-    })
+  const {
+    actions,
+    messageCallbacks,
+    onHeightChange,
+    onKeydownEsc,
+    initialize,
+  } = createPluginActions<InferredContent>({
+    uid,
+    postToContainer,
+    onUpdateState: (data) => {
+      onUpdateState({
+        type: 'loaded',
+        data,
+        actions,
+      })
+    },
+    validateContent:
+      validateContent ||
+      ((content) => ({ content: content as InferredContent })),
+  })
 
   const cleanupHeightChangeListener = createHeightChangeListener(onHeightChange)
 
+  const cleanupKeydownEscListener = createKeydownEscListener(onKeydownEsc)
+
   const cleanupMessageListenerSideEffects = createPluginMessageListener(
     params.uid,
     origin,
@@ -112,6 +122,7 @@
   return () => {
     cleanupMessageListenerSideEffects()
     cleanupHeightChangeListener()
+    cleanupKeydownEscListener()
     cleanupStyleSideEffects()
   }
 }

packages/field-plugin/src/createFieldPlugin/createKeydownEscListener.ts

@@ -0,0 +1,15 @@
+/**
+ * @returns function for cleaning up side effects
+ */
+
+export const createKeydownEscListener = (onChange: () => void) => {
+  const handleEsc = (event: KeyboardEvent) => {
+    const key = event.key
+    if (key === 'Escape') {
+      onChange()
+    }
+  }
+
+  document.addEventListener('keydown', handleEsc)
+  return () => document.removeEventListener('keydown', handleEsc)
+}

packages/field-plugin/src/createFieldPlugin/createPluginActions/createPluginActions.ts

@@ -36,6 +36,8 @@
   messageCallbacks: PluginMessageCallbacks
   // This function is called whenever the height changes
   onHeightChange: (height: number) => void
+  // This function is called whenever the ESC key is pressed
+  onKeydownEsc: () => void
   // This initiates the plugin
   initialize: Initialize<Content>
 }
@@ -63,9 +65,9 @@
     popCallback('asset', data.callbackId)?.(data)
   }
   const onUnknownMessage: OnUnknownPluginMessage = (data) => {
     // TODO remove side-effect, making functions in this file pure.
     //  perhaps only show this message in development mode?
     console.debug(
       `Plugin received a message from container of an unknown action type "${
         data.action
       }". You may need to upgrade the version of the @storyblok/field-plugin library. Full message: ${JSON.stringify(
@@ -86,6 +88,10 @@
     postToContainer(heightChangeMessage(uid, height))
   }
 
+  const onKeydownEsc = () => {
+    postToContainer(modalChangeMessage({ uid, status: false }))
+  }
+
   return {
     actions: {
       setContent: (content) => {
@@ -131,6 +137,7 @@
     },
     messageCallbacks,
     onHeightChange,
+    onKeydownEsc,
     initialize: () => {
       return new Promise((resolve) => {
         const callbackId = pushCallback('loaded', (message) =>