editor: delete/insert at the edges of a span

diff --git a/src/editor/modules/documentCanvas/canvas/keyboard.js b/src/editor/modules/documentCanvas/canvas/keyboard.js
index bd66c6e..f8aca73 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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('<section>Alice<span>has a cat</span></section>'),
+                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('<section>Alice<span><span>has a cat</span></span></section>'),
+                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('<section><span>Alice</span><span>has a cat</span></section>'),
+                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('<section><span>Alice</span><span><span>has a cat</span></span></section>'),
+                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('<section><div class="p">para</div><div class="p"><span>Alice</span> has a cat</div></section>'),
+                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('<section><span>Alice</span>has a cat</section>'),
+                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('<section>Alice <span>h</span> a cat</section>'),
+                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);