React-draft-wysiwyg: Image behavior

[gregBerthelot]

Hi

Currently adding image between 2 words split content into 2

which suppose img is considered as a block element but according to https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements img is an inline element.

<p>word1 word2</p>

Insert img between the 2 words result to

<p>word1</p>
<img src="somePath">
<p>word2</p>

http://g.recordit.co/sDbYcekhMv.gif

We should get

<p>word1 <img src="somePath"> word2</p>

http://g.recordit.co/3cxT6TBghM.gif

This is the only behavior that allow user to insert image at the cursor position, then choose the alignment he want to apply:

• none (stay at the insertion point)
• left: float left
• right: float right

Centering image could be an option to make image as a block element and make it centered in the RTE but in fact as img is an inline element the center option is not necessary, using text-align: center should do the trick.

[jpuri]

Hey @gregBerthelot: I see your point, I will look into it.

[gregBerthelot]

@jpuri did you get time to look into this enhancement?

[liSong5713]

I'm also looking forward to.please .

[gregBerthelot]

@jpuri any chance you get time to look into it?

[jpuri]

Hi @gregBerthelot , not a lot of time, but I will soon try to look at this.

[gregBerthelot]

Hi Jyoti,

I think image feature should be also enhanced with the ability to change image size once added to the editor.

Cheers
Greg

[nicolastakashi]

Any update about this? It's very useful

[jpuri]

Sorry no updates, I did not got time for this one yet.

[gorjan-mishevski]

Can you at least please give us some directions to implement this ourselves? This is a deal breaker for me

[jpuri]

Currently image size can only be set when image is added, resize feature can be added by allowing user to change size either using mouse or an input. Image block properties can then be update to new size. Hope this helps @gorjan-mishevski .

[gorjan-mishevski]

@jpuri Thanks, yes, every bit helps. I am still hacking around, do you know of a clean way I can extend it with a draft plugin. I need an advanced version for editing images (Opening a file browser for the user to choose from storage). Or am I boxed in and can't extend it? I can do a PR if I can make this thing work.

[jpuri]

Opening file browser already works, check this: https://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/ImageUpload/index.js.

[gorjan-mishevski]

Oh cool. Thank you very much! You are awesome 🌟

[jpuri]

Editor is extensible in way that it allows adding new toolbar options. You can use it as controlled component and do any changes to editor state. Custom block rendering functions can also be written.

Here is example of custom toolbar options: https://github.com/jpuri/react-draft-wysiwyg/blob/master/stories/CustomToolbar/index.js#L10

But draft has a learning curve :(

I hope that helps, let me know if you have more queries.

[gorjan-mishevski]

Yeah, draft is hard. Facebook really likes to complicate things, I love it :)
No more queries from me, thank you for your time. Have a great day ahead!

[revskill10]

I need this feature (resizing image after being uploaded). Do you have any roadmap for this feature ?

[calvinkei]

Any update on this?

[hodgef]

I would recommend anyone in this situation to use Jodit instead. It has working image placement, resize, etc. and the experience is very good out of the box. It also has source editor built in.

Sadly react-draft-wysiwyg has been a painful experience for me. Hours upon hours trying to make things work. I hope to spare someone the hassle.