From f102c8033b89f96abe5f9049b6a0066f3c5cf01b Mon Sep 17 00:00:00 2001
From: jkcs <1778768609@qq.com>
Date: Thu, 18 Jul 2024 10:41:53 +0800
Subject: [PATCH 1/5] test equation
---
.../13-equation/.bnexample.json | 11 +
examples/03-ui-components/13-equation/App.tsx | 98 +++++++++
.../03-ui-components/13-equation/Equation.tsx | 206 ++++++++++++++++++
.../03-ui-components/13-equation/README.md | 11 +
.../03-ui-components/13-equation/index.html | 14 ++
.../03-ui-components/13-equation/main.tsx | 11 +
.../03-ui-components/13-equation/package.json | 40 ++++
.../03-ui-components/13-equation/styles.css | 74 +++++++
.../13-equation/tsconfig.json | 36 +++
.../13-equation/vite.config.ts | 32 +++
package-lock.json | 10 +-
playground/package.json | 3 +
playground/src/examples.gen.tsx | 27 +++
13 files changed, 570 insertions(+), 3 deletions(-)
create mode 100644 examples/03-ui-components/13-equation/.bnexample.json
create mode 100644 examples/03-ui-components/13-equation/App.tsx
create mode 100644 examples/03-ui-components/13-equation/Equation.tsx
create mode 100644 examples/03-ui-components/13-equation/README.md
create mode 100644 examples/03-ui-components/13-equation/index.html
create mode 100644 examples/03-ui-components/13-equation/main.tsx
create mode 100644 examples/03-ui-components/13-equation/package.json
create mode 100644 examples/03-ui-components/13-equation/styles.css
create mode 100644 examples/03-ui-components/13-equation/tsconfig.json
create mode 100644 examples/03-ui-components/13-equation/vite.config.ts
diff --git a/examples/03-ui-components/13-equation/.bnexample.json b/examples/03-ui-components/13-equation/.bnexample.json
new file mode 100644
index 0000000000..1aadbc234b
--- /dev/null
+++ b/examples/03-ui-components/13-equation/.bnexample.json
@@ -0,0 +1,11 @@
+{
+ "playground": true,
+ "docs": false,
+ "author": "matthewlipski",
+ "tags": ["Intermediate", "Blocks", "Custom Schemas", "Suggestion Menus", "Slash Menu"],
+ "dependencies": {
+ "katex": "^0.16.11",
+ "@types/katex": "^0.16.7",
+ "react-icons": "^5.2.1"
+ }
+}
diff --git a/examples/03-ui-components/13-equation/App.tsx b/examples/03-ui-components/13-equation/App.tsx
new file mode 100644
index 0000000000..567bb52e9a
--- /dev/null
+++ b/examples/03-ui-components/13-equation/App.tsx
@@ -0,0 +1,98 @@
+import {
+ BlockNoteSchema,
+ defaultInlineContentSpecs,
+ filterSuggestionItems,
+ insertOrUpdateBlock,
+} from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
+import {
+ SuggestionMenuController,
+ getDefaultReactSlashMenuItems,
+ useCreateBlockNote,
+} from "@blocknote/react";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+
+import { LaTex } from "./Equation";
+
+// Our schema with block specs, which contain the configs and implementations for blocks
+// that we want our editor to use.
+const schema = BlockNoteSchema.create({
+ inlineContentSpecs: {
+ ...defaultInlineContentSpecs,
+ latex: LaTex,
+ },
+});
+
+// Slash menu item to insert an Alert block
+const insertLaTex = (editor: typeof schema.BlockNoteEditor) => ({
+ title: "latex",
+ key: "latex",
+ subtext: "Used for a top-level heading",
+ aliases: ["latex", "heading1", "h1"],
+ group: "Other",
+ onItemClick: () => {
+ insertOrUpdateBlock(editor, {
+ type: "paragraph",
+ content: [
+ {
+ type: "latex",
+ props: {
+ open: true,
+ },
+ content: "\\sqrt{a^2 + b^2}",
+ },
+ ],
+ });
+ },
+});
+
+export default function App() {
+ // Creates a new editor instance.
+ const editor = useCreateBlockNote({
+ schema,
+ initialContent: [
+ {
+ type: "paragraph",
+ content: [
+ "latex text editor ",
+ {
+ type: "latex",
+ content: "c = \\pm\\sqrt{a^2 + b^2}",
+ },
+ ],
+ },
+ {
+ type: "paragraph",
+ },
+ {
+ type: "paragraph",
+ content: [
+ {
+ type: "latex",
+ content:
+ "\\int \\frac{1}{\\sqrt{1-x^{2}}}\\mathrm{d}x= \\arcsin x +C",
+ },
+ ],
+ },
+ {
+ type: "paragraph",
+ },
+ ],
+ });
+
+ // Renders the editor instance.
+ return (
+ <BlockNoteView editor={editor} slashMenu={false}>
+ <SuggestionMenuController
+ triggerCharacter={"/"}
+ getItems={async (query: any) =>
+ filterSuggestionItems(
+ [...getDefaultReactSlashMenuItems(editor), insertLaTex(editor)],
+ query
+ )
+ }
+ />
+ </BlockNoteView>
+ );
+}
diff --git a/examples/03-ui-components/13-equation/Equation.tsx b/examples/03-ui-components/13-equation/Equation.tsx
new file mode 100644
index 0000000000..8bd958ded7
--- /dev/null
+++ b/examples/03-ui-components/13-equation/Equation.tsx
@@ -0,0 +1,206 @@
+import { useComponentsContext } from "@blocknote/react";
+import { NodeView } from "prosemirror-view";
+import { BlockNoteEditor, propsToAttributes } from "@blocknote/core";
+import {
+ NodeViewProps,
+ NodeViewRenderer,
+ NodeViewWrapper,
+ ReactNodeViewRenderer,
+} from "@tiptap/react";
+import {
+ createStronglyTypedTiptapNode,
+ createInternalInlineContentSpec,
+} from "@blocknote/core";
+import { mergeAttributes } from "@tiptap/core";
+import { ChangeEvent, useEffect, useState, useRef } from "react";
+import katex from "katex";
+import "katex/dist/katex.min.css";
+import "./styles.css";
+
+function LaTexView() {
+ const nodeView:
+ | ((this: {
+ name: string;
+ options: any;
+ storage: any;
+ editor: any;
+ type: any;
+ parent: any;
+ }) => NodeViewRenderer)
+ | null = function () {
+ const BlockContent = (props: NodeViewProps & { selectionHack: any }) => {
+ /* eslint-disable react-hooks/rules-of-hooks */
+ const editor: BlockNoteEditor<any> = this.options.editor;
+ const content = props.node.textContent;
+ const open = props.node.attrs.open;
+ const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+ const contentRef = useRef<HTMLElement | null>(null);
+ const [html, setHtml] = useState("");
+ const [loading, setLoading] = useState(false);
+ const Components = useComponentsContext()!;
+
+ useEffect(() => {
+ setLoading(true);
+ const html = katex.renderToString(content, {
+ throwOnError: false,
+ });
+ setHtml(html);
+ setLoading(false);
+ }, [content]);
+
+ useEffect(() => {
+ if (open) {
+ if (contentRef.current) {
+ contentRef.current.click();
+ }
+ setTimeout(() => {
+ if (textareaRef.current) {
+ textareaRef.current?.focus();
+ textareaRef.current?.setSelectionRange(
+ textareaRef.current.value.length,
+ textareaRef.current.value.length
+ );
+ }
+ });
+ }
+ }, [open]);
+
+ const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+ const val = e.target.value;
+ const pos = props.getPos?.();
+ const node = props.node;
+ const view = editor._tiptapEditor.view;
+
+ const tr = view.state.tr.replaceWith(
+ pos,
+ pos + node.nodeSize,
+ view.state.schema.nodes.latex.create(
+ {
+ ...node.attrs,
+ },
+ val ? view.state.schema.text(val) : null
+ )
+ );
+
+ view.dispatch(tr);
+ };
+
+ return (
+ <NodeViewWrapper as={"span"}>
+ <Components.Generic.Popover.Root>
+ <Components.Generic.Popover.Trigger>
+ <span className={"latex"} ref={contentRef}>
+ {loading ? (
+ <span className={"latex-loading"}>latex loading...</span>
+ ) : (
+ <span
+ className={"latex-content"}
+ dangerouslySetInnerHTML={{ __html: html }}></span>
+ )}
+ </span>
+ </Components.Generic.Popover.Trigger>
+ <Components.Generic.Popover.Content
+ className={"bn-popover-content bn-form-popover"}
+ variant={"form-popover"}>
+ <textarea
+ ref={textareaRef}
+ className={"latex-textarea"}
+ value={content}
+ onChange={handleChange}
+ />
+ </Components.Generic.Popover.Content>
+ </Components.Generic.Popover.Root>
+ </NodeViewWrapper>
+ );
+ };
+
+ return (props) => {
+ if (!(props.editor as any).contentComponent) {
+ return {};
+ }
+ const ret = ReactNodeViewRenderer(BlockContent, {
+ stopEvent: () => true,
+ })(props) as NodeView;
+ ret.setSelection = (anchor, head) => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (ret as any).renderer.updateProps({
+ selectionHack: { anchor, head },
+ });
+ };
+
+ (ret as any).contentDOMElement = undefined;
+
+ const oldUpdated = ret.update!.bind(ret);
+ ret.update = (node, outerDeco, innerDeco) => {
+ const retAsAny = ret as any;
+ let decorations = retAsAny.decorations;
+ if (
+ retAsAny.decorations.decorations !== outerDeco ||
+ retAsAny.decorations.innerDecorations !== innerDeco
+ ) {
+ decorations = {
+ decorations: outerDeco,
+ innerDecorations: innerDeco,
+ };
+ }
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ return oldUpdated(node, decorations, undefined as any);
+ };
+ return ret;
+ };
+ };
+ return nodeView;
+}
+
+const propSchema = {
+ open: {
+ type: "boolean",
+ default: false,
+ },
+};
+
+const node = createStronglyTypedTiptapNode({
+ name: "latex",
+ inline: true,
+ group: "inline",
+ content: "inline*",
+ editable: true,
+ selectable: false,
+
+ addAttributes() {
+ return propsToAttributes(propSchema);
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: "latex",
+ priority: 200,
+ node: "latex",
+ },
+ ];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return [
+ "latex",
+ mergeAttributes(HTMLAttributes, {
+ "data-content-type": this.name,
+ }),
+ 0,
+ ];
+ },
+
+ addNodeView: LaTexView(),
+});
+
+export const LaTex = createInternalInlineContentSpec(
+ {
+ content: "styled",
+ type: "latex",
+ propSchema: propSchema,
+ },
+ {
+ node,
+ }
+);
diff --git a/examples/03-ui-components/13-equation/README.md b/examples/03-ui-components/13-equation/README.md
new file mode 100644
index 0000000000..8c064c8b11
--- /dev/null
+++ b/examples/03-ui-components/13-equation/README.md
@@ -0,0 +1,11 @@
+# Alert Block
+
+In this example, we create a custom `Alert` block which is used to emphasize text. In addition, we create a Slash Menu item which inserts an `Alert` block.
+
+**Try it out:** Press the "/" key to open the Slash Menu and insert an `Alert` block!
+
+**Relevant Docs:**
+
+- [Custom Blocks](/docs/custom-schemas/custom-blocks)
+- [Changing Slash Menu Items](/docs/ui-components/suggestion-menus#changing-slash-menu-items)
+- [Editor Setup](/docs/editor-basics/setup)
\ No newline at end of file
diff --git a/examples/03-ui-components/13-equation/index.html b/examples/03-ui-components/13-equation/index.html
new file mode 100644
index 0000000000..6c6a363839
--- /dev/null
+++ b/examples/03-ui-components/13-equation/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+ <head>
+ <script>
+ <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+ </script>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Equation</title>
+ </head>
+ <body>
+ <div id="root"></div>
+ <script type="module" src="./main.tsx"></script>
+ </body>
+</html>
diff --git a/examples/03-ui-components/13-equation/main.tsx b/examples/03-ui-components/13-equation/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/03-ui-components/13-equation/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 "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>
+);
diff --git a/examples/03-ui-components/13-equation/package.json b/examples/03-ui-components/13-equation/package.json
new file mode 100644
index 0000000000..f1428967c0
--- /dev/null
+++ b/examples/03-ui-components/13-equation/package.json
@@ -0,0 +1,40 @@
+{
+ "name": "@blocknote/example-equation",
+ "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+ "private": true,
+ "version": "0.12.4",
+ "scripts": {
+ "start": "vite",
+ "dev": "vite",
+ "build": "tsc && vite build",
+ "preview": "vite preview",
+ "lint": "eslint . --max-warnings 0"
+ },
+ "dependencies": {
+ "@blocknote/core": "latest",
+ "@blocknote/react": "latest",
+ "@blocknote/ariakit": "latest",
+ "@blocknote/mantine": "latest",
+ "@blocknote/shadcn": "latest",
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1",
+ "katex": "^0.16.11",
+ "@types/katex": "^0.16.7",
+ "react-icons": "^5.2.1"
+ },
+ "devDependencies": {
+ "@types/react": "^18.0.25",
+ "@types/react-dom": "^18.0.9",
+ "@vitejs/plugin-react": "^4.0.4",
+ "eslint": "^8.10.0",
+ "vite": "^4.4.8"
+ },
+ "eslintConfig": {
+ "extends": [
+ "../../../.eslintrc.js"
+ ]
+ },
+ "eslintIgnore": [
+ "dist"
+ ]
+}
\ No newline at end of file
diff --git a/examples/03-ui-components/13-equation/styles.css b/examples/03-ui-components/13-equation/styles.css
new file mode 100644
index 0000000000..7296b28dce
--- /dev/null
+++ b/examples/03-ui-components/13-equation/styles.css
@@ -0,0 +1,74 @@
+.alert {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-grow: 1;
+ border-radius: 4px;
+ min-height: 48px;
+ padding: 4px;
+}
+
+.alert[data-alert-type="warning"] {
+ background-color: #fff6e6;
+}
+
+.alert[data-alert-type="error"] {
+ background-color: #ffe6e6;
+}
+
+.alert[data-alert-type="info"] {
+ background-color: #e6ebff;
+}
+
+.alert[data-alert-type="success"] {
+ background-color: #e6ffe6;
+}
+
+[data-color-scheme="dark"] .alert[data-alert-type="warning"] {
+ background-color: #805d20;
+}
+
+[data-color-scheme="dark"] .alert[data-alert-type="error"] {
+ background-color: #802020;
+}
+
+[data-color-scheme="dark"] .alert[data-alert-type="info"] {
+ background-color: #203380;
+}
+
+[data-color-scheme="dark"] .alert[data-alert-type="success"] {
+ background-color: #208020;
+}
+
+.alert-icon-wrapper {
+ border-radius: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-left: 12px;
+ margin-right: 12px;
+ height: 18px;
+ width: 18px;
+ user-select: none;
+ cursor: pointer;
+}
+
+.alert-icon[data-alert-icon-type="warning"] {
+ color: #e69819
+}
+
+.alert-icon[data-alert-icon-type="error"] {
+ color: #d80d0d
+}
+
+.alert-icon[data-alert-icon-type="info"] {
+ color: #507aff
+}
+
+.alert-icon[data-alert-icon-type="success"] {
+ color: #0bc10b
+}
+
+.inline-content {
+ flex-grow: 1;
+}
\ No newline at end of file
diff --git a/examples/03-ui-components/13-equation/tsconfig.json b/examples/03-ui-components/13-equation/tsconfig.json
new file mode 100644
index 0000000000..1bd8ab3c57
--- /dev/null
+++ b/examples/03-ui-components/13-equation/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": "Node",
+ "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/03-ui-components/13-equation/vite.config.ts b/examples/03-ui-components/13-equation/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/03-ui-components/13-equation/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/package-lock.json b/package-lock.json
index 14e278c208..49ebbd228a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17951,13 +17951,14 @@
"dev": true
},
"node_modules/katex": {
- "version": "0.16.10",
- "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.10.tgz",
- "integrity": "sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==",
+ "version": "0.16.11",
+ "resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.11.tgz",
+ "integrity": "sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==",
"funding": [
"https://opencollective.com/katex",
"https://github.com/sponsors/katex"
],
+ "license": "MIT",
"dependencies": {
"commander": "^8.3.0"
},
@@ -29383,6 +29384,7 @@
"@liveblocks/client": "^1.10.0",
"@liveblocks/yjs": "^1.10.0",
"@mantine/core": "^7.10.1",
+ "@types/katex": "^0.16.7",
"@uppy/core": "^3.13.1",
"@uppy/dashboard": "^3.9.1",
"@uppy/drag-drop": "^3.1.1",
@@ -29394,6 +29396,7 @@
"@uppy/status-bar": "^3.1.1",
"@uppy/webcam": "^3.4.2",
"@uppy/xhr-upload": "^3.4.0",
+ "katex": "^0.16.11",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
@@ -29402,6 +29405,7 @@
"yjs": "^13.6.15"
},
"devDependencies": {
+ "@types/katex": "^0.16.7",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"@vitejs/plugin-react": "^4.0.4",
diff --git a/playground/package.json b/playground/package.json
index 0ee1d1f6c7..45b44a2aeb 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -21,6 +21,7 @@
"@liveblocks/client": "^1.10.0",
"@liveblocks/yjs": "^1.10.0",
"@mantine/core": "^7.10.1",
+ "@types/katex": "^0.16.7",
"@uppy/core": "^3.13.1",
"@uppy/dashboard": "^3.9.1",
"@uppy/drag-drop": "^3.1.1",
@@ -32,6 +33,7 @@
"@uppy/status-bar": "^3.1.1",
"@uppy/webcam": "^3.4.2",
"@uppy/xhr-upload": "^3.4.0",
+ "katex": "^0.16.11",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
@@ -40,6 +42,7 @@
"yjs": "^13.6.15"
},
"devDependencies": {
+ "@types/katex": "^0.16.7",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"@vitejs/plugin-react": "^4.0.4",
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index eaac162755..deab6d212c 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -554,6 +554,33 @@
"slug": "ui-components"
}
},
+ {
+ "projectSlug": "equation",
+ "fullSlug": "ui-components/equation",
+ "pathFromRoot": "examples/03-ui-components/13-equation",
+ "config": {
+ "playground": true,
+ "docs": true,
+ "author": "matthewlipski",
+ "tags": [
+ "Intermediate",
+ "Blocks",
+ "Custom Schemas",
+ "Suggestion Menus",
+ "Slash Menu"
+ ],
+ "dependencies": {
+ "katex": "^0.16.11",
+ "@types/katex": "^0.16.11",
+ "react-icons": "^5.2.1"
+ } as any
+ },
+ "title": "Equation",
+ "group": {
+ "pathFromRoot": "examples/03-ui-components",
+ "slug": "ui-components"
+ }
+ },
{
"projectSlug": "link-toolbar-buttons",
"fullSlug": "ui-components/link-toolbar-buttons",
From 536f3fb0b7a800ce1b539a36ec2b0aa566269487 Mon Sep 17 00:00:00 2001
From: jkcs <1778768609@qq.com>
Date: Fri, 19 Jul 2024 14:36:08 +0800
Subject: [PATCH 2/5] Inline Equation
---
examples/03-ui-components/13-equation/App.tsx | 49 ++--
.../03-ui-components/13-equation/Equation.tsx | 245 +++++++++++++-----
.../03-ui-components/13-equation/styles.css | 106 ++++----
3 files changed, 250 insertions(+), 150 deletions(-)
diff --git a/examples/03-ui-components/13-equation/App.tsx b/examples/03-ui-components/13-equation/App.tsx
index 567bb52e9a..f7e55ed27f 100644
--- a/examples/03-ui-components/13-equation/App.tsx
+++ b/examples/03-ui-components/13-equation/App.tsx
@@ -2,7 +2,6 @@ import {
BlockNoteSchema,
defaultInlineContentSpecs,
filterSuggestionItems,
- insertOrUpdateBlock,
} from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import {
@@ -11,39 +10,36 @@ import {
useCreateBlockNote,
} from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
+import { PiTextSuperscript } from "react-icons/pi";
import "@blocknote/mantine/style.css";
-import { LaTex } from "./Equation";
+import { InlineEquation } from "./Equation";
// Our schema with block specs, which contain the configs and implementations for blocks
// that we want our editor to use.
const schema = BlockNoteSchema.create({
inlineContentSpecs: {
...defaultInlineContentSpecs,
- latex: LaTex,
+ inlineEquation: InlineEquation,
},
});
// Slash menu item to insert an Alert block
const insertLaTex = (editor: typeof schema.BlockNoteEditor) => ({
- title: "latex",
- key: "latex",
- subtext: "Used for a top-level heading",
- aliases: ["latex", "heading1", "h1"],
+ icon: PiTextSuperscript,
+ title: "Inline Equation",
+ key: "inlineEquation",
+ subtext: "Insert mathematical symbols in text.",
+ aliases: ["equation", "latex", "katex"],
group: "Other",
onItemClick: () => {
- insertOrUpdateBlock(editor, {
- type: "paragraph",
- content: [
- {
- type: "latex",
- props: {
- open: true,
- },
- content: "\\sqrt{a^2 + b^2}",
- },
- ],
- });
+ const view = editor._tiptapEditor.view;
+ const pos = editor._tiptapEditor.state.selection.from;
+ const tr = view.state.tr.insert(
+ pos,
+ view.state.schema.nodes.inlineEquation.create(""),
+ );
+ view.dispatch(tr);
},
});
@@ -55,25 +51,22 @@ export default function App() {
{
type: "paragraph",
content: [
- "latex text editor ",
+ "This is an example inline equation",
{
- type: "latex",
+ type: "inlineEquation",
content: "c = \\pm\\sqrt{a^2 + b^2}",
},
],
},
+ {
+ type: "paragraph",
+ content: "Press the '/' key to open the Slash Menu and add another",
+ },
{
type: "paragraph",
},
{
type: "paragraph",
- content: [
- {
- type: "latex",
- content:
- "\\int \\frac{1}{\\sqrt{1-x^{2}}}\\mathrm{d}x= \\arcsin x +C",
- },
- ],
},
{
type: "paragraph",
diff --git a/examples/03-ui-components/13-equation/Equation.tsx b/examples/03-ui-components/13-equation/Equation.tsx
index 8bd958ded7..90339f2237 100644
--- a/examples/03-ui-components/13-equation/Equation.tsx
+++ b/examples/03-ui-components/13-equation/Equation.tsx
@@ -1,6 +1,6 @@
-import { useComponentsContext } from "@blocknote/react";
+import { useComponentsContext,useEditorContentOrSelectionChange } from "@blocknote/react";
import { NodeView } from "prosemirror-view";
-import { BlockNoteEditor, propsToAttributes } from "@blocknote/core";
+import { BlockNoteEditor } from "@blocknote/core";
import {
NodeViewProps,
NodeViewRenderer,
@@ -12,58 +12,169 @@ import {
createInternalInlineContentSpec,
} from "@blocknote/core";
import { mergeAttributes } from "@tiptap/core";
-import { ChangeEvent, useEffect, useState, useRef } from "react";
+import {ChangeEvent, useEffect, useState, useRef, useCallback, forwardRef, MouseEvent as ReactMouseEvent} from "react";
import katex from "katex";
+import { AiOutlineEnter } from "react-icons/ai";
import "katex/dist/katex.min.css";
import "./styles.css";
-function LaTexView() {
+
+const TextareaView = forwardRef((props: any, ref: any) => {
+ const { autofocus, ...rest } = props;
+ useEffect(() => {
+ if (autofocus && ref.current) {
+ ref.current.setSelectionRange(0, ref.current.value.length);
+ ref.current.focus()
+ }
+ }, [autofocus, ref]);
+
+ return (
+ <textarea
+ ref={ref}
+ className={"equation-textarea"}
+ value={props.value}
+ onChange={props.onChange}
+ {...rest}
+ />
+ )
+});
+
+function InlineEquationView() {
const nodeView:
- | ((this: {
- name: string;
- options: any;
- storage: any;
- editor: any;
- type: any;
- parent: any;
+ | ((this: {
+ name: string;
+ options: any;
+ storage: any;
+ editor: any;
+ type: any;
+ parent: any;
}) => NodeViewRenderer)
| null = function () {
const BlockContent = (props: NodeViewProps & { selectionHack: any }) => {
/* eslint-disable react-hooks/rules-of-hooks */
const editor: BlockNoteEditor<any> = this.options.editor;
const content = props.node.textContent;
- const open = props.node.attrs.open;
+ const nodeSize = props.node.nodeSize;
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
const contentRef = useRef<HTMLElement | null>(null);
+ const containerRef = useRef<HTMLElement | null>(null);
const [html, setHtml] = useState("");
- const [loading, setLoading] = useState(false);
+ const [focus, setFocus] = useState(!content);
+ const [curEdge, setCurEdge] = useState(!content);
const Components = useComponentsContext()!;
+ const getTextareaEdge = () => {
+ const $textarea = textareaRef.current;
+ if (!$textarea) {
+ return {};
+ }
+
+ return {
+ isLeftEdge: $textarea.selectionStart === 0 && $textarea.selectionEnd === 0,
+ isRightEdge: $textarea.selectionStart === $textarea.value.length && $textarea.selectionEnd === $textarea.value.length,
+ }
+ }
+
useEffect(() => {
- setLoading(true);
const html = katex.renderToString(content, {
throwOnError: false,
});
setHtml(html);
- setLoading(false);
}, [content]);
+ useEditorContentOrSelectionChange(() => {
+ const pos = props.getPos?.();
+ const courPos = editor._tiptapEditor.state.selection.from;
+ const selection = editor.getSelection();
+
+ setCurEdge(!selection && (courPos === pos + nodeSize || courPos === pos));
+ })
+
+
useEffect(() => {
- if (open) {
- if (contentRef.current) {
- contentRef.current.click();
+ if (focus) {
+ contentRef.current?.click();
+ }
+ }, [focus]);
+
+ const handleEnter = useCallback((event: ReactMouseEvent | KeyboardEvent) => {
+ const pos = props.getPos?.();
+ event.preventDefault();
+ if (!content) {
+ const node = props.node;
+ const view = editor._tiptapEditor.view;
+
+ const tr = view.state.tr.delete(
+ pos,
+ pos + node.nodeSize
+ );
+
+ view.dispatch(tr);
+ editor._tiptapEditor.commands.setTextSelection(pos);
+ } else {
+ editor._tiptapEditor.commands.setTextSelection(pos + nodeSize);
+ }
+ editor.focus();
+ setFocus(false);
+ setCurEdge(true);
+ }, [content, editor, nodeSize, props]);
+
+ const handleMenuNavigationKeys = useCallback((event: KeyboardEvent) => {
+ const textareaEdge = getTextareaEdge();
+ const pos = props.getPos?.();
+ const courPos = editor._tiptapEditor.state.selection.from;
+
+ if (event.key === "ArrowLeft") {
+ if (courPos === pos + nodeSize && !focus) {
+ setFocus(true);
}
- setTimeout(() => {
- if (textareaRef.current) {
- textareaRef.current?.focus();
- textareaRef.current?.setSelectionRange(
- textareaRef.current.value.length,
- textareaRef.current.value.length
- );
- }
- });
+ if (textareaEdge.isLeftEdge) {
+ event.preventDefault();
+ editor.focus();
+ editor._tiptapEditor.commands.setTextSelection(pos);
+ setFocus(false);
+ }
+ return true;
+ }
+
+ if (event.key === "ArrowRight") {
+ if (courPos === pos && !focus) {
+ setFocus(true);
+ }
+ if (textareaEdge.isRightEdge) {
+ event.preventDefault();
+ editor.focus();
+ editor._tiptapEditor.commands.setTextSelection(pos + nodeSize);
+ setFocus(false)
+ }
+ return true;
+ }
+
+ if (event.key === "Enter" && focus) {
+ handleEnter(event);
+ return true;
+ }
+
+ return false;
+ }, [editor, focus, handleEnter, nodeSize, props]);
+
+ useEffect(() => {
+ if (focus || curEdge) {
+ editor.domElement.addEventListener(
+ "keydown",
+ handleMenuNavigationKeys,
+ true
+ );
}
- }, [open]);
+
+ return () => {
+ editor.domElement.removeEventListener(
+ "keydown",
+ handleMenuNavigationKeys,
+ true
+ );
+ };
+ }, [editor.domElement, focus, handleMenuNavigationKeys, curEdge]);
const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
const val = e.target.value;
@@ -74,7 +185,7 @@ function LaTexView() {
const tr = view.state.tr.replaceWith(
pos,
pos + node.nodeSize,
- view.state.schema.nodes.latex.create(
+ view.state.schema.nodes.inlineEquation.create(
{
...node.attrs,
},
@@ -83,31 +194,51 @@ function LaTexView() {
);
view.dispatch(tr);
+ setFocus(true);
};
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+ setFocus(false);
+ }
+ };
+
+ document.addEventListener('pointerup', handleClickOutside, true);
+ return () => {
+ document.removeEventListener('pointerup', handleClickOutside, true);
+ };
+ }, []);
+
return (
- <NodeViewWrapper as={"span"}>
- <Components.Generic.Popover.Root>
+ <NodeViewWrapper as={"span"} ref={containerRef}>
+ <Components.Generic.Popover.Root opened={focus}>
<Components.Generic.Popover.Trigger>
- <span className={"latex"} ref={contentRef}>
- {loading ? (
- <span className={"latex-loading"}>latex loading...</span>
+ <span className={"equation " + (focus ? 'focus' : '')} ref={contentRef}>
+ {!content ? (
+ <span onClick={() => setFocus(true)} className={"equation-empty"}>
+ New Equation
+ </span>
) : (
<span
- className={"latex-content"}
+ onClick={() => setFocus(true)} className={"equation-content"}
dangerouslySetInnerHTML={{ __html: html }}></span>
)}
</span>
</Components.Generic.Popover.Trigger>
<Components.Generic.Popover.Content
- className={"bn-popover-content bn-form-popover"}
- variant={"form-popover"}>
- <textarea
- ref={textareaRef}
- className={"latex-textarea"}
- value={content}
- onChange={handleChange}
- />
+ className={"bn-popover-content bn-form-popover"}
+ variant={"form-popover"}>
+ <label className={"equation-label"}>
+ <TextareaView
+ placeholder={"c^2 = a^2 + b^2"}
+ ref={textareaRef}
+ autofocus
+ value={content}
+ onChange={handleChange}
+ />
+ <span onClick={handleEnter} className={"equation-enter"}><AiOutlineEnter /></span>
+ </label>
</Components.Generic.Popover.Content>
</Components.Generic.Popover.Root>
</NodeViewWrapper>
@@ -152,38 +283,27 @@ function LaTexView() {
return nodeView;
}
-const propSchema = {
- open: {
- type: "boolean",
- default: false,
- },
-};
-
const node = createStronglyTypedTiptapNode({
- name: "latex",
+ name: "inlineEquation",
inline: true,
group: "inline",
content: "inline*",
editable: true,
selectable: false,
-
- addAttributes() {
- return propsToAttributes(propSchema);
- },
-
parseHTML() {
return [
{
- tag: "latex",
+ tag: "inlineEquation",
priority: 200,
- node: "latex",
+ node: "inlineEquation",
},
];
},
+ // @ts-ignore
renderHTML({ HTMLAttributes }) {
return [
- "latex",
+ "inlineEquation",
mergeAttributes(HTMLAttributes, {
"data-content-type": this.name,
}),
@@ -191,14 +311,13 @@ const node = createStronglyTypedTiptapNode({
];
},
- addNodeView: LaTexView(),
+ addNodeView: InlineEquationView(),
});
-export const LaTex = createInternalInlineContentSpec(
+export const InlineEquation = createInternalInlineContentSpec(
{
content: "styled",
- type: "latex",
- propSchema: propSchema,
+ type: "inlineEquation",
},
{
node,
diff --git a/examples/03-ui-components/13-equation/styles.css b/examples/03-ui-components/13-equation/styles.css
index 7296b28dce..b1793b3e9c 100644
--- a/examples/03-ui-components/13-equation/styles.css
+++ b/examples/03-ui-components/13-equation/styles.css
@@ -1,74 +1,62 @@
-.alert {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-grow: 1;
+.equation-content {
+ caret-color: rgb(55, 53, 47);
+ padding: 2px 2px;
border-radius: 4px;
- min-height: 48px;
- padding: 4px;
+ transform: translate3d(-4px, 0, 0);
+ margin-right: -4px;
+ white-space: pre;
}
-.alert[data-alert-type="warning"] {
- background-color: #fff6e6;
-}
-
-.alert[data-alert-type="error"] {
- background-color: #ffe6e6;
-}
-.alert[data-alert-type="info"] {
- background-color: #e6ebff;
+.equation.focus .equation-content {
+ background: rgba(37, 135, 231, 0.12);
}
-.alert[data-alert-type="success"] {
- background-color: #e6ffe6;
-}
-
-[data-color-scheme="dark"] .alert[data-alert-type="warning"] {
- background-color: #805d20;
-}
-
-[data-color-scheme="dark"] .alert[data-alert-type="error"] {
- background-color: #802020;
+.equation .equation-empty {
+ white-space: nowrap;
+ font-size: 12px;
+ background: rgb(207, 207, 207);
+ caret-color: rgb(55, 53, 47);
+ vertical-align: top;
+ padding: 2px 4px;
+ border-radius: 4px;
+ transform: translate3d(-4px, 0, 0);
+ margin-right: -8px;
}
-[data-color-scheme="dark"] .alert[data-alert-type="info"] {
- background-color: #203380;
+.equation-label {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ padding: 4px;
}
-[data-color-scheme="dark"] .alert[data-alert-type="success"] {
- background-color: #208020;
+.equation-textarea {
+ min-width: 200px;
+ margin-right: 10px;
+ outline: none;
+ border: none;
+ font-size: 14px;
}
-.alert-icon-wrapper {
- border-radius: 16px;
- display: flex;
- justify-content: center;
- align-items: center;
- margin-left: 12px;
- margin-right: 12px;
- height: 18px;
- width: 18px;
+.equation-enter {
user-select: none;
cursor: pointer;
-}
-
-.alert-icon[data-alert-icon-type="warning"] {
- color: #e69819
-}
-
-.alert-icon[data-alert-icon-type="error"] {
- color: #d80d0d
-}
-
-.alert-icon[data-alert-icon-type="info"] {
- color: #507aff
-}
-
-.alert-icon[data-alert-icon-type="success"] {
- color: #0bc10b
-}
-
-.inline-content {
- flex-grow: 1;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ white-space: nowrap;
+ height: 28px;
+ border-radius: 4px;
+ box-shadow: rgba(15, 15, 15, 0.1) 0 0 0 1px inset, rgba(15, 15, 15, 0.1) 0 1px 2px;
+ background: rgb(35, 131, 226);
+ color: white;
+ fill: white;
+ line-height: 1.2;
+ padding-left: 12px;
+ padding-right: 12px;
+ font-size: 14px;
+ font-weight: 500;
+ align-self: flex-start;
}
\ No newline at end of file
From aafcc4f5ec49c1e74ca21e62dfb614277032ca01 Mon Sep 17 00:00:00 2001
From: jkcs <1778768609@qq.com>
Date: Fri, 19 Jul 2024 14:49:12 +0800
Subject: [PATCH 3/5] Inline Equation
---
.../03-ui-components/13-equation/.bnexample.json | 2 +-
examples/03-ui-components/13-equation/App.tsx | 6 +++---
examples/03-ui-components/13-equation/index.html | 2 +-
playground/src/examples.gen.tsx | 12 ++++++------
4 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/examples/03-ui-components/13-equation/.bnexample.json b/examples/03-ui-components/13-equation/.bnexample.json
index 1aadbc234b..1e4b6d5d3e 100644
--- a/examples/03-ui-components/13-equation/.bnexample.json
+++ b/examples/03-ui-components/13-equation/.bnexample.json
@@ -2,7 +2,7 @@
"playground": true,
"docs": false,
"author": "matthewlipski",
- "tags": ["Intermediate", "Blocks", "Custom Schemas", "Suggestion Menus", "Slash Menu"],
+ "tags": ["Equation", "Inline Equation", "Custom Schemas", "Latex", "Slash Menu"],
"dependencies": {
"katex": "^0.16.11",
"@types/katex": "^0.16.7",
diff --git a/examples/03-ui-components/13-equation/App.tsx b/examples/03-ui-components/13-equation/App.tsx
index f7e55ed27f..20df20adbf 100644
--- a/examples/03-ui-components/13-equation/App.tsx
+++ b/examples/03-ui-components/13-equation/App.tsx
@@ -10,7 +10,7 @@ import {
useCreateBlockNote,
} from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
-import { PiTextSuperscript } from "react-icons/pi";
+import { RiFormula } from "react-icons/ri";
import "@blocknote/mantine/style.css";
import { InlineEquation } from "./Equation";
@@ -26,7 +26,7 @@ const schema = BlockNoteSchema.create({
// Slash menu item to insert an Alert block
const insertLaTex = (editor: typeof schema.BlockNoteEditor) => ({
- icon: PiTextSuperscript,
+ icon: <RiFormula size={18}/>,
title: "Inline Equation",
key: "inlineEquation",
subtext: "Insert mathematical symbols in text.",
@@ -51,7 +51,7 @@ export default function App() {
{
type: "paragraph",
content: [
- "This is an example inline equation",
+ "This is an example inline equation ",
{
type: "inlineEquation",
content: "c = \\pm\\sqrt{a^2 + b^2}",
diff --git a/examples/03-ui-components/13-equation/index.html b/examples/03-ui-components/13-equation/index.html
index 6c6a363839..84532134d8 100644
--- a/examples/03-ui-components/13-equation/index.html
+++ b/examples/03-ui-components/13-equation/index.html
@@ -5,7 +5,7 @@
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Equation</title>
+ <title>Alert Block</title>
</head>
<body>
<div id="root"></div>
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index deab6d212c..b7364ed1a9 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -560,22 +560,22 @@
"pathFromRoot": "examples/03-ui-components/13-equation",
"config": {
"playground": true,
- "docs": true,
+ "docs": false,
"author": "matthewlipski",
"tags": [
- "Intermediate",
- "Blocks",
+ "Equation",
+ "Inline Equation",
"Custom Schemas",
- "Suggestion Menus",
+ "Latex",
"Slash Menu"
],
"dependencies": {
"katex": "^0.16.11",
- "@types/katex": "^0.16.11",
+ "@types/katex": "^0.16.7",
"react-icons": "^5.2.1"
} as any
},
- "title": "Equation",
+ "title": "Alert Block",
"group": {
"pathFromRoot": "examples/03-ui-components",
"slug": "ui-components"
From ca63b7ea2361200cac4aa65bd99e8809d69b88c9 Mon Sep 17 00:00:00 2001
From: jkcs <1778768609@qq.com>
Date: Fri, 19 Jul 2024 15:00:12 +0800
Subject: [PATCH 4/5] fix: type error
---
examples/03-ui-components/13-equation/App.tsx | 2 +-
examples/03-ui-components/13-equation/Equation.tsx | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/examples/03-ui-components/13-equation/App.tsx b/examples/03-ui-components/13-equation/App.tsx
index 20df20adbf..42c3fcc292 100644
--- a/examples/03-ui-components/13-equation/App.tsx
+++ b/examples/03-ui-components/13-equation/App.tsx
@@ -37,7 +37,7 @@ const insertLaTex = (editor: typeof schema.BlockNoteEditor) => ({
const pos = editor._tiptapEditor.state.selection.from;
const tr = view.state.tr.insert(
pos,
- view.state.schema.nodes.inlineEquation.create(""),
+ view.state.schema.nodes.inlineEquation.create(),
);
view.dispatch(tr);
},
diff --git a/examples/03-ui-components/13-equation/Equation.tsx b/examples/03-ui-components/13-equation/Equation.tsx
index 90339f2237..7eace7beb3 100644
--- a/examples/03-ui-components/13-equation/Equation.tsx
+++ b/examples/03-ui-components/13-equation/Equation.tsx
@@ -318,6 +318,7 @@ export const InlineEquation = createInternalInlineContentSpec(
{
content: "styled",
type: "inlineEquation",
+ propSchema: {},
},
{
node,
From 41948a5ca794afb48b750800e84935e1f4ac37f4 Mon Sep 17 00:00:00 2001
From: jkcs <1778768609@qq.com>
Date: Fri, 19 Jul 2024 15:17:18 +0800
Subject: [PATCH 5/5] fix: title error
---
examples/03-ui-components/13-equation/README.md | 6 +++---
examples/03-ui-components/13-equation/index.html | 2 +-
playground/src/examples.gen.tsx | 2 +-
3 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/examples/03-ui-components/13-equation/README.md b/examples/03-ui-components/13-equation/README.md
index 8c064c8b11..2e140b5666 100644
--- a/examples/03-ui-components/13-equation/README.md
+++ b/examples/03-ui-components/13-equation/README.md
@@ -1,8 +1,8 @@
-# Alert Block
+# Inline Equation
-In this example, we create a custom `Alert` block which is used to emphasize text. In addition, we create a Slash Menu item which inserts an `Alert` block.
+In this example, we create a custom `Inline Equation`
-**Try it out:** Press the "/" key to open the Slash Menu and insert an `Alert` block!
+**Try it out:** Press the "/" key to open the Slash Menu and insert an `Equation` block!
**Relevant Docs:**
diff --git a/examples/03-ui-components/13-equation/index.html b/examples/03-ui-components/13-equation/index.html
index 84532134d8..772555bb29 100644
--- a/examples/03-ui-components/13-equation/index.html
+++ b/examples/03-ui-components/13-equation/index.html
@@ -5,7 +5,7 @@
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Alert Block</title>
+ <title>Inline Equation</title>
</head>
<body>
<div id="root"></div>
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index b7364ed1a9..e6e3d9961d 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -575,7 +575,7 @@
"react-icons": "^5.2.1"
} as any
},
- "title": "Alert Block",
+ "title": "Inline Equation",
"group": {
"pathFromRoot": "examples/03-ui-components",
"slug": "ui-components"