Comments (15)
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
from draft-js.
@bkniffler Sure, nice work, I just took a look at your repo and what you've got so far looks pretty good
from draft-js.
+1
from draft-js.
+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.
from draft-js.
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.
from draft-js.
+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>
);
}
});
from draft-js.
@WG-Com: I believe that was resolved by #23.
from draft-js.
+1 this is great
from draft-js.
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
from draft-js.
I put together a demo repo that functions more like facebook notes if anyone needs.
from draft-js.
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
from draft-js.
@hellendag : If you don't use the markdown, then how you convert the contentState to HTML format in facebook notes?
from draft-js.
@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.
from draft-js.
@bkniffler I report a bug in your gist.
from draft-js.
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!
from draft-js.
Related Issues (20)
- read-only font size not working
- Ctrl+A selection doesn't work in Firefox when there are action items
- Bug in demo text editor on website HOT 4
- created by DraftEditorTextNode
- state in decorator are memorised
- Add custom classes
- Ordered and unordered lists don't work
- Is/should convertToRaw be based on some kind of open standard? HOT 1
- How to insert texts via google chrome extension to an input created by DraftJS HOT 1
- Pressing return jumps to start of line in Android API 33 HOT 1
- How to change blockType by pressing keyboard
- why draftInlineStyleType only can be default type? HOT 1
- How to get the cursor position? HOT 4
- URGENT :: How to update words arrays in handleStrategy of decorator?
- how to stop the style i add in replaceText?
- pre select inline style, then input in composition mode, the selected inlinestyle not work
- when input some IME punctuation, the editor crashs
- wrong return value of getInlineStyleForCollapsedSelection and getInlineStyleForNonCollapsedSelection
- http://localhost:8000/
- InvalidStateError: 'extend' requires a Range to be added to the Selection HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from draft-js.