payload icon indicating copy to clipboard operation
payload copied to clipboard

Published 20 hours ago • verified publisher icon payloadcms

feat(richtext-lexical): client-side lexical => jsx converter

Open AlessioGr opened this issue 1 year ago • 1 comments

Example:

import React from 'react'
import {
  BlocksJSXConverter,
  type JSXConvertersFunction,
  RichText,
} from '@payloadcms/richtext-lexical/react'

const jsxConverters: JSXConvertersFunction = ({ defaultConverters }) => [
  ...defaultConverters,
  BlocksJSXConverter({
    blocks: {
      // myTextBlock is the slug of the block
      myTextBlock: ({ fields }) => <div style={{ backgroundColor: 'red' }}>{fields.text}</div>,
    },
  }),
]

export const MyComponent = ({ lexicalContent }) => {
  return (
    <RichText
      converters={jsxConverters}
      editorState={data.lexicalWithBlocks as SerializedEditorState}
    />
  )
}

AlessioGr avatar Oct 19 '24 19:10 AlessioGr

From docs:

the conversion needs to happen on a server

Anything that can be done to remove the dependency to render on the server? It would be great to be able to use this in client side with live preview.

andershermansen avatar Oct 21 '24 08:10 andershermansen

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@aws-sdk/[email protected] Transitive: environment, filesystem, network +69 4.38 MB amzn-oss, aws-sdk-bot, kuhe, ...2 more
npm/@aws-sdk/[email protected] Transitive: environment, filesystem, network +92 7.85 MB amzn-oss, aws-sdk-bot, kuhe, ...2 more
npm/@aws-sdk/[email protected] Transitive: environment, filesystem, network +70 4 MB aws-sdk-bot
npm/@aws-sdk/[email protected] filesystem Transitive: environment, network +27 1.39 MB aws-sdk-bot
npm/@azure/[email protected] None 0 65 kB azure-sdk
npm/@azure/[email protected] filesystem Transitive: environment, network +11 11.9 MB microsoft1es
npm/@babel/[email protected] Transitive: filesystem, shell +5 583 kB existentialism, hzoo, jlhwung, ...1 more
npm/@babel/[email protected] environment, filesystem, unsafe +25 10.8 MB nicolo-ribaudo
npm/@babel/[email protected] Transitive: environment, filesystem, unsafe +99 12.2 MB existentialism, hzoo, jlhwung, ...1 more
npm/@babel/[email protected] Transitive: environment +23 6.53 MB existentialism, hzoo, jlhwung, ...1 more
npm/@babel/[email protected] Transitive: environment +29 7.35 MB existentialism, hzoo, jlhwung, ...1 more
npm/@clack/[email protected] None +1 354 kB natemoo-re
npm/@eslint-react/[email protected] Transitive: environment +11 3.34 MB rel1cx
npm/@eslint/[email protected] None 0 14.6 kB eslintbot
npm/@google-cloud/[email protected] None +8 1.79 MB google-wombot
npm/@hyrious/[email protected] filesystem 0 47.5 kB hyrious
npm/@jest/[email protected] Transitive: eval +13 741 kB simenb
npm/@lexical/[email protected] environment 0 66.3 kB acywatson
npm/@lexical/[email protected] environment 0 9.66 kB acywatson
npm/@lexical/[email protected] environment 0 48.1 kB acywatson
npm/@lexical/[email protected] environment 0 140 kB acywatson
npm/@lexical/[email protected] environment 0 31.9 kB acywatson
npm/@lexical/[email protected] Transitive: environment +13 1.63 MB acywatson
npm/@lexical/[email protected] environment +2 175 kB acywatson
npm/@lexical/[email protected] environment 0 112 kB acywatson
npm/@lexical/[email protected] environment +2 438 kB acywatson
npm/@lexical/[email protected] environment 0 106 kB acywatson
npm/@libsql/[email protected] Transitive: network +4 484 kB penberg
npm/@next/[email protected] None 0 3.38 kB vercel-release-bot
npm/@next/[email protected] None 0 11.8 kB vercel-release-bot
npm/@playwright/[email protected] None 0 25.5 kB dgozman-ms, mxschmitt, pavelfeldman, ...1 more
npm/@sentry/[email protected] environment, filesystem, network +34 30 MB sentry-bot
npm/@sentry/[email protected] environment, unsafe Transitive: filesystem, network +46 20.3 MB sentry-bot
npm/@sentry/[email protected] Transitive: network +9 10.9 MB sentry-bot
npm/@sentry/[email protected] None 0 338 kB benvinegar, billyvg, evanpurkhiser, ...8 more
npm/@sindresorhus/[email protected] None +3 37.4 kB sindresorhus
npm/@swc-node/[email protected] environment, filesystem +6 436 kB broooooklyn
npm/@swc/[email protected] environment, filesystem Transitive: network, shell +7 1.19 MB kdy1
npm/@swc/[email protected] environment, filesystem, shell +2 309 kB kdy1
npm/@swc/[email protected] filesystem Transitive: environment +10 592 kB kdy1
npm/@types/[email protected] None 0 3.46 kB types
npm/@types/[email protected] None 0 4.45 kB types
npm/@types/[email protected] None 0 3.17 kB types
npm/@types/[email protected] None +1 221 kB types
npm/@types/[email protected] None +1 32.4 kB types
npm/@types/[email protected] None 0 4.92 kB types
npm/@types/[email protected] None +1 42.5 kB types
npm/@types/[email protected] None 0 27.9 kB types
npm/@types/[email protected] None 0 5.68 kB types
npm/@types/[email protected] None 0 78.7 kB types
npm/@types/[email protected] None +1 871 kB types
npm/@types/[email protected] None 0 6.72 kB types
npm/@types/[email protected] None 0 6.27 kB types
npm/@types/[email protected] None 0 5.6 kB types
npm/@types/[email protected] None 0 2.2 MB types
npm/@types/[email protected] None 0 89.8 kB types
npm/@types/[email protected] None 0 14.4 kB types
npm/@types/[email protected] None 0 5.77 kB types
npm/@types/[email protected] None 0 7.96 kB types
npm/@types/[email protected] None 0 4.62 kB types
npm/@types/[email protected] None +6 6.12 MB types
npm/@types/[email protected] None 0 23.3 kB types
npm/@types/[email protected] None +2 68.5 kB types
npm/@types/[email protected] None 0 2.64 kB types
npm/@types/[email protected] None 0 21.6 kB types
npm/@typescript-eslint/[email protected] Transitive: environment +5 1.45 MB bradzacher, jameshenry
npm/@vercel/[email protected] environment, network +2 306 kB vercel-release-bot
npm/@vercel/[email protected] environment Transitive: network +3 850 kB vercel-release-bot
npm/[email protected] None 0 13.7 kB leerobinson
npm/[email protected] Transitive: environment +4 8.34 MB react-bot
npm/[email protected] None 0 8.92 kB wcjiang
npm/[email protected] Transitive: environment, filesystem +9 849 kB pi0
npm/[email protected] None +2 87.5 kB kael
npm/[email protected] filesystem 0 22.9 kB cwmma
npm/[email protected] environment, filesystem 0 79.1 kB motdotla
npm/[email protected] Transitive: environment, eval, filesystem, network, shell, unsafe +7 7.86 MB alexblokh, dankochetov, kyrylo_usichenko, ...1 more
npm/[email protected] None 0 6.48 MB dankochetov
npm/[email protected] filesystem 0 91.3 kB glromeo
npm/[email protected] None 0 20.8 kB lydell
npm/[email protected] Transitive: environment +10 2.94 MB jounqin
npm/[email protected] None +1 334 kB benmonro
npm/[email protected] filesystem Transitive: environment +7 2.44 MB simenb

