Skip to content
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.

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

feat: React re-architecture #270

Merged
merged 44 commits into from
Aug 1, 2023
Merged

feat: React re-architecture #270

merged 44 commits into from
Aug 1, 2023

Conversation

matthewlipski
Copy link
Collaborator

@matthewlipski matthewlipski commented Jul 10, 2023

There are a number of issues with the current rendering implementation in React:

  • Each menu/toolbar is rendered under a separate root.
  • The editor is not immediately initialized upon calling useBlocknote, causing issues.
  • Each menu is attached to document.body instead of being a sibling to the editor.
  • The way in which factories are designed makes sense for a vanilla implementation, but using them for React is unintuitive.
  • Plugins have too much responsibility - they should only provide information for UI elements to render, but instead they also render the UI elements themselves.
  • Supplying custom menu/formatting components is done using the uiFactories option, which is kind of clunky.

This PR is a major rethink of how we create, render, and pass elements to the editor in React (also changes the vanilla implementation a bit).

@vercel
Copy link

vercel bot commented Jul 10, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
blocknote-website ✅ Ready (Inspect) Visit Preview Aug 1, 2023 7:47pm

@matthewlipski matthewlipski changed the title React re-architecture feat: React re-architecture Jul 10, 2023
Copy link
Collaborator

@YousefED YousefED left a comment

Choose a reason for hiding this comment

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

added number of comments. Will also create a separate PR with some fixes / changes.

About the overall architecture, I have following questions:

  • does it make sense that "static" things like "freezeMenu" are part of "state"? (sorry for opening up this discussion again, seems we're going a bit back and forth)
  • Plugin views are recreated indeed when other plugins are changed / added. This is by design in prosemirror, probably so that plugins can react to changes to the view that other plugins make. Although it works (see my separate PR that fixes the issues you ran into with this), I think it will be nicer (and faster) to register all plugins on editor instantation

After the comments have been addressed, lets discussed this including your bullets above that haven't been addressed yet

packages/website/docs/docs/side-menu.md Show resolved Hide resolved
packages/website/docs/docs/side-menu.md Show resolved Hide resolved
packages/website/docs/docs/side-menu.md Outdated Show resolved Hide resolved
packages/website/docs/docs/ui-elements.md Show resolved Hide resolved
packages/website/docs/docs/ui-elements.md Outdated Show resolved Hide resolved
* fix initialcontent and uniqueid

* fix

* Removed ready check in `BlockNoteView`

---------

Co-authored-by: Matthew Lipski <matthewlipski@gmail.com>
packages/react/src/hooks/useBlockNote.ts Outdated Show resolved Hide resolved
packages/website/docs/docs/side-menu.md Outdated Show resolved Hide resolved
@matthewlipski matthewlipski merged commit 0653819 into main Aug 1, 2023
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants