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

Author: matthewlipski

.github/workflows/build.yml

@@ -64,7 +64,7 @@ jobs:
           CI: true
 
       - name: Install Playwright
-        run: npx playwright install --with-deps
+        run: npm run install-playwright
 
       - name: Run Playwright tests
         working-directory: ./tests

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

@@ -30,8 +30,8 @@ Setting `hyperlinkToolbar={false}` on `BlockNoteView` tells BlockNote not to sho
 <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
+    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 [Hyperlink Toolbar's source code](link).
   </small>
 </div>

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

@@ -2,9 +2,9 @@ import "@blocknote/core/fonts/inter.css";
 import {
   BasicTextStyleButton,
   BlockNoteView,
-  BlockTypeDropdown,
+  BlockTypeSelect,
   ColorStyleButton,
-  CreateLinkButton,
+  CreateHyperlinkButton,
   FormattingToolbar,
   FormattingToolbarController,
   ImageCaptionButton,
@@ -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"} />
@@ -120,7 +120,7 @@ export default function App() {
             <NestBlockButton key={"nestBlockButton"} />
             <UnnestBlockButton key={"unnestBlockButton"} />
 
-            <CreateLinkButton key={"createLinkButton"} />
+            <CreateHyperlinkButton key={"createLinkButton"} />
           </FormattingToolbar>
         )}
       />

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/05-custom-schema/03-font-style/App.tsx

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