@pie-lib/editable-html-tip-tap 2.1.5 → 2.1.7

package/src/components/__tests__/InlineDropdown.test.jsx

@@ -10,9 +10,11 @@ jest.mock('@tiptap/react', () => ({
   ),
 }));
 
+const mockCreatePortal = jest.fn((node) => node);
+
 jest.mock('react-dom', () => ({
   ...jest.requireActual('react-dom'),
-  createPortal: (node) => node,
+  createPortal: (...args) => mockCreatePortal(...args),
 }));
 
 describe('InlineDropdown', () => {
@@ -77,6 +79,7 @@ describe('InlineDropdown', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockCreatePortal.mockClear();
     mockEditor = buildMockEditor();
     defaultProps.editor = mockEditor;
     Object.defineProperty(document.body, 'getBoundingClientRect', {
@@ -182,6 +185,85 @@ describe('InlineDropdown', () => {
     });
   });
 
+  it('uses the current node when closing on outside click after the node prop changes', async () => {
+    const onToolbarCloseRequest = jest.fn((_tuple, _editor, onConfirm) => onConfirm());
+    const options = {
+      ...mockOptions,
+      onToolbarCloseRequest,
+    };
+    const updatedNode = {
+      attrs: { index: '1', value: 'Updated Option', error: false },
+      nodeSize: 1,
+    };
+
+    const { queryByTestId, rerender } = render(<InlineDropdown {...defaultProps} options={options} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    rerender(<InlineDropdown {...defaultProps} options={options} node={updatedNode} selected={true} />);
+
+    fireEvent.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(onToolbarCloseRequest).toHaveBeenCalledWith(
+        [updatedNode, 5],
+        expect.anything(),
+        expect.any(Function),
+        expect.any(Function),
+      );
+    });
+  });
+
+  it('respects hold state for the current node after the node prop changes', async () => {
+    const updatedNode = {
+      attrs: { index: '1', value: 'Updated Option', error: false },
+      nodeSize: 1,
+    };
+
+    mockEditor._holdInlineDropdownToolbarIndex = '1';
+
+    const { queryByTestId, rerender } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+
+    rerender(<InlineDropdown {...defaultProps} node={updatedNode} selected={true} />);
+
+    fireEvent.mouseDown(document.body);
+
+    await waitFor(() => {
+      expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
+    });
+  });
+
+  it('rebinds the outside-click listener when the node prop changes while the toolbar is open', async () => {
+    const addSpy = jest.spyOn(document, 'addEventListener');
+    const removeSpy = jest.spyOn(document, 'removeEventListener');
+    const updatedNode = { ...mockNode, attrs: { ...mockNode.attrs, value: 'Updated Option' } };
+
+    const { rerender } = render(<InlineDropdown {...defaultProps} selected={true} />);
+
+    await waitFor(() => {
+      expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    });
+
+    const removeCallsBeforeRerender = removeSpy.mock.calls.filter(([type]) => type === 'mousedown').length;
+
+    rerender(<InlineDropdown {...defaultProps} node={updatedNode} selected={true} />);
+
+    await waitFor(() => {
+      const removeCallsAfterRerender = removeSpy.mock.calls.filter(([type]) => type === 'mousedown').length;
+      expect(removeCallsAfterRerender).toBeGreaterThan(removeCallsBeforeRerender);
+      expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
+    });
+
+    addSpy.mockRestore();
+    removeSpy.mockRestore();
+  });
+
   it('has correct border styling', () => {
     const { container } = render(<InlineDropdown {...defaultProps} />);
     const dropdownDiv = container.querySelector('div[style*="border"]');
@@ -211,14 +293,29 @@ describe('InlineDropdown', () => {
     expect(textContainer).toHaveStyle({ textOverflow: 'ellipsis', whiteSpace: 'nowrap' });
   });
 
-  it('renders toolbar with z-index', async () => {
-    const { container } = render(<InlineDropdown {...defaultProps} selected={true} />);
+  it('portals toolbar into editor container when _tiptapContainerEl is set', async () => {
+    const containerEl = document.createElement('div');
+    const editor = buildMockEditor({ _tiptapContainerEl: containerEl });
+
+    render(<InlineDropdown {...defaultProps} editor={editor} selected={true} />);
+
     await waitFor(() => {
-      const toolbarContainer = container.querySelector('div[style*="zIndex"]');
-      if (toolbarContainer) {
-        expect(toolbarContainer).toHaveStyle({ zIndex: '1' });
-      }
+      expect(mockCreatePortal).toHaveBeenCalled();
     });
+
+    expect(mockCreatePortal.mock.calls[0][1]).toBe(containerEl);
+  });
+
+  it('portals toolbar into document.body when _tiptapContainerEl is missing', async () => {
+    const editor = buildMockEditor({ _tiptapContainerEl: undefined });
+
+    render(<InlineDropdown {...defaultProps} editor={editor} selected={true} />);
+
+    await waitFor(() => {
+      expect(mockCreatePortal).toHaveBeenCalled();
+    });
+
+    expect(mockCreatePortal.mock.calls[0][1]).toBe(document.body);
   });
 
   it('passes editorCallback to InlineDropdownToolbar', async () => {

package/src/components/common/toolbar-buttons.jsx

@@ -12,6 +12,11 @@ const StyledButton = styled('button', {
   background: 'none',
   border: 'none',
   cursor: disabled ? 'not-allowed' : 'pointer',
+  // previously we had implicit 24×24 icon rendering for mui svg icons, but now we need to explicitly set the size to 24×24 to match the previous behavior
+  '& svg': {
+    width: '24px',
+    height: '24px',
+  },
   '&:hover': {
     color: disabled ? 'grey' : 'black',
   },

package/src/components/respArea/InlineDropdown.jsx

@@ -126,7 +126,7 @@ const InlineDropdown = (props) => {
     }
 
     return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [showToolbar]);
+  }, [showToolbar, node]);
 
   return (
     <NodeViewWrapper
@@ -175,14 +175,14 @@ const InlineDropdown = (props) => {
       {showToolbar && (
         <React.Fragment>
           {ReactDOM.createPortal(
-            <div ref={toolbarRef} style={{ zIndex: 1 }}>
+            <div ref={toolbarRef}>
               <InlineDropdownToolbar
                 editorCallback={(instance) => {
                   toolbarEditor.current = instance;
                 }}
               />
             </div>,
-            document.body,
+            editor?._tiptapContainerEl || document.body,
           )}
 
           {editor._tiptapContainerEl &&

package/src/extensions/__tests__/math.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, waitFor, fireEvent } from '@testing-library/react';
 import { EnsureTextAfterMathPlugin, MathNode, MathNodeView, ZeroWidthSpaceHandlingPlugin } from '../math';
+import * as toolbarUtils from '../../utils/toolbar';
 
 jest.mock('@tiptap/react', () => ({
   NodeViewWrapper: ({ children, ...props }) => (
@@ -147,6 +148,35 @@ describe('MathNode', () => {
       expect(commands).toHaveProperty('insertMath');
       expect(typeof commands.insertMath).toBe('function');
     });
+
+    it('insertMath opens the toolbar after inserting a math node', () => {
+      const setToolbarOpenedSpy = jest.spyOn(toolbarUtils, 'setToolbarOpened');
+      const mathNode = { type: { name: 'math' }, nodeSize: 1 };
+      const tr = {
+        insert: jest.fn().mockReturnThis(),
+        setSelection: jest.fn().mockReturnThis(),
+        doc: {},
+      };
+      const editor = {
+        view: {
+          state: {
+            schema: { nodes: { math: { create: jest.fn(() => mathNode) } } },
+            selection: { $from: { pos: 1 } },
+          },
+        },
+      };
+      const dispatch = jest.fn();
+      const insertMath = MathNode.addCommands().insertMath('x^2');
+
+      insertMath({ tr, editor, dispatch });
+
+      expect(tr.insert).toHaveBeenCalledWith(1, mathNode);
+      expect(tr.setSelection).toHaveBeenCalled();
+      expect(dispatch).toHaveBeenCalledWith(tr);
+      expect(setToolbarOpenedSpy).toHaveBeenCalledWith(editor, true);
+
+      setToolbarOpenedSpy.mockRestore();
+    });
   });
 
   describe('addNodeView', () => {
@@ -219,12 +249,32 @@ describe('EnsureTextAfterMathPlugin', () => {
 });
 
 describe('ZeroWidthSpaceHandlingPlugin', () => {
-  const createDefaultDoc = () => ({
-    textBetween: jest.fn(() => '\u200b'),
-    resolve: jest.fn(() => ({
+  const createDocWithMathAndZwsp = (resolveOverrides = {}) => ({
+    resolve: jest.fn((pos) => ({
       nodeAfter: null,
       nodeBefore: null,
+      pos,
+      ...resolveOverrides[pos],
     })),
+    nodeAt: jest.fn((pos) => {
+      if (pos === 1) {
+        return { type: { name: 'text' }, textContent: '\u200b' };
+      }
+      if (pos === 0) {
+        return { type: { name: 'math' }, nodeSize: 1 };
+      }
+      return null;
+    }),
+  });
+
+  const createDocWithRegularTextBeforeCursor = () => ({
+    resolve: jest.fn((pos) => ({ nodeAfter: null, nodeBefore: null, pos })),
+    nodeAt: jest.fn((pos) => {
+      if (pos === 1) {
+        return { type: { name: 'text' }, textContent: 'a' };
+      }
+      return null;
+    }),
   });
 
   const createView = ({ state: stateOverrides = {} } = {}) => {
@@ -237,66 +287,88 @@ describe('ZeroWidthSpaceHandlingPlugin', () => {
     return {
       state: {
         selection: { from: 2, empty: true },
-        doc: createDefaultDoc(),
+        doc: createDocWithMathAndZwsp(),
         tr,
         ...stateOverrides,
-        doc: { ...createDefaultDoc(), ...stateOverrides.doc },
       },
       dispatch,
     };
   };
 
-  it('deletes math and zero-width space on Backspace', () => {
-    const view = createView();
-    const event = { key: 'Backspace' };
-    const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, event);
+  describe('Backspace', () => {
+    it('deletes the inline node and zero-width space before the cursor', () => {
+      const view = createView();
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'Backspace' });
+
+      expect(handled).toBe(true);
+      expect(view.state.tr.delete).toHaveBeenCalledWith(0, 2);
+      expect(view.dispatch).toHaveBeenCalledWith(view.state.tr);
+    });
+
+    it('returns false when regular text precedes the cursor', () => {
+      const view = createView({
+        state: {
+          doc: createDocWithRegularTextBeforeCursor(),
+        },
+      });
 
-    expect(handled).toBe(true);
-    expect(view.state.tr.delete).toHaveBeenCalledWith(0, 2);
-    expect(view.dispatch).toHaveBeenCalledWith(view.state.tr);
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'Backspace' });
+
+      expect(handled).toBe(false);
+      expect(view.state.tr.delete).not.toHaveBeenCalled();
+      expect(view.dispatch).not.toHaveBeenCalled();
+    });
   });
 
-  it('selects the math node on ArrowLeft before a zero-width space', () => {
-    const mathNode = { nodeSize: 3 };
-    const view = createView({
-      state: {
-        doc: {
-          resolve: jest
-            .fn()
-            .mockReturnValueOnce({ nodeAfter: mathNode, nodeBefore: null })
-            .mockReturnValueOnce({ pos: 4 }),
+  describe('ArrowLeft', () => {
+    it('selects the inline node before a zero-width space', () => {
+      const mathNode = { nodeSize: 3 };
+      const view = createView({
+        state: {
+          doc: createDocWithMathAndZwsp({
+            0: { nodeAfter: mathNode, nodeBefore: null, pos: 0 },
+          }),
         },
-      },
+      });
+      const { NodeSelection } = require('prosemirror-state');
+
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
+
+      expect(handled).toBe(true);
+      expect(view.state.doc.resolve).toHaveBeenCalledWith(0);
+      expect(NodeSelection.create).toHaveBeenCalledWith(view.state.doc, 0);
+      expect(view.dispatch).toHaveBeenCalled();
     });
-    const { NodeSelection } = require('prosemirror-state');
 
-    const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
+    it('moves the text cursor before the zero-width space when no inline node precedes it', () => {
+      const view = createView();
+      const { TextSelection } = require('prosemirror-state');
 
-    expect(handled).toBe(true);
-    expect(NodeSelection.create).toHaveBeenCalledWith(view.state.doc, 4);
-    expect(view.dispatch).toHaveBeenCalled();
-  });
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
 
-  it('moves the text cursor before the zero-width space when no inline node precedes it', () => {
-    const view = createView();
-    const { TextSelection } = require('prosemirror-state');
+      expect(handled).toBe(true);
+      expect(view.state.doc.resolve).toHaveBeenCalledWith(0);
+      expect(TextSelection.create).toHaveBeenCalledWith(view.state.doc, 0);
+      expect(view.dispatch).toHaveBeenCalled();
+    });
+
+    it('returns false when regular text precedes the cursor', () => {
+      const view = createView({
+        state: {
+          doc: createDocWithRegularTextBeforeCursor(),
+        },
+      });
 
-    const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
+      const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'ArrowLeft' });
 
-    expect(handled).toBe(true);
-    expect(TextSelection.create).toHaveBeenCalledWith(view.state.doc, 0);
-    expect(view.dispatch).toHaveBeenCalled();
+      expect(handled).toBe(false);
+      expect(view.state.tr.setSelection).not.toHaveBeenCalled();
+      expect(view.dispatch).not.toHaveBeenCalled();
+    });
   });
 
   it('returns false for unrelated keys', () => {
-    const view = createView({
-      state: {
-        doc: {
-          textBetween: jest.fn(() => 'a'),
-          resolve: jest.fn(),
-        },
-      },
-    });
+    const view = createView();
 
     const handled = ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, { key: 'Enter' });
     expect(handled).toBe(false);
@@ -304,6 +376,15 @@ describe('ZeroWidthSpaceHandlingPlugin', () => {
 });
 
 describe('MathNodeView', () => {
+  const createEditorElement = (rect = { top: 0, left: 0, width: 600, height: 400 }) => {
+    const element = document.createElement('div');
+    Object.defineProperty(element, 'getBoundingClientRect', {
+      value: jest.fn(() => rect),
+      configurable: true,
+    });
+    return element;
+  };
+
   const createMockEditor = () => ({
     state: {
       selection: {
@@ -320,6 +401,9 @@ describe('MathNodeView', () => {
       coordsAtPos: jest.fn(() => ({ top: 100, left: 50 })),
       dispatch: jest.fn(),
     },
+    options: {
+      element: createEditorElement(),
+    },
     commands: {
       focus: jest.fn(),
     },
@@ -335,13 +419,6 @@ describe('MathNodeView', () => {
 
   let defaultProps;
 
-  beforeAll(() => {
-    Object.defineProperty(document.body, 'getBoundingClientRect', {
-      value: jest.fn(() => ({ top: 0, left: 0 })),
-      configurable: true,
-    });
-  });
-
   beforeEach(() => {
     jest.clearAllMocks();
     mockCreatePortal.mockImplementation((node) => node);
@@ -390,30 +467,29 @@ describe('MathNodeView', () => {
   });
 
   describe('toolbar positioning', () => {
-    it('uses a fixed top offset and horizontal position from coordsAtPos', async () => {
+    it('positions relative to the editor element using coordsAtPos', async () => {
       const { container } = render(<MathNodeView {...defaultProps} selected={true} />);
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        expect(toolbar.style.top).toBe('40px');
+        expect(toolbar.style.top).toBe('140px');
         expect(toolbar.style.left).toBe('50px');
       });
     });
 
-    it('keeps the fixed top offset when the editor container is scrolled', async () => {
-      const containerEl = document.createElement('div');
-      containerEl.getBoundingClientRect = jest.fn(() => ({ top: -200, left: 0, width: 600, height: 400 }));
+    it('accounts for editor scroll offset when calculating toolbar position', async () => {
+      const editorElement = createEditorElement({ top: -200, left: 0, width: 600, height: 400 });
 
       const editor = {
         ...defaultProps.editor,
-        _tiptapContainerEl: containerEl,
+        options: { element: editorElement },
       };
 
       const { container } = render(<MathNodeView {...defaultProps} editor={editor} selected={true} />);
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        expect(toolbar.style.top).toBe('40px');
+        expect(toolbar.style.top).toBe('340px');
         expect(toolbar.style.left).toBe('50px');
       });
     });
@@ -427,7 +503,7 @@ describe('MathNodeView', () => {
       });
     });
 
-    it('updates horizontal position from coordsAtPos when selection changes', async () => {
+    it('updates position from coordsAtPos when selection changes', async () => {
       const editor = {
         ...defaultProps.editor,
         view: {
@@ -441,7 +517,7 @@ describe('MathNodeView', () => {
       await waitFor(() => {
         const toolbar = container.querySelector('[data-toolbar-for]');
         expect(toolbar).toBeInTheDocument();
-        expect(toolbar.style.top).toBe('40px');
+        expect(toolbar.style.top).toBe('240px');
         expect(toolbar.style.left).toBe('150px');
       });
     });
@@ -515,18 +591,35 @@ describe('MathNodeView', () => {
     });
   });
 
-  it('unsets editor._toolbarOpened when toolbar is closed', async () => {
+  it('unsets editor._toolbarOpened when toolbar is closed and node is not selected', async () => {
+    const { getByTestId } = render(<MathNodeView {...defaultProps} selected={false} />);
+
+    fireEvent.click(getByTestId('math-preview'));
+
+    await waitFor(() => {
+      expect(getByTestId('math-toolbar')).toBeInTheDocument();
+      expect(defaultProps.editor._toolbarOpened).toBe(true);
+    });
+
+    fireEvent.click(getByTestId('done-button'));
+
+    await waitFor(() => {
+      expect(defaultProps.editor._toolbarOpened).toBe(false);
+    });
+  });
+
+  it('keeps editor._toolbarOpened true while the math node remains selected', async () => {
     const { getByTestId } = render(<MathNodeView {...defaultProps} selected={true} />);
 
     await waitFor(() => {
       expect(getByTestId('done-button')).toBeInTheDocument();
+      expect(defaultProps.editor._toolbarOpened).toBe(true);
     });
 
-    const doneButton = getByTestId('done-button');
-    fireEvent.click(doneButton);
+    fireEvent.click(getByTestId('done-button'));
 
     await waitFor(() => {
-      expect(defaultProps.editor._toolbarOpened).toBe(false);
+      expect(defaultProps.editor._toolbarOpened).toBe(true);
     });
   });
 
@@ -551,7 +644,7 @@ describe('MathNodeView', () => {
       expect(editor.state.tr.setSelection).toHaveBeenCalled();
       expect(editor.view.dispatch).toHaveBeenCalledWith(editor.state.tr);
       expect(editor.commands.focus).toHaveBeenCalled();
-      expect(editor._toolbarOpened).toBe(false);
+      expect(editor._toolbarOpened).toBe(true);
     });
   });
 
@@ -608,11 +701,13 @@ describe('MathNodeView', () => {
 
       const { getAllByTestId, queryAllByTestId } = render(
         <>
-          <MathNodeView {...defaultProps} editor={editorA} updateAttributes={updateAttributes} selected={true} />
+          <MathNodeView {...defaultProps} editor={editorA} updateAttributes={updateAttributes} selected={false} />
           <MathNodeView {...defaultProps} editor={editorB} node={{ attrs: { latex: 'y^2' } }} selected={false} />
         </>,
       );
 
+      fireEvent.click(getAllByTestId('math-preview')[0]);
+
       await waitFor(() => {
         expect(queryAllByTestId('math-toolbar')).toHaveLength(1);
       });

package/src/extensions/math.js

@@ -45,6 +45,26 @@ export const EnsureTextAfterMathPlugin = (mathNodeName) =>
     },
   });
 
+const nodeBeforeZeroWidthSpace = (doc, from) => {
+  let i;
+
+  // finding if previous to the cursor there's a zero-width space
+  // and a non-text element, and deleting everything until the space
+  for (i = from; i > 0; i--) {
+    const currentDoc = doc.nodeAt(i);
+
+    if (currentDoc?.type?.name === 'text' && currentDoc.textContent !== '\u200b') {
+      return -1;
+    }
+
+    if (currentDoc && currentDoc?.type?.name !== 'text') {
+      break;
+    }
+  }
+
+  return i;
+};
+
 export const ZeroWidthSpaceHandlingPlugin = new Plugin({
   key: new PluginKey('zeroWidthSpaceHandling'),
   props: {
@@ -54,35 +74,38 @@ export const ZeroWidthSpaceHandlingPlugin = new Plugin({
       const { from, empty } = selection;
 
       if (empty && event.key === 'Backspace' && from > 0) {
-        const prevChar = doc.textBetween(from - 1, from, '\uFFFC', '\uFFFC');
-        if (prevChar === '\u200b') {
-          const tr = state.tr.delete(from - 2, from);
-          dispatch(tr);
-          return true; // handled
+        const start = nodeBeforeZeroWidthSpace(doc, from);
+
+        if (start === -1) {
+          return false;
         }
+
+        const tr = state.tr.delete(start, from);
+        dispatch(tr);
+        return true; // handled
       }
 
       if (empty && event.key === 'ArrowLeft' && from > 0) {
-        const prevChar = doc.textBetween(from - 1, from, '\uFFFC', '\uFFFC');
-        // If the previous character is the zero-width space...
-        if (prevChar === '\u200b') {
-          const posBefore = from - 1;
-          const resolved = state.doc.resolve(posBefore - 1); // look just before the zwsp
-          const maybeNode = resolved.nodeAfter || resolved.nodeBefore;
-
-          // Check if there's an inline selectable node (e.g., your math node)
-          if (maybeNode) {
-            const nodePos = posBefore - maybeNode.nodeSize;
-            const nodeResolved = state.doc.resolve(nodePos);
-            const tr = state.tr.setSelection(NodeSelection.create(state.doc, nodeResolved.pos));
-            dispatch(tr);
-            return true;
-          } else {
-            // Just move the text cursor before the zwsp
-            const tr = state.tr.setSelection(TextSelection.create(state.doc, from - 2));
-            dispatch(tr);
-            return true;
-          }
+        const start = nodeBeforeZeroWidthSpace(doc, from);
+
+        if (start === -1) {
+          return false;
+        }
+
+        const resolved = state.doc.resolve(start);
+        const maybeNode = resolved.nodeAfter || resolved.nodeBefore;
+
+        // Check if there's an inline selectable node (e.g., your math node)
+        if (maybeNode) {
+          const nodeResolved = state.doc.resolve(start);
+          const tr = state.tr.setSelection(NodeSelection.create(state.doc, nodeResolved.pos));
+          dispatch(tr);
+          return true;
+        } else {
+          // Just move the text cursor before the zwsp
+          const tr = state.tr.setSelection(TextSelection.create(state.doc, from - 2));
+          dispatch(tr);
+          return true;
         }
       }
 
@@ -152,14 +175,9 @@ export const MathNode = Node.create({
 
           dispatch(tr);
 
+          setToolbarOpened(editor, true);
           return true;
         },
-      // insertMath: (latex = '') => ({ commands }) => {
-      //   return commands.insertContent({
-      //     type: this.name,
-      //     attrs: { latex },
-      //   });
-      // },
     };
   },
 
@@ -221,16 +239,19 @@ export const MathNodeView = (props) => {
   }, [selected]);
 
   useEffect(() => {
-    setToolbarOpened(editor, showToolbar);
-  }, [editor, showToolbar]);
+    setToolbarOpened(editor, selected || showToolbar);
+  }, [editor, showToolbar, selected]);
 
   useEffect(() => {
     // Calculate position relative to selection
     const { from } = editor.state.selection;
     const start = editor.view.coordsAtPos(from);
+    const editorDOM = editor.options.element;
+    const editorRect = editorDOM.getBoundingClientRect();
+
     setPosition({
-      top: 40, // shift above
-      left: start.left,
+      top: start.top - editorRect.top + 40, // shift above
+      left: start.left - editorRect.left,
     });
 
     const handleClickOutside = (event) => {