implement isSelected

examples/06-custom-schema/05-equation/.bnexample.json

@@ -2,7 +2,7 @@
   "playground": true,
   "docs": false,
   "author": "jkcs",
-  "tags": ["Equation", "Inline Equation", "Custom Schemas", "Latex", "Slash Menu"],
+  "tags": ["Equation", "Inline Equation", "Custom Schemas", "Latex", "Katex"],
   "dependencies": {
     "katex": "^0.16.11",
     "@types/katex": "^0.16.7",

examples/06-custom-schema/05-equation/App.tsx

@@ -4,14 +4,14 @@ import {
   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 { BlockNoteView } from "@blocknote/mantine";
 import { RiFormula } from "react-icons/ri";
-import "@blocknote/mantine/style.css";
 
 import { InlineEquation } from "./Equation";
 

examples/06-custom-schema/05-equation/Equation.tsx

@@ -1,26 +1,25 @@
+import { InlineContentFromConfig } from "@blocknote/core";
 import {
   createReactInlineContentSpec,
   useBlockNoteEditor,
   useComponentsContext,
-  useEditorContentOrSelectionChange,
 } 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,
-  forwardRef,
   MouseEvent as ReactMouseEvent,
   TextareaHTMLAttributes,
+  forwardRef,
   useCallback,
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from "react";
-import katex from "katex";
 import { AiOutlineEnter } from "react-icons/ai";
-import "katex/dist/katex.min.css";
 import "./styles.css";
-import { Node as TipTapNode } from "@tiptap/pm/model";
 
 const TextareaView = forwardRef<
   HTMLTextAreaElement,
@@ -47,14 +46,17 @@ const TextareaView = forwardRef<
   );
 });
 
-export const InlineEquationView = (props: { node: TipTapNode }) => {
-  const content = props.node.attrs.content;
+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 [focus, setFocus] = useState(!content);
-  const [curEdge, setCurEdge] = useState(!content);
+
   const Components = useComponentsContext()!;
   const editor = useBlockNoteEditor();
   const html = useMemo(
@@ -95,25 +97,12 @@ export const InlineEquationView = (props: { node: TipTapNode }) => {
     return position;
   }, [editor, props.node]);
 
-  useEditorContentOrSelectionChange(() => {
-    const pos = getPos();
-    const courPos = editor._tiptapEditor.state.selection.from;
-    const selection = editor.getSelection();
-
-    setCurEdge(!selection && (courPos === pos + nodeSize || courPos === pos));
-  });
-
-  useEffect(() => {
-    if (focus) {
-      contentRef.current?.click();
-    }
-  }, [focus]);
-
   const handleEnter = useCallback(
-    (event: ReactMouseEvent | KeyboardEvent) => {
+    (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;
 
@@ -122,68 +111,50 @@ export const InlineEquationView = (props: { node: TipTapNode }) => {
         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();
-      setFocus(false);
-      setCurEdge(true);
     },
     [content, editor, getPos, nodeSize, props.node]
   );
 
   const handleMenuNavigationKeys = useCallback(
-    (event: KeyboardEvent) => {
+    (event: React.KeyboardEvent) => {
       const textareaEdge = getTextareaEdge();
       const pos = getPos();
-      const courPos = editor._tiptapEditor.state.selection.from;
 
       if (event.key === "ArrowLeft") {
-        if (courPos === pos + nodeSize && !focus) {
-          setFocus(true);
-        }
         if (textareaEdge.isLeftEdge) {
+          // TODO: implement BlockNote API to set cursor position
           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) {
+          // TODO: implement BlockNote API to set cursor position
           event.preventDefault();
           editor.focus();
           editor._tiptapEditor.commands.setTextSelection(pos + nodeSize);
-          setFocus(false);
         }
         return true;
       }
 
-      if (event.key === "Enter" && focus) {
+      if (event.key === "Enter" && props.isSelected) {
         handleEnter(event);
         return true;
       }
 
       return false;
     },
-    [editor, focus, getPos, handleEnter, nodeSize]
+    [editor, getPos, handleEnter, nodeSize, props.isSelected]
   );
 
-  useEffect(() => {
-    const domEle = editor._tiptapEditor?.view?.dom;
-    if (focus || curEdge) {
-      domEle?.addEventListener("keydown", handleMenuNavigationKeys, true);
-    }
-
-    return () => {
-      domEle?.removeEventListener("keydown", handleMenuNavigationKeys, true);
-    };
-  }, [editor, focus, handleMenuNavigationKeys, curEdge]);
-
+  // TODO: implement BlockNote API to easily update inline content
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     const val = e.target.value;
     const pos = getPos();
@@ -203,39 +174,19 @@ export const InlineEquationView = (props: { node: TipTapNode }) => {
     );
 
     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"} ref={containerRef}>
-      <Components.Generic.Popover.Root opened={focus}>
+      <Components.Generic.Popover.Root opened={props.isSelected}>
         <Components.Generic.Popover.Trigger>
           <span
-            className={"equation " + (focus ? "focus" : "")}
+            className={"equation " + (props.isSelected ? "focus" : "")}
             ref={contentRef}>
             {!content ? (
-              <span onClick={() => setFocus(true)} className={"equation-empty"}>
-                New Equation
-              </span>
+              <span className={"equation-empty"}>New Equation</span>
             ) : (
               <span
-                onClick={() => setFocus(true)}
                 className={"equation-content"}
                 dangerouslySetInnerHTML={{ __html: html }}></span>
             )}
@@ -251,6 +202,7 @@ export const InlineEquationView = (props: { node: TipTapNode }) => {
               autofocus
               value={content}
               onChange={handleChange}
+              onKeyDown={handleMenuNavigationKeys}
             />
             <span onClick={handleEnter} className={"equation-enter"}>
               <AiOutlineEnter />
@@ -286,7 +238,13 @@ export const InlineEquation = createReactInlineContentSpec(
   },
   {
     render: (props) => {
-      return <InlineEquationView node={props.node} />;
+      return (
+        <InlineEquationView
+          node={props.node}
+          inlineContent={props.inlineContent}
+          isSelected={props.isSelected}
+        />
+      );
     },
   }
 );

examples/06-custom-schema/05-equation/README.md

@@ -8,4 +8,4 @@ In this example, we create a custom `Inline Equation`
 
 - [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)
+- [Editor Setup](/docs/editor-basics/setup)

examples/06-custom-schema/05-equation/styles.css

@@ -1,62 +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;
+  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);
+  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;
+  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;
+  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;
+  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;
-}
+  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;
+}

packages/core/src/schema/inlineContent/types.ts

@@ -1,8 +1,8 @@
 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";
-import { Node as ProseMirrorNode } from "prosemirror-model";
-import { DOMOutputSpec } from "@tiptap/pm/model";
 
 export type CustomInlineContentConfig = {
   type: string;

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>
   );