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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/lib/extensions/math.js.map +1 -1
  2. package/package.json +3 -3
  3. package/src/extensions/__tests__/math.test.js +2 -6
  4. package/src/extensions/math.js +1 -5
  5. package/lib/__tests__/EditableHtml.test.js +0 -831
  6. package/lib/__tests__/EditableHtml.test.js.map +0 -1
  7. package/lib/__tests__/constants.test.js +0 -21
  8. package/lib/__tests__/constants.test.js.map +0 -1
  9. package/lib/__tests__/div-to-paragraph-conversion.test.js +0 -213
  10. package/lib/__tests__/div-to-paragraph-conversion.test.js.map +0 -1
  11. package/lib/__tests__/extensions.test.js +0 -209
  12. package/lib/__tests__/extensions.test.js.map +0 -1
  13. package/lib/__tests__/index.test.js +0 -250
  14. package/lib/__tests__/index.test.js.map +0 -1
  15. package/lib/__tests__/size-utils.test.js +0 -57
  16. package/lib/__tests__/size-utils.test.js.map +0 -1
  17. package/lib/__tests__/theme.test.js +0 -17
  18. package/lib/__tests__/theme.test.js.map +0 -1
  19. package/lib/components/__tests__/AltDialog.test.js +0 -201
  20. package/lib/components/__tests__/AltDialog.test.js.map +0 -1
  21. package/lib/components/__tests__/CharacterPicker.test.js +0 -455
  22. package/lib/components/__tests__/CharacterPicker.test.js.map +0 -1
  23. package/lib/components/__tests__/CssIcon.test.js +0 -58
  24. package/lib/components/__tests__/CssIcon.test.js.map +0 -1
  25. package/lib/components/__tests__/DragInTheBlank.test.js +0 -295
  26. package/lib/components/__tests__/DragInTheBlank.test.js.map +0 -1
  27. package/lib/components/__tests__/ExplicitConstructedResponse.test.js +0 -345
  28. package/lib/components/__tests__/ExplicitConstructedResponse.test.js.map +0 -1
  29. package/lib/components/__tests__/ImageToolbar.test.js +0 -185
  30. package/lib/components/__tests__/ImageToolbar.test.js.map +0 -1
  31. package/lib/components/__tests__/InlineDropdown.test.js +0 -839
  32. package/lib/components/__tests__/InlineDropdown.test.js.map +0 -1
  33. package/lib/components/__tests__/InsertImageHandler.test.js +0 -171
  34. package/lib/components/__tests__/InsertImageHandler.test.js.map +0 -1
  35. package/lib/components/__tests__/MediaDialog.test.js +0 -433
  36. package/lib/components/__tests__/MediaDialog.test.js.map +0 -1
  37. package/lib/components/__tests__/MediaToolbar.test.js +0 -126
  38. package/lib/components/__tests__/MediaToolbar.test.js.map +0 -1
  39. package/lib/components/__tests__/MediaWrapper.test.js +0 -96
  40. package/lib/components/__tests__/MediaWrapper.test.js.map +0 -1
  41. package/lib/components/__tests__/MenuBar.test.js +0 -502
  42. package/lib/components/__tests__/MenuBar.test.js.map +0 -1
  43. package/lib/components/__tests__/RespArea.test.js +0 -171
  44. package/lib/components/__tests__/RespArea.test.js.map +0 -1
  45. package/lib/components/__tests__/TableIcons.test.js +0 -153
  46. package/lib/components/__tests__/TableIcons.test.js.map +0 -1
  47. package/lib/components/__tests__/TextAlign.test.js +0 -209
  48. package/lib/components/__tests__/TextAlign.test.js.map +0 -1
  49. package/lib/components/__tests__/TiptapContainer.test.js +0 -196
  50. package/lib/components/__tests__/TiptapContainer.test.js.map +0 -1
  51. package/lib/components/__tests__/characterUtils.test.js +0 -178
  52. package/lib/components/__tests__/characterUtils.test.js.map +0 -1
  53. package/lib/components/__tests__/choice.test.js +0 -213
  54. package/lib/components/__tests__/choice.test.js.map +0 -1
  55. package/lib/components/__tests__/custom-popper.test.js +0 -108
  56. package/lib/components/__tests__/custom-popper.test.js.map +0 -1
  57. package/lib/components/__tests__/done-button.test.js +0 -72
  58. package/lib/components/__tests__/done-button.test.js.map +0 -1
  59. package/lib/components/__tests__/toolbar-buttons.test.js +0 -277
  60. package/lib/components/__tests__/toolbar-buttons.test.js.map +0 -1
  61. package/lib/components/respArea/DragInTheBlank/__tests__/choice.test.js +0 -90
  62. package/lib/components/respArea/DragInTheBlank/__tests__/choice.test.js.map +0 -1
  63. package/lib/components/respArea/__tests__/MathTemplated.test.js +0 -217
  64. package/lib/components/respArea/__tests__/MathTemplated.test.js.map +0 -1
  65. package/lib/extensions/__tests__/css.test.js +0 -214
  66. package/lib/extensions/__tests__/css.test.js.map +0 -1
  67. package/lib/extensions/__tests__/custom-toolbar-wrapper.test.js +0 -175
  68. package/lib/extensions/__tests__/custom-toolbar-wrapper.test.js.map +0 -1
  69. package/lib/extensions/__tests__/divNode.test.js +0 -108
  70. package/lib/extensions/__tests__/divNode.test.js.map +0 -1
  71. package/lib/extensions/__tests__/ensure-empty-root-div.test.js +0 -50
  72. package/lib/extensions/__tests__/ensure-empty-root-div.test.js.map +0 -1
  73. package/lib/extensions/__tests__/ensure-list-item-content-is-div.test.js +0 -60
  74. package/lib/extensions/__tests__/ensure-list-item-content-is-div.test.js.map +0 -1
  75. package/lib/extensions/__tests__/extended-list-item.test.js +0 -13
  76. package/lib/extensions/__tests__/extended-list-item.test.js.map +0 -1
  77. package/lib/extensions/__tests__/extended-table-cell.test.js +0 -15
  78. package/lib/extensions/__tests__/extended-table-cell.test.js.map +0 -1
  79. package/lib/extensions/__tests__/extended-table.test.js +0 -200
  80. package/lib/extensions/__tests__/extended-table.test.js.map +0 -1
  81. package/lib/extensions/__tests__/image-component.test.js +0 -432
  82. package/lib/extensions/__tests__/image-component.test.js.map +0 -1
  83. package/lib/extensions/__tests__/image.test.js +0 -313
  84. package/lib/extensions/__tests__/image.test.js.map +0 -1
  85. package/lib/extensions/__tests__/math.test.js +0 -1411
  86. package/lib/extensions/__tests__/math.test.js.map +0 -1
  87. package/lib/extensions/__tests__/media-node-view.test.js +0 -307
  88. package/lib/extensions/__tests__/media-node-view.test.js.map +0 -1
  89. package/lib/extensions/__tests__/media.test.js +0 -292
  90. package/lib/extensions/__tests__/media.test.js.map +0 -1
  91. package/lib/extensions/__tests__/responseArea.test.js +0 -736
  92. package/lib/extensions/__tests__/responseArea.test.js.map +0 -1
  93. package/lib/utils/__tests__/helper.test.js +0 -107
  94. package/lib/utils/__tests__/helper.test.js.map +0 -1
  95. package/lib/utils/__tests__/toolbar.test.js +0 -38
  96. package/lib/utils/__tests__/toolbar.test.js.map +0 -1
