fix: #3002

[Lenghak]

Description

Please see some more information in the #3002 .

[changeset-bot]

🦋 Changeset detected

Latest commit: 74c1c04

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@udecode/plate-cloud	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
plate	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 1, 2024 10:13am

[Lenghak]

[Update: Fri - March 1st, 2024]:

TL;DR

Use CSR (client side rendering) for editor and its plugin to resolve the issue since the package @portive/client is not accessible for SSR which will try to run the code on the server.

For portive cloud API_KEY exposed on the client as the result of using full CSR, please visit: https://www.portive.com/docs/auth/intro#about-using-auth-tokens

Details

I have just forked the plate-next-template in Codesandbox to test out the plate-cloud behavior. After comparing the Next.Js code with Astro, I have come to a few conclusions.

In my project, which is based on Astro, I am implementing SSR (Server-Side Rendering) to render the editor on the client. This means that the configuration and plugins run on the server along with the HTML before shipping some JS to the client to initialize the editor. Each time I run the command from the plate component, I always remove 'use-client' from the code and rely on the .astro file to specify where the code will render.

---
import RootLayout from "@/common/layouts/root-layout.astro";
import WriteEditor from "@/modules/write/composites/write-editor";
---

<RootLayout title="Le-Insight | Write">
  <WriteEditor client:load />
</RootLayout>

However, the @portive/client package is not accessible on the server, causing some errors related to commonJs and esm, regardless of my already configured esm setting in tsconfig.

After conducting some simple inspections that I missed the last time before creating this PR, I have decided to render the editor with its plugins on the client-side.

---
import RootLayout from "@/common/layouts/root-layout.astro";
import WriteEditor from "@/modules/write/composites/write-editor";
---

<RootLayout title="Le-Insight | Write">
  <WriteEditor client:only="react" />
</RootLayout>

Everything works as expected, rendering this PR POINTLESS. (My sincere apologies for my immature knowledge)

However, we are still facing another problem since our API key for Portive Cloud is exposed on the client-side. The solution provided by Portive Cloud is to use @portive/auth as an additional tool to generate an AUTH_TOKEN instead of using the exposed API_KEY on the client. Please see the summary below:

createCloudPlugin({
  options: {
    authToken: async () => {
      const response = await fetch("https://mysite.com/api/get-auth", {
        method: "POST",
      })
      const json = await response.json()
      return json.authToken
    },
  },
})

For more information, please visit: https://www.portive.com/docs/auth/intro#about-using-auth-tokens

To the maintainer: Regarding this PR, you can consider closing it since my solution of changing the import does not actually fix the problem for everyone's project. Thank you.

[zbeyens]

Thanks for the PR!