add TipTap as an editor#16
Conversation
|
Nice! A lot of the comments from #13 (comment) also apply here. A few additional thoughts
|
|
@sergioramos @danvk @cguedes could y'all review this PR and get it ready for the merge to |
danvk
left a comment
danvk
left a comment
There was a problem hiding this comment.
Nice to see this come together!
A few high level comments on the code:
- Did the
CollapsibleBlockcode come from somewhere or is that custom? - Please run
prettieron all files. - We should set up eslint, but I have no preference about whether that happens before or after this PR is merged to
main.
| @@ -0,0 +1,17 @@ | |||
| import * as React from 'react'; | |||
|
|
|||
| export default <T>(value: T, ms: number) => { | |||
There was a problem hiding this comment.
Consider using a version of this from an external library since debouncing can have lots of subtleties. It's interesting how different this implementation is than https://github.com/refstudio/refstudio/pull/13/files#diff-cda4ca785473197ac020d50f1efbbecd157cb01dc09e86d93bac11be09bf54fa
There was a problem hiding this comment.
I actually implemented both versions, and the second time I figured it made more sense for the hook to debounce a value rather than a callback's result.
As per your suggestion I have now installed usehooks instead of having our own implementation.
|
|
||
| {selection && ( | ||
| <div style={{ display: 'flex', flexDirection: "column", gap: "1rem" }}> | ||
| <div style={{ borderWidth: "1px", borderColor: "rgb(254 249 195)", backgroundColor: "rgb(254 252 232)", padding: "1rem" }}> |
There was a problem hiding this comment.
TIL that you don't need to put commas in rgb! https://css-tricks.com/no-comma-color-functions-in-css/
|
|
||
| {selection && ( | ||
| <div style={{ display: 'flex', flexDirection: "column", gap: "1rem" }}> | ||
| <div style={{ borderWidth: "1px", borderColor: "rgb(254 249 195)", backgroundColor: "rgb(254 252 232)", padding: "1rem" }}> |
There was a problem hiding this comment.
We should discuss everyone's preferences around inline styles. I find that all the inline styles in this component make it a bit difficult to follow the logic.
There was a problem hiding this comment.
We will be using tailwind for style from now on. I only used inline style for the PoC and this will be removed before we merge the PR
This reverts commit 586b463.
- also created editor API for the editor component
|
@sergioramos this is ready for review |
5 participants
This PR is the PoC for using TipTap within the evaluation of text editors being discussed in #4
POC with 3 panels:
Left Panel: List of project's documents
Center Panel: TipTap editor
Right Panel : references and AI interactions
The editor supports basic text formatting and draggable collapsible blocks.
Due to tauri's limitation (see this issue), HTML drag events don't work properly with the
fileDropEnabledconfig