Skip to content

Commit 3f88072

Browse files
YousefEDYousefED
authored
refactor entrypoints (#77)
* refactor entrypoints * fix packages * fix build * move some more files / remove root.module.css
1 parent 496c020 commit 3f88072

30 files changed

+341
-422
lines changed

‎examples/editor/src/App.tsx

Lines changed: 12 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,27 @@
11
// import logo from './logo.svg'
2-
import { EditorContent, useEditor } from "@blocknote/core";
32
import "@blocknote/core/style.css";
3+
import { BlockNoteView, useBlockNote } from "@blocknote/react";
44
import { Editor } from "@tiptap/core";
55
import styles from "./App.module.css";
6-
import {
7-
ReactAddBlockButtonFactory,
8-
ReactBubbleMenuFactory,
9-
ReactDragHandleFactory,
10-
ReactDragHandleMenuFactory,
11-
ReactHyperlinkMenuFactory,
12-
ReactSuggestionsMenuFactory,
13-
} from "@blocknote/react";
146

157
type WindowWithProseMirror = Window &
168
typeof globalThis & { ProseMirror: Editor };
179

1810
function App() {
19-
const editor = useEditor(
20-
{
21-
addBlockButtonFactory: ReactAddBlockButtonFactory,
22-
bubbleMenuFactory: ReactBubbleMenuFactory,
23-
dragHandleFactory: ReactDragHandleFactory,
24-
dragHandleMenuFactory: ReactDragHandleMenuFactory,
25-
hyperlinkMenuFactory: ReactHyperlinkMenuFactory,
26-
suggestionsMenuFactory: ReactSuggestionsMenuFactory,
11+
const editor = useBlockNote({
12+
onUpdate: ({ editor }) => {
13+
console.log(editor.getJSON());
14+
(window as WindowWithProseMirror).ProseMirror = editor; // Give tests a way to get editor instance
2715
},
28-
{
29-
onUpdate: ({ editor }) => {
30-
console.log(editor.getJSON());
31-
(window as WindowWithProseMirror).ProseMirror = editor; // Give tests a way to get editor instance
16+
editorProps: {
17+
attributes: {
18+
class: styles.editor,
19+
"data-test": "editor",
3220
},
33-
editorProps: {
34-
attributes: {
35-
class: styles.editor,
36-
"data-test": "editor",
37-
},
38-
},
39-
}
40-
);
21+
},
22+
});
4123

42-
return <EditorContent editor={editor} />;
24+
return <BlockNoteView editor={editor} />;
4325
}
4426

4527
export default App;

‎package-lock.json

Lines changed: 9 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/core/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@
6969
"prosemirror-model": "1.18.1",
7070
"prosemirror-state": "1.4.1",
7171
"prosemirror-view": "1.26.2",
72-
"react-icons": "^4.3.1",
7372
"uuid": "^8.3.2"
7473
},
7574
"devDependencies": {

‎packages/core/src/BlockNoteEditor.ts

Lines changed: 84 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,26 @@ import { Editor, EditorOptions } from "@tiptap/core";
33
import { getBlockNoteExtensions } from "./BlockNoteExtensions";
44
import styles from "./editor.module.css";
55
import { BubbleMenuFactory } from "./extensions/BubbleMenu/BubbleMenuFactoryTypes";
6-
import { HyperlinkHoverMenuFactory } from "./extensions/Hyperlinks/HyperlinkMenuFactoryTypes";
7-
import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
8-
import rootStyles from "./root.module.css";
6+
import {
7+
AddBlockButtonFactory,
8+
DragHandleFactory,
9+
DragHandleMenuFactory,
10+
} from "./extensions/DraggableBlocks/DragMenuFactoryTypes";
11+
import { HyperlinkMenuFactory } from "./extensions/Hyperlinks/HyperlinkMenuFactoryTypes";
912
import { SuggestionItem } from "./shared/plugins/suggestion/SuggestionItem";
13+
import { SuggestionsMenuFactory } from "./shared/plugins/suggestion/SuggestionsMenuFactoryTypes";
1014

11-
type BlockNoteEditorOptions = EditorOptions & {
15+
export type BlockNoteEditorOptions = EditorOptions & {
1216
enableBlockNoteExtensions: boolean;
1317
disableHistoryExtension: boolean;
14-
};
15-
16-
export type MenuFactories = {
17-
bubbleMenuFactory: BubbleMenuFactory;
18-
hyperlinkMenuFactory: HyperlinkHoverMenuFactory;
19-
suggestionsMenuFactory: SuggestionsMenuFactory<SuggestionItem>;
18+
uiFactories: {
19+
bubbleMenuFactory: BubbleMenuFactory;
20+
hyperlinkMenuFactory: HyperlinkMenuFactory;
21+
suggestionsMenuFactory: SuggestionsMenuFactory<SuggestionItem>;
22+
addBlockButtonFactory: AddBlockButtonFactory;
23+
dragHandleFactory: DragHandleFactory;
24+
dragHandleMenuFactory: DragHandleMenuFactory;
25+
};
2026
};
2127

2228
const blockNoteExtensions = getBlockNoteExtensions();
@@ -27,55 +33,78 @@ const blockNoteOptions = {
2733
enableCoreExtensions: false,
2834
};
2935

30-
export const mountBlockNoteEditor = (
31-
menuFactories: MenuFactories,
32-
options: Partial<BlockNoteEditorOptions> = {}
33-
) => {
34-
let extensions = options.disableHistoryExtension
35-
? blockNoteExtensions.filter((e) => e.name !== "history")
36-
: blockNoteExtensions;
36+
export class BlockNoteEditor {
37+
public readonly tiptapEditor: Editor & { contentComponent: any };
3738

38-
// TODO: review
39-
extensions = extensions.map((extension) => {
40-
if (extension.name === "BubbleMenuExtension") {
41-
return extension.configure({
42-
bubbleMenuFactory: menuFactories.bubbleMenuFactory,
43-
});
44-
}
39+
constructor(options: Partial<BlockNoteEditorOptions> = {}) {
40+
let extensions = options.disableHistoryExtension
41+
? blockNoteExtensions.filter((e) => e.name !== "history")
42+
: blockNoteExtensions;
4543

46-
if (extension.name === "link") {
47-
return extension.configure({
48-
hyperlinkMenuFactory: menuFactories.hyperlinkMenuFactory,
49-
});
50-
}
44+
// TODO: review
45+
extensions = extensions.map((extension) => {
46+
if (
47+
extension.name === "BubbleMenuExtension" &&
48+
options.uiFactories?.bubbleMenuFactory
49+
) {
50+
return extension.configure({
51+
bubbleMenuFactory: options.uiFactories.bubbleMenuFactory,
52+
});
53+
}
5154

52-
if (extension.name === "slash-command") {
53-
return extension.configure({
54-
suggestionsMenuFactory: menuFactories.suggestionsMenuFactory,
55-
});
56-
}
55+
if (
56+
extension.name === "link" &&
57+
options.uiFactories?.hyperlinkMenuFactory
58+
) {
59+
return extension.configure({
60+
hyperlinkMenuFactory: options.uiFactories.hyperlinkMenuFactory,
61+
});
62+
}
5763

58-
return extension;
59-
});
64+
if (
65+
extension.name === "slash-command" &&
66+
options.uiFactories?.suggestionsMenuFactory
67+
) {
68+
return extension.configure({
69+
suggestionsMenuFactory: options.uiFactories.suggestionsMenuFactory,
70+
});
71+
}
6072

61-
const tiptapOptions = {
62-
...blockNoteOptions,
63-
...options,
64-
extensions:
65-
options.enableBlockNoteExtensions === false
66-
? options.extensions
67-
: [...(options.extensions || []), ...extensions],
68-
editorProps: {
69-
attributes: {
70-
...(options.editorProps?.attributes || {}),
71-
class: [
72-
styles.bnEditor,
73-
rootStyles.bnRoot,
74-
(options.editorProps?.attributes as any)?.class || "",
75-
].join(" "),
73+
if (
74+
extension.name === "DraggableBlocksExtension" &&
75+
options.uiFactories
76+
) {
77+
return extension.configure({
78+
addBlockButtonFactory: options.uiFactories.addBlockButtonFactory,
79+
dragHandleFactory: options.uiFactories.dragHandleFactory,
80+
dragHandleMenuFactory: options.uiFactories.dragHandleMenuFactory,
81+
});
82+
}
83+
84+
return extension;
85+
});
86+
87+
const tiptapOptions = {
88+
...blockNoteOptions,
89+
...options,
90+
extensions:
91+
options.enableBlockNoteExtensions === false
92+
? options.extensions
93+
: [...(options.extensions || []), ...extensions],
94+
editorProps: {
95+
attributes: {
96+
...(options.editorProps?.attributes || {}),
97+
class: [
98+
styles.bnEditor,
99+
styles.bnRoot,
100+
(options.editorProps?.attributes as any)?.class || "",
101+
].join(" "),
102+
},
76103
},
77-
},
78-
};
104+
};
79105

80-
return new Editor(tiptapOptions);
81-
};
106+
this.tiptapEditor = new Editor(tiptapOptions) as Editor & {
107+
contentComponent: any;
108+
};
109+
}
110+
}

‎packages/core/src/EditorContent.tsx

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎packages/core/src/assets/fonts-inter.css

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
/* Generated using https://google-webfonts-helper.herokuapp.com/fonts/inter?subsets=latin */
2+
3+
/* inter-100 - latin */
4+
@font-face {
5+
font-family: "Inter";
6+
font-style: normal;
7+
font-weight: 100;
8+
src: local(""),
9+
url("./inter-v12-latin/inter-v12-latin-100.woff2") format("woff2"),
10+
/* Chrome 26+, Opera 23+, Firefox 39+ */
11+
url("./inter-v12-latin/inter-v12-latin-100.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
12+
}
13+
/* inter-200 - latin */
14+
@font-face {
15+
font-family: "Inter";
16+
font-style: normal;
17+
font-weight: 200;
18+
src: local(""),
19+
url("./inter-v12-latin/inter-v12-latin-200.woff2") format("woff2"),
20+
/* Chrome 26+, Opera 23+, Firefox 39+ */
21+
url("./inter-v12-latin/inter-v12-latin-200.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
22+
}
23+
/* inter-300 - latin */
24+
@font-face {
25+
font-family: "Inter";
26+
font-style: normal;
27+
font-weight: 300;
28+
src: local(""),
29+
url("./inter-v12-latin/inter-v12-latin-300.woff2") format("woff2"),
30+
/* Chrome 26+, Opera 23+, Firefox 39+ */
31+
url("./inter-v12-latin/inter-v12-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
32+
}
33+
/* inter-regular - latin */
34+
@font-face {
35+
font-family: "Inter";
36+
font-style: normal;
37+
font-weight: 400;
38+
src: local(""),
39+
url("./inter-v12-latin/inter-v12-latin-regular.woff2") format("woff2"),
40+
/* Chrome 26+, Opera 23+, Firefox 39+ */
41+
url("./inter-v12-latin/inter-v12-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
42+
}
43+
/* inter-500 - latin */
44+
@font-face {
45+
font-family: "Inter";
46+
font-style: normal;
47+
font-weight: 500;
48+
src: local(""),
49+
url("./inter-v12-latin/inter-v12-latin-500.woff2") format("woff2"),
50+
/* Chrome 26+, Opera 23+, Firefox 39+ */
51+
url("./inter-v12-latin/inter-v12-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
52+
}
53+
/* inter-600 - latin */
54+
@font-face {
55+
font-family: "Inter";
56+
font-style: normal;
57+
font-weight: 600;
58+
src: local(""),
59+
url("./inter-v12-latin/inter-v12-latin-600.woff2") format("woff2"),
60+
/* Chrome 26+, Opera 23+, Firefox 39+ */
61+
url("./inter-v12-latin/inter-v12-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
62+
}
63+
/* inter-700 - latin */
64+
@font-face {
65+
font-family: "Inter";
66+
font-style: normal;
67+
font-weight: 700;
68+
src: local(""),
69+
url("./inter-v12-latin/inter-v12-latin-700.woff2") format("woff2"),
70+
/* Chrome 26+, Opera 23+, Firefox 39+ */
71+
url("./inter-v12-latin/inter-v12-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
72+
}
73+
/* inter-800 - latin */
74+
@font-face {
75+
font-family: "Inter";
76+
font-style: normal;
77+
font-weight: 800;
78+
src: local(""),
79+
url("./inter-v12-latin/inter-v12-latin-800.woff2") format("woff2"),
80+
/* Chrome 26+, Opera 23+, Firefox 39+ */
81+
url("./inter-v12-latin/inter-v12-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
82+
}
83+
/* inter-900 - latin */
84+
@font-face {
85+
font-family: "Inter";
86+
font-style: normal;
87+
font-weight: 900;
88+
src: local(""),
89+
url("./inter-v12-latin/inter-v12-latin-900.woff2") format("woff2"),
90+
/* Chrome 26+, Opera 23+, Firefox 39+ */
91+
url("./inter-v12-latin/inter-v12-latin-900.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
92+
}

0 commit comments

Comments
 (0)