-
Notifications
You must be signed in to change notification settings - Fork 2.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
New sidemenu for notes editor (#6527)
@Bonapara @lucasbordeau This PR addresses issue #6489: - Created an entire sidemenu for the block editor. ## Review Request Please review the implementation of the custom sidemenu. ## Outstanding Issues 1. Sidemenu Positioning: - The current placement is determined by the BlockNote package. - I need assistance in positioning it according to the Figma designs. - Attempted adding margin to the sidemenu, but this solution doesn't scale well across different screen sizes. 2. Props Spreading in `CustomSidemenu.tsx`: - Unable to avoid props spreading due to the third-party BlockNote components. - Added eslint-disable comments as a temporary solution. Your insights on these challenges would be greatly appreciated, especially regarding the sidemenu positioning and any potential alternatives to props spreading. https://github.com/user-attachments/assets/4914a037-a115-4189-88bc-a41d121d309d --------- Co-authored-by: Félix Malfait <[email protected]>
- Loading branch information
1 parent
1ed31d9
commit 0c99bfb
Showing
6 changed files
with
200 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
packages/twenty-front/src/modules/ui/input/editor/components/CustomAddBlockItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { blockSchema } from '@/activities/blocks/schema'; | ||
|
|
||
| import { useComponentsContext } from '@blocknote/react'; | ||
|
|
||
| type CustomAddBlockItemProps = { | ||
| editor: typeof blockSchema.BlockNoteEditor; | ||
| children: React.ReactNode; // Adding the children prop | ||
| }; | ||
|
|
||
| type ContentItem = { | ||
| type: string; | ||
| text: string; | ||
| styles: any; | ||
| }; | ||
| export const CustomAddBlockItem = ({ | ||
| editor, | ||
| children, | ||
| }: CustomAddBlockItemProps) => { | ||
| const Components = useComponentsContext(); | ||
|
|
||
| const handleClick = () => { | ||
| const blockIdentifier = editor.getTextCursorPosition().block; | ||
| const currentBlockContent = blockIdentifier?.content as | ||
| | Array<ContentItem> | ||
| | undefined; | ||
|
|
||
| const [firstElement] = currentBlockContent || []; | ||
|
|
||
| if (firstElement === undefined) { | ||
| editor.openSelectionMenu('/'); | ||
| } else { | ||
| editor.sideMenu.addBlock(); | ||
| editor.openSelectionMenu('/'); | ||
| editor.sideMenu.unfreezeMenu(); | ||
| } | ||
| }; | ||
| return ( | ||
| <Components.Generic.Menu.Item onClick={handleClick}> | ||
| {children} | ||
| </Components.Generic.Menu.Item> | ||
| ); | ||
| }; |
67 changes: 67 additions & 0 deletions
67
packages/twenty-front/src/modules/ui/input/editor/components/CustomSideMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| import { blockSchema } from '@/activities/blocks/schema'; | ||
| import { CustomAddBlockItem } from '@/ui/input/editor/components/CustomAddBlockItem'; | ||
| import { CustomSideMenuOptions } from '@/ui/input/editor/components/CustomSideMenuOptions'; | ||
| import { | ||
| BlockColorsItem, | ||
| DragHandleButton, | ||
| DragHandleMenu, | ||
| RemoveBlockItem, | ||
| SideMenu, | ||
| SideMenuController, | ||
| } from '@blocknote/react'; | ||
| import styled from '@emotion/styled'; | ||
| import { IconColorSwatch, IconPlus, IconTrash } from 'twenty-ui'; | ||
|
|
||
| type CustomSideMenuProps = { | ||
| editor: typeof blockSchema.BlockNoteEditor; | ||
| }; | ||
|
|
||
| const StyledDivToCreateGap = styled.div` | ||
| width: ${({ theme }) => theme.spacing(2)}; | ||
| `; | ||
|
|
||
| export const CustomSideMenu = ({ editor }: CustomSideMenuProps) => { | ||
| return ( | ||
| <SideMenuController | ||
| sideMenu={(props) => ( | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| <SideMenu {...props}> | ||
| <DragHandleButton | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} | ||
| dragHandleMenu={(props) => ( | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| <DragHandleMenu {...props}> | ||
| <CustomAddBlockItem editor={editor}> | ||
| <CustomSideMenuOptions | ||
| LeftIcon={IconPlus} | ||
| text={'Add Block'} | ||
| Variant="normal" | ||
| /> | ||
| </CustomAddBlockItem> | ||
| {/* eslint-disable-next-line react/jsx-props-no-spreading */} | ||
| <BlockColorsItem {...props}> | ||
| <CustomSideMenuOptions | ||
| LeftIcon={IconColorSwatch} | ||
| text={'Change Color'} | ||
| Variant="normal" | ||
| /> | ||
| </BlockColorsItem> | ||
| {/* eslint-disable-next-line react/jsx-props-no-spreading */} | ||
| <RemoveBlockItem {...props}> | ||
| {' '} | ||
| <CustomSideMenuOptions | ||
| LeftIcon={IconTrash} | ||
| text={'Delete'} | ||
| Variant="danger" | ||
| /> | ||
| </RemoveBlockItem> | ||
| </DragHandleMenu> | ||
| )} | ||
| /> | ||
| <StyledDivToCreateGap /> | ||
| </SideMenu> | ||
| )} | ||
| /> | ||
| ); | ||
| }; |
39 changes: 39 additions & 0 deletions
39
packages/twenty-front/src/modules/ui/input/editor/components/CustomSideMenuOptions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { useTheme } from '@emotion/react'; | ||
| import styled from '@emotion/styled'; | ||
| import { IconComponent } from 'twenty-ui'; | ||
|
|
||
| const StyledContainer = styled.div<{ Variant: Variants }>` | ||
| color: ${({ theme, Variant }) => | ||
| Variant === 'danger' ? theme.color.red : 'inherit'}; | ||
| align-items: center; | ||
| display: flex; | ||
| flex-direction: row; | ||
| gap: ${({ theme }) => theme.spacing(2)}; | ||
| `; | ||
|
|
||
| const StyledTextContainer = styled.div``; | ||
|
|
||
| type CustomSideMenuOptionsProps = { | ||
| LeftIcon: IconComponent; // Any valid React node (e.g., a component) | ||
| Variant: Variants; | ||
| text: string; | ||
| }; | ||
|
|
||
| type Variants = 'normal' | 'danger'; | ||
|
|
||
| export const CustomSideMenuOptions = ({ | ||
| LeftIcon, | ||
| Variant, | ||
| text, | ||
| }: CustomSideMenuOptionsProps) => { | ||
| const theme = useTheme(); | ||
| return ( | ||
| <StyledContainer Variant={Variant}> | ||
| <LeftIcon | ||
| size={theme.icon.size.md} | ||
| stroke={theme.icon.stroke.sm} | ||
| ></LeftIcon> | ||
| <StyledTextContainer>{text}</StyledTextContainer> | ||
| </StyledContainer> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters