dev-juju / editorjs-react-renderer Goto Github PK

A library for rendering styled, responsive and flexible React components from block style data objects like those generated by codex editors like Editor.js

Home Page: https://err.bomdisoft.com/

License: Other

JavaScript 1.78% TypeScript 98.22%

editorjs-react-renderer's People

Contributors

Stargazers

Watchers

editorjs-react-renderer's Issues

Output with a custom block tool

In docs of Editorjs, it has a custom block tool section. Then, I created a block that i built myself. And I don't see any about this in the doc of this package

Here is my custom block type

Extremely large dist file

This module is dominating my bundle size. Can we get a version on npm that is built for production?

Checkboxes and label throw errors in console

With the plugin version of Editor.js for Strapi, checkboxes can also be set. (Maybe also with the original version, I don't know right now). Anyway, with React these still throw errors in the console.

Warning: You provided a _checked_ prop to a form field without an _onChange_ handler. This will render a read-only field. If the field should be mutable use _defaultChecked_. Otherwise, set either _onChange_ or _readOnly_.

Also the label element with the for tag
Warning: Invalid DOM property for. Did you mean htmlFor?

Linebreaks are missing

Hello!

Your tool is super cool, but I have a problem, maybe you could help me

I am using react-editor-js tool to use Editor.js and pass data from it to your tool.
For some reason linebreaks are missing but the output object (from react-editor-js) seems to be correct (like in your example)

Do you know what can be wrong?

Thank you in advance!

Classes not getting added using classNames

Describe the bug
I am using Nextjs with TailwindCSS and thus need to add classes to the components but they are not getting added, but styles are getting added. I have also checked this using the useRef hook.

Expected behavior
Classes should get added

Desktop (please complete the following information):

OS: Windows
Browser: Chrome
Version: 3.5.0

Additional context
Here is my code:

  const classes = {
    header: {
      h2: "text-red-500",
      h3: "text-red-500",
      h4: "text-red-500",
    },
    paragraph: "text-red-500",
  };

<section ref={sectionref}>
    <Output data={data} style={style} classNames={classes} />
</section>

Am i doing something wrong here?

"This browser does not support `document.implementation.createHTMLDocument`"

Describe the bug
I am encountering an issue with the "editorjs-react-renderer" package in a project that uses Next.js version 13.5.6. It appears that the document.implementation.createHTMLDocument method is not supported, which is causing a runtime error. This method is being used within the package, and it's not functioning as expected in my environment.

To Reproduce
1.Create a Next.js project with version 13.5.6.
2.Integrate the "editorjs-react-renderer" package.
3.pass the block data getting from editorjs to the Output comonent as prop

Expected behavior
Unhandled Runtime Error
Error: This browser does not support document.implementation.createHTMLDocument
...

Screenshots

Desktop (please complete the following information):

OS: Windows
Browser chrome
Version 3.5.1

Error: CodeBox Renderer: Cannot read properties of null (reading 'className')

Describe the bug
When I put CodeBox block as data to Output object, I'm getting error like this:

Other features and components works well, but I couln't handle it.

To Reproduce

// data: just simple editorjs data that includes codebox
return <Output data={data} style={style} />;

Additional context
Also I can not change styling of CodeBox.

Call Stack

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'className')

Call Stack
<unknown>
https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js (2:7941)
Object.d [as highlightBlock]
https://cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js (2:8236)
eval
node_modules/editorjs-react-renderer/dist/index.min.js (1:37988)
eval
node_modules/editorjs-react-renderer/dist/index.min.js (1:38770)
React
commitHookEffectListMount
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26607:0)
commitHookPassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28610:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28863:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28913:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28943:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28861:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28943:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
reconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28943:0)
recursivelyTraverseReconnectPassiveEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28843:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28797:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28827:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)
commitPassiveMountOnFiber
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28712:0)
recursivelyTraversePassiveMountEffects
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (28693:0)

Is this supposed to support custom block types?

I've implemented a custom renderer for a custom block plugin that I built but it doesn't render. Looking at the code I can see that if the renderer key doesn't match any it just returns an empty fragment?

Resolve warning for child unique key in a list

Thank you for this library. I am currently trying to integrate it in my app and I would like to ask if we can resolve the warnings that shows regarding reacts child list key inside a loop https://fb.me/react-warning-keys

Option to over ride any of the renderer

Wondering if there is an option to over ride any of the renderer provided by this library.

For example, option to customize render function of renderers/imageOutput only.

Disable styles completely?

I already have everything styled in my CSS files. I don't want to have to overwrite the default styles with the style prop.

Is there a way to just turn them all off?

@types for typescript app

I am use typescript for my react app, and the lint of typescript says:

Could not find a declaration file for module 'editorjs-react-renderer'. 'd:/GD Gani/From Github/blog/simple-blog-frontend/node_modules/editorjs-react-renderer/dist/index.min.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/editorjs-react-renderer` if it exists or add a new declaration (.d.ts) file containing `declare module 'editorjs-react-renderer';`

what best practice for the problem?

Can you make this to be use in node for backend?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Handling styles based on toolbar.

How can I set width of image without disturbing the stretch button ? What happens now is if I set the width to '80%', pressing the stretch button does nothing in renderer. What should happen is width is overridden to '100%.

Render Single Block is not working

When using example mentioned https://github.com/BomdiZane/EditorJS-React-Renderer#render-single-block I'm getting following error:
TypeError: Cannot read property 'disableDefaultStyle' of undefined

