@pie-lib/editable-html-tip-tap 1.0.0

package/lib/shared/alert-dialog.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _styles = require("@material-ui/core/styles");
+
+var AlertDialog = function AlertDialog(_ref) {
+  var text = _ref.text,
+      title = _ref.title,
+      onClose = _ref.onClose,
+      onConfirm = _ref.onConfirm,
+      open = _ref.open,
+      onCloseText = _ref.onCloseText,
+      onConfirmText = _ref.onConfirmText,
+      classes = _ref.classes;
+  return /*#__PURE__*/_react["default"].createElement(_core.Dialog, {
+    open: open,
+    onClose: onClose
+  }, title && /*#__PURE__*/_react["default"].createElement(_core.DialogTitle, {
+    className: classes.heading
+  }, title), text && /*#__PURE__*/_react["default"].createElement(_core.DialogContent, null, /*#__PURE__*/_react["default"].createElement(_core.DialogContentText, {
+    className: classes.subheading
+  }, text)), /*#__PURE__*/_react["default"].createElement(_core.DialogActions, null, onClose && /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    onClick: onClose,
+    color: "primary"
+  }, onCloseText), onConfirm && /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    autoFocus: true,
+    onClick: onConfirm,
+    color: "primary"
+  }, onConfirmText)));
+};
+
+AlertDialog.defaultProps = {
+  onCloseText: 'CANCEL',
+  onConfirmText: 'OK'
+};
+AlertDialog.propTypes = {
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  title: _propTypes["default"].string,
+  onClose: _propTypes["default"].func,
+  onConfirm: _propTypes["default"].func,
+  open: _propTypes["default"].bool,
+  onConfirmText: _propTypes["default"].string,
+  onCloseText: _propTypes["default"].string,
+  classes: _propTypes["default"].object
+};
+
+var styles = function styles() {
+  return {
+    heading: {
+      '& h2': {
+        fontSize: 'max(1.25rem, 18px)'
+      }
+    },
+    subheading: {
+      fontSize: 'max(1rem, 14px)'
+    }
+  };
+};
+
+var _default = (0, _styles.withStyles)(styles)(AlertDialog);
+
+exports["default"] = _default;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9hbGVydC1kaWFsb2cuanN4Il0sIm5hbWVzIjpbIkFsZXJ0RGlhbG9nIiwidGV4dCIsInRpdGxlIiwib25DbG9zZSIsIm9uQ29uZmlybSIsIm9wZW4iLCJvbkNsb3NlVGV4dCIsIm9uQ29uZmlybVRleHQiLCJjbGFzc2VzIiwiaGVhZGluZyIsInN1YmhlYWRpbmciLCJkZWZhdWx0UHJvcHMiLCJwcm9wVHlwZXMiLCJQcm9wVHlwZXMiLCJvbmVPZlR5cGUiLCJzdHJpbmciLCJvYmplY3QiLCJmdW5jIiwiYm9vbCIsInN0eWxlcyIsImZvbnRTaXplIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFBQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFFQSxJQUFNQSxXQUFXLEdBQUcsU0FBZEEsV0FBYztBQUFBLE1BQUdDLElBQUgsUUFBR0EsSUFBSDtBQUFBLE1BQVNDLEtBQVQsUUFBU0EsS0FBVDtBQUFBLE1BQWdCQyxPQUFoQixRQUFnQkEsT0FBaEI7QUFBQSxNQUF5QkMsU0FBekIsUUFBeUJBLFNBQXpCO0FBQUEsTUFBb0NDLElBQXBDLFFBQW9DQSxJQUFwQztBQUFBLE1BQTBDQyxXQUExQyxRQUEwQ0EsV0FBMUM7QUFBQSxNQUF1REMsYUFBdkQsUUFBdURBLGFBQXZEO0FBQUEsTUFBc0VDLE9BQXRFLFFBQXNFQSxPQUF0RTtBQUFBLHNCQUNsQixnQ0FBQyxZQUFEO0FBQVEsSUFBQSxJQUFJLEVBQUVILElBQWQ7QUFBb0IsSUFBQSxPQUFPLEVBQUVGO0FBQTdCLEtBQ0dELEtBQUssaUJBQUksZ0NBQUMsaUJBQUQ7QUFBYSxJQUFBLFNBQVMsRUFBRU0sT0FBTyxDQUFDQztBQUFoQyxLQUEwQ1AsS0FBMUMsQ0FEWixFQUVHRCxJQUFJLGlCQUNILGdDQUFDLG1CQUFELHFCQUNFLGdDQUFDLHVCQUFEO0FBQW1CLElBQUEsU0FBUyxFQUFFTyxPQUFPLENBQUNFO0FBQXRDLEtBQW1EVCxJQUFuRCxDQURGLENBSEosZUFPRSxnQ0FBQyxtQkFBRCxRQUNHRSxPQUFPLGlCQUNOLGdDQUFDLFlBQUQ7QUFBUSxJQUFBLE9BQU8sRUFBRUEsT0FBakI7QUFBMEIsSUFBQSxLQUFLLEVBQUM7QUFBaEMsS0FDR0csV0FESCxDQUZKLEVBTUdGLFNBQVMsaUJBQ1IsZ0NBQUMsWUFBRDtBQUFRLElBQUEsU0FBUyxNQUFqQjtBQUFrQixJQUFBLE9BQU8sRUFBRUEsU0FBM0I7QUFBc0MsSUFBQSxLQUFLLEVBQUM7QUFBNUMsS0FDR0csYUFESCxDQVBKLENBUEYsQ0FEa0I7QUFBQSxDQUFwQjs7QUF1QkFQLFdBQVcsQ0FBQ1csWUFBWixHQUEyQjtBQUN6QkwsRUFBQUEsV0FBVyxFQUFFLFFBRFk7QUFFekJDLEVBQUFBLGFBQWEsRUFBRTtBQUZVLENBQTNCO0FBS0FQLFdBQVcsQ0FBQ1ksU0FBWixHQUF3QjtBQUN0QlgsRUFBQUEsSUFBSSxFQUFFWSxzQkFBVUMsU0FBVixDQUFvQixDQUFDRCxzQkFBVUUsTUFBWCxFQUFtQkYsc0JBQVVHLE1BQTdCLENBQXBCLENBRGdCO0FBRXRCZCxFQUFBQSxLQUFLLEVBQUVXLHNCQUFVRSxNQUZLO0FBR3RCWixFQUFBQSxPQUFPLEVBQUVVLHNCQUFVSSxJQUhHO0FBSXRCYixFQUFBQSxTQUFTLEVBQUVTLHNCQUFVSSxJQUpDO0FBS3RCWixFQUFBQSxJQUFJLEVBQUVRLHNCQUFVSyxJQUxNO0FBTXRCWCxFQUFBQSxhQUFhLEVBQUVNLHNCQUFVRSxNQU5IO0FBT3RCVCxFQUFBQSxXQUFXLEVBQUVPLHNCQUFVRSxNQVBEO0FBUXRCUCxFQUFBQSxPQUFPLEVBQUVLLHNCQUFVRztBQVJHLENBQXhCOztBQVdBLElBQU1HLE1BQU0sR0FBRyxTQUFUQSxNQUFTO0FBQUEsU0FBTztBQUNwQlYsSUFBQUEsT0FBTyxFQUFFO0FBQ1AsY0FBUTtBQUNOVyxRQUFBQSxRQUFRLEVBQUU7QUFESjtBQURELEtBRFc7QUFNcEJWLElBQUFBLFVBQVUsRUFBRTtBQUNWVSxNQUFBQSxRQUFRLEVBQUU7QUFEQTtBQU5RLEdBQVA7QUFBQSxDQUFmOztlQVdlLHdCQUFXRCxNQUFYLEVBQW1CbkIsV0FBbkIsQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgQnV0dG9uLCBEaWFsb2csIERpYWxvZ0FjdGlvbnMsIERpYWxvZ0NvbnRlbnQsIERpYWxvZ0NvbnRlbnRUZXh0LCBEaWFsb2dUaXRsZSB9IGZyb20gJ0BtYXRlcmlhbC11aS9jb3JlJztcbmltcG9ydCB7IHdpdGhTdHlsZXMgfSBmcm9tICdAbWF0ZXJpYWwtdWkvY29yZS9zdHlsZXMnO1xuXG5jb25zdCBBbGVydERpYWxvZyA9ICh7IHRleHQsIHRpdGxlLCBvbkNsb3NlLCBvbkNvbmZpcm0sIG9wZW4sIG9uQ2xvc2VUZXh0LCBvbkNvbmZpcm1UZXh0LCBjbGFzc2VzIH0pID0+IChcbiAgPERpYWxvZyBvcGVuPXtvcGVufSBvbkNsb3NlPXtvbkNsb3NlfT5cbiAgICB7dGl0bGUgJiYgPERpYWxvZ1RpdGxlIGNsYXNzTmFtZT17Y2xhc3Nlcy5oZWFkaW5nfT57dGl0bGV9PC9EaWFsb2dUaXRsZT59XG4gICAge3RleHQgJiYgKFxuICAgICAgPERpYWxvZ0NvbnRlbnQ+XG4gICAgICAgIDxEaWFsb2dDb250ZW50VGV4dCBjbGFzc05hbWU9e2NsYXNzZXMuc3ViaGVhZGluZ30+e3RleHR9PC9EaWFsb2dDb250ZW50VGV4dD5cbiAgICAgIDwvRGlhbG9nQ29udGVudD5cbiAgICApfVxuICAgIDxEaWFsb2dBY3Rpb25zPlxuICAgICAge29uQ2xvc2UgJiYgKFxuICAgICAgICA8QnV0dG9uIG9uQ2xpY2s9e29uQ2xvc2V9IGNvbG9yPVwicHJpbWFyeVwiPlxuICAgICAgICAgIHtvbkNsb3NlVGV4dH1cbiAgICAgICAgPC9CdXR0b24+XG4gICAgICApfVxuICAgICAge29uQ29uZmlybSAmJiAoXG4gICAgICAgIDxCdXR0b24gYXV0b0ZvY3VzIG9uQ2xpY2s9e29uQ29uZmlybX0gY29sb3I9XCJwcmltYXJ5XCI+XG4gICAgICAgICAge29uQ29uZmlybVRleHR9XG4gICAgICAgIDwvQnV0dG9uPlxuICAgICAgKX1cbiAgICA8L0RpYWxvZ0FjdGlvbnM+XG4gIDwvRGlhbG9nPlxuKTtcblxuQWxlcnREaWFsb2cuZGVmYXVsdFByb3BzID0ge1xuICBvbkNsb3NlVGV4dDogJ0NBTkNFTCcsXG4gIG9uQ29uZmlybVRleHQ6ICdPSycsXG59O1xuXG5BbGVydERpYWxvZy5wcm9wVHlwZXMgPSB7XG4gIHRleHQ6IFByb3BUeXBlcy5vbmVPZlR5cGUoW1Byb3BUeXBlcy5zdHJpbmcsIFByb3BUeXBlcy5vYmplY3RdKSxcbiAgdGl0bGU6IFByb3BUeXBlcy5zdHJpbmcsXG4gIG9uQ2xvc2U6IFByb3BUeXBlcy5mdW5jLFxuICBvbkNvbmZpcm06IFByb3BUeXBlcy5mdW5jLFxuICBvcGVuOiBQcm9wVHlwZXMuYm9vbCxcbiAgb25Db25maXJtVGV4dDogUHJvcFR5cGVzLnN0cmluZyxcbiAgb25DbG9zZVRleHQ6IFByb3BUeXBlcy5zdHJpbmcsXG4gIGNsYXNzZXM6IFByb3BUeXBlcy5vYmplY3QsXG59O1xuXG5jb25zdCBzdHlsZXMgPSAoKSA9PiAoe1xuICBoZWFkaW5nOiB7XG4gICAgJyYgaDInOiB7XG4gICAgICBmb250U2l6ZTogJ21heCgxLjI1cmVtLCAxOHB4KScsXG4gICAgfSxcbiAgfSxcbiAgc3ViaGVhZGluZzoge1xuICAgIGZvbnRTaXplOiAnbWF4KDFyZW0sIDE0cHgpJyxcbiAgfSxcbn0pO1xuXG5leHBvcnQgZGVmYXVsdCB3aXRoU3R5bGVzKHN0eWxlcykoQWxlcnREaWFsb2cpO1xuIl19