🚮 Removed packages: npm/@apollo/[email protected], npm/@faceless-ui/[email protected], npm/@faceless-ui/[email protected], npm/@lexical/[email protected], npm/@lexical/[email protected], npm/@lexical/[email protected], npm/@lexical/[email protected], npm/@next/[email protected], npm/@payloadcms/[email protected], npm/@payloadcms/[email protected], npm/@payloadcms/[email protected], npm/@payloadcms/[email protected], npm/@payloadcms/[email protected], npm/@payloadcms/[email protected], npm/@types/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

socket-security[bot] avatar Nov 26 '24 21:11 socket-security[bot]

🚀 This is included in version v3.2.0

github-actions[bot] avatar Nov 27 '24 01:11 github-actions[bot]

Are there any examples for rendering Rich Text on the frontend using React? I'm quiet new to Payload and I don't follow OP example.

Update: Found it https://payloadcms.com/docs/rich-text/converters

runoncedev avatar Jan 27 '25 20:01 runoncedev

Here is what worked for me when I tried to style an h2 tag

const jsxConverters: JSXConvertersFunction<NodeTypes> = ({
  defaultConverters,
}) => ({
  ...defaultConverters,
  heading: ({ node, nodesToJSX }) => {
  
    const children = nodesToJSX({
      nodes: node.children,
    });

    const NodeTag = node.tag
    
    switch (node.tag) {
      case "h2":
        return <h2 className="text-xl font-semibold text-app-skyblue">{children}</h2>
      case "h3":
        return <h3 className="text-lg font-semibold text-app-skyblue">{children}</h3>
      default:
        return <NodeTag className="text-base font-normal text-app-skyblue">{children}</NodeTag>
    }
  },
  ...LinkJSXConverter({ internalDocToHref }),
  blocks: { 
  .
  .
  .

qublaidev avatar Apr 27 '25 15:04 qublaidev