fix(inspectorMode): more accurate outlines [TOL-1718] (#727)

* fix(inspectorMode): handle scroll inside of elements * fix(inspectorMode): refresh tagged elements on mouse move * fix(inspectorMode): check for element visiblity * fix(inspectorMode): cancel listeners if disabled * fix(inspectorMode): remove manuallyTagged from the required types
contentful · May 21, 2024 · 0418e9d · 0418e9d
1 parent 780080f
commit 0418e9d
Show file tree

Hide file tree

Showing 6 changed files with 179 additions and 153 deletions.
diff --git a/packages/live-preview-sdk/src/__tests__/init.spec.ts b/packages/live-preview-sdk/src/__tests__/init.spec.ts
@@ -23,6 +23,7 @@ const livePreviewConfig = {
 
 vi.stubGlobal('ResizeObserver', ObserverMock);
 vi.stubGlobal('MutationObserver', ObserverMock);
+vi.stubGlobal('IntersectionObserver', ObserverMock);
 
 describe('init', () => {
   beforeEach(() => {

diff --git a/packages/live-preview-sdk/src/__tests__/inspectorMode.spec.ts b/packages/live-preview-sdk/src/__tests__/inspectorMode.spec.ts
@@ -10,15 +10,18 @@ vi.mock('../helpers');
 
 const locale = 'en-US';
 
-const ObserverMock = vi.fn(() => ({
-  disconnect: vi.fn(),
-  observe: vi.fn(),
-  takeRecords: vi.fn(),
-  unobserve: vi.fn(),
-}));
+const createObserverMock = () =>
+  vi.fn(() => ({
+    disconnect: vi.fn(),
+    observe: vi.fn(),
+    takeRecords: vi.fn(),
+    unobserve: vi.fn(),
+  }));
 
-vi.stubGlobal('ResizeObserver', ObserverMock);
-vi.stubGlobal('MutationObserver', ObserverMock);
+const IntersectionObserver = createObserverMock();
+vi.stubGlobal('ResizeObserver', createObserverMock());
+vi.stubGlobal('MutationObserver', createObserverMock());
+vi.stubGlobal('IntersectionObserver', IntersectionObserver);
 
 describe('InspectorMode', () => {
   let inspectorMode: InspectorMode;
@@ -52,6 +55,10 @@ describe('InspectorMode', () => {
         isInspectorActive: true,
       });
 
+      // We need to trigger the intersection observer manually
+      // @ts-expect-error no typings available :(
+      IntersectionObserver.mock.calls[0][0]([]);
+
       expect(sendMessageToEditor).toHaveBeenCalledOnce();
       expect(sendMessageToEditor).toHaveBeenCalledWith(
         InspectorModeEventMethods.TAGGED_ELEMENTS,

diff --git a/packages/live-preview-sdk/src/__tests__/react.spec.tsx b/packages/live-preview-sdk/src/__tests__/react.spec.tsx
@@ -201,7 +201,6 @@ describe('useContentfulInspectorMode', () => {
           entryId: '1',
           locale,
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-entry-id': '1',
@@ -222,7 +221,6 @@ describe('useContentfulInspectorMode', () => {
         result.current({
           locale,
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-entry-id': '1',
@@ -243,7 +241,6 @@ describe('useContentfulInspectorMode', () => {
         result.current({
           entryId: '1',
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-entry-id': '1',
@@ -263,7 +260,6 @@ describe('useContentfulInspectorMode', () => {
       expect(
         result.current({
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-entry-id': '1',
@@ -285,7 +281,6 @@ describe('useContentfulInspectorMode', () => {
           fieldId: 'title',
           space: '12345',
           environment: 'develop',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-entry-id': '1',
@@ -306,7 +301,6 @@ describe('useContentfulInspectorMode', () => {
       expect(
         result.current({
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-entry-id': '1',
@@ -329,7 +323,6 @@ describe('useContentfulInspectorMode', () => {
       expect(
         result.current({
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toBeNull();
     });
@@ -348,7 +341,6 @@ describe('useContentfulInspectorMode', () => {
           assetId: '1',
           locale,
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-asset-id': '1',
@@ -369,7 +361,6 @@ describe('useContentfulInspectorMode', () => {
         result.current({
           locale,
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-asset-id': '1',
@@ -390,7 +381,6 @@ describe('useContentfulInspectorMode', () => {
         result.current({
           assetId: '1',
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-asset-id': '1',
@@ -410,7 +400,6 @@ describe('useContentfulInspectorMode', () => {
       expect(
         result.current({
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toEqual({
         'data-contentful-asset-id': '1',
@@ -432,7 +421,6 @@ describe('useContentfulInspectorMode', () => {
       expect(
         result.current({
           fieldId: 'title',
-          manuallyTagged: true,
         }),
       ).toBeNull();
     });