Merge branch 'main' of https://github.com/OgabekYuldoshev/BlockNote

Author: OgabekYuldoshev

docs/content/docs/features/blocks/code-blocks.mdx

@@ -80,7 +80,7 @@ To create your own syntax highlighter, you can use the [shiki-codegen](https://s
 For example, to create a syntax highlighter using the optimized javascript engine, javascript, typescript, vue, with light and dark themes, you can run the following command:
 
 ```bash
-npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts
+npx shiki-codegen --langs javascript,typescript,vue --themes light-plus,dark-plus --engine javascript --precompiled ./shiki.bundle.ts
 ```
 
 This will generate a `shiki.bundle.ts` file that you can use to create a syntax highlighter for your editor.
@@ -93,21 +93,23 @@ import { createHighlighter } from "./shiki.bundle.js";
 export default function App() {
   const editor = useCreateBlockNote({
     schema: BlockNoteSchema.create().extend({
-      codeBlock: createCodeBlockSpec({
-        indentLineWithTab: true,
-        defaultLanguage: "typescript",
-        supportedLanguages: {
-          typescript: {
-            name: "TypeScript",
-            aliases: ["ts"],
+      blockSpecs: {
+        codeBlock: createCodeBlockSpec({
+          indentLineWithTab: true,
+          defaultLanguage: "typescript",
+          supportedLanguages: {
+            typescript: {
+              name: "TypeScript",
+              aliases: ["ts"],
+            },
           },
-        },
-        createHighlighter: () =>
-          createHighlighter({
-            themes: ["light-plus", "dark-plus"],
-            langs: [],
-          }),
-      }),
+          createHighlighter: () =>
+            createHighlighter({
+              themes: ["light-plus", "dark-plus"],
+              langs: [],
+            }),
+        }),
+      },
     }),
   });
 

packages/react/src/components/Comments/FloatingComposerController.tsx

@@ -62,6 +62,9 @@ export default function FloatingComposerController<
         middleware: [offset(10), shift(), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: false,
+      },
       elementProps: {
         style: {
           zIndex: 60,

packages/react/src/components/Comments/FloatingThreadController.tsx

@@ -58,6 +58,10 @@ export default function FloatingThreadController(props: {
         middleware: [offset(10), shift(), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 30,

packages/react/src/components/FilePanel/FilePanelController.tsx

@@ -2,12 +2,12 @@ import { FilePanelExtension } from "@blocknote/core/extensions";
 import { flip, offset } from "@floating-ui/react";
 import { FC, useMemo } from "react";
 
-import { FilePanel } from "./FilePanel.js";
-import { FilePanelProps } from "./FilePanelProps.js";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
 import { BlockPopover } from "../Popovers/BlockPopover.js";
 import { FloatingUIOptions } from "../Popovers/FloatingUIOptions.js";
-import { useExtension, useExtensionState } from "../../hooks/useExtension.js";
-import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { FilePanel } from "./FilePanel.js";
+import { FilePanelProps } from "./FilePanelProps.js";
 
 export const FilePanelController = (props: {
   filePanel?: FC<FilePanelProps>;
@@ -37,6 +37,10 @@ export const FilePanelController = (props: {
         middleware: [offset(10), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 90,

packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx

@@ -95,6 +95,10 @@ export const FormattingToolbarController = (props: {
         middleware: [offset(10), shift(), flip()],
         ...props.floatingUIOptions?.useFloatingOptions,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 40,

packages/react/src/components/LinkToolbar/LinkToolbarController.tsx

@@ -150,6 +150,10 @@ export const LinkToolbarController = (props: {
         handleClose: safePolygon(),
         ...props.floatingUIOptions?.useHoverProps,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 50,

packages/react/src/components/Popovers/FloatingUIOptions.ts

@@ -1,4 +1,5 @@
 import {
+  FloatingFocusManagerProps,
   UseDismissProps,
   UseFloatingOptions,
   UseHoverProps,
@@ -14,4 +15,8 @@ export type FloatingUIOptions = {
   useDismissProps?: UseDismissProps;
   useHoverProps?: UseHoverProps;
   elementProps?: HTMLAttributes<HTMLDivElement>;
+  /**
+   * Props to pass to the `FloatingFocusManager` component.
+   */
+  focusManagerProps?: Omit<FloatingFocusManagerProps, "context" | "children">;
 };

packages/react/src/components/Popovers/GenericPopover.tsx

@@ -1,12 +1,13 @@
 import {
-  useFloating,
-  useTransitionStyles,
+  autoUpdate,
+  FloatingFocusManager,
   useDismiss,
+  useFloating,
+  useHover,
   useInteractions,
   useMergeRefs,
   useTransitionStatus,
-  autoUpdate,
-  useHover,
+  useTransitionStyles,
 } from "@floating-ui/react";
 import { HTMLAttributes, ReactNode, useEffect, useRef } from "react";
 
@@ -175,6 +176,16 @@ export const GenericPopover = (
     );
   }
 
+  if (!props.focusManagerProps?.disabled) {
+    return (
+      <FloatingFocusManager {...props.focusManagerProps} context={context}>
+        <div ref={mergedRefs} {...mergedProps}>
+          {props.children}
+        </div>
+      </FloatingFocusManager>
+    );
+  }
+
   return (
     <div ref={mergedRefs} {...mergedProps}>
       {props.children}

packages/react/src/components/Popovers/TableCellPopover.tsx

@@ -36,6 +36,10 @@ export const SideMenuController = (props: {
         enabled: false,
         ...props.floatingUIOptions?.useDismissProps,
       },
+      focusManagerProps: {
+        disabled: true,
+        ...props.floatingUIOptions?.focusManagerProps,
+      },
       elementProps: {
         style: {
           zIndex: 20,