diff --git a/docs/package.json b/docs/package.json
index 6104272225..e57ef11654 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -102,7 +102,9 @@
"y-partykit": "^0.0.25",
"yjs": "^13.6.27",
"zod": "^3.25.67",
- "zustand": "^5.0.3"
+ "zustand": "^5.0.3",
+ "@blocknote/math": "latest",
+ "katex": "^0.16.22"
},
"devDependencies": {
"@blocknote/ariakit": "workspace:^",
diff --git a/examples/01-basic/14-math/.bnexample.json b/examples/01-basic/14-math/.bnexample.json
new file mode 100644
index 0000000000..10fa97c3ea
--- /dev/null
+++ b/examples/01-basic/14-math/.bnexample.json
@@ -0,0 +1,10 @@
+{
+ "playground": true,
+ "docs": true,
+ "author": "nperez0111",
+ "tags": ["Basic"],
+ "dependencies": {
+ "@blocknote/math": "latest",
+ "katex": "^0.16.22"
+ }
+}
diff --git a/examples/01-basic/14-math/README.md b/examples/01-basic/14-math/README.md
new file mode 100644
index 0000000000..9b764210f1
--- /dev/null
+++ b/examples/01-basic/14-math/README.md
@@ -0,0 +1,3 @@
+# Math Block
+
+TODO
diff --git a/examples/01-basic/14-math/index.html b/examples/01-basic/14-math/index.html
new file mode 100644
index 0000000000..034154dbcf
--- /dev/null
+++ b/examples/01-basic/14-math/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+ Math Block
+
+
+
+
+
+
+
diff --git a/examples/01-basic/14-math/main.tsx b/examples/01-basic/14-math/main.tsx
new file mode 100644
index 0000000000..677c7f7eed
--- /dev/null
+++ b/examples/01-basic/14-math/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./src/App.jsx";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+
+
+
+);
diff --git a/examples/01-basic/14-math/package.json b/examples/01-basic/14-math/package.json
new file mode 100644
index 0000000000..1baa5b6016
--- /dev/null
+++ b/examples/01-basic/14-math/package.json
@@ -0,0 +1,29 @@
+{
+ "name": "@blocknote/example-basic-math",
+ "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+ "private": true,
+ "version": "0.12.4",
+ "scripts": {
+ "start": "vite",
+ "dev": "vite",
+ "build:prod": "tsc && vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@blocknote/core": "latest",
+ "@blocknote/react": "latest",
+ "@blocknote/ariakit": "latest",
+ "@blocknote/mantine": "latest",
+ "@blocknote/shadcn": "latest",
+ "react": "^19.1.0",
+ "react-dom": "^19.1.0",
+ "@blocknote/math": "latest",
+ "katex": "^0.16.22"
+ },
+ "devDependencies": {
+ "@types/react": "^19.1.0",
+ "@types/react-dom": "^19.1.0",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.4"
+ }
+}
\ No newline at end of file
diff --git a/examples/01-basic/14-math/src/App.tsx b/examples/01-basic/14-math/src/App.tsx
new file mode 100644
index 0000000000..200eec0c41
--- /dev/null
+++ b/examples/01-basic/14-math/src/App.tsx
@@ -0,0 +1,43 @@
+import { BlockNoteSchema, createCodeBlockSpec } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { createMathBlockSpec } from "@blocknote/math";
+import "katex/dist/katex.min.css";
+import { useEffect } from "react";
+
+export default function App() {
+ // Creates a new editor instance.
+ const editor = useCreateBlockNote({
+ schema: BlockNoteSchema.create().extend({
+ blockSpecs: {
+ math: createMathBlockSpec(),
+ },
+ }),
+ initialContent: [
+ {
+ type: "paragraph",
+ content: "Checkout this math!",
+ },
+ {
+ type: "math",
+ props: {
+ expression: "2x^2",
+ },
+ },
+ {
+ type: "paragraph",
+ },
+ ],
+ });
+ useEffect(() => {
+ return editor.onChange(() => {
+ console.log(editor.blocksToFullHTML(editor.document));
+ console.log(editor.blocksToHTMLLossy(editor.document));
+ });
+ }, []);
+
+ // Renders the editor instance using a React component.
+ return ;
+}
diff --git a/examples/01-basic/14-math/tsconfig.json b/examples/01-basic/14-math/tsconfig.json
new file mode 100644
index 0000000000..dbe3e6f62d
--- /dev/null
+++ b/examples/01-basic/14-math/tsconfig.json
@@ -0,0 +1,36 @@
+{
+ "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": [
+ "DOM",
+ "DOM.Iterable",
+ "ESNext"
+ ],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "composite": true
+ },
+ "include": [
+ "."
+ ],
+ "__ADD_FOR_LOCAL_DEV_references": [
+ {
+ "path": "../../../packages/core/"
+ },
+ {
+ "path": "../../../packages/react/"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/examples/01-basic/14-math/vite.config.ts b/examples/01-basic/14-math/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/01-basic/14-math/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+ plugins: [react()],
+ optimizeDeps: {},
+ build: {
+ sourcemap: true,
+ },
+ resolve: {
+ alias:
+ conf.command === "build" ||
+ !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+ ? {}
+ : ({
+ // Comment out the lines below to load a built version of blocknote
+ // or, keep as is to load live from sources with live reload working
+ "@blocknote/core": path.resolve(
+ __dirname,
+ "../../packages/core/src/"
+ ),
+ "@blocknote/react": path.resolve(
+ __dirname,
+ "../../packages/react/src/"
+ ),
+ } as any),
+ },
+}));
diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
index efa670291a..48dfc0fb58 100644
--- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
+++ b/packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
@@ -191,6 +191,7 @@ export class FormattingToolbarView implements PluginView {
from,
to,
});
+ console.log({ shouldShow });
// in jsdom, Range.prototype.getClientRects is not implemented,
// this would cause `getSelectionBoundingBox` to fail
diff --git a/packages/math/.gitignore b/packages/math/.gitignore
new file mode 100644
index 0000000000..58f115c8dc
--- /dev/null
+++ b/packages/math/.gitignore
@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/math/LICENSE b/packages/math/LICENSE
new file mode 100644
index 0000000000..fa0086a952
--- /dev/null
+++ b/packages/math/LICENSE
@@ -0,0 +1,373 @@
+Mozilla Public License Version 2.0
+==================================
+
+1. Definitions
+--------------
+
+1.1. "Contributor"
+ means each individual or legal entity that creates, contributes to
+ the creation of, or owns Covered Software.
+
+1.2. "Contributor Version"
+ means the combination of the Contributions of others (if any) used
+ by a Contributor and that particular Contributor's Contribution.
+
+1.3. "Contribution"
+ means Covered Software of a particular Contributor.
+
+1.4. "Covered Software"
+ means Source Code Form to which the initial Contributor has attached
+ the notice in Exhibit A, the Executable Form of such Source Code
+ Form, and Modifications of such Source Code Form, in each case
+ including portions thereof.
+
+1.5. "Incompatible With Secondary Licenses"
+ means
+
+ (a) that the initial Contributor has attached the notice described
+ in Exhibit B to the Covered Software; or
+
+ (b) that the Covered Software was made available under the terms of
+ version 1.1 or earlier of the License, but not also under the
+ terms of a Secondary License.
+
+1.6. "Executable Form"
+ means any form of the work other than Source Code Form.
+
+1.7. "Larger Work"
+ means a work that combines Covered Software with other material, in
+ a separate file or files, that is not Covered Software.
+
+1.8. "License"
+ means this document.
+
+1.9. "Licensable"
+ means having the right to grant, to the maximum extent possible,
+ whether at the time of the initial grant or subsequently, any and
+ all of the rights conveyed by this License.
+
+1.10. "Modifications"
+ means any of the following:
+
+ (a) any file in Source Code Form that results from an addition to,
+ deletion from, or modification of the contents of Covered
+ Software; or
+
+ (b) any new file in Source Code Form that contains any Covered
+ Software.
+
+1.11. "Patent Claims" of a Contributor
+ means any patent claim(s), including without limitation, method,
+ process, and apparatus claims, in any patent Licensable by such
+ Contributor that would be infringed, but for the grant of the
+ License, by the making, using, selling, offering for sale, having
+ made, import, or transfer of either its Contributions or its
+ Contributor Version.
+
+1.12. "Secondary License"
+ means either the GNU General Public License, Version 2.0, the GNU
+ Lesser General Public License, Version 2.1, the GNU Affero General
+ Public License, Version 3.0, or any later versions of those
+ licenses.
+
+1.13. "Source Code Form"
+ means the form of the work preferred for making modifications.
+
+1.14. "You" (or "Your")
+ means an individual or a legal entity exercising rights under this
+ License. For legal entities, "You" includes any entity that
+ controls, is controlled by, or is under common control with You. For
+ purposes of this definition, "control" means (a) the power, direct
+ or indirect, to cause the direction or management of such entity,
+ whether by contract or otherwise, or (b) ownership of more than
+ fifty percent (50%) of the outstanding shares or beneficial
+ ownership of such entity.
+
+2. License Grants and Conditions
+--------------------------------
+
+2.1. Grants
+
+Each Contributor hereby grants You a world-wide, royalty-free,
+non-exclusive license:
+
+(a) under intellectual property rights (other than patent or trademark)
+ Licensable by such Contributor to use, reproduce, make available,
+ modify, display, perform, distribute, and otherwise exploit its
+ Contributions, either on an unmodified basis, with Modifications, or
+ as part of a Larger Work; and
+
+(b) under Patent Claims of such Contributor to make, use, sell, offer
+ for sale, have made, import, and otherwise transfer either its
+ Contributions or its Contributor Version.
+
+2.2. Effective Date
+
+The licenses granted in Section 2.1 with respect to any Contribution
+become effective for each Contribution on the date the Contributor first
+distributes such Contribution.
+
+2.3. Limitations on Grant Scope
+
+The licenses granted in this Section 2 are the only rights granted under
+this License. No additional rights or licenses will be implied from the
+distribution or licensing of Covered Software under this License.
+Notwithstanding Section 2.1(b) above, no patent license is granted by a
+Contributor:
+
+(a) for any code that a Contributor has removed from Covered Software;
+ or
+
+(b) for infringements caused by: (i) Your and any other third party's
+ modifications of Covered Software, or (ii) the combination of its
+ Contributions with other software (except as part of its Contributor
+ Version); or
+
+(c) under Patent Claims infringed by Covered Software in the absence of
+ its Contributions.
+
+This License does not grant any rights in the trademarks, service marks,
+or logos of any Contributor (except as may be necessary to comply with
+the notice requirements in Section 3.4).
+
+2.4. Subsequent Licenses
+
+No Contributor makes additional grants as a result of Your choice to
+distribute the Covered Software under a subsequent version of this
+License (see Section 10.2) or under the terms of a Secondary License (if
+permitted under the terms of Section 3.3).
+
+2.5. Representation
+
+Each Contributor represents that the Contributor believes its
+Contributions are its original creation(s) or it has sufficient rights
+to grant the rights to its Contributions conveyed by this License.
+
+2.6. Fair Use
+
+This License is not intended to limit any rights You have under
+applicable copyright doctrines of fair use, fair dealing, or other
+equivalents.
+
+2.7. Conditions
+
+Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
+in Section 2.1.
+
+3. Responsibilities
+-------------------
+
+3.1. Distribution of Source Form
+
+All distribution of Covered Software in Source Code Form, including any
+Modifications that You create or to which You contribute, must be under
+the terms of this License. You must inform recipients that the Source
+Code Form of the Covered Software is governed by the terms of this
+License, and how they can obtain a copy of this License. You may not
+attempt to alter or restrict the recipients' rights in the Source Code
+Form.
+
+3.2. Distribution of Executable Form
+
+If You distribute Covered Software in Executable Form then:
+
+(a) such Covered Software must also be made available in Source Code
+ Form, as described in Section 3.1, and You must inform recipients of
+ the Executable Form how they can obtain a copy of such Source Code
+ Form by reasonable means in a timely manner, at a charge no more
+ than the cost of distribution to the recipient; and
+
+(b) You may distribute such Executable Form under the terms of this
+ License, or sublicense it under different terms, provided that the
+ license for the Executable Form does not attempt to limit or alter
+ the recipients' rights in the Source Code Form under this License.
+
+3.3. Distribution of a Larger Work
+
+You may create and distribute a Larger Work under terms of Your choice,
+provided that You also comply with the requirements of this License for
+the Covered Software. If the Larger Work is a combination of Covered
+Software with a work governed by one or more Secondary Licenses, and the
+Covered Software is not Incompatible With Secondary Licenses, this
+License permits You to additionally distribute such Covered Software
+under the terms of such Secondary License(s), so that the recipient of
+the Larger Work may, at their option, further distribute the Covered
+Software under the terms of either this License or such Secondary
+License(s).
+
+3.4. Notices
+
+You may not remove or alter the substance of any license notices
+(including copyright notices, patent notices, disclaimers of warranty,
+or limitations of liability) contained within the Source Code Form of
+the Covered Software, except that You may alter any license notices to
+the extent required to remedy known factual inaccuracies.
+
+3.5. Application of Additional Terms
+
+You may choose to offer, and to charge a fee for, warranty, support,
+indemnity or liability obligations to one or more recipients of Covered
+Software. However, You may do so only on Your own behalf, and not on
+behalf of any Contributor. You must make it absolutely clear that any
+such warranty, support, indemnity, or liability obligation is offered by
+You alone, and You hereby agree to indemnify every Contributor for any
+liability incurred by such Contributor as a result of warranty, support,
+indemnity or liability terms You offer. You may include additional
+disclaimers of warranty and limitations of liability specific to any
+jurisdiction.
+
+4. Inability to Comply Due to Statute or Regulation
+---------------------------------------------------
+
+If it is impossible for You to comply with any of the terms of this
+License with respect to some or all of the Covered Software due to
+statute, judicial order, or regulation then You must: (a) comply with
+the terms of this License to the maximum extent possible; and (b)
+describe the limitations and the code they affect. Such description must
+be placed in a text file included with all distributions of the Covered
+Software under this License. Except to the extent prohibited by statute
+or regulation, such description must be sufficiently detailed for a
+recipient of ordinary skill to be able to understand it.
+
+5. Termination
+--------------
+
+5.1. The rights granted under this License will terminate automatically
+if You fail to comply with any of its terms. However, if You become
+compliant, then the rights granted under this License from a particular
+Contributor are reinstated (a) provisionally, unless and until such
+Contributor explicitly and finally terminates Your grants, and (b) on an
+ongoing basis, if such Contributor fails to notify You of the
+non-compliance by some reasonable means prior to 60 days after You have
+come back into compliance. Moreover, Your grants from a particular
+Contributor are reinstated on an ongoing basis if such Contributor
+notifies You of the non-compliance by some reasonable means, this is the
+first time You have received notice of non-compliance with this License
+from such Contributor, and You become compliant prior to 30 days after
+Your receipt of the notice.
+
+5.2. If You initiate litigation against any entity by asserting a patent
+infringement claim (excluding declaratory judgment actions,
+counter-claims, and cross-claims) alleging that a Contributor Version
+directly or indirectly infringes any patent, then the rights granted to
+You by any and all Contributors for the Covered Software under Section
+2.1 of this License shall terminate.
+
+5.3. In the event of termination under Sections 5.1 or 5.2 above, all
+end user license agreements (excluding distributors and resellers) which
+have been validly granted by You or Your distributors under this License
+prior to termination shall survive termination.
+
+************************************************************************
+* *
+* 6. Disclaimer of Warranty *
+* ------------------------- *
+* *
+* Covered Software is provided under this License on an "as is" *
+* basis, without warranty of any kind, either expressed, implied, or *
+* statutory, including, without limitation, warranties that the *
+* Covered Software is free of defects, merchantable, fit for a *
+* particular purpose or non-infringing. The entire risk as to the *
+* quality and performance of the Covered Software is with You. *
+* Should any Covered Software prove defective in any respect, You *
+* (not any Contributor) assume the cost of any necessary servicing, *
+* repair, or correction. This disclaimer of warranty constitutes an *
+* essential part of this License. No use of any Covered Software is *
+* authorized under this License except under this disclaimer. *
+* *
+************************************************************************
+
+************************************************************************
+* *
+* 7. Limitation of Liability *
+* -------------------------- *
+* *
+* Under no circumstances and under no legal theory, whether tort *
+* (including negligence), contract, or otherwise, shall any *
+* Contributor, or anyone who distributes Covered Software as *
+* permitted above, be liable to You for any direct, indirect, *
+* special, incidental, or consequential damages of any character *
+* including, without limitation, damages for lost profits, loss of *
+* goodwill, work stoppage, computer failure or malfunction, or any *
+* and all other commercial damages or losses, even if such party *
+* shall have been informed of the possibility of such damages. This *
+* limitation of liability shall not apply to liability for death or *
+* personal injury resulting from such party's negligence to the *
+* extent applicable law prohibits such limitation. Some *
+* jurisdictions do not allow the exclusion or limitation of *
+* incidental or consequential damages, so this exclusion and *
+* limitation may not apply to You. *
+* *
+************************************************************************
+
+8. Litigation
+-------------
+
+Any litigation relating to this License may be brought only in the
+courts of a jurisdiction where the defendant maintains its principal
+place of business and such litigation shall be governed by laws of that
+jurisdiction, without reference to its conflict-of-law provisions.
+Nothing in this Section shall prevent a party's ability to bring
+cross-claims or counter-claims.
+
+9. Miscellaneous
+----------------
+
+This License represents the complete agreement concerning the subject
+matter hereof. If any provision of this License is held to be
+unenforceable, such provision shall be reformed only to the extent
+necessary to make it enforceable. Any law or regulation which provides
+that the language of a contract shall be construed against the drafter
+shall not be used to construe this License against a Contributor.
+
+10. Versions of the License
+---------------------------
+
+10.1. New Versions
+
+Mozilla Foundation is the license steward. Except as provided in Section
+10.3, no one other than the license steward has the right to modify or
+publish new versions of this License. Each version will be given a
+distinguishing version number.
+
+10.2. Effect of New Versions
+
+You may distribute the Covered Software under the terms of the version
+of the License under which You originally received the Covered Software,
+or under the terms of any subsequent version published by the license
+steward.
+
+10.3. Modified Versions
+
+If you create software not governed by this License, and you want to
+create a new license for such software, you may create and use a
+modified version of this License if you rename the license and remove
+any references to the name of the license steward (except to note that
+such modified license differs from this License).
+
+10.4. Distributing Source Code Form that is Incompatible With Secondary
+Licenses
+
+If You choose to distribute Source Code Form that is Incompatible With
+Secondary Licenses under the terms of this version of the License, the
+notice described in Exhibit B of this License must be attached.
+
+Exhibit A - Source Code Form License Notice
+-------------------------------------------
+
+ This Source Code Form is subject to the terms of the Mozilla Public
+ License, v. 2.0. If a copy of the MPL was not distributed with this
+ file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+If it is not possible or desirable to put the notice in a particular
+file, then You may include the notice in a location (such as a LICENSE
+file in a relevant directory) where a recipient would be likely to look
+for such a notice.
+
+You may add additional accurate notices of copyright ownership.
+
+Exhibit B - "Incompatible With Secondary Licenses" Notice
+---------------------------------------------------------
+
+ This Source Code Form is "Incompatible With Secondary Licenses", as
+ defined by the Mozilla Public License, v. 2.0.
\ No newline at end of file
diff --git a/packages/math/package.json b/packages/math/package.json
new file mode 100644
index 0000000000..f4e259787b
--- /dev/null
+++ b/packages/math/package.json
@@ -0,0 +1,72 @@
+{
+ "name": "@blocknote/math",
+ "homepage": "https://github.com/TypeCellOS/BlockNote",
+ "private": false,
+ "sideEffects": false,
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/TypeCellOS/BlockNote.git",
+ "directory": "packages/math"
+ },
+ "license": "MPL-2.0",
+ "version": "0.37.0",
+ "files": [
+ "dist",
+ "types",
+ "src"
+ ],
+ "keywords": [
+ "react",
+ "javascript",
+ "editor",
+ "typescript",
+ "prosemirror",
+ "wysiwyg",
+ "rich-text-editor",
+ "notion",
+ "yjs",
+ "block-based",
+ "tiptap"
+ ],
+ "description": "A \"Notion-style\" block-based extensible text editor built on top of Prosemirror and Tiptap.",
+ "type": "module",
+ "source": "src/index.ts",
+ "types": "./types/src/index.d.ts",
+ "main": "./dist/blocknote-math.cjs",
+ "module": "./dist/blocknote-math.js",
+ "exports": {
+ ".": {
+ "types": "./types/src/index.d.ts",
+ "import": "./dist/blocknote-math.js",
+ "require": "./dist/blocknote-math.cjs"
+ }
+ },
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "lint": "eslint src --max-warnings 0",
+ "test": "vitest --run",
+ "test-watch": "vitest watch"
+ },
+ "dependencies": {
+ "@blocknote/core": "0.37.0",
+ "katex": "^0.16.22"
+ },
+ "devDependencies": {
+ "eslint": "^8.10.0",
+ "rollup-plugin-webpack-stats": "^0.2.2",
+ "typescript": "^5.0.4",
+ "vite": "^5.3.4",
+ "vite-plugin-eslint": "^1.8.1",
+ "vitest": "^2.0.3"
+ },
+ "peerDependencies": {
+ "@blocknote/core": "workspace:^"
+ },
+ "eslintConfig": {
+ "extends": [
+ "../../.eslintrc.json"
+ ]
+ },
+ "gitHead": "37614ab348dcc7faa830a9a88437b37197a2162d"
+}
diff --git a/packages/math/src/index.ts b/packages/math/src/index.ts
new file mode 100644
index 0000000000..90fb3352d0
--- /dev/null
+++ b/packages/math/src/index.ts
@@ -0,0 +1,82 @@
+import {
+ createBlockConfig,
+ createBlockSpec,
+ createBlockNoteExtension,
+} from "@blocknote/core";
+import { KatexOptions, render } from "katex";
+
+export type MathOptions = {
+ katexOptions?: KatexOptions;
+};
+
+export const createMathBlockConfig = createBlockConfig(
+ (_options: MathOptions) =>
+ ({
+ type: "math",
+ propSchema: {
+ expression: {
+ default: "",
+ },
+ },
+ content: "none",
+ }) as const,
+);
+
+export const createMathBlockSpec = createBlockSpec(
+ createMathBlockConfig,
+ (options) => ({
+ parse(element) {
+ if (element.tagName === "div" && element.dataset.expression) {
+ return {
+ expression: element.dataset.expression,
+ };
+ }
+
+ return undefined;
+ },
+ render(block) {
+ const math = document.createElement("div");
+
+ render(block.props.expression, math, {
+ displayMode: true,
+ throwOnError: false,
+ ...options.katexOptions,
+ });
+
+ return {
+ dom: math,
+ };
+ },
+ toExternalHTML(block) {
+ const math = document.createElement("div");
+ math.dataset.expression = block.props.expression;
+ render(block.props.expression, math, {
+ displayMode: true,
+ throwOnError: false,
+ output: "mathml",
+ ...options.katexOptions,
+ });
+ return {
+ dom: math,
+ };
+ },
+ }),
+ [
+ createBlockNoteExtension({
+ key: "math-block-input-rules",
+ inputRules: [
+ {
+ find: /^\$\$\$([^$]+)\$\$\$$/,
+ replace({ match }) {
+ return {
+ type: "math",
+ props: {
+ expression: match[1],
+ },
+ };
+ },
+ },
+ ],
+ }),
+ ],
+);
diff --git a/packages/math/tsconfig.json b/packages/math/tsconfig.json
new file mode 100644
index 0000000000..30ab55f7ca
--- /dev/null
+++ b/packages/math/tsconfig.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "module": "ESNext",
+ "lib": ["ESNext", "DOM"],
+ "moduleResolution": "bundler",
+ "jsx": "react-jsx",
+ "strict": true,
+ "sourceMap": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "noEmit": false,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noImplicitReturns": true,
+ "outDir": "dist",
+ "declaration": true,
+ "declarationDir": "types",
+ "composite": true,
+ "skipLibCheck": true,
+ "emitDeclarationOnly": true,
+ "paths": {
+ "@shikijs/types": ["../../node_modules/@shikijs/types"]
+ }
+ },
+ "include": ["src"]
+}
diff --git a/packages/math/vite.config.ts b/packages/math/vite.config.ts
new file mode 100644
index 0000000000..6875302408
--- /dev/null
+++ b/packages/math/vite.config.ts
@@ -0,0 +1,59 @@
+import * as path from "path";
+import { webpackStats } from "rollup-plugin-webpack-stats";
+import { defineConfig } from "vite";
+import pkg from "./package.json";
+// import eslintPlugin from "vite-plugin-eslint";
+
+const deps = Object.keys({
+ ...pkg.dependencies,
+ ...pkg.peerDependencies,
+ ...pkg.devDependencies,
+});
+
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+ test: {
+ setupFiles: ["./vitestSetup.ts"],
+ },
+ plugins: [webpackStats() as any],
+ // used so that vitest resolves the core package from the sources instead of the built version
+ resolve: {
+ alias:
+ conf.command === "build"
+ ? ({} as Record)
+ : ({
+ // load live from sources with live reload working
+ "@blocknote/core": path.resolve(__dirname, "../core/src/"),
+ "@blocknote/react": path.resolve(__dirname, "../react/src/"),
+ } as Record),
+ },
+ build: {
+ sourcemap: true,
+ lib: {
+ entry: {
+ "blocknote-math": path.resolve(__dirname, "src/index.ts"),
+ },
+ name: "blocknote-math",
+ formats: ["es", "cjs"],
+ fileName: (format, entryName) =>
+ format === "es" ? `${entryName}.js` : `${entryName}.cjs`,
+ },
+ rollupOptions: {
+ // make sure to externalize deps that shouldn't be bundled
+ // into your library
+ external: (source: string) => {
+ if (deps.includes(source)) {
+ return true;
+ }
+
+ return false;
+ },
+ output: {
+ // Provide global variables to use in the UMD build
+ // for externalized deps
+ globals: {},
+ interop: "compat", // https://rollupjs.org/migration/#changed-defaults
+ },
+ },
+ },
+}));
diff --git a/packages/math/vitestSetup.ts b/packages/math/vitestSetup.ts
new file mode 100644
index 0000000000..a946b5fc3a
--- /dev/null
+++ b/packages/math/vitestSetup.ts
@@ -0,0 +1,10 @@
+import { afterEach, beforeEach } from "vitest";
+
+beforeEach(() => {
+ globalThis.window = globalThis.window || ({} as any);
+ (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
+});
+
+afterEach(() => {
+ delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
+});
diff --git a/packages/react/src/components/FormattingToolbar/DefaultButtons/EditEquationButton.tsx b/packages/react/src/components/FormattingToolbar/DefaultButtons/EditEquationButton.tsx
new file mode 100644
index 0000000000..e6edfe7355
--- /dev/null
+++ b/packages/react/src/components/FormattingToolbar/DefaultButtons/EditEquationButton.tsx
@@ -0,0 +1,91 @@
+import { useCallback, useMemo, useState } from "react";
+import { RiPenNibFill } from "react-icons/ri";
+
+import {
+ blockHasType,
+ BlockSchema,
+ InlineContentSchema,
+ StyleSchema,
+} from "@blocknote/core";
+
+import { useComponentsContext } from "../../../editor/ComponentsContext.js";
+import { useBlockNoteEditor } from "../../../hooks/useBlockNoteEditor.js";
+import { useSelectedBlocks } from "../../../hooks/useSelectedBlocks.js";
+import { useDictionary } from "../../../i18n/dictionary.js";
+
+export const EditEquationButton = () => {
+ const editor = useBlockNoteEditor<
+ BlockSchema,
+ InlineContentSchema,
+ StyleSchema
+ >();
+ const Components = useComponentsContext()!;
+ const dict = useDictionary();
+
+ const selectedBlocks = useSelectedBlocks(editor);
+
+ const [opened, setOpened] = useState(false);
+ const [value, setValue] = useState("");
+
+ const update = useCallback(
+ (expression: string) => {
+ setValue(expression);
+ editor.updateBlock(selectedBlocks[0], {
+ type: "math",
+ props: {
+ expression,
+ },
+ });
+ },
+ [editor],
+ );
+ console.log(selectedBlocks);
+
+ const mathBlock = useMemo(() => {
+ // Checks if only one block is selected.
+ if (selectedBlocks.length !== 1) {
+ return undefined;
+ }
+
+ const block = selectedBlocks[0];
+
+ if (blockHasType(block, editor, "math", { expression: "string" })) {
+ return block;
+ }
+
+ return undefined;
+ }, [editor, selectedBlocks]);
+ console.log(mathBlock);
+ if (!mathBlock || !editor.isEditable) {
+ return null;
+ }
+
+ return (
+
+
+ {/* TODO: hide tooltip on click */}
+ }
+ onClick={() => setOpened(true)}
+ />
+
+
+
+ {
+ update(e.target.value);
+ }}
+ />
+
+
+
+ );
+};
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbar.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbar.tsx
index afb382a563..e6349cd45f 100644
--- a/packages/react/src/components/FormattingToolbar/FormattingToolbar.tsx
+++ b/packages/react/src/components/FormattingToolbar/FormattingToolbar.tsx
@@ -24,6 +24,7 @@ import { FilePreviewButton } from "./DefaultButtons/FilePreviewButton.js";
import { TableCellMergeButton } from "./DefaultButtons/TableCellMergeButton.js";
import { TextAlignButton } from "./DefaultButtons/TextAlignButton.js";
import { FormattingToolbarProps } from "./FormattingToolbarProps.js";
+import { EditEquationButton } from "./DefaultButtons/EditEquationButton.js";
export const getFormattingToolbarItems = (
blockTypeSelectItems?: BlockTypeSelectItem[],
@@ -52,6 +53,7 @@ export const getFormattingToolbarItems = (
,
,
,
+ ,
];
// TODO: props.blockTypeSelectItems should only be available if no children
diff --git a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
index 6ce960d035..708b94e894 100644
--- a/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
+++ b/packages/react/src/components/FormattingToolbar/FormattingToolbarController.tsx
@@ -113,6 +113,7 @@ export const FormattingToolbarController = (props: {
const combinedRef = useMemo(() => mergeRefs([divRef, ref]), [divRef, ref]);
if (!isMounted || !state) {
+ console.log("bail");
return null;
}
@@ -130,7 +131,7 @@ export const FormattingToolbarController = (props: {
}
const Component = props.formattingToolbar || FormattingToolbar;
-
+ console.log("showing");
return (