strapi / blocks-react-renderer Goto Github PK

A clear and concise description of what the feature is

This feature adds a method to Strapi's rich-text rendering system, enabling the extraction of plain text from rich-text content.

Why should this feature be included?

This feature is useful in various content markup scenarios. For instance, in creating FAQ sections, it's crucial to have a method that efficiently strips formatting to present clear, concise text.

Please provide an example for how this would work

The feature would work similarly to PortableText's toPlainText.
https://github.com/portabletext/toolkit/blob/main/src/toPlainText.ts

A clear and concise description of what the feature is

Currently, if I want to use this renderer in a Server Component I would have to create a wrapper with the "use client" directive.
This feature aims for seamless usability within the next.js framework, especially with the use of the app router.

Why should this feature be included?

It makes it easier for consumers of this package since you don't have to create a wrapping boundary.

Please provide an example for how this would work

See: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#advice-for-library-authors

A clear and concise description of what the feature is

The feature would allow to convert blocks contents into a react / react-native readable format. I guess that much of the logic could remain close or identical as both could take advantage of the react standards, simply switching the final tags - <div> becoming <View>, <p> becoming <Text> etc.

Why should this feature be included?

One of the main advantage of using a headless editor like Strapi is the ability to serve contents not only to web apps, but also to mobile apps.

Please provide an example for how this would work

Globo made such a converter with draftJs, it worked pretty well.
https://github.com/globocom/react-native-draftjs-render

A clear and concise description of what the feature is

This is a great plugin, thank you for putting it together! I'm trying to use this in my project, but I can't figure out how to properly query the data I need from GraphQL. If I select everything possible from a "Rich text (Blocks)" component, it only works if literally every kind of content has been added. Or if I select only the most basic elements from GraphQL it will appear "broken" when, for example, italic text is entered and the text does not appear italic. (If that makes any sense lol)

Basically if you request italic text--and there isn't any--the query breaks. If you don't request italic text--and users have entered it--the query works... but you don't get the italic text. So how do I make everything optional?

Why should this feature be included?

It will get developers using GraphQL up and running much faster. In my case, I happen to be using Gatsby. It does provide an error message linking to this page, but unfortunately I don't have enough experience with GraphQL, and there is some nesting and complexity with this plugin.

Please provide an example for how this would work

Ideally there would be a GraphQL query like this:
myrichtextblocksfield { type level format image { alternativeText url } children { bold italic strikethrough text type url underline children { text type } } }

It should work whether or not supported content has been entered. Lists, bold text, underlines, images, and so on. Basically how do I create a nested type definition where everything is optional?

A clear and concise description of what the feature is

A VueJS Blocks renderer component

Why should this feature be included?

Not all front projects use React ;)

Please provide an example for how this would work

No response

What version of @strapi/blocks-react-renderer are you using?

Npm Version: 10.2.4
Node Version: 20.11.1
Vers: 1.0.1
Browser: Edge
Framework: Nextjs 14 with app dir
Typescript included

What's Wrong?

Can't import to SSG generated pages due to ECMA script error

