@pie-lib/editable-html-tip-tap 2.1.11 → 2.2.0-beta

package/lib/__tests__/EditableHtml.test.js

@@ -0,0 +1,831 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+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 _react3 = require("@tiptap/react");
+var _EditableHtml = require("../components/EditableHtml");
+var _responseArea = require("../extensions/responseArea");
+var _excluded = ["editor"];
+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; }
+// Mock TipTap dependencies
+jest.mock('@tiptap/react', function () {
+  return {
+    EditorContent: function EditorContent(_ref) {
+      var editor = _ref.editor,
+        props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+        "data-testid": "editor-content"
+      }, props));
+    },
+    useEditor: jest.fn(function (config) {
+      var mockEditor = {
+        getHTML: jest.fn(function () {
+          return '<p>test content</p>';
+        }),
+        setEditable: jest.fn(),
+        commands: {
+          setContent: jest.fn()
+        },
+        isActive: jest.fn(function () {
+          return false;
+        }),
+        isFocused: false
+      };
+      return mockEditor;
+    }),
+    useEditorState: jest.fn(function () {
+      return {
+        isFocused: false
+      };
+    })
+  };
+});
+jest.mock('@tiptap/starter-kit', function () {
+  return {
+    __esModule: true,
+    "default": {
+      configure: jest.fn(function () {
+        return {};
+      })
+    }
+  };
+});
+jest.mock('@tiptap/extension-text-style', function () {
+  return {
+    TextStyleKit: {}
+  };
+});
+jest.mock('@tiptap/extension-character-count', function () {
+  return {
+    CharacterCount: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    }
+  };
+});
+jest.mock('@tiptap/extension-superscript', function () {
+  return {
+    __esModule: true,
+    "default": {}
+  };
+});
+jest.mock('@tiptap/extension-subscript', function () {
+  return {
+    __esModule: true,
+    "default": {}
+  };
+});
+jest.mock('@tiptap/extension-text-align', function () {
+  return {
+    __esModule: true,
+    "default": {
+      configure: jest.fn(function () {
+        return {};
+      })
+    }
+  };
+});
+jest.mock('@tiptap/extension-image', function () {
+  return {
+    __esModule: true,
+    "default": {}
+  };
+});
+jest.mock('@tiptap/extension-table', function () {
+  return {
+    __esModule: true,
+    "default": {}
+  };
+});
+jest.mock('@tiptap/extension-table-row', function () {
+  return {
+    TableRow: {}
+  };
+});
+jest.mock('../extensions/extended-table-cell', function () {
+  return {
+    ExtendedTableCell: {},
+    ExtendedTableHeader: {}
+  };
+});
+jest.mock('../extensions/extended-table', function () {
+  return {
+    __esModule: true,
+    "default": {}
+  };
+});
+jest.mock('../extensions/ensure-empty-root-div', function () {
+  return {
+    EnsureEmptyRootIsDiv: {}
+  };
+});
+jest.mock('../extensions/extended-list-item', function () {
+  return {
+    ExtendedListItem: {}
+  };
+});
+jest.mock('../extensions/ensure-list-item-content-is-div', function () {
+  return {
+    EnsureListItemContentIsDiv: {}
+  };
+});
+jest.mock('../extensions/responseArea', function () {
+  return {
+    ExplicitConstructedResponseNode: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    },
+    DragInTheBlankNode: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    },
+    InlineDropdownNode: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    },
+    MathTemplatedNode: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    },
+    ResponseAreaExtension: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    }
+  };
+});
+jest.mock('../extensions/math', function () {
+  return {
+    MathNode: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    }
+  };
+});
+jest.mock('../extensions/image', function () {
+  return {
+    ImageUploadNode: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    }
+  };
+});
+jest.mock('../extensions/media', function () {
+  return {
+    Media: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    }
+  };
+});
+jest.mock('../extensions/css', function () {
+  return {
+    CSSMark: {
+      configure: jest.fn(function () {
+        return {};
+      })
+    }
+  };
+});
+jest.mock('../components/TiptapContainer', function () {
+  return {
+    __esModule: true,
+    "default": function _default(_ref2) {
+      var children = _ref2.children;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        "data-testid": "editor-container"
+      }, children);
+    }
+  };
+});
+jest.mock('../extensions', function () {
+  return _objectSpread(_objectSpread({}, jest.requireActual('../extensions')), {}, {
+    buildExtensions: jest.fn(function () {
+      return [];
+    })
+  });
+});
+describe('EditableHtml', function () {
+  var defaultProps = {
+    markup: '<p>Hello World</p>',
+    onChange: jest.fn(),
+    onDone: jest.fn(),
+    disabled: false
+  };
+  beforeEach(function () {
+    jest.clearAllMocks();
+  });
+  it('renders without crashing', function () {
+    var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, defaultProps)),
+      container = _render.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('renders editor container', function () {
+    var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, defaultProps)),
+      getByTestId = _render2.getByTestId;
+    expect(getByTestId('editor-container')).toBeInTheDocument();
+  });
+  it('renders editor content when editor is initialized', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render3, getByTestId;
+    return _regenerator["default"].wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render3 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, defaultProps)), getByTestId = _render3.getByTestId;
+          _context.next = 1;
+          return (0, _react2.waitFor)(function () {
+            expect(getByTestId('editor-content')).toBeInTheDocument();
+          });
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('accepts custom toolbar options', function () {
+    var toolbarOpts = {
+      position: 'top',
+      alignment: 'center',
+      alwaysVisible: true,
+      showDone: false,
+      doneOn: 'change'
+    };
+    var _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        toolbarOpts: toolbarOpts
+      }))),
+      container = _render4.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts custom active plugins', function () {
+    var activePlugins = ['bold', 'italic', 'underline'];
+    var _render5 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        activePlugins: activePlugins
+      }))),
+      container = _render5.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts plugin props', function () {
+    var pluginProps = {
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: false
+      }
+    };
+    var _render6 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        pluginProps: pluginProps
+      }))),
+      container = _render6.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts response area props', function () {
+    var responseAreaProps = {
+      type: 'explicit-constructed-response',
+      options: {}
+    };
+    var _render7 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        responseAreaProps: responseAreaProps
+      }))),
+      container = _render7.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('passes blur done behavior to inline dropdown toolbar close', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var onChange, onDone, html, configureCall, inlineDropdownOptions, editor;
+    return _regenerator["default"].wrap(function (_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          onChange = jest.fn();
+          onDone = jest.fn();
+          html = '<p>from inline dropdown close</p>';
+          (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+            markup: "<p>Hello World</p>",
+            onChange: onChange,
+            onDone: onDone,
+            toolbarOpts: {
+              doneOn: 'blur'
+            },
+            responseAreaProps: {
+              type: 'inline-dropdown'
+            }
+          })));
+          _context2.next = 1;
+          return (0, _react2.waitFor)(function () {
+            expect(_responseArea.InlineDropdownNode.configure).toHaveBeenCalled();
+          });
+        case 1:
+          configureCall = _responseArea.InlineDropdownNode.configure.mock.calls[_responseArea.InlineDropdownNode.configure.mock.calls.length - 1];
+          inlineDropdownOptions = configureCall[0];
+          editor = {
+            getHTML: jest.fn(function () {
+              return html;
+            })
+          };
+          inlineDropdownOptions.onInlineDropdownToolbarClose(editor);
+          expect(editor.getHTML).toHaveBeenCalledTimes(1);
+          expect(onChange).toHaveBeenCalledWith(html);
+          expect(onDone).toHaveBeenCalledWith(html);
+        case 2:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it('accepts size props', function () {
+    var sizeProps = {
+      width: 500,
+      height: 300,
+      minHeight: 200,
+      maxHeight: 400,
+      minWidth: 300,
+      maxWidth: 600
+    };
+    var _render8 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, sizeProps))),
+      container = _render8.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts character limit', function () {
+    var _render9 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        charactersLimit: 500
+      }))),
+      container = _render9.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts image support props', function () {
+    var imageSupport = {
+      add: jest.fn(),
+      "delete": jest.fn()
+    };
+    var _render0 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        imageSupport: imageSupport
+      }))),
+      container = _render0.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts max image dimensions', function () {
+    var _render1 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        maxImageWidth: 800,
+        maxImageHeight: 600
+      }))),
+      container = _render1.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts language characters props', function () {
+    var languageCharactersProps = [{
+      label: 'Greek',
+      value: 'greek'
+    }, {
+      label: 'Cyrillic',
+      value: 'cyrillic'
+    }];
+    var _render10 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        languageCharactersProps: languageCharactersProps
+      }))),
+      container = _render10.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts extra CSS rules', function () {
+    var extraCSSRules = {
+      '.custom-class': {
+        color: 'red'
+      }
+    };
+    var _render11 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        extraCSSRules: extraCSSRules
+      }))),
+      container = _render11.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts upload sound support', function () {
+    var uploadSoundSupport = {
+      add: jest.fn(),
+      "delete": jest.fn()
+    };
+    var _render12 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        uploadSoundSupport: uploadSoundSupport
+      }))),
+      container = _render12.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts onKeyDown handler', function () {
+    var onKeyDown = jest.fn();
+    var _render13 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        onKeyDown: onKeyDown
+      }))),
+      container = _render13.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('accepts disableImageAlignmentButtons prop', function () {
+    var _render14 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        disableImageAlignmentButtons: true
+      }))),
+      container = _render14.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('calls editorRef callback when editor is initialized', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var editorRef;
+    return _regenerator["default"].wrap(function (_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          editorRef = jest.fn();
+          (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+            editorRef: editorRef
+          })));
+          _context3.next = 1;
+          return (0, _react2.waitFor)(function () {
+            expect(editorRef).toHaveBeenCalled();
+          });
+        case 1:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it('calls editorRef with the editor instance', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var editorRef;
+    return _regenerator["default"].wrap(function (_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          editorRef = jest.fn();
+          (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+            editorRef: editorRef
+          })));
+          _context4.next = 1;
+          return (0, _react2.waitFor)(function () {
+            expect(editorRef).toHaveBeenCalled();
+            // Verify it was called with an object that has editor-like properties
+            var callArg = editorRef.mock.calls[0][0];
+            expect(callArg).toHaveProperty('getHTML');
+            expect(callArg).toHaveProperty('commands');
+          });
+        case 1:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+  it('handles editorRef being undefined', function () {
+    var _render15 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+        editorRef: undefined
+      }))),
+      container = _render15.container;
+    expect(container).toBeInTheDocument();
+  });
+  it('applies flex display to StyledEditorContent', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+    var _render16, getByTestId;
+    return _regenerator["default"].wrap(function (_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _render16 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, defaultProps)), getByTestId = _render16.getByTestId;
+          _context5.next = 1;
+          return (0, _react2.waitFor)(function () {
+            var editorContent = getByTestId('editor-content');
+            expect(editorContent).toBeInTheDocument();
+          });
+        case 1:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })));
+  it('does not run blur onChange/onDone while an image insert flow is active', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
+    var onChange, onDone, editorConfig, blurEditor;
+    return _regenerator["default"].wrap(function (_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          jest.useFakeTimers();
+          onChange = jest.fn();
+          onDone = jest.fn();
+          (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+            markup: "<p>Hello World</p>",
+            onChange: onChange,
+            onDone: onDone,
+            toolbarOpts: _objectSpread(_objectSpread({}, defaultProps.toolbarOpts), {}, {
+              doneOn: 'blur'
+            })
+          })));
+          _context6.next = 1;
+          return (0, _react2.waitFor)(function () {
+            expect(_react3.useEditor).toHaveBeenCalled();
+          });
+        case 1:
+          editorConfig = _react3.useEditor.mock.calls[_react3.useEditor.mock.calls.length - 1][0];
+          blurEditor = {
+            getHTML: jest.fn(function () {
+              return '<p>changed</p>';
+            }),
+            schema: {},
+            _insertingImage: true,
+            _toolbarOpened: false,
+            isActive: jest.fn(function () {
+              return false;
+            })
+          };
+          editorConfig.onBlur({
+            editor: blurEditor
+          });
+          jest.advanceTimersByTime(200);
+          expect(onChange).not.toHaveBeenCalled();
+          expect(onDone).not.toHaveBeenCalled();
+          jest.useRealTimers();
+        case 2:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })));
+  it('does not run blur onChange/onDone when editor has no schema', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
+    var onChange, onDone, editorConfig, getHTML, blurEditor;
+    return _regenerator["default"].wrap(function (_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          jest.useFakeTimers();
+          onChange = jest.fn();
+          onDone = jest.fn();
+          (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+            markup: "<p>Hello World</p>",
+            onChange: onChange,
+            onDone: onDone,
+            toolbarOpts: {
+              doneOn: 'blur'
+            }
+          })));
+          _context7.next = 1;
+          return (0, _react2.waitFor)(function () {
+            expect(_react3.useEditor).toHaveBeenCalled();
+          });
+        case 1:
+          editorConfig = _react3.useEditor.mock.calls[_react3.useEditor.mock.calls.length - 1][0];
+          getHTML = jest.fn(function () {
+            return '<p>changed</p>';
+          });
+          blurEditor = {
+            getHTML: getHTML,
+            schema: undefined,
+            _insertingImage: false,
+            _toolbarOpened: false,
+            isActive: jest.fn(function () {
+              return false;
+            })
+          };
+          editorConfig.onBlur({
+            editor: blurEditor
+          });
+          jest.advanceTimersByTime(200);
+          expect(getHTML).not.toHaveBeenCalled();
+          expect(onChange).not.toHaveBeenCalled();
+          expect(onDone).not.toHaveBeenCalled();
+          jest.useRealTimers();
+        case 2:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  })));
+  it('calls getHTML once on blur and passes the same html to onChange and onDone', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
+    var onChange, onDone, html, editorConfig, getHTML, blurEditor;
+    return _regenerator["default"].wrap(function (_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          jest.useFakeTimers();
+          onChange = jest.fn();
+          onDone = jest.fn();
+          html = '<p>from editor</p>';
+          (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+            markup: "<p>Hello World</p>",
+            onChange: onChange,
+            onDone: onDone,
+            toolbarOpts: {
+              doneOn: 'blur'
+            }
+          })));
+          _context8.next = 1;
+          return (0, _react2.waitFor)(function () {
+            expect(_react3.useEditor).toHaveBeenCalled();
+          });
+        case 1:
+          editorConfig = _react3.useEditor.mock.calls[_react3.useEditor.mock.calls.length - 1][0];
+          getHTML = jest.fn(function () {
+            return html;
+          });
+          blurEditor = {
+            getHTML: getHTML,
+            schema: {},
+            _insertingImage: false,
+            _toolbarOpened: false,
+            isActive: jest.fn(function () {
+              return false;
+            })
+          };
+          editorConfig.onBlur({
+            editor: blurEditor
+          });
+          jest.advanceTimersByTime(200);
+          expect(getHTML).toHaveBeenCalledTimes(1);
+          expect(onChange).toHaveBeenCalledWith(html);
+          expect(onDone).toHaveBeenCalledWith(html);
+          jest.useRealTimers();
+        case 2:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee8);
+  })));
+  describe('onUpdate callback', function () {
+    it('calls onChange when transaction.isDone is true', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9() {
+      var onChange, markup, editorConfig, mockEditor, mockTransaction;
+      return _regenerator["default"].wrap(function (_context9) {
+        while (1) switch (_context9.prev = _context9.next) {
+          case 0:
+            onChange = jest.fn();
+            markup = '<p>Initial content</p>';
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+              markup: markup,
+              onChange: onChange
+            })));
+            _context9.next = 1;
+            return (0, _react2.waitFor)(function () {
+              expect(_react3.useEditor).toHaveBeenCalled();
+            });
+          case 1:
+            editorConfig = _react3.useEditor.mock.calls[_react3.useEditor.mock.calls.length - 1][0];
+            mockEditor = {
+              getHTML: jest.fn(function () {
+                return '<p>Updated content</p>';
+              })
+            };
+            mockTransaction = {
+              isDone: true
+            };
+            editorConfig.onUpdate({
+              editor: mockEditor,
+              transaction: mockTransaction
+            });
+            expect(onChange).toHaveBeenCalledWith('<p>Updated content</p>');
+          case 2:
+          case "end":
+            return _context9.stop();
+        }
+      }, _callee9);
+    })));
+    it('does not call onChange when transaction.isDone is false even if markup differs from editor HTML', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee0() {
+      var onChange, markup, editorConfig, mockEditor, mockTransaction;
+      return _regenerator["default"].wrap(function (_context0) {
+        while (1) switch (_context0.prev = _context0.next) {
+          case 0:
+            onChange = jest.fn();
+            markup = '<p>Initial content</p>';
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+              markup: markup,
+              onChange: onChange
+            })));
+            _context0.next = 1;
+            return (0, _react2.waitFor)(function () {
+              expect(_react3.useEditor).toHaveBeenCalled();
+            });
+          case 1:
+            editorConfig = _react3.useEditor.mock.calls[_react3.useEditor.mock.calls.length - 1][0];
+            mockEditor = {
+              getHTML: jest.fn(function () {
+                return '<p>Different content</p>';
+              })
+            };
+            mockTransaction = {
+              isDone: false
+            };
+            editorConfig.onUpdate({
+              editor: mockEditor,
+              transaction: mockTransaction
+            });
+            expect(onChange).not.toHaveBeenCalled();
+          case 2:
+          case "end":
+            return _context0.stop();
+        }
+      }, _callee0);
+    })));
+    it('does not call onChange when transaction.isDone is false and markup matches editor HTML', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee1() {
+      var onChange, markup, editorConfig, mockEditor, mockTransaction;
+      return _regenerator["default"].wrap(function (_context1) {
+        while (1) switch (_context1.prev = _context1.next) {
+          case 0:
+            onChange = jest.fn();
+            markup = '<p>Same content</p>';
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+              markup: markup,
+              onChange: onChange
+            })));
+            _context1.next = 1;
+            return (0, _react2.waitFor)(function () {
+              expect(_react3.useEditor).toHaveBeenCalled();
+            });
+          case 1:
+            editorConfig = _react3.useEditor.mock.calls[_react3.useEditor.mock.calls.length - 1][0];
+            mockEditor = {
+              getHTML: jest.fn(function () {
+                return '<p>Same content</p>';
+              })
+            };
+            mockTransaction = {
+              isDone: false
+            };
+            editorConfig.onUpdate({
+              editor: mockEditor,
+              transaction: mockTransaction
+            });
+            expect(onChange).not.toHaveBeenCalled();
+          case 2:
+          case "end":
+            return _context1.stop();
+        }
+      }, _callee1);
+    })));
+    it('calls onChange when transaction.isDone is true even if markup matches', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee10() {
+      var onChange, markup, editorConfig, mockEditor, mockTransaction;
+      return _regenerator["default"].wrap(function (_context10) {
+        while (1) switch (_context10.prev = _context10.next) {
+          case 0:
+            onChange = jest.fn();
+            markup = '<p>Same content</p>';
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+              markup: markup,
+              onChange: onChange
+            })));
+            _context10.next = 1;
+            return (0, _react2.waitFor)(function () {
+              expect(_react3.useEditor).toHaveBeenCalled();
+            });
+          case 1:
+            editorConfig = _react3.useEditor.mock.calls[_react3.useEditor.mock.calls.length - 1][0];
+            mockEditor = {
+              getHTML: jest.fn(function () {
+                return '<p>Same content</p>';
+              })
+            };
+            mockTransaction = {
+              isDone: true
+            };
+            editorConfig.onUpdate({
+              editor: mockEditor,
+              transaction: mockTransaction
+            });
+            expect(onChange).toHaveBeenCalledWith('<p>Same content</p>');
+          case 2:
+          case "end":
+            return _context10.stop();
+        }
+      }, _callee10);
+    })));
+    it('does not call onChange when onChange is not provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee11() {
+      var markup, editorConfig, mockEditor, mockTransaction;
+      return _regenerator["default"].wrap(function (_context11) {
+        while (1) switch (_context11.prev = _context11.next) {
+          case 0:
+            markup = '<p>Content</p>';
+            (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_EditableHtml.EditableHtml, (0, _extends2["default"])({}, defaultProps, {
+              markup: markup,
+              onChange: undefined
+            })));
+            _context11.next = 1;
+            return (0, _react2.waitFor)(function () {
+              expect(_react3.useEditor).toHaveBeenCalled();
+            });
+          case 1:
+            editorConfig = _react3.useEditor.mock.calls[_react3.useEditor.mock.calls.length - 1][0];
+            mockEditor = {
+              getHTML: jest.fn(function () {
+                return '<p>Updated content</p>';
+              })
+            };
+            mockTransaction = {
+              isDone: true
+            }; // Should not throw error when onChange is undefined
+            expect(function () {
+              editorConfig.onUpdate({
+                editor: mockEditor,
+                transaction: mockTransaction
+              });
+            }).not.toThrow();
+          case 2:
+          case "end":
+            return _context11.stop();
+        }
+      }, _callee11);
+    })));
+  });
+});
+//# sourceMappingURL=EditableHtml.test.js.map