Skip to content

feat: UI element creation API - #576

Merged
YousefED merged 8 commits into
mentions-suggestionsfrom
ui-component-creation-refactor
Feb 15, 2024
Merged

feat: UI element creation API#576
YousefED merged 8 commits into
mentions-suggestionsfrom
ui-component-creation-refactor

Conversation

@matthewlipski

@matthewlipski matthewlipski commented Feb 13, 2024

Copy link
Copy Markdown
Collaborator

Based on the findings from implementing the custom suggestion menu API, this PR changes how UI elements and their positioners are created. There are now 2 hooks for each UI element:

useUiElementData - Provides the data associated with the UI element, e.g. block, dragStart, etc for the side menu.
useUiElementPosition - Provides attributes which, when added to the UI element's parent, control and position it.

This should make it easier and more intuitive to create custom menus, since menu data and position props are separated, making each of them easier to explain.

@vercel

vercel Bot commented Feb 13, 2024

Copy link
Copy Markdown

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

Name Status Preview Updated (UTC)
blocknote ✅ Ready (Inspect) Visit Preview Feb 15, 2024 1:30pm
blocknote-website ✅ Ready (Inspect) Visit Preview Feb 15, 2024 1:30pm

@YousefED YousefED left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Awesome, only some small comments and these things we should discuss together:

  • was thinking there's some repetitive code, maybe we can simplify this? Although then I stumbled upon the Table + Suggestion implementations which do differ, so maybe it's not that useful
  • Discuss naming of Default****
  • Discuss API of BlockNoteDefaultUI
  • I think I still need to review the "final state" of the mentions implementation, right? e.g.: #534 (comment)

Comment thread packages/react/src/components/HyperlinkToolbar/hooks/useHyperlinkToolbarData.ts Outdated
Comment thread packages/react/src/components/TableHandles/hooks/useTableHandlesPosition.ts Outdated
Comment thread packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts Outdated
Comment thread packages/react/src/components-shared/DefaultPositionedUiElement.tsx Outdated
Comment thread packages/react/src/hooks/useUiElement.ts Outdated
Comment thread packages/react/src/hooks/useUiElementPosition.ts Outdated
Comment thread packages/react/src/hooks/useUiElementPosition.ts Outdated
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