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]>

Author: matthewlipski

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,
             ]}
           />
         )}