@pie-lib/editable-html-tip-tap 2.2.0-beta.7 → 2.2.0-beta.8

package/lib/components/__tests__/InlineDropdown.test.js

@@ -1,839 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _mathRendering = require("@pie-lib/math-rendering");
-var _InlineDropdown = _interopRequireDefault(require("../respArea/InlineDropdown"));
-var _excluded = ["children"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-jest.mock('@pie-lib/math-rendering', function () {
-  return {
-    renderMath: jest.fn()
-  };
-});
-jest.mock('@tiptap/react', function () {
-  return {
-    NodeViewWrapper: function NodeViewWrapper(_ref) {
-      var children = _ref.children,
-        props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
-        "data-testid": "node-view-wrapper"
-      }, props), children);
-    }
-  };
-});
-var mockCreatePortal = jest.fn(function (node) {
-  return node;
-});
-jest.mock('react-dom', function () {
-  return _objectSpread(_objectSpread({}, jest.requireActual('react-dom')), {}, {
-    createPortal: function createPortal() {
-      return mockCreatePortal.apply(void 0, arguments);
-    }
-  });
-});
-describe('InlineDropdown', function () {
-  var buildMockEditor = function buildMockEditor() {
-    var overrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var mockNodeAt = jest.fn(function (pos) {
-      return pos === 5 ? {
-        nodeSize: 1
-      } : null;
-    });
-    var mockDoc = {
-      descendants: jest.fn(),
-      nodeAt: mockNodeAt
-    };
-    var mockTr = {
-      "delete": jest.fn(),
-      doc: {
-        nodeAt: mockNodeAt
-      },
-      setSelection: jest.fn(),
-      setMeta: jest.fn(function setMeta() {
-        return mockTr;
-      })
-    };
-    return _objectSpread({
-      state: {
-        selection: {
-          from: 0,
-          to: 1
-        },
-        tr: mockTr,
-        doc: mockDoc
-      },
-      view: {
-        coordsAtPos: jest.fn(function () {
-          return {
-            top: 100,
-            left: 50
-          };
-        }),
-        dispatch: jest.fn()
-      },
-      commands: {
-        focus: jest.fn()
-      },
-      _tiptapContainerEl: document.createElement('div'),
-      _toolbarOpened: false
-    }, overrides);
-  };
-  var mockEditor;
-  var mockNode = {
-    attrs: {
-      index: '0',
-      value: 'Selected Option',
-      error: false
-    },
-    nodeSize: 1
-  };
-  var mockOptions = {
-    respAreaToolbar: jest.fn(function () {
-      return function () {
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          "data-testid": "inline-dropdown-toolbar"
-        }, "Toolbar");
-      };
-    })
-  };
-  var defaultProps = {
-    editor: mockEditor,
-    node: mockNode,
-    getPos: function getPos() {
-      return 5;
-    },
-    options: mockOptions,
-    selected: false
-  };
-  beforeEach(function () {
-    jest.clearAllMocks();
-    mockCreatePortal.mockClear();
-    mockEditor = buildMockEditor();
-    defaultProps.editor = mockEditor;
-    Object.defineProperty(document.body, 'getBoundingClientRect', {
-      value: jest.fn(function () {
-        return {
-          top: 0,
-          left: 0
-        };
-      }),
-      configurable: true
-    });
-  });
-  it('renders without crashing', function () {
-    var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render.container;
-    expect(container).toBeInTheDocument();
-  });
-  it('renders NodeViewWrapper', function () {
-    var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      getByTestId = _render2.getByTestId;
-    expect(getByTestId('node-view-wrapper')).toBeInTheDocument();
-  });
-  it('displays selected value', function () {
-    var _render3 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render3.container;
-    var valueDiv = container.querySelector('div[style*="border"]');
-    expect(valueDiv).toBeInTheDocument();
-  });
-  it('renders math inside the value control on mount', function () {
-    var _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render4.container;
-    var valueDiv = container.querySelector('div[style*="border"]');
-    expect(_mathRendering.renderMath).toHaveBeenCalledWith(valueDiv);
-  });
-  it('re-renders math when the value changes', function () {
-    var updatedNode = _objectSpread(_objectSpread({}, mockNode), {}, {
-      attrs: _objectSpread(_objectSpread({}, mockNode.attrs), {}, {
-        value: '<span>Updated math</span>'
-      })
-    });
-    var _render5 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render5.container,
-      rerender = _render5.rerender;
-    _mathRendering.renderMath.mockClear();
-    rerender(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-      node: updatedNode
-    })));
-    var valueDiv = container.querySelector('div[style*="border"]');
-    expect(_mathRendering.renderMath).toHaveBeenCalledWith(valueDiv);
-  });
-  it('uses 2px horizontal margin on the value control and no horizontal margin on the wrapper', function () {
-    var _render6 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render6.container,
-      getByTestId = _render6.getByTestId;
-    var valueDiv = container.querySelector('div[style*="border"]');
-    expect(valueDiv).toHaveStyle({
-      margin: '0 2px'
-    });
-    var wrapper = getByTestId('node-view-wrapper');
-    expect(wrapper.getAttribute('style') || '').not.toMatch(/margin/);
-  });
-  it('renders chevron icon', function () {
-    var _render7 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render7.container;
-    var chevron = container.querySelector('svg');
-    expect(chevron).toBeInTheDocument();
-  });
-  it('shows toolbar when selected and only this node is selected', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var _render8, queryByTestId;
-    return _regenerator["default"].wrap(function (_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _render8 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            selected: true
-          }))), queryByTestId = _render8.queryByTestId;
-          _context.next = 1;
-          return (0, _react2.waitFor)(function () {
-            // Toolbar is shown via portal
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })));
-  it('does not show toolbar when not selected', function () {
-    var _render9 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-        selected: false
-      }))),
-      queryByTestId = _render9.queryByTestId;
-    expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
-  });
-  it('shows toolbar on click', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var _render0, container, queryByTestId, dropdown;
-    return _regenerator["default"].wrap(function (_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _render0 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)), container = _render0.container, queryByTestId = _render0.queryByTestId;
-          dropdown = container.querySelector('div[style*="border"]');
-          if (!dropdown) {
-            _context2.next = 2;
-            break;
-          }
-          _react2.fireEvent.click(dropdown);
-          _context2.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-          _context2.next = 3;
-          break;
-        case 2:
-          // If dropdown is not found, just verify the component rendered
-          expect(container).toBeInTheDocument();
-        case 3:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })));
-  it('has correct minimum dimensions', function () {
-    var _render1 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render1.container;
-    var wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({
-      height: '50px'
-    });
-  });
-  it('has inline-flex display', function () {
-    var _render10 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render10.container;
-    var wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({
-      display: 'inline-flex'
-    });
-  });
-  it('has cursor pointer style', function () {
-    var _render11 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render11.container;
-    var wrapper = container.querySelector('[data-testid="node-view-wrapper"]');
-    expect(wrapper).toHaveStyle({
-      cursor: 'pointer'
-    });
-  });
-  it('renders with empty value as nbsp', function () {
-    var emptyNode = _objectSpread(_objectSpread({}, mockNode), {}, {
-      attrs: _objectSpread(_objectSpread({}, mockNode.attrs), {}, {
-        value: ''
-      })
-    });
-    var _render12 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-        node: emptyNode
-      }))),
-      container = _render12.container;
-    expect(container).toBeInTheDocument();
-  });
-  it('calls respAreaToolbar with correct params', function () {
-    (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps));
-    expect(mockOptions.respAreaToolbar).toHaveBeenCalledWith([mockNode, 5], mockEditor, expect.any(Function));
-  });
-  it('closes toolbar on outside click', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-    var _render13, container, queryByTestId;
-    return _regenerator["default"].wrap(function (_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _render13 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            selected: true
-          }))), container = _render13.container, queryByTestId = _render13.queryByTestId;
-          _context3.next = 1;
-          return (0, _react2.waitFor)(function () {
-            _react2.fireEvent.mouseDown(document.body);
-          });
-        case 1:
-          _context3.next = 2;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
-          });
-        case 2:
-        case "end":
-          return _context3.stop();
-      }
-    }, _callee3);
-  })));
-  it('calls close callback when toolbar closes on outside click', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var onInlineDropdownToolbarClose, options, _render14, queryByTestId;
-    return _regenerator["default"].wrap(function (_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          onInlineDropdownToolbarClose = jest.fn();
-          options = _objectSpread(_objectSpread({}, mockOptions), {}, {
-            onInlineDropdownToolbarClose: onInlineDropdownToolbarClose
-          });
-          _render14 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            options: options,
-            selected: true
-          }))), queryByTestId = _render14.queryByTestId;
-          _context4.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-          _react2.fireEvent.mouseDown(document.body);
-          _context4.next = 2;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).not.toBeInTheDocument();
-          });
-        case 2:
-          expect(onInlineDropdownToolbarClose).toHaveBeenCalledWith(mockEditor);
-        case 3:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  })));
-  it('uses the current node when closing on outside click after the node prop changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-    var onToolbarCloseRequest, options, updatedNode, _render15, queryByTestId, rerender;
-    return _regenerator["default"].wrap(function (_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
-        case 0:
-          onToolbarCloseRequest = jest.fn(function (_tuple, _editor, onConfirm) {
-            return onConfirm();
-          });
-          options = _objectSpread(_objectSpread({}, mockOptions), {}, {
-            onToolbarCloseRequest: onToolbarCloseRequest
-          });
-          updatedNode = {
-            attrs: {
-              index: '1',
-              value: 'Updated Option',
-              error: false
-            },
-            nodeSize: 1
-          };
-          _render15 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            options: options,
-            selected: true
-          }))), queryByTestId = _render15.queryByTestId, rerender = _render15.rerender;
-          _context5.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-          rerender(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            options: options,
-            node: updatedNode,
-            selected: true
-          })));
-          _react2.fireEvent.mouseDown(document.body);
-          _context5.next = 2;
-          return (0, _react2.waitFor)(function () {
-            expect(onToolbarCloseRequest).toHaveBeenCalledWith([updatedNode, 5], expect.anything(), expect.any(Function), expect.any(Function));
-          });
-        case 2:
-        case "end":
-          return _context5.stop();
-      }
-    }, _callee5);
-  })));
-  it('respects hold state for the current node after the node prop changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-    var updatedNode, _render16, queryByTestId, rerender;
-    return _regenerator["default"].wrap(function (_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
-        case 0:
-          updatedNode = {
-            attrs: {
-              index: '1',
-              value: 'Updated Option',
-              error: false
-            },
-            nodeSize: 1
-          };
-          mockEditor._holdInlineDropdownToolbarIndex = '1';
-          _render16 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            selected: true
-          }))), queryByTestId = _render16.queryByTestId, rerender = _render16.rerender;
-          _context6.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-          rerender(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            node: updatedNode,
-            selected: true
-          })));
-          _react2.fireEvent.mouseDown(document.body);
-          _context6.next = 2;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 2:
-        case "end":
-          return _context6.stop();
-      }
-    }, _callee6);
-  })));
-  it('rebinds the outside-click listener when the node prop changes while the toolbar is open', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
-    var addSpy, removeSpy, updatedNode, _render17, rerender, removeCallsBeforeRerender;
-    return _regenerator["default"].wrap(function (_context7) {
-      while (1) switch (_context7.prev = _context7.next) {
-        case 0:
-          addSpy = jest.spyOn(document, 'addEventListener');
-          removeSpy = jest.spyOn(document, 'removeEventListener');
-          updatedNode = _objectSpread(_objectSpread({}, mockNode), {}, {
-            attrs: _objectSpread(_objectSpread({}, mockNode.attrs), {}, {
-              value: 'Updated Option'
-            })
-          });
-          _render17 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            selected: true
-          }))), rerender = _render17.rerender;
-          _context7.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
-          });
-        case 1:
-          removeCallsBeforeRerender = removeSpy.mock.calls.filter(function (_ref9) {
-            var _ref0 = (0, _slicedToArray2["default"])(_ref9, 1),
-              type = _ref0[0];
-            return type === 'mousedown';
-          }).length;
-          rerender(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            node: updatedNode,
-            selected: true
-          })));
-          _context7.next = 2;
-          return (0, _react2.waitFor)(function () {
-            var removeCallsAfterRerender = removeSpy.mock.calls.filter(function (_ref1) {
-              var _ref10 = (0, _slicedToArray2["default"])(_ref1, 1),
-                type = _ref10[0];
-              return type === 'mousedown';
-            }).length;
-            expect(removeCallsAfterRerender).toBeGreaterThan(removeCallsBeforeRerender);
-            expect(addSpy).toHaveBeenCalledWith('mousedown', expect.any(Function));
-          });
-        case 2:
-          addSpy.mockRestore();
-          removeSpy.mockRestore();
-        case 3:
-        case "end":
-          return _context7.stop();
-      }
-    }, _callee7);
-  })));
-  it('has correct border styling', function () {
-    var _render18 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render18.container;
-    var dropdownDiv = container.querySelector('div[style*="border"]');
-    expect(dropdownDiv).toHaveStyle({
-      border: '1px solid #C0C3CF'
-    });
-  });
-  it('has correct min width', function () {
-    var _render19 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render19.container;
-    var dropdownDiv = container.querySelector('div[style*="border"]');
-    expect(dropdownDiv).toHaveStyle({
-      minWidth: '178px'
-    });
-  });
-  it('positions chevron correctly', function () {
-    var _render20 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render20.container;
-    var chevron = container.querySelector('svg');
-    // Chevron styling is applied inline, just verify it rendered
-    if (chevron) {
-      expect(chevron).toBeInTheDocument();
-    } else {
-      expect(container).toBeInTheDocument();
-    }
-  });
-  it('has ellipsis for overflow text', function () {
-    var _render21 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], defaultProps)),
-      container = _render21.container;
-    var textContainer = container.querySelector('div[style*="overflow"]');
-    expect(textContainer).toHaveStyle({
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap'
-    });
-  });
-  it('portals toolbar into editor container when _tiptapContainerEl is set', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
-    var containerEl, editor;
-    return _regenerator["default"].wrap(function (_context8) {
-      while (1) switch (_context8.prev = _context8.next) {
-        case 0:
-          containerEl = document.createElement('div');
-          editor = buildMockEditor({
-            _tiptapContainerEl: containerEl
-          });
-          (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            editor: editor,
-            selected: true
-          })));
-          _context8.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(mockCreatePortal).toHaveBeenCalled();
-          });
-        case 1:
-          expect(mockCreatePortal.mock.calls[0][1]).toBe(containerEl);
-        case 2:
-        case "end":
-          return _context8.stop();
-      }
-    }, _callee8);
-  })));
-  it('portals toolbar into document.body when _tiptapContainerEl is missing', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9() {
-    var editor;
-    return _regenerator["default"].wrap(function (_context9) {
-      while (1) switch (_context9.prev = _context9.next) {
-        case 0:
-          editor = buildMockEditor({
-            _tiptapContainerEl: undefined
-          });
-          (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            editor: editor,
-            selected: true
-          })));
-          _context9.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(mockCreatePortal).toHaveBeenCalled();
-          });
-        case 1:
-          expect(mockCreatePortal.mock.calls[0][1]).toBe(document.body);
-        case 2:
-        case "end":
-          return _context9.stop();
-      }
-    }, _callee9);
-  })));
-  it('passes editorCallback to InlineDropdownToolbar', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee0() {
-    var mockToolbarComponent, mockOptionsWithCallback, _render22, queryByTestId;
-    return _regenerator["default"].wrap(function (_context0) {
-      while (1) switch (_context0.prev = _context0.next) {
-        case 0:
-          mockToolbarComponent = jest.fn(function (_ref14) {
-            var editorCallback = _ref14.editorCallback;
-            editorCallback === null || editorCallback === void 0 || editorCallback({
-              instanceId: 'test-instance'
-            });
-            return /*#__PURE__*/_react["default"].createElement("div", {
-              "data-testid": "inline-dropdown-toolbar"
-            }, "Toolbar");
-          });
-          mockOptionsWithCallback = {
-            respAreaToolbar: jest.fn(function () {
-              return mockToolbarComponent;
-            })
-          };
-          _render22 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            options: mockOptionsWithCallback,
-            selected: true
-          }))), queryByTestId = _render22.queryByTestId;
-          _context0.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-        case "end":
-          return _context0.stop();
-      }
-    }, _callee0);
-  })));
-  it('stores toolbar editor instance in ref when editorCallback is called', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee1() {
-    var capturedCallback, mockToolbarComponent, mockOptionsWithCallback, _render23, queryByTestId;
-    return _regenerator["default"].wrap(function (_context1) {
-      while (1) switch (_context1.prev = _context1.next) {
-        case 0:
-          mockToolbarComponent = function mockToolbarComponent(_ref16) {
-            var editorCallback = _ref16.editorCallback;
-            capturedCallback = editorCallback;
-            return /*#__PURE__*/_react["default"].createElement("div", {
-              "data-testid": "inline-dropdown-toolbar"
-            }, "Toolbar");
-          };
-          mockOptionsWithCallback = {
-            respAreaToolbar: jest.fn(function () {
-              return mockToolbarComponent;
-            })
-          };
-          _render23 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            options: mockOptionsWithCallback,
-            selected: true
-          }))), queryByTestId = _render23.queryByTestId;
-          _context1.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-          // Verify callback exists
-          expect(capturedCallback).toBeDefined();
-        case 2:
-        case "end":
-          return _context1.stop();
-      }
-    }, _callee1);
-  })));
-  it('handles click outside logic with data-toolbar-for attribute', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee10() {
-    var editorWithInstanceId, capturedCallback, mockToolbarComponent, mockOptionsWithCallback, _render24, container, queryByTestId, otherToolbar;
-    return _regenerator["default"].wrap(function (_context10) {
-      while (1) switch (_context10.prev = _context10.next) {
-        case 0:
-          editorWithInstanceId = _objectSpread(_objectSpread({}, mockEditor), {}, {
-            instanceId: 'editor-123',
-            _toolbarOpened: false
-          }); // Mock the toolbar callback to set the toolbar editor instance
-          mockToolbarComponent = function mockToolbarComponent(_ref18) {
-            var editorCallback = _ref18.editorCallback;
-            _react["default"].useEffect(function () {
-              capturedCallback = editorCallback;
-              if (editorCallback) {
-                editorCallback({
-                  instanceId: 'editor-123'
-                });
-              }
-            }, [editorCallback]);
-            return /*#__PURE__*/_react["default"].createElement("div", {
-              "data-testid": "inline-dropdown-toolbar"
-            }, "Toolbar");
-          };
-          mockOptionsWithCallback = {
-            respAreaToolbar: jest.fn(function () {
-              return mockToolbarComponent;
-            })
-          };
-          _render24 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            editor: editorWithInstanceId,
-            options: mockOptionsWithCallback,
-            selected: true
-          }))), container = _render24.container, queryByTestId = _render24.queryByTestId;
-          _context10.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-          // Create an element with data-toolbar-for attribute
-          otherToolbar = document.createElement('div');
-          otherToolbar.setAttribute('data-toolbar-for', 'editor-456');
-          document.body.appendChild(otherToolbar);
-          _context10.next = 2;
-          return (0, _react2.waitFor)(function () {
-            _react2.fireEvent.mouseDown(otherToolbar);
-          });
-        case 2:
-          // Cleanup
-          document.body.removeChild(otherToolbar);
-          expect(container).toBeInTheDocument();
-        case 3:
-        case "end":
-          return _context10.stop();
-      }
-    }, _callee10);
-  })));
-  it('does not close when clicking inside same editor toolbar', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee11() {
-    var editorWithInstanceId, toolbarEditorInstance, mockToolbarComponent, mockOptionsWithCallback;
-    return _regenerator["default"].wrap(function (_context11) {
-      while (1) switch (_context11.prev = _context11.next) {
-        case 0:
-          editorWithInstanceId = _objectSpread(_objectSpread({}, mockEditor), {}, {
-            instanceId: 'editor-123',
-            _toolbarOpened: false
-          });
-          mockToolbarComponent = function mockToolbarComponent(_ref20) {
-            var editorCallback = _ref20.editorCallback;
-            _react["default"].useEffect(function () {
-              if (editorCallback) {
-                editorCallback({
-                  instanceId: 'editor-123'
-                });
-                toolbarEditorInstance = {
-                  instanceId: 'editor-123'
-                };
-              }
-            }, [editorCallback]);
-            return /*#__PURE__*/_react["default"].createElement("div", {
-              "data-testid": "inline-dropdown-toolbar"
-            }, "Toolbar");
-          };
-          mockOptionsWithCallback = {
-            respAreaToolbar: jest.fn(function () {
-              return mockToolbarComponent;
-            })
-          };
-          (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            editor: editorWithInstanceId,
-            options: mockOptionsWithCallback,
-            selected: true
-          })));
-          _context11.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(mockOptionsWithCallback.respAreaToolbar).toHaveBeenCalled();
-          });
-        case 1:
-        case "end":
-          return _context11.stop();
-      }
-    }, _callee11);
-  })));
-  it('checks editor._toolbarOpened in click outside handler', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee12() {
-    var editorWithToolbarOpened, _render25, queryByTestId;
-    return _regenerator["default"].wrap(function (_context12) {
-      while (1) switch (_context12.prev = _context12.next) {
-        case 0:
-          editorWithToolbarOpened = buildMockEditor({
-            _toolbarOpened: true
-          });
-          _render25 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            editor: editorWithToolbarOpened,
-            selected: true
-          }))), queryByTestId = _render25.queryByTestId;
-          _context12.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-          // When _toolbarOpened is true, clicking outside should not close
-          _react2.fireEvent.mouseDown(document.body);
-
-          // Toolbar should still be visible
-          expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-        case 2:
-        case "end":
-          return _context12.stop();
-      }
-    }, _callee12);
-  })));
-  it('does not close toolbar when clicking the page scrollbar (documentElement)', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee13() {
-    var _render26, queryByTestId;
-    return _regenerator["default"].wrap(function (_context13) {
-      while (1) switch (_context13.prev = _context13.next) {
-        case 0:
-          _render26 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            selected: true
-          }))), queryByTestId = _render26.queryByTestId;
-          _context13.next = 1;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 1:
-          _react2.fireEvent.mouseDown(document.documentElement);
-          _context13.next = 2;
-          return (0, _react2.waitFor)(function () {
-            expect(queryByTestId('inline-dropdown-toolbar')).toBeInTheDocument();
-          });
-        case 2:
-        case "end":
-          return _context13.stop();
-      }
-    }, _callee13);
-  })));
-  it('renders delete control on portaled custom toolbar when container el is set', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee14() {
-    var _render27, findByLabelText, _t;
-    return _regenerator["default"].wrap(function (_context14) {
-      while (1) switch (_context14.prev = _context14.next) {
-        case 0:
-          _render27 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            selected: true
-          }))), findByLabelText = _render27.findByLabelText;
-          _t = expect;
-          _context14.next = 1;
-          return findByLabelText('Delete');
-        case 1:
-          _t(_context14.sent).toBeInTheDocument();
-        case 2:
-        case "end":
-          return _context14.stop();
-      }
-    }, _callee14);
-  })));
-  it('does not render portaled delete control when _tiptapContainerEl is missing', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee15() {
-    var editor, _render28, queryByLabelText, findByTestId, _t2;
-    return _regenerator["default"].wrap(function (_context15) {
-      while (1) switch (_context15.prev = _context15.next) {
-        case 0:
-          editor = buildMockEditor({
-            _tiptapContainerEl: undefined
-          });
-          _render28 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            editor: editor,
-            selected: true
-          }))), queryByLabelText = _render28.queryByLabelText, findByTestId = _render28.findByTestId;
-          _t2 = expect;
-          _context15.next = 1;
-          return findByTestId('inline-dropdown-toolbar');
-        case 1:
-          _t2(_context15.sent).toBeInTheDocument();
-          expect(queryByLabelText('Delete')).not.toBeInTheDocument();
-        case 2:
-        case "end":
-          return _context15.stop();
-      }
-    }, _callee15);
-  })));
-  it('delete clears toolbar flag, removes node range, dispatches, and focuses', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee16() {
-    var _render29, findByLabelText, _t3;
-    return _regenerator["default"].wrap(function (_context16) {
-      while (1) switch (_context16.prev = _context16.next) {
-        case 0:
-          mockEditor._toolbarOpened = true;
-          _render29 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_InlineDropdown["default"], (0, _extends2["default"])({}, defaultProps, {
-            selected: true
-          }))), findByLabelText = _render29.findByLabelText;
-          _t3 = _react2.fireEvent;
-          _context16.next = 1;
-          return findByLabelText('Delete');
-        case 1:
-          _t3.mouseDown.call(_t3, _context16.sent);
-          expect(mockEditor.state.tr["delete"]).toHaveBeenCalledWith(5, 6);
-          expect(mockEditor.view.dispatch).toHaveBeenCalledTimes(2);
-          expect(mockEditor.view.dispatch).toHaveBeenNthCalledWith(1, mockEditor.state.tr);
-          expect(mockEditor.view.dispatch).toHaveBeenNthCalledWith(2, mockEditor.state.tr);
-          expect(mockEditor._toolbarOpened).toBe(false);
-          expect(mockEditor.commands.focus).toHaveBeenCalled();
-        case 2:
-        case "end":
-          return _context16.stop();
-      }
-    }, _callee16);
-  })));
-});
-//# sourceMappingURL=InlineDropdown.test.js.map