test('keystroke of printable character while text is selected deletes the text', (assert) => {
editor = new Editor({mobiledoc: mobileDocWith2Sections});
editor.render(editorElement);
Helpers.dom.selectText('first section', editorElement);
editor.run(postEditor => {
editor.activeSections.forEach(section => {
postEditor.changeSectionTagName(section, 'h2');
});
});
assert.ok($('#editor h2:contains(first section)').length,
'first section is a heading');
const firstSectionTextNode = editorElement.childNodes[0].childNodes[0];
const secondSectionTextNode = editorElement.childNodes[1].childNodes[0];
Helpers.dom.selectText('section', firstSectionTextNode,
'secon', secondSectionTextNode);
Helpers.dom.insertText(editor, 'X');
assert.ok($(`#editor h2:contains(first Xd section)`).length,
'updates the section');
});
test('selecting text across markers and deleting joins markers', (assert) => {
editor = new Editor({mobiledoc: mobileDocWith2Sections});
editor.render(editorElement);
Helpers.dom.selectText('rst sect', editorElement);
editor.run(postEditor => postEditor.toggleMarkup('strong'));
let firstTextNode = editorElement
.childNodes[0] // p
.childNodes[1] // b
.childNodes[0]; // textNode containing "rst sect"
let secondTextNode = editorElement
.childNodes[0] // p
.childNodes[2]; // textNode containing "ion"
assert.equal(firstTextNode.textContent, 'rst sect', 'correct first text node');
assert.equal(secondTextNode.textContent, 'ion', 'correct second text node');
Helpers.dom.selectText('t sect', firstTextNode,
'ion', secondTextNode);
Helpers.dom.triggerDelete(editor);
assert.hasElement('p:contains(firs)', 'deletes across markers');
assert.hasElement('strong:contains(rs)', 'maintains bold text');
firstTextNode = editorElement
.childNodes[0] // p
.childNodes[1] // b
.childNodes[0]; // textNode now containing "rs"
assert.deepEqual(Helpers.dom.getCursorPosition(),
{node: firstTextNode, offset: 2});
});
test('a moved card retains its current editing mode', (assert) => {
const mobiledoc = Helpers.mobiledoc.build(({post, markupSection, cardSection}) => {
return post([
markupSection(),
cardSection('simple-card')
]);
});
editor = new Editor({mobiledoc, cards: [simpleCard]});
editor.render(editorElement);
assert.hasNoElement('#edit-button', 'precond - card is not in edit mode');
let card = editor.post.sections.tail;
editor.editCard(card);
assert.hasElement('#edit-button', 'precond - card is in edit mode');
editor.run(postEditor => {
let card = editor.post.sections.tail;
postEditor.moveSectionUp(card);
});
assert.hasElement('#edit-button', 'card is still in edit mode');
});
test('select text and apply markup multiple times', (assert) => {
editor = new Editor({mobiledoc: mobileDocWith2Sections});
editor.render(editorElement);
Helpers.dom.selectText('t sect', editorElement);
Helpers.dom.triggerEvent(document, 'mouseup');
editor.run(postEditor => postEditor.toggleMarkup('strong'));
Helpers.dom.selectText('fir', editorElement);
editor.run(postEditor => postEditor.toggleMarkup('strong'));
Helpers.dom.triggerEvent(document, 'mouseup');
editor.run(postEditor => postEditor.toggleMarkup('strong'));
assert.hasElement('p:contains(first section)', 'correct first section');
assert.hasElement('strong:contains(fir)', 'strong "fir"');
assert.hasElement('strong:contains(t sect)', 'strong "t sect"');
});
Helpers.wait(() => {
editor.run(postEditor => {
let markup = editor.builder.createMarkup('strong');
postEditor.addMarkupToRange(editor.range, markup);
});
assert.postIsSimilar(editor.post, Helpers.postAbstract.build(
({post, markupSection, atom, marker, markup}) => {
return post([
markupSection('p', [
marker('text before atom'),
atom('simple-atom', 'Bob', {}, [markup('strong')]),
marker('text after atom')
])
]);
}));
done();
});
test('selecting text that touches bold text should not be considered bold', (assert) => {
const mobiledoc = Helpers.mobiledoc.build(({post, markupSection, marker}) => {
return post([markupSection('p', [marker('abc')])]);
});
editor = new Editor({mobiledoc});
editor.render(editorElement);
Helpers.dom.selectText('b', editorElement);
Helpers.dom.triggerEvent(document, 'mouseup');
editor.run(postEditor => postEditor.toggleMarkup('strong'));
assert.hasElement('#editor strong:contains(b)', 'precond - bold text');
Helpers.dom.selectText('c', editorElement);
Helpers.dom.triggerEvent(document, 'mouseup');
let bold = editor.builder.createMarkup('strong');
assert.ok(editor.markupsInSelection.indexOf(bold) === -1, 'strong is not in selection');
});
test('marking atom with markup adds markup', (assert) => {
editor = new Editor({mobiledoc: mobiledocWithAtom, atoms: [simpleAtom]});
editor.render(editorElement);
let pNode = $('#editor p')[0];
Helpers.dom.selectRange(pNode.firstChild, 16, pNode.lastChild, 0);
editor.run(postEditor => {
let markup = editor.builder.createMarkup('strong');
postEditor.addMarkupToRange(editor.range, markup);
});
assert.postIsSimilar(editor.post, Helpers.postAbstract.build(
({post, markupSection, atom, marker, markup}) => {
return post([
markupSection('p', [
marker('text before atom'),
atom('simple-atom', 'Bob', {}, [markup('strong')]),
marker('text after atom')
])
]);
}));
});
test('a moved card retains its inital editing mode', (assert) => {
const mobiledoc = Helpers.mobiledoc.build(({post, markupSection, cardSection}) => {
let card = cardSection('simple-card');
return post([
markupSection(),
card
]);
});
editor = new Editor({mobiledoc, cards: [simpleCard]});
editor.post.sections.tail.setInitialMode(CARD_MODES.EDIT);
editor.render(editorElement);
assert.hasElement('#edit-button', 'precond - card is in edit mode');
editor.run(postEditor => {
let card = editor.post.sections.tail;
postEditor.moveSectionUp(card);
});
assert.hasElement('#edit-button', 'card is still in edit mode');
});
test('selecting text that includes an empty section and applying markup to it', (assert) => {
const mobiledoc = Helpers.mobiledoc.build(({post, markupSection, marker}) => {
return post([
markupSection('p', [marker('abc')]),
markupSection('p')
]);
});
editor = new Editor({mobiledoc});
editor.render(editorElement);
// precond
assert.hasElement('#editor p:contains(abc)');
assert.ok($('#editor p:eq(1)').text() === '', 'no text in second p');
const t1 = $('#editor p:eq(0)')[0].childNodes[0];
assert.equal(t1.textContent, 'abc', 'correct text node');
const p2 = $('#editor p:eq(1)')[0];
Helpers.dom.moveCursorTo(t1, 0, p2, 0);
editor.run(postEditor => postEditor.toggleMarkup('strong'));
assert.hasElement('#editor p strong:contains(abc)', 'bold is applied to text');
});
test('selecting text that includes a 1-character marker and unbolding it', (assert) => {
const mobiledoc = Helpers.mobiledoc.build(({post, markupSection, marker, markup}) => {
const b = markup('strong');
return post([markupSection('p', [
marker('a'),
marker('b',[b]),
marker('c')
])]);
});
editor = new Editor({mobiledoc});
editor.render(editorElement);
assert.hasElement('#editor strong:contains(b)', 'precond - bold');
Helpers.dom.selectText('b', editorElement, 'c', editorElement);
let bold = editor.builder.createMarkup('strong');
assert.ok(editor.markupsInSelection.indexOf(bold) !== -1, 'strong is in selection');
editor.run(postEditor => postEditor.toggleMarkup('strong'));
assert.hasNoElement('#editor strong', 'bold text is unboldened');
});