@@ -13,6 +13,10 @@ const P1 = 'Call me Ishmael. Some years ago—never mind how long precisely-havi
13
13
const P2 = 'There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.' ;
14
14
const HOST = 'http://127.0.0.1:8080' ;
15
15
16
+ function sanitizeTableHtml ( html ) {
17
+ return html . replace ( / ( < \w + ) ( ( \s + c l a s s \s * = \s * " [ ^ " ] * " ) | ( \s + d a t a - [ \w - ] + \s * = \s * " [ ^ " ] * " ) ) * ( \s * > ) / gi, '$1$5' ) ;
18
+ }
19
+
16
20
describe ( 'quill' , function ( ) {
17
21
it ( 'compose an epic' , async function ( ) {
18
22
const browser = await puppeteer . launch ( {
@@ -249,6 +253,210 @@ describe('quill', function () {
249
253
} ) ;
250
254
} ) ;
251
255
256
+ describe ( 'table header: ' , function ( ) {
257
+ it ( 'cell should not be removed on typing if it is selected' , async function ( ) {
258
+ const browser = await puppeteer . launch ( {
259
+ headless : false ,
260
+ } ) ;
261
+ const page = await browser . newPage ( ) ;
262
+
263
+ await page . goto ( `${ HOST } /table_header.html` ) ;
264
+ await page . waitForSelector ( '.ql-editor' , { timeout : 10000 } ) ;
265
+
266
+ await page . click ( '[data-table-cell="3"]' ) ;
267
+
268
+ await page . keyboard . down ( 'Shift' ) ;
269
+ await page . keyboard . press ( 'ArrowLeft' ) ;
270
+ await page . keyboard . press ( 'ArrowLeft' ) ;
271
+ await page . keyboard . up ( 'Shift' ) ;
272
+
273
+ await page . keyboard . press ( 'c' ) ;
274
+
275
+ const html = await page . $eval ( '.ql-editor' , ( e ) => e . innerHTML ) ;
276
+ const sanitizeHtml = sanitizeTableHtml ( html ) ;
277
+ expect ( sanitizeHtml ) . toEqual (
278
+ `
279
+ <table>
280
+ <thead>
281
+ <tr>
282
+ <th><p>1</p></th>
283
+ <th><p>2c</p></th>
284
+ <th><p><br></p></th>
285
+ </tr>
286
+ </thead>
287
+ </table>
288
+ <p><br></p>
289
+ ` . replace ( / \s / g, '' ) ,
290
+ ) ;
291
+ } ) ;
292
+ } ) ;
293
+
294
+ describe ( 'table:' , function ( ) {
295
+ it ( 'cell should not be removed on typing if it is selected' , async function ( ) {
296
+ const browser = await puppeteer . launch ( {
297
+ headless : false ,
298
+ } ) ;
299
+ const page = await browser . newPage ( ) ;
300
+
301
+ await page . goto ( `${ HOST } /table.html` ) ;
302
+ await page . waitForSelector ( '.ql-editor' , { timeout : 10000 } ) ;
303
+
304
+ await page . click ( '[data-table-cell="3"]' ) ;
305
+
306
+ await page . keyboard . down ( 'Shift' ) ;
307
+ await page . keyboard . press ( 'ArrowLeft' ) ;
308
+ await page . keyboard . press ( 'ArrowLeft' ) ;
309
+ await page . keyboard . up ( 'Shift' ) ;
310
+
311
+ await page . keyboard . press ( 'c' ) ;
312
+
313
+ const html = await page . $eval ( '.ql-editor' , ( e ) => e . innerHTML ) ;
314
+ const sanitizeHtml = sanitizeTableHtml ( html ) ;
315
+ expect ( sanitizeHtml ) . toEqual (
316
+ `
317
+ <table>
318
+ <tbody>
319
+ <tr>
320
+ <td><p>1</p></td>
321
+ <td><p>2c</p></td>
322
+ <td><p><br></p></td>
323
+ </tr>
324
+ </tbody>
325
+ </table>
326
+ <p><br></p>
327
+ ` . replace ( / \s / g, '' ) ,
328
+ ) ;
329
+ } ) ;
330
+
331
+ it ( 'backspace press on the position after table should remove an empty line and not add it to the cell' , async function ( ) {
332
+ const browser = await puppeteer . launch ( {
333
+ headless : false ,
334
+ } ) ;
335
+ const page = await browser . newPage ( ) ;
336
+
337
+ await page . goto ( `${ HOST } /table.html` ) ;
338
+ await page . waitForSelector ( '.ql-editor' , { timeout : 10000 } ) ;
339
+
340
+ await page . click ( '[data-table-cell="3"]' ) ;
341
+ await page . keyboard . press ( 'ArrowRight' ) ;
342
+ await page . keyboard . press ( 'Backspace' ) ;
343
+
344
+ const html = await page . $eval ( '.ql-editor' , ( e ) => e . innerHTML ) ;
345
+ const sanitizeHtml = sanitizeTableHtml ( html ) ;
346
+ expect ( sanitizeHtml ) . toEqual (
347
+ `
348
+ <table>
349
+ <tbody>
350
+ <tr>
351
+ <td><p>1</p></td>
352
+ <td><p>2</p></td>
353
+ <td><p>3</p></td>
354
+ </tr>
355
+ </tbody>
356
+ </table>
357
+ ` . replace ( / \s / g, '' ) ,
358
+ ) ;
359
+ } ) ;
360
+
361
+ it ( 'backspace in multiline cell should work as usual' , async function ( ) {
362
+ const browser = await puppeteer . launch ( {
363
+ headless : false ,
364
+ } ) ;
365
+ const page = await browser . newPage ( ) ;
366
+
367
+ await page . goto ( `${ HOST } /table.html` ) ;
368
+ await page . waitForSelector ( '.ql-editor' , { timeout : 10000 } ) ;
369
+
370
+ await page . click ( '[data-table-cell="3"]' ) ;
371
+ await page . keyboard . press ( '4' ) ;
372
+ await page . keyboard . press ( 'Enter' ) ;
373
+ await page . keyboard . press ( 'Backspace' ) ;
374
+ await page . keyboard . press ( 'Backspace' ) ;
375
+
376
+ const html = await page . $eval ( '.ql-editor' , ( e ) => e . innerHTML ) ;
377
+ const sanitizeHtml = sanitizeTableHtml ( html ) ;
378
+ expect ( sanitizeHtml ) . toEqual (
379
+ `
380
+ <table>
381
+ <tbody>
382
+ <tr>
383
+ <td><p>1</p></td>
384
+ <td><p>2</p></td>
385
+ <td><p>3</p></td>
386
+ </tr>
387
+ </tbody>
388
+ </table>
389
+ <p><br></p>
390
+ ` . replace ( / \s / g, '' ) ,
391
+ ) ;
392
+ } ) ;
393
+
394
+ it ( 'backspace press on the position after table should only move a caret to cell if next line is not empty' , async function ( ) {
395
+ const browser = await puppeteer . launch ( {
396
+ headless : false ,
397
+ } ) ;
398
+ const page = await browser . newPage ( ) ;
399
+
400
+ await page . goto ( `${ HOST } /table.html` ) ;
401
+ await page . waitForSelector ( '.ql-editor' , { timeout : 10000 } ) ;
402
+
403
+ await page . click ( '[data-table-cell="3"]' ) ;
404
+ await page . keyboard . press ( 'ArrowRight' ) ;
405
+ await page . keyboard . press ( 'g' ) ;
406
+ await page . keyboard . press ( 'ArrowLeft' ) ;
407
+ await page . keyboard . press ( 'Backspace' ) ;
408
+ await page . keyboard . press ( 'w' ) ;
409
+
410
+ const html = await page . $eval ( '.ql-editor' , ( e ) => e . innerHTML ) ;
411
+ const sanitizeHtml = sanitizeTableHtml ( html ) ;
412
+ expect ( sanitizeHtml ) . toEqual (
413
+ `
414
+ <table>
415
+ <tbody>
416
+ <tr>
417
+ <td><p>1</p></td>
418
+ <td><p>2</p></td>
419
+ <td><p>3w</p></td>
420
+ </tr>
421
+ </tbody>
422
+ </table>
423
+ <p>g</p>
424
+ ` . replace ( / \s / g, '' ) ,
425
+ ) ;
426
+ } ) ;
427
+
428
+ it ( 'backspace press on the position after table should remove empty line and move caret to a cell if next line is empty' , async function ( ) {
429
+ const browser = await puppeteer . launch ( {
430
+ headless : false ,
431
+ } ) ;
432
+ const page = await browser . newPage ( ) ;
433
+
434
+ await page . goto ( `${ HOST } /table.html` ) ;
435
+ await page . waitForSelector ( '.ql-editor' , { timeout : 10000 } ) ;
436
+
437
+ await page . click ( '[data-table-cell="3"]' ) ;
438
+ await page . keyboard . press ( 'ArrowRight' ) ;
439
+ await page . keyboard . press ( 'Backspace' ) ;
440
+ await page . keyboard . press ( 'w' ) ;
441
+
442
+ const html = await page . $eval ( '.ql-editor' , ( e ) => e . innerHTML ) ;
443
+ const sanitizeHtml = sanitizeTableHtml ( html ) ;
444
+ expect ( sanitizeHtml ) . toEqual (
445
+ `
446
+ <table>
447
+ <tbody>
448
+ <tr>
449
+ <td><p>1</p></td>
450
+ <td><p>2</p></td>
451
+ <td><p>3w</p></td>
452
+ </tr>
453
+ </tbody>
454
+ </table>
455
+ ` . replace ( / \s / g, '' ) ,
456
+ ) ;
457
+ } ) ;
458
+ } ) ;
459
+
252
460
// Copy/paste emulation des not working on Mac. See https://github.com/puppeteer/puppeteer/issues/1313
253
461
if ( ! isMac ) {
254
462
describe ( 'List copy/pasting into table' , function ( ) {
0 commit comments