draft-js-import-html

draft-js-import-html copied to clipboard

Is possible use for load images? (tag img)

+1

No, but that's a high-pri feature. The issue is that there's no standard way to represent images in draft-js so it's up to each implementation to decide on that. So for this library we will probably provide some way to pass a function that will be called when we encounter an <img> and you can decide what to do.

I'll use this feature with react-rte as soon as I land https://github.com/sstur/react-rte/pull/40.

@sstur how hard would it be to atleast do this:

{
  "entityMap": {
    "0": {
      "type": "image",
      "mutability": "IMMUTABLE",
      "data": {
        "src": "media.png"
      }
    }
  },
  "blocks": [
    {
      "key": "bh99k",
      "text": " ",
      "type": "atomic",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [
        {
          "offset": 0,
          "length": 1,
          "key": 0
        }
      ],
      "data": {}
    }
  ]
}

aka. atleast give the block an atomic type...

Bumping this.

I'm using draft-js-import-html draft-js-export-html along with draft-js-image-plugin (mentionned in the rte#40 PR)

And it was working fine so far :

• I can add an image with draft-js-image-plugin and convert it to HTML with draft-js-export-html
• It's perfectly showing using dangerouslySetInnerHTML after saving.
• (rendered as <figure><img src="https://webkit.org/demos/srcset/image-src.png"/></figure>)

The problem happens when I try to load it back to the editor (for an edit)

The draft-js-import-html seems to import every elements again correctly (if I save it again the image is still there) but it is not showing in the editor.

There is a   instead of the img.

I know there's no standard way to represent images but since the export is working with draft-js-image-plugin and it's a well used package maybe it could support import too ?

Perhaps with the function you mentioned in you previous answers @sstur