jungwoo-an / react-editor-js Goto Github PK

Hello.

This module doesn't support server side rendering.
When building on Netlify or on local production, I get an error that says "'window' is not available during server side rendering", and a bunch of code that is returned from the EditorJS plugin(s).

This is how I currently fixed this:

const MyComponent = () => {
  if (typeof window !== 'undefined') {
    const Editor = require('./editor').default;

    return <Editor />;
  }

  return null;
};

Even though this works, it's very 'hacky'. Please fix this.

I'm using GatsbyJS version 2.23.12.

Wondering how I might implement this plugin when using the react wrapper?
https://github.com/kommitters/editorjs-drag-drop

Hi,
This is a very good library, I want to use this library to make a personal blog site, but I don't know how to bring articles edited from this library to users, I just want to give users View the content of the article and not edit it.
help me. thanks.

I'm getting this error when tried the example code.

https://media.giphy.com/media/Y0tRCzeOyF7U2kwMYn/giphy.gif

Im not getting how to change the style of react editor . In the editor docs page they use classes in the divs but with react editor we only have a component. What is the best way to change the style of the component ?

it seems it doesn't support i18n ,is there any methods to support it?
Reference

Add instagram and Twitter modules

When passing the tools prop, the editor doesn't work.

<EditorJs tools={toolsObject} />

Is there a way to preview the entire content without being able to edit it (preventing user from editing).

Hi, I want to prevent alter the content in some condition, is there a way to lock the content preventing text content changing? Thanks.

Hello There. I am building a text editor where user can save the content. I have successfully saved the contet in a server. But when I retireve it and update the state. Editor is successfully rerendering but the data change is not displayed.

getDataCallBack(res){
     //set set if data is not empty
     if( ! (res.data['emailJson'] === {}) ){
       // console.log(res.data['emailJson']);
       this.kidding = "Data is loaded";
       this.setState({
         data: {blocks:res.data['emailJson']}
       });
   
     }
   }

This is the call back function i use after the data has been fetched.

 componentDidMount() {
        getEmail(this.getDataCallBack);
}

This is the data fetching function

 render() {
      return (
          <div>
            <EditorJs
              instanceRef={instance => this.editorInstance = instance}
              tools={EDITOR_JS_TOOLS}
              data={this.state.data}
            />
            <Button style={{'background': 'blue', 'textAlign': 'center'}}  onClick={this.handleSave}>Save</Button>
        </div>
      );
    }

I am quite sure the rerender is happening because when i print value inside render to see the data. I can clearly see the data is updated and not the old value.
I don't know why in the rerender even though this.state.data is updated the content is not updated.

Hello!

Is it possible to pass a placeholder for a certain element? I saw your explanation here and I was able to set a default placeholder.

But what I mean is:

1. I have header-level1 and a paragraph by default
   

2. I want this FIRST header-level1's placeholder to be "Title..." and this certain paragraph's to be "Your text..." for example
   something like this:
   

Hope you got what I mean.
Thank you!

Hi,

I set enableReInitialize to true and in the onChange Method, I call the save method. It works fine at first, but as soon as I insert new data to 'data' props, it seems like the 'onChange' is triggered infinitely. Any way to break this loop?

<EditorJs instanceRef={(instance) => (editorInstance = instance)} onChange={() => handleSave(editorInstance)} data={editorData} enableReInitialize={true} tools={EDITOR_JS_TOOLS} />

const handleSave = async (instance) => { const savedData = await instance.save(); setData(savedData); };

The editorData is set to empty string at first, and later it has chances to update to new data when clicking one button, which means that I want the onChange only triggered when typing something in the editor field, and when the value of editorData is updated, the text in the editor is updated. Currently, whenever the editorData is updated, onChange is triggered like forever.

It would be so appreciated if you could offered any help.

Thanks.

Follow up:

I did a little bit debugging.

I am not quite sure but I think it may be caused by timestamp changes.
The text in blocks[0].data.text is not changing, but as the timestamp keeps updating, the onChange is keep triggering. I am not sure if this is the issue, but if it is, is there any way to custom config onChange?

