Skip to content

Commit 434075d

Browse files
matthewlipskiYousefED
matthewlipski
and
YousefED
authored
feat: Separate image, hyperlink, & table components for export (#625)
* wip * Refactored image toolbar * Refactored image toolbar, hyperlink toolbar, and table handles * Implemented PR feedback * Implemented PR feedback * Implemented PR feedback * refactor: Clean up component code (#637) * Cleaned up component code * Renamed "Link" in components to "Hyperlink" * Implemented PR feedback * alternative solution for toolbar fadeout (#645) * chore: Playwright update (#640) * Updated playwright * Small fix * dont upgrade tiptap etc * fix pw install? --------- Co-authored-by: yousefed <[email protected]> * fix `setEditable` called when not necessary (#635) * Added temp fix for shortcuts and input rules in tables (#561) --------- Co-authored-by: Yousef <[email protected]> * Renamed hyperlink toolbar -> link toolbar and small changes --------- Co-authored-by: Yousef <[email protected]>
1 parent 2b01f5e commit 434075d

File tree

85 files changed

+1180
-1116
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+1180
-1116
lines changed

‎docs/pages/docs/advanced/vanilla-js.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ While it's up to you to decide how you want the elements to be rendered, BlockNo
4949
```typescript
5050
type UIElement =
5151
| "formattingToolbar"
52-
| "hyperlinkToolbar"
52+
| "linkToolbar"
5353
| "imageToolbar"
5454
| "sideMenu"
5555
| "suggestionMenu"

‎docs/pages/docs/editor-basics/setup.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export type BlockNoteViewProps = {
8787
dark: Theme;
8888
};
8989
formattingToolbar?: boolean;
90-
hyperlinkToolbar?: boolean;
90+
linkToolbar?: boolean;
9191
sideMenu?: boolean;
9292
slashMenu?: boolean;
9393
imageToolbar?: boolean;
@@ -108,7 +108,7 @@ export type BlockNoteViewProps = {
108108

109109
`formattingToolbar`: Whether the [Formatting Toolbar](/docs/ui-components/formatting-toolbar) should be enabled.
110110

111-
`hyperlinkToolbar`: Whether the Hyperlink Toolbar should be enabled.
111+
`linkToolbar`: Whether the Link Toolbar should be enabled.
112112

113113
`sideMenu`: Whether the [Block Side Menu](/docs/ui-components/side-menu) should be enabled.
114114

‎docs/pages/docs/styling-theming/overriding-css.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ Within the editor's DOM structure, you'll find many elements have classes with t
3131

3232
`.bn-inline-content`: Element for only the block's editable, rich text content.
3333

34-
`.bn-toolbar`: Element for the formatting & hyperlink toolbars.
34+
`.bn-toolbar`: Element for the formatting & link toolbars.
3535

3636
`.bn-side-menu`: Element for the side menu.
3737

‎docs/pages/docs/ui-components.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,5 @@ BlockNote includes a number of UI Components (like menus and toolbars) that can
1212
- [Block Side Menu](/docs/ui-components/side-menu)
1313
- [Formatting Toolbar](/docs/ui-components/formatting-toolbar)
1414
- [Suggestion Menus](/docs/ui-components/suggestion-menus)
15-
{/* - Hyperlink Toolbar */}
15+
{/* - Link Toolbar */}
1616
{/* - [Image Toolbar](/docs/ui-components/image-toolbar) */}

‎docs/pages/docs/ui-components/_meta.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"side-menu": "Block Side Menu",
33
"formatting-toolbar": "Formatting Toolbar",
4-
"hyperlink-toolbar": {
5-
"title": "Hyperlink Toolbar",
4+
"link-toolbar": {
5+
"title": "Link Toolbar",
66
"display": "hidden"
77
},
88
"image-toolbar": {

‎docs/pages/docs/ui-components/formatting-toolbar.mdx

+5-5
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,16 @@ Setting `formattingToolbar={false}` on `BlockNoteView` tells BlockNote not to sh
3232
<div className="nx-mt-6 nx-leading-7 first:nx-mt-0">
3333
<small>
3434
<strong>Tip:</strong> The children you pass to the `FormattingToolbar` component
35-
should be default dropdowns/buttons (e.g. `BlockTypeDropdown` & `BasicTextStyleButton`) or custom dropdowns/buttons
36-
(`ToolbarDropdown` & `ToolbarButton`). To see all the components you can use, head to the
35+
should be default selects/buttons (e.g. `BlockTypeSelect` & `BasicTextStyleButton`) or custom selects/buttons
36+
(`ToolbarSelect` & `ToolbarButton`). To see all the components you can use, head to the
3737
[Formatting Toolbar's source code](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx).
3838
</small>
3939
</div>
4040

41-
## Changing Block Type Dropdown Items
41+
## Changing Block Type Select (Dropdown) Items
4242

43-
The first element in the default Formatting Toolbar is the Block Type Dropdown, and you can change the items in it. The demo makes the Block Type Dropdown work for image blocks by adding an item to it.
43+
The first element in the default Formatting Toolbar is the Block Type Select, and you can change the items in it. The demo makes the Block Type Select work for image blocks by adding an item to it.
4444

4545
<Example name="ui-components/formatting-toolbar-block-type-items" />
4646

47-
Here, we use the `FormattingToolbar` component but keep the default buttons (we don't pass any children). Instead, we pass our customized Block Type Dropdown items using the `blockTypeDropdownItems` prop.
47+
Here, we use the `FormattingToolbar` component but keep the default buttons (we don't pass any children). Instead, we pass our customized Block Type Select items using the `blockTypeSelectItems` prop.

‎docs/pages/docs/ui-components/hyperlink-toolbar.mdx

+17-17
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
---
2-
title: Hyperlink Toolbar
3-
description: The Hyperlink Toolbar appears whenever you hover a link in the editor.
4-
imageTitle: Hyperlink Toolbar
5-
path: /docs/hyperlink-toolbar
2+
title: Link Toolbar
3+
description: The Link Toolbar appears whenever you hover a link in the editor.
4+
imageTitle: Link Toolbar
5+
path: /docs/link-toolbar
66
---
77

88
import { Example } from "@/components/example";
99

10-
# Hyperlink Toolbar
10+
# Link Toolbar
1111

12-
The Hyperlink Toolbar appears whenever you hover a link in the editor.
12+
The Link Toolbar appears whenever you hover a link in the editor.
1313

1414
TODO Image
1515

16-
[//]: # '<img style={{maxWidth: "600px"}} src="/img/screenshots/hyperlink_toolbar.png" alt="image" />'
16+
[//]: # '<img style={{maxWidth: "600px"}} src="/img/screenshots/link_toolbar.png" alt="image" />'
1717

18-
## Changing the Hyperlink Toolbar
18+
## Changing the Link Toolbar
1919

20-
You can change or replace the Hyperlink Toolbar with your own React component. In the demo below, a button is added to the default Hyperlink Toolbar, which opens a browser alert.
20+
You can change or replace the Link Toolbar with your own React component. In the demo below, a button is added to the default Link Toolbar, which opens a browser alert.
2121

22-
[//]: # (<Example name="ui-components/hyperlink-toolbar-buttons" />)
22+
[//]: # (<Example name="ui-components/link-toolbar-buttons" />)
2323

24-
We use the `HyperlinkToolbar` component to create a custom Hyperlink Toolbar. By specifying its children, we can replace the default buttons in the toolbar with our own.
24+
We use the `LinkToolbar` component to create a custom Link Toolbar. By specifying its children, we can replace the default buttons in the toolbar with our own.
2525

26-
This custom Hyperlink Toolbar is passed to a `HyperlinkToolbarController`, which controls its position and visibility (above or below the hovered link).
26+
This custom Link Toolbar is passed to a `LinkToolbarController`, which controls its position and visibility (above or below the hovered link).
2727

28-
Setting `hyperlinkToolbar={false}` on `BlockNoteView` tells BlockNote not to show the default Hyperlink Toolbar.
28+
Setting `linkToolbar={false}` on `BlockNoteView` tells BlockNote not to show the default Link Toolbar.
2929

3030
<div className="nx-mt-6 nx-leading-7 first:nx-mt-0">
3131
<small>
32-
<strong>Tip:</strong> The children you pass to the `HyperlinkToolbar`
33-
component should be default buttons (e.g. TODO) or custom dropdowns/buttons
34-
(`ToolbarDropdown` & `ToolbarButton`). To see all the components you can
35-
use, head to the [Hyperlink Toolbar's source code](link).
32+
<strong>Tip:</strong> The children you pass to the `LinkToolbar`
33+
component should be default buttons (e.g. TODO) or custom selects/buttons
34+
(`ToolbarSelect` & `ToolbarButton`). To see all the components you can
35+
use, head to the [Link Toolbar's source code](link).
3636
</small>
3737
</div>

‎examples/02-ui-components/01-ui-elements-remove/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export default function App() {
3232
editor={editor}
3333
// Removes all menus and toolbars.
3434
formattingToolbar={false}
35-
hyperlinkToolbar={false}
35+
linkToolbar={false}
3636
imageToolbar={false}
3737
sideMenu={false}
3838
slashMenu={false}

‎examples/02-ui-components/02-formatting-toolbar-buttons/App.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import "@blocknote/core/fonts/inter.css";
22
import {
33
BasicTextStyleButton,
44
BlockNoteView,
5-
BlockTypeDropdown,
5+
BlockTypeSelect,
66
ColorStyleButton,
77
CreateLinkButton,
88
FormattingToolbar,
@@ -72,7 +72,7 @@ export default function App() {
7272
<FormattingToolbarController
7373
formattingToolbar={() => (
7474
<FormattingToolbar>
75-
<BlockTypeDropdown key={"blockTypeDropdown"} />
75+
<BlockTypeSelect key={"blockTypeSelect"} />
7676

7777
{/* Extra button to toggle blue text & background */}
7878
<BlueButton key={"customButton"} />

‎examples/02-ui-components/03-formatting-toolbar-block-type-items/App.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
22
import "@blocknote/core/fonts/inter.css";
33
import {
44
BlockNoteView,
5-
BlockTypeDropdownItem,
65
FormattingToolbar,
76
FormattingToolbarController,
8-
blockTypeDropdownItems,
97
useCreateBlockNote,
8+
blockTypeSelectItems,
9+
BlockTypeSelectItem,
1010
} from "@blocknote/react";
1111
import "@blocknote/react/style.css";
1212
import { RiAlertFill } from "react-icons/ri";
@@ -36,33 +36,33 @@ export default function App() {
3636
{
3737
type: "paragraph",
3838
content:
39-
"Try selecting some text - you'll see the new 'Alert' item in the Block Type Dropdown",
39+
"Try selecting some text - you'll see the new 'Alert' item in the Block Type Select",
4040
},
4141
{
4242
type: "alert",
4343
content:
44-
"Or select text in this alert - the Block Type Dropdown also appears",
44+
"Or select text in this alert - the Block Type Select also appears",
4545
},
4646
{
4747
type: "paragraph",
4848
},
4949
],
5050
});
5151

52-
// Renders the editor instance with the updated Block Type Dropdown.
52+
// Renders the editor instance with the updated Block Type Select.
5353
return (
5454
<BlockNoteView editor={editor} formattingToolbar={false}>
5555
<FormattingToolbarController
5656
formattingToolbar={() => (
5757
<FormattingToolbar
58-
blockTypeDropdownItems={[
59-
...blockTypeDropdownItems,
58+
blockTypeSelectItems={[
59+
...blockTypeSelectItems,
6060
{
6161
name: "Alert",
6262
type: "alert",
6363
icon: RiAlertFill,
6464
isSelected: (block) => block.type === "alert",
65-
} satisfies BlockTypeDropdownItem,
65+
} satisfies BlockTypeSelectItem,
6666
]}
6767
/>
6868
)}

‎examples/02-ui-components/03-formatting-toolbar-block-type-items/README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
# Adding Block Type Dropdown Items
1+
# Adding Block Type Select Items
22

3-
In this example, we add an item to the Block Type Dropdown, so that it works for a custom alert block we create.
3+
In this example, we add an item to the Block Type Select, so that it works for a custom alert block we create.
44

5-
**Try it out:** Select some text to open the Formatting Toolbar, and click "Alert" in the Block Type Dropdown to change the selected block!
5+
**Try it out:** Select some text to open the Formatting Toolbar, and click "Alert" in the Block Type Select to change the selected block!
66

77
**Relevant Docs:**
88

9-
- [Changing Block Type Dropdown Items](/docs/ui-components/formatting-toolbar#changing-block-type-dropdown-items)
9+
- [Changing Block Type Select Items](/docs/ui-components/formatting-toolbar#changing-block-type-select-items)
1010
- [Custom Block Types](/docs/custom-schemas/custom-blocks)
1111
- [Editor Setup](/docs/editor-basics/setup)

‎examples/02-ui-components/03-formatting-toolbar-block-type-items/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</script>
66
<meta charset="UTF-8" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Adding Block Type Dropdown Items</title>
8+
<title>Adding Block Type Select Items</title>
99
</head>
1010
<body>
1111
<div id="root"></div>

‎examples/02-ui-components/hyperlink-toolbar-buttons/README.md

-10
This file was deleted.

‎examples/02-ui-components/hyperlink-toolbar-buttons/.bnexample.json renamed to ‎examples/02-ui-components/link-toolbar-buttons/.bnexample.json

File renamed without changes.

‎examples/02-ui-components/hyperlink-toolbar-buttons/AlertButton.tsx renamed to ‎examples/02-ui-components/link-toolbar-buttons/AlertButton.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { HyperlinkToolbarProps, ToolbarButton } from "@blocknote/react";
1+
import { LinkToolbarProps, ToolbarButton } from "@blocknote/react";
22

3-
// Custom Hyperlink Toolbar button to open a browser alert.
4-
export function AlertButton(props: HyperlinkToolbarProps) {
3+
// Custom Link Toolbar button to open a browser alert.
4+
export function AlertButton(props: LinkToolbarProps) {
55
return (
66
<ToolbarButton
77
mainTooltip={"Open Alert with URL"}

‎examples/02-ui-components/hyperlink-toolbar-buttons/App.tsx renamed to ‎examples/02-ui-components/link-toolbar-buttons/App.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import "@blocknote/core/fonts/inter.css";
22
import {
33
BlockNoteView,
4-
HyperlinkToolbar,
5-
HyperlinkToolbarController,
4+
LinkToolbar,
5+
LinkToolbarController,
66
useCreateBlockNote,
77
} from "@blocknote/react";
88
import "@blocknote/react/style.css";
@@ -19,7 +19,7 @@ export default function App() {
1919
},
2020
{
2121
type: "paragraph",
22-
content: "Hover the link below to see the modified Hyperlink Toolbar",
22+
content: "Hover the link below to see the modified Link Toolbar",
2323
},
2424
{
2525
type: "paragraph",
@@ -45,12 +45,12 @@ export default function App() {
4545

4646
// Renders the editor instance.
4747
return (
48-
<BlockNoteView editor={editor} hyperlinkToolbar={false}>
49-
<HyperlinkToolbarController
50-
hyperlinkToolbar={(props) => (
51-
<HyperlinkToolbar {...props}>
48+
<BlockNoteView editor={editor} linkToolbar={false}>
49+
<LinkToolbarController
50+
linkToolbar={(props) => (
51+
<LinkToolbar {...props}>
5252
<AlertButton {...props} />
53-
</HyperlinkToolbar>
53+
</LinkToolbar>
5454
)}
5555
/>
5656
</BlockNoteView>

‎examples/02-ui-components/link-toolbar-buttons/README.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Adding Link Toolbar Buttons
2+
3+
In this example, we add a button to the Link Toolbar which opens a browser alert.
4+
5+
**Try it out:** Hover the link open the Link Toolbar, and click the new "Open Alert" button!
6+
7+
**Relevant Docs:**
8+
9+
- [Changing the Link Toolbar](/docs/ui-components/link-toolbar#changing-the-link-toolbar)
10+
- [Editor Setup](/docs/editor-basics/setup)

‎examples/02-ui-components/hyperlink-toolbar-buttons/index.html renamed to ‎examples/02-ui-components/link-toolbar-buttons/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</script>
66
<meta charset="UTF-8" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Adding Hyperlink Toolbar Buttons</title>
8+
<title>Adding Link Toolbar Buttons</title>
99
</head>
1010
<body>
1111
<div id="root"></div>

‎examples/02-ui-components/hyperlink-toolbar-buttons/main.tsx renamed to ‎examples/02-ui-components/link-toolbar-buttons/main.tsx

File renamed without changes.

‎examples/02-ui-components/hyperlink-toolbar-buttons/package.json renamed to ‎examples/02-ui-components/link-toolbar-buttons/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "@blocknote/example-hyperlink-toolbar-buttons",
2+
"name": "@blocknote/example-link-toolbar-buttons",
33
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
44
"private": true,
55
"version": "0.12.0",

‎examples/02-ui-components/hyperlink-toolbar-buttons/tsconfig.json renamed to ‎examples/02-ui-components/link-toolbar-buttons/tsconfig.json

File renamed without changes.

‎examples/02-ui-components/hyperlink-toolbar-buttons/vite.config.ts renamed to ‎examples/02-ui-components/link-toolbar-buttons/vite.config.ts

File renamed without changes.

‎examples/05-custom-schema/03-font-style/App.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import "@blocknote/core/fonts/inter.css";
33
import {
44
BasicTextStyleButton,
55
BlockNoteView,
6-
BlockTypeDropdown,
6+
BlockTypeSelect,
77
ColorStyleButton,
88
CreateLinkButton,
99
FormattingToolbar,
@@ -99,7 +99,7 @@ export default function App() {
9999
<FormattingToolbarController
100100
formattingToolbar={() => (
101101
<FormattingToolbar>
102-
<BlockTypeDropdown key={"blockTypeDropdown"} />
102+
<BlockTypeSelect key={"blockTypeSelect"} />
103103

104104
<ImageCaptionButton key={"imageCaptionButton"} />
105105
<ReplaceImageButton key={"replaceImageButton"} />

‎packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ export const renderImage = (
234234
// Opens the image toolbar.
235235
const addImageButtonClickHandler = () => {
236236
editor._tiptapEditor.view.dispatch(
237-
editor._tiptapEditor.state.tr.setMeta(editor.imageToolbar!.plugin, {
237+
editor._tiptapEditor.state.tr.setMeta(editor.imagePanel!.plugin, {
238238
block: block,
239239
})
240240
);

0 commit comments

Comments
 (0)