Getting editor config in the frontend

[goodboyaloy]

I'm building a rich text editor (lexical) outside of admin, but within the same project. I am looking to re-use the editor config defined in payload.config.ts.

Going through the repo, I figured a way to do this would be to:

1. Get payloadConfig
2. Use editorConfigFactory to get editorConfig (from @payloadcms/richtext-lexical)
3. Use getEnabledNodes (from @payloadcms/richtext-lexical)
4. Create lexical editor config using the nodes (InitialConfigType)

import { getEnabledNodes, editorConfigFactory } from '@payloadcms/richtext-lexical'
import payloadConfig from '@/payload.config'

async function RichText(...) {
  const config = await payloadConfig
  const editorConfig = await editorConfigFactory.default({ config })
  const nodes = getEnabledNodes({ editorConfig })

  const initialConfig : InitialConfigType = {
    ...
    nodes,
  }

  return <LexicalComposer initialConfig={initialConfig}/>
}

But it seems I can't do it this way, because of a build error:

Module not found: Can't resolve 'fs'
  2 | Object.defineProperty(exports, "__esModule", { value: true });
  3 | exports.types = exports.setConcurrency = exports.disableTypes = exports.disableFS = exports.imageSize = void 0;
> 4 | const fs = require("fs");
    | ^
  5 | const path = require("path");
  6 | const queue_1 = require("queue");
  7 | const index_1 = require("./types/index");

Any ideas on how I could achieve this?