@blocknote/core 0.2.2-alpha.0 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/blocknote.js +696 -691
- package/dist/blocknote.js.map +1 -1
- package/dist/blocknote.umd.cjs +1 -1
- package/dist/blocknote.umd.cjs.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +6 -4
- package/src/BlockNoteExtensions.ts +1 -10
- package/src/extensions/Blocks/PreviousBlockTypePlugin.ts +22 -26
- package/src/extensions/Blocks/apiTypes.ts +48 -0
- package/src/extensions/Blocks/helpers/findBlock.ts +3 -1
- package/src/extensions/Blocks/helpers/getBlockInfoFromPos.ts +1 -1
- package/src/extensions/Blocks/index.ts +10 -8
- package/src/extensions/Blocks/nodes/Block.module.css +31 -29
- package/src/extensions/Blocks/{BlockAttributes.ts → nodes/BlockAttributes.ts} +0 -0
- package/src/extensions/Blocks/nodes/{Block.ts → BlockContainer.ts} +75 -94
- package/src/extensions/Blocks/nodes/{BlockTypes/HeadingBlock/HeadingContent.ts → BlockContent/HeadingBlockContent/HeadingBlockContent.ts} +16 -24
- package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts +76 -0
- package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts +47 -0
- package/src/extensions/Blocks/nodes/{BlockTypes/ListItemBlock/OrderedListItemIndexPlugin.ts → BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts} +10 -14
- package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts +95 -0
- package/src/extensions/Blocks/nodes/{BlockTypes/TextBlock/TextContent.ts → BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts} +3 -8
- package/src/extensions/Blocks/nodes/BlockGroup.ts +4 -4
- package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts +1 -1
- package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +7 -7
- package/src/extensions/{Blocks → DraggableBlocks}/MultipleNodeSelection.ts +0 -0
- package/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.ts +4 -7
- package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts +17 -9
- package/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.ts +1 -1
- package/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts +3 -1
- package/src/extensions/SlashMenu/defaultCommands.tsx +22 -23
- package/src/extensions/TrailingNode/TrailingNodeExtension.ts +4 -4
- package/src/extensions/UniqueID/UniqueID.ts +6 -0
- package/src/index.ts +2 -1
- package/src/shared/EditorElement.ts +12 -6
- package/src/shared/plugins/suggestion/SuggestionPlugin.ts +2 -2
- package/src/shared/plugins/suggestion/SuggestionsMenuFactoryTypes.ts +1 -1
- package/types/src/BlockNoteEditor.d.ts +1 -1
- package/types/src/BlockNoteExtensions.d.ts +1 -3
- package/types/src/extensions/Blocks/apiTypes.d.ts +16 -0
- package/types/src/extensions/Blocks/helpers/getBlockInfoFromPos.d.ts +1 -1
- package/types/src/extensions/Blocks/nodes/BlockAttributes.d.ts +2 -0
- package/types/src/extensions/Blocks/nodes/BlockContainer.d.ts +21 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/BlockContentTypes.d.ts +4 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.d.ts +2 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContentTypes.d.ts +4 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.d.ts +2 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContentTypes.d.ts +2 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.d.ts +2 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.d.ts +2 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.d.ts +2 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContentTypes.d.ts +2 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.d.ts +2 -0
- package/types/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContentTypes.d.ts +2 -0
- package/types/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.d.ts +5 -5
- package/types/src/extensions/DraggableBlocks/DraggableBlocksExtension.d.ts +1 -1
- package/types/src/extensions/DraggableBlocks/DraggableBlocksPlugin.d.ts +2 -2
- package/types/src/extensions/DraggableBlocks/MultipleNodeSelection.d.ts +24 -0
- package/types/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.d.ts +8 -8
- package/types/src/extensions/FormattingToolbar/FormattingToolbarPlugin.d.ts +1 -1
- package/types/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.d.ts +5 -5
- package/types/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.d.ts +2 -2
- package/types/src/extensions/SlashMenu/SlashMenuExtension.d.ts +1 -1
- package/types/src/extensions/SlashMenu/SlashMenuItem.d.ts +1 -1
- package/types/src/index.d.ts +2 -1
- package/types/src/shared/EditorElement.d.ts +6 -2
- package/types/src/shared/plugins/suggestion/SuggestionPlugin.d.ts +3 -3
- package/types/src/shared/plugins/suggestion/SuggestionsMenuFactoryTypes.d.ts +5 -5
- package/src/extensions/Blocks/nodes/BlockTypes/ListItemBlock/ListItemContent.ts +0 -177
- package/src/extensions/Paragraph/FixedParagraph.ts +0 -12
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import { InputRule, mergeAttributes, Node } from "@tiptap/core";
|
|
2
|
+
import { NumberedListIndexingPlugin } from "./NumberedListIndexingPlugin";
|
|
3
|
+
import styles from "../../../Block.module.css";
|
|
4
|
+
import { handleEnter } from "../ListItemKeyboardShortcuts";
|
|
5
|
+
|
|
6
|
+
export const NumberedListItemBlockContent = Node.create({
|
|
7
|
+
name: "numberedListItem",
|
|
8
|
+
group: "blockContent",
|
|
9
|
+
content: "inline*",
|
|
10
|
+
|
|
11
|
+
addAttributes() {
|
|
12
|
+
return {
|
|
13
|
+
index: {
|
|
14
|
+
default: null,
|
|
15
|
+
parseHTML: (element) => element.getAttribute("data-index"),
|
|
16
|
+
renderHTML: (attributes) => {
|
|
17
|
+
return {
|
|
18
|
+
"data-index": attributes.index,
|
|
19
|
+
};
|
|
20
|
+
},
|
|
21
|
+
},
|
|
22
|
+
};
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
addInputRules() {
|
|
26
|
+
return [
|
|
27
|
+
// Creates an ordered list when starting with "1.".
|
|
28
|
+
new InputRule({
|
|
29
|
+
find: new RegExp(`^1\\.\\s$`),
|
|
30
|
+
handler: ({ state, chain, range }) => {
|
|
31
|
+
chain()
|
|
32
|
+
.BNUpdateBlock(state.selection.from, {
|
|
33
|
+
type: "numberedListItem",
|
|
34
|
+
props: {},
|
|
35
|
+
})
|
|
36
|
+
// Removes the "1." characters used to set the list.
|
|
37
|
+
.deleteRange({ from: range.from, to: range.to });
|
|
38
|
+
},
|
|
39
|
+
}),
|
|
40
|
+
];
|
|
41
|
+
},
|
|
42
|
+
|
|
43
|
+
addKeyboardShortcuts() {
|
|
44
|
+
return {
|
|
45
|
+
Enter: () => handleEnter(this.editor),
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
|
|
49
|
+
addProseMirrorPlugins() {
|
|
50
|
+
return [NumberedListIndexingPlugin()];
|
|
51
|
+
},
|
|
52
|
+
|
|
53
|
+
parseHTML() {
|
|
54
|
+
return [
|
|
55
|
+
{
|
|
56
|
+
tag: "li",
|
|
57
|
+
getAttrs: (element) => {
|
|
58
|
+
if (typeof element === "string") {
|
|
59
|
+
return false;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
const parent = element.parentElement;
|
|
63
|
+
|
|
64
|
+
if (parent === null) {
|
|
65
|
+
return false;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Case for BlockNote list structure.
|
|
69
|
+
if (parent.getAttribute("data-content-type") === "numberedListItem") {
|
|
70
|
+
return {};
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// Case for regular HTML list structure.
|
|
74
|
+
if (parent.tagName === "OL") {
|
|
75
|
+
return {};
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
return false;
|
|
79
|
+
},
|
|
80
|
+
node: "blockContainer",
|
|
81
|
+
},
|
|
82
|
+
];
|
|
83
|
+
},
|
|
84
|
+
|
|
85
|
+
renderHTML({ HTMLAttributes }) {
|
|
86
|
+
return [
|
|
87
|
+
"div",
|
|
88
|
+
mergeAttributes(HTMLAttributes, {
|
|
89
|
+
class: styles.blockContent,
|
|
90
|
+
"data-content-type": this.name,
|
|
91
|
+
}),
|
|
92
|
+
["li", 0],
|
|
93
|
+
];
|
|
94
|
+
},
|
|
95
|
+
});
|
|
@@ -1,13 +1,8 @@
|
|
|
1
1
|
import { Node } from "@tiptap/core";
|
|
2
2
|
import styles from "../../Block.module.css";
|
|
3
3
|
|
|
4
|
-
export
|
|
5
|
-
name: "
|
|
6
|
-
attrs?: {};
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
export const TextContent = Node.create({
|
|
10
|
-
name: "textContent",
|
|
4
|
+
export const ParagraphBlockContent = Node.create({
|
|
5
|
+
name: "paragraph",
|
|
11
6
|
group: "blockContent",
|
|
12
7
|
content: "inline*",
|
|
13
8
|
|
|
@@ -16,7 +11,7 @@ export const TextContent = Node.create({
|
|
|
16
11
|
{
|
|
17
12
|
tag: "p",
|
|
18
13
|
priority: 200,
|
|
19
|
-
node: "
|
|
14
|
+
node: "blockContainer",
|
|
20
15
|
},
|
|
21
16
|
];
|
|
22
17
|
},
|
|
@@ -3,6 +3,8 @@ import styles from "./Block.module.css";
|
|
|
3
3
|
|
|
4
4
|
export const BlockGroup = Node.create({
|
|
5
5
|
name: "blockGroup",
|
|
6
|
+
group: "blockGroup",
|
|
7
|
+
content: "blockContainer+",
|
|
6
8
|
|
|
7
9
|
addOptions() {
|
|
8
10
|
return {
|
|
@@ -10,8 +12,6 @@ export const BlockGroup = Node.create({
|
|
|
10
12
|
};
|
|
11
13
|
},
|
|
12
14
|
|
|
13
|
-
content: "block+",
|
|
14
|
-
|
|
15
15
|
parseHTML() {
|
|
16
16
|
return [
|
|
17
17
|
{
|
|
@@ -21,7 +21,7 @@ export const BlockGroup = Node.create({
|
|
|
21
21
|
return false;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
if (element.getAttribute("data-node-type") === "
|
|
24
|
+
if (element.getAttribute("data-node-type") === "blockGroup") {
|
|
25
25
|
// Null means the element matches, but we don't want to add any attributes to the node.
|
|
26
26
|
return null;
|
|
27
27
|
}
|
|
@@ -37,7 +37,7 @@ export const BlockGroup = Node.create({
|
|
|
37
37
|
"div",
|
|
38
38
|
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
|
|
39
39
|
class: styles.blockGroup,
|
|
40
|
-
"data-node-type": "
|
|
40
|
+
"data-node-type": "blockGroup",
|
|
41
41
|
}),
|
|
42
42
|
0,
|
|
43
43
|
];
|
|
@@ -3,17 +3,17 @@ import { Node } from "prosemirror-model";
|
|
|
3
3
|
import { NodeSelection, Plugin, PluginKey, Selection } from "prosemirror-state";
|
|
4
4
|
import * as pv from "prosemirror-view";
|
|
5
5
|
import { EditorView } from "prosemirror-view";
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
6
|
+
import styles from "../../editor.module.css";
|
|
7
|
+
import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
|
|
8
|
+
import { SlashMenuPluginKey } from "../SlashMenu/SlashMenuExtension";
|
|
8
9
|
import {
|
|
9
10
|
BlockSideMenu,
|
|
10
11
|
BlockSideMenuDynamicParams,
|
|
11
12
|
BlockSideMenuFactory,
|
|
12
13
|
BlockSideMenuStaticParams,
|
|
13
14
|
} from "./BlockSideMenuFactoryTypes";
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import styles from "../../editor.module.css";
|
|
15
|
+
import { DraggableBlocksOptions } from "./DraggableBlocksExtension";
|
|
16
|
+
import { MultipleNodeSelection } from "./MultipleNodeSelection";
|
|
17
17
|
|
|
18
18
|
const serializeForClipboard = (pv as any).__serializeForClipboard;
|
|
19
19
|
// code based on https://github.com/ueberdosis/tiptap/issues/323#issuecomment-506637799
|
|
@@ -377,7 +377,7 @@ export class BlockMenuView {
|
|
|
377
377
|
this.editor
|
|
378
378
|
.chain()
|
|
379
379
|
.BNCreateBlock(newBlockInsertionPos)
|
|
380
|
-
.
|
|
380
|
+
.BNUpdateBlock(newBlockContentPos, { type: "paragraph", props: {} })
|
|
381
381
|
.setTextSelection(newBlockContentPos)
|
|
382
382
|
.run();
|
|
383
383
|
}
|
|
@@ -429,7 +429,7 @@ export class BlockMenuView {
|
|
|
429
429
|
const blockBoundingBox = this.hoveredBlock!.getBoundingClientRect();
|
|
430
430
|
|
|
431
431
|
return {
|
|
432
|
-
|
|
432
|
+
referenceRect: new DOMRect(
|
|
433
433
|
this.horizontalPosAnchoredAtRoot
|
|
434
434
|
? getHorizontalAnchor()
|
|
435
435
|
: blockBoundingBox.x,
|
|
File without changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { EditorElement, ElementFactory } from "../../shared/EditorElement";
|
|
2
|
-
import {
|
|
2
|
+
import { Block, BlockUpdate } from "../Blocks/apiTypes";
|
|
3
3
|
|
|
4
4
|
export type FormattingToolbarStaticParams = {
|
|
5
5
|
toggleBold: () => void;
|
|
@@ -8,7 +8,7 @@ export type FormattingToolbarStaticParams = {
|
|
|
8
8
|
toggleStrike: () => void;
|
|
9
9
|
setHyperlink: (url: string, text?: string) => void;
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
updateBlock: (blockUpdate: BlockUpdate) => void;
|
|
12
12
|
};
|
|
13
13
|
|
|
14
14
|
export type FormattingToolbarDynamicParams = {
|
|
@@ -20,12 +20,9 @@ export type FormattingToolbarDynamicParams = {
|
|
|
20
20
|
activeHyperlinkUrl: string;
|
|
21
21
|
activeHyperlinkText: string;
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
// default values for attributes. However, it means that a block type's attributes field will never be undefined due to
|
|
25
|
-
// these default values, which the Required type enforces.
|
|
26
|
-
activeBlockType: Required<BlockContentType>;
|
|
23
|
+
block: Block;
|
|
27
24
|
|
|
28
|
-
|
|
25
|
+
referenceRect: DOMRect;
|
|
29
26
|
};
|
|
30
27
|
|
|
31
28
|
export type FormattingToolbar = EditorElement<FormattingToolbarDynamicParams>;
|
|
@@ -6,13 +6,14 @@ import {
|
|
|
6
6
|
} from "@tiptap/core";
|
|
7
7
|
import { EditorState, Plugin, PluginKey } from "prosemirror-state";
|
|
8
8
|
import { EditorView } from "prosemirror-view";
|
|
9
|
+
import { Block, BlockUpdate } from "../Blocks/apiTypes";
|
|
10
|
+
import { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
|
|
9
11
|
import {
|
|
10
12
|
FormattingToolbar,
|
|
11
13
|
FormattingToolbarDynamicParams,
|
|
12
14
|
FormattingToolbarFactory,
|
|
13
15
|
FormattingToolbarStaticParams,
|
|
14
16
|
} from "./FormattingToolbarFactoryTypes";
|
|
15
|
-
import { BlockContentType } from "../Blocks/nodes/Block";
|
|
16
17
|
|
|
17
18
|
// Same as TipTap bubblemenu plugin, but with these changes:
|
|
18
19
|
// https://github.com/ueberdosis/tiptap/pull/2596/files
|
|
@@ -265,17 +266,22 @@ export class FormattingToolbarView {
|
|
|
265
266
|
);
|
|
266
267
|
this.editor.view.focus();
|
|
267
268
|
},
|
|
268
|
-
|
|
269
|
+
updateBlock: (blockUpdate: BlockUpdate) => {
|
|
269
270
|
this.editor.view.focus();
|
|
270
|
-
this.editor.commands.
|
|
271
|
+
this.editor.commands.BNUpdateBlock(
|
|
271
272
|
this.editor.state.selection.from,
|
|
272
|
-
|
|
273
|
+
blockUpdate
|
|
273
274
|
);
|
|
274
275
|
},
|
|
275
276
|
};
|
|
276
277
|
}
|
|
277
278
|
|
|
278
279
|
getDynamicParams(): FormattingToolbarDynamicParams {
|
|
280
|
+
const blockInfo = getBlockInfoFromPos(
|
|
281
|
+
this.editor.state.doc,
|
|
282
|
+
this.editor.state.selection.from
|
|
283
|
+
)!;
|
|
284
|
+
|
|
279
285
|
return {
|
|
280
286
|
boldIsActive: this.editor.isActive("bold"),
|
|
281
287
|
italicIsActive: this.editor.isActive("italic"),
|
|
@@ -289,11 +295,13 @@ export class FormattingToolbarView {
|
|
|
289
295
|
this.editor.state.selection.from,
|
|
290
296
|
this.editor.state.selection.to
|
|
291
297
|
),
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
298
|
+
// Needs type cast as there is no way to create a type that dynamically updates based on which extensions are
|
|
299
|
+
// loaded by the editor.
|
|
300
|
+
block: {
|
|
301
|
+
type: blockInfo.contentType.name,
|
|
302
|
+
props: blockInfo.contentNode.attrs,
|
|
303
|
+
} as Block,
|
|
304
|
+
referenceRect: this.getSelectionBoundingBox(),
|
|
297
305
|
};
|
|
298
306
|
}
|
|
299
307
|
}
|
|
@@ -166,6 +166,8 @@ class HyperlinkToolbarView {
|
|
|
166
166
|
|
|
167
167
|
// Updates menu.
|
|
168
168
|
this.hyperlinkToolbar.render(this.getDynamicParams(), false);
|
|
169
|
+
|
|
170
|
+
return;
|
|
169
171
|
}
|
|
170
172
|
|
|
171
173
|
// Hides menu.
|
|
@@ -227,7 +229,7 @@ class HyperlinkToolbarView {
|
|
|
227
229
|
this.hyperlinkMarkRange!.from,
|
|
228
230
|
this.hyperlinkMarkRange!.to
|
|
229
231
|
),
|
|
230
|
-
|
|
232
|
+
referenceRect: posToDOMRect(
|
|
231
233
|
this.editor.view,
|
|
232
234
|
this.hyperlinkMarkRange!.from,
|
|
233
235
|
this.hyperlinkMarkRange!.to
|
|
@@ -14,10 +14,10 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
|
|
|
14
14
|
.chain()
|
|
15
15
|
.focus()
|
|
16
16
|
.deleteRange(range)
|
|
17
|
-
.
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
.BNCreateOrUpdateBlock(range.from, {
|
|
18
|
+
type: "heading",
|
|
19
|
+
props: {
|
|
20
|
+
level: "1",
|
|
21
21
|
},
|
|
22
22
|
})
|
|
23
23
|
.run();
|
|
@@ -36,10 +36,10 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
|
|
|
36
36
|
.chain()
|
|
37
37
|
.focus()
|
|
38
38
|
.deleteRange(range)
|
|
39
|
-
.
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
39
|
+
.BNCreateOrUpdateBlock(range.from, {
|
|
40
|
+
type: "heading",
|
|
41
|
+
props: {
|
|
42
|
+
level: "2",
|
|
43
43
|
},
|
|
44
44
|
})
|
|
45
45
|
.run();
|
|
@@ -58,10 +58,10 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
|
|
|
58
58
|
.chain()
|
|
59
59
|
.focus()
|
|
60
60
|
.deleteRange(range)
|
|
61
|
-
.
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
61
|
+
.BNCreateOrUpdateBlock(range.from, {
|
|
62
|
+
type: "heading",
|
|
63
|
+
props: {
|
|
64
|
+
level: "3",
|
|
65
65
|
},
|
|
66
66
|
})
|
|
67
67
|
.run();
|
|
@@ -80,11 +80,9 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
|
|
|
80
80
|
.chain()
|
|
81
81
|
.focus()
|
|
82
82
|
.deleteRange(range)
|
|
83
|
-
.
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
listItemType: "ordered",
|
|
87
|
-
},
|
|
83
|
+
.BNCreateOrUpdateBlock(range.from, {
|
|
84
|
+
type: "numberedListItem",
|
|
85
|
+
props: {},
|
|
88
86
|
})
|
|
89
87
|
.run();
|
|
90
88
|
},
|
|
@@ -102,11 +100,9 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
|
|
|
102
100
|
.chain()
|
|
103
101
|
.focus()
|
|
104
102
|
.deleteRange(range)
|
|
105
|
-
.
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
listItemType: "unordered",
|
|
109
|
-
},
|
|
103
|
+
.BNCreateOrUpdateBlock(range.from, {
|
|
104
|
+
type: "bulletListItem",
|
|
105
|
+
props: {},
|
|
110
106
|
})
|
|
111
107
|
.run();
|
|
112
108
|
},
|
|
@@ -124,7 +120,10 @@ const defaultCommands: { [key: string]: SlashMenuItem } = {
|
|
|
124
120
|
.chain()
|
|
125
121
|
.focus()
|
|
126
122
|
.deleteRange(range)
|
|
127
|
-
.
|
|
123
|
+
.BNCreateOrUpdateBlock(range.from, {
|
|
124
|
+
type: "paragraph",
|
|
125
|
+
props: {},
|
|
126
|
+
})
|
|
128
127
|
.run();
|
|
129
128
|
},
|
|
130
129
|
["p"],
|
|
@@ -32,8 +32,8 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
|
|
|
32
32
|
const { doc, tr, schema } = state;
|
|
33
33
|
const shouldInsertNodeAtEnd = plugin.getState(state);
|
|
34
34
|
const endPosition = doc.content.size - 2;
|
|
35
|
-
const type = schema.nodes["
|
|
36
|
-
const contentType = schema.nodes["
|
|
35
|
+
const type = schema.nodes["blockContainer"];
|
|
36
|
+
const contentType = schema.nodes["paragraph"];
|
|
37
37
|
if (!shouldInsertNodeAtEnd) {
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
@@ -61,8 +61,8 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
|
|
|
61
61
|
|
|
62
62
|
lastNode = lastNode.lastChild;
|
|
63
63
|
|
|
64
|
-
if (!lastNode || lastNode.type.name !== "
|
|
65
|
-
throw new Error("Expected
|
|
64
|
+
if (!lastNode || lastNode.type.name !== "blockContainer") {
|
|
65
|
+
throw new Error("Expected blockContainer");
|
|
66
66
|
}
|
|
67
67
|
return lastNode.nodeSize > 4; // empty <block><content/></block> is length 4
|
|
68
68
|
},
|
|
@@ -75,6 +75,12 @@ const UniqueID = Extension.create({
|
|
|
75
75
|
attributes: {
|
|
76
76
|
[this.options.attributeName]: {
|
|
77
77
|
default: null,
|
|
78
|
+
parseHTML: (element) =>
|
|
79
|
+
element.getAttribute(`data-${this.options.attributeName}`),
|
|
80
|
+
renderHTML: (attributes) => ({
|
|
81
|
+
[`data-${this.options.attributeName}`]:
|
|
82
|
+
attributes[this.options.attributeName],
|
|
83
|
+
}),
|
|
78
84
|
},
|
|
79
85
|
},
|
|
80
86
|
},
|
package/src/index.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
export * from "./BlockNoteEditor";
|
|
2
2
|
export * from "./BlockNoteExtensions";
|
|
3
|
-
export type {
|
|
3
|
+
export type { Block, BlockUpdate } from "./extensions/Blocks/apiTypes";
|
|
4
4
|
export * from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
|
|
5
5
|
export * from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
|
|
6
6
|
export * from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
|
|
7
7
|
export * from "./extensions/SlashMenu/SlashMenuItem";
|
|
8
|
+
export * from "./shared/EditorElement";
|
|
8
9
|
export type { SuggestionItem } from "./shared/plugins/suggestion/SuggestionItem";
|
|
9
10
|
export * from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
export type
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
hide: () => void;
|
|
1
|
+
export type RequiredStaticParams = Record<string, any>;
|
|
2
|
+
export type RequiredDynamicParams = Record<string, any> & {
|
|
3
|
+
referenceRect: DOMRect;
|
|
5
4
|
};
|
|
6
5
|
|
|
6
|
+
export type EditorElement<ElementDynamicParams extends RequiredDynamicParams> =
|
|
7
|
+
{
|
|
8
|
+
element: HTMLElement | undefined;
|
|
9
|
+
render: (params: ElementDynamicParams, isHidden: boolean) => void;
|
|
10
|
+
hide: () => void;
|
|
11
|
+
};
|
|
12
|
+
|
|
7
13
|
export type ElementFactory<
|
|
8
|
-
ElementStaticParams extends
|
|
9
|
-
ElementDynamicParams extends
|
|
14
|
+
ElementStaticParams extends RequiredStaticParams,
|
|
15
|
+
ElementDynamicParams extends RequiredDynamicParams
|
|
10
16
|
> = (staticParams: ElementStaticParams) => EditorElement<ElementDynamicParams>;
|
|
@@ -201,7 +201,7 @@ class SuggestionPluginView<T extends SuggestionItem> {
|
|
|
201
201
|
return {
|
|
202
202
|
items: this.pluginState.items,
|
|
203
203
|
selectedItemIndex: this.pluginState.selectedItemIndex,
|
|
204
|
-
|
|
204
|
+
referenceRect: decorationNode!.getBoundingClientRect(),
|
|
205
205
|
};
|
|
206
206
|
}
|
|
207
207
|
}
|
|
@@ -272,7 +272,7 @@ export function createSuggestionPlugin<T extends SuggestionItem>({
|
|
|
272
272
|
const next = { ...prev };
|
|
273
273
|
|
|
274
274
|
// TODO: More clearly define which transactions should be ignored and which should deactivate the menu.
|
|
275
|
-
if (transaction.getMeta("
|
|
275
|
+
if (transaction.getMeta("numberedListIndexing") !== undefined) {
|
|
276
276
|
return next;
|
|
277
277
|
}
|
|
278
278
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Editor, EditorOptions } from "@tiptap/core";
|
|
2
2
|
import { UiFactories } from "./BlockNoteExtensions";
|
|
3
|
-
export
|
|
3
|
+
export type BlockNoteEditorOptions = EditorOptions & {
|
|
4
4
|
enableBlockNoteExtensions: boolean;
|
|
5
5
|
disableHistoryExtension: boolean;
|
|
6
6
|
uiFactories: UiFactories;
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { Extensions } from "@tiptap/core";
|
|
2
|
-
import { Node } from "@tiptap/core";
|
|
3
2
|
import { FormattingToolbarFactory } from "./extensions/FormattingToolbar/FormattingToolbarFactoryTypes";
|
|
4
3
|
import { HyperlinkToolbarFactory } from "./extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes";
|
|
5
4
|
import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
|
|
6
5
|
import { BlockSideMenuFactory } from "./extensions/DraggableBlocks/BlockSideMenuFactoryTypes";
|
|
7
6
|
import { SlashMenuItem } from "./extensions/SlashMenu/SlashMenuItem";
|
|
8
|
-
export
|
|
9
|
-
export declare type UiFactories = Partial<{
|
|
7
|
+
export type UiFactories = Partial<{
|
|
10
8
|
formattingToolbarFactory: FormattingToolbarFactory;
|
|
11
9
|
hyperlinkToolbarFactory: HyperlinkToolbarFactory;
|
|
12
10
|
slashMenuFactory: SuggestionsMenuFactory<SlashMenuItem>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type BlockSpec<Type extends string, Props extends Record<string, string>> = {
|
|
2
|
+
type: Type;
|
|
3
|
+
props: Props;
|
|
4
|
+
};
|
|
5
|
+
export type BlockSpecUpdate<Spec> = Spec extends BlockSpec<infer Type, infer Props> ? {
|
|
6
|
+
type: Type;
|
|
7
|
+
props?: Partial<Props>;
|
|
8
|
+
} : never;
|
|
9
|
+
export type NumberedListItemBlock = BlockSpec<"numberedListItem", {}>;
|
|
10
|
+
export type BulletListItemBlock = BlockSpec<"bulletListItem", {}>;
|
|
11
|
+
export type HeadingBlock = BlockSpec<"heading", {
|
|
12
|
+
level: "1" | "2" | "3";
|
|
13
|
+
}>;
|
|
14
|
+
export type ParagraphBlock = BlockSpec<"paragraph", {}>;
|
|
15
|
+
export type Block = ParagraphBlock | HeadingBlock | BulletListItemBlock | NumberedListItemBlock;
|
|
16
|
+
export type BlockUpdate = BlockSpecUpdate<Block>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Node } from "@tiptap/core";
|
|
2
|
+
import { BlockUpdate } from "../apiTypes";
|
|
3
|
+
export interface IBlock {
|
|
4
|
+
HTMLAttributes: Record<string, any>;
|
|
5
|
+
}
|
|
6
|
+
declare module "@tiptap/core" {
|
|
7
|
+
interface Commands<ReturnType> {
|
|
8
|
+
block: {
|
|
9
|
+
BNCreateBlock: (pos: number) => ReturnType;
|
|
10
|
+
BNDeleteBlock: (posInBlock: number) => ReturnType;
|
|
11
|
+
BNMergeBlocks: (posBetweenBlocks: number) => ReturnType;
|
|
12
|
+
BNSplitBlock: (posInBlock: number, keepType: boolean) => ReturnType;
|
|
13
|
+
BNUpdateBlock: (posInBlock: number, blockUpdate: BlockUpdate) => ReturnType;
|
|
14
|
+
BNCreateOrUpdateBlock: (posInBlock: number, blockUpdate: BlockUpdate) => ReturnType;
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* The main "Block node" documents consist of
|
|
20
|
+
*/
|
|
21
|
+
export declare const BlockContainer: Node<IBlock, any>;
|