More examples

[bkniffler]

I'd love to see a few more examples of usage:

• Custom blocks containing text (maybe tables? related to Support for tables #41)
• Media (Images, videos or simply colored divs, I struggle with having those behave like a part of the document, like deleting them or adding a new line after them; drag&drop (Drag & Drop #40) and cut/copy/paste would be even better)
• Selection tracking (something like inline toolbars, related to Current selection DOM element #45)

[mmahalwy]

+1

[oyeanuj]

+1.

For custom blocks, having rich link preview could be another option. For selection tracking, fixed static or even air toolbar examples would be swell.

• Dealing with Markdown in the text would be another item on the wishlist.

[bkniffler]

Wouldn't the markdown stuff be pretty simple using something along the tweet example? I've created a little (incomplete) gist that would use marked.js: https://gist.github.com/bkniffler/ba6a95d82f2c5c06f77b

[hellendag]

Dealing with Markdown in the text would be another item on the wishlist.

Do you mean generating markdown output? I mentioned in http://facebook.github.io/draft-js/docs/api-reference-data-conversion.html that we aren't providing a ContentState-to-markdown conversion tool with the framework since we don't have a production use for markdown at Facebook, but I expect that someone will create such a utility very soon.

Certainly using decorators could be one way to style the contents immediately when markdown is applied, if that's your objective.

[WG-Com]

+1 headache for the document

no effect at _onBoldClick function , nothing changed, and this is es5

const MyEditor = React.createClass({
  ...

  _onBoldClick() {

    this.onChange(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
  }

  render() {
    const {editorState} = this.state;
    return (
      <div>
        <button onClick={this._onBoldClick}>Bold</button>
        <Editor
          editorState={editorState}
          handleKeyCommand={this.handleKeyCommand}
          onChange={this.onChange}
        />
      </div>
    );
  }
});

[hellendag]

@WG-Com: I believe that was resolved by #23.

[mitermayer]

+1 this is great

[AlastairTaft]

I'd love to see an example on how the toolbar works as seen in facebook notes. e.g. when you have a block selected, to the far left there's a couple of icons to alter your formatting or insert an image. Is this done by rendering the content block which has focus differently?

EDIT: Related to #45

[AlastairTaft]

I put together a demo repo that functions more like facebook notes if anyone needs.

[bkniffler]

You seem to have similar goals like me, maybe we should join forces on this one instead of working on different repos. What do you think? https://github.com/bkniffler/draft-wysiwyg

[AlastairTaft]

@bkniffler Sure, nice work, I just took a look at your repo and what you've got so far looks pretty good

[satyadeeproat]

@hellendag : If you don't use the markdown, then how you convert the contentState to HTML format in facebook notes?

[tylercraft]

@satyadeeproat, apologies for the late reply. To answer your question, we don't generate HTML for Facebook notes. We use the state to build the react tree.

Looks like some of the demo's asked for are now in the examples folder. If there are other examples people would like, please fee free to reopen and ask, or even better would be to submit a PR for one.

[francisrod01]

@bkniffler I report a bug in your gist.

[francisrod01]

Why draft-js doesn't have a way to visualize your content without rendering the editor as readonly? 0.o

The text is saved as blocksMap array as json string and I don't know how to visualize this content.

This is no make sense!