package/lib/theme.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.primary = void 0;
+var primary = '#304ffe';
+exports.primary = primary;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy90aGVtZS5qcyJdLCJuYW1lcyI6WyJwcmltYXJ5Il0sIm1hcHBpbmdzIjoiOzs7Ozs7QUFBTyxJQUFNQSxPQUFPLEdBQUcsU0FBaEIiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgcHJpbWFyeSA9ICcjMzA0ZmZlJztcbiJdfQ==

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@pie-lib/editable-html-tip-tap",
+  "version": "1.0.0",
+  "description": "",
+  "license": "ISC",
+  "main": "lib/index.js",
+  "module": "src/index.jsx",
+  "author": "pie-framework developers",
+  "dependencies": {
+    "@material-ui/core": "^3.8.3",
+    "@material-ui/icons": "^3.0.2",
+    "@material-ui/styles": "^3.0.0-alpha.10",
+    "@pie-lib/drag": "^2.22.1",
+    "@pie-lib/math-input": "^6.31.1",
+    "@pie-lib/math-rendering": "^3.22.1",
+    "@pie-lib/math-toolbar": "^1.31.1",
+    "@pie-lib/render-ui": "^4.35.1",
+    "@tiptap/core": "3.0.9",
+    "@tiptap/extension-color": "3.0.9",
+    "@tiptap/extension-list-item": "3.0.9",
+    "@tiptap/extension-table": "3.0.9",
+    "@tiptap/extension-table-cell": "3.0.9",
+    "@tiptap/extension-table-header": "3.0.9",
+    "@tiptap/extension-table-row": "3.0.9",
+    "@tiptap/extension-text-style": "3.0.9",
+    "@tiptap/extension-superscript": "3.0.9",
+    "@tiptap/extension-subscript": "3.0.9",
+    "@tiptap/extension-text-align": "3.0.9",
+    "@tiptap/extension-image": "3.0.9",
+    "@tiptap/pm": "3.0.9",
+    "@tiptap/react": "3.0.9",
+    "@tiptap/starter-kit": "3.0.9",
+    "tippy.js": "latest",
+    "change-case": "^3.0.2",
+    "classnames": "^2.2.6",
+    "debug": "^4.1.1",
+    "immutable": "^4.0.0-rc.12",
+    "keycode": "^2.2.0",
+    "lodash": "^4.17.11",
+    "prop-types": "^15.6.2",
+    "react-attr-converter": "^0.3.1",
+    "react-jss": "^8.6.1",
+    "react-portal": "^4.2.0",
+    "slate": "^0.36.2",
+    "slate-dev-environment": "^0.2.0",
+    "slate-edit-list": "^0.11.3",
+    "slate-edit-table": "^0.17.0",
+    "slate-html-serializer": "^0.6.12",
+    "slate-plain-serializer": "^0.5.26",
+    "slate-prop-types": "^0.4.38",
+    "slate-react": "^0.14.3",
+    "slate-schema-violations": "^0.1.39",
+    "slate-soft-break": "^0.8.1",
+    "to-style": "^1.3.3"
+  },
+  "devDependencies": {
+    "@pie-framework/mathquill": "^1.1.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "peerDependencies": {
+    "react": "18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "ff5ec2ebe11110b7652812a10c6dc230f08e12cb",
+  "scripts": {}
+}

