Wrapping text node containing DocumentTextElement's text

diff --git a/modules/documentCanvas/canvas/canvas.js b/modules/documentCanvas/canvas/canvas.js
index 9506049..cf46d5e 100644 (file)
--- a/modules/documentCanvas/canvas/canvas.js
+++ b/modules/documentCanvas/canvas/canvas.js
@@ -22,7 +22,8 @@ $.extend(Canvas.prototype, {
                 var currentTag = $(this);
                 if(currentTag.attr('wlxml-tag'))
                     return;
-                var toret = $('<div>').attr('wlxml-tag', currentTag.prop('tagName').toLowerCase());
+                var toret = $('<div>')
+                    .attr('wlxml-tag', currentTag.prop('tagName').toLowerCase());
                 //toret.attr('id', 'xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {var r = Math.random()*16|0,v=c=='x'?r:r&0x3|0x8;return v.toString(16);}));
                 for(var i = 0; i < this.attributes.length; i++) {
                     var attr = this.attributes.item(i);
@@ -57,9 +58,15 @@ $.extend(Canvas.prototype, {
                         this.data = $.trim(this.data);
                         if(this.data.length === 0 && oldLength > 0 && el.parent().contents().length === 1)
                             this.data = ' ';
-                        if(this.data.length === 0)
+                        if(this.data.length === 0) {
                             $(this).remove();
+                            return true; // continue
+                        }
                     }
+
+                    var wrapper = documentElement.DocumentTextElement.create({text: this.data});
+                    $(this).before(wrapper.dom());
+                    $(this).remove();
                 });
             
             this.d = wrapper.children(0);

diff --git a/modules/documentCanvas/canvas/canvas.test3.js b/modules/documentCanvas/canvas/canvas.test3.js
index 08e6e0f..3778698 100644 (file)
--- a/modules/documentCanvas/canvas/canvas.test3.js
+++ b/modules/documentCanvas/canvas/canvas.test3.js
@@ -27,10 +27,18 @@ describe('Canvas', function() {
                 </section>\
             ');
             var expected = '<div wlxml-tag="section">'
-                            + 'This is some text without its own wrapping tag.'
-                            + '<div wlxml-tag="div" wlxml-class="p-subclass">This is a paragraph.</div>'
-                            + '<div wlxml-tag="div">This is text in a div <div wlxml-tag="span">with some inline text</div>.</div>'
-                            + 'This is some text without its own wrapping tag.'
+                            + '<div wlxml-text>This is some text without its own wrapping tag.</div>'
+                            + '<div wlxml-tag="div" wlxml-class="p-subclass">'
+                            +   '<div wlxml-text>This is a paragraph.</div>'
+                            + '</div>'
+                            + '<div wlxml-tag="div">'
+                            +   '<div wlxml-text>This is text in a div </div>'
+                            +   '<div wlxml-tag="span">'
+                            +       '<div wlxml-text>with some inline text</div>'
+                            +   '</div>'
+                            +   '<div wlxml-text>.</div>'
+                            + '</div>'
+                            + '<div wlxml-text>This is some text without its own wrapping tag.</div>'
                             + '</div>';
             expect(c.doc().dom()[0].isEqualNode($(expected)[0])).to.be.true;
         });
@@ -54,9 +62,13 @@ describe('Canvas', function() {
     });
 
     describe('Internal HTML representation of a DocumentTextElement', function() {
-        it('is just a TextNode', function() {
+        it('is text node wrapped in a div with wlxml-text attribute set', function() {
             var dom = canvas.fromXML('<section>Alice</section>').doc().children()[0].dom();
-            expect(dom[0].nodeType === Node.TEXT_NODE);
+            expect(dom.prop('tagName')).to.equal('DIV');
+            expect(dom.attr('wlxml-text')).to.equal('');
+            expect(dom.contents().length).to.equal(1);
+            expect(dom.contents()[0].nodeType).to.equal(Node.TEXT_NODE);
+            expect($(dom.contents()[0]).text()).to.equal('Alice');
         });
     });
 
@@ -127,7 +139,7 @@ describe('Canvas', function() {
         it('returns DocumentTextElement instance from Text Node', function() {
             var c = canvas.fromXML('<section>Alice</section>'),
                 aliceElement = c.doc().children()[0],
-                textNode = aliceElement.dom()[0],
+                textNode = aliceElement.dom().contents()[0],
                 element = c.getDocumentElement(textNode);
 
             expect(textNode.nodeType).to.equal(Node.TEXT_NODE, 'text node selected');
@@ -921,8 +933,9 @@ describe('Canvas', function() {
         it('returns position when browser selection collapsed', function() {
             var c = canvas.fromXML('<section>Alice has a cat</section>'),
                 dom = c.doc().dom(),
-                text = dom.contents()[0];
+                text = $(dom.contents()[0]).contents()[0];
 
+            expect(text.nodeType).to.equal(Node.TEXT_NODE, 'correct node selected');
             expect($(text).text()).to.equal('Alice has a cat');
 
             getSelection.returns({

diff --git a/modules/documentCanvas/canvas/documentElement.js b/modules/documentCanvas/canvas/documentElement.js
index 6d76bf4..d2d3a64 100644 (file)
--- a/modules/documentCanvas/canvas/documentElement.js
+++ b/modules/documentCanvas/canvas/documentElement.js
@@ -11,7 +11,7 @@ var DocumentElement = function(htmlElement, canvas) {
     if(arguments.length === 0)
         return;
     this.canvas = canvas;
-    this.$element = $(htmlElement);
+    this._setupDOMHandler(htmlElement);
 }
 
 var elementTypeFromParams = function(params) {
@@ -29,14 +29,19 @@ $.extend(DocumentElement, {
     },
 
     fromHTMLElement: function(htmlElement, canvas) {
-        if(htmlElement.nodeType === Node.ELEMENT_NODE)
+        var $element = $(htmlElement);
+        if(htmlElement.nodeType === Node.ELEMENT_NODE && $element.attr('wlxml-tag'))
             return DocumentNodeElement.fromHTMLElement(htmlElement, canvas);
-        if(htmlElement.nodeType === Node.TEXT_NODE)
+        if($element.attr('wlxml-text') !== undefined || (htmlElement.nodeType === Node.TEXT_NODE && $element.parent().attr('wlxml-text') !== undefined))
             return DocumentTextElement.fromHTMLElement(htmlElement, canvas);
+        return undefined;
     }
 });
 
 $.extend(DocumentElement.prototype, {
+    _setupDOMHandler: function(htmlElement) {
+        this.$element = $(htmlElement);
+    },
     dom: function() {
         return this.$element;
     },
@@ -175,7 +180,9 @@ var DocumentTextElement = function(htmlElement, canvas) {
 
 $.extend(DocumentTextElement, {
     createDOM: function(params) {
-        return $(document.createTextNode(params.text));
+        return $('<div>')
+            .attr('wlxml-text', '')
+            .text(params.text);
     },
 
     create: function(params, canvas) {
@@ -190,8 +197,15 @@ $.extend(DocumentTextElement, {
 DocumentTextElement.prototype = new DocumentElement();
 
 $.extend(DocumentTextElement.prototype, {
+    _setupDOMHandler: function(htmlElement) {
+        var $element = $(htmlElement);
+        if(htmlElement.nodeType === Node.TEXT_NODE)
+            this.$element = $element.parent();
+        else
+            this.$element = $element;
+    },
     setText: function(text) {
-        this.dom()[0].data = text;
+        this.dom().contents()[0].data = text;
     },
     getText: function() {
         return this.dom().text();

diff --git a/modules/documentCanvas/nodes.less b/modules/documentCanvas/nodes.less
index 0313b0b..3b7f053 100644 (file)
--- a/modules/documentCanvas/nodes.less
+++ b/modules/documentCanvas/nodes.less
@@ -1,3 +1,7 @@
+[wlxml-text] {
+    display: inline;
+}
+
 [wlxml-tag] {
     float: none !important; /* temporaty workaround for Bootstrap's influence via [class*="span"] { float: left; } */
     border-color: white;
@@ -9,7 +13,7 @@
 }
 
 [wlxml-tag=span] {
-    display:inline-block;
+    display:inline;
     min-width: 10px;
 }