Comments, visuals and instructions updates to the cms-live-preview extension

Author: SvenAlHamad

extensions/cms-live-preview/6.0.x/extensions/livePreview/README.md

@@ -2,21 +2,54 @@
 
 With the Live Preview extension, you can instantly see changes in your content as you edit it. This extension provides a seamless experience for content creators, allowing them to visualize their work in real-time without needing to publish or refresh the page.
 
+## Install extension
+
+To install the extension run the following command inside your Webiny project:
+
+```shell
+yarn webiny extension cms-live-preview
+```
+
+Once installed make sure to configure your NextJs/NuxtJs/Angular frontend app to render the pages. To get started clone our reference nextjs app from here: https://github.com/webiny/learn-webiny-nextjs-app/tree/live-preview-ext
+Install the dependencies and run the dev server (`yarn dev`)
+
+
 ![Live Preview Demo](./screenshot.png)
 
-# Overview
+## Overview
 
 This extension consists of:
 
 - **Admin Interface**: a preview pane on the left side of the screen that updates in real-time as you edit content on the right side.
 - **Article Model**: a simple content model with a couple of fields
 
-The extension works with a Next.js app which you can clone and host locally.
+To add a live preview to an additional content model:
+1. Modify `~/extensions/livePreview/admin/AddPreviewPane.tsx` - fine the line below and add your model id to the list:
+```ts
+const LIVE_PREVIEW_MODEL_IDS = ["article", 'example'];
+```
 
-Clone the app from here: https://github.com/webiny/learn-webiny-nextjs-app/tree/live-preview-ext
+2. Modify `~/extensions/livePreview/admin/getPreviewUrl.ts` - modify the `previewPaths` and add the preview slug for your new content model:
+```ts
+const previewPaths: Record<string, string> = {
+	article: "/articles/preview",
+    example: "/examples/preview"
+};
+```
+At the same time also add the `slugPaths`:
+```ts
+const slugPaths: Record<string, string> = {
+	article: "/articles",
+	example: "/examples"
+};
+```
 
-Once cloned, install dependencies and run the development server:
+The `previewPaths` variable tell the live preview component - what path to use in your app to render the live preview iframe inside your app for this particular content model.
+The `slugPaths` is used together with the value of the `slug` field to compose a path for that entry. For example if we have `/test/path` as the value of the slug field in the example content model, the full slug will look like `/examples/test/path`, and that will be the route that your frontend app will need to handle to render this page.
 
-```bash
-yarn dev
-```
+3. Inside the same `~/extensions/livePreview/admin/getPreviewUrl.ts` file, also modify the `getDomain` function so it returns the live domain of your frontend app.
+
+
+## Questions
+
+In case of any questions, find us on our community forum: https://www.webiny.com/slack

extensions/cms-live-preview/6.0.x/extensions/livePreview/admin/AddPreviewPane.tsx

@@ -1,24 +1,34 @@
 import React from "react";
 import { PreviewPane } from "./PreviewPane";
-import { getPreviewUrl } from "./getPreviewUrl";
+import { getPreviewUrl, getDisplayUrl } from "./getPreviewUrl";
 import { ContentEntryForm } from "webiny/admin/cms/entry/editor";
 import { useModel } from "webiny/admin/cms";
 
