From 4638325970a04404505f5ce87838eee6395b8f83 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Aleksander=20=C5=81ukasz?= Date: Mon, 4 Aug 2014 11:32:06 +0200 Subject: [PATCH] editor: delete/insert at the edges of a span --- .../modules/documentCanvas/canvas/keyboard.js | 8 +- src/editor/plugins/core/core.js | 75 ++++++++- src/editor/plugins/core/core.test.js | 143 +++++++++++++++++- 3 files changed, 218 insertions(+), 8 deletions(-) diff --git a/src/editor/modules/documentCanvas/canvas/keyboard.js b/src/editor/modules/documentCanvas/canvas/keyboard.js index bd66c6e..f8aca73 100644 --- a/src/editor/modules/documentCanvas/canvas/keyboard.js +++ b/src/editor/modules/documentCanvas/canvas/keyboard.js @@ -421,9 +421,11 @@ var keyEventHandlers = [ s.canvas.wlxmlDocument.transaction(function() { if(element.wlxmlNode.getIndex() === 0) { goto = element.wlxmlNode.parent().moveUp(); - if(goto) { - s.canvas.setCurrentElement(goto.node, {caretTo: goto.offset}); - } + } else { + goto = element.wlxmlNode.moveUp(); + } + if(goto) { + s.canvas.setCurrentElement(goto.node, {caretTo: goto.offset}); } }, { metadata: { diff --git a/src/editor/plugins/core/core.js b/src/editor/plugins/core/core.js index 425b161..e300232 100644 --- a/src/editor/plugins/core/core.js +++ b/src/editor/plugins/core/core.js @@ -8,7 +8,7 @@ var _ = require('libs/underscore'), footnote = require('plugins/core/footnote'), switchTo = require('plugins/core/switch'), lists = require('plugins/core/lists'), - plugin = {name: 'core', actions: [], canvas: {}, documentExtension: {textNode: {}, elementNode: {}}}, + plugin = {name: 'core', actions: [], canvas: {}, documentExtension: {textNode: {}, documentNode: {}}}, Dialog = require('views/dialog/dialog'), canvasElements = require('plugins/core/canvasElements'), metadataEditor = require('plugins/core/metadataEditor/metadataEditor'); @@ -124,7 +124,7 @@ plugin.documentExtension.textNode.transformations = { } }; -plugin.documentExtension.elementNode.transformations = { +plugin.documentExtension.documentNode.transformations = { moveUp: function() { var toMerge = this, prev = toMerge.prev(); @@ -138,11 +138,16 @@ plugin.documentExtension.elementNode.transformations = { } ret = to.append(node); - if(idx === 0) { + if(idx === 0 && ret.nodeType === Node.TEXT_NODE) { toret = { node: ret, offset: ret.getText().length - len }; + } else if(!toret) { + toret = { + node: ret.getFirstTextNode(), + offset: 0 + }; } }); from.detach(); @@ -152,7 +157,32 @@ plugin.documentExtension.elementNode.transformations = { var strategies = [ { applies: function() { - return toMerge.is('p'); + return toMerge.nodeType === Node.TEXT_NODE && prev.is({tagName: 'span'}); + }, + run: function() { + var textNode = prev.getLastTextNode(), + txt, prevText, prevTextLen; + if(textNode) { + txt = textNode.getText(); + if(txt.length > 1) { + textNode.setText(txt.substr(0, txt.length-1)); + return {node: toMerge, offset: 0}; + } else { + if((prevText = prev.prev()) && prevText.nodeType === Node.TEXT_NODE) { + prevTextLen = prevText.getText().length; + } + prev.detach(); + return { + node: prevText ? prevText : toMerge, + offset : prevText ? prevTextLen : 0 + }; + } + } + } + }, + { + applies: function() { + return toMerge.is({tagName: 'div', 'klass': 'p'}) || (toMerge.is({tagName: 'div'}) && toMerge.getClass() === ''); }, run: function() { if(prev && prev.is('p') || prev.is({tagName: 'header'})) { @@ -164,6 +194,43 @@ plugin.documentExtension.elementNode.transformations = { } } }, + { + applies: function() { + return toMerge.is({tagName: 'span'}); + }, + run: function() { + /* globals Node */ + var toret = {node: toMerge.contents()[0] , offset: 0}, + txt, txtNode, parent; + if(!prev) { + toMerge.parents().some(function(p) { + if(p.is({tagName: 'span'})) { + parent = prev = p; + } else { + if(!parent) { + parent = p; + } + prev = prev && prev.prev(); + return true; + } + }); + } + if(!prev) { + return parent.moveUp(); + } + else if(prev.nodeType === Node.TEXT_NODE && (txt = prev.getText())) { + prev.setText(txt.substr(0, txt.length-1)); + return toret; + } else if(prev.is({tagName: 'span'})) { + if((txtNode = prev.getLastTextNode())) { + txt = txtNode.getText(); + txtNode.setText(txt.substr(0, txt.length-1)); + return toret; + } + } + + } + }, { applies: function() { return toMerge.is({tagName: 'header'}); diff --git a/src/editor/plugins/core/core.test.js b/src/editor/plugins/core/core.test.js index 62d734d..5afa23d 100644 --- a/src/editor/plugins/core/core.test.js +++ b/src/editor/plugins/core/core.test.js @@ -260,7 +260,7 @@ describe('Keyboard interactions', function() { }); - describe('backspace at the beginning', function() { + describe('backspace at the beginning of a block', function() { afterEach(removeCanvas); it('merges two adjacent paragraphs', function() { @@ -406,6 +406,147 @@ describe('Keyboard interactions', function() { }); }); + describe('backspace at the beginning of a span', function() { + afterEach(removeCanvas); + + it('deletes from the end of the preceding text element', function() { + var c = getCanvasFromXML('
Alicehas a cat
'), + k = new Keyboard(c); + + k.withCaret('|has a cat').press(K.BACKSPACE); + + var rootContents = c.wlxmlDocument.root.contents(); + expect(rootContents.length).to.equal(2); + expect(rootContents[0].getText()).to.equal('Alic'); + + var selection = c.getSelection(); + expect(selection.type).to.equal('caret'); + expect(selection.element.sameNode(getTextElement('has a cat', c))).to.equal(true); + expect(selection.offset).to.equal(0); + }); + + it('deletes from the end of the preceding text element - multiple spans', function() { + var c = getCanvasFromXML('
Alicehas a cat
'), + k = new Keyboard(c); + + k.withCaret('|has a cat').press(K.BACKSPACE); + + var rootContents = c.wlxmlDocument.root.contents(); + expect(rootContents.length).to.equal(2); + expect(rootContents[0].getText()).to.equal('Alic'); + + var selection = c.getSelection(); + expect(selection.type).to.equal('caret'); + expect(selection.element.sameNode(getTextElement('has a cat', c))).to.equal(true); + expect(selection.offset).to.equal(0); + }); + + it('deletes from the end of the preceding span element content', function() { + var c = getCanvasFromXML('
Alicehas a cat
'), + k = new Keyboard(c); + + k.withCaret('|has a cat').press(K.BACKSPACE); + + var rootContents = c.wlxmlDocument.root.contents(); + expect(rootContents.length).to.equal(2); + expect(rootContents[0].is({tagName: 'span'})).to.equal(true); + expect(rootContents[0].contents()[0].getText()).to.equal('Alic'); + + expect(rootContents[1].contents()[0].getText()).to.equal('has a cat'); + + var selection = c.getSelection(); + expect(selection.type).to.equal('caret'); + expect(selection.element.sameNode(getTextElement('has a cat', c))).to.equal(true); + expect(selection.offset).to.equal(0); + }); + + it('deletes from the end of the preceding span element content - multiple spans', function() { + var c = getCanvasFromXML('
Alicehas a cat
'), + k = new Keyboard(c); + + k.withCaret('|has a cat').press(K.BACKSPACE); + + var rootContents = c.wlxmlDocument.root.contents(); + expect(rootContents.length).to.equal(2); + expect(rootContents[0].is({tagName: 'span'})).to.equal(true); + expect(rootContents[0].contents()[0].getText()).to.equal('Alic'); + + var outerSpan = rootContents[1]; + expect(outerSpan.is({tagName: 'span'})).to.equal(true); + + var innerSpan = outerSpan.contents()[0]; + expect(innerSpan.contents()[0].getText()).to.equal('has a cat'); + + var selection = c.getSelection(); + expect(selection.type).to.equal('caret'); + expect(selection.element.sameNode(getTextElement('has a cat', c))).to.equal(true); + expect(selection.offset).to.equal(0); + }); + + it('merges two paragrahps if span is a first content of the second paragraph', function() { + var c = getCanvasFromXML('
para
Alice has a cat
'), + k = new Keyboard(c); + + k.withCaret('|Alice').press(K.BACKSPACE); + + var rootContents = c.wlxmlDocument.root.contents(); + + expect(rootContents.length).to.equal(1, 'single paragraph left'); + + var p = rootContents[0], + pContents = p.contents(); + + expect(p.is('p')).to.equal(true); + + expect(pContents.length).to.equal(3); + expect(pContents[0].getText()).to.equal('para'); + expect(pContents[1].contents().length).to.equal(1); + expect(pContents[1].contents()[0].getText()).to.equal('Alice'); + + expect(pContents[2].getText()).to.equal(' has a cat'); + + var selection = c.getSelection(); + expect(selection.type).to.equal('caret'); + expect(selection.element.sameNode(getTextElement('Alice', c))).to.equal(true); + expect(selection.offset).to.equal(0); + }); + }); + + describe('backspace before a span', function() { + it('deletes from the end of a span', function() { + var c = getCanvasFromXML('
Alicehas a cat
'), + k = new Keyboard(c); + + k.withCaret('|has a cat').press(K.BACKSPACE); + + var rootContents = c.wlxmlDocument.root.contents(); + expect(rootContents.length).to.equal(2); + expect(rootContents[0].is({tagName: 'span'})).to.equal(true); + expect(rootContents[0].contents()[0].getText()).to.equal('Alic'); + expect(rootContents[1].getText()).to.equal('has a cat'); + + var selection = c.getSelection(); + expect(selection.type).to.equal('caret'); + expect(selection.element.sameNode(getTextElement('has a cat', c))).to.equal(true); + expect(selection.offset).to.equal(0); + }); + it('deletes span if it contains only one character', function() { + var c = getCanvasFromXML('
Alice h a cat
'), + k = new Keyboard(c); + + k.withCaret('| a cat').press(K.BACKSPACE); + + var rootContents = c.wlxmlDocument.root.contents(); + expect(rootContents.length).to.equal(1); + expect(rootContents[0].getText()).to.equal('Alice a cat'); + + var selection = c.getSelection(); + expect(selection.type).to.equal('caret'); + expect(selection.element.sameNode(getTextElement('Alice a cat', c))).to.equal(true); + expect(selection.offset).to.equal(6); + }); + }); + describe('splitting with enter', function() { afterEach(removeCanvas); -- 2.20.1