Added missing multi-column slash menu items to home page demo (#1221)

Author: matthewlipski

docs/components/pages/landing/hero/DemoEditor.tsx

@@ -1,11 +1,20 @@
 import {
   BlockNoteSchema,
+  combineByGroup,
+  filterSuggestionItems,
+  locales,
   uploadToTmpFilesDotOrg_DEV_ONLY,
 } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { useCreateBlockNote } from "@blocknote/react";
+import {
+  getDefaultReactSlashMenuItems,
+  SuggestionMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import {
+  getMultiColumnSlashMenuItems,
+  locales as multiColumnLocales,
   multiColumnDropCursor,
   withMultiColumn,
 } from "@blocknote/xl-multi-column";
@@ -74,6 +83,10 @@ export default function DemoEditor(props: { theme?: "light" | "dark" }) {
 
   const editor = useCreateBlockNote(
     {
+      dictionary: {
+        ...locales.en,
+        multi_column: multiColumnLocales.en,
+      },
       schema: withMultiColumn(BlockNoteSchema.create()),
       dropCursor: multiColumnDropCursor,
       collaboration: {
@@ -100,5 +113,27 @@ export default function DemoEditor(props: { theme?: "light" | "dark" }) {
     }
   }, [warningShown]);
 
-  return <BlockNoteView onFocus={focus} editor={editor} theme={props.theme} />;
+  const getSlashMenuItems = useMemo(() => {
+    return async (query: string) =>
+      filterSuggestionItems(
+        combineByGroup(
+          getDefaultReactSlashMenuItems(editor),
+          getMultiColumnSlashMenuItems(editor),
+        ),
+        query,
+      );
+  }, [editor]);
+
+  return (
+    <BlockNoteView
+      onFocus={focus}
+      editor={editor}
+      theme={props.theme}
+      slashMenu={false}>
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        getItems={getSlashMenuItems}
+      />
+    </BlockNoteView>
+  );
 }

examples/01-basic/03-multi-column/App.tsx

@@ -96,12 +96,16 @@ export default function App() {
     ],
   });
 
-  // Merges the default slash menu items with the multi-column ones.
-  const slashMenuItems = useMemo(() => {
-    return combineByGroup(
-      getDefaultReactSlashMenuItems(editor),
-      getMultiColumnSlashMenuItems(editor)
-    );
+  // Gets the default slash menu items merged with the multi-column ones.
+  const getSlashMenuItems = useMemo(() => {
+    return async (query: string) =>
+      filterSuggestionItems(
+        combineByGroup(
+          getDefaultReactSlashMenuItems(editor),
+          getMultiColumnSlashMenuItems(editor)
+        ),
+        query
+      );
   }, [editor]);
 
   // Renders the editor instance using a React component.
@@ -111,7 +115,7 @@ export default function App() {
       items and the multi-column ones. */}
       <SuggestionMenuController
         triggerCharacter={"/"}
-        getItems={async (query) => filterSuggestionItems(slashMenuItems, query)}
+        getItems={getSlashMenuItems}
       />
     </BlockNoteView>
   );