Merge branch 'refs/heads/main' into releases

packages/core/src/schema/blocks/createSpec.ts

@@ -1,4 +1,6 @@
+import { Editor } from "@tiptap/core";
 import { TagParseRule } from "@tiptap/pm/model";
+import { NodeView } from "@tiptap/pm/view";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { InlineContentSchema } from "../inlineContent/types";
 import { StyleSchema } from "../styles/types";
@@ -61,6 +63,27 @@ export type CustomBlockImplementation<
   ) => PartialBlockFromConfig<T, I, S>["props"] | undefined;
 };
 
+// Function that enables copying of selected content within non-selectable
+// blocks.
+export function applyNonSelectableBlockFix(nodeView: NodeView, editor: Editor) {
+  nodeView.stopEvent = (event) => {
+    // Ensures copy events are handled by the browser and not by ProseMirror.
+    if (event.type === "copy" || event.type === "cut") {
+      return true;
+    }
+    // Blurs the editor on mouse down as the block is non-selectable. This is
+    // mainly done to prevent UI elements like the formatting toolbar from being
+    // visible while content within a non-selectable block is selected.
+    if (event.type === "mousedown") {
+      setTimeout(() => {
+        editor.view.dom.blur();
+      }, 10);
+      return true;
+    }
+    return false;
+  };
+}
+
 // Function that uses the 'parse' function of a blockConfig to create a
 // TipTap node's `parseHTML` property. This is only used for parsing content
 // from the clipboard.
@@ -125,7 +148,7 @@ export function createBlockSpec<
       ? "inline*"
       : "") as T["content"] extends "inline" ? "inline*" : "",
     group: "blockContent",
-    selectable: true,
+    selectable: blockConfig.isSelectable ?? true,
 
     addAttributes() {
       return propsToAttributes(blockConfig.propSchema);
@@ -163,13 +186,19 @@ export function createBlockSpec<
 
         const output = blockImplementation.render(block as any, editor);
 
-        return wrapInBlockStructure(
+        const nodeView: NodeView = wrapInBlockStructure(
           output,
           block.type,
           block.props,
           blockConfig.propSchema,
           blockContentDOMAttributes
         );
+
+        if (blockConfig.isSelectable === false) {
+          applyNonSelectableBlockFix(nodeView, this.editor);
+        }
+
+        return nodeView;
       };
     },
   });

packages/core/src/schema/blocks/types.ts

@@ -49,6 +49,7 @@ export type FileBlockConfig = {
     };
   };
   content: "none";
+  isSelectable?: boolean;
   isFileBlock: true;
   fileBlockAccept?: string[];
 };
@@ -60,6 +61,7 @@ export type BlockConfig =
       type: string;
       readonly propSchema: PropSchema;
       content: "inline" | "none" | "table";
+      isSelectable?: boolean;
       isFileBlock?: false;
     }
   | FileBlockConfig;

packages/core/src/schema/inlineContent/createSpec.ts

@@ -4,6 +4,7 @@ import {
   inlineContentToNodes,
   nodeToCustomInlineContent,
 } from "../../api/nodeConversions/nodeConversions";
+import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { propsToAttributes } from "../blocks/internal";
 import { Props } from "../propTypes";
 import { StyleSchema } from "../styles/types";
@@ -34,13 +35,13 @@ export type CustomInlineContentImplementation<
     inlineContent: InlineContentFromConfig<T, S>,
     updateInlineContent: (
       update: PartialCustomInlineContentFromConfig<T, S>
-    ) => void
+    ) => void,
     /**
      * The BlockNote editor instance
      * This is typed generically. If you want an editor with your custom schema, you need to
      * cast it manually, e.g.: `const e = editor as BlockNoteEditor<typeof mySchema>;`
      */
-    // editor: BlockNoteEditor<B, I, S>
+    editor: BlockNoteEditor<any, any, S>
     // (note) if we want to fix the manual cast, we need to prevent circular references and separate block definition and render implementations
     // or allow manually passing <BSchema>, but that's not possible without passing the other generics because Typescript doesn't support partial inferred generics
   ) => {
@@ -109,7 +110,8 @@ export function createInlineContentSpec<
         ) as any as InlineContentFromConfig<T, S>, // TODO: fix cast
         () => {
           // No-op
-        }
+        },
+        editor
       );
 
       return addInlineContentAttributes(
@@ -148,7 +150,8 @@ export function createInlineContentSpec<
                 content
               )
             );
-          }
+          },
+          editor
         );
 
         return addInlineContentAttributes(

packages/react/src/schema/ReactBlockSpec.tsx

@@ -1,4 +1,5 @@
 import {
+  applyNonSelectableBlockFix,
   BlockFromConfig,
   BlockNoteEditor,
   BlockSchemaWithBlock,
@@ -18,6 +19,7 @@ import {
   StyleSchema,
 } from "@blocknote/core";
 import {
+  NodeView,
   NodeViewContent,
   NodeViewProps,
   NodeViewWrapper,
@@ -118,7 +120,7 @@ export function createReactBlockSpec<
       ? "inline*"
       : "") as T["content"] extends "inline" ? "inline*" : "",
     group: "blockContent",
-    selectable: true,
+    selectable: blockConfig.isSelectable ?? true,
 
     addAttributes() {
       return propsToAttributes(blockConfig.propSchema);
@@ -140,8 +142,8 @@ export function createReactBlockSpec<
     },
 
     addNodeView() {
-      return (props) =>
-        ReactNodeViewRenderer(
+      return (props) => {
+        const nodeView = ReactNodeViewRenderer(
           (props: NodeViewProps) => {
             // Gets the BlockNote editor instance
             const editor = this.options.editor! as BlockNoteEditor<any>;
@@ -178,7 +180,14 @@ export function createReactBlockSpec<
           {
             className: "bn-react-node-view-renderer",
           }
-        )(props);
+        )(props) as NodeView<any>;
+
+        if (blockConfig.isSelectable === false) {
+          applyNonSelectableBlockFix(nodeView, this.editor);
+        }
+
+        return nodeView;
+      };
     },
   });