Skip to content

Commit 4991bf8

Browse files
committed
Merge branch 'refs/heads/main' into releases
2 parents 7a549f6 + c45936a commit 4991bf8

File tree

4 files changed

+53
-10
lines changed

4 files changed

+53
-10
lines changed

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

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1+
import { Editor } from "@tiptap/core";
12
import { TagParseRule } from "@tiptap/pm/model";
3+
import { NodeView } from "@tiptap/pm/view";
24
import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
35
import { InlineContentSchema } from "../inlineContent/types";
46
import { StyleSchema } from "../styles/types";
@@ -61,6 +63,27 @@ export type CustomBlockImplementation<
6163
) => PartialBlockFromConfig<T, I, S>["props"] | undefined;
6264
};
6365

66+
// Function that enables copying of selected content within non-selectable
67+
// blocks.
68+
export function applyNonSelectableBlockFix(nodeView: NodeView, editor: Editor) {
69+
nodeView.stopEvent = (event) => {
70+
// Ensures copy events are handled by the browser and not by ProseMirror.
71+
if (event.type === "copy" || event.type === "cut") {
72+
return true;
73+
}
74+
// Blurs the editor on mouse down as the block is non-selectable. This is
75+
// mainly done to prevent UI elements like the formatting toolbar from being
76+
// visible while content within a non-selectable block is selected.
77+
if (event.type === "mousedown") {
78+
setTimeout(() => {
79+
editor.view.dom.blur();
80+
}, 10);
81+
return true;
82+
}
83+
return false;
84+
};
85+
}
86+
6487
// Function that uses the 'parse' function of a blockConfig to create a
6588
// TipTap node's `parseHTML` property. This is only used for parsing content
6689
// from the clipboard.
@@ -125,7 +148,7 @@ export function createBlockSpec<
125148
? "inline*"
126149
: "") as T["content"] extends "inline" ? "inline*" : "",
127150
group: "blockContent",
128-
selectable: true,
151+
selectable: blockConfig.isSelectable ?? true,
129152

130153
addAttributes() {
131154
return propsToAttributes(blockConfig.propSchema);
@@ -163,13 +186,19 @@ export function createBlockSpec<
163186

164187
const output = blockImplementation.render(block as any, editor);
165188

166-
return wrapInBlockStructure(
189+
const nodeView: NodeView = wrapInBlockStructure(
167190
output,
168191
block.type,
169192
block.props,
170193
blockConfig.propSchema,
171194
blockContentDOMAttributes
172195
);
196+
197+
if (blockConfig.isSelectable === false) {
198+
applyNonSelectableBlockFix(nodeView, this.editor);
199+
}
200+
201+
return nodeView;
173202
};
174203
},
175204
});

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ export type FileBlockConfig = {
4949
};
5050
};
5151
content: "none";
52+
isSelectable?: boolean;
5253
isFileBlock: true;
5354
fileBlockAccept?: string[];
5455
};
@@ -60,6 +61,7 @@ export type BlockConfig =
6061
type: string;
6162
readonly propSchema: PropSchema;
6263
content: "inline" | "none" | "table";
64+
isSelectable?: boolean;
6365
isFileBlock?: false;
6466
}
6567
| FileBlockConfig;

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {
44
inlineContentToNodes,
55
nodeToCustomInlineContent,
66
} from "../../api/nodeConversions/nodeConversions";
7+
import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
78
import { propsToAttributes } from "../blocks/internal";
89
import { Props } from "../propTypes";
910
import { StyleSchema } from "../styles/types";
@@ -34,13 +35,13 @@ export type CustomInlineContentImplementation<
3435
inlineContent: InlineContentFromConfig<T, S>,
3536
updateInlineContent: (
3637
update: PartialCustomInlineContentFromConfig<T, S>
37-
) => void
38+
) => void,
3839
/**
3940
* The BlockNote editor instance
4041
* This is typed generically. If you want an editor with your custom schema, you need to
4142
* cast it manually, e.g.: `const e = editor as BlockNoteEditor<typeof mySchema>;`
4243
*/
43-
// editor: BlockNoteEditor<B, I, S>
44+
editor: BlockNoteEditor<any, any, S>
4445
// (note) if we want to fix the manual cast, we need to prevent circular references and separate block definition and render implementations
4546
// or allow manually passing <BSchema>, but that's not possible without passing the other generics because Typescript doesn't support partial inferred generics
4647
) => {
@@ -109,7 +110,8 @@ export function createInlineContentSpec<
109110
) as any as InlineContentFromConfig<T, S>, // TODO: fix cast
110111
() => {
111112
// No-op
112-
}
113+
},
114+
editor
113115
);
114116

115117
return addInlineContentAttributes(
@@ -148,7 +150,8 @@ export function createInlineContentSpec<
148150
content
149151
)
150152
);
151-
}
153+
},
154+
editor
152155
);
153156

154157
return addInlineContentAttributes(

packages/react/src/schema/ReactBlockSpec.tsx

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
applyNonSelectableBlockFix,
23
BlockFromConfig,
34
BlockNoteEditor,
45
BlockSchemaWithBlock,
@@ -18,6 +19,7 @@ import {
1819
StyleSchema,
1920
} from "@blocknote/core";
2021
import {
22+
NodeView,
2123
NodeViewContent,
2224
NodeViewProps,
2325
NodeViewWrapper,
@@ -118,7 +120,7 @@ export function createReactBlockSpec<
118120
? "inline*"
119121
: "") as T["content"] extends "inline" ? "inline*" : "",
120122
group: "blockContent",
121-
selectable: true,
123+
selectable: blockConfig.isSelectable ?? true,
122124

123125
addAttributes() {
124126
return propsToAttributes(blockConfig.propSchema);
@@ -140,8 +142,8 @@ export function createReactBlockSpec<
140142
},
141143

142144
addNodeView() {
143-
return (props) =>
144-
ReactNodeViewRenderer(
145+
return (props) => {
146+
const nodeView = ReactNodeViewRenderer(
145147
(props: NodeViewProps) => {
146148
// Gets the BlockNote editor instance
147149
const editor = this.options.editor! as BlockNoteEditor<any>;
@@ -178,7 +180,14 @@ export function createReactBlockSpec<
178180
{
179181
className: "bn-react-node-view-renderer",
180182
}
181-
)(props);
183+
)(props) as NodeView<any>;
184+
185+
if (blockConfig.isSelectable === false) {
186+
applyNonSelectableBlockFix(nodeView, this.editor);
187+
}
188+
189+
return nodeView;
190+
};
182191
},
183192
});
184193

0 commit comments

Comments
 (0)