+const LIVE_PREVIEW_MODEL_IDS = ["article"];
+
 export const AddPreviewPane = ContentEntryForm.createDecorator(Original => {
   return function ContentEntryForm(props) {
     const { model } = useModel();
 
-    if (model.modelId !== "article") {
+    if (!LIVE_PREVIEW_MODEL_IDS.includes(model.modelId)) {
+      return <Original {...props} />;
+    }
+
+    const previewUrl = getPreviewUrl(model.modelId, window.location.origin);
+
+    if (!previewUrl) {
       return <Original {...props} />;
     }
 
     return (
       <div
         data-role={"live-preview-pane"}
-        className="flex h-[calc(100vh-var(--spacing-header)-200px)]"
+        className="grid grid-cols-12 h-[calc(100vh-var(--spacing-header)-120px)]"
       >
-        <PreviewPane previewUrl={getPreviewUrl(window.location.origin)} />
-        <div className="flex-1 px-md">
+        <div className="col-span-6 xl:col-span-8 h-full">
+          <PreviewPane previewUrl={previewUrl} modelId={model.modelId} />
+        </div>
+        <div className="flex-1 ml-lg col-span-6 xl:col-span-4 h-full overflow-y-scroll">
           <Original {...props} />
         </div>
       </div>

extensions/cms-live-preview/6.0.x/extensions/livePreview/admin/LivePreviewEditor.ts

@@ -14,6 +14,7 @@ const getWindowObject = () => {
 
 /**
  * Decorate `useContentEntryForm` hook, and notify the Live Preview when changes happen.
+ * Also dispatches a custom event with the current slug so the PreviewPane can show it.
  */
 export const LivePreviewEditor = useContentEntryForm.createDecorator(baseHook => {
   return () => {
@@ -27,6 +28,17 @@ export const LivePreviewEditor = useContentEntryForm.createDecorator(baseHook =>
 
     useEffect(() => {
       updateLivePreview(hook.entry);
+
+      // Notify the PreviewPane of the current slug and entry ID.
+      const entry = hook.entry as Record<string, any>;
+      window.dispatchEvent(
+        new CustomEvent("wby:slugChange", {
+          detail: {
+            slug: entry?.values?.slug || "",
+            entryId: entry?.id || "",
+          },
+        })
+      );
     }, [hook.entry]);
 
     return hook;

extensions/cms-live-preview/6.0.x/extensions/livePreview/admin/PreviewPane.tsx

@@ -1,34 +1,74 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useCallback, useEffect } from "react";
 import { IconButton } from "webiny/admin/ui";
 import { Input } from "webiny/admin/ui";
 import { OverlayLoader } from "webiny/admin/ui";
+import { SegmentedControl } from "webiny/admin/ui";
 import { ReactComponent as RefreshIcon } from "webiny/admin/icons/refresh.svg";
+import { ReactComponent as ContentCopyIcon } from "webiny/admin/icons/content_copy.svg";
+import { ReactComponent as LaptopIcon } from "webiny/admin/icons/laptop.svg";
+import { ReactComponent as SmartphoneIcon } from "webiny/admin/icons/smartphone.svg";
+import { ReactComponent as OpenInNewIcon } from "webiny/admin/icons/open_in_new.svg";
+import { getDisplayUrl } from "./getPreviewUrl";
 
 export interface PreviewProps {
   previewUrl: string;
+  modelId: string;
 }
 
+type ViewportMode = "desktop" | "mobile";
+
 export const PreviewPane = (props: PreviewProps) => {
   const [loading, setLoading] = useState(true);
-  const [address, setAddress] = useState(props.previewUrl);
+  const [address, setAddress] = useState(getDisplayUrl(props.modelId) || props.previewUrl);
   const [previewUrl, setPreviewUrl] = useState(props.previewUrl);
+  const [viewport, setViewport] = useState<ViewportMode>("desktop");
+  const [entryId, setEntryId] = useState<string>("");
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
-  const reload = () => {
-    const iframe = iframeRef.current;
+  // Listen for slug and entryId changes dispatched by LivePreviewEditor.
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      const slug = detail?.slug as string | undefined;
+      const id = detail?.entryId as string | undefined;
+      const displayUrl = getDisplayUrl(props.modelId, slug);
+      if (displayUrl) {
+        setAddress(displayUrl);
+      }
+      if (id) {
+        setEntryId(id);
+      }
+    };
 
-    if (!iframe) {
-      return;
-    }
+    window.addEventListener("wby:slugChange", handler);
+    return () => window.removeEventListener("wby:slugChange", handler);
+  }, [props.modelId]);
+
+  const reload = useCallback(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
 
     setLoading(true);
     const newSrc = new URL(iframe.src ?? previewUrl);
     newSrc.searchParams.set("ts", Date.now().toString());
-
     iframe.src = newSrc.toString();
-  };
+  }, [previewUrl]);
 
-  const onLoadFinish = (e: any) => {
+  const copyUrl = useCallback(() => {
+    navigator.clipboard.writeText(address);
+  }, [address]);
+
+  const openInNewTab = useCallback(() => {
+    // Open with preview=true and id so the page fetches the draft version.
+    const url = new URL(address);
+    url.searchParams.set("preview", "true");
+    if (entryId) {
+      url.searchParams.set("id", entryId);
+    }
+    window.open(url.toString(), "_blank");
+  }, [address, entryId]);
+
+  const onLoadFinish = () => {
     setLoading(false);
   };
 
@@ -38,25 +78,82 @@ export const PreviewPane = (props: PreviewProps) => {
   };
 
   return (
-    <div className="relative flex flex-col border-r border-neutral-dimmed max-[960px]:hidden flex-1">
-      <div className={"flex items-center gap-sm py-sm pr-sm border-b border-neutral-dimmed"}>
-        <Input value={address} onChange={setAddress} onEnter={onEnter} size={"md"} />
-        <IconButton onClick={reload} icon={<RefreshIcon />} variant="ghost" size="md" />
+    <div className="relative border border-neutral-dimmed rounded-t-lg  flex flex-col max-[960px]:hidden flex-1 h-full overflow-y-scroll">
+      {/* Toolbar */}
+      <div className="flex p-md items-center p-md bg-white border-b border-neutral-dimmed">
+
+        {/* URL input */}
+        <div className="w-full border-neutral-dimmed p-xs rounded-lg">
+          <Input
+            value={address}
+            onChange={setAddress}
+            onEnter={onEnter}
+            size="md"
+            className={"bg-gray-100"}
+          />
+        </div>
+
+        {/* Copy & Reload */}
+        <div className="flex border-neutral-dimmed bg-white p-xs rounded-lg ml-2">
+          <div className="flex items-center gap-xxs">
+            {/* Open in new tab */}
+            <IconButton
+              onClick={openInNewTab}
+              icon={<OpenInNewIcon />}
+              variant="ghost"
+              size="md"
+            />
+
+            <IconButton
+              onClick={copyUrl}
+              icon={<ContentCopyIcon />}
+              variant="ghost"
+              size="sm"
+            />
+
+            <IconButton
+              onClick={reload}
+              icon={<RefreshIcon />}
+              variant="ghost"
+              size="sm"
+            />
+          </div>
+
+          {/* Desktop / Mobile toggle */}
+          <SegmentedControl
+            value={viewport}
+            onChange={(value: string) => setViewport(value as ViewportMode)}
+            items={[
+              { value: "desktop", label: "", icon: <LaptopIcon /> },
+              { value: "mobile", label: "", icon: <SmartphoneIcon /> },
+            ]}
+          />
+
+        </div>
       </div>
-      <div className="block box-border h-full w-full">
-        {loading ? <OverlayLoader text={"Connecting to Live Preview..."} /> : null}
-        <iframe
-          onLoad={onLoadFinish}
-          ref={ref => {
-            iframeRef.current = ref;
+
+      {/* Preview iframe */}
+      <div className="block box-border h-full w-full overflow-auto">
+        {loading ? <OverlayLoader text="Connecting to Live Preview..." /> : null}
+        <div
+          className="mx-auto h-full transition-all duration-300 p-md bg-white"
+          style={{
+            width: viewport === "mobile" ? "375px" : "100%",
           }}
-          id={"live-preview-iframe"}
-          sandbox={"allow-same-origin allow-scripts allow-forms"}
-          src={previewUrl}
-          width="100%"
-          height="100%"
-          className="h-full"
-        />
+        >
+          <iframe
+            onLoad={onLoadFinish}
+            ref={(ref) => {
+              iframeRef.current = ref;
+            }}
+            id="live-preview-iframe"
+            sandbox="allow-same-origin allow-scripts allow-forms"
+            src={previewUrl}
+            width="100%"
+            height="100%"
+            className="h-full"
+          />
+        </div>
       </div>
     </div>
   );

extensions/cms-live-preview/6.0.x/extensions/livePreview/admin/getPreviewUrl.ts

@@ -1,5 +1,33 @@
-const domain = "http://localhost:3000";
+/**
+ * This function returns the domain name where the live preview app runs.
+ * If you are running Webiny locally it will return http://localhost:3000
+ * If you're currently accessing Webiny from a live domain, it should return the url to your live frontend application.
+ * NOTE: modify the todo line with your live domain info.
+ */
+const getDomain = () => {
+  if (window.location.hostname === "localhost") {
+    return "http://localhost:3000";
+  }
+  // todo: put your live domain here
+  return "http://localhost:3000";
+};
+
+const previewPaths: Record<string, string> = {
+  article: "/articles/preview"
+};
+
+const slugPaths: Record<string, string> = {
+  article: "/articles"
+};
+
+export const getPreviewUrl = (modelId: string, editorOrigin: string) => {
+  const path = previewPaths[modelId];
+  if (!path) return null;
+  return `${getDomain()}${path}?origin=${editorOrigin}`;
+};
 
-export const getPreviewUrl = (editorOrigin: string) => {
-  return `${domain}/articles/preview?origin=${editorOrigin}`;
+export const getDisplayUrl = (modelId: string, slug?: string) => {
+  const basePath = slugPaths[modelId];
+  if (!basePath) return null;
+  return `${getDomain()}${basePath}/${slug || ""}`;
 };