fix(types): better typing for the send messages (was only partial correct)

Author: chrishelgert

src/constants.ts

@@ -1,6 +1,8 @@
-export const DATA_CURR_FIELD_ID = 'current-data-contentful-field-id';
-export const DATA_CURR_ENTRY_ID = 'current-data-contentful-entry-id';
-export const DATA_CURR_LOCALE = 'current-data-contentful-locale';
+import { TagAttributes } from './types';
+
+export const DATA_CURR_FIELD_ID = `current-${TagAttributes.FIELD_ID}`;
+export const DATA_CURR_ENTRY_ID = `current-${TagAttributes.ENTRY_ID}`;
+export const DATA_CURR_LOCALE = `current-${TagAttributes.LOCALE}`;
 export const TOOLTIP_CLASS = 'contentful-tooltip';
 
 export const TOOLTIP_HEIGHT = 32;

src/field-tagging.ts

@@ -112,11 +112,9 @@ export class FieldTagging {
     if (fieldId && entryId && locale) {
       sendMessageToEditor({
         action: 'TAGGED_FIELD_CLICKED',
-        data: {
-          fieldId,
-          entryId,
-          locale,
-        },
+        fieldId,
+        entryId,
+        locale,
       });
     }
   }

src/graphql/__tests__/entries.test.ts

@@ -128,9 +128,7 @@ describe('Update GraphQL Entry', () => {
       });
       expect(sendMessageToEditor).toHaveBeenCalledWith({
         action: 'ENTITY_NOT_KNOWN',
-        data: {
-          referenceEntityId: '18kDTlnJNnDIJf6PsXE5Mr',
-        },
+        referenceEntityId: '18kDTlnJNnDIJf6PsXE5Mr',
       });
     });
 
@@ -347,9 +345,7 @@ describe('Update GraphQL Entry', () => {
       });
       expect(sendMessageToEditor).toHaveBeenCalledWith({
         action: 'ENTITY_NOT_KNOWN',
-        data: {
-          referenceEntityId: '3JqLncpMbnZYrCPebujXhK',
-        },
+        referenceEntityId: '3JqLncpMbnZYrCPebujXhK',
       });
     });
 

src/graphql/entries.ts

@@ -110,9 +110,7 @@ function updateReferenceField(
     // where we can calculate the typename on the next update message.
     sendMessageToEditor({
       action: 'ENTITY_NOT_KNOWN',
-      data: {
-        referenceEntityId: updatedReference.sys.id,
-      },
+      referenceEntityId: updatedReference.sys.id,
     });
     return null;
   }

src/index.ts

@@ -29,10 +29,8 @@ export class ContentfulLivePreview {
 
         sendMessageToEditor({
           action: 'IFRAME_CONNECTED',
-          data: {
-            connected: true,
-            tags: document.querySelectorAll(`[${TagAttributes.ENTRY_ID}]`).length,
-          },
+          connected: true,
+          tags: document.querySelectorAll(`[${TagAttributes.ENTRY_ID}]`).length,
         });
 
         return Promise.resolve(ContentfulLivePreview.fieldTagging);

src/types.ts

@@ -8,13 +8,13 @@ export type LivePreviewProps = {
   locale: string | null | undefined;
 };
 
-export enum TagAttributes {
+export const enum TagAttributes {
   FIELD_ID = 'data-contentful-field-id',
   ENTRY_ID = 'data-contentful-entry-id',
   LOCALE = 'data-contentful-locale',
 }
 
-// TODO: can we add sys and optional typename to the Entity?
+// TODO: this has kind of overlap with CollectionItem, can we combine them?
 export type Entity = Record<string, unknown>;
 export type Argument = Entity | Entity[];
 export type SubscribeCallback = (data: Argument) => void;
@@ -31,17 +31,23 @@ export interface CollectionItem {
 
 type IframeConnectedMessage = {
   action: 'IFRAME_CONNECTED';
-  data: { connected: true; tags: number };
+  connected: true;
+  tags: number;
 };
 type TaggedFieldClickMessage = {
   action: 'TAGGED_FIELD_CLICKED';
-  data: { fieldId: string; entryId: string; locale: string };
+  fieldId: string;
+  entryId: string;
+  locale: string;
 };
 type UnknownEntityMessage = {
   action: 'ENTITY_NOT_KNOWN';
-  data: { referenceEntityId: string };
+  referenceEntityId: string;
 };
-
 export type EditorMessage = IframeConnectedMessage | TaggedFieldClickMessage | UnknownEntityMessage;
+export type MessageFromSDK = EditorMessage & {
+  from: 'live-preview';
+  location: string;
+};
 
 export class EntryReferenceMap extends Map<string, EntryProps | AssetProps> {}

src/utils.ts

@@ -1,19 +1,19 @@
-import type { EditorMessage } from './types';
+import type { EditorMessage, MessageFromSDK } from './types';
 
 /**
  * Sends the given message to the editor
  * enhances it with the information necessary to be accepted
  */
-export function sendMessageToEditor({ action, data }: EditorMessage): void {
+export function sendMessageToEditor(data: EditorMessage): void {
+  const message: MessageFromSDK = {
+    ...data,
+    from: 'live-preview',
+    location: window.location.href,
+  };
+
   window.top?.postMessage(
-    {
-      from: 'live-preview',
-      location: window.location.href,
-      action,
-      ...data,
-    },
-    // TODO: check if there is any security risk with this
-    '*'
+    message,
+    '*' // TODO: check if there is any security risk with this
   );
 }