Tables render are Editable?

Hello, I just visit your demo page went under Paragraph with Table and I can edit that table.

I'm just wondering is it a feature or a bug?

Define class names for header levels

Is your feature request related to a problem? Please describe.
When using TailwindCSS or other CSS frameworks, header tags (h1, h2, h3) do not have default styles. When I try to define the styles by using the classNames prop, with { header: 'text-xl '}, it applies the same class for all the header levels, so they look the same

Describe the solution you'd like
When defining "header" styles, allow to pass an object with class name definitions for each level

header: {
   h1: 'text-3xl',
   h2: 'text-2xl',
   h3: 'text-xl'
}

LinkTool error

LinkTool throws TypeError: Cannot read properties of undefined (reading 'url')
when passing the following data:
{ link: "https://example.com", meta: { title: "Example" } }
Probably missing ? here:

EditorJS-React-Renderer/renderers/linkTool/index.tsx

Line 50 in fb90c8c

    
           { data.meta?.image.url && <img src={ data.meta?.image.url } alt='image of link' style={ imageStyle } className={ classNames.image } /> }

Video render doesn't output anything

Hi,

I use the renderer to display images - and it works fine. The image html is rendered. However when attaching a video nothing gets rendered from the output data. And when adding it via editor.js it works fine - vid uploads, html rendered, you can play the video.

This is html rendered for an image:

This is html rendered for a video. No video appears.

Thanks in advance for your help,
Pawel

Doesn't work with Next and SSR

Hello @dev-juju, and thanks for your work!

I've found how to make your v3 plugin working on Next in client mode, with your code here:
#43 (comment)

and this on next.config.js:

{
//...
webpack(config, { webpack }) {
    config.plugins.push(
      new webpack.ProvidePlugin({
        React: "react",
      })
    )
    return config
  }
}

But it doesn't work in server mode: Error: React is not defined

I don't know if the reduced bundle size of v3 is only the drop of React,
but if if I'm ok ton include React as a dependency, is there a way to tell your plugin to call the React dependency and make SSR work again©?

"editorjs-react-renderer": "^3.5.0-beta.3"
"next": "12.3.1"
"react": "^18.2.0"

Thanks!

ReferenceError: window is not defined using Editor JS and Next JS

Describe the bug
A clear and concise description of what the bug is.

ReferenceError: window is not defined
at Object.253 (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:8982)
at n (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:39805)
at Object.995 (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:9967)
at n (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:39805)
at Object.356 (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:11162)
at n (D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:39805)
at D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:40566
at D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:67395
at D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:67401
at D:\xampp\htdocs\nextjs-prisma-devcomm\node_modules\editorjs-react-renderer\dist\index.min.js:2:84 {
type: 'ReferenceError'
}

To Reproduce
Steps to reproduce the behavior:

install the npm i editorjs-react-renderer
import to the related js file - import Output from 'editorjs-react-renderer';
render the data using

Expected behavior
It should show the post content as an article.

Desktop (please complete the following information):

OS: Windows 10
Browser Google Chrome
Version Latest

Can you make this to be use in node for backend? I want to parse into html in nodejs

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Error: This browser does not support `document.implementation.createHTMLDocument` when using Next.JS

Describe the bug
When using older versions of this plugin (2.7.3) with Next JS we are able to SSG render a page using the following code:

import Output from 'editorjs-react-renderer'

export default function BookReview(props) {
    const {data, meta} = props;

    return (
        <>
            <Head>
                <title>{`${meta?.title}`}</title>
                <meta name="description" content={meta?.description} />
            </Head>
            <Container className="mt-16 lg:mt-32">
                <article>
                    <Output renderers={ renderers }  data={ data } />
                </article>
            </Container>
        </>
    )
}

export async function getStaticPaths() {
    return {
        paths: [{ params: { slug: 'abc' } }, { params: { slug: 'def' } }],
        fallback: false, // can also be true or 'blocking'
    }
}

export async function getStaticProps() {
    return {
        props: {
            data: { ... }
       }
   }
}

However, we need to provide a custom renderer to the component which I assume is only available in more recent versions of the plugin. This however breaks compatibility with the above code:

Call Stack
s
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:13270)
e.exports
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:14492)
e.exports
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:14762)
l
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:15854)
t.default
workspace/editorjs-react-renderer-next/node_modules/editorjs-react-renderer/dist/index.min.js (1:46859)
renderWithHooks
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5658:16)
renderIndeterminateComponent
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5731:15)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderHostElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5642:3)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5952:5)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5971:9)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderIndeterminateComponent
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5785:7)
renderElement
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (5946:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6104:11)
renderNodeDestructive
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)
renderNode
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6259:12)
renderChildrenArray
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6211:7)
renderNodeDestructiveImpl
workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6141:7)
renderNodeDestructive
file:///Users/hassannazar/dev/workspace/editorjs-react-renderer-next/node_modules/react-dom/cjs/react-dom-server.browser.development.js (6076:14)

To Reproduce
Reproducer: https://github.com/HasseNasse/editorjs-react-renderer-next

Additional context
Not sure if this is a next.js related issue or not

LinkTool output

Describe the solution you'd like
It would be better if there was an output for LinkTool plugin.

dev-juju / editorjs-react-renderer Goto Github PK

editorjs-react-renderer's People

Contributors

Stargazers

Watchers

Forkers

editorjs-react-renderer's Issues

Recommend Projects

Recommend Topics

Recommend Org