React-draft-wysiwyg: Code Block support

[chiedo]

Is there any way we could get code block support to do the equivalent of

var x,
    y,
    z;

Currently it looks like there is only inline code support.

[jpuri]

Yes @chiedo : code block support is not present atm. But yep something I will consider adding soon.

[chiedo]

Thanks @jpuri

Great work!

[chiedo]

Hey @jpuri

Is this a particularly difficult task and is there any reason this wasn't done initially?

Just curious. If it isn't particularly difficult, is there any direction you could give me in regards to how to add this feature? I can go ahead and write the code if you save me some time by pointing me in the right direction.

Thanks!

[jpuri]

@chiedo : I think setting block type and adding custom block renderer should do it. I will see if I can get time - I will add this soon.

[chiedo]

OK cool! Thank you @jpuri I appreciate your hard work.

[ChuckIrvine]

I am also looking for an editor with code block support. Specifically, I'd like to be able to create a code block and then paste code into it from the clipboard. FYI - this doesn't seem to be supported by draftjs. If you go to [https://draftjs.org/] and try to paste code into a code block you'll see that it's not working correctly. Since this editor is based on draftjs, the implementation in react-draft-wysiwyg may not work either.

[jpuri]

@ChuckIrvine : DraftJS is an extensible editor framework. We can definitely build this support on top of drafts - like other custom features built in this editor. Right now you cause inline code, it can even be styled in light gray using css. It can go to multiline with Shift-Enter.

I will try to soon spare some time for developing code-block.

[ChuckIrvine]

Thanks so much, Jyoti!

On Jul 24, 2017, at 12:58 AM, Jyoti Puri [e-mail] wrote:

@ChuckIrvine https://github.com/chuckirvine : DraftJS is an extensible editor framework. We can definitely build this support on top of drafts - like other custom features built in this editor. Right now you cause inline code, it can even be styled in light gray using css. It can go to multiline with Shift-Enter.

I will try to soon spare some time for developing code-block.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/jpuri/react-draft-wysiwyg/issues/367#issuecomment-317326714, or mute the thread https://github.com/notifications/unsubscribe-auth/AAoGamS_Bf_DMTdl4iF5GieU30MyX7Zpks5sRDKdgaJpZM4OJcMD.

[haharu]

Really need the extendable block renderer, thank you @jpuri

[jpuri]

I am working on code block support right now and will very soon release it.

[jpuri]

Released [email protected] with support for code blocks.

[chiedo]

Thank you @jpuri :)

Any docs on how to enable it?

[chiedo]

Never mind! I found it! It's under the dropdown with the h1 tags. Any reason it isn't right next to the {} symbol?

I think that may be a better user experience.