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 <yousefdardiry@gmail.com>

* fix `setEditable` called when not necessary (#635)

* Added temp fix for shortcuts and input rules in tables (#561)

---------

Co-authored-by: Yousef <yousefdardiry@gmail.com>

* Renamed hyperlink toolbar -> link toolbar and small changes

---------

Co-authored-by: Yousef <yousefdardiry@gmail.com>

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

@@ -49,7 +49,7 @@ While it's up to you to decide how you want the elements to be rendered, BlockNo
 ```typescript
 type UIElement =
   | "formattingToolbar"
-  | "hyperlinkToolbar"
+  | "linkToolbar"
   | "imageToolbar"
   | "sideMenu"
   | "suggestionMenu"

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

@@ -87,7 +87,7 @@ export type BlockNoteViewProps = {
         dark: Theme;
       };
   formattingToolbar?: boolean;
-  hyperlinkToolbar?: boolean;
+  linkToolbar?: boolean;
   sideMenu?: boolean;
   slashMenu?: boolean;
   imageToolbar?: boolean;
@@ -108,7 +108,7 @@ export type BlockNoteViewProps = {
 
 `formattingToolbar`: Whether the [Formatting Toolbar](/docs/ui-components/formatting-toolbar) should be enabled.
 
-`hyperlinkToolbar`: Whether the Hyperlink Toolbar should be enabled.
+`linkToolbar`: Whether the Link Toolbar should be enabled.
 
 `sideMenu`: Whether the [Block Side Menu](/docs/ui-components/side-menu) should be enabled.
 

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

@@ -31,7 +31,7 @@ Within the editor's DOM structure, you'll find many elements have classes with t
 
 `.bn-inline-content`: Element for only the block's editable, rich text content.
 
-`.bn-toolbar`: Element for the formatting & hyperlink toolbars.
+`.bn-toolbar`: Element for the formatting & link toolbars.
 
 `.bn-side-menu`: Element for the side menu.
 

docs/pages/docs/ui-components.mdx

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

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

@@ -1,8 +1,8 @@
 {
   "side-menu": "Block Side Menu",
   "formatting-toolbar": "Formatting Toolbar",
-  "hyperlink-toolbar": {
-    "title": "Hyperlink Toolbar",
+  "link-toolbar": {
+    "title": "Link Toolbar",
     "display": "hidden"
   },
   "image-toolbar": {

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

@@ -32,16 +32,16 @@ Setting `formattingToolbar={false}` on `BlockNoteView` tells BlockNote not to sh
 <div className="nx-mt-6 nx-leading-7 first:nx-mt-0">
     <small>
         <strong>Tip:</strong> The children you pass to the `FormattingToolbar` component
-        should be default dropdowns/buttons (e.g. `BlockTypeDropdown` & `BasicTextStyleButton`) or custom dropdowns/buttons
-        (`ToolbarDropdown` & `ToolbarButton`). To see all the components you can use, head to the
+        should be default selects/buttons (e.g. `BlockTypeSelect` & `BasicTextStyleButton`) or custom selects/buttons
+        (`ToolbarSelect` & `ToolbarButton`). To see all the components you can use, head to the
         [Formatting Toolbar's source code](https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/mantine/FormattingToolbar.tsx).
     </small>
 </div>
 
-## Changing Block Type Dropdown Items
+## Changing Block Type Select (Dropdown) Items
 
-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.
+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.
 
 <Example name="ui-components/formatting-toolbar-block-type-items" />
 
-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.
+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

@@ -1,37 +1,37 @@
 ---
-title: Hyperlink Toolbar
-description: The Hyperlink Toolbar appears whenever you hover a link in the editor.
-imageTitle: Hyperlink Toolbar
-path: /docs/hyperlink-toolbar
+title: Link Toolbar
+description: The Link Toolbar appears whenever you hover a link in the editor.
+imageTitle: Link Toolbar
+path: /docs/link-toolbar
 ---
 
 import { Example } from "@/components/example";
 
-# Hyperlink Toolbar
+# Link Toolbar
 
-The Hyperlink Toolbar appears whenever you hover a link in the editor.
+The Link Toolbar appears whenever you hover a link in the editor.
 
 TODO Image
 
-[//]: # '<img style={{maxWidth: "600px"}} src="/img/screenshots/hyperlink_toolbar.png" alt="image" />'
+[//]: # '<img style={{maxWidth: "600px"}} src="/img/screenshots/link_toolbar.png" alt="image" />'
 
-## Changing the Hyperlink Toolbar
+## Changing the Link Toolbar
 
-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.
+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.
 
-[//]: # (<Example name="ui-components/hyperlink-toolbar-buttons" />)
+[//]: # (<Example name="ui-components/link-toolbar-buttons" />)
 
-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.
+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.
 
-This custom Hyperlink Toolbar is passed to a `HyperlinkToolbarController`, which controls its position and visibility (above or below the hovered link).
+This custom Link Toolbar is passed to a `LinkToolbarController`, which controls its position and visibility (above or below the hovered link).
 
-Setting `hyperlinkToolbar={false}` on `BlockNoteView` tells BlockNote not to show the default Hyperlink Toolbar.
+Setting `linkToolbar={false}` on `BlockNoteView` tells BlockNote not to show the default Link Toolbar.
 
 <div className="nx-mt-6 nx-leading-7 first:nx-mt-0">
   <small>
-    <strong>Tip:</strong> The children you pass to the `HyperlinkToolbar`
-    component should be default buttons (e.g. TODO) or custom dropdowns/buttons
-    (`ToolbarDropdown` & `ToolbarButton`). To see all the components you can
-    use, head to the [Hyperlink Toolbar's source code](link).
+    <strong>Tip:</strong> The children you pass to the `LinkToolbar`
+    component should be default buttons (e.g. TODO) or custom selects/buttons
+    (`ToolbarSelect` & `ToolbarButton`). To see all the components you can
+    use, head to the [Link Toolbar's source code](link).
   </small>
 </div>

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

@@ -32,7 +32,7 @@ export default function App() {
       editor={editor}
       // Removes all menus and toolbars.
       formattingToolbar={false}
-      hyperlinkToolbar={false}
+      linkToolbar={false}
       imageToolbar={false}
       sideMenu={false}
       slashMenu={false}

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

@@ -2,7 +2,7 @@ import "@blocknote/core/fonts/inter.css";
 import {
   BasicTextStyleButton,
   BlockNoteView,
-  BlockTypeDropdown,
+  BlockTypeSelect,
   ColorStyleButton,
   CreateLinkButton,
   FormattingToolbar,
@@ -72,7 +72,7 @@ export default function App() {
       <FormattingToolbarController
         formattingToolbar={() => (
           <FormattingToolbar>
-            <BlockTypeDropdown key={"blockTypeDropdown"} />
+            <BlockTypeSelect key={"blockTypeSelect"} />
 
             {/* Extra button to toggle blue text & background */}
             <BlueButton key={"customButton"} />

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

@@ -2,11 +2,11 @@ import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
-  BlockTypeDropdownItem,
   FormattingToolbar,
   FormattingToolbarController,
-  blockTypeDropdownItems,
   useCreateBlockNote,
+  blockTypeSelectItems,
+  BlockTypeSelectItem,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
 import { RiAlertFill } from "react-icons/ri";
@@ -36,33 +36,33 @@ export default function App() {
       {
         type: "paragraph",
         content:
-          "Try selecting some text - you'll see the new 'Alert' item in the Block Type Dropdown",
+          "Try selecting some text - you'll see the new 'Alert' item in the Block Type Select",
       },
       {
         type: "alert",
         content:
-          "Or select text in this alert - the Block Type Dropdown also appears",
+          "Or select text in this alert - the Block Type Select also appears",
       },
       {
         type: "paragraph",
       },
     ],
   });
 
-  // Renders the editor instance with the updated Block Type Dropdown.
+  // Renders the editor instance with the updated Block Type Select.
   return (
     <BlockNoteView editor={editor} formattingToolbar={false}>
       <FormattingToolbarController
         formattingToolbar={() => (
           <FormattingToolbar
-            blockTypeDropdownItems={[
-              ...blockTypeDropdownItems,
+            blockTypeSelectItems={[
+              ...blockTypeSelectItems,
               {
                 name: "Alert",
                 type: "alert",
                 icon: RiAlertFill,
                 isSelected: (block) => block.type === "alert",
-              } satisfies BlockTypeDropdownItem,
+              } satisfies BlockTypeSelectItem,
             ]}
           />
         )}

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

@@ -1,11 +1,11 @@
-# Adding Block Type Dropdown Items
+# Adding Block Type Select Items
 
-In this example, we add an item to the Block Type Dropdown, so that it works for a custom alert block we create.
+In this example, we add an item to the Block Type Select, so that it works for a custom alert block we create.
 
-**Try it out:** Select some text to open the Formatting Toolbar, and click "Alert" in the Block Type Dropdown to change the selected block!
+**Try it out:** Select some text to open the Formatting Toolbar, and click "Alert" in the Block Type Select to change the selected block!
 
 **Relevant Docs:**
 
-- [Changing Block Type Dropdown Items](/docs/ui-components/formatting-toolbar#changing-block-type-dropdown-items)
+- [Changing Block Type Select Items](/docs/ui-components/formatting-toolbar#changing-block-type-select-items)
 - [Custom Block Types](/docs/custom-schemas/custom-blocks)
 - [Editor Setup](/docs/editor-basics/setup)

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

@@ -5,7 +5,7 @@
     </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Adding Block Type Dropdown Items</title>
+    <title>Adding Block Type Select Items</title>
   </head>
   <body>
     <div id="root"></div>

examples/02-ui-components/hyperlink-toolbar-buttons/AlertButton.tsx → examples/02-ui-components/link-toolbar-buttons/AlertButton.tsx

@@ -1,7 +1,7 @@
-import { HyperlinkToolbarProps, ToolbarButton } from "@blocknote/react";
+import { LinkToolbarProps, ToolbarButton } from "@blocknote/react";
 
-// Custom Hyperlink Toolbar button to open a browser alert.
-export function AlertButton(props: HyperlinkToolbarProps) {
+// Custom Link Toolbar button to open a browser alert.
+export function AlertButton(props: LinkToolbarProps) {
   return (
     <ToolbarButton
       mainTooltip={"Open Alert with URL"}

examples/02-ui-components/hyperlink-toolbar-buttons/App.tsx → examples/02-ui-components/link-toolbar-buttons/App.tsx

@@ -1,8 +1,8 @@
 import "@blocknote/core/fonts/inter.css";
 import {
   BlockNoteView,
-  HyperlinkToolbar,
-  HyperlinkToolbarController,
+  LinkToolbar,
+  LinkToolbarController,
   useCreateBlockNote,
 } from "@blocknote/react";
 import "@blocknote/react/style.css";
@@ -19,7 +19,7 @@ export default function App() {
       },
       {
         type: "paragraph",
-        content: "Hover the link below to see the modified Hyperlink Toolbar",
+        content: "Hover the link below to see the modified Link Toolbar",
       },
       {
         type: "paragraph",
@@ -45,12 +45,12 @@ export default function App() {
 
   // Renders the editor instance.
   return (
-    <BlockNoteView editor={editor} hyperlinkToolbar={false}>
-      <HyperlinkToolbarController
-        hyperlinkToolbar={(props) => (
-          <HyperlinkToolbar {...props}>
+    <BlockNoteView editor={editor} linkToolbar={false}>
+      <LinkToolbarController
+        linkToolbar={(props) => (
+          <LinkToolbar {...props}>
             <AlertButton {...props} />
-          </HyperlinkToolbar>
+          </LinkToolbar>
         )}
       />
     </BlockNoteView>

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

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

examples/02-ui-components/hyperlink-toolbar-buttons/index.html → examples/02-ui-components/link-toolbar-buttons/index.html

@@ -5,7 +5,7 @@
     </script>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Adding Hyperlink Toolbar Buttons</title>
+    <title>Adding Link Toolbar Buttons</title>
   </head>
   <body>
     <div id="root"></div>

examples/02-ui-components/hyperlink-toolbar-buttons/package.json → examples/02-ui-components/link-toolbar-buttons/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@blocknote/example-hyperlink-toolbar-buttons",
+  "name": "@blocknote/example-link-toolbar-buttons",
   "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
   "private": true,
   "version": "0.12.0",

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

@@ -3,7 +3,7 @@ import "@blocknote/core/fonts/inter.css";
 import {
   BasicTextStyleButton,
   BlockNoteView,
-  BlockTypeDropdown,
+  BlockTypeSelect,
   ColorStyleButton,
   CreateLinkButton,
   FormattingToolbar,
@@ -99,7 +99,7 @@ export default function App() {
       <FormattingToolbarController
         formattingToolbar={() => (
           <FormattingToolbar>
-            <BlockTypeDropdown key={"blockTypeDropdown"} />
+            <BlockTypeSelect key={"blockTypeSelect"} />
 
             <ImageCaptionButton key={"imageCaptionButton"} />
             <ReplaceImageButton key={"replaceImageButton"} />

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

@@ -234,7 +234,7 @@ export const renderImage = (
   // Opens the image toolbar.
   const addImageButtonClickHandler = () => {
     editor._tiptapEditor.view.dispatch(
-      editor._tiptapEditor.state.tr.setMeta(editor.imageToolbar!.plugin, {
+      editor._tiptapEditor.state.tr.setMeta(editor.imagePanel!.plugin, {
         block: block,
       })
     );