Skip to content

Commit

Permalink
add class to ui node
Browse files Browse the repository at this point in the history
  • Loading branch information
@jhchen
jhchen committed Jul 20, 2018
1 parent 55b9b10 commit 6e40125
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 44 deletions.
1 change: 1 addition & 0 deletions modules/syntax.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@ class Syntax extends Module {
this.quill.on(Quill.events.SCROLL_BLOT_MOUNT, blot => {
if (!(blot instanceof SyntaxCodeBlockContainer)) return;
const select = this.quill.root.ownerDocument.createElement('select');
select.classList.add('ql-ui');
this.options.languages.forEach(({ key, label }) => {
const option = select.ownerDocument.createElement('option');
option.textContent = label;
Expand Down
7 changes: 6 additions & 1 deletion test/helpers/unit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,13 +36,18 @@ function compareApproximately(actual, expected, tolerance) {
};
}

function compareHTML(actual, expected, ignoreClassId) {
function compareHTML(actual, expected, ignoreClassId, ignoreUI = true) {
const [div1, div2] = [actual, expected].map(function(html) {
if (html instanceof HTMLElement) {
html = html.innerHTML;
}
const container = document.createElement('div');
container.innerHTML = html.replace(/\n\s*/g, '');
if (ignoreUI) {
Array.from(container.querySelectorAll('.ql-ui')).forEach(node => {
node.remove();
});
}
return container;
});
let ignoredAttributes = ['width', 'height', 'data-row', 'contenteditable'];
Expand Down
64 changes: 21 additions & 43 deletions test/unit/modules/syntax.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,6 @@ describe('Syntax', function() {
it('initialize', function() {
expect(this.quill.root).toEqualHTML(
`<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
<div class="ql-code-block" data-language="javascript">var test = 1;</div>
<div class="ql-code-block" data-language="javascript">var bugz = 0;</div>
</div>
Expand All @@ -64,10 +60,6 @@ describe('Syntax', function() {
setTimeout(() => {
expect(this.quill.root).toEqualHTML(
`<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> test = <span class="ql-token hljs-number">1</span>;</div>
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> bugz = <span class="ql-token hljs-number">0</span>;</div>
</div>
Expand All @@ -90,10 +82,6 @@ describe('Syntax', function() {
setTimeout(() => {
expect(this.quill.root).toEqualHTML(`
<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> test = <span class="ql-token hljs-number">1</span>;</div>
</div>
<p>var bugz</p>`);
Expand All @@ -112,10 +100,6 @@ describe('Syntax', function() {
setTimeout(() => {
expect(this.quill.root).toEqualHTML(`
<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
<div class="ql-code-block" data-language="ruby">var test = <span class="ql-token hljs-number">1</span>;</div>
<div class="ql-code-block" data-language="ruby">var bugz = <span class="ql-token hljs-number">0</span>;</div>
</div>
Expand All @@ -138,10 +122,6 @@ describe('Syntax', function() {
expect(this.quill.root).toEqualHTML(`
<p>var test = 1;</p>
<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> bugz = <span class="ql-token hljs-number">0</span>;</div>
</div>
<p><br></p>`);
Expand All @@ -158,23 +138,27 @@ describe('Syntax', function() {
it('split container', function(done) {
this.quill.updateContents(new Delta().retain(14).insert('\n'));
setTimeout(() => {
expect(this.quill.root).toEqualHTML(`
expect(this.quill.root).toEqualHTML(
`
<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<select class="ql-ui" contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> test = <span class="ql-token hljs-number">1</span>;</div>
</div>
<p><br></p>
<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<select class="ql-ui" contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> bugz = <span class="ql-token hljs-number">0</span>;</div>
</div>
<p><br></p>`);
<p><br></p>`,
false,
false,
);
expect(this.quill.getContents()).toEqual(
new Delta()
.insert('var test = 1;')
Expand All @@ -192,16 +176,20 @@ describe('Syntax', function() {
setTimeout(() => {
this.quill.deleteText(14, 1);
setTimeout(() => {
expect(this.quill.root).toEqualHTML(`
expect(this.quill.root).toEqualHTML(
`
<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<select class="ql-ui" contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> test = <span class="ql-token hljs-number">1</span>;</div>
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> bugz = <span class="ql-token hljs-number">0</span>;</div>
</div>
<p><br></p>`);
<p><br></p>`,
false,
false,
);
expect(this.quill.getContents()).toEqual(
new Delta()
.insert('var test = 1;')
Expand All @@ -227,17 +215,12 @@ describe('Syntax', function() {
it('modification', function(done) {
this.quill.formatText(2, 3, 'bold', true);
setTimeout(() => {
expect(this.quill.root).toEqualHTML(
`<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
expect(this.quill.root).toEqualHTML(`
<div class="ql-code-block-container" spellcheck="false">
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">va</span><strong><span class="ql-token hljs-keyword">r</span> t</strong>est = <span class="ql-token hljs-number">1</span>;</div>
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">var</span> bugz = <span class="ql-token hljs-number">0</span>;</div>
</div>
<p><br></p>`,
);
<p><br></p>`);
expect(this.quill.getContents()).toEqual(
new Delta()
.insert('va')
Expand Down Expand Up @@ -274,15 +257,10 @@ describe('Syntax', function() {
this.quill.formatText(2, 3, 'bold', true);
this.quill.formatLine(0, 1, 'code-block', 'javascript');
setTimeout(() => {
expect(this.quill.root).toEqualHTML(
`<div class="ql-code-block-container" spellcheck="false">
<select contenteditable="false">
<option value="javascript">Javascript</option>
<option value="ruby">Ruby</option>
</select>
expect(this.quill.root).toEqualHTML(`
<div class="ql-code-block-container" spellcheck="false">
<div class="ql-code-block" data-language="javascript"><span class="ql-token hljs-keyword">va</span><strong><span class="ql-token hljs-keyword">r</span> t</strong>est = <span class="ql-token hljs-number">1</span>;</div>
</div>`,
);
</div>`);
expect(this.quill.getContents()).toEqual(
new Delta()
.insert('va')
Expand Down

0 comments on commit 6e40125

Please sign in to comment.