156 lines
6.0 KiB
JavaScript
Raw Normal View History

2018-10-18 19:21:57 +02:00
import Delta from 'quill-delta';
import { Range } from '../../../core/selection';
import Quill from '../../../core';
describe('Clipboard', function() {
describe('events', function() {
beforeEach(function() {
this.quill = this.initialize(Quill, '<h1>0123</h1><p>5<em>67</em>8</p>');
this.quill.setSelection(2, 5);
});
it('paste', function(done) {
this.quill.clipboard.container.innerHTML = '<strong>|</strong>';
this.quill.clipboard.onPaste({});
setTimeout(() => {
expect(this.quill.root).toEqualHTML('<p>01<strong>|</strong><em>7</em>8</p>');
expect(this.quill.getSelection()).toEqual(new Range(3));
done();
}, 2);
});
it('selection-change', function(done) {
let handler = {
change: function() {}
};
spyOn(handler, 'change');
this.quill.on('selection-change', handler.change);
this.quill.clipboard.container.innerHTML = '0';
this.quill.clipboard.onPaste({});
setTimeout(function() {
expect(handler.change).not.toHaveBeenCalled();
done();
}, 2);
});
});
describe('convert', function() {
beforeEach(function() {
let quill = this.initialize(Quill, '');
this.clipboard = quill.clipboard;
});
it('plain text', function() {
let delta = this.clipboard.convert('simple plain text');
expect(delta).toEqual(new Delta().insert('simple plain text'));
});
it('whitespace', function() {
let html =
'<div> 0 </div><div> <div> 1 2 <span> 3 </span> 4 </div> </div>' +
'<div><span>5 </span><span>6 </span><span> 7</span><span> 8</span></div>';
let delta = this.clipboard.convert(html);
expect(delta).toEqual(new Delta().insert('0\n1 2 3 4\n5 6 7 8'));
});
it('inline whitespace', function() {
let html = '<p>0 <strong>1</strong> 2</p>';
let delta = this.clipboard.convert(html);
expect(delta).toEqual(new Delta().insert('0 ').insert('1', { bold: true }).insert(' 2'));
});
it('intentional whitespace', function() {
let html = '<span>0&nbsp;<strong>1</strong>&nbsp;2</span>';
let delta = this.clipboard.convert(html);
expect(delta).toEqual(new Delta().insert('0\u00a0').insert('1', { bold: true }).insert('\u00a02'));
});
it('consecutive intentional whitespace', function() {
let html = '<strong>&nbsp;&nbsp;1&nbsp;&nbsp;</strong>';
let delta = this.clipboard.convert(html);
expect(delta).toEqual(new Delta().insert('\u00a0\u00a01\u00a0\u00a0', { bold: true }));
});
it('break', function() {
let html = '<div>0<br>1</div><div>2<br></div><div>3</div><div><br>4</div><div><br></div><div>5</div>';
let delta = this.clipboard.convert(html);
expect(delta).toEqual(new Delta().insert('0\n1\n2\n3\n\n4\n\n5'));
});
it('mixed inline and block', function() {
let delta = this.clipboard.convert('<div>One<div>Two</div></div>');
expect(delta).toEqual(new Delta().insert('One\nTwo'));
});
it('alias', function() {
let delta = this.clipboard.convert('<b>Bold</b><i>Italic</i>');
expect(delta).toEqual(new Delta().insert('Bold', { bold: true }).insert('Italic', { italic: true }));
});
it('pre', function() {
let html = '<div style="white-space: pre;"> 01 \n 23 </div>';
let delta = this.clipboard.convert(html);
expect(delta).toEqual(new Delta().insert(' 01 \n 23 '));
});
it('nested list', function() {
let delta = this.clipboard.convert('<ol><li>One</li><li class="ql-indent-1">Alpha</li></ol>');
expect(delta).toEqual(new Delta().insert('One\n', { list: 'ordered' })
.insert('Alpha\n', { list: 'ordered', indent: 1 }));
});
it('html nested list', function() {
let delta = this.clipboard.convert('<ol><li>One<ol><li>Alpha</li><li>Beta</li></ol></li></ol>');
expect(delta).toEqual(new Delta().insert('One\nAlpha', { list: 'ordered' })
.insert('\n', { list: 'ordered', indent: 1 })
.insert('Beta', { list: 'ordered' })
.insert('\n', { list: 'ordered', indent: 1 }));
});
it('embeds', function() {
let delta = this.clipboard.convert('<div>01<img src="/assets/favicon.png" height="200" width="300">34</div>');
let expected = new Delta()
.insert('01')
.insert({ image: '/assets/favicon.png' }, { height: '200', width: '300' })
.insert('34');
expect(delta).toEqual(expected);
});
it('block embed', function() {
let delta = this.clipboard.convert('<p>01</p><iframe src="#"></iframe><p>34</p>');
expect(delta).toEqual(new Delta().insert('01\n').insert({ video: '#' }).insert('34'));
});
it('attributor and style match', function() {
let delta = this.clipboard.convert('<p style="direction:rtl;">Test</p>');
expect(delta).toEqual(new Delta().insert('Test\n', { direction: 'rtl' }));
});
it('nested styles', function() {
let delta = this.clipboard.convert('<span style="color: red;"><span style="color: blue;">Test</span></span>');
expect(delta).toEqual(new Delta().insert('Test', { color: 'blue' }));
})
it('custom matcher', function() {
this.clipboard.addMatcher(Node.TEXT_NODE, function(node, delta) {
let index = 0;
let regex = /https?:\/\/[^\s]+/g;
let match = null;
let composer = new Delta();
while ((match = regex.exec(node.data)) !== null) {
composer.retain(match.index - index);
index = regex.lastIndex;
composer.retain(match[0].length, { link: match[0] });
}
return delta.compose(composer);
});
let delta = this.clipboard.convert('http://github.com https://quilljs.com');
let expected = new Delta().insert('http://github.com', { link: 'http://github.com' })
.insert(' ')
.insert('https://quilljs.com', { link: 'https://quilljs.com' });
expect(delta).toEqual(expected);
});
});
});