Draft-js: Is inline image rendering possible?

[corinna000]

Do you want to request a feature or report a bug?
Feature

What is the current behavior?
In every Draft example, images are converted to 'atomic' blocks. This only covers one possible rendering of tags. There is a common use case for rendering images inline (for example, displaying rendered MathML or sparkline graphs).

This question was asked in #316 but was not given a clear answer. This was also asked in the Slack channel and kind respondents pointed to the draft-js-plugins repo for both images and emojis as examples, but neither solve the problem.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started: https://jsfiddle.net/stopachka/m6z0xn4r/.

What is the expected behavior?
A rich text editor should have the ability to render images inline with text.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?
0.10.1

[ddelrio1986]

Maybe you could use an entity attached to a space character. Just attach the image's metadata like src to that entity's data. Then you can use a decorator to display a component for the matched space character with the entity data.

[chengzhenping]

but use this method created image can't be selected and deleted @ddelrio1986

[ddelrio1986]

@chengzhenping without testing I think it should be able to since it is just a space character with an entity attached to it.

[wjp5826]

@chengzhenping a year passed, have you found a solution

[corinna000]

Ultimately, our team switched to Quill because we absolutely needed to display math formulas as inline gifs. We spent a whole sprint trying to engineer a solution with Draft, but determined that Draft’s low-level design prevented us from achieving our goal, and that we didn’t want to undertake the work of making the necessary changes to Draft that would accomplish inline images with correct backspacing behaviour.

[chengzhenping]

@chengzhenping a year passed, have you found a solution

not really , I gave up.

[eric-zhangqi]

use slatejs, it can do every thing