I tried your example with instance in documentation, but undefinded also when I console.log data in onChange function. Can you give some real example of fetching data? Thanks

Hello, CSS is repeated for each blocks. Is there a way to unify styling?

Hello,

I have had everything set up with the editor, it was working well and then all of a sudden the link tool stopped working (I did not do any npm updates). I was wondering why it happened.
Updating packages helped with that by the way, but some console logs started appearing -
Editor.js 2.18.0 I18n: section "tools.linkTool" was not found in current dictionary %o

Keep in mind that I do have these tools included and they actually work - I can add images etc.

I have a list UI scenario, where I would like to use this editor. However, I need a way to identify which instance of the editor was edited in the onChange event. Is there a way to achieve this?

Normally I use a data-index attribute on the DOM to identify which index in the state should I update.

First of all, thank you for the react wrapper.

There is an issue with Marker @editorjs/marker simply it does not respond to highlight which is not expected (tested on both Chrome & Firefox latest versions).
The provided example have this issue as well.

This is coming when using the paragraph.

It seems I can only have one. I have virtual tabs where each of the sub-doms are hidden.

Only the first EditorJs shows.

The file mentioned in package.json's module property (./dist/react-editor-js.js) doesn't exist in the final bundle. I guess there's a .es missing in the filename?

hi I imported this in Nextjs,dynamic because error for window but most plugin don't work

Probably I'm just missing it, but I really can't find that option. Could you tell me how to do it?

When I try to use the editor I get a ReferenceError: window is not defined.

I follow your codebox example, but with no luck.

I use React with Next.js

I run into an infinite look when i hook into the onChange function and update the content using .blocks.render(). This behaviour is understandable,but is there anyway to update the content ?

I'm using React 16.13.1 and I can't seem to find a way to save the state.
I tried using useEffect for initialization but it didn't work. We need an update where there is a easy way to save the data with hooks.

Hey!

Your component is just amazing.
One thing I wanted to ask, is there a way to make the text read only?

I want to use the editor in a blog app, so that one user can write a post, but other people can just read it.

Thanks in advance!

Hi! Im wondering if there is the possibility to activate the option to change block type once you have selected one.

For example, when you start writing and you select the text, the editor let you choose to change between Header and Paragraph, but once you select one of the options, this options doesn't appear anymore.

Hope these images can help to explain the question:

1. When i write the text without selecting Header or Paragraph and mouseover:
   

2. Once I select "Header" or "Paragraph", the convert to tool doesn't appear anymore:
   

Thanks for the good work!

When I saw demo of react-editor-js in browser I saw the above image. It can clearly be seen that the section in which user clicks is highlighted and + icon is shown which allows addition of blocks.

But when I run the same demo in my browser then I when I click on any component the component is not highlighted and plus icon not showing. I am confused. Below you can see the image of when I click component in my browser.

Am I missing something?

I tried upgrading node. I am using javascript and not typescript.

When pulling saved data from my database this.editorInstance.render() gives an "cannot read property of map undefined". Would you have insight into this error?

When I try to drag and drop or Insert a URL, I don't face any issue. When I try to upload an image, i.e., when the upload image window appears, after the selection of the image, an error is shown, saying Couldn't upload Image. Try Again
Does anyone face the same issue? I observed this issue in the example SandBox too.

I have notes list and I have an editor and I'm trying to update the content of the editor depending on the user selection,
so if he selects the first note the editor will change the content to the first note and if the user selects the second one the content will change to second note content and goes on.
I faced two problems,
the first one if I set initial data and the user selects a note, the content never changes,
then I thought I must enable this option enableReInitialize but I got this error Uncaught (in promise) TypeError: _this.instance.destroy is not a function
so did I miss something?

this is my code

Tools like header and code are throwing TypeError: Cannot read property 't' of undefined while rendering.
Unable to generate or render tool blocks

