feat: sending auto tagged vs manually tagged post messages [] (#725)

contentful · May 16, 2024 · 215f01a · 215f01a
1 parent 488dfb6
commit 215f01a
Show file tree

Hide file tree

Showing 8 changed files with 185 additions and 60 deletions.
diff --git a/packages/live-preview-sdk/src/__tests__/inspectorMode.spec.ts b/packages/live-preview-sdk/src/__tests__/inspectorMode.spec.ts
@@ -57,6 +57,8 @@ describe('InspectorMode', () => {
         InspectorModeEventMethods.TAGGED_ELEMENTS,
         {
           elements: [],
+          automaticallyTaggedCount: 0,
+          manuallyTaggedCount: 0,
         },
         targetOrigin,
       );

diff --git a/packages/live-preview-sdk/src/__tests__/react.spec.tsx b/packages/live-preview-sdk/src/__tests__/react.spec.tsx
@@ -196,7 +196,14 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ entryId: '1', locale, fieldId: 'title' })).toEqual({
+      expect(
+        result.current({
+          entryId: '1',
+          locale,
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-entry-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-locale': 'en-US',
@@ -211,7 +218,13 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ locale, fieldId: 'title' })).toEqual({
+      expect(
+        result.current({
+          locale,
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-entry-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-locale': 'en-US',
@@ -226,7 +239,13 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ entryId: '1', fieldId: 'title' })).toEqual({
+      expect(
+        result.current({
+          entryId: '1',
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-entry-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-locale': 'en-US',
@@ -241,7 +260,12 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ fieldId: 'title' })).toEqual({
+      expect(
+        result.current({
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-entry-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-locale': 'en-US',
@@ -256,7 +280,14 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ fieldId: 'title', space: '12345', environment: 'develop' })).toEqual({
+      expect(
+        result.current({
+          fieldId: 'title',
+          space: '12345',
+          environment: 'develop',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-entry-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-space': '12345',
@@ -272,7 +303,12 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ fieldId: 'title' })).toEqual({
+      expect(
+        result.current({
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-entry-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-space': '99999',
@@ -290,7 +326,12 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ fieldId: 'title' })).toBeNull();
+      expect(
+        result.current({
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toBeNull();
     });
   });
   describe('asset', () => {
@@ -302,7 +343,14 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ assetId: '1', locale, fieldId: 'title' })).toEqual({
+      expect(
+        result.current({
+          assetId: '1',
+          locale,
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-asset-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-locale': 'en-US',
@@ -317,7 +365,13 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ locale, fieldId: 'title' })).toEqual({
+      expect(
+        result.current({
+          locale,
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-asset-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-locale': 'en-US',
@@ -332,7 +386,13 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ assetId: '1', fieldId: 'title' })).toEqual({
+      expect(
+        result.current({
+          assetId: '1',
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-asset-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-locale': 'en-US',
@@ -347,7 +407,12 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ fieldId: 'title' })).toEqual({
+      expect(
+        result.current({
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toEqual({
         'data-contentful-asset-id': '1',
         'data-contentful-field-id': 'title',
         'data-contentful-locale': 'en-US',
@@ -364,7 +429,12 @@ describe('useContentfulInspectorMode', () => {
         ),
       });
 
-      expect(result.current({ fieldId: 'title' })).toBeNull();
+      expect(
+        result.current({
+          fieldId: 'title',
+          manuallyTagged: true,
+        }),
+      ).toBeNull();
     });
   });
 });
diff --git a/packages/live-preview-sdk/src/index.ts b/packages/live-preview-sdk/src/index.ts
@@ -12,7 +12,7 @@ import {
 import { isValidMessage } from './helpers/validateMessage.js';
 import { InspectorMode } from './inspectorMode/index.js';
 import { InspectorModeDataAttributes, type InspectorModeTags } from './inspectorMode/types.js';
-import { getAllTaggedEntries } from './inspectorMode/utils.js';
+import { getAllTaggedElements, getAllTaggedEntries } from './inspectorMode/utils.js';
 import { LiveUpdates } from './liveUpdates.js';
 import {
   LivePreviewPostMessageMethods,
@@ -190,9 +190,16 @@ export class ContentfulLivePreview {
       });
 
       // tell the editor that there's a SDK
-      const taggedElementCount = document.querySelectorAll(
-        `[${InspectorModeDataAttributes.ENTRY_ID}]`,
-      ).length;
+      const { taggedElements, manuallyTaggedCount, automaticallyTaggedCount } = this
+        .inspectorModeEnabled
+        ? getAllTaggedElements()
+        : {
+            taggedElements: [],
+            manuallyTaggedCount: 0,
+            automaticallyTaggedCount: 0,
+          };
+      const taggedElementCount = taggedElements.length;
+
       sendMessageToEditor(
         LivePreviewPostMessageMethods.CONNECTED,
         {
@@ -203,6 +210,8 @@ export class ContentfulLivePreview {
           locale: this.locale,
           isInspectorEnabled: this.inspectorModeEnabled,
           isLiveUpdatesEnabled: this.liveUpdatesEnabled,
+          manuallyTaggedElementCount: manuallyTaggedCount,
+          automaticallyTaggedElementCount: automaticallyTaggedCount,
         } as ConnectedMessage,
         this.targetOrigin,
       );

diff --git a/packages/live-preview-sdk/src/inspectorMode/__tests__/getAllTaggedElements.test.ts b/packages/live-preview-sdk/src/inspectorMode/__tests__/getAllTaggedElements.test.ts
@@ -45,7 +45,7 @@ describe('getAllTaggedElements', () => {
 		</div>
 	  `);
 
-      const elements = getAllTaggedElements(dom);
+      const { taggedElements: elements } = getAllTaggedElements(dom);
 
       expect(elements).toEqual([
         dom.getElementById('entry-1'),
@@ -70,7 +70,7 @@ describe('getAllTaggedElements', () => {
 		</div>
 	  `);
 
-      const elements = getAllTaggedElements(dom);
+      const { taggedElements: elements } = getAllTaggedElements(dom);
 
       expect(elements).toEqual([dom.getElementById('entry')]);
     });
@@ -87,7 +87,7 @@ describe('getAllTaggedElements', () => {
 		</div>
 	  `);
 
-      const elements = getAllTaggedElements(dom);
+      const { taggedElements: elements } = getAllTaggedElements(dom);
 
       expect(elements).toEqual([dom.getElementById('entry')]);
     });
@@ -101,14 +101,14 @@ describe('getAllTaggedElements', () => {
         `<span>${combine('Test', createSourceMapFixture('ignore_origin', { origin: 'example.com' }))}</span>`,
       );
 
-      const elements = getAllTaggedElements(dom);
+      const { taggedElements: elements } = getAllTaggedElements(dom);
       expect(elements).toEqual([]);
     });
 
     it('should recognize auto-tagged elements', () => {
       const dom = html(`<span id="entry-1">${combine('Test', metadata)}</span>`);
 
-      const elements = getAllTaggedElements(dom);
+      const { taggedElements: elements } = getAllTaggedElements(dom);
 
       expect(elements).toHaveLength(1);
       expect(elements).toEqual([dom.getElementById('entry-1')]);
@@ -125,7 +125,7 @@ describe('getAllTaggedElements', () => {
           </div>
         `);
 
-        const elements = getAllTaggedElements(dom);
+        const { taggedElements: elements } = getAllTaggedElements(dom);
 
         expect(elements).toHaveLength(1);
         expect(elements).toEqual([dom.getElementById('richtext')]);
@@ -141,7 +141,7 @@ describe('getAllTaggedElements', () => {
           </div>
         `);
 
-        const elements = getAllTaggedElements(dom);
+        const { taggedElements: elements } = getAllTaggedElements(dom);
 
         expect(elements).toHaveLength(1);
         expect(elements).toEqual([dom.getElementById('richtext')]);
@@ -152,7 +152,7 @@ describe('getAllTaggedElements', () => {
           <p id="node-1">${combine('Hello', metadata)}<strong>${combine('World', metadata)}</strong>!</p>
       `);
 
-        const elements = getAllTaggedElements(dom);
+        const { taggedElements: elements } = getAllTaggedElements(dom);
 
         expect(elements).toHaveLength(1);
         expect(elements).toEqual([dom.getElementById('node-1')]);
@@ -177,7 +177,7 @@ describe('getAllTaggedElements', () => {
         </div>
       `);
 
-        const elements = getAllTaggedElements(dom);
+        const { taggedElements: elements } = getAllTaggedElements(dom);
 
         expect(elements).toHaveLength(3);
         expect(elements).toEqual([
@@ -207,7 +207,7 @@ describe('getAllTaggedElements', () => {
         </div>
       `);
 
-      const elements = getAllTaggedElements(dom);
+      const { taggedElements: elements } = getAllTaggedElements(dom);
 
       expect(elements).toHaveLength(3);
       expect(elements).toEqual([
@@ -224,7 +224,7 @@ describe('getAllTaggedElements', () => {
 		</div>
 	  </div>`);
 
-      const elements = getAllTaggedElements(dom);
+      const { taggedElements: elements } = getAllTaggedElements(dom);
 
       expect(elements.length).toEqual(1);
       expect(elements[0].getAttribute(InspectorModeDataAttributes.ENTRY_ID)).toEqual(
@@ -243,14 +243,15 @@ describe('getAllTaggedElements', () => {
 		</div>
 	  </div>`);
 
-      const elements = getAllTaggedElements(dom, true);
+      const {
+        taggedElements: elements,
+        autoTaggedElements,
+        manuallyTaggedCount,
+      } = getAllTaggedElements(dom, true);
 
       expect(elements.length).toEqual(1);
-      expect(elements[0].getAttribute(InspectorModeDataAttributes.ENTRY_ID)).toEqual(
-        'test-entry-id',
-      );
-      expect(elements[0].getAttribute(InspectorModeDataAttributes.FIELD_ID)).toEqual('title');
-      expect(elements[0].getAttribute(InspectorModeDataAttributes.LOCALE)).toEqual('en-US');
+      expect(autoTaggedElements.length).toEqual(1);
+      expect(manuallyTaggedCount).toEqual(0);
     });
   });
 });