Replace draft-js with a textarea #568
Conversation
|
The more I get into this the more I feel like we need a text editor that more intrinsically coupled to the data model. I also want to check out the Monaco editor (which powers Visual Studio Code) and see if we can get it look right visually. It's already blazing fast and they have done the heavy-lifting to making large documents scroll and update in controlled manners. There are approaches that involve splitting the input into separate |
There was a problem hiding this comment.
First thing first: this does not boot with a fresh node_modules folder, since there are a couple of Draft leftovers around:
https://github.com/Automattic/simplenote-electron/blob/master/scss/app.scss#L37
https://github.com/Automattic/simplenote-electron/blob/master/webpack.config.dll.js#L12
(Locally I've also got them in the desktop-build/package.json, but I assume it's automatically generated after the normal package.json on build)
|
Thanks @Copons - those references have been removed |
|
@Copons I think this one is ready. Interested in giving it a go-around @kwight? In my own tests it appears significantly faster to load very large notes. List autocomplete appears to be working relatively well - I'm not sure how to exhaustively test it. Indent and outdent also appear to be working as I expect them to. |
|
(Sorry for the ugly review dismissal message, didn't think it appeared like that - and it's not editable!) Anyway, styling problem: the textarea vertical scrollbar.
In Preview mode, the overflowing container is the entire "content section", so the scrollbar is correctly positioned next to the right edge of the screen. Ideally, in Edit mode, we'd want for the containers to have no padding and no scrollbars; while applying them to the textarea instead. .note-detail {
overflow-y: hidden;
}
.note-detail-textarea {
max-width: 100%;
padding: 0;
}
.note-detail-textarea textarea {
// small screens
padding: 24px;
// medium screens
// up to 780px = max width of textarea (684px) + padding (48px per side)
padding: 24px 48px;
// large screens
// dynamically calculate the horizontal padding
padding: 24px calc( ( ( 100% - 780px) / 2 ) + 48px );
} |
|
Whenever I stop typing in the textarea, the cursor jumps to the tag section:
No other surprises though; also tested list behaviour (thought numbered lists wasn't working, but it seems only bulleted lists are supported?). |
dmsnell
force-pushed
the
remove/draft-js
branch
2 times, most recently
from
dc7486f to
ed300de
Compare
|
@dmsnell is this one ready to look at? Are the problems you listed in the summary something we're ok shipping with or did you need help tracking them down? |
Draft-js was lovely but a performance hog on long notes (notes with several thousand lines). This patch brings back the `textarea` and tries to maintain some control over the content, adding back the helpers such as list completion.
dmsnell
force-pushed
the
remove/draft-js
branch
from
ed300de to
7e7f4a6
Compare
|
I updated this branch to the latest master but I think I lost some important bits related to focus - stuff that was updated in master since I started working here. Need to resolve that before merging. |
|
@dmsnell do you need any help closing this PR? |
We've had a few issues with draft-js including performance conderns. Recently we've also been wanting to explore Markdown syntax highlighting and while draft-js is ammenable to that it leaves considerable implementation details up to us. In #568 I proposed a change to replace draft-js with a plain old textarea which greatly improved the performance for large notes but also had the major drawback that we lost our ability to easily decorate text. Microsoft's Monaco editor powers Visual Studio code and is incredibly performant thanks to the fact that they have rebuild all the editor behaviors in custom ways to handle big files and syntax highlighting. In this patch we're taking advantage of the work that Microsoft has done and I'm proposing a switch to Monaco. It includes Markdown syntax highlighting for free. This comes through a React wrapper around the editor. The only real drawback I see here is that Monaco is much larger than the textarea in terms of raw KB though I'm not sure how it compares to draft-js. In Electron this isn't too much of a concern but if/when we push this version of the app out to the web it could come with other problems. Monaco also doesn't officially support mobile devices either I think. **Remaining work** Monaco already has great auto-indent support and provides many of the behaviors for us which we were implementing by hand with draft-js or in the textarea. However, it doesn't provide all such as auto-lists. There remains some dataflow issues that exist already in the app too but which aren't solved here. When making changes it's possible to queue up changes but get updates from the server in the meantime and mess up the editor.
We've had a few issues with draft-js including performance conderns. Recently we've also been wanting to explore Markdown syntax highlighting and while draft-js is ammenable to that it leaves considerable implementation details up to us. In #568 I proposed a change to replace draft-js with a plain old textarea which greatly improved the performance for large notes but also had the major drawback that we lost our ability to easily decorate text. Microsoft's Monaco editor powers Visual Studio code and is incredibly performant thanks to the fact that they have rebuild all the editor behaviors in custom ways to handle big files and syntax highlighting. In this patch we're taking advantage of the work that Microsoft has done and I'm proposing a switch to Monaco. It includes Markdown syntax highlighting for free. This comes through a React wrapper around the editor. The only real drawback I see here is that Monaco is much larger than the textarea in terms of raw KB though I'm not sure how it compares to draft-js. In Electron this isn't too much of a concern but if/when we push this version of the app out to the web it could come with other problems. Monaco also doesn't officially support mobile devices either I think. **Remaining work** Monaco already has great auto-indent support and provides many of the behaviors for us which we were implementing by hand with draft-js or in the textarea. However, it doesn't provide all such as auto-lists. There remains some dataflow issues that exist already in the app too but which aren't solved here. When making changes it's possible to queue up changes but get updates from the server in the meantime and mess up the editor.
|
Closed in favor of #692 |
Draft-js was lovely but a performance hog on long notes (notes with
several thousand lines).
This patch brings back the
textareaand tries to maintain some controlover the content, adding back the helpers such as list completion.
Problems: