TextColorFeature not working

[jlole]

Status

I have added TextColorFeature to the editor and imported the css
this is working fine except that if you don't give it an object { colors: [...] } it gives an error

Issue

on the frontend the colors are not showing, in the html I just see empty comments

I appreciate the plugin! thanks for making it

[rubn-g]

Hey, thanks for spotting the issue with colors property. i've fixed that, colors is now optional, as it should.

About the html rendering issue, how are you rendering the json to html?
It works with the convertLexicalToHTML function from @payloadcms/richtext-lexical package, let me know how are you doing it, maybe we can improve it to make it work with other methods too.

[jlole]

ah thanks for your answer, I was using <RichText data={...} />

[rubn-g]

I've added converters to the plugin, you should edit the RichText component to add the JSXConverters as defined in usage step 4 of the README.

Let me know if it works for you

[jlole]

I got it to work, thank you so much!

It seems for me in the TextJSXConverter
import { NodeFormat } from '@payloadcms/richtext-lexical'
causes an Module not found: Can't resolve 'fs'
Copying it manually fixed it for me

Furthermore, in ParagraphJSXConverter I had to change
return <p style={style} dangerouslySetInnerHTML={{ __html: children }} />
into
return <p style={style}>{children}</p>
otherwise I would see this in my frontend:

[jlole]

I also just noticed the regex to get the colors includes the semicolon ; so i get a Console Error
Style property values shouldn't contain a semicolon. Try "color: #FFF176" instead.

[rubn-g]

Thanks for helping me testing the JSX Converters, i'm not using RichText component and it's being hard for me to properly test that part.

I've released the fixes for the issues you've found

[jlole]

I tried the new versions (0.3.1, 0.4.0, 0.4.1) but it seems it didn't include the latest changes?

[rubn-g]

Seems like there were some issue while building the code, i've re-built and published a 0.5.0 version. It should be fine now.

Thank you!

[AdrianMaj]

Hey, I think it's still something wrong with the JSXConverter

import { JSXConvertersFunction, RichText as RichTextWithoutBlocks } from "@payloadcms/richtext-lexical/react";
import { JSXConverters } from "payloadcms-lexical-ext";

import { CodeBlock, CodeBlockProps } from "@/blocks/Code/Component";

import type { CallToActionBlock as CTABlockProps, MediaBlock as MediaBlockProps } from "@/payload-types";
// import { BannerBlock } from "@/blocks/Banner/Component";
import { CallToActionBlock } from "@/blocks/CallToAction/Component";
import { cn } from "@/utils/cn";

type NodeTypes = DefaultNodeTypes | SerializedBlockNode<CTABlockProps | MediaBlockProps | CodeBlockProps>;

const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters }) => ({
  ...defaultConverters,
  ...JSXConverters,
  blocks: {
    // banner: ({ node }) => <BannerBlock className="col-start-2 mb-4" {...node.fields} />,
    mediaBlock: ({ node }) => (
      <MediaBlock
        className="col-span-3 col-start-1"
        imgClassName="m-0"
        {...node.fields}
        captionClassName="mx-auto max-w-[48rem]"
        enableGutter={false}
        disableInnerContainer={true}
      />
    ),
    code: ({ node }) => <CodeBlock className="col-start-2" {...node.fields} />,
    cta: ({ node }) => <CallToActionBlock {...node.fields} />,
  },
});

Got it like that, and like the person above, I got the "Can't resolve 'fs'" error.

[rubn-g]

Hi @AdrianMaj i released version 0.5.1, this should be fixed

[AdrianMaj]

Thanks for fast update, but I still don't find it working. When I use source code and manually add the converters it works, but when using import { JSXConverters } from "payloadcms-lexical-ext"; it shows the "Can't resolve 'fs'" error. Ofc I updated to 0.5.1

[rubn-g]

I released a beta version, you should be able to install it like npm i payloadcms-lexical-ext@next
Can you test if it helps with the issue?

[AdrianMaj]

Unfortunately no, here is the full error message, maybe it will help you out:

./node_modules/.pnpm/image-size@1.2.0/node_modules/image-size/dist/index.js:4:12
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");

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/payload@3.13.0_graphql@16.10.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0_typescript@5.7.2/node_modules/payload/dist/uploads/getImageSize.js
./node_modules/.pnpm/payload@3.13.0_graphql@16.10.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0_typescript@5.7.2/node_modules/payload/dist/uploads/generateFileData.js
./node_modules/.pnpm/payload@3.13.0_graphql@16.10.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0_typescript@5.7.2/node_modules/payload/dist/collections/operations/create.js
./node_modules/.pnpm/payload@3.13.0_graphql@16.10.0_monaco-editor@0.52.2_react-dom@19.0.0_react@19.0.0__react@19.0.0_typescript@5.7.2/node_modules/payload/dist/index.js
./node_modules/.pnpm/@payloadcms+richtext-lexical@3.13.0_g2oe2h3l6niypvuubtbjxgztr4/node_modules/@payloadcms/richtext-lexical/dist/index.js
./node_modules/.pnpm/payloadcms-lexical-ext@0.5.2_@lexical+table@0.20.0_@payloadcms+richtext-lexical@3.13.0_g2oe2h_33jt6tmzf3a5t7yitaxgvj5vyq/node_modules/payloadcms-lexical-ext/build/index.js
./src/components/RichText/index.tsx
./src/blocks/Form/Component.tsx```