fix: Cache & reuse Shiki highlighter & parser for improved performance (

#1363) * fix: Cache & reuse Shiki highlighter & parser for improved performance * Updated multi editor example and reverted all blocks example due to unwanted changes in merged PR --------- Co-authored-by: matthewlipski <[email protected]>
TypeCellOS · Jan 14, 2025 · 1c34ed6 · 1c34ed6
1 parent 82e068c
commit 1c34ed6
Show file tree

Hide file tree

Showing 11 changed files with 415 additions and 177 deletions.
diff --git a/examples/01-basic/04-all-blocks/App.tsx b/examples/01-basic/04-all-blocks/App.tsx
@@ -1,203 +1,208 @@
 import {
-  BlockNoteEditorOptions,
   BlockNoteSchema,
+  combineByGroup,
+  filterSuggestionItems,
   locales,
 } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
-import { useCreateBlockNote } from "@blocknote/react";
 import {
+  SuggestionMenuController,
+  getDefaultReactSlashMenuItems,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import {
+  getMultiColumnSlashMenuItems,
   multiColumnDropCursor,
   locales as multiColumnLocales,
   withMultiColumn,
 } from "@blocknote/xl-multi-column";
+import { useMemo } from "react";
 
-const schema = withMultiColumn(BlockNoteSchema.create());
-const options = {
-  schema: withMultiColumn(BlockNoteSchema.create()),
-  dropCursor: multiColumnDropCursor,
-  dictionary: {
-    ...locales.en,
-    multi_column: multiColumnLocales.en,
-  },
-  initialContent: [
-    {
-      type: "paragraph",
-      content: "Welcome to this demo!",
-    },
-    {
-      type: "paragraph",
-    },
-    {
-      type: "paragraph",
-      content: [
-        {
-          type: "text",
-          text: "Blocks:",
-          styles: { bold: true },
-        },
-      ],
-    },
-    {
-      type: "paragraph",
-      content: "Paragraph",
-    },
-    {
-      type: "columnList",
-      children: [
-        {
-          type: "column",
-          props: {
-            width: 0.8,
+export default function App() {
+  // Creates a new editor instance.
+  const editor = useCreateBlockNote({
+    schema: withMultiColumn(BlockNoteSchema.create()),
+    dropCursor: multiColumnDropCursor,
+    dictionary: {
+      ...locales.en,
+      multi_column: multiColumnLocales.en,
+    },
+    initialContent: [
+      {
+        type: "paragraph",
+        content: "Welcome to this demo!",
+      },
+      {
+        type: "paragraph",
+      },
+      {
+        type: "paragraph",
+        content: [
+          {
+            type: "text",
+            text: "Blocks:",
+            styles: { bold: true },
           },
-          children: [
-            {
-              type: "paragraph",
-              content: "Hello to the left!",
+        ],
+      },
+      {
+        type: "paragraph",
+        content: "Paragraph",
+      },
+      {
+        type: "columnList",
+        children: [
+          {
+            type: "column",
+            props: {
+              width: 0.8,
             },
-          ],
-        },
-        {
-          type: "column",
-          props: {
-            width: 1.2,
+            children: [
+              {
+                type: "paragraph",
+                content: "Hello to the left!",
+              },
+            ],
           },
-          children: [
+          {
+            type: "column",
+            props: {
+              width: 1.2,
+            },
+            children: [
+              {
+                type: "paragraph",
+                content: "Hello to the right!",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: "heading",
+        content: "Heading",
+      },
+      {
+        type: "bulletListItem",
+        content: "Bullet List Item",
+      },
+      {
+        type: "numberedListItem",
+        content: "Numbered List Item",
+      },
+      {
+        type: "checkListItem",
+        content: "Check List Item",
+      },
+      {
+        type: "codeBlock",
+        props: { language: "javascript" },
+        content: "console.log('Hello, world!');",
+      },
+      {
+        type: "table",
+        content: {
+          type: "tableContent",
+          rows: [
+            {
+              cells: ["Table Cell", "Table Cell", "Table Cell"],
+            },
+            {
+              cells: ["Table Cell", "Table Cell", "Table Cell"],
+            },
             {
-              type: "paragraph",
-              content: "Hello to the right!",
+              cells: ["Table Cell", "Table Cell", "Table Cell"],
             },
           ],
         },
-      ],
-    },
-    {
-      type: "heading",
-      content: "Heading",
-    },
-    {
-      type: "bulletListItem",
-      content: "Bullet List Item",
-    },
-    {
-      type: "numberedListItem",
-      content: "Numbered List Item",
-    },
-    {
-      type: "checkListItem",
-      content: "Check List Item",
-    },
-    {
-      type: "codeBlock",
-      props: { language: "javascript" },
-      content: "console.log('Hello, world!');",
-    },
-    {
-      type: "table",
-      content: {
-        type: "tableContent",
-        rows: [
+      },
+      {
+        type: "file",
+      },
+      {
+        type: "image",
+        props: {
+          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+          caption:
+            "From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+        },
+      },
+      {
+        type: "video",
+        props: {
+          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+          caption:
+            "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+        },
+      },
+      {
+        type: "audio",
+        props: {
+          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
+          caption:
+            "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
+        },
+      },
+      {
+        type: "paragraph",
+      },
+      {
+        type: "paragraph",
+        content: [
           {
-            cells: ["Table Cell", "Table Cell", "Table Cell"],
+            type: "text",
+            text: "Inline Content:",
+            styles: { bold: true },
           },
+        ],
+      },
+      {
+        type: "paragraph",
+        content: [
           {
-            cells: ["Table Cell", "Table Cell", "Table Cell"],
+            type: "text",
+            text: "Styled Text",
+            styles: {
+              bold: true,
+              italic: true,
+              textColor: "red",
+              backgroundColor: "blue",
+            },
+          },
+          {
+            type: "text",
+            text: " ",
+            styles: {},
           },
           {
-            cells: ["Table Cell", "Table Cell", "Table Cell"],
+            type: "link",
+            content: "Link",
+            href: "https://www.blocknotejs.org",
           },
         ],
       },
-    },
-    {
-      type: "file",
-    },
-    {
-      type: "image",
-      props: {
-        url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
-        caption:
-          "From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
-      },
-    },
-    {
-      type: "video",
-      props: {
-        url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
-        caption:
-          "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
-      },
-    },
-    {
-      type: "audio",
-      props: {
-        url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
-        caption:
-          "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
+      {
+        type: "paragraph",
       },
-    },
-    {
-      type: "paragraph",
-    },
-    {
-      type: "paragraph",
-      content: [
-        {
-          type: "text",
-          text: "Inline Content:",
-          styles: { bold: true },
-        },
-      ],
-    },
-    {
-      type: "paragraph",
-      content: [
-        {
-          type: "text",
-          text: "Styled Text",
-          styles: {
-            bold: true,
-            italic: true,
-            textColor: "red",
-            backgroundColor: "blue",
-          },
-        },
-        {
-          type: "text",
-          text: " ",
-          styles: {},
-        },
-        {
-          type: "link",
-          content: "Link",
-          href: "https://www.blocknotejs.org",
-        },
-      ],
-    },
-    {
-      type: "paragraph",
-    },
-  ],
-  // sideMenuDetection: "editor",
-} satisfies Partial<
-  BlockNoteEditorOptions<
-    typeof schema.blockSchema,
-    typeof schema.inlineContentSchema,
-    typeof schema.styleSchema
-  >
->;
+    ],
+  });
 
-export default function App() {
-  // Creates a new editor instance.
-  const editor1 = useCreateBlockNote(options);
-  const editor2 = useCreateBlockNote(options);
+  const slashMenuItems = useMemo(() => {
+    return combineByGroup(
+      getDefaultReactSlashMenuItems(editor),
+      getMultiColumnSlashMenuItems(editor)
+    );
+  }, [editor]);
 
   // Renders the editor instance using a React component.
   return (
-    <div style={{ display: "flex", gap: "10px" }}>
-      <BlockNoteView editor={editor1} />
-      {/*<BlockNoteView editor={editor2} />*/}
-    </div>
+    <BlockNoteView editor={editor} slashMenu={false}>
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        getItems={async (query) => filterSuggestionItems(slashMenuItems, query)}
+      />
+    </BlockNoteView>
   );
 }
diff --git a/examples/01-basic/12-multi-editor/.bnexample.json b/examples/01-basic/12-multi-editor/.bnexample.json
@@ -0,0 +1,6 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "areknawo",
+  "tags": ["Basic"]
+}