Merge pull request #324 from pantheon-systems/ag/pcc-1699/iframe-prev…

…iew-sdk-updates

[PCC 1699] Deprecate injected preview bar

.changeset/plenty-rice-cheer.md

@@ -0,0 +1,6 @@
+---
+"@pantheon-systems/pcc-react-sdk": minor
+---
+
+The injected preview bar is deprecated in favor of the integrated preview bar in
+the dashboard preview interface

packages/react-sdk/package.json

@@ -103,12 +103,8 @@
   "dependencies": {
     "@apollo/client": "^3.10.3",
     "@pantheon-systems/pcc-sdk-core": "workspace:*",
-    "framer-motion": "^10.18.0",
-    "goober": "^2.1.14",
     "graphql": "^16.8.1",
     "lodash": "^4.17.21",
-    "query-string": "^8.2.0",
-    "react-laag": "^2.0.5",
     "react-markdown": "^8.0.7",
     "rehype-raw": "^6.1.1",
     "remark-heading-id": "^1.0.1",

packages/react-sdk/src/components/ArticleRenderer/index.tsx

@@ -6,9 +6,7 @@ import {
 } from "@pantheon-systems/pcc-sdk-core/types";
 import { Element } from "hast";
 import React, { useEffect } from "react";
-import { createPortal } from "react-dom";
 import { getTextContent } from "../../utils/react-element";
-import { PreviewBar, PreviewBarExternalProps } from "../Preview/Preview";
 import MarkdownRenderer from "./Markdown";
 import PantheonTreeRenderer from "./PantheonTreeRenderer";
 import PantheonTreeV2Renderer from "./PantheonTreeV2Renderer";
@@ -52,7 +50,6 @@ interface Props {
     content: string,
   ) => React.ReactNode;
   smartComponentMap?: SmartComponentMap;
-  previewBarProps?: PreviewBarExternalProps;
   componentMap?: ComponentMap;
   renderBody?: (bodyElement: React.ReactElement) => React.ReactNode;
   __experimentalFlags?: {
@@ -63,36 +60,17 @@ interface Props {
   };
 }
 
-function getOrCreatePortalTarget(
-  targetOverride: globalThis.Element | null | undefined,
-) {
-  const pccGeneratedPortalTargetKey = "__pcc-portal-target__";
-  let portalTarget =
-    targetOverride || document.getElementById(pccGeneratedPortalTargetKey);
-
-  if (!portalTarget) {
-    portalTarget = document.createElement("div");
-    portalTarget.id = pccGeneratedPortalTargetKey;
-    document.body.prepend(portalTarget);
-  }
-
-  return portalTarget;
-}
-
 const ArticleRenderer = ({
   article,
   bodyClassName,
   containerClassName,
   headerClassName,
   renderTitle,
   smartComponentMap,
-  previewBarProps,
   componentMap,
   renderBody,
   __experimentalFlags,
 }: Props) => {
-  const [renderCSR, setRenderCSR] = React.useState(false);
-
   useEffect(() => {
     if (__experimentalFlags?.useUnintrusiveTitleRendering !== true) {
       console.warn(
@@ -101,33 +79,15 @@ const ArticleRenderer = ({
     }
   }, [__experimentalFlags]);
 
-  useEffect(() => {
-    setRenderCSR(true);
-  }, []);
-
   if (!article?.content) {
     return null;
   }
 
-  const portalTarget =
-    renderCSR && typeof document !== "undefined"
-      ? getOrCreatePortalTarget(previewBarProps?.portalTarget)
-      : null;
   const contentType = article?.contentType;
 
   if (contentType === "TEXT_MARKDOWN") {
     return (
       <div className={containerClassName}>
-        {renderCSR &&
-        article != null &&
-        portalTarget != null &&
-        article.publishingLevel === "REALTIME"
-          ? createPortal(
-              <PreviewBar {...previewBarProps} article={article} />,
-              portalTarget,
-            )
-          : null}
-
         {article?.content ? (
           <MarkdownRenderer
             smartComponentMap={smartComponentMap}
@@ -202,16 +162,6 @@ const ArticleRenderer = ({
 
   return (
     <div className={containerClassName}>
-      {renderCSR &&
-      article != null &&
-      portalTarget != null &&
-      article.publishingLevel === "REALTIME"
-        ? createPortal(
-            <PreviewBar {...previewBarProps} article={article} />,
-            portalTarget,
-          )
-        : null}
-
       {titleElement != null ? (
         <div className={headerClassName}>
           {renderTitle