156 lines
6.0 KiB
JavaScript
Executable File
156 lines
6.0 KiB
JavaScript
Executable File
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 <strong>1</strong> 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> 1 </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);
|
|
});
|
|
});
|
|
});
|