@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.
Files changed (69) hide show
  1. package/dist/blocknote.js +696 -691
  2. package/dist/blocknote.js.map +1 -1
  3. package/dist/blocknote.umd.cjs +1 -1
  4. package/dist/blocknote.umd.cjs.map +1 -1
  5. package/dist/style.css +1 -1
  6. package/package.json +6 -4
  7. package/src/BlockNoteExtensions.ts +1 -10
  8. package/src/extensions/Blocks/PreviousBlockTypePlugin.ts +22 -26
  9. package/src/extensions/Blocks/apiTypes.ts +48 -0
  10. package/src/extensions/Blocks/helpers/findBlock.ts +3 -1
  11. package/src/extensions/Blocks/helpers/getBlockInfoFromPos.ts +1 -1
  12. package/src/extensions/Blocks/index.ts +10 -8
  13. package/src/extensions/Blocks/nodes/Block.module.css +31 -29
  14. package/src/extensions/Blocks/{BlockAttributes.ts → nodes/BlockAttributes.ts} +0 -0
  15. package/src/extensions/Blocks/nodes/{Block.ts → BlockContainer.ts} +75 -94
  16. package/src/extensions/Blocks/nodes/{BlockTypes/HeadingBlock/HeadingContent.ts → BlockContent/HeadingBlockContent/HeadingBlockContent.ts} +16 -24
  17. package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts +76 -0
  18. package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.ts +47 -0
  19. package/src/extensions/Blocks/nodes/{BlockTypes/ListItemBlock/OrderedListItemIndexPlugin.ts → BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.ts} +10 -14
  20. package/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts +95 -0
  21. package/src/extensions/Blocks/nodes/{BlockTypes/TextBlock/TextContent.ts → BlockContent/ParagraphBlockContent/ParagraphBlockContent.ts} +3 -8
  22. package/src/extensions/Blocks/nodes/BlockGroup.ts +4 -4
  23. package/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.ts +1 -1
  24. package/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts +7 -7
  25. package/src/extensions/{Blocks → DraggableBlocks}/MultipleNodeSelection.ts +0 -0
  26. package/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.ts +4 -7
  27. package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts +17 -9
  28. package/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.ts +1 -1
  29. package/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.ts +3 -1
  30. package/src/extensions/SlashMenu/defaultCommands.tsx +22 -23
  31. package/src/extensions/TrailingNode/TrailingNodeExtension.ts +4 -4
  32. package/src/extensions/UniqueID/UniqueID.ts +6 -0
  33. package/src/index.ts +2 -1
  34. package/src/shared/EditorElement.ts +12 -6
  35. package/src/shared/plugins/suggestion/SuggestionPlugin.ts +2 -2
  36. package/src/shared/plugins/suggestion/SuggestionsMenuFactoryTypes.ts +1 -1
  37. package/types/src/BlockNoteEditor.d.ts +1 -1
  38. package/types/src/BlockNoteExtensions.d.ts +1 -3
  39. package/types/src/extensions/Blocks/apiTypes.d.ts +16 -0
  40. package/types/src/extensions/Blocks/helpers/getBlockInfoFromPos.d.ts +1 -1
  41. package/types/src/extensions/Blocks/nodes/BlockAttributes.d.ts +2 -0
  42. package/types/src/extensions/Blocks/nodes/BlockContainer.d.ts +21 -0
  43. package/types/src/extensions/Blocks/nodes/BlockContent/BlockContentTypes.d.ts +4 -0
  44. package/types/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContent.d.ts +2 -0
  45. package/types/src/extensions/Blocks/nodes/BlockContent/HeadingBlockContent/HeadingBlockContentTypes.d.ts +4 -0
  46. package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.d.ts +2 -0
  47. package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContentTypes.d.ts +2 -0
  48. package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/ListItemKeyboardShortcuts.d.ts +2 -0
  49. package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListIndexingPlugin.d.ts +2 -0
  50. package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.d.ts +2 -0
  51. package/types/src/extensions/Blocks/nodes/BlockContent/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContentTypes.d.ts +2 -0
  52. package/types/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContent.d.ts +2 -0
  53. package/types/src/extensions/Blocks/nodes/BlockContent/ParagraphBlockContent/ParagraphBlockContentTypes.d.ts +2 -0
  54. package/types/src/extensions/DraggableBlocks/BlockSideMenuFactoryTypes.d.ts +5 -5
  55. package/types/src/extensions/DraggableBlocks/DraggableBlocksExtension.d.ts +1 -1
  56. package/types/src/extensions/DraggableBlocks/DraggableBlocksPlugin.d.ts +2 -2
  57. package/types/src/extensions/DraggableBlocks/MultipleNodeSelection.d.ts +24 -0
  58. package/types/src/extensions/FormattingToolbar/FormattingToolbarFactoryTypes.d.ts +8 -8
  59. package/types/src/extensions/FormattingToolbar/FormattingToolbarPlugin.d.ts +1 -1
  60. package/types/src/extensions/HyperlinkToolbar/HyperlinkToolbarFactoryTypes.d.ts +5 -5
  61. package/types/src/extensions/HyperlinkToolbar/HyperlinkToolbarPlugin.d.ts +2 -2
  62. package/types/src/extensions/SlashMenu/SlashMenuExtension.d.ts +1 -1
  63. package/types/src/extensions/SlashMenu/SlashMenuItem.d.ts +1 -1
  64. package/types/src/index.d.ts +2 -1
  65. package/types/src/shared/EditorElement.d.ts +6 -2
  66. package/types/src/shared/plugins/suggestion/SuggestionPlugin.d.ts +3 -3
  67. package/types/src/shared/plugins/suggestion/SuggestionsMenuFactoryTypes.d.ts +5 -5
  68. package/src/extensions/Blocks/nodes/BlockTypes/ListItemBlock/ListItemContent.ts +0 -177
  69. 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 type TextContentType = {
5
- name: "textContent";
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: "block",
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") === "block-group") {
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": "block-group",
40
+ "data-node-type": "blockGroup",
41
41
  }),
