Prismic Toolbar questions

[joe.kent]

Hello!

Our team recently spun up a new NextJS project that uses the latest versions of @prismicio/react and @prismicio/next, but we have a few questions about Prismic Toolbar.

There is no edit button as advertised

We are able to see the preview toolbar successfully, but we do not see the "Edit" button that is shown on the Prismic marketing site.

Our website:

Prismic marketing website:

I also noticed in the Prismic NextJS Youtube tutorial that is embedded on this documentation page, the edit button is not visible here either.

Can someone clarify if the Prismic website does not accurately depict the state of Prismic Toolbar, or are the tutorials missing a step? I read this thread in the Prismic Community but it does not seem like the explanations given pertain to our application.

Why is the Prismic Toolbar taking screenshots?

In poking at the Prismic Toolbar Github repository, I noticed there was code to screenshot a page and upload it to Amazon S3. Can someone from the Prismic team explain what is happening here?

Why does the Prismic Toolbar not use versions or hash integrity?

The Prismic Toolbar Github repository explicitly calls out that it switched from being an npm package to a CDN hosted script,

Isn't anymore on npm. Include script static.cdn.prismic.io/prismic.min.js instead

This script then gets dynamically loaded on the page by @prismicio/react.

I would like to better understand why the Prismic team chose to do this. From my perspective, not having versions makes the Prismic Toolbar much riskier, as you can ship an update directly to our production website that inadvertently breaks something, whereas with versioned updates we can bring them into our application at our own pace. There are many other well documented risks with using a CDN over a versioned package, and it's just odd given the rest of the Prismic ecosystem is a versioned package.

Additionally, the CDN script tag you're constructing does not abide by common security standards such as integrity hashes. You can see this used by popular libraries such as Bootstrap,

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

[joe.kent]

Hi @Pau -- any chance a developer from Prismic could respond these questions?

[Pau]

Hello @joe.kent, I'll ask the team and come back as soon as I have more information

[Pau]

Hey @joe.kent, the team responded:

Q1: The edit button should appear in your editable pages. There's an existing thread about this that you can check out here, if you're using NextJS. Whi

Q2: The screenshots are used for shareable previews

Q3: I believe a CDN was chosen to keep the toolbar up-to-date with changes in the backend.
At the moment there are no plans to modify this.

[dan.duett]

Hi, @Pau! Could you expand a bit on your answers?

• Your answer to Q1 looks like it might've been cut short (screenshot) and the thread that you linked to is one that we've already reviewed (@joe.kent linked to it in his original message). It also doesn't seem to apply to us give that we're using SSR rather than SSG. Does Prismic have documentation on how to get this working as expected?
• Your answer to Q2 doesn't make sense to us (not yet, anyway): shareable previews are links, not screenshots, right? Does Prismic have documentation showing exactly how this screenshot function works?
• Your answer to Q3 helps explain why using a CDN helps Prismic but it doesn't do much/anything to allay our concerns around versioning/reliability/control/security. If your team has any deeper perspective to share, we'd love to hear it.

@joe.kent put together a thoughtful set of questions and we're hoping that they can get an equally thoughtful set of answers. Thank you in advance for any additional perspective/support your team can provide!

[angeloashmore]

Hey Joe and Dan,

I’m Angelo, the maintainer of @prismicio/next and @prismicio/react. I’ll do my best to answer your questions below, but let me know if you would like me to expand on any point.

1. There is no edit button as advertised

The edit button is a simple way to navigate from a website’s page to a Prismic document holding that page’s content. To determine which pages to include in the Edit Button’s documents list, the toolbar listens to network requests made to the Prismic API. If your page queries content from an about-us Page document, for example, the toolbar knows to list that as an editable document for the page.

When using Next.js, however, queries to the Prismic API are not made in the browser. Instead, queries are usually done on the server where Prismic Toolbar does not have visibility. As a result, the edit button is not aware of any pages to list, thus it does not appear. This is a limitation of Prismic Toolbar when used with any static or server-based site.

We have ideas on how to support these use cases, such as allowing developers to declare which pages appear on the page via <meta> elements. An initial proof-of-concept implementation of that idea is available to reference here: View PR on GitHub. There is no estimate on when this will be implemented, but your support and need for the feature will help push the feature forward.

Unfortunately, there currently is not an officially supported way to integrate the Edit button on sites built with Next.js or any other static or server-based site. If the Edit Button is crucial to your and your content managers’ workflow, there is a workaround, which is described in the link Pau posted.

Workaround: The toolbar needs to see a client-side request to the Prismic API. If you can re-execute a query containing the Prismic documents on the page in the client, the toolbar should detect the request and the Edit Button should list the documents. This will negatively affect overall site performance and isn’t necessarily recommend, but it is a strategy that will work.

2. Why is the Prismic Toolbar taking screenshots?

This may be an old feature that is no longer used (full disclosure: this code predates my time at Prismic). The toolbar takes a screenshot of the page using html2canvas when a user clicks the “Get a sharable link” button. The toolbar uploads that screenshot to a Prismic-owned S3 bucket. The screenshot is not used in the toolbar or shown when sharing links.

I’ll ask our team if they can provide more background on the purpose of the screenshot. From my understanding, however, it is not used anywhere.

3. Why does the Prismic Toolbar not use versions or hash integrity?

Using a version-less <script> element over a version-specific npm package or a version-specific CDN URL lets us push crucial updates to sites without developer involvement. There certainly is a tradeoff in this approach: allowing us to push updates without your involvement may introduce bugs to a production site. Conversely, we can push bug fixes as soon as they are ready, rather than asking developers to update all of their projects manually.

The package was previously published to npm, but was converted to the <script> -oriented strategy due to low upgrade adoption. When bug fixes or new features were released, developers were not updating their sites to the latest version. Thus, loading the latest version of the toolbar automatically via a <script> element was the solution.

The Prismic Toolbar is treated as an extension of the core Prismic product. We deploy upgrades and new features for Prismic and the toolbar to production after internal QA and testing. The full toolbar is only loaded and made visible when logged in to Prismic or loading a shared preview. Any changes to the toolbar code should only affect “internal” visitors of the site.

Some trust between Prismic and developers is required to use this strategy. Yes, we will push updates to code loaded on your site, similar to analytics software or third-party embeds like YouTube. We ensure that a visitor’s experience is not affected by the toolbar’s code. If you disagree with this approach, we can definitely continue this conversation and come up with improvements.

---

I hope that was helpful. Again, feel free to reach out if you have additional questions or need clarification on anything I described above.

[joe.kent]

Thank you @angeloashmore !

[angeloashmore]

You're welcome, @joe.kent!

Here's a small follow-up on the screenshot question:

The screenshot is used as a preview image for the sharable preview link via an OpenGraph image. It is only visible when sharing the link on platforms that support OpenGraph images (e.g. Discord, Twitter, Facebook).

To be totally transparent, the screenshot feature is not always successful since it uses html2canvas. That library has limitations since it tries to simulate a rendering engine via the HTML Canvas API rather than a full rendering engine like Chrome. You may not see a screenshot if you test this feature yourself.