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

contentful · Nov 7, 2023 · 89953b0 · 89953b0
1 parent 34f699e
commit 89953b0
Show file tree

Hide file tree

Showing 24 changed files with 137 additions and 225 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/package.json b/packages/live-preview-sdk/package.json
@@ -11,8 +11,7 @@
   "type": "module",
   "files": [
     "dist",
-    "react",
-    "style.css"
+    "react"
   ],
   "exports": {
     ".": {
@@ -24,10 +23,6 @@
       "import": "./dist/react.js",
       "require": "./dist/react.cjs",
       "types": "./dist/react.d.ts"
-    },
-    "./style.css": {
-      "import": "./dist/style.css",
-      "require": "./dist/style.css"
     }
   },
   "repository": {

diff --git a/packages/live-preview-sdk/src/constants.ts b/packages/live-preview-sdk/src/constants.ts
@@ -1,13 +1,3 @@
-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;
-export const TOOLTIP_PADDING_LEFT = 5;
-
 export const MAX_DEPTH = 10;
 
 export const LIVE_PREVIEW_EDITOR_SOURCE = 'live-preview-editor' as const;

diff --git a/packages/live-preview-sdk/src/fieldTaggingUtils.ts b/packages/live-preview-sdk/src/fieldTaggingUtils.ts
@@ -1,12 +1,40 @@
 import { TagAttributes } from './types';
 
+/**
+ * Parses the necessary information from the element and returns them.
+ * If **one** of the information is missing it returns null
+ */
+export function getTaggedInformation(
+  element: Element,
+  fallbackLocale?: string
+): { fieldId: string; entryId: string; locale: string } | null {
+  const fieldId = element.getAttribute(TagAttributes.FIELD_ID);
+  const entryId = element.getAttribute(TagAttributes.ENTRY_ID);
+  const locale = element.getAttribute(TagAttributes.LOCALE) ?? fallbackLocale;
+
+  if (!fieldId || !entryId || !locale) {
+    return null;
+  }
+
+  return { fieldId, entryId, locale };
+}
+
+/**
+ * Query the document for all tagged elements
+ * **Attention:** Can include elements that have not all attributes,
+ * if you want to have only valid ones check for `getTaggedInformation`
+ */
+export function getAllTaggedElements(): Element[] {
+  return [...document.querySelectorAll(`[${TagAttributes.ENTRY_ID}]`)];
+}
+
 /**
  * Returns a list of tagged entries on the page
  */
 export function getAllTaggedEntries(): string[] {
   return [
     ...new Set(
-      [...document.querySelectorAll(`[${TagAttributes.ENTRY_ID}]`)]
+      getAllTaggedElements()
         .map((element) => element.getAttribute(TagAttributes.ENTRY_ID))
         .filter(Boolean) as string[]
     ),

diff --git a/packages/live-preview-sdk/src/index.ts b/packages/live-preview-sdk/src/index.ts
@@ -1,5 +1,3 @@
-import './styles.css';
-
 import { type DocumentNode } from 'graphql';
 
 import { version } from '../package.json';
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,5 +3,4 @@ node_modules @@
     /.cache
     /build
     /public/build
-    /public/style.css
     .env