diff --git a/bower.json b/bower.json index 1725cb234a..42a75d1c71 100644 --- a/bower.json +++ b/bower.json @@ -34,7 +34,7 @@ "markdown-it": "^8.3.1", "toMark": "https://github.com/nhnent/toMark.git#0.0.18", "tui-component-colorpicker": "~1.0.2", - "squire-rte": "kyuwoo-choi/Squire#tui-editor-release", + "squire-rte": "https://github.com/neilj/Squire.git#306230d0df9b38047cd06204476ddc0582569cfd", "plantuml-encoder": "^1.2.4", "tui-chart": "^2.9.4" }, diff --git a/src/js/wwListManager.js b/src/js/wwListManager.js index 4f9592b1c0..9593030413 100644 --- a/src/js/wwListManager.js +++ b/src/js/wwListManager.js @@ -6,6 +6,8 @@ import domUtils from './domUtils'; const FIND_LI_ELEMENT = /
  • this._convertToArbitraryNestingList(html)); + this.eventManager.listen('wysiwygRangeChangeAfter', () => { this._findAndRemoveEmptyList(); this._removeBranchListAll(); - this._wrapDefaultBlockToListInner(); }); this.eventManager.listen('wysiwygSetValueAfter', () => { this._removeBranchListAll(); - this._wrapDefaultBlockToListInner(); }); - this.eventManager.listen('wysiwygProcessHTMLText', html => this._prepareInsertBlankToBetweenSameList(html)); + this.eventManager.listen('wysiwygProcessHTMLText', html => { + html = this._insertBlankToBetweenSameList(html); + html = this._convertFromArbitraryNestingList(html); + + return html; + }); this.eventManager.listen('convertorAfterHtmlToMarkdownConverted', markdown => markdown.replace(/:BLANK_LINE:\n/g, '')); @@ -87,7 +94,7 @@ class WwListManager { if (range.collapsed) { if (this.wwe.getEditor().hasFormat('LI')) { ev.preventDefault(); - const $ul = $(range.startContainer).closest('li').children('ul, ol'); + const $ul = $(range.startContainer).closest('li').children(UL_OR_OL); this.eventManager.emit('command', 'DecreaseDepth'); @@ -131,7 +138,7 @@ class WwListManager { * @private */ _findAndRemoveEmptyList() { - this.wwe.get$Body().find('ul,ol').each((index, node) => { + this.wwe.get$Body().find(UL_OR_OL).each((index, node) => { if (!(FIND_LI_ELEMENT.test(node.innerHTML))) { $(node).remove(); } @@ -177,22 +184,62 @@ class WwListManager { $firstLi.remove(); } + _insertBlankToBetweenSameList(html) { + return html.replace(/<\/(ul|ol)>(
    |
    ){0,}<\1>/g, ':BLANK_LINE:<$1>'); + } + /** - * _wrapDefaultBlockToListInner - * Wrap default block to list inner contents + * make arbitrary nesting list out of standard list + * `` to + * `` + * @param {string} html string to convert + * @returns {string} converted HTML text * @private */ - _wrapDefaultBlockToListInner() { - this.wwe.get$Body().find('li').each((index, node) => { - if ($(node).children('div, p').length <= 0) { - $(node).wrapInner('
    '); - $(node).find('div').children('ul, ol').appendTo(node); - } - }); + _convertToArbitraryNestingList(html) { + const NESTED_LIST_QUERY = 'li > ul, li > ol'; + const wrapper = document.createElement('div'); + wrapper.innerHTML = html; + + let nestedList = wrapper.querySelector(NESTED_LIST_QUERY); + while (nestedList !== null) { + const parentLI = nestedList.parentNode; + const parentList = parentLI.parentNode; + + parentList.insertBefore(nestedList, parentLI.nextElementSibling); + + nestedList = wrapper.querySelector(NESTED_LIST_QUERY); + } + + return wrapper.innerHTML; } - _prepareInsertBlankToBetweenSameList(html) { - return html.replace(/<\/(ul|ol)>(
    |
    ){0,}<\1>/g, ':BLANK_LINE:<$1>'); + /** + * make standard list out of arbitrary nesting list + * `` from + * `` + * @param {string} html string to convert + * @returns {string} converted HTML text + * @private + */ + _convertFromArbitraryNestingList(html) { + const NESTED_LIST_QUERY = 'ol > ol, ol > ul, ul > ol, ul > ul'; + const wrapperDiv = document.createElement('div'); + wrapperDiv.innerHTML = html; + + let nestedList = wrapperDiv.querySelector(NESTED_LIST_QUERY); + while (nestedList !== null) { + let prevLI = nestedList.previousElementSibling; + while (prevLI.tagName !== 'LI') { + prevLI = prevLI.previousElementSibling; + } + + prevLI.appendChild(nestedList); + + nestedList = wrapperDiv.querySelector(NESTED_LIST_QUERY); + } + + return wrapperDiv.innerHTML; } /** @@ -205,34 +252,106 @@ class WwListManager { */ getLinesOfSelection(start, end) { const lines = []; - let isEndPassed = false; + let isLastLine = false; let needNext = true; let nextLine; if (domUtils.isTextNode(start)) { - start = $(start).parents('div').first().get(0); + start = $(start).parents(DIV_OR_LI).first().get(0); } if (domUtils.isTextNode(end)) { - end = $(end).parents('div').first().get(0); + end = $(end).parents(DIV_OR_LI).first().get(0); } for (let line = start; needNext; line = nextLine) { - if ($(line).is('DIV')) { + if ($(line).is(DIV_OR_LI)) { lines.push(line); if (line === end) { - isEndPassed = true; + isLastLine = true; + } else { + nextLine = this._getNextLine(line, end); } - nextLine = line.nextElementSibling; } else { break; } - needNext = nextLine && !isEndPassed; + needNext = nextLine && !isLastLine; } return lines; } + + /** + * get next line + * @param {Node} currentLine - current line node + * @param {Node} end - last node in selection + * @returns {Node} - next line node + * @private + */ + _getNextLine(currentLine, end) { + let nextLine = currentLine.nextElementSibling; + + if (!nextLine) { + // current line was the last line in ul/ol + // while we have lines those has not been processed yet. + nextLine = currentLine.parentNode.nextElementSibling; + } else if ($(nextLine).is(UL_OR_OL)) { + // we don't sure firstChild is LI. arbtrary list can have another ol/ul + nextLine = nextLine.querySelector('li'); + } + + if ($(nextLine).is(DIV_OR_LI) || nextLine === end) { + return nextLine; + } + + return this._getNextLine(nextLine); + } + + /** + * merge to previous list + * consider remove this function when https://github.com/neilj/Squire/issues/294 resolved + * @param {HTMLLIElement} currentLine - current li element + * @ignore + */ + mergeList(currentLine) { + let currentList = currentLine.parentNode; + const prevList = currentList.previousElementSibling; + const nextList = currentList.nextElementSibling; + + if (currentList.firstElementChild === currentLine) { + if (prevList && $(prevList).is(UL_OR_OL)) { + this._mergeList(currentList, prevList); + currentList = prevList; + } + } + + if (currentList.lastElementChild === currentLine) { + if (nextList && $(nextList).is(UL_OR_OL)) { + this._mergeList(nextList, currentList); + } + } + } + + /** + * merge list to targetList + * @param {HTMLOListElement|HTMLUListElement} list - list to merge + * @param {HTMLOListElement|HTMLUListElement} targetList - target list + * @ignore + */ + _mergeList(list, targetList) { + let listItem = list.firstElementChild; + + if (targetList && $(targetList).is(UL_OR_OL)) { + while (listItem) { + const temp = listItem.nextElementSibling; + targetList.appendChild(listItem); + listItem = temp; + } + + list.parentNode.removeChild(list); + } + } } module.exports = WwListManager; diff --git a/src/js/wwTaskManager.js b/src/js/wwTaskManager.js index 4ec43726fc..05bc9e8247 100644 --- a/src/js/wwTaskManager.js +++ b/src/js/wwTaskManager.js @@ -3,8 +3,6 @@ * @author Sungho Kim(sungho-kim@nhnent.com) FE Development Team/NHN Ent. */ -import domUtils from './domUtils'; - const TASK_CLASS_NAME = 'task-list-item'; const TASK_ATTR_NAME = 'data-te-task'; const TASK_CHECKED_CLASS_NAME = 'checked'; @@ -165,78 +163,6 @@ class WwTaskManager { $(node).removeClass('task-list'); }); } - - /** - * Return lines in selection - * @param {Node} start Start element - * @param {Node} end End element - * @param {HTMLElement} body Editor body element - * @returns {Array.} - * @private - */ - getLinesOfSelection(start, end) { - const divOrLi = 'DIV,LI'; - const lines = []; - let isEndPassed = false; - let needNext = true; - let nextLine; - - if (domUtils.isTextNode(start)) { - start = $(start).parents('div').first().get(0); - } - - if (domUtils.isTextNode(end)) { - end = $(end).parents('div').first().get(0); - } - - for (let line = start; needNext; line = nextLine) { - if ($(line).is(divOrLi)) { - lines.push(line); - - if (line === end || line.parentNode === end) { - isEndPassed = true; - } - - const isStartInList = $(start).is('li') || ($(start).parent('li').length !== 0); - nextLine = this._getNextLine(line, isStartInList, isEndPassed); - } else { - break; - } - - needNext = nextLine && !isEndPassed; - } - - return lines; - } - - /** - * Get next line element - * @param {HTMLElement} line Current line element - * @param {boolean} isStartInList Boolean value of start in list - * @param {boolean} isEndPassed Boolean value of end element passed - * @returns {HTMLElement|undefined} - * @private - */ - _getNextLine(line, isStartInList, isEndPassed) { - let nextLine; - if (isStartInList && line.parentNode.tagName === 'LI') { - const $nextLI = $(line).parent().next(); - - nextLine = $nextLI.children('div').first().get(0); - - const hasNextLiHaveDivChild = $nextLI[0] && !nextLine; - const isLastLiInList = !$nextLI[0] && !nextLine; - if (hasNextLiHaveDivChild) { - nextLine = $nextLI.get(0); - } else if (isLastLiInList && !isEndPassed) { - nextLine = $(line).parents('ol,ul').first().next().get(0); - } - } else { - nextLine = line.nextElementSibling; - } - - return nextLine; - } } module.exports = WwTaskManager; diff --git a/src/js/wysiwygCommands/decreaseDepth.js b/src/js/wysiwygCommands/decreaseDepth.js index cb79094eaa..efca8abe43 100644 --- a/src/js/wysiwygCommands/decreaseDepth.js +++ b/src/js/wysiwygCommands/decreaseDepth.js @@ -15,14 +15,15 @@ const CommandManager = require('../commandManager'); */ const DecreaseDepth = CommandManager.command('wysiwyg', /** @lends HR */{ name: 'DecreaseDepth', + /** - * 커맨드 핸들러 - * @param {WysiwygEditor} wwe WysiwygEditor instance + * Command Handler + * @param {WysiwygEditor} wwe WysiwygEditor instance */ exec(wwe) { let $node = getCurrent$Li(wwe); - if ($node.length) { + if ($node.length && isExecutable($node)) { wwe.getEditor().saveUndoState(); const nodeClasses = $node.attr('class'); @@ -34,10 +35,23 @@ const DecreaseDepth = CommandManager.command('wysiwyg', /** @lends HR */{ } }); +/** + * test if decrease the depth of given list item + * arbitrary list allows list item to be in any position + * while markdown spec does not + * @param {jQuery} $currentLiNode - jQuery list item element + * @returns {boolean} - true to executable + * @ignore + */ +function isExecutable($currentLiNode) { + return !($currentLiNode.next().is('OL,UL')); +} + /** * Get list item element of current selection * @param {object} wwe Wysiwyg editor instance * @returns {jQuery} + * @ignore */ function getCurrent$Li(wwe) { const range = wwe.getEditor().getSelection(); diff --git a/src/js/wysiwygCommands/increaseDepth.js b/src/js/wysiwygCommands/increaseDepth.js index 2627f6b575..c948bffa22 100644 --- a/src/js/wysiwygCommands/increaseDepth.js +++ b/src/js/wysiwygCommands/increaseDepth.js @@ -16,10 +16,11 @@ import CommandManager from '../commandManager'; const IncreaseDepth = CommandManager.command('wysiwyg', /** @lends HR */{ name: 'IncreaseDepth', /** - * 커맨드 핸들러 - * @param {WysiwygEditor} wwe WYsiwygEditor instance + * Command Handler + * @param {WysiwygEditor} wwe WYsiwygEditor instance */ exec(wwe) { + const listManager = wwe.componentManager.getManager('list'); const range = wwe.getEditor().getSelection(); const $node = $(range.startContainer).closest('li'); let prevClasses, nodeClasses, nextClasses; @@ -43,6 +44,7 @@ const IncreaseDepth = CommandManager.command('wysiwyg', /** @lends HR */{ } wwe.getEditor().increaseListLevel(); + listManager.mergeList($node.get(0)); $node.attr('class', nodeClasses); $prev.attr('class', prevClasses); diff --git a/src/js/wysiwygCommands/ol.js b/src/js/wysiwygCommands/ol.js index 793b61e560..abfb4c7da3 100644 --- a/src/js/wysiwygCommands/ol.js +++ b/src/js/wysiwygCommands/ol.js @@ -17,8 +17,8 @@ const OL = CommandManager.command('wysiwyg', /** @lends OL */{ name: 'OL', keyMap: ['CTRL+O', 'META+O'], /** - * 커맨드 핸들러 - * @param {WysiwygEditor} wwe WYSIWYGEditor instance + * Command Handler + * @param {WysiwygEditor} wwe WYSIWYGEditor instance */ exec(wwe) { const sq = wwe.getEditor(); @@ -36,25 +36,30 @@ const OL = CommandManager.command('wysiwyg', /** @lends OL */{ const lines = listManager.getLinesOfSelection(startContainer, endContainer); + const newLIs = []; for (let i = 0; i < lines.length; i += 1) { - this._changeFormatToOrderedListIfNeed(wwe, lines[i]); + const newLI = this._changeFormatToOrderedListIfNeed(wwe, lines[i]); + newLIs.push(newLI); } range = sq.getSelection(); - range.setStart(startContainer, startOffset); - range.setEnd(endContainer, endOffset); + range.setStart(newLIs[0].firstChild, startOffset); + range.setEnd(newLIs[newLIs.length - 1].firstChild, endOffset); sq.setSelection(range); sq.saveUndoState(range); }, + /** * Change format to unordered list if need * @param {WysiwygEditor} wwe Wysiwyg editor instance * @param {HTMLElement} target Element target for change + * @returns {HTMLElement} newly created list item * @private */ _changeFormatToOrderedListIfNeed(wwe, target) { const sq = wwe.getEditor(); const range = sq.getSelection(); + let newLI = range.startContainer; if (!sq.hasFormat('TABLE') && !sq.hasFormat('PRE')) { range.setStart(target, 0); @@ -69,7 +74,11 @@ const OL = CommandManager.command('wysiwyg', /** @lends OL */{ wwe.unwrapBlockTag(); sq.makeOrderedList(); } + + newLI = sq.getSelection().startContainer; } + + return newLI; } }); diff --git a/src/js/wysiwygCommands/task.js b/src/js/wysiwygCommands/task.js index a3d9be893e..5474256c71 100644 --- a/src/js/wysiwygCommands/task.js +++ b/src/js/wysiwygCommands/task.js @@ -17,46 +17,51 @@ const Task = CommandManager.command('wysiwyg', /** @lends Task */{ name: 'Task', keyMap: ['CTRL+T', 'META+T'], /** - * 커맨드 핸들러 - * @param {WysiwygEditor} wwe WYSIWYGEditor instance + * Command Handler + * @param {WysiwygEditor} wwe WYSIWYGEditor instance */ exec(wwe) { const sq = wwe.getEditor(); let range = sq.getSelection(); - const taskManager = wwe.componentManager.getManager('task'); + const listManager = wwe.componentManager.getManager('list'); const { startContainer, endContainer, startOffset, endOffset - } = range; + } = range; wwe.focus(); sq.saveUndoState(range); - const lines = taskManager.getLinesOfSelection(startContainer, endContainer); + const lines = listManager.getLinesOfSelection(startContainer, endContainer); + const newLIs = []; for (let i = 0; i < lines.length; i += 1) { - this._changeFormatToTaskIfNeed(wwe, lines[i]); + const newLI = this._changeFormatToTaskIfNeed(wwe, lines[i]); + newLIs.push(newLI); } range = sq.getSelection(); - range.setStart(startContainer, startOffset); - range.setEnd(endContainer, endOffset); + range.setStart(newLIs[0].firstChild, startOffset); + range.setEnd(newLIs[newLIs.length - 1].firstChild, endOffset); sq.setSelection(range); sq.saveUndoState(range); }, + /** * Change format to unordered list and return current li element if need * @param {WysiwygEditor} wwe Wysiwyg editor instance * @param {HTMLElement} target Element target for change + * @returns {HTMLElement} newly created list * @private */ _changeFormatToTaskIfNeed(wwe, target) { const sq = wwe.getEditor(); const range = sq.getSelection(); const taskManager = wwe.componentManager.getManager('task'); + let newLI = range.startContainer; if (!sq.hasFormat('TABLE') && !sq.hasFormat('PRE')) { range.setStart(target, 0); @@ -64,16 +69,20 @@ const Task = CommandManager.command('wysiwyg', /** @lends Task */{ sq.setSelection(range); if (!sq.hasFormat('li')) { - wwe.unwrapBlockTag(); sq.makeUnorderedList(); + target = sq.getSelection().startContainer; } - if ($(target).parents('li').first().hasClass('task-list-item')) { + if ($(target).hasClass('task-list-item')) { taskManager.unformatTask(target); } else { taskManager.formatTask(target); } + + newLI = sq.getSelection().startContainer; } + + return newLI; } }); diff --git a/src/js/wysiwygCommands/ul.js b/src/js/wysiwygCommands/ul.js index 5cdf687f6e..d11733ef8d 100644 --- a/src/js/wysiwygCommands/ul.js +++ b/src/js/wysiwygCommands/ul.js @@ -17,8 +17,8 @@ const UL = CommandManager.command('wysiwyg', /** @lends UL */{ name: 'UL', keyMap: ['CTRL+U', 'META+U'], /** - * 커맨드 핸들러 - * @param {WysiwygEditor} wwe WYSIWYGEditor instance + * Command Handler + * @param {WysiwygEditor} wwe WYSIWYGEditor instance */ exec(wwe) { const sq = wwe.getEditor(); @@ -29,32 +29,37 @@ const UL = CommandManager.command('wysiwyg', /** @lends UL */{ endContainer, startOffset, endOffset - } = range; + } = range; wwe.focus(); sq.saveUndoState(range); const lines = listManager.getLinesOfSelection(startContainer, endContainer); + const newLIs = []; for (let i = 0; i < lines.length; i += 1) { - this._changeFormatToUnorderedListIfNeed(wwe, lines[i]); + const newLI = this._changeFormatToUnorderedListIfNeed(wwe, lines[i]); + newLIs.push(newLI); } range = sq.getSelection(); - range.setStart(startContainer, startOffset); - range.setEnd(endContainer, endOffset); + range.setStart(newLIs[0].firstChild, startOffset); + range.setEnd(newLIs[newLIs.length - 1].firstChild, endOffset); sq.setSelection(range); sq.saveUndoState(range); }, + /** * Change format to unordered list if need * @param {WysiwygEditor} wwe Wysiwyg editor instance * @param {HTMLElement} target Element target for change + * @returns {HTMLElement} newly created list * @private */ _changeFormatToUnorderedListIfNeed(wwe, target) { const sq = wwe.getEditor(); const range = sq.getSelection(); + let newLI = range.startContainer; if (!sq.hasFormat('TABLE') && !sq.hasFormat('PRE')) { range.setStart(target, 0); @@ -69,8 +74,13 @@ const UL = CommandManager.command('wysiwyg', /** @lends UL */{ wwe.unwrapBlockTag(); sq.makeUnorderedList(); } + + newLI = sq.getSelection().startContainer; } + + return newLI; } }); module.exports = UL; + diff --git a/test/integration/clipboard.spec.js b/test/integration/clipboard.spec.js index b012e4e9e9..d8219a8645 100644 --- a/test/integration/clipboard.spec.js +++ b/test/integration/clipboard.spec.js @@ -1,6 +1,13 @@ /* eslint-disable max-nested-callbacks */ import Editor from '../../src/js/editor'; +/** + * make fake clipboard event + * @param {string} text - clipboard text + * @param {string} html - clipboard html + * @param {array} fileType - supported file types + * @returns {Event} - clipboard event + */ function pasteClipboardEvent(text, html, fileType) { const event = document.createEvent('Event', false, true); const clipboardData = {}; @@ -136,9 +143,9 @@ describe('Clipboard', () => { setTimeout(() => { const outputDOM = se._root; - expect(outputDOM.firstChild.tagName).toEqual('TABLE'); - expect(outputDOM.firstChild.children[0].tagName).toEqual('THEAD'); - expect(outputDOM.firstChild.children[1].tagName).toEqual('TBODY'); + expect(outputDOM.querySelector('table')).toBeDefined(); + expect(outputDOM.querySelector('table thead')).toBeDefined(); + expect(outputDOM.querySelector('table tbody')).toBeDefined(); done(); }, 0); }); diff --git a/test/wwListManager.spec.js b/test/wwListManager.spec.js index 8e9ffc08c8..a078831ef6 100644 --- a/test/wwListManager.spec.js +++ b/test/wwListManager.spec.js @@ -3,40 +3,29 @@ import EventManager from '../src/js/eventManager'; import WwListManager from '../src/js/wwListManager'; describe('WwListManager', () => { - let $container, em, wwe, mgr; + let container, em, wwe, mgr; beforeEach(() => { - $container = $('
    '); - - $('body').append($container); + container = document.createElement('div'); + document.body.appendChild(container); em = new EventManager(); - wwe = new WysiwygEditor($container, em); + wwe = new WysiwygEditor($(container), em); wwe.init(); mgr = new WwListManager(wwe); }); - //we need to wait squire input event process + // we need to wait squire input event process afterEach(done => { setTimeout(() => { - $('body').empty(); + document.body.removeChild(container); done(); }); }); - describe('Event', () => { - it('wysiwygSetValueAfter: wrap list inner to div after setValue', () => { - const html = '
    • test
    '; - wwe.setValue(html); - - expect(wwe.get$Body().find('li div').length).toEqual(1); - expect(wwe.get$Body().find('li div').text()).toEqual('test'); - }); - }); - describe('_findAndRemoveEmptyList()', () => { it('remove ul that without li element within.', () => { wwe.setValue(['
      this will deleted
    ', @@ -70,6 +59,34 @@ describe('WwListManager', () => { }); }); + describe('convert from/to arbitrary nesting list', () => { + it('_convertToArbitraryNestingList should convert nested ul to arbitrary nested ul', () => { + expect(mgr._convertToArbitraryNestingList('
    • text
      • text2
    ')) + .toBe('
    • text
      • text2
    '); + }); + + it('_convertFromArbitraryNestingList should convert nested ul to arbitrary nested ul', () => { + expect(mgr._convertFromArbitraryNestingList('
    • text
      • text2
    ')) + .toBe('
    • text
      • text2
    '); + }); + + it('should be called _convertToArbitraryNestingList on wysiwygSetValueBefore', () => { + const standardList = '
    • text
      • text2
    '; + + const arbitraryList = em.emitReduce('wysiwygSetValueBefore', standardList); + + expect(arbitraryList).toBe('
    • text
      • text2
    '); + }); + + it('should be called _convertFromArbitraryNestingList on wysiwygProcessHTMLText', () => { + const standardList = '
    • text
      • text2
    '; + + const arbitraryList = em.emitReduce('wysiwygProcessHTMLText', standardList); + + expect(arbitraryList).toBe('
    • text
      • text2
    '); + }); + }); + describe('_removeBranchListAll', () => { it('Remove all branch list', () => { wwe.getEditor().setHTML([ @@ -154,7 +171,7 @@ describe('WwListManager', () => { '' ].join(''); - const result = mgr._prepareInsertBlankToBetweenSameList(html); + const result = mgr._insertBlankToBetweenSameList(html); expect(result.indexOf(':BLANK_LINE:')).not.toBe(-1); expect(result.indexOf('
    ')).toBe(-1); @@ -172,7 +189,7 @@ describe('WwListManager', () => { '' ].join(''); - const result = mgr._prepareInsertBlankToBetweenSameList(html); + const result = mgr._insertBlankToBetweenSameList(html); expect(result.indexOf(':BLANK_LINE:')).not.toBe(-1); expect(result.indexOf('
    ')).toBe(-1); @@ -188,27 +205,135 @@ describe('WwListManager', () => { '' ].join(''); - const result = mgr._prepareInsertBlankToBetweenSameList(html); + const result = mgr._insertBlankToBetweenSameList(html); expect(result.indexOf(':BLANK_LINE:')).not.toBe(-1); expect(result.indexOf('
    ')).toBe(-1); }); }); - describe('_wrapDefaultBlockToListInner', () => { - it('Wrap default blocks to list top inline nodes', () => { - wwe.getEditor().setHTML([ - '
      ', - '
    • ', - 't1
      ', - '
      • t2
      ', - '
      • ', - '
    '].join('')); - mgr._wrapDefaultBlockToListInner(); + describe('mergeList', () => { + it('should merge list to previous list', () => { + const list = $(` +
      +
    1. 1
      2. +
        +
      • 2
        • +
      +
        +
      1. 3
        2. +
      2. 4
        3. +
      +
    + `)[0]; + + mgr.mergeList(list.querySelector('#target')); + + //
      + //
    1. 1
      2. + //
        + //
      • 2
        • + //
      • 3
        • + //
      • 4
        • + //
      + //
    + expect(list.querySelectorAll('ol > ul > li').length).toBe(3); + expect(list.querySelectorAll('ol > ol').length).toBe(0); + }); + + it('should not merge list to previous list if target is not the first list item', () => { + const list = $(` +
      +
    1. 1
      2. +
        +
      • 2
        • +
      +
        +
      1. 3
        2. +
      2. 4
        3. +
      +
    + `)[0]; + + mgr.mergeList(list.querySelector('#target')); + + //
      + //
    1. 1
      2. + //
        + //
      • 2
        • + //
      + //
        + //
      1. 3
        2. + //
      2. 4
        3. + //
      + //
    + expect(list.querySelectorAll('ol > ul > li').length).toBe(1); + expect(list.querySelectorAll('ol > ol > li').length).toBe(2); + }); + + it('should merge next list', () => { + // merge rule: merge to previous list + const list = $(` +
      +
    1. 1
      2. +
        +
      1. 2
        2. +
      +
        +
      • 3
        • +
      • 4
        • +
      +
    + `)[0]; + + mgr.mergeList(list.querySelector('#target')); + + //
      + //
    1. 1
      2. + //
        + //
      1. 2
        2. + //
      2. 3
        3. + //
      3. 4
        4. + //
      + //
    + expect(list.querySelectorAll('ol > ol > li').length).toBe(3); + expect(list.querySelectorAll('ol > ul').length).toBe(0); + }); - expect(wwe.get$Body().find('div').length).toEqual(2); - expect(wwe.get$Body().find('div').eq(0).text()).toEqual('t1'); - expect(wwe.get$Body().find('div').eq(1).text()).toEqual('t2'); + it('should merge prev/next list', () => { + // merge rule: merge to previous list + const list = $(` +
      +
    1. 1
      2. +
        +
      • 2
        • +
      • 3
        • +
      +
        +
      1. 4
        2. +
      +
        +
      • 5
        • +
      • 6
        • +
      +
    + `)[0]; + + mgr.mergeList(list.querySelector('#target')); + + //
      + //
    1. 1
      2. + //
        + //
      • 2
        • + //
      • 3
        • + //
      • 4
        • + //
      • 5
        • + //
      • 6
        • + //
      + //
    + expect(list.querySelectorAll('ol > ul > li').length).toBe(5); + expect(list.querySelectorAll('ol > ul').length).toBe(1); + expect(list.querySelectorAll('ol > ol').length).toBe(0); }); }); }); diff --git a/test/wysiwygCommands/codeBlock.spec.js b/test/wysiwygCommands/codeBlock.spec.js index 668d892463..e4e8642c92 100644 --- a/test/wysiwygCommands/codeBlock.spec.js +++ b/test/wysiwygCommands/codeBlock.spec.js @@ -21,7 +21,7 @@ describe('CodeBlock', () => { sq.focus(); }); - //we need to wait squire input event process + // we need to wait squire input event process afterEach(done => { setTimeout(() => { $('body').empty(); @@ -32,15 +32,15 @@ describe('CodeBlock', () => { it('add CodeBlock', () => { CodeBlock.exec(wwe); - expect($body.find('pre').length).toEqual(1); - expect($body.find('pre div').length).toEqual(1); + expect($body.find('pre').length).toBe(1); + expect($body.find('pre div').length).toBe(1); expect($body.find('pre').attr('data-te-codeblock')).toBeDefined(); }); it('add CodeBlock with language', () => { CodeBlock.exec(wwe, 'javascript'); expect($body.find('pre').hasClass('te-content-codeblock-1')).toBe(true); - expect($body.find('pre').attr('data-language')).toEqual('javascript'); + expect($body.find('pre').attr('data-language')).toBe('javascript'); }); it('add CodeBlock with selection', () => { wwe.setValue('
    hello, my name is code
    '); @@ -53,9 +53,9 @@ describe('CodeBlock', () => { CodeBlock.exec(wwe); - expect($body.find('pre').length).toEqual(1); - expect($body.find('pre div').length).toEqual(1); - expect($body.find('div').eq(0).text()).toEqual('hello'); - expect($body.find('div').eq(1).text()).toEqual(', my name is code'); + expect($body.find('pre').length).toBe(1); + expect($body.find('pre div').length).toBe(1); + expect($body.find('pre div').eq(0).text()).toBe('hello'); + expect($body.find('pre + div').eq(0).text()).toBe(', my name is code'); }); }); diff --git a/test/wysiwygCommands/decreaseDepth.spec.js b/test/wysiwygCommands/decreaseDepth.spec.js index d153d3b188..a33a2a2d6c 100644 --- a/test/wysiwygCommands/decreaseDepth.spec.js +++ b/test/wysiwygCommands/decreaseDepth.spec.js @@ -4,36 +4,34 @@ import WysiwygEditor from '../../src/js/wysiwygEditor'; import EventManager from '../../src/js/eventManager'; describe('DecreaseDepth', () => { - let wwe, sq; + let wwe, sq, container; beforeEach(() => { - const $container = $('
    '); - - $('body').append($container); - - wwe = new WysiwygEditor($container, new EventManager()); + container = document.createElement('div'); + document.body.appendChild(container); + wwe = new WysiwygEditor($(container), new EventManager()); wwe.init(); sq = wwe.getEditor(); wwe.componentManager.addManager(WwTaskManager); sq.focus(); - wwe.get$Body().html([ - '
      ', - '
    • abcdef
      ', - '
        ', - '
      • abcde
        • ', - '
      • ', - '
      • ', - '
    ' - ].join('')); + wwe.get$Body().html(` +
      +
    • abcdef
      • +
        +
      • abcde
        • +
      +
      • +
    + `); }); - //we need to wait squire input event process + // we need to wait squire input event process afterEach(done => { setTimeout(() => { - $('body').empty(); + document.body.removeChild(container); done(); }); }); @@ -41,23 +39,22 @@ describe('DecreaseDepth', () => { it('should be able to decrease depth second to first.', () => { const range = wwe.getEditor().getSelection().cloneRange(); - range.setStart(wwe.get$Body().find('div')[1].firstChild, 0); + range.setStart(wwe.get$Body().find('li')[1].firstChild, 0); range.collapse(true); sq.setSelection(range); DecreaseDepth.exec(wwe); - expect(sq.get$Body().find('ul li').length).toEqual(3); - expect(sq.get$Body().find('ul li ul').length).toEqual(0); - expect(sq.get$Body().find('ul li ul li').length).toEqual(0); - expect(sq.get$Body().find('ul li').hasClass('task-list-item')).toBe(true); - expect(sq.get$Body().find('ul li').hasClass('checked')).toBe(true); + expect(sq.get$Body().find('ul > li').length).toEqual(3); + expect(sq.get$Body().find('ul > ul > li').length).toEqual(0); + expect(sq.get$Body().find('ul > li').hasClass('task-list-item')).toBe(true); + expect(sq.get$Body().find('ul > li').hasClass('checked')).toBe(true); }); it('should break out list element and delete input.', () => { const range = wwe.getEditor().getSelection().cloneRange(); - range.setStart(wwe.get$Body().find('div')[2].firstChild, 0); + range.setStart(wwe.get$Body().find('li')[2].firstChild, 0); range.collapse(true); sq.setSelection(range); @@ -65,70 +62,95 @@ describe('DecreaseDepth', () => { DecreaseDepth.exec(wwe); expect(sq.get$Body().find('ul li').length).toEqual(2); - expect(sq.get$Body().find('ul li ul').length).toEqual(1); - expect(sq.get$Body().find('ul li ul li').length).toEqual(1); + expect(sq.get$Body().find('ul ul li').length).toEqual(1); expect(sq.get$Body().find('ul li').hasClass('task-list-item')).toBe(true); }); - describe('should guarantee to remove non task`s class attribute', () => { - it('when super depth is task and child depth is not', () => { - const range = wwe.getEditor().getSelection().cloneRange(); + it('should preserve original class(task / non-task)', () => { + const range = wwe.getEditor().getSelection().cloneRange(); - wwe.get$Body().html([ - '
      ', - '
    • abcdef
      ', - '
        ', - '
      • abcde
        • ', - '
      • ', - '
      • ', - '
    ' - ].join('')); - - range.setStart(wwe.get$Body().find('div')[1].firstChild, 0); - range.collapse(true); + wwe.get$Body().html(` +
      +
    • abcdef
      • +
        +
      • abcde
        • +
      +
      • +
    + `); + + range.setStart(wwe.get$Body().find('ul ul li')[0].firstChild, 0); + range.collapse(true); - sq.setSelection(range); + sq.setSelection(range); - DecreaseDepth.exec(wwe); + DecreaseDepth.exec(wwe); - const $Body = sq.get$Body(); + const $Body = sq.get$Body(); - expect($Body.find('ul li').length).toEqual(3); - expect($Body.find('ul li ul').length).toEqual(0); - expect($Body.find('ul li').eq(0).hasClass('task-list-item')).toBe(true); - expect($Body.find('ul li').eq(1).hasClass('task-list-item')).toBe(true); - expect($Body.find('ul li').eq(2).hasClass('task-list-item')).toBe(true); - }); + expect($Body.find('ul li').length).toEqual(3); + expect($Body.find('ul ul li').length).toEqual(0); + expect($Body.find('ul li').eq(0).hasClass('task-list-item')).toBe(true); + expect($Body.find('ul li').eq(1).hasClass('task-list-item')).toBe(false); + expect($Body.find('ul li').eq(2).hasClass('task-list-item')).toBe(true); }); + + it('should not decrease if next element is UL/OL (arbitrary list)', () => { + const range = wwe.getEditor().getSelection().cloneRange(); + + wwe.get$Body().html(` +
      +
    • abcdef
      • +
        +
      • abcde
        • +
          +
        • abcde
          • +
        +
      +
    + `); + + range.setStart(wwe.get$Body().find('#target')[0].firstChild, 0); + range.collapse(true); + + sq.setSelection(range); + + DecreaseDepth.exec(wwe); + + const $Body = sq.get$Body(); + + expect($Body.find('> ul > li').length).toEqual(1); + expect($Body.find('> ul > ul > li').length).toEqual(1); + expect($Body.find('> ul > ul > ul > li').length).toEqual(1); + }); + describe('should decrease depth when cursor', () => { it('at startOffset 0.', () => { const range = wwe.getEditor().getSelection().cloneRange(); - range.setStart(wwe.get$Body().find('div')[1].firstChild, 0); + range.setStart(wwe.get$Body().find('li')[1].firstChild, 0); range.collapse(true); sq.setSelection(range); DecreaseDepth.exec(wwe); - expect(sq.get$Body().find('ul li').length).toEqual(3); - expect(sq.get$Body().find('ul li ul').length).toEqual(0); - expect(sq.get$Body().find('ul li ul li').length).toEqual(0); - expect(sq.get$Body().find('ul li').hasClass('task-list-item')).toBe(true); + expect(sq.get$Body().find('ul > li').length).toEqual(3); + expect(sq.get$Body().find('ul ul li').length).toEqual(0); + expect(sq.get$Body().find('ul > li').hasClass('task-list-item')).toBe(true); }); it('should decrease depth when cursor at any offset.', () => { const range = wwe.getEditor().getSelection().cloneRange(); - range.setStart(wwe.get$Body().find('div')[1].firstChild, 2); + range.setStart(wwe.get$Body().find('li')[1].firstChild, 2); range.collapse(true); sq.setSelection(range); DecreaseDepth.exec(wwe); - expect(sq.get$Body().find('ul li').length).toEqual(3); - expect(sq.get$Body().find('ul li ul').length).toEqual(0); - expect(sq.get$Body().find('ul li ul li').length).toEqual(0); - expect(sq.get$Body().find('ul li').hasClass('task-list-item')).toBe(true); + expect(sq.get$Body().find('ul > li').length).toEqual(3); + expect(sq.get$Body().find('ul ul li').length).toEqual(0); + expect(sq.get$Body().find('ul > li').hasClass('task-list-item')).toBe(true); }); }); }); diff --git a/test/wysiwygCommands/increaseDepth.spec.js b/test/wysiwygCommands/increaseDepth.spec.js index 465dc5e5a5..24a77c5aa7 100644 --- a/test/wysiwygCommands/increaseDepth.spec.js +++ b/test/wysiwygCommands/increaseDepth.spec.js @@ -1,37 +1,38 @@ import IncreaseDepth from '../../src/js/wysiwygCommands/increaseDepth'; import WwTaskManager from '../../src/js/wwTaskManager'; +import WwListManager from '../../src/js/wwListManager'; import WysiwygEditor from '../../src/js/wysiwygEditor'; import EventManager from '../../src/js/eventManager'; describe('IncreaseDepth', () => { - let wwe, sq; + let wwe, sq, container; beforeEach(() => { - const $container = $('
    '); + container = document.createElement('div'); + document.body.appendChild(container); - $('body').append($container); - - wwe = new WysiwygEditor($container, new EventManager()); + wwe = new WysiwygEditor($(container), new EventManager()); wwe.init(); sq = wwe.getEditor(); wwe.componentManager.addManager(WwTaskManager); + wwe.componentManager.addManager(WwListManager); sq.focus(); - wwe.get$Body().html([ - '
      ', - '
    • abcdef
      • ', - '
    • abcde
      • ', - '
      • ', - '
    ' - ].join('')); + wwe.get$Body().html(` +
      +
    • abcdef
      • +
    • abcde
      • +
      • +
    + `); }); - //we need to wait squire input event process + // we need to wait squire input event process afterEach(done => { setTimeout(() => { - $('body').empty(); + document.body.removeChild(container); done(); }); }); @@ -39,88 +40,112 @@ describe('IncreaseDepth', () => { it('success when it not first li.', () => { const range = wwe.getEditor().getSelection().cloneRange(); - range.setStart(wwe.get$Body().find('div')[1].firstChild, 0); + range.setStart(wwe.get$Body().find('li')[1].firstChild, 0); range.collapse(true); sq.setSelection(range); IncreaseDepth.exec(wwe); - expect(sq.get$Body().find('ul li ul').length).toEqual(1); - expect(sq.get$Body().find('ul li ul li').length).toEqual(1); - expect(sq.get$Body().find('ul li ul li').hasClass('task-list-item')).toBe(true); + expect(sq.get$Body().find('ul ul li').length).toEqual(1); + expect(sq.get$Body().find('ul ul li').hasClass('task-list-item')).toBe(true); }); it('fail when it does not have previous li.', () => { const range = wwe.getEditor().getSelection().cloneRange(); - range.setStart(wwe.get$Body().find('div')[0].firstChild, 0); + range.setStart(wwe.get$Body().find('li')[0].firstChild, 0); range.collapse(true); sq.setSelection(range); IncreaseDepth.exec(wwe); - expect(sq.get$Body().find('ul li ul').length).toEqual(0); - expect(sq.get$Body().find('ul li ul li').length).toEqual(0); - expect(sq.get$Body().find('ul li ul li').hasClass('task-list-item')).toBe(false); + expect(sq.get$Body().find('ul ul li').length).toEqual(0); }); describe('should increase depth when cursor', () => { it('at startOffset 0.', () => { const range = wwe.getEditor().getSelection().cloneRange(); - range.setStart(wwe.get$Body().find('div')[1].firstChild, 0); + range.setStart(wwe.get$Body().find('li')[1].firstChild, 0); range.collapse(true); sq.setSelection(range); IncreaseDepth.exec(wwe); - expect(sq.get$Body().find('ul li ul').length).toEqual(1); - expect(sq.get$Body().find('ul li ul li').length).toEqual(1); - expect(sq.get$Body().find('ul li ul li').hasClass('task-list-item')).toBe(true); + expect(sq.get$Body().find('ul ul li').length).toEqual(1); + expect(sq.get$Body().find('ul ul li').hasClass('task-list-item')).toBe(true); }); it('at startOffset 1.', () => { const range = wwe.getEditor().getSelection().cloneRange(); - range.setStart(wwe.get$Body().find('div')[1].firstChild, 1); + range.setStart(wwe.get$Body().find('li')[1].firstChild, 1); range.collapse(true); sq.setSelection(range); IncreaseDepth.exec(wwe); - expect(sq.get$Body().find('ul li ul').length).toEqual(1); - expect(sq.get$Body().find('ul li ul li').length).toEqual(1); - expect(sq.get$Body().find('ul li ul li').hasClass('task-list-item')).toBe(true); + expect(sq.get$Body().find('ul ul li').length).toEqual(1); + expect(sq.get$Body().find('ul ul li').hasClass('task-list-item')).toBe(true); }); }); it('should increase ordinary list', () => { const range = wwe.getEditor().getSelection().cloneRange(); - wwe.get$Body().html([ - '
      ', - '
    • abcdef
      • ', - '
    • abcde
      ', - '
        ', - '
      • ', - '
          ', - '
        • abcdef
          • ', - '
        ', - '
      ', - '
      • ', - '', - '
    ' - ].join('')); - - range.setStart(wwe.get$Body().find('div')[1].firstChild, 1); + wwe.get$Body().html(` +
      +
    • abcdef
      • +
    • abcde
      • +
        +
      • +
          +
        • abcdef
          • +
        +
      +
    + `); + + range.setStart(wwe.get$Body().find('li')[1].firstChild, 1); + range.collapse(true); + + sq.setSelection(range); + + IncreaseDepth.exec(wwe); + + expect(sq.get$Body().find('ul > li').length).toEqual(4); + expect(sq.get$Body().find('ul > ul > li').length).toEqual(3); + expect(sq.get$Body().find('ul > ul > ul > li').length).toEqual(1); + expect(sq.get$Body().find('ul > ul > ul > li').hasClass('task-list-item')).toBe(true); + }); + + it('should merge prev/next list after increase depth', () => { + const range = wwe.getEditor().getSelection().cloneRange(); + + wwe.get$Body().html(` +
      +
    • list 1
      • +
        +
      1. list 2
        2. +
      2. list 3
        3. +
      +
    • list 4
      • +
        +
      • list 5
        • +
      • list 6
        • +
      +
    + `); + + range.setStart(wwe.get$Body().find('#target')[0].firstChild, 1); range.collapse(true); sq.setSelection(range); IncreaseDepth.exec(wwe); - expect(sq.get$Body().find('ul').length).toEqual(3); - expect(sq.get$Body().find('ul > li > ul > li > ul > li').length).toEqual(1); - expect(sq.get$Body().find('ul > li > ul > li > ul > li').hasClass('task-list-item')).toBe(true); + expect(sq.get$Body().find('> ul > li').length).toEqual(1); + expect(sq.get$Body().find('> ul > ol > li').length).toEqual(5); + expect(sq.get$Body().find('> ul > ul > li').length).toEqual(0); }); }); diff --git a/test/wysiwygCommands/ol.spec.js b/test/wysiwygCommands/ol.spec.js index 16c9ed1564..13c1c818ec 100644 --- a/test/wysiwygCommands/ol.spec.js +++ b/test/wysiwygCommands/ol.spec.js @@ -5,14 +5,13 @@ import WysiwygEditor from '../../src/js/wysiwygEditor'; import EventManager from '../../src/js/eventManager'; describe('OL', () => { - let wwe, sq; + let wwe, sq, container; beforeEach(() => { - const $container = $('
    '); + container = document.createElement('div'); + document.body.appendChild(container); - $('body').append($container); - - wwe = new WysiwygEditor($container, new EventManager()); + wwe = new WysiwygEditor($(container), new EventManager()); wwe.init(); @@ -22,10 +21,10 @@ describe('OL', () => { sq.focus(); }); - //we need to wait squire input event process + // we need to wait squire input event process afterEach(done => { setTimeout(() => { - $('body').empty(); + document.body.removeChild(container); done(); }); }); @@ -44,9 +43,9 @@ describe('OL', () => { it('if have task in range then remove task and change to ul', () => { const range = sq.getSelection().cloneRange(); - sq.setHTML('
    • test
    '); + sq.setHTML('
    • test
    '); - range.setStart(wwe.get$Body().find('li div')[0].firstChild, 1); + range.setStart(wwe.get$Body().find('li')[0].firstChild, 1); range.collapse(true); sq.setSelection(range); @@ -88,7 +87,7 @@ describe('OL', () => { const $div1 = $('
    hello
    '); const $div2 = $('
    world
    '); const $div3 = $('
    i`m
    '); - const $ol = $('
    1. fine
    '); + const $ol = $('
    1. fine
    '); $body.append($div1); $body.append($div2); @@ -107,12 +106,12 @@ describe('OL', () => { expect(wwe.get$Body().find('li').length).toEqual(4); }); - it('do not convert next element of OL with selection start ol within', () => { + it('convert next element of OL with selection start ol within', () => { const $body = sq.get$Body(); const $div1 = $('
    hello
    '); const $div2 = $('
    world
    '); const $div3 = $('
    i`m
    '); - const $ol = $('
    1. fine
    '); + const $ol = $('
    1. fine
    '); $body.append($ol); $body.append($div1); @@ -121,25 +120,25 @@ describe('OL', () => { const range = sq.getSelection(); - range.setStart($ol.find('li div')[0].firstChild, 0); + range.setStart($ol.find('li')[0].firstChild, 0); range.setEnd($div3[0], 1); sq.setSelection(range); OL.exec(wwe); expect(wwe.get$Body().find('ol').length).toEqual(1); - expect(wwe.get$Body().find('li').length).toEqual(1); + expect(wwe.get$Body().find('li').length).toEqual(4); }); it('change UL to OL', () => { const $body = sq.get$Body(); - const $ul = $('
    • fine
    '); + const $ul = $('
    • fine
    '); $body.append($ul); const range = sq.getSelection(); - range.setStart($ul[0].firstChild.firstChild.firstChild, 1); + range.setStart($ul[0].firstChild.firstChild, 1); range.collapse(true); sq.setSelection(range); @@ -151,14 +150,14 @@ describe('OL', () => { it('change UL to OL with selection', () => { const $body = sq.get$Body(); - const $ul = $('
    • fine
    • thank you
    '); + const $ul = $('
    • fine
    • thank you
    '); $body.append($ul); const range = sq.getSelection(); - range.setStart($ul.find('li div')[0].firstChild, 1); - range.setEnd($ul.find('li div')[0].firstChild, 1); + range.setStart($ul.find('li')[0].firstChild, 1); + range.setEnd($ul.find('li')[0].firstChild, 1); sq.setSelection(range); OL.exec(wwe); @@ -169,13 +168,13 @@ describe('OL', () => { it('change TASK to OL', () => { const $body = sq.get$Body(); - const $ul = $('
    • fine
    '); + const $ul = $('
    • fine
    '); $body.append($ul); const range = sq.getSelection(); - range.setStart($ul[0].firstChild.firstChild.firstChild, 1); + range.setStart($ul[0].firstChild.firstChild, 1); range.collapse(true); sq.setSelection(range); @@ -188,14 +187,14 @@ describe('OL', () => { it('change TASK to OL with selection', () => { const $body = sq.get$Body(); - const $ul = $('
    • fine
    • thank you
    '); + const $ul = $('
    • fine
    • thank you
    '); $body.append($ul); const range = sq.getSelection(); - range.setStart($body.find('ul>li>div').eq(0)[0], 0); - range.setEnd($body.find('ul>li>div').eq(1)[0], 1); + range.setStart($body.find('ul>li').eq(0)[0], 0); + range.setEnd($body.find('ul>li').eq(1)[0], 1); sq.setSelection(range); OL.exec(wwe); @@ -205,7 +204,7 @@ describe('OL', () => { expect(wwe.get$Body().find('li').length).toEqual(2); }); - it('stop changing format to OL when meet PRE, TABLE element', () => { + it('skip changing format to OL from PRE, TABLE element', () => { const $body = sq.get$Body(); const $div1 = $('
    fine
    '); const $div2 = $('
    thank you
    '); @@ -225,8 +224,8 @@ describe('OL', () => { OL.exec(wwe); - expect(wwe.get$Body().find('ol').length).toEqual(1); + expect(wwe.get$Body().find('ol').length).toEqual(2); expect(wwe.get$Body().children('pre').length).toEqual(1); - expect(wwe.get$Body().find('li').length).toEqual(2); + expect(wwe.get$Body().find('li').length).toEqual(3); }); }); diff --git a/test/wysiwygCommands/task.spec.js b/test/wysiwygCommands/task.spec.js index 217320f05e..39cd15bb3e 100644 --- a/test/wysiwygCommands/task.spec.js +++ b/test/wysiwygCommands/task.spec.js @@ -5,14 +5,13 @@ import WysiwygEditor from '../../src/js/wysiwygEditor'; import EventManager from '../../src/js/eventManager'; describe('Task', () => { - let wwe, sq; + let wwe, sq, container; beforeEach(() => { - const $container = $('
    '); + container = document.createElement('div'); + document.body.appendChild(container); - $('body').append($container); - - wwe = new WysiwygEditor($container, new EventManager()); + wwe = new WysiwygEditor($(container), new EventManager()); wwe.init(); @@ -22,10 +21,10 @@ describe('Task', () => { wwe.getEditor().focus(); }); - //we need to wait squire input event process + // we need to wait squire input event process afterEach(done => { setTimeout(() => { - $('body').empty(); + document.body.removeChild(container); done(); }); }); @@ -62,9 +61,9 @@ describe('Task', () => { it('add input too if there is nested task list', () => { const range = sq.getSelection().cloneRange(); - sq.setHTML('

      '); + sq.setHTML('

        '); - range.setStart(wwe.get$Body().find('ul div')[0], 0); + range.setStart(wwe.get$Body().find('ul li')[0], 0); range.collapse(true); sq.setSelection(range); @@ -103,7 +102,7 @@ describe('Task', () => { const $div1 = $('
        hello
        '); const $div2 = $('
        world
        '); const $div3 = $('
        i`m
        '); - const $ol = $('
        • fine
        '); + const $ol = $('
        • fine
        '); $body.append($ol); $body.append($div1); @@ -112,7 +111,7 @@ describe('Task', () => { const range = sq.getSelection(); - range.setStart($ol[0].firstChild.firstChild.firstChild, 0); + range.setStart($ol[0].firstChild.firstChild, 0); range.setEnd($div3[0], 1); sq.setSelection(range); @@ -125,13 +124,13 @@ describe('Task', () => { it('change UL to Task', () => { const $body = sq.get$Body(); - const $ul = $('
        • fine
        '); + const $ul = $('
        • fine
        '); $body.append($ul); const range = sq.getSelection(); - range.setStart($ul[0].firstChild.firstChild.firstChild, 1); + range.setStart($ul[0].firstChild.firstChild, 1); range.collapse(true); sq.setSelection(range); @@ -144,13 +143,13 @@ describe('Task', () => { it('change OL to Task', () => { const $body = sq.get$Body(); - const $ol = $('
        1. fine
        '); + const $ol = $('
        1. fine
        '); $body.append($ol); const range = sq.getSelection(); - range.setStart($ol[0].firstChild.firstChild.firstChild, 1); + range.setStart($ol[0].firstChild.firstChild, 1); range.collapse(true); sq.setSelection(range); @@ -163,13 +162,13 @@ describe('Task', () => { it('change UL to Task with selection', () => { const $body = sq.get$Body(); - const $ul = $('
        • fine
        • thank you
        '); + const $ul = $('
        • fine
        • thank you
        '); $body.append($ul); const range = sq.getSelection(); - range.setStart($ul[0].firstChild.firstChild.firstChild, 1); + range.setStart($ul[0].firstChild.firstChild, 1); range.setEnd($ul[0].firstChild.nextSibling.firstChild, 1); sq.setSelection(range); @@ -182,13 +181,13 @@ describe('Task', () => { it('change OL to Task with selection', () => { const $body = sq.get$Body(); - const $ol = $('
        1. fine
        2. thank you
        '); + const $ol = $('
        1. fine
        2. thank you
        '); $body.append($ol); const range = sq.getSelection(); - range.setStart($ol[0].firstChild.firstChild.firstChild, 1); + range.setStart($ol[0].firstChild.firstChild, 1); range.setEnd($ol[0].firstChild.nextSibling.firstChild, 1); sq.setSelection(range); @@ -199,7 +198,7 @@ describe('Task', () => { expect(wwe.get$Body().find('li').length).toEqual(2); }); - it('stop changing format to Task when meet PRE, TABLE element', () => { + it('skip changing format to Task from PRE, TABLE element', () => { const $body = sq.get$Body(); const $div1 = $('
        fine
        '); const $div2 = $('
        thank you
        '); @@ -219,9 +218,9 @@ describe('Task', () => { Task.exec(wwe); - expect(wwe.get$Body().find('ul').length).toEqual(1); + expect(wwe.get$Body().find('ul').length).toEqual(2); expect(wwe.get$Body().children('pre').length).toEqual(1); - expect(wwe.get$Body().find('li.task-list-item').length).toEqual(2); - expect(wwe.get$Body().find('li').length).toEqual(2); + expect(wwe.get$Body().find('li.task-list-item').length).toEqual(3); }); }); + diff --git a/test/wysiwygCommands/ul.spec.js b/test/wysiwygCommands/ul.spec.js index 8ee415b3e4..bcb57a5bc0 100644 --- a/test/wysiwygCommands/ul.spec.js +++ b/test/wysiwygCommands/ul.spec.js @@ -5,14 +5,13 @@ import WysiwygEditor from '../../src/js/wysiwygEditor'; import EventManager from '../../src/js/eventManager'; describe('UL', () => { - let wwe, sq; + let wwe, sq, container; beforeEach(() => { - const $container = $('
        '); + container = document.createElement('div'); + document.body.appendChild(container); - $('body').append($container); - - wwe = new WysiwygEditor($container, new EventManager()); + wwe = new WysiwygEditor($(container), new EventManager()); wwe.init(); @@ -22,10 +21,10 @@ describe('UL', () => { sq.focus(); }); - //we need to wait squire input event process + // we need to wait squire input event process afterEach(done => { setTimeout(() => { - $('body').empty(); + document.body.removeChild(container); done(); }); }); @@ -69,7 +68,7 @@ describe('UL', () => { const $div1 = $('
        hello
        '); const $div2 = $('
        world
        '); const $div3 = $('
        i`m
        '); - const $ol = $('
        • fine
        '); + const $ol = $('
        • fine
        '); $body.append($div1); $body.append($div2); @@ -93,7 +92,7 @@ describe('UL', () => { const $div1 = $('
        hello
        '); const $div2 = $('
        world
        '); const $div3 = $('
        i`m
        '); - const $ol = $('
        1. fine
        '); + const $ol = $('
        1. fine
        '); $body.append($ol); $body.append($div1); @@ -102,7 +101,7 @@ describe('UL', () => { const range = sq.getSelection(); - range.setEnd($ol[0].firstChild.firstChild.firstChild, 1); + range.setEnd($ol[0].firstChild.firstChild, 1); range.setStart($div3[0].firstChild, 1); sq.setSelection(range); @@ -114,13 +113,13 @@ describe('UL', () => { it('change OL to UL', () => { const $body = sq.get$Body(); - const $ol = $('
        1. fine
        '); + const $ol = $('
        1. fine
        '); $body.append($ol); const range = sq.getSelection(); - range.setStart($ol[0].firstChild.firstChild.firstChild, 1); + range.setStart($ol[0].firstChild.firstChild, 1); range.collapse(true); sq.setSelection(range); @@ -132,14 +131,14 @@ describe('UL', () => { it('change OL to UL with selection', () => { const $body = sq.get$Body(); - const $ol = $('
        1. fine
        2. thank you
        '); + const $ol = $('
        1. fine
        2. thank you
        '); $body.append($ol); const range = sq.getSelection(); - range.setStart($ol[0].firstChild.firstChild.firstChild, 1); - range.setEnd($ol[0].firstChild.nextSibling.firstChild, 1); + range.setStart($ol[0].firstChild.firstChild, 1); + range.setEnd($ol[0].firstChild.nextSibling, 1); sq.setSelection(range); UL.exec(wwe); @@ -150,13 +149,13 @@ describe('UL', () => { it('change TASK to UL', () => { const $body = sq.get$Body(); - const $ol = $('
        1. fine
        '); + const $ol = $('
        1. fine
        '); $body.append($ol); const range = sq.getSelection(); - range.setStart($ol[0].firstChild.firstChild.firstChild, 1); + range.setStart($ol[0].firstChild.firstChild, 1); range.collapse(true); sq.setSelection(range); @@ -170,13 +169,13 @@ describe('UL', () => { it('change TASK to UL with selection', () => { const $body = sq.get$Body(); - const $ol = $('
        1. fine
        2. thank you
        '); + const $ol = $('
        1. fine
        2. thank you
        '); $body.append($ol); const range = sq.getSelection(); - range.setStart($ol[0].firstChild.firstChild.firstChild, 1); + range.setStart($ol[0].firstChild.firstChild, 1); range.setEnd($ol[0].firstChild.nextSibling.firstChild, 1); sq.setSelection(range); @@ -187,7 +186,7 @@ describe('UL', () => { expect(wwe.get$Body().find('li').length).toEqual(2); }); - it('stop changing format to UL when meet PRE, TABLE element', () => { + it('skip changing format to UL from TABLE/PRE element', () => { const $body = sq.get$Body(); const $div1 = $('
        fine
        '); const $div2 = $('
        thank you
        '); @@ -207,8 +206,8 @@ describe('UL', () => { UL.exec(wwe); - expect(wwe.get$Body().find('ul').length).toEqual(1); + expect(wwe.get$Body().find('ul').length).toEqual(2); expect(wwe.get$Body().children('pre').length).toEqual(1); - expect(wwe.get$Body().find('li').length).toEqual(2); + expect(wwe.get$Body().find('li').length).toEqual(3); }); });