Skip to content

Commit ae1b46b

Browse files
nperez0111nperez0111
committed
feat(math): add a new package for latex rendering
1 parent 3f83c75 commit ae1b46b

File tree

22 files changed

+1156
-49
lines changed

22 files changed

+1156
-49
lines changed

‎docs/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,9 @@
102102
"y-partykit": "^0.0.25",
103103
"yjs": "^13.6.27",
104104
"zod": "^3.25.67",
105-
"zustand": "^5.0.3"
105+
"zustand": "^5.0.3",
106+
"@blocknote/math": "latest",
107+
"katex": "^0.16.22"
106108
},
107109
"devDependencies": {
108110
"@blocknote/ariakit": "workspace:^",

‎examples/01-basic/14-math/.bnexample.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"playground": true,
3+
"docs": true,
4+
"author": "nperez0111",
5+
"tags": ["Basic"],
6+
"dependencies": {
7+
"@blocknote/math": "latest",
8+
"katex": "^0.16.22"
9+
}
10+
}

‎examples/01-basic/14-math/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Math Block
2+
3+
TODO

‎examples/01-basic/14-math/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>Math Block</title>
6+
<script>
7+
<!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
8+
</script>
9+
</head>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="./main.tsx"></script>
13+
</body>
14+
</html>

‎examples/01-basic/14-math/main.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import React from "react";
3+
import { createRoot } from "react-dom/client";
4+
import App from "./src/App.jsx";
5+
6+
const root = createRoot(document.getElementById("root")!);
7+
root.render(
8+
<React.StrictMode>
9+
<App />
10+
</React.StrictMode>
11+
);

‎examples/01-basic/14-math/package.json‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "@blocknote/example-basic-math",
3+
"description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
4+
"private": true,
5+
"version": "0.12.4",
6+
"scripts": {
7+
"start": "vite",
8+
"dev": "vite",
9+
"build:prod": "tsc && vite build",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@blocknote/core": "latest",
14+
"@blocknote/react": "latest",
15+
"@blocknote/ariakit": "latest",
16+
"@blocknote/mantine": "latest",
17+
"@blocknote/shadcn": "latest",
18+
"react": "^19.1.0",
19+
"react-dom": "^19.1.0",
20+
"@blocknote/math": "latest",
21+
"katex": "^0.16.22"
22+
},
23+
"devDependencies": {
24+
"@types/react": "^19.1.0",
25+
"@types/react-dom": "^19.1.0",
26+
"@vitejs/plugin-react": "^4.3.1",
27+
"vite": "^5.3.4"
28+
}
29+
}

‎examples/01-basic/14-math/src/App.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { BlockNoteSchema, createCodeBlockSpec } from "@blocknote/core";
2+
import "@blocknote/core/fonts/inter.css";
3+
import { BlockNoteView } from "@blocknote/mantine";
4+
import "@blocknote/mantine/style.css";
5+
import { useCreateBlockNote } from "@blocknote/react";
6+
import { createMathBlockSpec } from "@blocknote/math";
7+
import "katex/dist/katex.min.css";
8+
import { useEffect } from "react";
9+
10+
export default function App() {
11+
// Creates a new editor instance.
12+
const editor = useCreateBlockNote({
13+
schema: BlockNoteSchema.create().extend({
14+
blockSpecs: {
15+
math: createMathBlockSpec(),
16+
},
17+
}),
18+
initialContent: [
19+
{
20+
type: "paragraph",
21+
content: "Checkout this math!",
22+
},
23+
{
24+
type: "math",
25+
props: {
26+
expression: "2x^2",
27+
},
28+
},
29+
{
30+
type: "paragraph",
31+
},
32+
],
33+
});
34+
useEffect(() => {
35+
return editor.onChange(() => {
36+
console.log(editor.blocksToFullHTML(editor.document));
37+
console.log(editor.blocksToHTMLLossy(editor.document));
38+
});
39+
}, []);
40+
41+
// Renders the editor instance using a React component.
42+
return <BlockNoteView editor={editor} />;
43+
}

‎examples/01-basic/14-math/tsconfig.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
3+
"compilerOptions": {
4+
"target": "ESNext",
5+
"useDefineForClassFields": true,
6+
"lib": [
7+
"DOM",
8+
"DOM.Iterable",
9+
"ESNext"
10+
],
11+
"allowJs": false,
12+
"skipLibCheck": true,
13+
"esModuleInterop": false,
14+
"allowSyntheticDefaultImports": true,
15+
"strict": true,
16+
"forceConsistentCasingInFileNames": true,
17+
"module": "ESNext",
18+
"moduleResolution": "bundler",
19+
"resolveJsonModule": true,
20+
"isolatedModules": true,
21+
"noEmit": true,
22+
"jsx": "react-jsx",
23+
"composite": true
24+
},
25+
"include": [
26+
"."
27+
],
28+
"__ADD_FOR_LOCAL_DEV_references": [
29+
{
30+
"path": "../../../packages/core/"
31+
},
32+
{
33+
"path": "../../../packages/react/"
34+
}
35+
]
36+
}

‎examples/01-basic/14-math/vite.config.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
2+
import react from "@vitejs/plugin-react";
3+
import * as fs from "fs";
4+
import * as path from "path";
5+
import { defineConfig } from "vite";
6+
// import eslintPlugin from "vite-plugin-eslint";
7+
// https://vitejs.dev/config/
8+
export default defineConfig((conf) => ({
9+
plugins: [react()],
10+
optimizeDeps: {},
11+
build: {
12+
sourcemap: true,
13+
},
14+
resolve: {
15+
alias:
16+
conf.command === "build" ||
17+
!fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
18+
? {}
19+
: ({
20+
// Comment out the lines below to load a built version of blocknote
21+
// or, keep as is to load live from sources with live reload working
22+
"@blocknote/core": path.resolve(
23+
__dirname,
24+
"../../packages/core/src/"
25+
),
26+
"@blocknote/react": path.resolve(
27+
__dirname,
28+
"../../packages/react/src/"
29+
),
30+
} as any),
31+
},
32+
}));

‎packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,7 @@ export class FormattingToolbarView implements PluginView {
191191
from,
192192
to,
193193
});
194+
console.log({ shouldShow });
194195

195196
// in jsdom, Range.prototype.getClientRects is not implemented,
196197
// this would cause `getSelectionBoundingBox` to fail

0 commit comments

Comments
 (0)