package/src/__tests__/editor.test.jsx

@@ -0,0 +1,363 @@
+import React from 'react';
+import { htmlToValue, valueToHtml } from '../index';
+import { Editor } from '../editor';
+import { shallow, configure } from 'enzyme';
+import debug from 'debug';
+
+import { mockComponents } from './utils';
+
+const log = debug('@pie-lib:editable-html:test');
+
+const value = htmlToValue('hi');
+
+const resizeWindow = (width, height) => {
+  window.innerWidth = width;
+  window.innerHeight = height;
+  window.dispatchEvent(new Event('resize'));
+};
+jest.mock('@pie-lib/math-toolbar', () => ({}));
+jest.mock('@pie-lib/math-input', () => {
+  HorizontalKeypad: () => <div>HorizontalKeypad</div>;
+});
+
+expect.extend({
+  toEqualHtml(value, html) {
+    const v = valueToHtml(value);
+    const pass = v === html;
+
+    return {
+      pass,
+      message: () => `expected ${html} to match ${v}`,
+    };
+  },
+});
+
+describe('logic', () => {
+  test('onFocus/onBlur saves the value', async () => {
+    const wrapper = shallow(
+      <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+    );
+
+    await wrapper.instance().onFocus();
+
+    const v = htmlToValue('hi');
+
+    expect(wrapper.state('stashedValue')).toEqualHtml('<div>hi</div>');
+
+    wrapper.instance().onChange({ value: htmlToValue('new value') });
+
+    expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
+
+    return wrapper
+      .instance()
+      .onBlur({})
+      .then(() => {
+        expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
+      });
+  });
+});
+
+test('onFocus does not change focus if related target is a button from language keypad', async () => {
+  const wrapper = shallow(
+    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+  );
+
+  const event = {
+    relatedTarget: {
+      tagName: 'button',
+    },
+  };
+
+  const change = {
+    focus: jest.fn(),
+  };
+
+  wrapper.instance().keypadInteractionDetected = true;
+
+  await wrapper.instance().onFocus(event, change);
+
+  expect(change.focus).not.toHaveBeenCalled();
+});
+
+test('onFocus changes focus if related target is not a button from language keypad', async () => {
+  const wrapper = shallow(
+    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+  );
+
+  const event = {
+    relatedTarget: {
+      tagName: 'div',
+    },
+  };
+
+  const change = {
+    focus: jest.fn(),
+  };
+
+  await wrapper.instance().onFocus(event, change);
+
+  expect(change.focus).toHaveBeenCalled();
+});
+
+test('onFocus stashes the value', async () => {
+  const wrapper = shallow(
+    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+  );
+
+  await wrapper.instance().onFocus();
+
+  expect(wrapper.state('stashedValue')).toEqualHtml('<div>hi</div>');
+});
+
+test('onBlur does not set focusToolbar if related target is RawDoneButton', async () => {
+  const wrapper = shallow(
+    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+  );
+
+  const toolbarElement = document.createElement('div');
+  const relatedTarget = document.createElement('button');
+  relatedTarget.className = 'RawDoneButton';
+  toolbarElement.className = 'toolbar';
+  toolbarElement.appendChild(relatedTarget);
+
+  wrapper.instance().toolbarRef = toolbarElement;
+  wrapper.instance().doneButtonRef.current = relatedTarget;
+
+  const event = { relatedTarget };
+
+  await wrapper.instance().onBlur(event);
+
+  expect(wrapper.state('focusToolbar')).toBe(false);
+});
+
+test('handleToolbarFocus sets focusToolbar to true', () => {
+  const wrapper = shallow(
+    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+  );
+
+  wrapper.instance().handleToolbarFocus();
+  expect(wrapper.state('focusToolbar')).toBe(true);
+});
+
+test('handleToolbarBlur sets focusToolbar to false if toolbar does not contain focus', (done) => {
+  const wrapper = shallow(
+    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+  );
+
+  wrapper.instance().toolbarContainsFocus = jest.fn().mockReturnValue(false);
+
+  wrapper.instance().handleToolbarBlur();
+
+  setTimeout(() => {
+    expect(wrapper.state('focusToolbar')).toBe(false);
+    done();
+  }, 20);
+});
+
+test('handleToolbarBlur does not set focusToolbar to false if toolbar contains focus', (done) => {
+  const wrapper = shallow(
+    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+  );
+
+  wrapper.instance().toolbarContainsFocus = jest.fn().mockReturnValue(true);
+
+  wrapper.setState({ focusToolbar: true });
+
+  wrapper.instance().handleToolbarBlur();
+
+  setTimeout(() => {
+    expect(wrapper.state('focusToolbar')).toBe(true);
+    done();
+  }, 20);
+});
+
+test('toolbarContainsFocus correctly detects focus within toolbar', () => {
+  const wrapper = shallow(
+    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+  );
+
+  const toolbarElement = document.createElement('div');
+  const activeElement = document.createElement('button');
+  toolbarElement.appendChild(activeElement);
+
+  Object.defineProperty(document, 'activeElement', {
+    value: activeElement,
+    configurable: true,
+  });
+
+  wrapper.instance().toolbarRef = toolbarElement;
+
+  expect(wrapper.instance().toolbarContainsFocus()).toBe(true);
+
+  Object.defineProperty(document, 'activeElement', {
+    value: document.createElement('div'),
+    configurable: true,
+  });
+
+  expect(wrapper.instance().toolbarContainsFocus()).toBe(false);
+});
+
+test('onBlur sets focusToolbar to true if related target is within toolbar', async () => {
+  const wrapper = shallow(
+    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+  );
+
+  const toolbarElement = document.createElement('div');
+  const relatedTarget = document.createElement('button');
+  toolbarElement.className = 'toolbar';
+  toolbarElement.appendChild(relatedTarget);
+
+  wrapper.instance().toolbarRef = toolbarElement;
+
+  const event = { relatedTarget };
+
+  await wrapper.instance().onBlur(event);
+
+  expect(wrapper.state('focusToolbar')).toBe(true);
+});
+
+describe('buildSizeStyle', () => {
+  const wrapper = (extras) => {
+    const props = Object.assign({}, extras);
+    return shallow(
+      <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} {...props} />,
+    );
+  };
+
+  it('builds width with px', () => {
+    const w = wrapper({ width: 100 });
+    expect(w.instance().buildSizeStyle()).toEqual({
+      width: '100px',
+      height: undefined,
+      minHeight: undefined,
+      maxHeight: undefined,
+    });
+  });
+
+  it('returns undefined for % ', () => {
+    const w = wrapper({ height: '100%', width: '100%' });
+    expect(w.instance().buildSizeStyle()).toEqual({
+      width: undefined,
+      height: undefined,
+      minHeight: undefined,
+      maxHeight: undefined,
+    });
+  });
+
+  it('builds height', () => {
+    const w = wrapper({ height: 100 });
+    expect(w.instance().buildSizeStyle()).toEqual({
+      width: undefined,
+      height: '100px',
+      minHeight: undefined,
+      maxHeight: undefined,
+    });
+  });
+
+  it('builds minHeight', () => {
+    const w = wrapper({ minHeight: 100 });
+    expect(w.instance().buildSizeStyle()).toEqual({
+      width: undefined,
+      height: undefined,
+      minHeight: '100px',
+      maxHeight: undefined,
+    });
+  });
+
+  it('builds maxHeight', () => {
+    const w = wrapper({ maxHeight: 100 });
+    expect(w.instance().buildSizeStyle()).toEqual({
+      width: undefined,
+      height: undefined,
+      minHeight: undefined,
+      maxHeight: '100px',
+    });
+  });
+
+  it('builds width with calc()', () => {
+    const w = wrapper({ width: 'calc(10em + 42px)' });
+    expect(w.instance().buildSizeStyle()).toEqual({
+      width: 'calc(10em + 42px)',
+      height: undefined,
+      minHeight: undefined,
+      maxHeight: undefined,
+    });
+  });
+
+  it('builds width with ch', () => {
+    const w = wrapper({ width: '9ch' });
+    expect(w.instance().buildSizeStyle()).toEqual({
+      width: '9ch',
+      height: undefined,
+      minHeight: undefined,
+      maxHeight: undefined,
+    });
+  });
+
+  it('builds', () => {
+    const w = wrapper({});
+    expect(w.instance().buildSizeStyle()).toEqual({
+      width: undefined,
+      height: undefined,
+      minHeight: undefined,
+      maxHeight: undefined,
+    });
+  });
+});
+
+describe('onResize', () => {
+  it('should display html of current state on Resize', () => {
+    const wrapper = shallow(
+      <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
+    );
+
+    resizeWindow(500, 300);
+    expect(wrapper.state('value')).toEqualHtml('<div>hi</div>');
+
+    wrapper.instance().onChange({ value: htmlToValue('new value') });
+    resizeWindow(1024, 768);
+    expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
+
+    resizeWindow(500, 300);
+    expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
+  });
+});
+
+describe('MathMl', () => {
+  beforeEach(() => {});
+
+  it('should not call runSerializationOnMarkup if mathMl props are not there', () => {
+    const runSerializationOnMarkup = jest.fn();
+
+    const wrapper = shallow(
+      <Editor
+        editorRef={jest.fn()}
+        value={value}
+        classes={{}}
+        onChange={jest.fn()}
+        onRef={jest.fn()}
+        runSerializationOnMarkup={runSerializationOnMarkup}
+      />,
+    );
+
+    expect(runSerializationOnMarkup).not.toHaveBeenCalled();
+  });
+
+  it('should call runSerializationOnMarkup if mmlEditing or mmlOutput are true', () => {
+    const runSerializationOnMarkup = jest.fn();
+
+    const wrapper = shallow(
+      <Editor
+        editorRef={jest.fn()}
+        value={value}
+        classes={{}}
+        onChange={jest.fn()}
+        onRef={jest.fn()}
+        runSerializationOnMarkup={runSerializationOnMarkup}
+        mathMlOptions={{ mmlOutput: true }}
+      />,
+    );
+
+    expect(runSerializationOnMarkup).toHaveBeenCalled();
+  });
+});