@payloadcms/richtext-lexical: creating lexical nodes in server environment, getting error

[onvlt]

I'm converting HTML from legacy website into lexical editor state in Node script. I was successful in mapping some components into BlockNode with $createServerBlockNode:

import { createHeadlessEditor } from "@lexical/headless";
import { $createServerBlockNode, ServerBlockNode } from "@payloadcms/richtext-lexical";
import { $getRoot } from "lexical";

const editor = createHeadlessEditor({
	nodes: [ServerBlockNode],
});

editor.update(
	() => {
		const root = $getRoot();
		const figure = $createServerBlockNode({
			blockName: "figure",
			blockType: "figure",
		});
		root.append(figure);
	},
	{ discrete: true },
);

console.log(editor.getEditorState().toJSON());

However, there are no such server equivalents for other built-in nodes like, for example, LinkNode. There's $createLinkNode in "@payloadcms/richtext-lexical/client", but when I attempt to import this module, I get following error:

import { $createLinkNode } from "@payloadcms/richtext-lexical/client";

node:internal/modules/esm/get_format:183
  throw new ERR_UNKNOWN_FILE_EXTENSION(ext, filepath);
        ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /project/node_modules/.pnpm/[email protected][email protected]/node_modules/react-image-crop/dist/ReactCrop.css
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:183:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:209:36)
    at defaultLoad (node:internal/modules/esm/load:119:22)
    at async ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:519:32) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

I'm not sure whether this is bug or not. Since I'm importing client module, I suppose it's intended for bundlers. On the other hand, there are no server-side equivalents like $createServerLinkNode or something.

I suppose that LinkNode itself is not client dependent since it does not have sever node variant of itself. But something else that is imported or reexported in @payloadcms/richtext-lexical/client is, which causes trouble.

[onvlt]

For context, there's simplified version of my function that converts HTML to serialized editor state:

import { $getRoot, $getSelection } from "lexical";
import { createHeadlessEditor } from "@lexical/headless";
import { $createServerBlockNode, LinkNode, ServerBlockNode } from "@payloadcms/richtext-lexical";
import { JSDOM } from "jsdom";
import { $generateNodesFromDOM } from "@lexical/html";

// ↓ This causes error 💣💥
import { $createLinkNode } from "@payloadcms/richtext-lexical/client";

const BASE_URL = "https://example.com";

function htmlToLexical(html: string) {
	const editor = createHeadlessEditor({
		nodes: [ServerBlockNode, LinkNode],
		html: {
			import: {
				figure: () => ({
					conversion(element) {
						const imageElement = element.querySelector("img");
						const captionElement = element.querySelector("figcaption");
						const node = $createServerBlockNode({
							blockName: "figure",
							blockType: "figure",
							imageSrc: imageElement?.src,
							caption: captionElement?.textContent,
						});
						return { node };
					},
				}),
				a: () => ({
					priority: 1,
					conversion(element) {
						// Some preparation/processing/validation logic
						const anchorElement = element as HTMLAnchorElement;
						const url = new URL(anchorElement.href, BASE_URL);
						const node = $createLinkNode({
							fields: {
								linkType: "custom",
								newTab: anchorElement.target === "_blank",
								url: url.toString(),
							},
						});
						return { node };
					},
				}),
			},
		},
	});

	editor.update(
		() => {
			const dom = new JSDOM(html);
			const nodes = $generateNodesFromDOM(editor, dom.window.document);
			$getRoot().select();
			const selection = $getSelection();
			if (selection === null) {
				throw new Error("Selection is null");
			}
			selection.insertNodes(nodes);
		},
		{ discrete: true },
	);

	return editor.getEditorState().toJSON();
}

console.log(
	JSON.stringify(
		htmlToLexical(`
	<p><a href="/">Home</a>
	<figure>
		<img src="image.webp" />
		<figcatption>
			Nice image
		</figcaption>
	</figure>
`),
		null,
		2,
	),
);