block is not a BlockNode error from Draft-Convert

Hi, loving Dante2 so far. It's got a great UI and all the important functions I'm looking for.

I have a novice question about modifying the onChange callback. I'm using draft-convert@2.1.10 with Dante2@0.5.0-rc25 to try and configure the <a> tag for a Link so that just typing 'google.com' wouldn't just link to localhost:3000/google.com. Rather, if the input is missing 'http://' it would append it so that clicking the link directly redirects outside of the website.

I've seen several raised issues here that have used draft-convert and used some variation of:

const html = convertToHTML({
  styleToHTML: (style) => {
    if (style === 'BOLD') {
      return <span style={{color: 'blue'}} />;
    }
  },
  blockToHTML: (block) => {
    if (block.type === 'PARAGRAPH') {
      return <p />;
    }
  },
  entityToHTML: (entity, originalText) => {
    if (entity.type === 'LINK') {
      return <a href={entity.data.url}>{originalText}</a>;
    }
    return originalText;
  }
})(editorState.getCurrentContent());

in the onChange() to accomplish what they're looking for. However that doesn't work for me because the convertToHTML() that contains it returns a 'block is not a BlockNode' error. (for reference, the rest of my code resembles this codepen https://codesandbox.io/s/billowing-breeze-fhl3j?file=/src/App.js)

I think I'm missing something obvious but googling the issue makes it seem like it's possibly an issue with Draft.js.

I would appreciate any help/clarification I can get and thank you.

Hi , the code you posted looks ok, I've not seen the block is not a BlockNode error. I'm able to see the html beign generated. Check the versions of draft / draft-convert & react for your project against the codesandbox one. Use the versions of code sandbox, if the problem persists remove the node_modules and install again.

On Mon, Jul 13, 2020 at 8:40 PM wchen-oxy notifications@github.com wrote:

Hi, loving Dante2 so far. It's got a great UI and all the important functions I'm looking for.

I have a novice question about modifying the onChange callback. I'm using draft-convert@2.1.10 with Dante2@0.5.0-rc25 to try and configure the tag for a Link so that just typing 'google.com' wouldn't just link to localhost:3000/google.com. Rather, if the input is missing 'http://' it would append it so that clicking the link directly redirects outside of the website.

I've seen several raised issues here that have used draft-convert and used some variation of:

const html = convertToHTML({ styleToHTML: (style) => { if (style === 'BOLD') { return <span style={{color: 'blue'}} />; } }, blockToHTML: (block) => { if (block.type === 'PARAGRAPH') { return
; } }, entityToHTML: (entity, originalText) => { if (entity.type === 'LINK') { return {originalText}; } return originalText; } })(editorState.getCurrentContent());

in the onChange() to accomplish what they're looking for. However that doesn't work for me because the convertToHTML() that contains it returns a 'block is not a BlockNode' error. (for reference, the rest of my code resembles this codepen https://codesandbox.io/s/billowing-breeze-fhl3j?file=/src/App.js)

I think I'm missing something obvious but googling the issue makes it seem like it's possibly an issue with Draft.js.

I would appreciate any help/clarification I can get and thank you.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/michelson/dante2/issues/232, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAC5SEYNVK3QTKYI2L6KTDR3OSRJANCNFSM4OZAENDA .

I did what you suggested and installed the same dependencies in the CodeSandbox pacakage.json along with the npm suggested peer dependency, but I got the same error. After reinstalling the dependencies I tried ignoring the peer dependency that was being suggested by NPM, which then made it work!

It seems like installing this peer dep: npm ERR! peer dep missing: draft-js@0.10.x, required by draft-js-custom-styles@2.1.1

will break Draft-Convert and will produce the 'block is not a BlockNode' error in Dante2. This error has popped up for the two versions of Draft-Convert 2.1.9 and 2.1.10 that I've tried so far.

Thank you for the quick reply and help!!

michelson / dante2

block is not a BlockNode error from Draft-Convert #232