@@ -1,1411 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof3 = require("@babel/runtime/helpers/typeof");
5
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
6
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
7
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
12
- var _react = _interopRequireDefault(require("react"));
13
- var _react2 = require("@testing-library/react");
14
- var _math = require("../math");
15
- var toolbarUtils = _interopRequireWildcard(require("../../utils/toolbar"));
16
- var _excluded = ["children"];
17
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
18
- 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; }
19
- 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; }
20
- jest.mock('@tiptap/react', function () {
21
- return {
22
- NodeViewWrapper: function NodeViewWrapper(_ref) {
23
- var children = _ref.children,
24
- props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
25
- return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
26
- "data-testid": "node-view-wrapper"
27
- }, props), children);
28
- },
29
- ReactNodeViewRenderer: jest.fn(function (component) {
30
- return component;
31
- })
32
- };
33
- });
34
- var mockCreatePortal = jest.fn(function (node) {
35
- return node;
36
- });
37
- jest.mock('react-dom', function () {
38
- return _objectSpread(_objectSpread({}, jest.requireActual('react-dom')), {}, {
39
- createPortal: function createPortal() {
40
- return mockCreatePortal.apply(void 0, arguments);
41
- }
42
- });
43
- });
44
- jest.mock('@pie-lib/math-toolbar', function () {
45
- var React = require('react');
46
- return {
47
- MathPreview: function MathPreview(_ref2) {
48
- var latex = _ref2.latex;
49
- return /*#__PURE__*/React.createElement("div", {
50
- "data-testid": "math-preview"
51
- }, latex);
52
- },
53
- MathToolbar: function MathToolbar(_ref3) {
54
- var latex = _ref3.latex,
55
- _onChange = _ref3.onChange,
56
- onDone = _ref3.onDone;
57
- var _React$useState = React.useState(latex),
58
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
59
- localLatex = _React$useState2[0],
60
- setLocalLatex = _React$useState2[1];
61
- return /*#__PURE__*/React.createElement("div", {
62
- "data-testid": "math-toolbar"
63
- }, /*#__PURE__*/React.createElement("input", {
64
- "data-testid": "math-input",
65
- value: localLatex,
66
- onChange: function onChange(e) {
67
- setLocalLatex(e.target.value);
68
- _onChange(e.target.value);
69
- }
70
- }), /*#__PURE__*/React.createElement("button", {
71
- "data-testid": "done-button",
72
- onClick: function onClick() {
73
- return onDone(localLatex);
74
- }
75
- }, "Done"));
76
- }
77
- };
78
- });
79
- jest.mock('@pie-lib/math-rendering', function () {
80
- return {
81
- wrapMath: function wrapMath(latex, wrapper) {
82
- return latex;
83
- }
84
- };
85
- });
86
- jest.mock('@tiptap/core', function () {
87
- return {
88
- Node: {
89
- create: jest.fn(function (config) {
90
- return config;
91
- })
92
- }
93
- };
94
- });
95
- jest.mock('prosemirror-state', function () {
96
- return {
97
- Plugin: jest.fn(function (config) {
98
- return config;
99
- }),
100
- PluginKey: jest.fn(function (key) {
101
- this.key = key;
102
- }),
103
- TextSelection: {
104
- create: jest.fn(function (doc, pos) {
105
- return {
106
- type: 'text',
107
- pos: pos
108
- };
109
- })
110
- },
111
- NodeSelection: {
112
- create: jest.fn(function (doc, pos) {
113
- return {
114
- type: 'node',
115
- pos: pos
116
- };
117
- })
118
- }
119
- };
120
- });
121
- describe('MathNode', function () {
122
- describe('configuration', function () {
123
- it('has correct name', function () {
124
- expect(_math.MathNode.name).toBe('math');
125
- });
126
- it('is inline', function () {
127
- expect(_math.MathNode.inline).toBe(true);
128
- });
129
- it('is in inline group', function () {
130
- expect(_math.MathNode.group).toBe('inline');
131
- });
132
- it('is atomic', function () {
133
- expect(_math.MathNode.atom).toBe(true);
134
- });
135
- });
136
- describe('addAttributes', function () {
137
- it('returns required attributes', function () {
138
- var attributes = _math.MathNode.addAttributes();
139
- expect(attributes).toHaveProperty('latex');
140
- expect(attributes).toHaveProperty('wrapper');
141
- expect(attributes).toHaveProperty('html');
142
- expect(attributes.latex).toEqual({
143
- "default": ''
144
- });
145
- expect(attributes.wrapper).toEqual({
146
- "default": null
147
- });
148
- expect(attributes.html).toEqual({
149
- "default": null
150
- });
151
- });
152
- });
153
- describe('parseHTML', function () {
154
- it('returns parsing rules for latex', function () {
155
- var rules = _math.MathNode.parseHTML();
156
- expect(Array.isArray(rules)).toBe(true);
157
- expect(rules).toHaveLength(2);
158
- expect(rules[0]).toHaveProperty('tag', 'span[data-latex]');
159
- });
160
- it('returns parsing rules for mathml', function () {
161
- var rules = _math.MathNode.parseHTML();
162
- expect(rules[1]).toHaveProperty('tag', 'span[data-type="mathml"]');
163
- });
164
- });
165
- describe('renderHTML', function () {
166
- it('renders mathml when html attribute is present', function () {
167
- var result = _math.MathNode.renderHTML({
168
- HTMLAttributes: {
169
- html: '<math><mi>x</mi></math>'
170
- }
171
- });
172
- expect(result[0]).toBe('span');
173
- expect(result[1]).toHaveProperty('data-type', 'mathml');
174
- });
175
- it('renders latex when html attribute is not present', function () {
176
- var result = _math.MathNode.renderHTML({
177
- HTMLAttributes: {
178
- latex: 'x^2'
179
- }
180
- });
181
- expect(result[0]).toBe('span');
182
- expect(result[1]).toHaveProperty('data-latex', '');
183
- expect(result[1]).toHaveProperty('data-raw', 'x^2');
184
- });
185
- });
186
- describe('addCommands', function () {
187
- it('returns insertMath command', function () {
188
- var commands = _math.MathNode.addCommands();
189
- expect(commands).toHaveProperty('insertMath');
190
- expect((0, _typeof2["default"])(commands.insertMath)).toBe('function');
191
- });
192
- it('insertMath opens the toolbar after inserting a math node', function () {
193
- var setToolbarOpenedSpy = jest.spyOn(toolbarUtils, 'setToolbarOpened');
194
- var mathNode = {
195
- type: {
196
- name: 'math'
197
- },
198
- nodeSize: 1
199
- };
200
- var tr = {
201
- insert: jest.fn().mockReturnThis(),
202
- setSelection: jest.fn().mockReturnThis(),
203
- doc: {}
204
- };
205
- var editor = {
206
- view: {
207
- state: {
208
- schema: {
209
- nodes: {
210
- math: {
211
- create: jest.fn(function () {
212
- return mathNode;
213
- })
214
- }
215
- }
216
- },
217
- selection: {
218
- $from: {
219
- pos: 1
220
- }
221
- }
222
- }
223
- }
224
- };
225
- var dispatch = jest.fn();
226
- var insertMath = _math.MathNode.addCommands().insertMath('x^2');
227
- insertMath({
228
- tr: tr,
229
- editor: editor,
230
- dispatch: dispatch
231
- });
232
- expect(tr.insert).toHaveBeenCalledWith(1, mathNode);
233
- expect(tr.setSelection).toHaveBeenCalled();
234
- expect(dispatch).toHaveBeenCalledWith(tr);
235
- expect(setToolbarOpenedSpy).toHaveBeenCalledWith(editor, true);
236
- setToolbarOpenedSpy.mockRestore();
237
- });
238
- });
239
- describe('addNodeView', function () {
240
- it('returns ReactNodeViewRenderer result', function () {
241
- var result = _math.MathNode.addNodeView();
242
- expect(result).toBeDefined();
243
- });
244
- });
245
- describe('addProseMirrorPlugins', function () {
246
- it('registers ensure-text-after-math and zero-width-space plugins', function () {
247
- var plugins = _math.MathNode.addProseMirrorPlugins();
248
- expect(plugins).toHaveLength(2);
249
- expect(plugins[0].appendTransaction).toBeDefined();
250
- expect(plugins[1].props.handleKeyDown).toBeDefined();
251
- });
252
- });
253
- });
254
- describe('EnsureTextAfterMathPlugin', function () {
255
- it('inserts a zero-width space after a math node when no text follows', function () {
256
- var plugin = (0, _math.EnsureTextAfterMathPlugin)('math');
257
- var textNode = {
258
- type: {
259
- name: 'text'
260
- }
261
- };
262
- var mathNode = {
263
- type: {
264
- name: 'math'
265
- },
266
- nodeSize: 3
267
- };
268
- var tr = {
269
- insert: jest.fn()
270
- };
271
- var newState = {
272
- schema: {
273
- text: jest.fn(function (value) {
274
- return {
275
- type: textNode.type,
276
- text: value
277
- };
278
- })
279
- },
280
- tr: tr,
281
- doc: {
282
- descendants: function descendants(cb) {
283
- return cb(mathNode, 5);
284
- },
285
- nodeAt: jest.fn(function () {
286
- return null;
287
- })
288
- }
289
- };
290
- var result = plugin.appendTransaction([{
291
- docChanged: true
292
- }], {}, newState);
293
- expect(tr.insert).toHaveBeenCalledWith(8, expect.anything());
294
- expect(result).toBe(tr);
295
- });
296
- it('does not insert when text already follows the math node', function () {
297
- var plugin = (0, _math.EnsureTextAfterMathPlugin)('math');
298
- var tr = {
299
- insert: jest.fn()
300
- };
301
- var mathNode = {
302
- type: {
303
- name: 'math'
304
- },
305
- nodeSize: 3
306
- };
307
- var newState = {
308
- schema: {
309
- text: jest.fn()
310
- },
311
- tr: tr,
312
- doc: {
313
- descendants: function descendants(cb) {
314
- return cb(mathNode, 5);
315
- },
316
- nodeAt: jest.fn(function () {
317
- return {
318
- type: {
319
- name: 'text'
320
- }
321
- };
322
- })
323
- }
324
- };
325
- var result = plugin.appendTransaction([{
326
- docChanged: true
327
- }], {}, newState);
328
- expect(tr.insert).not.toHaveBeenCalled();
329
- expect(result).toBeNull();
330
- });
331
- it('returns null when the document did not change', function () {
332
- var plugin = (0, _math.EnsureTextAfterMathPlugin)('math');
333
- var result = plugin.appendTransaction([{
334
- docChanged: false
335
- }], {}, {});
336
- expect(result).toBeNull();
337
- });
338
- });
339
- describe('ZeroWidthSpaceHandlingPlugin', function () {
340
- var createDocWithMathAndZwsp = function createDocWithMathAndZwsp() {
341
- var resolveOverrides = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
342
- return {
343
- resolve: jest.fn(function (pos) {
344
- return _objectSpread({
345
- nodeAfter: null,
346
- nodeBefore: null,
347
- pos: pos
348
- }, resolveOverrides[pos]);
349
- }),
350
- nodeAt: jest.fn(function (pos) {
351
- if (pos === 1) {
352
- return {
353
- type: {
354
- name: 'text'
355
- },
356
- textContent: "\u200B"
357
- };
358
- }
359
- if (pos === 0) {
360
- return {
361
- type: {
362
- name: 'math'
363
- },
364
- nodeSize: 1
365
- };
366
- }
367
- return null;
368
- })
369
- };
370
- };
371
- var createDocWithRegularTextBeforeCursor = function createDocWithRegularTextBeforeCursor() {
372
- return {
373
- resolve: jest.fn(function (pos) {
374
- return {
375
- nodeAfter: null,
376
- nodeBefore: null,
377
- pos: pos
378
- };
379
- }),
380
- nodeAt: jest.fn(function (pos) {
381
- if (pos === 1) {
382
- return {
383
- type: {
384
- name: 'text'
385
- },
386
- textContent: 'a'
387
- };
388
- }
389
- return null;
390
- })
391
- };
392
- };
393
- var createView = function createView() {
394
- var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
395
- _ref4$state = _ref4.state,
396
- stateOverrides = _ref4$state === void 0 ? {} : _ref4$state;
397
- var dispatch = jest.fn();
398
- var tr = {
399
- "delete": jest.fn().mockReturnThis(),
400
- setSelection: jest.fn().mockReturnThis()
401
- };
402
- return {
403
- state: _objectSpread({
404
- selection: {
405
- from: 2,
406
- empty: true
407
- },
408
- doc: createDocWithMathAndZwsp(),
409
- tr: tr
410
- }, stateOverrides),
411
- dispatch: dispatch
412
- };
413
- };
414
- describe('Backspace', function () {
415
- it('deletes the inline node and zero-width space before the cursor', function () {
416
- var view = createView();
417
- var handled = _math.ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, {
418
- key: 'Backspace'
419
- });
420
- expect(handled).toBe(true);
421
- expect(view.state.tr["delete"]).toHaveBeenCalledWith(0, 2);
422
- expect(view.dispatch).toHaveBeenCalledWith(view.state.tr);
423
- });
424
- it('returns false when regular text precedes the cursor', function () {
425
- var view = createView({
426
- state: {
427
- doc: createDocWithRegularTextBeforeCursor()
428
- }
429
- });
430
- var handled = _math.ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, {
431
- key: 'Backspace'
432
- });
433
- expect(handled).toBe(false);
434
- expect(view.state.tr["delete"]).not.toHaveBeenCalled();
435
- expect(view.dispatch).not.toHaveBeenCalled();
436
- });
437
- });
438
- describe('ArrowLeft', function () {
439
- it('selects the inline node before a zero-width space', function () {
440
- var mathNode = {
441
- nodeSize: 3
442
- };
443
- var view = createView({
444
- state: {
445
- doc: createDocWithMathAndZwsp({
446
- 0: {
447
- nodeAfter: mathNode,
448
- nodeBefore: null,
449
- pos: 0
450
- }
451
- })
452
- }
453
- });
454
- var _require = require('prosemirror-state'),
455
- NodeSelection = _require.NodeSelection;
456
- var handled = _math.ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, {
457
- key: 'ArrowLeft'
458
- });
459
- expect(handled).toBe(true);
460
- expect(view.state.doc.resolve).toHaveBeenCalledWith(0);
461
- expect(NodeSelection.create).toHaveBeenCalledWith(view.state.doc, 0);
462
- expect(view.dispatch).toHaveBeenCalled();
463
- });
464
- it('moves the text cursor before the zero-width space when no inline node precedes it', function () {
465
- var view = createView();
466
- var _require2 = require('prosemirror-state'),
467
- TextSelection = _require2.TextSelection;
468
- var handled = _math.ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, {
469
- key: 'ArrowLeft'
470
- });
471
- expect(handled).toBe(true);
472
- expect(view.state.doc.resolve).toHaveBeenCalledWith(0);
473
- expect(TextSelection.create).toHaveBeenCalledWith(view.state.doc, 0);
474
- expect(view.dispatch).toHaveBeenCalled();
475
- });
476
- it('returns false when regular text precedes the cursor', function () {
477
- var view = createView({
478
- state: {
479
- doc: createDocWithRegularTextBeforeCursor()
480
- }
481
- });
482
- var handled = _math.ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, {
483
- key: 'ArrowLeft'
484
- });
485
- expect(handled).toBe(false);
486
- expect(view.state.tr.setSelection).not.toHaveBeenCalled();
487
- expect(view.dispatch).not.toHaveBeenCalled();
488
- });
489
- });
490
- it('returns false for unrelated keys', function () {
491
- var view = createView();
492
- var handled = _math.ZeroWidthSpaceHandlingPlugin.props.handleKeyDown(view, {
493
- key: 'Enter'
494
- });
495
- expect(handled).toBe(false);
496
- });
497
- });
498
- describe('MathNodeView', function () {
499
- var createEditorElement = function createEditorElement() {
500
- var rect = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
501
- top: 0,
502
- left: 0,
503
- width: 600,
504
- height: 400
505
- };
506
- var element = document.createElement('div');
507
- Object.defineProperty(element, 'getBoundingClientRect', {
508
- value: jest.fn(function () {
509
- return rect;
510
- }),
511
- configurable: true
512
- });
513
- return element;
514
- };
515
- var createMockEditor = function createMockEditor() {
516
- return {
517
- state: {
518
- selection: {
519
- from: 0,
520
- to: 1,
521
- node: {
522
- type: {
523
- name: 'math'
524
- }
525
- }
526
- },
527
- tr: {
528
- setSelection: jest.fn().mockReturnThis(),
529
- setMeta: jest.fn().mockReturnThis()
530
- },
531
- doc: {}
532
- },
533
- view: {
534
- coordsAtPos: jest.fn(function () {
535
- return {
536
- top: 100,
537
- left: 50
538
- };
539
- }),
540
- dispatch: jest.fn()
541
- },
542
- options: {
543
- element: createEditorElement()
544
- },
545
- commands: {
546
- focus: jest.fn()
547
- },
548
- instanceId: 'editor-123',
549
- _toolbarOpened: false
550
- };
551
- };
552
- var mockNode = {
553
- attrs: {
554
- latex: 'x^2'
555
- },
556
- nodeSize: 1
557
- };
558
- var defaultProps;
559
- beforeEach(function () {
560
- jest.clearAllMocks();
561
- mockCreatePortal.mockImplementation(function (node) {
562
- return node;
563
- });
564
- defaultProps = {
565
- node: mockNode,
566
- updateAttributes: jest.fn(),
567
- editor: createMockEditor(),
568
- selected: false,
569
- options: {},
570
- getPos: jest.fn(function () {
571
- return 0;
572
- })
573
- };
574
- });
575
- it('renders without crashing', function () {
576
- var _render = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, defaultProps)),
577
- container = _render.container;
578
- expect(container).toBeInTheDocument();
579
- });
580
- it('renders NodeViewWrapper', function () {
581
- var _render2 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, defaultProps)),
582
- getByTestId = _render2.getByTestId;
583
- expect(getByTestId('node-view-wrapper')).toBeInTheDocument();
584
- });
585
- it('displays math preview', function () {
586
- var _render3 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, defaultProps)),
587
- getByTestId = _render3.getByTestId;
588
- expect(getByTestId('math-preview')).toBeInTheDocument();
589
- });
590
- it('shows toolbar when selected', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
591
- var _render4, getByTestId;
592
- return _regenerator["default"].wrap(function (_context) {
593
- while (1) switch (_context.prev = _context.next) {
594
- case 0:
595
- _render4 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
596
- selected: true
597
- }))), getByTestId = _render4.getByTestId;
598
- _context.next = 1;
599
- return (0, _react2.waitFor)(function () {
600
- expect(getByTestId('math-toolbar')).toBeInTheDocument();
601
- });
602
- case 1:
603
- case "end":
604
- return _context.stop();
605
- }
606
- }, _callee);
607
- })));
608
- it('does not show toolbar when not selected', function () {
609
- var _render5 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
610
- selected: false
611
- }))),
612
- queryByTestId = _render5.queryByTestId;
613
- expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
614
- });
615
- it('adds data-toolbar-for attribute with editor instanceId', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
616
- var _render6, container;
617
- return _regenerator["default"].wrap(function (_context2) {
618
- while (1) switch (_context2.prev = _context2.next) {
619
- case 0:
620
- _render6 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
621
- selected: true
622
- }))), container = _render6.container;
623
- _context2.next = 1;
624
- return (0, _react2.waitFor)(function () {
625
- var toolbar = container.querySelector('[data-toolbar-for]');
626
- expect(toolbar).toHaveAttribute('data-toolbar-for', 'editor-123');
627
- });
628
- case 1:
629
- case "end":
630
- return _context2.stop();
631
- }
632
- }, _callee2);
633
- })));
634
- describe('toolbar positioning', function () {
635
- it('positions relative to portal container using coordsAtPos', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
636
- var _render7, container;
637
- return _regenerator["default"].wrap(function (_context3) {
638
- while (1) switch (_context3.prev = _context3.next) {
639
- case 0:
640
- _render7 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
641
- selected: true
642
- }))), container = _render7.container;
643
- _context3.next = 1;
644
- return (0, _react2.waitFor)(function () {
645
- var toolbar = container.querySelector('[data-toolbar-for]');
646
- expect(toolbar).toBeInTheDocument();
647
- expect(toolbar.style.top).toBe('100px');
648
- expect(toolbar.style.left).toBe('50px');
649
- });
650
- case 1:
651
- case "end":
652
- return _context3.stop();
653
- }
654
- }, _callee3);
655
- })));
656
- it('offsets position by portal container getBoundingClientRect', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
657
- var containerEl, editor, _render8, container;
658
- return _regenerator["default"].wrap(function (_context4) {
659
- while (1) switch (_context4.prev = _context4.next) {
660
- case 0:
661
- containerEl = document.createElement('div');
662
- containerEl.getBoundingClientRect = jest.fn(function () {
663
- return {
664
- top: 100,
665
- left: 50,
666
- width: 600,
667
- height: 400
668
- };
669
- });
670
- editor = _objectSpread(_objectSpread({}, defaultProps.editor), {}, {
671
- _tiptapContainerEl: containerEl
672
- });
673
- _render8 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
674
- editor: editor,
675
- selected: true
676
- }))), container = _render8.container;
677
- _context4.next = 1;
678
- return (0, _react2.waitFor)(function () {
679
- var toolbar = container.querySelector('[data-toolbar-for]');
680
- expect(toolbar).toBeInTheDocument();
681
- expect(toolbar.style.top).toBe('0px');
682
- expect(toolbar.style.left).toBe('0px');
683
- });
684
- case 1:
685
- case "end":
686
- return _context4.stop();
687
- }
688
- }, _callee4);
689
- })));
690
- it('applies absolute positioning style to toolbar', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
691
- var _render9, container;
692
- return _regenerator["default"].wrap(function (_context5) {
693
- while (1) switch (_context5.prev = _context5.next) {
694
- case 0:
695
- _render9 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
696
- selected: true
697
- }))), container = _render9.container;
698
- _context5.next = 1;
699
- return (0, _react2.waitFor)(function () {
700
- var toolbar = container.querySelector('[data-toolbar-for]');
701
- expect(toolbar).toBeInTheDocument();
702
- expect(toolbar.style.position).toBe('absolute');
703
- });
704
- case 1:
705
- case "end":
706
- return _context5.stop();
707
- }
708
- }, _callee5);
709
- })));
710
- it('renders above other editor overlays with a high z-index', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee6() {
711
- var _render0, container;
712
- return _regenerator["default"].wrap(function (_context6) {
713
- while (1) switch (_context6.prev = _context6.next) {
714
- case 0:
715
- _render0 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
716
- selected: true
717
- }))), container = _render0.container;
718
- _context6.next = 1;
719
- return (0, _react2.waitFor)(function () {
720
- var toolbar = container.querySelector('[data-toolbar-for]');
721
- expect(toolbar).toBeInTheDocument();
722
- expect(toolbar.style.zIndex).toBe('1000');
723
- });
724
- case 1:
725
- case "end":
726
- return _context6.stop();
727
- }
728
- }, _callee6);
729
- })));
730
- it('updates position from coordsAtPos when selection changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee7() {
731
- var editor, _render1, container;
732
- return _regenerator["default"].wrap(function (_context7) {
733
- while (1) switch (_context7.prev = _context7.next) {
734
- case 0:
735
- editor = _objectSpread(_objectSpread({}, defaultProps.editor), {}, {
736
- view: _objectSpread(_objectSpread({}, defaultProps.editor.view), {}, {
737
- coordsAtPos: jest.fn(function () {
738
- return {
739
- top: 200,
740
- left: 150
741
- };
742
- }),
743
- dispatch: jest.fn()
744
- })
745
- });
746
- _render1 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
747
- editor: editor,
748
- selected: true
749
- }))), container = _render1.container;
750
- _context7.next = 1;
751
- return (0, _react2.waitFor)(function () {
752
- var toolbar = container.querySelector('[data-toolbar-for]');
753
- expect(toolbar).toBeInTheDocument();
754
- expect(toolbar.style.top).toBe('200px');
755
- expect(toolbar.style.left).toBe('150px');
756
- });
757
- case 1:
758
- case "end":
759
- return _context7.stop();
760
- }
761
- }, _callee7);
762
- })));
763
- it('clamps toolbar position to viewport margins', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9() {
764
- var originalInnerHeight, originalInnerWidth, editor, _render10, container, toolbar;
765
- return _regenerator["default"].wrap(function (_context9) {
766
- while (1) switch (_context9.prev = _context9.next) {
767
- case 0:
768
- originalInnerHeight = window.innerHeight;
769
- originalInnerWidth = window.innerWidth;
770
- Object.defineProperty(window, 'innerHeight', {
771
- configurable: true,
772
- writable: true,
773
- value: 200
774
- });
775
- Object.defineProperty(window, 'innerWidth', {
776
- configurable: true,
777
- writable: true,
778
- value: 300
779
- });
780
- editor = _objectSpread(_objectSpread({}, defaultProps.editor), {}, {
781
- view: _objectSpread(_objectSpread({}, defaultProps.editor.view), {}, {
782
- coordsAtPos: jest.fn(function () {
783
- return {
784
- top: 190,
785
- left: 280,
786
- bottom: 195
787
- };
788
- }),
789
- dispatch: jest.fn()
790
- })
791
- });
792
- _render10 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
793
- editor: editor,
794
- selected: true
795
- }))), container = _render10.container;
796
- _context9.next = 1;
797
- return (0, _react2.waitFor)(function () {
798
- toolbar = container.querySelector('[data-toolbar-for]');
799
- expect(toolbar).toBeInTheDocument();
800
- });
801
- case 1:
802
- Object.defineProperty(toolbar, 'offsetHeight', {
803
- configurable: true,
804
- value: 100
805
- });
806
- Object.defineProperty(toolbar, 'offsetWidth', {
807
- configurable: true,
808
- value: 150
809
- });
810
- _context9.next = 2;
811
- return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8() {
812
- return _regenerator["default"].wrap(function (_context8) {
813
- while (1) switch (_context8.prev = _context8.next) {
814
- case 0:
815
- window.dispatchEvent(new Event('resize'));
816
- _context8.next = 1;
817
- return new Promise(function (resolve) {
818
- return requestAnimationFrame(resolve);
819
- });
820
- case 1:
821
- case "end":
822
- return _context8.stop();
823
- }
824
- }, _callee8);
825
- })));
826
- case 2:
827
- _context9.next = 3;
828
- return (0, _react2.waitFor)(function () {
829
- expect(parseInt(toolbar.style.top, 10)).toBeLessThanOrEqual(200 - 100 - 8);
830
- expect(parseInt(toolbar.style.left, 10)).toBeLessThanOrEqual(300 - 150 - 8);
831
- expect(parseInt(toolbar.style.top, 10)).toBeGreaterThanOrEqual(8);
832
- expect(parseInt(toolbar.style.left, 10)).toBeGreaterThanOrEqual(8);
833
- });
834
- case 3:
835
- Object.defineProperty(window, 'innerHeight', {
836
- configurable: true,
837
- writable: true,
838
- value: originalInnerHeight
839
- });
840
- Object.defineProperty(window, 'innerWidth', {
841
- configurable: true,
842
- writable: true,
843
- value: originalInnerWidth
844
- });
845
- case 4:
846
- case "end":
847
- return _context9.stop();
848
- }
849
- }, _callee9);
850
- })));
851
- it('attaches scroll and resize listeners while toolbar is open', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee0() {
852
- var addSpy;
853
- return _regenerator["default"].wrap(function (_context0) {
854
- while (1) switch (_context0.prev = _context0.next) {
855
- case 0:
856
- addSpy = jest.spyOn(window, 'addEventListener');
857
- (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
858
- selected: true
859
- })));
860
- _context0.next = 1;
861
- return (0, _react2.waitFor)(function () {
862
- expect(addSpy).toHaveBeenCalledWith('scroll', expect.any(Function), true);
863
- expect(addSpy).toHaveBeenCalledWith('resize', expect.any(Function));
864
- });
865
- case 1:
866
- addSpy.mockRestore();
867
- case 2:
868
- case "end":
869
- return _context0.stop();
870
- }
871
- }, _callee0);
872
- })));
873
- it('portals toolbar into _tiptapContainerEl when available', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee1() {
874
- var containerEl, editor;
875
- return _regenerator["default"].wrap(function (_context1) {
876
- while (1) switch (_context1.prev = _context1.next) {
877
- case 0:
878
- containerEl = document.createElement('div');
879
- containerEl.getBoundingClientRect = jest.fn(function () {
880
- return {
881
- top: 0,
882
- left: 0,
883
- width: 600,
884
- height: 400
885
- };
886
- });
887
- editor = _objectSpread(_objectSpread({}, defaultProps.editor), {}, {
888
- _tiptapContainerEl: containerEl
889
- });
890
- mockCreatePortal.mockClear();
891
- (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
892
- editor: editor,
893
- selected: true
894
- })));
895
- _context1.next = 1;
896
- return (0, _react2.waitFor)(function () {
897
- expect(mockCreatePortal).toHaveBeenCalled();
898
- var lastCall = mockCreatePortal.mock.calls[mockCreatePortal.mock.calls.length - 1];
899
- expect(lastCall[1]).toBe(containerEl);
900
- });
901
- case 1:
902
- case "end":
903
- return _context1.stop();
904
- }
905
- }, _callee1);
906
- })));
907
- it('portals toolbar into document.body when _tiptapContainerEl is not set', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee10() {
908
- var editor;
909
- return _regenerator["default"].wrap(function (_context10) {
910
- while (1) switch (_context10.prev = _context10.next) {
911
- case 0:
912
- editor = _objectSpread(_objectSpread({}, defaultProps.editor), {}, {
913
- _tiptapContainerEl: undefined
914
- });
915
- mockCreatePortal.mockClear();
916
- (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
917
- editor: editor,
918
- selected: true
919
- })));
920
- _context10.next = 1;
921
- return (0, _react2.waitFor)(function () {
922
- expect(mockCreatePortal).toHaveBeenCalled();
923
- var lastCall = mockCreatePortal.mock.calls[mockCreatePortal.mock.calls.length - 1];
924
- expect(lastCall[1]).toBe(document.body);
925
- });
926
- case 1:
927
- case "end":
928
- return _context10.stop();
929
- }
930
- }, _callee10);
931
- })));
932
- });
933
- it('calls updateAttributes when latex changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee11() {
934
- var _render11, getByTestId;
935
- return _regenerator["default"].wrap(function (_context11) {
936
- while (1) switch (_context11.prev = _context11.next) {
937
- case 0:
938
- _render11 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
939
- selected: true
940
- }))), getByTestId = _render11.getByTestId;
941
- _context11.next = 1;
942
- return (0, _react2.waitFor)(function () {
943
- var input = getByTestId('math-input');
944
- _react2.fireEvent.change(input, {
945
- target: {
946
- value: 'y^2'
947
- }
948
- });
949
- });
950
- case 1:
951
- expect(defaultProps.updateAttributes).toHaveBeenCalledWith({
952
- latex: 'y^2'
953
- });
954
- case 2:
955
- case "end":
956
- return _context11.stop();
957
- }
958
- }, _callee11);
959
- })));
960
- it('closes toolbar and updates attributes when done', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee12() {
961
- var updateAttributes, _render12, getByTestId, doneButton;
962
- return _regenerator["default"].wrap(function (_context12) {
963
- while (1) switch (_context12.prev = _context12.next) {
964
- case 0:
965
- updateAttributes = jest.fn();
966
- _render12 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
967
- updateAttributes: updateAttributes,
968
- selected: true
969
- }))), getByTestId = _render12.getByTestId;
970
- _context12.next = 1;
971
- return (0, _react2.waitFor)(function () {
972
- expect(getByTestId('done-button')).toBeInTheDocument();
973
- });
974
- case 1:
975
- doneButton = getByTestId('done-button');
976
- _react2.fireEvent.click(doneButton);
977
- _context12.next = 2;
978
- return (0, _react2.waitFor)(function () {
979
- expect(updateAttributes).toHaveBeenCalledWith({
980
- latex: 'x^2'
981
- });
982
- });
983
- case 2:
984
- case "end":
985
- return _context12.stop();
986
- }
987
- }, _callee12);
988
- })));
989
- it('sets editor._toolbarOpened when toolbar is shown', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee13() {
990
- var _render13, getByTestId;
991
- return _regenerator["default"].wrap(function (_context13) {
992
- while (1) switch (_context13.prev = _context13.next) {
993
- case 0:
994
- _render13 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
995
- selected: true
996
- }))), getByTestId = _render13.getByTestId;
997
- _context13.next = 1;
998
- return (0, _react2.waitFor)(function () {
999
- expect(getByTestId('math-toolbar')).toBeInTheDocument();
1000
- expect(defaultProps.editor._toolbarOpened).toBe(true);
1001
- });
1002
- case 1:
1003
- case "end":
1004
- return _context13.stop();
1005
- }
1006
- }, _callee13);
1007
- })));
1008
- it('unsets editor._toolbarOpened when toolbar is closed and node is not selected', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee14() {
1009
- var _render14, getByTestId;
1010
- return _regenerator["default"].wrap(function (_context14) {
1011
- while (1) switch (_context14.prev = _context14.next) {
1012
- case 0:
1013
- _render14 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1014
- selected: false
1015
- }))), getByTestId = _render14.getByTestId;
1016
- _react2.fireEvent.click(getByTestId('math-preview'));
1017
- _context14.next = 1;
1018
- return (0, _react2.waitFor)(function () {
1019
- expect(getByTestId('math-toolbar')).toBeInTheDocument();
1020
- expect(defaultProps.editor._toolbarOpened).toBe(true);
1021
- });
1022
- case 1:
1023
- _react2.fireEvent.click(getByTestId('done-button'));
1024
- _context14.next = 2;
1025
- return (0, _react2.waitFor)(function () {
1026
- expect(defaultProps.editor._toolbarOpened).toBe(false);
1027
- });
1028
- case 2:
1029
- case "end":
1030
- return _context14.stop();
1031
- }
1032
- }, _callee14);
1033
- })));
1034
- it('keeps editor._toolbarOpened true while the math node remains selected', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee15() {
1035
- var _render15, getByTestId;
1036
- return _regenerator["default"].wrap(function (_context15) {
1037
- while (1) switch (_context15.prev = _context15.next) {
1038
- case 0:
1039
- _render15 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1040
- selected: true
1041
- }))), getByTestId = _render15.getByTestId;
1042
- _context15.next = 1;
1043
- return (0, _react2.waitFor)(function () {
1044
- expect(getByTestId('done-button')).toBeInTheDocument();
1045
- expect(defaultProps.editor._toolbarOpened).toBe(true);
1046
- });
1047
- case 1:
1048
- _react2.fireEvent.click(getByTestId('done-button'));
1049
- _context15.next = 2;
1050
- return (0, _react2.waitFor)(function () {
1051
- expect(defaultProps.editor._toolbarOpened).toBe(true);
1052
- });
1053
- case 2:
1054
- case "end":
1055
- return _context15.stop();
1056
- }
1057
- }, _callee15);
1058
- })));
1059
- it('closes toolbar on outside click and runs handleDone', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee16() {
1060
- var updateAttributes, editor, _require3, TextSelection, _render16, queryByTestId;
1061
- return _regenerator["default"].wrap(function (_context16) {
1062
- while (1) switch (_context16.prev = _context16.next) {
1063
- case 0:
1064
- updateAttributes = jest.fn();
1065
- editor = createMockEditor();
1066
- _require3 = require('prosemirror-state'), TextSelection = _require3.TextSelection;
1067
- _render16 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1068
- editor: editor,
1069
- updateAttributes: updateAttributes,
1070
- selected: true
1071
- }))), queryByTestId = _render16.queryByTestId;
1072
- _context16.next = 1;
1073
- return (0, _react2.waitFor)(function () {
1074
- expect(queryByTestId('math-toolbar')).toBeInTheDocument();
1075
- });
1076
- case 1:
1077
- _react2.fireEvent.click(document.body);
1078
- _context16.next = 2;
1079
- return (0, _react2.waitFor)(function () {
1080
- expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
1081
- expect(updateAttributes).toHaveBeenCalledWith({
1082
- latex: 'x^2'
1083
- });
1084
- expect(TextSelection.create).toHaveBeenCalledWith(editor.state.doc, 1);
1085
- expect(editor.state.tr.setSelection).toHaveBeenCalled();
1086
- expect(editor.view.dispatch).toHaveBeenCalledWith(editor.state.tr);
1087
- expect(editor.commands.focus).toHaveBeenCalled();
1088
- expect(editor._toolbarOpened).toBe(true);
1089
- });
1090
- case 2:
1091
- case "end":
1092
- return _context16.stop();
1093
- }
1094
- }, _callee16);
1095
- })));
1096
- it('re-registers click listener when node changes', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee17() {
1097
- var addEventListenerSpy, removeEventListenerSpy, nodeA, nodeB, _render17, rerender, initialCallCount;
1098
- return _regenerator["default"].wrap(function (_context17) {
1099
- while (1) switch (_context17.prev = _context17.next) {
1100
- case 0:
1101
- addEventListenerSpy = jest.spyOn(document, 'addEventListener');
1102
- removeEventListenerSpy = jest.spyOn(document, 'removeEventListener');
1103
- nodeA = {
1104
- attrs: {
1105
- latex: 'x^2'
1106
- }
1107
- };
1108
- nodeB = {
1109
- attrs: {
1110
- latex: 'y^2'
1111
- }
1112
- };
1113
- _render17 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1114
- node: nodeA,
1115
- selected: true
1116
- }))), rerender = _render17.rerender;
1117
- _context17.next = 1;
1118
- return (0, _react2.waitFor)(function () {
1119
- expect(addEventListenerSpy).toHaveBeenCalledWith('click', expect.any(Function));
1120
- });
1121
- case 1:
1122
- initialCallCount = addEventListenerSpy.mock.calls.length;
1123
- rerender(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1124
- node: nodeB,
1125
- selected: true
1126
- })));
1127
- _context17.next = 2;
1128
- return (0, _react2.waitFor)(function () {
1129
- expect(removeEventListenerSpy).toHaveBeenCalled();
1130
- expect(addEventListenerSpy.mock.calls.length).toBeGreaterThan(initialCallCount);
1131
- });
1132
- case 2:
1133
- addEventListenerSpy.mockRestore();
1134
- removeEventListenerSpy.mockRestore();
1135
- case 3:
1136
- case "end":
1137
- return _context17.stop();
1138
- }
1139
- }, _callee17);
1140
- })));
1141
- it('does not close toolbar when clicking the math node preview', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee18() {
1142
- var _render18, getByTestId, queryByTestId;
1143
- return _regenerator["default"].wrap(function (_context18) {
1144
- while (1) switch (_context18.prev = _context18.next) {
1145
- case 0:
1146
- _render18 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1147
- selected: true
1148
- }))), getByTestId = _render18.getByTestId, queryByTestId = _render18.queryByTestId;
1149
- _context18.next = 1;
1150
- return (0, _react2.waitFor)(function () {
1151
- expect(queryByTestId('math-toolbar')).toBeInTheDocument();
1152
- });
1153
- case 1:
1154
- _react2.fireEvent.click(getByTestId('math-preview'));
1155
- _context18.next = 2;
1156
- return (0, _react2.waitFor)(function () {
1157
- expect(queryByTestId('math-toolbar')).toBeInTheDocument();
1158
- });
1159
- case 2:
1160
- case "end":
1161
- return _context18.stop();
1162
- }
1163
- }, _callee18);
1164
- })));
1165
- describe('unique math-node class per instance', function () {
1166
- var dateNowSpy;
1167
- beforeEach(function () {
1168
- var timestamp = 1000;
1169
- dateNowSpy = jest.spyOn(Date, 'now').mockImplementation(function () {
1170
- return timestamp++;
1171
- });
1172
- });
1173
- afterEach(function () {
1174
- dateNowSpy.mockRestore();
1175
- });
1176
-
1177
- // The wrapper is an emotion styled() component, so className also carries
1178
- // emotion's generated class - assert on the math-node token, not equality.
1179
- it('assigns a timestamp-based class to NodeViewWrapper', function () {
1180
- var _render19 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, defaultProps)),
1181
- getByTestId = _render19.getByTestId;
1182
- var wrapper = getByTestId('node-view-wrapper');
1183
- expect(Array.from(wrapper.classList).some(function (c) {
1184
- return /^math-node-\d+$/.test(c);
1185
- })).toBe(true);
1186
- });
1187
- it('assigns a different class to each MathNodeView instance', function () {
1188
- var _render20 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_math.MathNodeView, defaultProps), /*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1189
- node: {
1190
- attrs: {
1191
- latex: 'y^2'
1192
- }
1193
- }
1194
- })))),
1195
- getAllByTestId = _render20.getAllByTestId;
1196
- var wrappers = getAllByTestId('node-view-wrapper');
1197
- var mathNodeClass = function mathNodeClass(el) {
1198
- return Array.from(el.classList).find(function (c) {
1199
- return c.startsWith('math-node-');
1200
- });
1201
- };
1202
- expect(mathNodeClass(wrappers[0])).toBe('math-node-1000');
1203
- expect(mathNodeClass(wrappers[1])).toBe('math-node-1001');
1204
- // and they must differ
1205
- expect(mathNodeClass(wrappers[0])).not.toBe(mathNodeClass(wrappers[1]));
1206
- });
1207
- it('closes toolbar when clicking a different math node', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee19() {
1208
- var updateAttributes, editorA, editorB, _render21, getAllByTestId, queryAllByTestId, secondPreview;
1209
- return _regenerator["default"].wrap(function (_context19) {
1210
- while (1) switch (_context19.prev = _context19.next) {
1211
- case 0:
1212
- updateAttributes = jest.fn();
1213
- editorA = createMockEditor();
1214
- editorB = createMockEditor();
1215
- _render21 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1216
- editor: editorA,
1217
- updateAttributes: updateAttributes,
1218
- selected: false
1219
- })), /*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1220
- editor: editorB,
1221
- node: {
1222
- attrs: {
1223
- latex: 'y^2'
1224
- }
1225
- },
1226
- selected: false
1227
- })))), getAllByTestId = _render21.getAllByTestId, queryAllByTestId = _render21.queryAllByTestId;
1228
- _react2.fireEvent.click(getAllByTestId('math-preview')[0]);
1229
- _context19.next = 1;
1230
- return (0, _react2.waitFor)(function () {
1231
- expect(queryAllByTestId('math-toolbar')).toHaveLength(1);
1232
- });
1233
- case 1:
1234
- secondPreview = getAllByTestId('math-preview')[1];
1235
- _react2.fireEvent.click(secondPreview);
1236
- _context19.next = 2;
1237
- return (0, _react2.waitFor)(function () {
1238
- expect(queryAllByTestId('math-toolbar')).toHaveLength(1);
1239
- expect(updateAttributes).toHaveBeenCalledWith({
1240
- latex: 'x^2'
1241
- });
1242
- expect(editorA._toolbarOpened).toBe(false);
1243
- expect(getAllByTestId('math-input')[0]).toHaveValue('y^2');
1244
- });
1245
- case 2:
1246
- case "end":
1247
- return _context19.stop();
1248
- }
1249
- }, _callee19);
1250
- })));
1251
- });
1252
- describe('selection-based toolbar guard', function () {
1253
- it('opens toolbar when selected transitions to true and the editor has a NodeSelection on math', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee20() {
1254
- var _render22, queryByTestId, rerender;
1255
- return _regenerator["default"].wrap(function (_context20) {
1256
- while (1) switch (_context20.prev = _context20.next) {
1257
- case 0:
1258
- _render22 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1259
- selected: false
1260
- }))), queryByTestId = _render22.queryByTestId, rerender = _render22.rerender;
1261
- expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
1262
- rerender(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1263
- selected: true
1264
- })));
1265
- _context20.next = 1;
1266
- return (0, _react2.waitFor)(function () {
1267
- expect(queryByTestId('math-toolbar')).toBeInTheDocument();
1268
- });
1269
- case 1:
1270
- case "end":
1271
- return _context20.stop();
1272
- }
1273
- }, _callee20);
1274
- })));
1275
- it('does not open toolbar when selected briefly becomes true but editor selection has no node (Cmd+A / drag case)', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee22() {
1276
- var editor, _render23, queryByTestId, rerender;
1277
- return _regenerator["default"].wrap(function (_context22) {
1278
- while (1) switch (_context22.prev = _context22.next) {
1279
- case 0:
1280
- editor = _objectSpread(_objectSpread({}, defaultProps.editor), {}, {
1281
- state: _objectSpread(_objectSpread({}, defaultProps.editor.state), {}, {
1282
- selection: {
1283
- from: 0,
1284
- to: 100
1285
- } // no .node — TextSelection / AllSelection shape
1286
- })
1287
- });
1288
- _render23 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1289
- editor: editor,
1290
- selected: false
1291
- }))), queryByTestId = _render23.queryByTestId, rerender = _render23.rerender;
1292
- rerender(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1293
- editor: editor,
1294
- selected: true
1295
- })));
1296
- _context22.next = 1;
1297
- return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee21() {
1298
- return _regenerator["default"].wrap(function (_context21) {
1299
- while (1) switch (_context21.prev = _context21.next) {
1300
- case 0:
1301
- case "end":
1302
- return _context21.stop();
1303
- }
1304
- }, _callee21);
1305
- })));
1306
- case 1:
1307
- expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
1308
- case 2:
1309
- case "end":
1310
- return _context22.stop();
1311
- }
1312
- }, _callee22);
1313
- })));
1314
- it('does not open toolbar when selected briefly becomes true but NodeSelection targets a non-math node', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee24() {
1315
- var editor, _render24, queryByTestId, rerender;
1316
- return _regenerator["default"].wrap(function (_context24) {
1317
- while (1) switch (_context24.prev = _context24.next) {
1318
- case 0:
1319
- editor = _objectSpread(_objectSpread({}, defaultProps.editor), {}, {
1320
- state: _objectSpread(_objectSpread({}, defaultProps.editor.state), {}, {
1321
- selection: {
1322
- from: 0,
1323
- to: 1,
1324
- node: {
1325
- type: {
1326
- name: 'image'
1327
- }
1328
- }
1329
- }
1330
- })
1331
- });
1332
- _render24 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1333
- editor: editor,
1334
- selected: false
1335
- }))), queryByTestId = _render24.queryByTestId, rerender = _render24.rerender;
1336
- rerender(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1337
- editor: editor,
1338
- selected: true
1339
- })));
1340
- _context24.next = 1;
1341
- return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee23() {
1342
- return _regenerator["default"].wrap(function (_context23) {
1343
- while (1) switch (_context23.prev = _context23.next) {
1344
- case 0:
1345
- case "end":
1346
- return _context23.stop();
1347
- }
1348
- }, _callee23);
1349
- })));
1350
- case 1:
1351
- expect(queryByTestId('math-toolbar')).not.toBeInTheDocument();
1352
- case 2:
1353
- case "end":
1354
- return _context24.stop();
1355
- }
1356
- }, _callee24);
1357
- })));
1358
- });
1359
- it('does not close toolbar when clicking equation editor dropdown', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee25() {
1360
- var _render25, queryByTestId, dropdown;
1361
- return _regenerator["default"].wrap(function (_context25) {
1362
- while (1) switch (_context25.prev = _context25.next) {
1363
- case 0:
1364
- _render25 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1365
- selected: true
1366
- }))), queryByTestId = _render25.queryByTestId;
1367
- _context25.next = 1;
1368
- return (0, _react2.waitFor)(function () {
1369
- expect(queryByTestId('math-toolbar')).toBeInTheDocument();
1370
- });
1371
- case 1:
1372
- // Simulate MUI Select's portal dropdown container.
1373
- dropdown = document.createElement('div');
1374
- dropdown.id = 'equation-editor-select-listbox';
1375
- document.body.appendChild(dropdown);
1376
- _react2.fireEvent.click(dropdown);
1377
- _context25.next = 2;
1378
- return (0, _react2.waitFor)(function () {
1379
- expect(queryByTestId('math-toolbar')).toBeInTheDocument();
1380
- });
1381
- case 2:
1382
- document.body.removeChild(dropdown);
1383
- case 3:
1384
- case "end":
1385
- return _context25.stop();
1386
- }
1387
- }, _callee25);
1388
- })));
1389
- it('renders with empty latex', function () {
1390
- var nodeWithEmptyLatex = {
1391
- attrs: {
1392
- latex: ''
1393
- }
1394
- };
1395
- var _render26 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, (0, _extends2["default"])({}, defaultProps, {
1396
- node: nodeWithEmptyLatex
1397
- }))),
1398
- getByTestId = _render26.getByTestId;
1399
- expect(getByTestId('math-preview')).toBeInTheDocument();
1400
- });
1401
- it('has correct styling on NodeViewWrapper', function () {
1402
- var _render27 = (0, _react2.render)(/*#__PURE__*/_react["default"].createElement(_math.MathNodeView, defaultProps)),
1403
- getByTestId = _render27.getByTestId;
1404
- var wrapper = getByTestId('node-view-wrapper');
1405
- expect(wrapper).toHaveStyle({
1406
- display: 'inline-flex',
1407
- cursor: 'pointer'
1408
- });
1409
- });
1410
- });
1411
- //# sourceMappingURL=math.test.js.map