Comments (18)
For those interested, here is an example of using Prism to highlight code block in a Rich text editor: https://gist.github.com/SamyPesse/0690602631c19aedcfa0a28feabb9d2b
And here is a gif of the result:
from draft-js.
@jorilallo We're currently also using CM for Markdown editing, but working on switching to Draft:
- markup-it Markdown parser to generate draft's contentState, or markdown from draft's contentState
- react-markup-editor Editor built on top of Draft with table editing, etc (it requires #216).
The hard parts are tables, lists and blockquotes, since they are trees in the markdown AST. react-markup-editor abstracts this with its own state and handle nested draft editor.
The goal is also to supports syntax highlighting for code blocks.
BTW: These modules are still Work-in-Progress.
from draft-js.
Sweet, thanks for starting this.
I hacked Prism into a decorator class, and got a decent code editor working. Since Prism is built for one-time parsing and highlighting of static content, though, it wasn't really ideal for quickly decorating on the fly. The entire ContentState
had to be parsed on every change, so as the file grew, the editor got slower.
IIRC, an approach more similar to CodeMirror, with parsing context on a per-line basis, would allow for minimal analysis on each change. It's been a while since I last looked into this, though. :)
from draft-js.
Great! Thanks for moving it over here. Since my current use case ends up being lots of individual editor views (that are currently CodeMirror in a React environment), this could end up working out ok. Especially if we're only rendering the editor component that is in view. To be more concrete, the use case is an open source literate coding notebook (backed by Jupyter/IPython):
Swapping out the markdown area to be a draft-js editor is currently on my "scope it out" list.
I'm assuming I'd need to try out your first approach before I could even start thinking about the per-line parsing context.
from draft-js.
@rgbkrk Awesome. Just to clarify: is your goal to remove the markdown CM in favor of a Draft WYSWIYG editor, or to use Draft for direct markdown editing?
from draft-js.
My goal is to remove the markdown CM in favor of a Draft WYSIWYG editor and entertain the possiblity of switching the code editors out for Draft.
from draft-js.
Our underlying model (the notebook document) relies on Markdown underneath for those. The one in the spec lists marked while the demo above is using commonmark. That's merely the on disk format though.
from draft-js.
I'm in a pretty similar situation as @rgbkrk, currently using CM for Markdown editing but thinking about switching to Draft.js for WYSIWYG. If anyone dives more into this, would love to hear about good solution patterns :)
from draft-js.
@hellendag Can you share your decorator class example? I'm trying to build a highlighter of a toy language I built, and If I had the example, I could get this done much quicker! 😄
from draft-js.
@SamyPesse Interesting, this is pretty much what I was looking for as I'm building a sideproject in the similar space (big fan of Gitbook!). I'll take another look when I get to rebuilding with Draft.js
from draft-js.
I've published it as a node module: https://github.com/SamyPesse/draftjs-prism
We are probably going to use it for the GitBook Editor, and I think some perf optimizations can be done for large code blocks.
from draft-js.
I've also followed a similar approach powered by something other than Prism, but as @hellendag noted things get slower as the content size increases.
I'd love to hear how a more incremental approach can be achieved. My sense is that it's not using the decorator approach.
from draft-js.
Hi, I'm using a similar approach to @SamyPesse parsing the content in getDecorations
and using the retuned AST to set the decorations. It works, but it seems out of place (for the reasons mentioned in the thread).
I tried another approach which is to create entities, but I quickly run into problems. It seems that modifying the editorState
in the onChange
event is not a good idea.
My use case is to use draft for a formula editor. As the user types I parse the formula, and based on the AST I apply styles + add some interactivity (like clicking in a function to show the function help).
Apart from using decorators, is there any other approach to tokenize an input?
from draft-js.
I'm doing the same thing with a lexer and parser. I'm using a decorator at the moment but have been trying to figure out #453 so I can use onChange
.
from draft-js.
Just thought I'd throw in https://typora.io for inspiration - its source isn't published, but its editing between markdown, code, and "rendered" content is seamless
from draft-js.
@rgbkrk is the code behind that gif that you posted open-source?
Edit: found it https://github.com/nteract/nteract
from draft-js.
Yup! You found the right one!
from draft-js.
I think it's save to assume that this issue doesn't need to stay open any longer. Feel free to continue adding comments however 👍
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.