feat: Add Emoji Picker Option

docs/pages/docs/advanced/grid-suggestion-menus.mdx

@@ -0,0 +1,51 @@
+---
+title: Grid Suggestion Menus
+description: In addition to displaying Suggestion Menus as stacks, BlockNote also supports displaying them as grids.
+imageTitle: Grid Suggestion Menus
+---
+
+import { Example } from "@/components/example";
+
+# Grid Suggestion Menus
+
+Grid Suggestion Menus appear when the user enters a trigger character, and text after the character is used to filter the menu items.
+
+Grid Suggestion Menus are similar to regular Suggestion Menus, but results are organized in a grid, and users can use all arrow keys (including left, right) on their keyboard to navigate the results.
+
+## Emoji Picker
+
+The Emoji Picker is a Grid Suggestion Menu that opens with the `:` character (or when selecting emoji item in the Slash Menu).
+
+It only displays once the user types 2 non-whitespace characters a query, to minimize cases where the user only wants to enter the `:` character.
+
+<img
+  style={{ maxWidth: "400px" }}
+  src="/img/screenshots/emoji_picker.png"
+  alt="image"
+/>
+
+### Changing Emoji Picker Columns
+
+By default, the Emoji Picker is rendered with 10 columns, but you can change this to any amount. In the demo below, the Emoji Picker is changed to only display 5 columns.
+
+<Example name="ui-components/suggestion-menus-emoji-picker-columns" />
+
+Passing `emojiPicker={false}` to `BlockNoteView` tells BlockNote not to show the default Emoji Picker. Adding the `GridSuggestionMenuController` with `triggerCharacter={":"}` and `columns={5}` tells BlockNote to show one with 5 columns instead.
+
+### Replacing the Emoji Picker Component
+
+You can replace the React component used for the Emoji Picker with your own, as you can see in the demo below.
+
+<Example name="ui-components/suggestion-menus-emoji-picker-component" />
+
+Again, we add a `GridSuggestionMenuController` component with `triggerCharacter={":"}` and set `emojiPicker={false}` to replace the default Emoji Picker.
+
+Now, we also pass a component to its `gridSuggestionMenuComponent` prop. The `gridSuggestionMenuComponent` we pass is responsible for rendering the filtered items. The `GridSuggestionMenuController` controls its position and visibility (below the trigger character), and it also determines which items should be shown. Since we don't specify which items to show (the `getItems` prop isn't defined), it will use the default items for a grid, which are the emojis.
+
+## Creating additional Grid Suggestion Menus
+
+You can add additional Grid Suggestion Menus to the editor, which can use any trigger character. The demo below adds an example Grid Suggestion Menu for mentions, where each item is the first character of the user's name, and opens with the `@` character.
+
+<Example name="ui-components/suggestion-menus-grid-mentions" />
+
+Changing the column count in the new Grid Suggestion Menu, or the component used to render it, is done the same way as for the [Emoji Picker](/docs/advanced/grid-suggestion-menus#emoji-picker). For more information about how the mentions elements work, see [Custom Inline Content](/docs/custom-schemas/custom-inline-content).

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

@@ -96,6 +96,7 @@ export type BlockNoteViewProps = {
   linkToolbar?: boolean;
   sideMenu?: boolean;
   slashMenu?: boolean;
+  emojiPicker?: boolean;
   filePanel?: boolean;
   tableHandles?: boolean;
   children?:
@@ -120,6 +121,8 @@ export type BlockNoteViewProps = {
 
 `slashMenu`: Whether the [Slash Menu](/docs/ui-components/suggestion-menus#slash-menu) should be enabled.
 
+`emojiPicker`: Whether the [Emoji Picker](/docs/ui-components/suggestion-menus#emoji-picker) should be enabled.
+
 `filePanel`: Whether the File Toolbar should be enabled.
 
 `tableHandles`: Whether the Table Handles should be enabled.

docs/pages/docs/ui-components/suggestion-menus.mdx

@@ -31,9 +31,9 @@ Passing `slashMenu={false}` to `BlockNoteView` tells BlockNote not to show the d
 
 `getItems` should return the items that need to be shown in the Slash Menu, based on a `query` entered by the user (anything the user types after the `triggerCharacter`).
 
-### Replacing the Suggestion Menu Component
+### Replacing the Slash Menu Component
 
-You can replace the React component used for the Suggestion Menu with your own, as you can see in the demo below.
+You can replace the React component used for the Slash Menu with your own, as you can see in the demo below.
 
 <Example name="ui-components/suggestion-menus-slash-menu-component" />
 
@@ -48,3 +48,24 @@ You can add additional Suggestion Menus to the editor, which can use any trigger
 <Example name="custom-schema/suggestion-menus-mentions" />
 
 Changing the items in the new Suggestion Menu, or the component used to render it, is done the same way as for the [Slash Menu](/docs/ui-components/suggestion-menus#slash-menu). For more information about how the mentions elements work, see [Custom Inline Content](/docs/custom-schemas/custom-inline-content).
+
+## Additional Features
+
+BlockNote offers a few other features for working with Suggestion Menus which may fit your use case.
+
+### Opening Suggestion Menus Programmatically
+
+While suggestion menus are generally meant to be opened when the user presses a trigger character, you may also want to open them from code. To do this, you can use the following editor method:
+
+```typescript
+openSuggestionMenu(triggerCharacter: string): void;
+
+// Usage
+editor.openSuggestionMenu("/");
+```
+
+### Waiting for a Query
+
+You may want to hold off displaying a Suggestion Menu unless you're certain that the user actually wants to open the menu and not just enter the trigger character. In this case, you should use the `minQueryLength` prop for `SuggestionMenuController`, which takes a number.
+
+The number indicates how many characters the user query needs to have before the menu is shown. When greater than 0, it also prevents the menu from displaying if the user enters a space immediately after the trigger character.

examples/03-ui-components/07-suggestion-menus-slash-menu-component/styles.css

@@ -9,6 +9,10 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
+    height: fit-content;
+    max-height: 100%;
+
+    overflow: auto;
 
     padding: 8px;
 

examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/.bnexample.json

@@ -0,0 +1,12 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "yousefed",
+  "tags": [
+    "Intermediate",
+    "Blocks",
+    "UI Components",
+    "Suggestion Menus",
+    "Emoji Picker"
+  ]
+}

examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/App.tsx

@@ -0,0 +1,42 @@
+import "@blocknote/core/fonts/inter.css";
+import {
+  GridSuggestionMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: "Press the ':' key to open the Emoji Picker",
+      },
+      {
+        type: "paragraph",
+        content: "There are now 5 columns instead of 10",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance.
+  return (
+    <BlockNoteView editor={editor} emojiPicker={false}>
+      <GridSuggestionMenuController
+        triggerCharacter={":"}
+        // Changes the Emoji Picker to only have 5 columns.
+        columns={5}
+        minQueryLength={2}
+      />
+    </BlockNoteView>
+  );
+}

examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/README.md

@@ -0,0 +1,10 @@
+# Changing Emoji Picker Columns
+
+In this example, we change the Emoji Picker to display 5 columns instead of 10.
+
+**Try it out:** Press the ":" key to open the Emoji Picker!
+
+**Relevant Docs:**
+
+- [Changing Emoji Picker Columns](/docs/ui-components/suggestion-menus#changing-emoji-picker-columns)
+- [Editor Setup](/docs/editor-basics/setup)

examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/index.html

@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Changing Emoji Picker Columns</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

examples/03-ui-components/08-suggestion-menus-emoji-picker-columns/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@blocknote/example-suggestion-menus-emoji-picker-columns",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}

examples/03-ui-components/09-suggestion-menus-emoji-picker-component/.bnexample.json

@@ -0,0 +1,12 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "yousefed",
+  "tags": [
+    "Intermediate",
+    "UI Components",
+    "Suggestion Menus",
+    "Emoji Picker",
+    "Appearance & Styling"
+  ]
+}

examples/03-ui-components/09-suggestion-menus-emoji-picker-component/App.tsx

@@ -0,0 +1,71 @@
+import "@blocknote/core/fonts/inter.css";
+import {
+  DefaultReactGridSuggestionItem,
+  GridSuggestionMenuController,
+  GridSuggestionMenuProps,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+
+import "./styles.css";
+
+// Custom component to replace the default Emoji Picker.
+function CustomEmojiPicker(
+  props: GridSuggestionMenuProps<DefaultReactGridSuggestionItem>
+) {
+  return (
+    <div
+      className={"emoji-picker"}
+      style={
+        { gridTemplateColumns: `repeat(${props.columns || 1}, 1fr)` } as any
+      }>
+      {props.items.map((item, index) => (
+        <div
+          className={`emoji-picker-item${
+            props.selectedIndex === index ? " selected" : ""
+          }`}
+          onClick={() => {
+            props.onItemClick?.(item);
+          }}>
+          {item.icon}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+        content: "Press the ':' key to open the Emoji Picker",
+      },
+      {
+        type: "paragraph",
+        content: "It's been replaced with a custom component",
+      },
+      {
+        type: "paragraph",
+      },
+    ],
+  });
+
+  // Renders the editor instance.
+  return (
+    <BlockNoteView editor={editor} emojiPicker={false}>
+      <GridSuggestionMenuController
+        triggerCharacter={":"}
+        gridSuggestionMenuComponent={CustomEmojiPicker}
+        columns={10}
+        minQueryLength={2}
+      />
+    </BlockNoteView>
+  );
+}

examples/03-ui-components/09-suggestion-menus-emoji-picker-component/README.md

@@ -0,0 +1,10 @@
+# Replacing Emoji Picker Component
+
+In this example, we replace the default Emoji Picker component with a basic custom one.
+
+**Try it out:** Press the ":" key to see the new Emoji Picker!
+
+**Relevant Docs:**
+
+- [Replacing the Emoji Picker Component](/docs/ui-components/suggestion-menus#replacing-the-emoji-picker-component)
+- [Editor Setup](/docs/editor-basics/setup)

examples/03-ui-components/09-suggestion-menus-emoji-picker-component/index.html

@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Replacing Emoji Picker Component</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

examples/03-ui-components/09-suggestion-menus-emoji-picker-component/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@blocknote/example-suggestion-menus-emoji-picker-component",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.0.4",
+    "eslint": "^8.10.0",
+    "vite": "^4.4.8"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}