diff --git a/examples/06-custom-schema/05-equation/.bnexample.json b/examples/06-custom-schema/05-equation/.bnexample.json
new file mode 100644
index 000000000..896230e29
--- /dev/null
+++ b/examples/06-custom-schema/05-equation/.bnexample.json
@@ -0,0 +1,11 @@
+{
+  "playground": true,
+  "docs": false,
+  "author": "jkcs",
+  "tags": ["Equation", "Inline Equation", "Custom Schemas", "Latex", "Katex"],
+  "dependencies": {
+    "katex": "^0.16.11",
+    "@types/katex": "^0.16.7",
+    "react-icons": "^5.2.1"
+  }
+}
diff --git a/examples/06-custom-schema/05-equation/App.tsx b/examples/06-custom-schema/05-equation/App.tsx
new file mode 100644
index 000000000..f5c7c4215
--- /dev/null
+++ b/examples/06-custom-schema/05-equation/App.tsx
@@ -0,0 +1,90 @@
+import {
+  BlockNoteSchema,
+  defaultInlineContentSpecs,
+  filterSuggestionItems,
+} from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import {
+  SuggestionMenuController,
+  getDefaultReactSlashMenuItems,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import { RiFormula } from "react-icons/ri";
+
+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,
+    inlineEquation: InlineEquation,
+  },
+});
+
+const insertInlineEquation = (editor: typeof schema.BlockNoteEditor) => ({
+  icon: <RiFormula size={18} />,
+  title: "Inline Equation",
+  key: "inlineEquation",
+  subtext: "Insert mathematical symbols in text.",
+  aliases: ["equation", "latex", "katex"],
+  group: "Other",
+  onItemClick: () => {
+    editor.insertInlineContent([
+      {
+        type: "inlineEquation",
+      },
+      " ", // add a space after the mention
+    ]);
+  },
+});
+
+export default function App() {
+  const editor = useCreateBlockNote({
+    schema,
+    initialContent: [
+      {
+        type: "paragraph",
+        content: [
+          "This is an example inline equation ",
+          {
+            type: "inlineEquation",
+            props: {
+              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",
+      },
+    ],
+  });
+
+  // Renders the editor instance.
+  return (
+    <BlockNoteView editor={editor} slashMenu={false}>
+      <SuggestionMenuController
+        triggerCharacter={"/"}
+        getItems={async (query: any) =>
+          filterSuggestionItems(
+            [
+              ...getDefaultReactSlashMenuItems(editor),
+              insertInlineEquation(editor),
+            ],
+            query
+          )
+        }
+      />
+    </BlockNoteView>
+  );
+}
diff --git a/examples/06-custom-schema/05-equation/Equation.tsx b/examples/06-custom-schema/05-equation/Equation.tsx
new file mode 100644
index 000000000..512efa369
--- /dev/null
+++ b/examples/06-custom-schema/05-equation/Equation.tsx
@@ -0,0 +1,250 @@
+import { InlineContentFromConfig } from "@blocknote/core";
+import {
+  createReactInlineContentSpec,
+  useBlockNoteEditor,
+  useComponentsContext,
+} from "@blocknote/react";
+import { Node as TipTapNode } from "@tiptap/pm/model";
+import { NodeViewWrapper } from "@tiptap/react";
+import katex from "katex";
+import "katex/dist/katex.min.css";
+import {
+  ChangeEvent,
+  MouseEvent as ReactMouseEvent,
+  TextareaHTMLAttributes,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { AiOutlineEnter } from "react-icons/ai";
+import "./styles.css";
+
+const TextareaView = forwardRef<
+  HTMLTextAreaElement,
+  {
+    autofocus?: boolean;
+  } & TextareaHTMLAttributes<HTMLTextAreaElement>
+>((props, ref) => {
+  const { autofocus, ...rest } = props;
+  useEffect(() => {
+    if (autofocus && ref && typeof ref !== "function" && 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}
+    />
+  );
+});
+
+export const InlineEquationView = (props: {
+  inlineContent: InlineContentFromConfig<typeof InlineEquation.config, any>;
+  node: TipTapNode;
+  isSelected: boolean;
+}) => {
+  const content = props.inlineContent.props.content;
+  const nodeSize = props.node.nodeSize;
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const contentRef = useRef<HTMLElement | null>(null);
+  const containerRef = useRef<HTMLElement | null>(null);
+
+  const Components = useComponentsContext()!;
+  const editor = useBlockNoteEditor();
+  const html = useMemo(
+    () =>
+      katex.renderToString(content, {
+        throwOnError: false,
+      }),
+    [content]
+  );
+
+  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,
+    };
+  };
+
+  const getPos = useCallback((): number => {
+    let position = 0;
+
+    editor._tiptapEditor.state.doc.descendants(
+      (node: TipTapNode, pos: number) => {
+        if (node === props.node) {
+          position = pos;
+          return false;
+        }
+      }
+    );
+
+    return position;
+  }, [editor, props.node]);
+
+  const handleEnter = useCallback(
+    (event: ReactMouseEvent | React.KeyboardEvent) => {
+      event.preventDefault();
+      const pos = getPos();
+      if (!content) {
+        // TODO: implement BlockNote API to easily delete inline 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 {
+        // TODO: implement BlockNote API to easily update cursor position
+        editor._tiptapEditor.commands.setTextSelection(pos + nodeSize);
+      }
+      editor.focus();
+    },
+    [content, editor, getPos, nodeSize, props.node]
+  );
+
+  const handleMenuNavigationKeys = useCallback(
+    (event: React.KeyboardEvent) => {
+      const textareaEdge = getTextareaEdge();
+      const pos = getPos();
+
+      if (event.key === "ArrowLeft") {
+        if (textareaEdge.isLeftEdge) {
+          // TODO: implement BlockNote API to set cursor position
+          event.preventDefault();
+          editor.focus();
+          editor._tiptapEditor.commands.setTextSelection(pos);
+        }
+        return true;
+      }
+
+      if (event.key === "ArrowRight") {
+        if (textareaEdge.isRightEdge) {
+          // TODO: implement BlockNote API to set cursor position
+          event.preventDefault();
+          editor.focus();
+          editor._tiptapEditor.commands.setTextSelection(pos + nodeSize);
+        }
+        return true;
+      }
+
+      if (event.key === "Enter" && props.isSelected) {
+        handleEnter(event);
+        return true;
+      }
+
+      return false;
+    },
+    [editor, getPos, handleEnter, nodeSize, props.isSelected]
+  );
+
+  // TODO: implement BlockNote API to easily update inline content
+  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const val = e.target.value;
+    const pos = getPos();
+    const node = props.node;
+    const view = editor._tiptapEditor.view;
+
+    const tr = view.state.tr.replaceWith(
+      pos,
+      pos + node.nodeSize,
+      view.state.schema.nodes.inlineEquation.create(
+        {
+          ...node.attrs,
+          content: val || "",
+        },
+        null
+      )
+    );
+
+    view.dispatch(tr);
+  };
+
+  return (
+    <NodeViewWrapper as={"span"} ref={containerRef}>
+      <Components.Generic.Popover.Root opened={props.isSelected}>
+        <Components.Generic.Popover.Trigger>
+          <span
+            className={"equation " + (props.isSelected ? "focus" : "")}
+            ref={contentRef}>
+            {!content ? (
+              <span className={"equation-empty"}>New Equation</span>
+            ) : (
+              <span
+                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"}>
+          <label className={"equation-label"}>
+            <TextareaView
+              placeholder={"c^2 = a^2 + b^2"}
+              ref={textareaRef}
+              autofocus
+              value={content}
+              onChange={handleChange}
+              onKeyDown={handleMenuNavigationKeys}
+            />
+            <span onClick={handleEnter} className={"equation-enter"}>
+              <AiOutlineEnter />
+            </span>
+          </label>
+        </Components.Generic.Popover.Content>
+      </Components.Generic.Popover.Root>
+    </NodeViewWrapper>
+  );
+};
+
+export const InlineEquation = createReactInlineContentSpec(
+  {
+    type: "inlineEquation",
+    propSchema: {
+      content: {
+        default: "",
+      },
+    },
+    content: "none",
+    // copy content
+    renderHTML: (props) => {
+      const { HTMLAttributes, node } = props;
+      const dom = document.createElement("span");
+      dom.setAttribute("data-inline-content-type", "inlineEquation");
+      Object.keys(HTMLAttributes).forEach((key) => {
+        dom.setAttribute(key, HTMLAttributes[key]);
+      });
+      dom.innerText = node.attrs.content;
+
+      return { dom };
+    },
+  },
+  {
+    render: (props) => {
+      return (
+        <InlineEquationView
+          node={props.node}
+          inlineContent={props.inlineContent}
+          isSelected={props.isSelected}
+        />
+      );
+    },
+  }
+);
diff --git a/examples/06-custom-schema/05-equation/README.md b/examples/06-custom-schema/05-equation/README.md
new file mode 100644
index 000000000..1d40f6f5a
--- /dev/null
+++ b/examples/06-custom-schema/05-equation/README.md
@@ -0,0 +1,11 @@
+# Inline Equation
+
+In this example, we create a custom `Inline Equation`
+
+**Try it out:** Press the "/" key to open the Slash Menu and insert an `Equation` 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)
diff --git a/examples/06-custom-schema/05-equation/index.html b/examples/06-custom-schema/05-equation/index.html
new file mode 100644
index 000000000..772555bb2
--- /dev/null
+++ b/examples/06-custom-schema/05-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>Inline Equation</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/06-custom-schema/05-equation/main.tsx b/examples/06-custom-schema/05-equation/main.tsx
new file mode 100644
index 000000000..f88b490fb
--- /dev/null
+++ b/examples/06-custom-schema/05-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/06-custom-schema/05-equation/package.json b/examples/06-custom-schema/05-equation/package.json
new file mode 100644
index 000000000..4751728ce
--- /dev/null
+++ b/examples/06-custom-schema/05-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.3.1",
+    "eslint": "^8.10.0",
+    "vite": "^5.3.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/06-custom-schema/05-equation/styles.css b/examples/06-custom-schema/05-equation/styles.css
new file mode 100644
index 000000000..3507e3df3
--- /dev/null
+++ b/examples/06-custom-schema/05-equation/styles.css
@@ -0,0 +1,62 @@
+.equation-content {
+  caret-color: rgb(55, 53, 47);
+  padding: 2px 2px;
+  border-radius: 4px;
+  transform: translate3d(-4px, 0, 0);
+  margin-right: -4px;
+  white-space: pre;
+}
+
+.equation.focus .equation-content {
+  background: rgba(37, 135, 231, 0.12);
+}
+
+.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;
+}
+
+.equation-label {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 4px;
+}
+
+.equation-textarea {
+  min-width: 200px;
+  margin-right: 10px;
+  outline: none;
+  border: none;
+  font-size: 14px;
+}
+
+.equation-enter {
+  user-select: none;
+  cursor: pointer;
+  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;
+}
diff --git a/examples/06-custom-schema/05-equation/tsconfig.json b/examples/06-custom-schema/05-equation/tsconfig.json
new file mode 100644
index 000000000..1bd8ab3c5
--- /dev/null
+++ b/examples/06-custom-schema/05-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/06-custom-schema/05-equation/vite.config.ts b/examples/06-custom-schema/05-equation/vite.config.ts
new file mode 100644
index 000000000..f62ab20bc
--- /dev/null
+++ b/examples/06-custom-schema/05-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 e3d7c46a7..9848e8f35 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17763,13 +17763,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"
       },
@@ -28840,6 +28841,7 @@
         "@mantine/core": "^7.10.1",
         "@mui/icons-material": "^5.16.1",
         "@mui/material": "^5.16.1",
+        "@types/katex": "^0.16.7",
         "@uppy/core": "^3.13.1",
         "@uppy/dashboard": "^3.9.1",
         "@uppy/drag-drop": "^3.1.1",
@@ -28851,6 +28853,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",
diff --git a/packages/core/src/schema/inlineContent/types.ts b/packages/core/src/schema/inlineContent/types.ts
index 5ef62f593..708bab857 100644
--- a/packages/core/src/schema/inlineContent/types.ts
+++ b/packages/core/src/schema/inlineContent/types.ts
@@ -1,4 +1,6 @@
 import { Node } from "@tiptap/core";
+import { DOMOutputSpec } from "@tiptap/pm/model";
+import { Node as ProseMirrorNode } from "prosemirror-model";
 import { PropSchema, Props } from "../propTypes";
 import { StyleSchema, Styles } from "../styles/types";
 
@@ -6,6 +8,10 @@ export type CustomInlineContentConfig = {
   type: string;
   content: "styled" | "none"; // | "plain"
   readonly propSchema: PropSchema;
+  renderHTML?: (props: {
+    node: ProseMirrorNode;
+    HTMLAttributes: Record<string, any>;
+  }) => DOMOutputSpec;
   // content: "inline" | "none" | "table";
 };
 // InlineContentConfig contains the "schema" info about an InlineContent type
diff --git a/packages/mantine/src/popover/Popover.tsx b/packages/mantine/src/popover/Popover.tsx
index b81f842e6..28af93afa 100644
--- a/packages/mantine/src/popover/Popover.tsx
+++ b/packages/mantine/src/popover/Popover.tsx
@@ -11,7 +11,7 @@ import { forwardRef } from "react";
 export const Popover = (
   props: ComponentProps["Generic"]["Popover"]["Root"]
 ) => {
-  const { children, opened, position, ...rest } = props;
+  const { children, opened, onChange, position, ...rest } = props;
 
   assertEmpty(rest);
 
@@ -20,7 +20,8 @@ export const Popover = (
       withinPortal={false}
       zIndex={10000}
       opened={opened}
-      position={position}>
+      position={position}
+      onChange={onChange}>
       {children}
     </MantinePopover>
   );
diff --git a/packages/react/package.json b/packages/react/package.json
index b7b27abce..f229ba690 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -55,6 +55,7 @@
     "@floating-ui/react": "^0.26.4",
     "@tiptap/core": "^2.5.0",
     "@tiptap/react": "^2.5.0",
+    "@tiptap/pm": "^2.5.0",
     "lodash.merge": "^4.6.2",
     "react": "^18",
     "react-dom": "^18",
diff --git a/packages/react/src/editor/ComponentsContext.tsx b/packages/react/src/editor/ComponentsContext.tsx
index 7a46df454..24d6861ab 100644
--- a/packages/react/src/editor/ComponentsContext.tsx
+++ b/packages/react/src/editor/ComponentsContext.tsx
@@ -9,8 +9,8 @@ import {
   useContext,
 } from "react";
 
-import { DefaultReactSuggestionItem } from "../components/SuggestionMenu/types";
 import { DefaultReactGridSuggestionItem } from "../components/SuggestionMenu/GridSuggestionMenu/types";
+import { DefaultReactSuggestionItem } from "../components/SuggestionMenu/types";
 
 export type ComponentProps = {
   FormattingToolbar: {
@@ -241,6 +241,7 @@ export type ComponentProps = {
         children?: ReactNode;
         opened?: boolean;
         position?: "top" | "right" | "bottom" | "left";
+        onChange?: (open: boolean) => void;
       };
       Content: {
         className?: string;
diff --git a/packages/react/src/schema/ReactInlineContentSpec.tsx b/packages/react/src/schema/ReactInlineContentSpec.tsx
index 27999dcfe..68243236a 100644
--- a/packages/react/src/schema/ReactInlineContentSpec.tsx
+++ b/packages/react/src/schema/ReactInlineContentSpec.tsx
@@ -21,6 +21,7 @@ import {
   ReactNodeViewRenderer,
 } from "@tiptap/react";
 // import { useReactNodeView } from "@tiptap/react/dist/packages/react/src/useReactNodeView";
+import { Node } from "@tiptap/pm/model";
 import { FC } from "react";
 import { renderToDOMSpec } from "./@util/ReactRenderUtil";
 
@@ -35,6 +36,8 @@ export type ReactInlineContentImplementation<
   render: FC<{
     inlineContent: InlineContentFromConfig<T, S>;
     contentRef: (node: HTMLElement | null) => void;
+    node: Node;
+    isSelected: boolean;
   }>;
   // TODO?
   // toExternalHTML?: FC<{
@@ -91,7 +94,7 @@ export function createReactInlineContentSpec<
     name: inlineContentConfig.type as T["type"],
     inline: true,
     group: "inline",
-    selectable: inlineContentConfig.content === "styled",
+    selectable: true, //inlineContentConfig.content === "styled",
     atom: inlineContentConfig.content === "none",
     content: (inlineContentConfig.content === "styled"
       ? "inline*"
@@ -109,7 +112,10 @@ export function createReactInlineContentSpec<
       return getInlineContentParseRules(inlineContentConfig);
     },
 
-    renderHTML({ node }) {
+    renderHTML({ node, ...args }) {
+      if (inlineContentConfig.renderHTML) {
+        return inlineContentConfig.renderHTML({ node, ...args });
+      }
       const editor = this.options.editor;
 
       const ic = nodeToCustomInlineContent(
@@ -119,7 +125,14 @@ export function createReactInlineContentSpec<
       ) as any as InlineContentFromConfig<T, S>; // TODO: fix cast
       const Content = inlineContentImplementation.render;
       const output = renderToDOMSpec(
-        (refCB) => <Content inlineContent={ic} contentRef={refCB} />,
+        (refCB) => (
+          <Content
+            inlineContent={ic}
+            contentRef={refCB}
+            node={node}
+            isSelected={false}
+          />
+        ),
         editor
       );
 
@@ -131,7 +144,6 @@ export function createReactInlineContentSpec<
       );
     },
 
-    // TODO: needed?
     addNodeView() {
       const editor = this.options.editor;
       return (props) =>
@@ -141,6 +153,13 @@ export function createReactInlineContentSpec<
             const ref = (NodeViewContent({}) as any).ref;
 
             const Content = inlineContentImplementation.render;
+
+            const isSelected =
+              props.selected &&
+              props.editor.state.selection.from === props.getPos() &&
+              props.editor.state.selection.to ===
+                props.getPos() + props.node.nodeSize;
+
             return (
               <InlineContentWrapper
                 inlineContentProps={props.node.attrs as Props<T["propSchema"]>}
@@ -148,6 +167,7 @@ export function createReactInlineContentSpec<
                 propSchema={inlineContentConfig.propSchema}>
                 <Content
                   contentRef={ref}
+                  node={props.node}
                   inlineContent={
                     nodeToCustomInlineContent(
                       props.node,
@@ -155,6 +175,7 @@ export function createReactInlineContentSpec<
                       editor.schema.styleSchema
                     ) as any as InlineContentFromConfig<T, S> // TODO: fix cast
                   }
+                  isSelected={isSelected}
                 />
               </InlineContentWrapper>
             );
diff --git a/playground/package.json b/playground/package.json
index 0992b1d34..14ec4b6db 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -25,6 +25,7 @@
     "@mantine/core": "^7.10.1",
     "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.16.1",
+    "@types/katex": "^0.16.7",
     "@uppy/core": "^3.13.1",
     "@uppy/dashboard": "^3.9.1",
     "@uppy/drag-drop": "^3.1.1",
@@ -36,6 +37,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",
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index 1941512e3..c8eb80b95 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -886,6 +886,33 @@
           "slug": "custom-schema"
         }
       },
+      {
+        "projectSlug": "equation",
+        "fullSlug": "custom-schema/equation",
+        "pathFromRoot": "examples/06-custom-schema/05-equation",
+        "config": {
+          "playground": true,
+          "docs": false,
+          "author": "jkcs",
+          "tags": [
+            "Equation",
+            "Inline Equation",
+            "Custom Schemas",
+            "Latex",
+            "Katex"
+          ],
+          "dependencies": {
+            "katex": "^0.16.11",
+            "@types/katex": "^0.16.7",
+            "react-icons": "^5.2.1"
+          } as any
+        },
+        "title": "Inline Equation",
+        "group": {
+          "pathFromRoot": "examples/06-custom-schema",
+          "slug": "custom-schema"
+        }
+      },
       {
         "projectSlug": "react-custom-blocks",
         "fullSlug": "custom-schema/react-custom-blocks",