Major changes

Author: matthewlipski

examples/06-custom-schema/09-math-block/.bnexample.json

@@ -2,9 +2,16 @@
   "playground": true,
   "docs": true,
   "author": "matthewlipski",
-  "tags": ["Intermediate", "Blocks", "Custom Schemas"],
+  "tags": [
+    "Intermediate",
+    "Blocks",
+    "Custom Schemas",
+    "Suggestion Menus",
+    "Slash Menu"
+  ],
   "dependencies": {
     "@blocknote/code-block": "latest",
-    "@blocknote/math-block": "latest"
+    "@blocknote/math-block": "latest",
+    "react-icons": "^5.5.0"
   }
 }

examples/06-custom-schema/09-math-block/package.json

@@ -21,7 +21,8 @@
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "@blocknote/code-block": "latest",
-    "@blocknote/math-block": "latest"
+    "@blocknote/math-block": "latest",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.3",

examples/06-custom-schema/09-math-block/src/App.tsx

@@ -1,27 +1,52 @@
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteSchema } from "@blocknote/core";
+import {
+  filterSuggestionItems,
+  insertOrUpdateBlockForSlashMenu,
+} from "@blocknote/core/extensions";
 import { createHighlighter } from "@blocknote/code-block";
 import { createMathBlockSpec } from "@blocknote/math-block";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
-import { useCreateBlockNote } from "@blocknote/react";
+import {
+  getDefaultReactSlashMenuItems,
+  SuggestionMenuController,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import { TbMathFunction } from "react-icons/tb";
+
+// Our schema with block specs, which contain the configs and implementations for blocks
+// that we want our editor to use.
+const schema = BlockNoteSchema.create().extend({
+  blockSpecs: {
+    // Creates an instance of the Math block and adds it to the schema.
+    math: createMathBlockSpec(),
+  },
+});
+
+// Slash menu item to insert a Math block.
+const insertMath = (editor: typeof schema.BlockNoteEditor) => ({
+  title: "Math",
+  subtext: "Insert a LaTeX math formula",
+  onItemClick: () =>
+    insertOrUpdateBlockForSlashMenu(editor, {
+      type: "math",
+    }),
+  aliases: ["math", "latex", "formula", "equation"],
+  group: "Basic blocks",
+  icon: <TbMathFunction />,
+});
 
 export default function App() {
-  // The math block isn't a default block, so we register it in a custom schema.
   const editor = useCreateBlockNote({
-    // The Shiki highlighter (from @blocknote/code-block) syntax-highlights the
-    // math block's editable LaTeX source popup. `highlightBlock` enables it for
-    // the math block and highlights it as LaTeX.
+    // Configures the syntax highlighting extension to always use LaTeX syntax highlighting in the
+    // Math block.
     syntaxHighlighting: {
       createHighlighter,
       highlightBlock: (block) =>
         block.type === "math" ? "latex" : block.props.language,
     },
-    schema: BlockNoteSchema.create().extend({
-      blockSpecs: {
-        math: createMathBlockSpec(),
-      },
-    }),
+    schema,
     initialContent: [
       {
         type: "paragraph",
@@ -37,10 +62,31 @@ export default function App() {
       },
       {
         type: "paragraph",
+        content: "Press the '/' key to open the Slash Menu and add another",
       },
     ],
   });
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return (
+    <BlockNoteView editor={editor} slashMenu={false}>
+      {/* Replaces the default Slash Menu. */}
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        getItems={async (query) => {
+          // Gets all default slash menu items.
+          const defaultItems = getDefaultReactSlashMenuItems(editor);
+          // Finds index of last item in "Basic blocks" group.
+          const lastBasicBlockIndex = defaultItems.findLastIndex(
+            (item) => item.group === "Basic blocks",
+          );
+          // Inserts the Math item as the last item in the "Basic blocks" group.
+          defaultItems.splice(lastBasicBlockIndex + 1, 0, insertMath(editor));
+
+          // Returns filtered items based on the query.
+          return filterSuggestionItems(defaultItems, query);
+        }}
+      />
+    </BlockNoteView>
+  );
 }

examples/06-custom-schema/09-math-block/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite-plus/client" />

packages/core/src/blocks/Code/CodeBlockOptions.ts

@@ -1,4 +1,4 @@
-import type { ViewMutationRecord } from "prosemirror-view";
+// import type { ViewMutationRecord } from "prosemirror-view";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 import type { BlockFromConfig } from "../../schema/index.js";
 
@@ -15,12 +15,8 @@ export type CodeBlockPreview = (
   block: BlockFromConfig<any, any, any>,
   editor: BlockNoteEditor<any>,
 ) => {
-  dom: HTMLElement;
-  // TODO: This is for showing any syntax errors found while rendering the preview, not sure if it
-  // should be here.
+  dom: HTMLElement | DocumentFragment;
   error?: string | null;
-  ignoreMutation?: (mutation: ViewMutationRecord) => boolean;
-  destroy?: () => void;
 };
 
 export type CodeBlockOptions = {

packages/core/src/blocks/Code/block.ts

@@ -3,10 +3,10 @@ import {
   parsePreCode,
   parsePreCodeContent,
 } from "./helpers/parse/parsePreCode.js";
-import { createCodeBlockWrapper } from "./helpers/render/createCodeBlockWrapper.js";
 import { createPreCode } from "./helpers/toExternalHTML/createPreCode.js";
 import { createCodeKeyboardShortcutsExtension } from "./helpers/extensions/createCodeKeyboardShortcutsExtension.js";
 import { CodeBlockOptions } from "./CodeBlockOptions.js";
+import { createSourceBlockWithPreview } from "./helpers/render/createSourceBlockWithPreview.js";
 
 export type CodeBlockConfig = ReturnType<typeof createCodeBlockConfig>;
 
@@ -33,7 +33,17 @@ export const createCodeBlockSpec = createBlockSpec(
     },
     parse: (el) => parsePreCode(el),
     parseContent: (opts) => parsePreCodeContent(opts, "codeBlock"),
-    render: (block, editor) => createCodeBlockWrapper(options)(block, editor),
+    render: (block, editor) =>
+      createSourceBlockWithPreview(
+        block,
+        editor,
+        options.supportedLanguages && {
+          selectedLanguage: block.props.language,
+          supportedLanguages: options.supportedLanguages,
+          createPreview:
+            options.supportedLanguages[block.props.language].createPreview,
+        },
+      ),
     toExternalHTML: (block) => createPreCode(block),
   }),
   (options) => {