Skip to content

perf: optimizations for composer with Tiptap #6315

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gaearon merged 4 commits into from
Nov 23, 2024
Merged

perf: optimizations for composer with Tiptap #6315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
42c7689
chore: update tiptap packages
nperez0111 Nov 13, 2024
c9c6dbb
perf: reduce number of re-renders
nperez0111 Nov 13, 2024
b204d5d
refactor: apply min height without a layout effect
nperez0111 Nov 13, 2024
5fe4ed4
Remove stale zeed-dom resolution
gaearon Nov 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 15 additions & 16 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,18 +90,18 @@
"@tanstack/query-async-storage-persister": "^5.25.0",
"@tanstack/react-query": "^5.8.1",
"@tanstack/react-query-persist-client": "^5.25.0",
"@tiptap/core": "^2.6.6",
"@tiptap/extension-document": "^2.6.6",
"@tiptap/extension-hard-break": "^2.6.6",
"@tiptap/extension-history": "^2.6.6",
"@tiptap/extension-mention": "^2.6.6",
"@tiptap/extension-paragraph": "^2.6.6",
"@tiptap/extension-placeholder": "^2.6.6",
"@tiptap/extension-text": "^2.6.6",
"@tiptap/html": "^2.6.6",
"@tiptap/pm": "^2.6.6",
"@tiptap/react": "^2.6.6",
"@tiptap/suggestion": "^2.6.6",
"@tiptap/core": "^2.9.1",
"@tiptap/extension-document": "^2.9.1",
"@tiptap/extension-hard-break": "^2.9.1",
"@tiptap/extension-history": "^2.9.1",
"@tiptap/extension-mention": "^2.9.1",
"@tiptap/extension-paragraph": "^2.9.1",
"@tiptap/extension-placeholder": "^2.9.1",
"@tiptap/extension-text": "^2.9.1",
"@tiptap/html": "^2.9.1",
"@tiptap/pm": "^2.9.1",
"@tiptap/react": "^2.9.1",
"@tiptap/suggestion": "^2.9.1",
"@types/invariant": "^2.2.37",
"@types/lodash.throttle": "^4.1.9",
"@types/node": "^20.14.3",
Expand Down Expand Up @@ -260,13 +260,12 @@
"webpack-bundle-analyzer": "^4.10.1"
},
"resolutions": {
"@radix-ui/react-focus-scope": "1.1.0",
"@react-native/babel-preset": "0.74.1",
"@types/react": "^18",
"**/zeed-dom": "0.10.9",
"**/zod": "3.23.8",
"**/expo-constants": "16.0.1",
"**/expo-device": "6.0.2",
"@react-native/babel-preset": "0.74.1",
"@radix-ui/react-focus-scope": "1.1.0"
"**/zod": "3.23.8"
},
"jest": {
"preset": "jest-expo/ios",
Expand Down
11 changes: 3 additions & 8 deletions src/view/com/composer/text-input/TextInput.web.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,6 +225,7 @@ export const TextInput = React.forwardRef(function TextInputImpl(
autofocus: 'end',
editable: true,
injectCSS: true,
shouldRerenderOnTransaction: false,
onCreate({editor: editorProp}) {
// HACK
// the 'enter' animation sometimes causes autofocus to fail
Expand Down Expand Up @@ -317,15 +318,9 @@ export const TextInput = React.forwardRef(function TextInputImpl(
style.lineHeight = style.lineHeight
? ((style.lineHeight + 'px') as unknown as number)
: undefined
style.minHeight = webForceMinHeight ? 140 : undefined
return style
}, [t, fonts])

React.useLayoutEffect(() => {
let node = editor?.view.dom

@nperez0111 nperez0111 Nov 13, 2024 •
edited
Loading

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

editor.view.dom is actually referencing the same DOM node as the one that EditorContent renders. Which is why this change was made

You can see EditorContent here is just trying to get a ref to a react mounted empty div (and we initialize the editor from there in pure JS)

@gaearon gaearon Nov 13, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

interesting, i'll need to have a look! i remember trying to do it there but it didn't work for some reason, maybe i made a mistake though.

@nperez0111 nperez0111 Nov 13, 2024

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No worries, I did double-check on my end, but always good to have a second look!

if (node) {
node.style.minHeight = webForceMinHeight ? '140px' : ''
}
}, [editor, webForceMinHeight])
}, [t, fonts, webForceMinHeight])

return (
<>
Expand Down
Loading