Skip to content

Commit

Permalink
feat(inspectorMode): move inspectorMode outlines on top of the iframe []
Browse files Browse the repository at this point in the history
  • Loading branch information
chrishelgert committed Nov 14, 2023
1 parent 34f699e commit af1e72a
Show file tree
Hide file tree
Showing 30 changed files with 325 additions and 310 deletions.
26 changes: 1 addition & 25 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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' })}>
Expand Down Expand Up @@ -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';
Expand All @@ -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';
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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 }) => (
Expand All @@ -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 }) => (
Expand Down Expand Up @@ -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';

Expand Down
1 change: 0 additions & 1 deletion examples/gatsby/gatsby-browser.tsx
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/gatsby/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion examples/next-13-app-router-graphql/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'] });

Expand Down
10 changes: 6 additions & 4 deletions examples/next-13-app-router-graphql/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
2 changes: 0 additions & 2 deletions examples/next-13-app-router-ssr/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down
2 changes: 1 addition & 1 deletion examples/next-13-app-router-ssr/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
1 change: 0 additions & 1 deletion examples/nextjs-graphql/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
2 changes: 1 addition & 1 deletion examples/nextjs-rest/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion examples/nextjs-rest/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down
1 change: 0 additions & 1 deletion examples/remix/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,4 @@ node_modules
/.cache
/build
/public/build
/public/style.css
.env
1 change: 0 additions & 1 deletion examples/remix/app/root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ export default function App() {
<head>
<Meta />
<Links />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<main>
Expand Down
7 changes: 3 additions & 4 deletions examples/remix/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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"
}
}
12 changes: 0 additions & 12 deletions examples/vanilla-js/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
5 changes: 0 additions & 5 deletions examples/vanilla-js/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion examples/vanilla-js/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
10 changes: 0 additions & 10 deletions packages/live-preview-sdk/src/constants.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
14 changes: 0 additions & 14 deletions packages/live-preview-sdk/src/fieldTaggingUtils.ts

This file was deleted.

1 change: 1 addition & 0 deletions packages/live-preview-sdk/src/helpers/pollUrlChanges.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// TODO: instead of polling could we use MutationObserver to check for dom changes and then compare URL's
export function pollUrlChanges(callback: (newUrl: string) => void, interval = 500): () => void {
let initialUrl = window.location.href;

Expand Down
4 changes: 2 additions & 2 deletions packages/live-preview-sdk/src/helpers/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ export function sendMessageToEditor(
data: EditorMessage,
targetOrigin: string[]
): void {
const message: MessageFromSDK = {
const message = {
...data,
method,
from: 'live-preview',
source: LIVE_PREVIEW_SDK_SOURCE,
location: window.location.href,
version,
};
} as MessageFromSDK;

debug.log('Send message', message);

Expand Down
35 changes: 17 additions & 18 deletions packages/live-preview-sdk/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import './styles.css';
import { type DocumentNode } from 'graphql';

import { version } from '../package.json';
import { getAllTaggedEntries } from './fieldTaggingUtils';
import {
sendMessageToEditor,
pollUrlChanges,
Expand All @@ -13,24 +12,20 @@ import {
} from './helpers';
import { isValidMessage } from './helpers/validateMessage';
import { InspectorMode } from './inspectorMode';
import { type InspectorModeTags, InspectorModeDataAttributes } from './inspectorMode/types';
import { getAllTaggedEntries } from './inspectorMode/utils';
import { LiveUpdates } from './liveUpdates';
import {
ConnectedMessage,
EditorMessage,
type ConnectedMessage,
type EditorMessage,
type MessageFromEditor,
type PostMessageMethods,
type UrlChangedMessage,
LivePreviewPostMessageMethods,
MessageFromEditor,
PostMessageMethods,
UrlChangedMessage,
openEntryInEditorUtility,
} from './messages';
import { SaveEvent } from './saveEvent';
import {
Argument,
InspectorModeTags,
LivePreviewProps,
SubscribeCallback,
TagAttributes,
} from './types';
import type { Argument, LivePreviewProps, SubscribeCallback } from './types';

export const VERSION = version;

Expand Down Expand Up @@ -156,14 +151,18 @@ export class ContentfulLivePreview {
LivePreviewPostMessageMethods.URL_CHANGED,
{
action: LivePreviewPostMessageMethods.URL_CHANGED,
taggedElementCount: document.querySelectorAll(`[${TagAttributes.ENTRY_ID}]`).length,
taggedElementCount: document.querySelectorAll(
`[${InspectorModeDataAttributes.ENTRY_ID}]`
).length,
} as UrlChangedMessage,
this.targetOrigin
);
});

// tell the editor that there's a SDK
const taggedElementCount = document.querySelectorAll(`[${TagAttributes.ENTRY_ID}]`).length;
const taggedElementCount = document.querySelectorAll(
`[${InspectorModeDataAttributes.ENTRY_ID}]`
).length;
sendMessageToEditor(
LivePreviewPostMessageMethods.CONNECTED,
{
Expand Down Expand Up @@ -234,9 +233,9 @@ export class ContentfulLivePreview {
}

return {
[TagAttributes.FIELD_ID]: fieldId,
[TagAttributes.ENTRY_ID]: entryId,
[TagAttributes.LOCALE]: locale,
[InspectorModeDataAttributes.FIELD_ID]: fieldId,
[InspectorModeDataAttributes.ENTRY_ID]: entryId,
[InspectorModeDataAttributes.LOCALE]: locale,
};
}

Expand Down
Loading

0 comments on commit af1e72a

Please sign in to comment.