./node_modules/@strapi/blocks-react-renderer/dist/BlocksRenderer.mjs/proxy.js` Specified module format (CommonJs) is not matching the module format of the source code (EcmaScript Modules) The CommonJs module format was specified in the package.json that is affecting this source file or by using an special extension, but Ecmascript import/export syntax is used in the source code. The module was automatically converted to an EcmaScript module, but that is in conflict with the specified module format. Either change the "type" field in the package.json or replace EcmaScript import/export syntax with CommonJs syntas in the source file. In some cases EcmaScript import/export syntax is added by an transform and isn't actually part of the source code. In these cases revisit transformation options to inject the correct syntax.

To Reproduce

Nextjs 14, with App dir usage.

'/blogs' page that loads resources, Blog Posts in this case, uses the Blocks Renderer fine, no errors as it's a client side component.

SSG page based on the returned items from the API '/articles' endpoint from strapi, using Id as the uid.

Generates the pages when not using BlocksRenderer, just simply applying JSON.stringify has no errors. But when importing the BlockRenderer we run into the above error.

Expected Behaviour

BlocksRenderer doesn't have an import error here, and works similar to how it does on CSR.

Hi dear contributors!

I have some problems with this line of code.

The main problem happened when running typical build command ( for example in nextjs, for example in docker, some pipelines ) , for which dependencies under "dependencies" block typically is required, but devDependencies should be is not required (omit=dev)
So husky is not installed for omit=dev, but docker tried to run postinstall command and pipeline failing

So there are a some possible solutions:

1. Add condition to postinstall script to run husky only if it installed
   "scripts": {
   "postinstall": "if [ -d node_modules/husky ]; then husky install; fi"
   }

2. Using prepare script for husky, which will be automatically called before npm publish
   "scripts": {
   "prepare": "husky install"
   }

3. Install all the dependencies using npm install (without omit dev).
   Is not the best practice as devDependencies will be installed for builld

4. Add husky to dependencies package json section which can be ok only as fast temporary fix

Strapi Version: 4.0
Operating System: Linux
Database: PostgresDB
Node Version: 18.17.1
NPM Version: 9.6.7
Yarn Version: 4.0.0

Hi. I have added a single type that consists of Rich Text Block Editor components. Now I am working on getting and rendering those data in my Next.js project. I use @strapi/blocks-react-renderer but it’s not working. Probably, because I have Next.js 13 version and without Typescript.
Could you help me?
What should I use to render those data?

What version of @strapi/blocks-react-renderer are you using?

• npm v10.5.0
• node v20.12.1

What's Wrong?

npm i @strapi/blocks-react-renderer
npm ERR! code 127
npm ERR! path ###/node_modules/@strapi/blocks-react-renderer
npm ERR! command failed
npm ERR! command sh -c husky install
npm ERR! sh: husky: command not found

To Reproduce

• npm init -y
• npm i @strapi/blocks-react-renderer

Expected Behaviour

I expect to be able to install the package without installing husky.

Render custom blocks on the server, for instance with nextjs server components. Adding custom headings

gives me this error?

What version of @strapi/blocks-react-renderer are you using?

• Nextjs 14.0.4
• Nodejs lts/iron (20.10.x)
• React 18+
• @strapi/blocks-react-renderer@latest (1.0.0-beta.0)

What's Wrong?

VSCode returning that the module isn't exporting any type BlocksContent as shown on the readme

To Reproduce

Paste the following import into a project with the plugin installed :

import {
  BlocksRenderer,
  type BlocksContent,
} from '@strapi/blocks-react-renderer'

Expected Behaviour

The module should export a usable type I guess?

A clear and concise description of what the feature is

Hey!
It's good to have this lib, but why it's for React?
Since there is no docs available for Blocks how should we use it in other frameworks?

Why should this feature be included?

Plain JS should be also supported

Please provide an example for how this would work

No response

What version of @strapi/blocks-react-renderer are you using?

npm: 9.8.1
node: 20.9.0
react: 18.2.0
next: 14.1.4
@strapi/blocks-react-renderer: 1.0.1
browser: any

What's Wrong?

I have a use case where I need to send the HTML on nodemailer. Strapi sends the result as JSON so I'm getting the HTML by using renderToStaticMarkup(<BlocksRenderer content={blocks}/>).
Unfortunately when I do this in Next 14 in a server action it throws an error.

To Reproduce

I made this codesandbox with a reproduction of the bug

Expected Behaviour

I expect to be able to render the BlocksRenderer component in the context of the server so that I can in turn use it to render the static markup.
I suspect that it has to do with the fact that BlocksRenderer has 'use client' and so Next 14 is probably skipping rendering in the context of the server. I don't wish to introduce a breaking change so I suggest making something like BlocksRendererPure without the 'use client' and the current BlocksRenderer expose as the BlocksRendererPure wrapped in a wrapper with the 'use client'.
If help is needed for a merge request let me know and I'll submit a fix according to whatever the package owner decides is the best way to fix this.

What version of @strapi/blocks-react-renderer are you using?

strapi/blocks-react-renderer": "^1.0.0-beta.0"
"react": "18.2.0"
"strapi": "4.15.4"

What's Wrong?

currently Strapi splits all Text (ie paragraph) blocks after a line break into separate p tags.

Also the line breaks themselves are just empty stings which is annoying to deal with when they are sitting in their own (now empty) p tag.

Shouldnt all the parts of a paragraph be children of the "paragraph" block instead of creating their own new paragraph?

To Reproduce

create a new RichText field

Gives you the output

[
  {
    type: "paragraph",
    children: [
      {
        type: "text",
        text: "Hi",
      },
    ],
  },
  {
    type: "paragraph",
    children: [
      {
        type: "text",
        text: "",
      },
    ],
  },
  {
    type: "paragraph",
    children: [
      {
        type: "text",
        text: "This is a line of text followed by a line break",
      },
    ],
  },
  {
    type: "paragraph",
    children: [
      {
        type: "text",
        text: "",
      },
    ],
  },
  {
    type: "paragraph",
    children: [
      {
        type: "text",
        text: "Here is a double one",
      },
    ],
  },
  {
    type: "paragraph",
    children: [
      {
        type: "text",
        text: "",
      },
    ],
  },
  {
    type: "paragraph",
    children: [
      {
        type: "text",
        text: "",
      },
    ],
  },
  {
    type: "paragraph",
    children: [
      {
        type: "text",
        text: "The end",
      },
    ],
  },
]

Expected Behaviour

Expected would be something like this:

[
  {
    type: "paragraph",
    children: [
      {
        type: "text",
        text: "Hi",
      },
      {
        type: "text",
        text: " ",
      },
      {
        type: "text",
        text: "This is a line of text followed by a line break",
      },
      {
        type: "text",
        text: " ",
      },
      {
        type: "text",
        text: "The end",
      },
    ],
  },
]

A clear and concise description of what the feature is

Hello, I am trying to use strapi to provide interface services to the front-end application in the content management backend.

The Rich text (Blocks) component of the strapi cms content management backend is configured with a rich text editing box. After editing the content in Rich text (Blocks), how can the front-end webpage obtain the data through the interface and restore it to a 1:1 ratio?

I used the blocks-react-renderer npm package, but only the content has no format. I hope that after writing the formatted content in Rich text (Blocks) in the strapi cms content management backend, the front-end interface requests the corresponding content and inserts it directly. , the displayed content and style can be consistent with those during editing, without the front-end website having to handle it by itself. This is too cumbersome and not open source enough.

Why should this feature be included?

It is expected that after writing the formatted content in the rich text (Blocks) of the strapi cms content management backend, the front-end interface requests the corresponding content and inserts it directly. The displayed content and style can be consistent with those during editing, without the need for a front-end It would be too cumbersome for the website to handle it on its own and not open source enough.

Please provide an example for how this would work

No response

What version of @strapi/blocks-react-renderer are you using?

1.0.0

What's Wrong?

In the documentation/readme it mentions the difference between a link and paragraph. In the meanwhile I get a link nested in a paragraph while the blocks renderer doesn't seem to find this particular element at all.

Strapi 14.15.5

Response:

 {
      "type":"paragraph",
      "children":[
         {
            "text":"",
            "type":"text"
         },
         {
            "type":"link",
            "url":"https://test.com",
            "children":[
               {
                  "type":"text",
                  "text":"Read more",
                  "bold":true
               }
            ]
         },
         {
            "text":"",
            "type":"text"
         }
      ]
   },
   {
      "type":"paragraph",
      "children":[
         {
            "type":"text",
            "text":"Another part of a text"
         }
      ]
   }

BlocksRenderer:

 <StrapiRichContentEditor
      content={content}
      blocks={{
        paragraph: ({ ...props }) => (
          <Paragraph {...props} theme={theme} />
        ),
        heading: ({ ...props }) => (
          <Heading {...props} theme={theme} />
        ),
        link: ({ children, url }) => {
          return (
            <Link
              href={url || "#"}
              label={children}
              className={classNames("w-full text-sm inline", {
                "text-white": isBlack,
                "text-screen-black": isWhite,
                underline: true,
              })}
              description={""}
            />
          );
        },
      }}
    />

To Reproduce

This is how it looks like in the Rich Text Blocks.

Expected Behaviour

I would expect the renderer to catch the correct type based on nested elements or at least catch a link.