feat(inspectorMode): move inspectorMode outlines on top of the iframe []

contentful · Nov 14, 2023 · 7b9d52d · 7b9d52d
1 parent 34f699e
commit 7b9d52d
Show file tree

Hide file tree

Showing 35 changed files with 417 additions and 326 deletions.
diff --git a/README.md b/README.md
@@ -102,11 +102,8 @@ To use the inspector mode, you need to tag fields by adding the live preview dat
 
 You can do this in React via our helper function.
 
-The necessary styles for the live edit tags can be found in the `@contentful/live-preview/style.css` file.
-
 ```jsx
 import { ContentfulLivePreview } from '@contentful/live-preview';
-import '@contentful/live-preview/style.css';
 ...
 
 <h1 {...ContentfulLivePreview.getProps({ entryId: id, fieldId: 'title' })}>
@@ -197,18 +194,13 @@ or
 npm install @contentful/live-preview
 ```
 
-2. Once you've got the data from Contentful, then you can initialize the live preview. You can use the `ContentfulLivePreview` class' [init function](#init-configuration) and add the stylesheet for field tagging as a stylesheet link.
+2. Once you've got the data from Contentful, then you can initialize the live preview. You can use the `ContentfulLivePreview` class' [init function](#init-configuration).
 
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <title>Live Preview Example</title>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="./node_modules/@contentful/live-preview/dist/style.css"
-    />
     <script type="module">
       import { ContentfulLivePreview } from '@contentful/live-preview';
 
@@ -223,18 +215,11 @@ npm install @contentful/live-preview
 
 You can use the provided helper function `getProps()`.
 
-The necessary styles for the live edit tags can be found in the `@contentful/live-preview/style.css` file.
-
 ```html
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <title>Live Preview Example</title>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="./node_modules/@contentful/live-preview/dist/style.css"
-    />
     <script type="module">
       import { ContentfulLivePreview } from '@contentful/live-preview';
 
@@ -276,11 +261,6 @@ The necessary styles for the live edit tags can be found in the `@contentful/liv
 <html lang="en">
   <head>
     <title>Live Preview Example</title>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="./node_modules/@contentful/live-preview/dist/style.css"
-    />
     <script type="module">
       import { ContentfulLivePreview } from '@contentful/live-preview';
 
@@ -334,7 +314,6 @@ npm install @contentful/live-preview
    The `ContentfulLivePreviewProvider` accepts the same arguments as the [init function](#init-configuration).
 
 ```tsx
-import '@contentful/live-preview/style.css';
 import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
 
 const CustomApp = ({ Component, pageProps }) => (
@@ -347,7 +326,6 @@ const CustomApp = ({ Component, pageProps }) => (
 This provides the possibility to only enable live updates and inspector mode inside draft mode:
 
 ```tsx
-import '@contentful/live-preview/style.css';
 import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
 
 const CustomApp = ({ Component, pageProps }) => (
@@ -436,8 +414,6 @@ npm install @contentful/live-preview
 2. In your gatsby-browser.js file, import the live preview styles and initialize the SDK:
 
 ```tsx
-import '@contentful/live-preview/style.css';
-
 import React from 'react';
 import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
 

diff --git a/examples/gatsby/gatsby-browser.tsx b/examples/gatsby/gatsby-browser.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
-import '@contentful/live-preview/style.css';
 
 export const wrapRootElement = ({ element }) => (
   <ContentfulLivePreviewProvider locale="en-US">{element}</ContentfulLivePreviewProvider>

diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
@@ -11,7 +11,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@contentful/live-preview": "^2.4.3",
+    "@contentful/live-preview": "latest",
     "gatsby": "^5.10.0",
     "gatsby-plugin-image": "^3.10.0",
     "gatsby-plugin-sharp": "^5.10.0",

diff --git a/examples/next-13-app-router-graphql/app/layout.tsx b/examples/next-13-app-router-graphql/app/layout.tsx
@@ -2,7 +2,6 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import { draftMode } from 'next/headers';
 import { Providers } from './providers';
-import '@contentful/live-preview/style.css';
 
 const inter = Inter({ subsets: ['latin'] });
 

diff --git a/examples/next-13-app-router-graphql/package.json b/examples/next-13-app-router-graphql/package.json
@@ -9,15 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@contentful/live-preview": "^2.9.5",
+    "@contentful/live-preview": "latest",
+    "next": "13.5.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
     "@types/node": "20.5.0",
     "@types/react": "18.2.20",
     "@types/react-dom": "18.2.7",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.13",
-    "next": "13.5.0",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "typescript": "5.1.6"
   }
 }
diff --git a/examples/next-13-app-router-ssr/app/layout.tsx b/examples/next-13-app-router-ssr/app/layout.tsx
@@ -3,8 +3,6 @@ import { Inter } from 'next/font/google';
 import { draftMode } from 'next/headers';
 import Script from 'next/script';
 
-import '@contentful/live-preview/style.css';
-
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {

diff --git a/examples/next-13-app-router-ssr/package.json b/examples/next-13-app-router-ssr/package.json
@@ -13,7 +13,7 @@
     "prepare": "relative-deps"
   },
   "dependencies": {
-    "@contentful/live-preview": "../../packages/live-preview-sdk",
+    "@contentful/live-preview": "latest",
     "next": "13.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/examples/nextjs-graphql/pages/_app.tsx b/examples/nextjs-graphql/pages/_app.tsx
@@ -1,5 +1,4 @@
 import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
-import '@contentful/live-preview/style.css';
 import { AppProps } from 'next/app';
 
 function App({ Component, pageProps }: AppProps) {

diff --git a/examples/nextjs-rest/package.json b/examples/nextjs-rest/package.json
@@ -6,7 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@contentful/live-preview": "^2.4.3",
+    "@contentful/live-preview": "latest",
     "@types/node": "20.2.3",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",

diff --git a/examples/nextjs-rest/pages/_app.tsx b/examples/nextjs-rest/pages/_app.tsx
@@ -1,5 +1,4 @@
 import { ContentfulLivePreviewProvider } from '@contentful/live-preview/react';
-import '@contentful/live-preview/style.css';
 import { AppProps } from 'next/app';
 
 function App({ Component, pageProps }: AppProps) {

diff --git a/examples/remix/.gitignore b/examples/remix/.gitignore
@@ -3,5 +3,4 @@ node_modules
 /.cache
 /build
 /public/build
-/public/style.css
 .env
diff --git a/examples/remix/app/root.tsx b/examples/remix/app/root.tsx
@@ -31,7 +31,6 @@ export default function App() {
         <head>
           <Meta />
           <Links />
-          <link rel="stylesheet" href="/style.css" />
         </head>
         <body>
           <main>

diff --git a/examples/remix/package.json b/examples/remix/package.json
@@ -1,12 +1,12 @@
 {
   "private": true,
   "scripts": {
-    "dev": "remix dev & esbuild node_modules/@contentful/live-preview/style.css --bundle --outfile=public/style.css --watch",
-    "build": "remix build && esbuild node_modules/@contentful/live-preview/style.css --bundle --outfile=public/style.css",
+    "dev": "remix dev",
+    "build": "remix build",
     "start": "remix-serve build"
   },
   "dependencies": {
-    "@contentful/live-preview": "^2.4.3",
+    "@contentful/live-preview": "latest",
     "@remix-run/node": "^1.16.1",
     "@remix-run/react": "^1.16.1",
     "@types/react-dom": "^18.2.4",
@@ -19,7 +19,6 @@
     "@remix-run/dev": "^1.16.1",
     "@remix-run/eslint-config": "^1.16.1",
     "@remix-run/serve": "^1.16.1",
-    "esbuild": "^0.17.19",
     "eslint": "^8.41.0"
   }
 }
diff --git a/examples/vanilla-js/README.md b/examples/vanilla-js/README.md
@@ -2,18 +2,6 @@
 
 This is an example project that demonstrates how to use the `@contentful/live-preview` SDK in a Vanilla JS application. The SDK provides live preview functionality for content changes and the inspector mode for your Contentful space.
 
-The `@contentful/live-preview` SDK comes with its own CSS file, which needs to be included in your project.
-
-```html
-<head>
-  <link
-    rel="stylesheet"
-    type="text/css"
-    href="./node_modules/@contentful/live-preview/dist/style.css"
-  />
-</head>
-```
-
 ## 1. Installation
 
 Install the dependencies:

diff --git a/examples/vanilla-js/index.html b/examples/vanilla-js/index.html
@@ -2,11 +2,6 @@
 <html lang="en">
   <head>
     <title>Contentful Live Preview Demo</title>
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="./node_modules/@contentful/live-preview/dist/style.css"
-    />
     <script src="./app.js"></script>
   </head>
   <body>

diff --git a/examples/vanilla-js/package.json b/examples/vanilla-js/package.json
@@ -11,7 +11,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@contentful/live-preview": "^2.9.1",
+    "@contentful/live-preview": "latest",
     "contentful": "^10.5.0",
     "dotenv": "^16.3.1"
   },

diff --git a/packages/live-preview-sdk/src/__tests__/index.spec.ts b/packages/live-preview-sdk/src/__tests__/index.spec.ts
@@ -6,13 +6,23 @@ import { ContentfulLivePreview } from '../index';
 import { InspectorMode } from '../inspectorMode';
 import { LiveUpdates } from '../liveUpdates';
 import { SaveEvent } from '../saveEvent';
-import { TagAttributes } from '../types';
+import { InspectorModeDataAttributes } from '../inspectorMode/types';
 
 vi.mock('../inspectorMode');
 vi.mock('../liveUpdates');
 vi.mock('../saveEvent');
 vi.mock('../helpers');
 
+const ObserverMock = vi.fn(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  takeRecords: vi.fn(),
+  unobserve: vi.fn(),
+}));
+
+vi.stubGlobal('ResizeObserver', ObserverMock);
+vi.stubGlobal('MutationObserver', ObserverMock);
+
 describe('ContentfulLivePreview', () => {
   const receiveMessageInspectorMode = vi.fn();
   const receiveMessageLiveUpdates = vi.fn();
@@ -125,9 +135,9 @@ describe('ContentfulLivePreview', () => {
       });
 
       expect(result).toStrictEqual({
-        [TagAttributes.FIELD_ID]: fieldId,
-        [TagAttributes.ENTRY_ID]: entryId,
-        [TagAttributes.LOCALE]: locale,
+        [InspectorModeDataAttributes.FIELD_ID]: fieldId,
+        [InspectorModeDataAttributes.ENTRY_ID]: entryId,
+        [InspectorModeDataAttributes.LOCALE]: locale,
       });
     });
 

diff --git a/packages/live-preview-sdk/src/__tests__/init.spec.ts b/packages/live-preview-sdk/src/__tests__/init.spec.ts
@@ -9,6 +9,16 @@ import { LiveUpdates } from '../liveUpdates';
 
 vi.mock('../helpers');
 
+const ObserverMock = vi.fn(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  takeRecords: vi.fn(),
+  unobserve: vi.fn(),
+}));
+
+vi.stubGlobal('ResizeObserver', ObserverMock);
+vi.stubGlobal('MutationObserver', ObserverMock);
+
 describe('init', () => {
   beforeEach(() => {
     (isInsideIframe as Mock).mockReturnValue(true);

diff --git a/packages/live-preview-sdk/src/__tests__/inspectorMode.spec.ts b/packages/live-preview-sdk/src/__tests__/inspectorMode.spec.ts
@@ -3,10 +3,23 @@ import { describe, test, expect, beforeEach, afterEach, vi } from 'vitest';
 
 import { LIVE_PREVIEW_EDITOR_SOURCE } from '../constants';
 import { InspectorMode } from '../inspectorMode';
-import { LivePreviewPostMessageMethods } from '../messages';
+import { InspectorModeEventMethods, LivePreviewPostMessageMethods } from '../messages';
+import { sendMessageToEditor } from '../helpers';
+
+vi.mock('../helpers');
 
 const locale = 'en-US';
 
+const ObserverMock = vi.fn(() => ({
+  disconnect: vi.fn(),
+  observe: vi.fn(),
+  takeRecords: vi.fn(),
+  unobserve: vi.fn(),
+}));
+
+vi.stubGlobal('ResizeObserver', ObserverMock);
+vi.stubGlobal('MutationObserver', ObserverMock);
+
 describe('InspectorMode', () => {
   let inspectorMode: InspectorMode;
   const targetOrigin = ['https://app.contentful.com'];
@@ -30,16 +43,23 @@ describe('InspectorMode', () => {
       expect(spy).not.toHaveBeenCalled();
     });
 
-    test('should toggle "contentful-inspector--active" class on document.body based on value of isInspectorActive', () => {
-      const spy = vi.spyOn(document.body.classList, 'toggle');
+    test('should send the tagged elements back to the editor', () => {
       inspectorMode.receiveMessage({
-        action: LivePreviewPostMessageMethods.INSPECTOR_MODE_CHANGED,
+        action: InspectorModeEventMethods.INSPECTOR_MODE_CHANGED,
         from: 'live-preview',
-        method: LivePreviewPostMessageMethods.INSPECTOR_MODE_CHANGED,
+        method: InspectorModeEventMethods.INSPECTOR_MODE_CHANGED,
         source: LIVE_PREVIEW_EDITOR_SOURCE,
         isInspectorActive: true,
       });
-      expect(spy).toHaveBeenCalledWith('contentful-inspector--active', true);
+
+      expect(sendMessageToEditor).toHaveBeenCalledOnce();
+      expect(sendMessageToEditor).toHaveBeenCalledWith(
+        InspectorModeEventMethods.TAGGED_ELEMENTS,
+        {
+          elements: [],
+        },
+        ['https://app.contentful.com']
+      );
     });
   });
 });
diff --git a/packages/live-preview-sdk/src/__tests__/liveUpdates.spec.ts b/packages/live-preview-sdk/src/__tests__/liveUpdates.spec.ts
@@ -5,7 +5,7 @@ import { describe, it, vi, expect, beforeEach, afterEach } from 'vitest';
 import { LIVE_PREVIEW_EDITOR_SOURCE } from '../constants';
 import * as helpers from '../helpers';
 import { LiveUpdates } from '../liveUpdates';
-import { LivePreviewPostMessageMethods } from '../messages';
+import { InspectorModeEventMethods, LivePreviewPostMessageMethods } from '../messages';
 import { ContentType } from '../types';
 import assetFromEntryEditor from './fixtures/assetFromEntryEditor.json';
 import landingPageContentType from './fixtures/landingPageContentType.json';
@@ -152,8 +152,8 @@ describe('LiveUpdates', () => {
 
     await liveUpdates.receiveMessage({
       isInspectorActive: false,
-      action: LivePreviewPostMessageMethods.INSPECTOR_MODE_CHANGED,
-      method: LivePreviewPostMessageMethods.INSPECTOR_MODE_CHANGED,
+      action: InspectorModeEventMethods.INSPECTOR_MODE_CHANGED,
+      method: InspectorModeEventMethods.INSPECTOR_MODE_CHANGED,
       from: 'live-preview',
       source: LIVE_PREVIEW_EDITOR_SOURCE,
     });

diff --git a/packages/live-preview-sdk/src/__tests__/saveEvent.spec.ts b/packages/live-preview-sdk/src/__tests__/saveEvent.spec.ts
@@ -1,12 +1,12 @@
 import { Entry } from 'contentful';
 import { describe, beforeEach, vi, it, afterEach, Mock, expect } from 'vitest';
 
-import { getAllTaggedEntries } from '../fieldTaggingUtils';
 import { EntrySavedMessage, LivePreviewPostMessageMethods } from '../messages';
 import { SaveEvent } from '../saveEvent';
 import { ContentType } from '../types';
+import { getAllTaggedEntries } from '../inspectorMode/utils';
 
-vi.mock('../fieldTaggingUtils');
+vi.mock('../inspectorMode/utils');
 
 describe('SaveEvent', () => {
   const locale = 'en-US';
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,5 +3,4 @@ node_modules @@
     /.cache
     /build
     /public/build
-    /public/style.css
     .env