draft-js | A React framework for building text editors | Frontend Framework library

I have actually found a solution to this.

Method 1 is the preferred solution to correctly render the DOM elements, but styling only works with style="" and not className="".

The working return for the draft-js block type is:

There were many struggles here

1. react-rte does not support small font, so I had to use blockRenderMap to specify a new mapping, as described in the Draft.js API (which react-rte allows to pass via props)
2. The blockRenderMap isn't good enough though. It only works during editing mode, so that approach was 50% of the solution (or 0, I didn't know). In fact Draft.js (don't think it is react-rte that does this, but can't find the exact Draft code that does this either) converts by default what it does not have already mapped as

   . I really expected that the extension of the blockRenderMap will solve everything, but nope.

3. The default mapping defined in Draft.js, is limiting: https://draftjs.org/docs/advanced-topics-custom-block-render-map/. A hacky idea was to use as the style and then try to apply a CSS class to it. But section is not available by default. Even if you specify it as a custom blockRenderMap, it converts it to

   in the value variable. So I ended up modifying

   .

Solution was

During editing:

1. Specify a custom block style: https://draftjs.org/docs/advanced-topics-block-styling/. In my case a CSS class for small font:

I looked at the docs and you need to pass a React Component as the first argument of the styled function. In your example you are passing a function component without defining the type of the "props". But the type of "props" default to {} as you can see here. That's why you are getting the error.

So you simply need to provide the type of your props like so:

Each editor get's its own plugins.

You can solve this issue ether by creating different plugin for each editor instance and pass them to the editor OR with create a function for creating a plugin inside the editor component and every time we init a editor we create a new plugin instance

So, this is the first solution:

Here is the working version in sandbox. I commented the useLocation and ApiClient calls so perhaps those are the culprit. Also your res.data['postContent'] looks like a JSON. If so, then you need to JSON.parse(res.data['postContent']).

Okay that was dumb. But yes, to read those error message for other npm newbs out there:

Uncaught TypeError: Cannot read properties of undefined (reading 'string')

I believe the issue is where you are declaring your proptypes for StarRating.

You should set editor state after ViewContent component rendered completely. update your component as below:

I could see pretty-checkbox's developer last published 4 years ago.

Let's say the new module used popper-js@2.0 and someone who already had popper-js@4.0 as direct or sub-dependency in their project is more likely to face unmet peer dependency on using the new module.

Downgrading the version is not recommended due to possible conflict with other modules. A workaround would be to add resolutions.

Before doing anything, ensure there is no other version of react installed globally, delete your node-modules folder and package-lock.json file. Ensure your package.json dependency has react@15.4.0 and only add popperjs@^1.16.0 if you're sure that other modules in your project are not relying on later versions of popperjs.

Take a look at this article for a good explanation on peer dependencies

If there are other modules that needs other versions of popperjs then in your package.json you could add an additional property at the end like below,