42
42
  0,
43
43
  ];
@@ -10,7 +10,7 @@ export type BlockSideMenuStaticParams = {
10
10
  };
11
11
 
12
12
  export type BlockSideMenuDynamicParams = {
13
- blockBoundingBox: DOMRect;
13
+ referenceRect: DOMRect;
14
14
  };
15
15
 
16
16
  export type BlockSideMenu = EditorElement<BlockSideMenuDynamicParams>;
@@ -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 { MultipleNodeSelection } from "../Blocks/MultipleNodeSelection";
7
- import { DraggableBlocksOptions } from "./DraggableBlocksExtension";
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 { getBlockInfoFromPos } from "../Blocks/helpers/getBlockInfoFromPos";
15
- import { SlashMenuPluginKey } from "../SlashMenu/SlashMenuExtension";
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
- .BNSetContentType(newBlockContentPos, { name: "textContent" })
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
- blockBoundingBox: new DOMRect(
432
+ referenceRect: new DOMRect(
433
433
  this.horizontalPosAnchoredAtRoot
434
434
  ? getHorizontalAnchor()
435
435
  : blockBoundingBox.x,
@@ -1,5 +1,5 @@
1
1
  import { EditorElement, ElementFactory } from "../../shared/EditorElement";
2
- import { BlockContentType } from "../Blocks/nodes/Block";
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
- setBlockType: (type: BlockContentType) => void;
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
- // BlockContentType is mostly used to set a block's type, so the attr field is optional as block content types have
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
- selectionBoundingBox: DOMRect;
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
- setBlockType: (type: BlockContentType) => {
269
+ updateBlock: (blockUpdate: BlockUpdate) => {
269
270
  this.editor.view.focus();
270
- this.editor.commands.BNSetContentType(
271
+ this.editor.commands.BNUpdateBlock(
271
272
  this.editor.state.selection.from,
272
- type
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
- activeBlockType: {
293
- name: this.editor.state.selection.$from.node().type.name,
294
- attrs: this.editor.state.selection.$from.node().attrs,
295
- } as Required<BlockContentType>,
296
- selectionBoundingBox: this.getSelectionBoundingBox(),
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
  }
@@ -9,7 +9,7 @@ export type HyperlinkToolbarDynamicParams = {
9
9
  url: string;
10
10
  text: string;
11
11
 
12
- boundingBox: DOMRect;
12
+ referenceRect: DOMRect;
13
13
  };
14
14
 
15
15
  export type HyperlinkToolbar = EditorElement<HyperlinkToolbarDynamicParams>;
@@ -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
- boundingBox: posToDOMRect(
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
- .BNCreateBlockOrSetContentType(range.from, {
18
- name: "headingContent",
19
- attrs: {
20
- headingLevel: "1",
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
- .BNCreateBlockOrSetContentType(range.from, {
40
- name: "headingContent",
41
- attrs: {
42
- headingLevel: "2",
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
- .BNCreateBlockOrSetContentType(range.from, {
62
- name: "headingContent",
63
- attrs: {
64
- headingLevel: "3",
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
- .BNCreateBlockOrSetContentType(range.from, {
84
- name: "listItemContent",
85
- attrs: {
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
- .BNCreateBlockOrSetContentType(range.from, {
106
- name: "listItemContent",
107
- attrs: {
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
- .BNCreateBlockOrSetContentType(range.from, { name: "textContent" })
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["block"];
36
- const contentType = schema.nodes["textContent"];
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 !== "block") {
65
- throw new Error("Expected block");
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 { BlockContentType } from "./extensions/Blocks/nodes/Block";
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 EditorElement<ElementDynamicParams extends Record<string, any>> = {
2
- element: HTMLElement | undefined;
3
- render: (params: ElementDynamicParams, isHidden: boolean) => void;
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 Record<string, any>,
9
- ElementDynamicParams extends Record<string, any>
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
- queryStartBoundingBox: decorationNode!.getBoundingClientRect(),
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("orderedListIndexing") !== undefined) {
275
+ if (transaction.getMeta("numberedListIndexing") !== undefined) {
276
276
  return next;
277
277
  }
278
278
 
@@ -9,7 +9,7 @@ export type SuggestionsMenuDynamicParams<T extends SuggestionItem> = {
9
9
  items: T[];
10
10
  selectedItemIndex: number;
11
11
 
12
- queryStartBoundingBox: DOMRect;
12
+ referenceRect: DOMRect;
13
13
  };
14
14
 
15
15
  export type SuggestionsMenu<T extends SuggestionItem> = EditorElement<
@@ -1,6 +1,6 @@
1
1
  import { Editor, EditorOptions } from "@tiptap/core";
2
2
  import { UiFactories } from "./BlockNoteExtensions";
3
- export declare type BlockNoteEditorOptions = EditorOptions & {
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 declare const Document: Node<any, any>;
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>;
@@ -1,5 +1,5 @@
1
1
  import { Node, NodeType } from "prosemirror-model";
2
- export declare type BlockInfo = {
2
+ export type BlockInfo = {
3
3
  id: string;
4
4
  node: Node;
5
5
  contentNode: Node;
@@ -0,0 +1,2 @@
1
+ declare const BlockAttributes: Record<string, string>;
2
+ export default BlockAttributes;
@@ -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>;
@@ -0,0 +1,4 @@
1
+ export declare type Block<Type extends string, Props extends Record<string, string>> = {
2
+ type: Type;
3
+ props: Props;
4
+ };
@@ -0,0 +1,2 @@
1
+ import { Node } from "@tiptap/core";
2
+ export declare const HeadingBlockContent: Node<any, any>;
@@ -0,0 +1,4 @@
1
+ import { Block } from "../BlockContentTypes";
2
+ export declare type HeadingBlock = Block<"heading", {
3
+ level: "1" | "2" | "3";
4
+ }>;
@@ -0,0 +1,2 @@
1
+ import { Node } from "@tiptap/core";
2
+ export declare const BulletListItemBlockContent: Node<any, any>;
@@ -0,0 +1,2 @@
1
+ import { Block } from "../../BlockContentTypes";
2
+ export declare type BulletListItemBlock = Block<"bulletListItem", {}>;
@@ -0,0 +1,2 @@
1
+ import { Editor } from "@tiptap/core";
2
+ export declare const handleEnter: (editor: Editor) => boolean;
@@ -0,0 +1,2 @@
1
+ import { Plugin } from "prosemirror-state";
2
+ export declare const NumberedListIndexingPlugin: () => Plugin<any>;
@@ -0,0 +1,2 @@
1
+ import { Node } from "@tiptap/core";
2
+ export declare const NumberedListItemBlockContent: Node<any, any>;
@@ -0,0 +1,2 @@
1
+ import { Block } from "../../BlockContentTypes";
2
+ export declare type NumberedListItemBlock = Block<"numberedListItem", {}>;
@@ -0,0 +1,2 @@
1
+ import { Node } from "@tiptap/core";
2
+ export declare const ParagraphBlockContent: Node<any, any>;
@@ -0,0 +1,2 @@
1
+ import { Block } from "../BlockContentTypes";
2
+ export declare type ParagraphBlock = Block<"paragraph", {}>;