The embed feature doesn't have any specific config, but I don't know why this is happening. I didn't have this issue previously. I don't know if this is a specific react editor issue or embed package issue. Can anyone recreate this error in their code? I uninstalled and installed the packages but of no use. The display is getting distorted. Is there any way to resolve this?

I tried setting on instance but it didn't work. I tried passing as prop still no luck. Passing to instance and setting enableReInitialize to true also didnt work.

i can't find any way to upload photo with apollo server ,how can i do that?

By default in editor.js tool with name link is LinkInlineTool, but in this lib the tool link is LinkTool and i cant to use LinkInlineTool.

@Jungwoo-An Hello! What do you think about new prop exclude? For excluding of default tools, because I cant to overwrite some tool to undefined

Good day guys,

I have a summary of my concern below

const EDITOR_JS_TOOLS = {
    image: {
        class: Image,
        config: {
            endpoints: {
                byFile: 'http://localhost:3001/api/uploads'
            },
            field: 'image',
            types: 'image/*'
        }
    }
}

const CommentEditor = () => {
    return <EditorJs tools={EDITOR_JS_TOOLS} />
}

When my react sends request to

router.post('/', async (req, res) => {
//when client use this endpoint, console.log can display a message
})

but where is the data?
I look it to req.body but empty

Thank you.

I need to access the data when Save Button is pressed, but all the methods I tried to use are failing.
Cannot set property 'editorInstance' of undefined is the error I am getting when I try to access the Instance of EditorJS.
Can anyone who has done this, send their syntax and working?

Editor Component-

function Editor(props) {
  return (
    <EditorJs
      tools={EDITOR_JS_TOOLS}
      data={props.data}
      instanceRef={(instance) => props.handleInstance(instance)}
    />
  );
}

handeSave in different function-

const handleInstance = (instance) => {
    editorInstance = instance;
  };

  const handleSave = async () => {
    const value = { ...article };
    value["body"] = await editorInstance.save();
    console.log(value);
    // await saveArticle(value);
  };

Above implementation works if I only write in editor component. but if I change different fields of article form (like title, description, etc) which are not part of editor component then following error occurs-

Please tell me what is proper way of handling change event of editorjs and side effects.

Please could you provide an example of how to listen to changes in blocks via useEffect or any other method as I am having issues working out how to do this. Thanks

Beautiful editor.

Is there support for indentation in lists?

Thanks for making this great wrapper 🙌👌.

I used to work with editorjs and want to move it inside a reactjs app.

Doing this I have noticed a different behavior than the main lib. Currently it seems to be impossible to remove some of the default plugins.

As I only do offer custom plugins, it’s mandatory to disable the default ones.

To me it would be more convenient to disable them by default (except for paragraphs) as it’s done in the main lib and import/add only the necessary ones.

What’s your opinion about that? I could create a merge request with these changes, even if I am not absolutely sure how to achieve this.

The library is great but i cant seem to find readOnly mode in documentation.
i want to display the data stored with proper styling without giving the reader access to toolbar or any edit options.
like 'view' only mode.

I wrote my own implementation of React container for Editor.js, and instead of creating separate package I'd like to volunteer my contributions and help here. Example use case would look like:

import { Editor, useEditorRef } from 'react-editor-js'

const MyComponent = ({ initialData }) => {
  const [ref, { save, loading /* etc. */ }] = useEditorRef()

  const onSave = useCallback(async () => {
    const values = await save()
    console.log(values)
  }, [])

  return (
    <Editor ref={ref} data={initialData} holder="editor-js" /* etc. */>
    { !loading && <button onClick={onSave}>Save</button> }
  )
}

Where useEditorRef is optional and can be replaced with standard useRef. That will allow you to access EditorJS instance with all standard methods at ref.current.

Does this sound like a good idea for this repo?

I saw we already have PR for that. However, this issue still happened.

Hello,
Thank you for your amazing work <3

I installed the plugin and when testing to delete a block, I receive the following error:
n.closest is not a function

I tried the demo and I found the same issue:
https://codesandbox.io/embed/react-editor-js-23opz

Sometimes it appears and somtimes it doesn't.