Slice simulator has 100vh in its wrapper div

Currently, the wrapping div of each slice simulator component has a 100vh (I can't link to URLs for some reason, but but the styling is defined in this path within the slice simulator repo - packages/adapter-next/src/simulator/SliceSimulator.tsx) which means that if a component is shorter than 100vh, it will have white space in its live preview.

There is also no straightforward way to remove that unless I overwrite the CSS by default. I think this should be removed to allow for shorter components to be previewed correctly

1 Like

I have noticed this as well. It's not particularly bothersome for me as I just get creative with my screenshots when making slice thumbnails. Luckily, this is developer-facing rather than client-facing.

It is client-facing if you have live-editing enabled within the new editor

Ah, yes. I forgot about that. Honestly, I rarely rely on the live previews in the New Page Builder. 50/50 if they'll say "error" or not be available to content relationships.

Hey @kris,

Do you mean in the simulator interface in Slice Machine (slice-machine-ui), or the simulator generated in your app (@prismicio/next)?

Could I ask you to open an issue on the relevant GitHub repo?

Our devtools team actively monitors and addresses issues there, so you'll get a better response than I can offer :sweat_smile:

Sam

@angeloashmore

Hey @kris, the simulator and page builder should be smart enough to know the height of the slice, even when smaller than 100vh.

Here is a screenshot of it working using the Prismic multi-page starter:

I believe height detection was added to the simulator within the last year. Could you ensure you are using the latest versions of the @slicemachine/* packages?

In case your project is using the deprecated @prismicio/slice-simulator-react package, check out this migration guide: @prismicio/slice-simulator-react Deprecation Guide - Documentation - Prismic

Hey @angeloashmore,

Thanks for the reply. Unfortunately, this is not what we are seeing within our live editor dashboard - every component smaller than 100vh has a white bar below it. I think we are using the latest packages:

"@slicemachine/adapter-next": "^0.3.34",
"slice-machine-ui": "^1.23.1",

Where within the slice machine code is the logic to detect if a slice is smaller than 100vh and adjust the styling?

@kris1 It's appears throughout the prismicio/slice-simulator code. You can find references to it with this search link:

https://github.com/search?q=repo%3Aprismicio%2Fslice-simulator%20SliceZoneSize&type=code

The editor's code is private and I cannot share a link to it, but it essentially hooks into slice-simulator's event system and resizes the iframes when it receives a "size change" event.

If the height is not adapting correctly, it's possible an old version of the simulator is being used.

I know you checked that you have the latest Next.js adapter and Slice Machine versions, but could you confirm that your /slice-simulator page is using @slicemachine/adapter-next/simulator rather than @prismicio/slice-simulator-react?

1 Like

Hey @angeloashmore, I can confirm that. Here's a copy/paste of my component:

import React from 'react';
import { SliceSimulator } from '@slicemachine/adapter-next/simulator';
import { SliceZone } from '@prismicio/react';

import { components } from '@/slice-machine/slices';

const SliceSimulatorPage = (): React.ReactNode => {
  // eslint-disable-next-line react/no-unstable-nested-components
  return <SliceSimulator sliceZone={props => <SliceZone {...props} components={components as any} />} />;
};

export default SliceSimulatorPage;

@angeloashmore @samlittlefair while I have you - is there a way to expose a cookie or a variable to detect if we are currently within the slice simulator? If I go within the live editor preview, I always get the cookie popup which means that the live preview within the new editor is unusable :(

Hey!

This should work better now, since we resolved an issue surrounding that last week, if you’re talking about errors where link fields link to other Prismic documents.

All the best
Samuel

Hey Kris!

I’ll provide an alternate solution I use for prismic.io. Of course it depends a bit on how you load your cookie modal.

But in my case I have a provider to handle that and the loading of my analytics libraries.

In that provider, I check if I am on the route /slice-simulator, and if so I don’t load show the cookie modal.

All the best
Samuel

Hey @samuelhorn, thanks for the answers. My scripts are loaded inside _document.jsx - I assume I'd need to move those to my _app.js?

Could you share a code snippet of your provider?

Ah, it's not on app router?

Should not matter to much though, since these parts should translate to pages router pretty easy I think.

Anyways, I'll try to outline the important parts for you, it might get a bit messy since it's a lot of code I'm just trying to extract the important pieces from :slight_smile: So just tell me if something is unclear.

In my ./app/layout.tsx I wrap the children with my global provider like:

import { Providers } from "@/components/partials";
...

<Providers>
    {children}
</Providers>

Then in the ./components/partials/Providers.tsx, which is a client component, among other providers I have the Prismic analytics provider:

"use client";

import { PrismicAnalytics } from "@/lib/context/analytics";
...

<PrismicAnalytics
    usercentricsSettingId={process.env.NEXT_PUBLIC_USERCENTRICS_SETTING_ID!}
    segmentWriteKey={process.env.NEXT_PUBLIC_SEGMENT_WRITE_KEY!}
    debug={process.env.NODE_ENV === "development"}
>
    {children}
</PrismicAnalytics>

Then in ./lib/context/analytics.tsx, just before I return the provider (where I also load UC scripts for the cookie popup), I check if we are on /slice-simulator, and just return the children without the context.

...
const currentPath = usePathname();
const isSimulator = currentPath?.startsWith("/slice-simulator");

// Dont load scripts if we're in slice simulator
if (isSimulator) {
    debug && console.log("Slice simulator detected, not loading provider.");
    return <div>{children}</div>;
}

return (
    <AnalyticsContext.Provider
      value={{
        analytics,
        segmentPageEvent,
        segmentTrackEvent,
        segmentCtaEvent,
        segmentFormEvent,
        consentData,
      }}
    >
      <>
        <Script
          id="usercentrics-cmp"
          data-settings-id={usercentricsSettingId}
          data-version={
            process.env.NEXT_PUBLIC_NODE_ENV === "development" ? "preview" : ""
          }
          src="https://app.usercentrics.eu/browser-ui/latest/loader.js"
          async
        />
        <Script
          type="application/javascript"
          src="https://privacy-proxy.usercentrics.eu/latest/uc-block.bundle.js"
        />
        {children}
      </>
    </AnalyticsContext.Provider>
);
...

The same goes for the usePrismicAnalytics hook exported from the same file, where I just dont provide the exported events, to avoid errors in slices using this context for tracking, but the provider is not present because we're in slice simulator:

...
// Create an analytics hook that we can use with other components.

export const usePrismicAnalytics = () => {
  const result = useContext(AnalyticsContext);
  const currentPath = usePathname();

  const isSimulator = currentPath?.startsWith("/slice-simulator");

  if (isSimulator) {
    return {
      analytics: null,
      segmentPageEvent: () => {},
      segmentTrackEvent: () => {},
      segmentCtaEvent: () => {},
      segmentFormEvent: () => {},
      consentData: null,
    };
  }

  if (!result) {
    throw new Error("Context used outside of its Provider!");
  }

  return result;
};
...