sync

diff --git a/Roo/DomHelper.js b/Roo/DomHelper.js
index b56d92f..a896788 100644 (file)
--- a/Roo/DomHelper.js
+++ b/Roo/DomHelper.js
@@ -266,10 +266,15 @@ Roo.DomHelper = function(){
             from.data = to.data;
             return;
         }
-        
+        if (!from.parentNode) {
+            // not sure why this is happening?
+            return;
+        }
         // assume 'to' doesnt have '1/3 nodetypes!
+        // not sure why, by from, parent node might not exist?
         if (from.nodeType !=1 || from.tagName != to.tagName) {
             Roo.log(["ReplaceChild" , from, to ]);
+            
             from.parentNode.replaceChild(to, from);
             return;
         }

diff --git a/Roo/form/HtmlEditor/ToolbarContext.js b/Roo/form/HtmlEditor/ToolbarContext.js
index 09af850..d08f024 100644 (file)
--- a/Roo/form/HtmlEditor/ToolbarContext.js
+++ b/Roo/form/HtmlEditor/ToolbarContext.js
@@ -258,9 +258,9 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         // disable everything...
         var ty= Roo.form.HtmlEditor.ToolbarContext.types;
         this.toolbars = {};
-           
+        // block toolbars are built in updateToolbar when needed.
         for (var i in  ty) {
-          
+            
             this.toolbars[i] = this.buildToolbar(ty[i],i);
         }
         this.tb = this.toolbars.BODY;
@@ -354,19 +354,19 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         // you are not actually selecting the block.
         if (sel && sel.hasAttribute('data-block')) {
             db = sel;
-        } else if (sel && !sel.hasAttribute('contenteditable')) {
+        } else if (sel && sel.closest('[data-block]')) {
             
             db = sel.closest('[data-block]');
-            var cepar = sel.closest('[contenteditable=true]');
-            if (db && cepar && cepar.tagName != 'BODY') {
-               db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
-            }   
+            //var cepar = sel.closest('[contenteditable=true]');
+            //if (db && cepar && cepar.tagName != 'BODY') {
+            //   db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
+            //}   
         }
         
         
         var block = false;
         //if (db && !sel.hasAttribute('contenteditable') && sel.getAttribute('contenteditable') != 'true' ) {
-        if (db) {
+        if (db && this.editorcore.enableBlocks) {
             block = Roo.htmleditor.Block.factory(db);
             
             
@@ -630,13 +630,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                     width: item.width ? item.width  : 130,
                     listeners : {
                         'select': function(c, r, i) {
-                            if (tb.selectedNode.hasAttribute('data-block')) {
-                                var b = Roo.htmleditor.Block.factory(tb.selectedNode);
-                                b[c.attrname] = r.get('val');
-                                b.updateElement(tb.selectedNode);
-                                editorcore.syncValue();
-                                return;
-                            }
+                             
                             
                             if (c.stylename) {
                                 tb.selectedNode.style[c.stylename] =  r.get('val');
@@ -677,14 +671,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                 listeners: {
                     'change' : function(f, nv, ov) {
                         
-                        if (tb.selectedNode.hasAttribute('data-block')) {
-                            var b = Roo.htmleditor.Block.factory(tb.selectedNode);
-                            b[f.attrname] = nv;
-                            b.updateElement(tb.selectedNode);
-                            editorcore.syncValue();
-                            return;
-                        }
-                        
+                         
                         tb.selectedNode.setAttribute(f.attrname, nv);
                         editorcore.syncValue();
                     }
@@ -694,8 +681,9 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         }
         
         var _this = this;
-        
+        var show_delete = !block || block.deleteTitle !== false;
         if(nm == 'BODY'){
+            show_delete = false;
             tb.addSeparator();
         
             tb.addButton( {
@@ -711,7 +699,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         }
         
         tb.addFill();
-        if (!block || block.deleteTitle !== false) {
+        if (show_delete) {
             tb.addButton({
                 text: block && block.deleteTitle ? block.deleteTitle  : 'Remove Block or Formating', // remove the tag, and puts the children outside...
         

diff --git a/Roo/htmleditor/BlockFigure.js b/Roo/htmleditor/BlockFigure.js
index 5bb5ef1..553dc68 100644 (file)
--- a/Roo/htmleditor/BlockFigure.js
+++ b/Roo/htmleditor/BlockFigure.js
@@ -32,6 +32,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
     align: 'center',
     caption : '',
     text_align: 'left',
+    caption_display : 'block',
     
     width : '100%',
     margin: '2%',
@@ -57,6 +58,30 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
         
         return [
              {
+                xtype : 'TextItem',
+                text : "Source: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'TextField',
+                allowBlank : false,
+                width : 150,
+                name : 'image_src',
+                listeners : {
+                    keyup : function (combo, e)
+                    { 
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = block();
+                        b.image_src = this.getValue();
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.form
+                
+            },
+            {
                 xtype : 'TextItem',
                 text : "Width: ",
                 xns : rooui.Toolbar  //Boostrap?
@@ -70,7 +95,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 triggerAction : 'all',
                 typeAhead : true,
                 valueField : 'val',
-                width : 100,
+                width : 70,
                 name : 'width',
                 listeners : {
                     select : function (combo, r, index)
@@ -109,7 +134,7 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 triggerAction : 'all',
                 typeAhead : true,
                 valueField : 'val',
-                width : 100,
+                width : 70,
                 name : 'align',
                 listeners : {
                     select : function (combo, r, index)
@@ -134,31 +159,31 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                     xns : Roo.data
                 }
             },
+            
+            
             {
-                xtype : 'TextItem',
-                text : "Image Source: ",
-                xns : rooui.Toolbar  //Boostrap?
-            },
-            {
-                xtype : 'TextField',
-                allowBlank : false,
-                width : 150,
-                name : 'image_src',
+                xtype : 'Button',
+                text: 'Hide Caption',
+                name : 'caption_display',
+                pressed : false,
+                enableToggle : true,
+                setValue : function(v) {
+                    this.toggle(v == 'block' ? false : true);
+                },
                 listeners : {
-                    change : function (combo, r, index)
+                    toggle: function (btn, state)
                     {
-                        return;
-                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
-                        var b = block();
-                        b.align = r.get('val');
+                        var b  = block();
+                        b.caption_display = b.caption_display == 'block' ? 'none' : 'block';
+                        this.setText(b.caption_display == 'block' ? "Hide Caption" : "Show Caption")
                         b.updateElement();
                         syncValue();
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
                         toolbar.editorcore.onEditorEvent();
                     }
                 },
-                xns : rooui.form
-                
-            }
+                xns : rooui.Toolbar
+            },
         ];
         
     },
@@ -171,48 +196,66 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
         var d = document.createElement('div');
         d.innerHTML = this.caption;
         
-        return {
+        return  {
             tag: 'figure',
             'data-block' : 'Figure',
             contenteditable : 'false',
             style : {
-                display: 'table',
+                display: 'block',
                 float :  this.align ,
-                width :  this.width,
-                margin:  this.margin
+                'max-width':  this.width,
+                width : 'auto',
+                margin:  0,
+                padding: '10px',
+                
             },
+            align : this.align,
             cn : [
                 {
                     tag : 'img',
                     src : this.image_src,
                     alt : d.innerText.replace(/\n/g, " "), // removeHTML..
                     style: {
-                        width: '100%'
+                        width : 'auto',
+                        'max-width': '100%',
+                        margin : '0px' 
+                        
+                        
                     }
                 },
                 {
                     tag: 'figcaption',
                     contenteditable : true,
                     style : {
-                        'text-align': this.text_align
+                        'text-align': 'left',
+                        'margin-top' : '16px',
+                        'font-size' : '16px',
+                        'line-height' : '24px',
+                        'font-style': 'italic',
+                        display : this.caption_display
                     },
                     html : this.caption
                     
                 }
             ]
         };
+         
     },
     
     readElement : function(node)
     {
         this.image_src = this.getVal(node, 'img', 'src');
-        this.align = this.getVal(node, 'figure', 'style', 'float');
+        this.align = this.getVal(node, 'figure', 'align');
         this.caption = this.getVal(node, 'figcaption', 'html');
-        this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
-        this.width = this.getVal(node, 'figure', 'style', 'width');
-        this.margin = this.getVal(node, 'figure', 'style', 'margin');
+        //this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+        this.width = this.getVal(node, 'figure', 'style', 'max-width');
+        //this.margin = this.getVal(node, 'figure', 'style', 'margin');
         
-    } 
+    },
+    removeNode : function()
+    {
+        return this.node;
+    }
     
   
    

diff --git a/Roo/htmleditor/BlockTable.js b/Roo/htmleditor/BlockTable.js
index 477863e..fe76729 100644 (file)
--- a/Roo/htmleditor/BlockTable.js
+++ b/Roo/htmleditor/BlockTable.js
@@ -57,6 +57,11 @@ Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
         var fields = {};
         
         return [
+            {
+                xtype : 'TextItem',
+                text : "Width: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
             {
                 xtype : 'ComboBox',
                 allowBlank : false,
@@ -266,22 +271,18 @@ Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
         
         this.rows = [];
         this.no_row = 0;
-        var trs = Array.from(node.getElementsByTagName('tr'));
+        var trs = Array.from(node.rows);
         trs.forEach(function(tr) {
             var row =  [];
             this.rows.push(row);
-            if (Roo.get(tr).hasClass('roo-html-editor-el')) { // ??? this is for our 'row' selection'
-                return;
-            }
+            
             this.no_row++;
             var no_column = 0;
-            Array.from(tr.getElementsByTagName('td')).forEach(function(td) {
-                if (Roo.get(td).hasClass('roo-html-editor-el')) { // ??? this is for our 'row' selection'
-                    return;
-                }
+            Array.from(tr.cells).forEach(function(td) {
+                
                 var add = {
-                    colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan') : 1,
-                    rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan') : 1,
+                    colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan')*1 : 1,
+                    rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan')*1 : 1,
                     style : td.hasAttribute('style') ? td.getAttribute('style') : '',
                     html : td.innerHTML
                 };
@@ -447,7 +448,7 @@ Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
     addRow : function()
     {
         
-        row = [];
+        var row = [];
         for (var i = 0; i < this.no_col; i++ ) {
             
             row.push(this.emptyCell());

diff --git a/Roo/htmleditor/BlockTd.js b/Roo/htmleditor/BlockTd.js
index ab5aab7..9e432a9 100644 (file)
--- a/Roo/htmleditor/BlockTd.js
+++ b/Roo/htmleditor/BlockTd.js
@@ -43,6 +43,7 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
     
     width: '',
     textAlign : 'left',
+    valign : 'top',
     
     colspan : 1,
     rowspan : 1,
@@ -141,6 +142,47 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
                 },
                 xns : rooui.Toolbar
             },
+            
+            {
+                xtype : 'TextItem',
+                text : "Vertical Align: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 100,
+                name : 'valign',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
+                        var b = cell();
+                        b.valign = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        toolbar.editorcore.onEditorEvent();
+                    }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['top'],
+                        ['middle'],
+                        ['bottom'] // there are afew more... 
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
+                }
+            },
+            
             {
                 xtype : 'TextItem',
                 text : "Merge Cells: ",
@@ -204,9 +246,8 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
                 xns : rooui.Toolbar
             },
             {
-                xtype : 'TextItem',
-                text : "| ",
-                 xns : rooui.Toolbar 
+                xtype : 'Fill',
+                xns : rooui.Toolbar 
                
             },
         
@@ -234,7 +275,7 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
                                     toolbar.editorcore.onEditorEvent();   
                                 }
                             },
-                            xns : rooui.Item
+                            xns : rooui.menu
                         },
                         {
                             xtype : 'Item',
@@ -251,20 +292,20 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
                                                          
                                 }
                             },
-                            xns : rooui.Toolbar
+                            xns : rooui.menu
                         },
                        {
                             xtype : 'Separator',
-                            xns : rooui.Toolbar
+                            xns : rooui.menu
                         },
                         {
                             xtype : 'Item',
-                            html: 'Row',
+                            html: 'Table',
                             listeners : {
                                 click : function (_self, e)
                                 {
                                     var t = table();
-                                    var nn = t.node.nextSibling;
+                                    var nn = t.node.nextSibling || t.node.previousSibling;
                                     t.node.parentNode.removeChild(t.node);
                                     if (nn) { 
                                         toolbar.editorcore.selectNode(nn, true);
@@ -273,7 +314,7 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
                                                          
                                 }
                             },
-                            xns : rooui.Toolbar
+                            xns : rooui.menu
                         },
                     ]
                 }
@@ -303,11 +344,13 @@ Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
             tag : 'td',
             contenteditable : 'true', // this stops cell selection from picking the table.
             'data-block' : 'Td',
+            valign : this.valign,
             style : {  
                 'text-align' :  this.textAlign,
                 border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
                 'border-collapse' : 'collapse',
-                padding : '6px' // 8 for desktop / 4 for mobile
+                padding : '6px', // 8 for desktop / 4 for mobile
+                'vertical-align': this.valign
             },
             html : this.html
         };

diff --git a/Roo/htmleditor/KeyEnter.js b/Roo/htmleditor/KeyEnter.js
index 3b9896d..c0355ed 100644 (file)
--- a/Roo/htmleditor/KeyEnter.js
+++ b/Roo/htmleditor/KeyEnter.js
@@ -10,6 +10,8 @@
 
 
 
+
+
 Roo.htmleditor.KeyEnter = function(cfg) {
     Roo.apply(this, cfg);
     // this does not actually call walk as it's really just a abstract class
@@ -26,89 +28,58 @@ Roo.htmleditor.KeyEnter.prototype = {
     
     keypress : function(e)
     {
-        if (e.charCode != 13) {
+        if (e.charCode != 13 && e.charCode != 10) {
+            Roo.log([e.charCode,e]);
             return true;
         }
         e.preventDefault();
         // https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
         var doc = this.core.doc;
-        
-        var docFragment = doc.createDocumentFragment();
-    
-        //add a new line
+          //add a new line
        
     
-    
-        var range = this.core.win.getSelection().getRangeAt(0);
-        var n = range.commonAncestorContainer ;
-        while (n && n.nodeType != 1) {
-            n  = n.parentNode;
-        }
-        var li = false;
-        if (n && n.tagName == 'UL') {
-            li = doc.createElement('LI');
-            n.appendChild(li);
-            
-        }
-        if (n && n.tagName == 'LI') {
-            li = doc.createElement('LI');
-            if (n.nextSibling) {
-                n.parentNode.insertBefore(li, n.firstSibling);
-                
-            } else {
-                n.parentNode.appendChild(li);
-            }
-        }
-        if (li) {   
-            range = doc.createRange();
-            range.setStartAfter(li);
-            range.collapse(true);
-        
-            //make the cursor there
-            var sel = this.core.win.getSelection();
-            sel.removeAllRanges();
-            sel.addRange(range);
+        var sel = this.core.getSelection();
+        var range = sel.getRangeAt(0);
+        var n = range.commonAncestorContainer;
+        var pc = range.closest([ 'ol', 'ul']);
+        var pli = range.closest('li');
+        if (!pc || e.ctrlKey) {
+            sel.insertNode('br', 'after'); 
+         
             this.core.undoManager.addEvent();
+            this.core.fireEditorEvent(e);
             return false;
-            
-            
         }
-        var newEle = doc.createTextNode('\n');
-        docFragment.appendChild(newEle);
-        
-        //add the br, or p, or something else
-        newEle = doc.createElement('br');
-        //newEle.setAttribute('data-id', Roo.htmleditor.KeyEnter.i++);
-        docFragment.appendChild(newEle);
-        doc.createTextNode('\n');
-        docFragment.appendChild(newEle);
         
-        range.deleteContents();
-        range.insertNode(docFragment);  //<< inseting here...
-         
-        var ns = newEle.nextSibling
-        while (ns && ns.nodeType == 3) { 
-            ns = ns.nextSibling;
+        // deal with <li> insetion
+        if (pli.innerText.trim() == '' &&
+            pli.previousSibling &&
+            pli.previousSibling.nodeName == 'LI' &&
+            pli.previousSibling.innerText.trim() ==  '') {
+            pli.parentNode.removeChild(pli.previousSibling);
+            sel.cursorAfter(pc);
+            this.core.undoManager.addEvent();
+            this.core.fireEditorEvent(e);
+            return false;
         }
-        
-        if (!ns) {
-            //Roo.log('add extra');
-            ns = doc.createElement('br');
-            //ns.setAttribute('data-id', 'x' +  Roo.htmleditor.KeyEnter.i++);
-            newEle.parentNode.appendChild(ns);
+    
+        var li = doc.createElement('LI');
+        li.innerHTML = '&nbsp;';
+        if (!pli || !pli.firstSibling) {
+            pc.appendChild(li);
+        } else {
+            pli.parentNode.insertBefore(li, pli.firstSibling);
         }
+        sel.cursorText (li.firstChild);
+      
+        this.core.undoManager.addEvent();
+        this.core.fireEditorEvent(e);
+
+        return false;
         
+    
         
         
-        range = doc.createRange();
-        range.setStartAfter(newEle);
-        range.collapse(true);
-        
-        var sel = this.core.win.getSelection();
-        sel.removeAllRanges();
-        sel.addRange(range);
-        //this.core.undoManager.addEvent();
-        return false;
          
     }
 };

diff --git a/Roo/lib/Range.js b/Roo/lib/Range.js
new file mode 100644 (file)
index 0000000..f71b2ba
--- /dev/null
+++ b/Roo/lib/Range.js
@@ -0,0 +1,61 @@
+/**
+ * @class Roo.lib.Range
+ * @constructor
+ * This is a toolkit, normally used to copy features into a Dom Range element
+ * Roo.lib.Range.wrap(x);
+ *
+ *
+ *
+ */
+Roo.lib.Range = function() { };
+
+/**
+ * Wrap a Dom Range object, to give it new features...
+ * @static
+ * @param {Range} the range to wrap
+ */
+Roo.lib.Range.wrap = function(r) {
+    return Roo.apply(r, Roo.lib.Range.prototype);
+};
+/**
+ * find a parent node eg. LI / OL
+ * @param {string|Array} node name or array of nodenames
+ * @return {DomElement|false}
+ */
+Roo.apply(Roo.lib.Range.prototype,
+{
+    
+    closest : function(str)
+    {
+        if (typeof(str) != 'string') {
+            // assume it's a array.
+            for(var k of str) {
+                var r = this.closest(k);
+                if (r !== false) {
+                    return r;
+                }
+                
+            }
+            return false;
+        }
+        str = str.toLowerCase();
+        var n = this.commonAncestorContainer; // might not be a node
+        while (n.nodeType != 1) {
+            n = n.parentNode;
+        }
+        
+        if (n.nodeName.toLowerCase() == str ) {
+            return n;
+        }
+        if (n.nodeName.toLowerCase() == 'body') {
+            return false;
+        }
+            
+        return n.closest(str) || false;
+        
+    },
+    cloneRange : function()
+    {
+        return Roo.lib.Range.wrap(Range.prototype.cloneRange.call(this));
+    }
+});
\ No newline at end of file

diff --git a/Roo/lib/Selection.js b/Roo/lib/Selection.js
index 00e98a2..a4f2951 100644 (file)
--- a/Roo/lib/Selection.js
+++ b/Roo/lib/Selection.js
@@ -16,7 +16,8 @@ Roo.lib.Selection = function() { };
  */
 Roo.lib.Selection.wrap = function(r, doc) {
     Roo.apply(r, Roo.lib.Selection.prototype);
-    r.ownerDocument = r; // usefull so we dont have to keep referening to it.
+    r.ownerDocument = doc; // usefull so we dont have to keep referening to it.
+    return r;
 };
 /**
  * find a parent node eg. LI / OL
@@ -54,30 +55,47 @@ Roo.apply(Roo.lib.Selection.prototype,
         if (this.type != 'Caret') {
             range.deleteContents();
         }
+        var sn = node.childNodes[0]; // select the contents.
+
+        
+        
         range.insertNode(node);
+        if (cursor == 'after') {
+            node.insertAdjacentHTML('afterend', ' ');
+            sn = node.nextSibling;
+        }
+        
         if (cursor == 'none') {
             return;
         }
-        var sn = node.childNodes[0]; // select the contents.
-        if (cursor == 'after') {
-            sn = node.insertAdjacentHTML('afterend', ' ');
-        }
-        this.cursorStart(sn);
+        
+        this.cursorText(sn);
     },
     
-    cursorStart : function(n)
+    cursorText : function(n)
     {
-        var range = this.getRangeAt(0);
-        range = range.cloneRange();
-        range.selectNode(sn);
+       
+        //var range = this.getRangeAt(0);
+        range = Roo.lib.Range.wrap(new Range());
+        //range.selectNode(n);
         
-        range.collapse(false);
+        var ix = Array.from(n.parentNode.childNodes).indexOf(n);
+        range.setStart(n.parentNode,ix);
+        range.setEnd(n.parentNode,ix+1);
+        //range.collapse(false);
          
         this.removeAllRanges();
         this.addRange(range);
+        
+        Roo.log([n, range, this,this.baseOffset,this.extentOffset, this.type]);
+    },
+    cursorAfter : function(n)
+    {
+        if (!n.nextSibling || n.nextSibling.nodeValue != ' ') {
+            n.insertAdjacentHTML('afterend', ' ');
+        }
+        this.cursorText (n.nextSibling);
     }
-    
-    
-    
+        
     
 });
\ No newline at end of file

diff --git a/Roo/menu/Item.js b/Roo/menu/Item.js
index df93aa9..623eda2 100644 (file)
--- a/Roo/menu/Item.js
+++ b/Roo/menu/Item.js
@@ -35,7 +35,7 @@ Roo.extend(Roo.menu.Item, Roo.menu.BaseItem, {
      */
     text: '',
      /**
-     * @cfg {String} HTML to render in menu
+     * @cfg {String} html to render in menu
      * The text to show on the menu item (HTML version).
      */
     html: '',

diff --git a/buildSDK/dependancy_core.txt b/buildSDK/dependancy_core.txt
index cbb299a..13a62f2 100644 (file)
--- a/buildSDK/dependancy_core.txt
+++ b/buildSDK/dependancy_core.txt
@@ -29,7 +29,7 @@ Roo.lib.Easing
 Roo.lib.Motion
 Roo.lib.Scroll
 Roo.lib.UndoManager
-
+Roo.lib.Range
 // --- end if base ---
 
 

diff --git a/css/inline-editor.css b/css/inline-editor.css
index 1353013..5d02aa6 100644 (file)
--- a/css/inline-editor.css
+++ b/css/inline-editor.css
@@ -121,7 +121,9 @@
        background: #d9e8fb; 
 }
 
-.roo-htmleditor-body table.roo-ed-selection {
+.roo-htmleditor-body table.roo-ed-selection,
+.roo-htmleditor-body td.roo-ed-selection
+{
        background-color: #d9e8fb;
 }
 

diff --git a/css/toolbar.css b/css/toolbar.css
index 91136d9..db083be 100644 (file)
--- a/css/toolbar.css
+++ b/css/toolbar.css
@@ -152,7 +152,7 @@
     margin-top: 2px;
     margin-left: 2px;
     max-height: 95%;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 .x-menu-plain

diff --git a/docs/json/roodata.json b/docs/json/roodata.json
index 5a9b441..d944f13 100644 (file)
--- a/docs/json/roodata.json
+++ b/docs/json/roodata.json
@@ -24243,7 +24243,7 @@
       {
         "name" : "allowComments",
         "type" : "boolean",
-        "desc" : "- default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.",
+        "desc" : "- default false - allow comments in HTML source\n         - by default they are stripped - if you are editing email you may need this.",
         "memberOf" : ""
       },
       {
@@ -24252,12 +24252,24 @@
         "desc" : "Whether the component can move the Dom node when rendering (defaults to true).",
         "memberOf" : "Roo.Component"
       },
+      {
+        "name" : "autoClean",
+        "type" : "boolean",
+        "desc" : "- default true - loading and saving will remove quite a bit of formating,\n        if you are doing an email editor, this probably needs disabling, it's designed",
+        "memberOf" : ""
+      },
       {
         "name" : "disableClass",
         "type" : "String",
         "desc" : "CSS class added to the component when it is disabled (defaults to \"x-item-disabled\").",
         "memberOf" : "Roo.Component"
       },
+      {
+        "name" : "enableBlocks",
+        "type" : "boolean",
+        "desc" : "- default true - if the block editor (table and figure should be enabled)",
+        "memberOf" : ""
+      },
       {
         "name" : "height",
         "type" : "Number",
@@ -237411,6 +237423,12 @@
         "desc" : "Whether the component can move the Dom node when rendering (defaults to true).",
         "memberOf" : "Roo.Component"
       },
+      {
+        "name" : "autoClean",
+        "type" : "boolean",
+        "desc" : "- default true - loading and saving will remove quite a bit of formating,\n        if you are doing an email editor, this probably needs disabling, it's designed",
+        "memberOf" : ""
+      },
       {
         "name" : "blacklist",
         "type" : "Array",
@@ -237447,6 +237465,12 @@
         "desc" : "True to disable the field (defaults to false).",
         "memberOf" : "Roo.form.Field"
       },
+      {
+        "name" : "enableBlocks",
+        "type" : "boolean",
+        "desc" : "- default true - if the block editor (table and figure should be enabled)",
+        "memberOf" : ""
+      },
       {
         "name" : "fieldLabel",
         "type" : "String",
@@ -279913,12 +279937,6 @@
   },
   "Roo.menu.CheckItem" : {
     "props" : [
-      {
-        "name" : "HTML",
-        "type" : "String",
-        "desc" : "to render in menu\nThe text to show on the menu item (HTML version).",
-        "memberOf" : "Roo.menu.Item"
-      },
       {
         "name" : "actionMode",
         "type" : "String",
@@ -279997,6 +280015,12 @@
         "desc" : "True to hide the containing menu after this item is clicked (defaults to true)",
         "memberOf" : "Roo.menu.BaseItem"
       },
+      {
+        "name" : "html",
+        "type" : "String",
+        "desc" : "to render in menu\nThe text to show on the menu item (HTML version).",
+        "memberOf" : "Roo.menu.Item"
+      },
       {
         "name" : "icon",
         "type" : "String",
@@ -285127,12 +285151,6 @@
   },
   "Roo.menu.Item" : {
     "props" : [
-      {
-        "name" : "HTML",
-        "type" : "String",
-        "desc" : "to render in menu\nThe text to show on the menu item (HTML version).",
-        "memberOf" : ""
-      },
       {
         "name" : "actionMode",
         "type" : "String",
@@ -285193,6 +285211,12 @@
         "desc" : "True to hide the containing menu after this item is clicked (defaults to true)",
         "memberOf" : "Roo.menu.BaseItem"
       },
+      {
+        "name" : "html",
+        "type" : "String",
+        "desc" : "to render in menu\nThe text to show on the menu item (HTML version).",
+        "memberOf" : ""
+      },
       {
         "name" : "icon",
         "type" : "String",

diff --git a/docs/src/Roo_DomHelper.js.html b/docs/src/Roo_DomHelper.js.html
index 8b11789..63de082 100644 (file)
--- a/docs/src/Roo_DomHelper.js.html
+++ b/docs/src/Roo_DomHelper.js.html
@@ -266,10 +266,15 @@
             </span><span class="jsdoc-var">from.data </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">to.data</span><span class="jsdoc-syntax">;
             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
         }
-
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">from.parentNode</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-comment">// not sure why this is happening?
+            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+        }
         </span><span class="jsdoc-comment">// assume 'to' doesnt have '1/3 nodetypes!
+        // not sure why, by from, parent node might not exist?
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">from.nodeType </span><span class="jsdoc-syntax">!=1 || </span><span class="jsdoc-var">from.tagName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">to.tagName</span><span class="jsdoc-syntax">) {
             </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([</span><span class="jsdoc-string">&quot;ReplaceChild&quot; </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to </span><span class="jsdoc-syntax">]);
+
             </span><span class="jsdoc-var">from.parentNode.replaceChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
         }

diff --git a/docs/src/Roo_HtmlEditorCore.js.html b/docs/src/Roo_HtmlEditorCore.js.html
index 487b121..9546744 100644 (file)
--- a/docs/src/Roo_HtmlEditorCore.js.html
+++ b/docs/src/Roo_HtmlEditorCore.js.html
@@ -107,7 +107,16 @@
      * @cfg {Number} width (in pixels)
      */
     </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 500,
+     </span><span class="jsdoc-comment">/**
+     * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+     *         if you are doing an email editor, this probably needs disabling, it's designed
+     */
+    </span><span class="jsdoc-var">autoClean</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 
+    </span><span class="jsdoc-comment">/**
+     * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
+     */
+    </span><span class="jsdoc-var">enableBlocks </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-comment">/**
      * @cfg {Array} stylesheets url of stylesheets. set to [] to disable stylesheets.
      * 
@@ -115,7 +124,8 @@
     </span><span class="jsdoc-var">stylesheets</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
 
     </span><span class="jsdoc-comment">/**
-     * @cfg {boolean} allowComments - default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.
+     * @cfg {boolean} allowComments - default false - allow comments in HTML source
+     *          - by default they are stripped - if you are editing email you may need this.
      */
     </span><span class="jsdoc-var">allowComments</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-comment">// id of frame..
@@ -340,26 +350,18 @@
 
 
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bd </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">this.doc.body </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">this.doc.documentElement</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-comment">//this.cleanUpPaste(); -- this is done else where and causes havoc..
 
-            // not sure if this is really the place for this
-            // the blocks are synced occasionaly - since we currently dont add listeners on the blocks
-            // this has to update attributes that get duped.. like alt and caption..
-
-
-            //Roo.each(Roo.get(this.doc.body).query('*[data-block]'), function(e) {
-            //     Roo.htmleditor.Block.factory(e);
-            //},this);
 
 
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">div </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-var">div.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">bd.innerHTML</span><span class="jsdoc-syntax">;
-            </span><span class="jsdoc-comment">// remove content editable. (blocks)
 
 
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.enableBlocks</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.htmleditor.FilterBlock</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">div </span><span class="jsdoc-syntax">});
+            }
+            </span><span class="jsdoc-comment">//?? tidy?
 
-            //?? tidy?
-            </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.htmleditor.FilterBlock</span><span class="jsdoc-syntax">({ </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">div </span><span class="jsdoc-syntax">});
 
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">div.innerHTML</span><span class="jsdoc-syntax">;
             </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isSafari</span><span class="jsdoc-syntax">){
@@ -512,6 +514,7 @@
         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isGecko</span><span class="jsdoc-syntax">){
             </span><span class="jsdoc-var">Roo.EventManager.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.doc</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'keypress'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.mozKeyPress</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
         }
+        </span><span class="jsdoc-comment">//??? needed???
         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isSafari </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">Roo.isOpera</span><span class="jsdoc-syntax">){
             </span><span class="jsdoc-var">Roo.EventManager.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.doc</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'keydown'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.fixKeys</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
         }
@@ -683,7 +686,8 @@
             </span><span class="jsdoc-var">this.doc.body.lastChild
            </span><span class="jsdoc-syntax">) {
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">lc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.doc.body.lastChild</span><span class="jsdoc-syntax">;
-            </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lc.nodeType </span><span class="jsdoc-syntax">== 3 &amp;&amp; </span><span class="jsdoc-var">lc.nodeValue </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-comment">// gtx-trans is google translate plugin adding crap.
+            </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">lc.nodeType </span><span class="jsdoc-syntax">== 3 &amp;&amp; </span><span class="jsdoc-var">lc.nodeValue </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">lc.id </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'gtx-trans'</span><span class="jsdoc-syntax">) {
                 </span><span class="jsdoc-var">lc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">lc.previousSibling</span><span class="jsdoc-syntax">;
             }
             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">lc.nodeType </span><span class="jsdoc-syntax">== 1 &amp;&amp; </span><span class="jsdoc-var">lc.nodeName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'BR'</span><span class="jsdoc-syntax">) {
@@ -702,11 +706,16 @@
 
 
 
-        </span><span class="jsdoc-var">this.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.fireEditorEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
       </span><span class="jsdoc-comment">//  this.updateToolbar();
         </span><span class="jsdoc-var">this.syncValue</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-comment">//we can not sync so often.. sync cleans, so this breaks stuff
     </span><span class="jsdoc-syntax">},
 
+    </span><span class="jsdoc-var">fireEditorEvent</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-var">this.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+    },
+
     </span><span class="jsdoc-var">insertTag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tg</span><span class="jsdoc-syntax">)
     {
         </span><span class="jsdoc-comment">// could be a bit smarter... -&gt; wrap the current selected tRoo..
@@ -750,7 +759,37 @@
      * @param {String} cmd The Midas command
      * @param {String/Boolean} value (optional) The value to pass to the command (defaults to null)
      */
-    </span><span class="jsdoc-var">relayCmd </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cmd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">){
+    </span><span class="jsdoc-var">relayCmd </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cmd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">)
+    {
+
+        </span><span class="jsdoc-keyword">switch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cmd</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'justifyleft'</span><span class="jsdoc-syntax">:
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'justifyright'</span><span class="jsdoc-syntax">:
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'justifycenter'</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-comment">// if we are in a cell, then we will adjust the
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getParentElement</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">td </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'td'</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">bl </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">bl.textAlign </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cmd.replace</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'justify'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-var">bl.updateElement</span><span class="jsdoc-syntax">();
+                    </span><span class="jsdoc-var">this.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                }
+                </span><span class="jsdoc-var">this.execCmd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'styleWithCSS'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// 
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'bold'</span><span class="jsdoc-syntax">:
+            </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">'italic'</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-comment">// if there is no selection, then we insert, and set the curson inside it..
+                </span><span class="jsdoc-var">this.execCmd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'styleWithCSS'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+
+
+            </span><span class="jsdoc-keyword">default</span><span class="jsdoc-syntax">:
+                </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
+        }
+
+
         </span><span class="jsdoc-var">this.win.focus</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">this.execCmd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cmd</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">value</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-var">this.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'editorevent'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
@@ -848,9 +887,11 @@
 
                 </span><span class="jsdoc-syntax">}
                 </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cmd</span><span class="jsdoc-syntax">){
-                    </span><span class="jsdoc-var">this.win.focus</span><span class="jsdoc-syntax">();
-                    </span><span class="jsdoc-var">this.execCmd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cmd</span><span class="jsdoc-syntax">);
-                    </span><span class="jsdoc-var">this.deferFocus</span><span class="jsdoc-syntax">();
+
+                    </span><span class="jsdoc-var">this.relayCmd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cmd</span><span class="jsdoc-syntax">);
+                    </span><span class="jsdoc-comment">//this.win.focus();
+                    //this.execCmd(cmd);
+                    //this.deferFocus();
                     </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
                 }
 
@@ -860,6 +901,8 @@
 
     </span><span class="jsdoc-comment">// private
     </span><span class="jsdoc-var">fixKeys </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){ </span><span class="jsdoc-comment">// load time branching for fastest keydown performance
+
+
         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE</span><span class="jsdoc-syntax">){
             </span><span class="jsdoc-keyword">return function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">e.getKey</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
@@ -904,6 +947,7 @@
                     </span><span class="jsdoc-var">this.execCmd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'InsertHTML'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'&amp;#160;&amp;#160;&amp;#160;&amp;#160;'</span><span class="jsdoc-syntax">);
                     </span><span class="jsdoc-var">this.deferFocus</span><span class="jsdoc-syntax">();
                 }
+
                 </span><span class="jsdoc-comment">//if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
                 //    this.cleanUpPaste.defer(100, this);
                  //   return;
@@ -920,6 +964,8 @@
                     </span><span class="jsdoc-var">this.deferFocus</span><span class="jsdoc-syntax">();
                     </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
                 }
+                 </span><span class="jsdoc-var">this.mozKeyPress</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+
                </span><span class="jsdoc-comment">//if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
                  //   this.cleanUpPaste.defer(100, this);
                  //   return;
@@ -953,13 +999,13 @@
     </span><span class="jsdoc-var">getSelection </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
     {
         </span><span class="jsdoc-var">this.assignDocWin</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.doc.selection </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.win.getSelection</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.lib.Selection.wrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.isIE </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.doc.selection </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.win.getSelection</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">this.doc</span><span class="jsdoc-syntax">);
     },
     </span><span class="jsdoc-comment">/**
      * Select a dom node
      * @param {DomElement} node the node to select
      */
-    </span><span class="jsdoc-var">selectNode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">)
+    </span><span class="jsdoc-var">selectNode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">collapse</span><span class="jsdoc-syntax">)
     {
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nodeRange </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.ownerDocument.createRange</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-keyword">try </span><span class="jsdoc-syntax">{
@@ -967,7 +1013,10 @@
         } </span><span class="jsdoc-keyword">catch </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
             </span><span class="jsdoc-var">nodeRange.selectNodeContents</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">);
         }
-        </span><span class="jsdoc-comment">//nodeRange.collapse(true);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">collapse </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">nodeRange.collapse</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+        }
+        </span><span class="jsdoc-comment">//
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">s </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.win.getSelection</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">s.removeAllRanges</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-var">s.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nodeRange</span><span class="jsdoc-syntax">);

diff --git a/docs/src/Roo_form_HtmlEditor.js.html b/docs/src/Roo_form_HtmlEditor.js.html
index 33c2c3e..875db13 100644 (file)
--- a/docs/src/Roo_form_HtmlEditor.js.html
+++ b/docs/src/Roo_form_HtmlEditor.js.html
@@ -91,11 +91,19 @@
      */
     </span><span class="jsdoc-var">allowComments</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-comment">/**
-     * @cfg {string} bodyCls- default '' default classes to add to body of editable area - usually undoreset is a good start..
+     * @cfg {boolean} enableBlocks - default true - if the block editor (table and figure should be enabled)
      */
+    </span><span class="jsdoc-var">enableBlocks </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
 
-
-     </span><span class="jsdoc-var">bodyCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {boolean} autoClean - default true - loading and saving will remove quite a bit of formating,
+     *         if you are doing an email editor, this probably needs disabling, it's designed
+     */
+    </span><span class="jsdoc-var">autoClean</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-comment">/**
+     * @cfg {string} bodyCls- default '' default classes to add to body of editable area - usually undoreset is a good start..
+     */
+    </span><span class="jsdoc-var">bodyCls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
 
     </span><span class="jsdoc-comment">// id of frame..
     </span><span class="jsdoc-var">frameId</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,

diff --git a/docs/src/Roo_form_HtmlEditor_ToolbarContext.js.html b/docs/src/Roo_form_HtmlEditor_ToolbarContext.js.html
index e6ad785..292269d 100644 (file)
--- a/docs/src/Roo_form_HtmlEditor_ToolbarContext.js.html
+++ b/docs/src/Roo_form_HtmlEditor_ToolbarContext.js.html
@@ -258,7 +258,7 @@
         // disable everything...
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.form.HtmlEditor.ToolbarContext.types</span><span class="jsdoc-syntax">;
         </span><span class="jsdoc-var">this.toolbars </span><span class="jsdoc-syntax">= {};
-
+        </span><span class="jsdoc-comment">// block toolbars are built in updateToolbar when needed.
         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-keyword">in  </span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">) {
 
             </span><span class="jsdoc-var">this.toolbars</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.buildToolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ty</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">],</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">);
@@ -320,8 +320,13 @@
             //this.editorcore.selectNode(sel);
 
         </span><span class="jsdoc-syntax">}
-        </span><span class="jsdoc-var">Roo.select</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-ed-selection'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.editorcore.doc</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'roo-ed-selection'</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-comment">//Roo.get(node).addClass('roo-ed-selection');
+
+        </span><span class="jsdoc-comment">// this forces an id..
+        </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.editorcore.doc.body.querySelectorAll</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'.roo-ed-selection'</span><span class="jsdoc-syntax">))</span><span class="jsdoc-var">.forEach</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">) {
+             </span><span class="jsdoc-var">e.classList.remove</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'roo-ed-selection'</span><span class="jsdoc-syntax">);
+        })
+        </span><span class="jsdoc-comment">//Roo.select('.roo-ed-selection', false, this.editorcore.doc).removeClass('roo-ed-selection');
+        //Roo.get(node).addClass('roo-ed-selection');
 
         //var updateFooter = sel ? false : true; 
 
@@ -349,24 +354,28 @@
         </span><span class="jsdoc-comment">// you are not actually selecting the block.
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">sel.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">)) {
             </span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">;
-        } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">&amp;&amp; !</span><span class="jsdoc-var">sel.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'contenteditable'</span><span class="jsdoc-syntax">)) {
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sel_el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel_el.findParent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'[data-block]'</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cepar </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel_el.findParent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'[contenteditable=true]'</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">cepar </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">cepar.tagName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'BODY'</span><span class="jsdoc-syntax">) {
-               </span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// we are inside an editable block.. = not sure how we are going to handle nested blocks!?
-            </span><span class="jsdoc-syntax">}
-        }
+        } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">sel.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'[data-block]'</span><span class="jsdoc-syntax">)) {
+
+            </span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'[data-block]'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-comment">//var cepar = sel.closest('[contenteditable=true]');
+            //if (db &amp;&amp; cepar &amp;&amp; cepar.tagName != 'BODY') {
+            //   db = false; // we are inside an editable block.. = not sure how we are going to handle nested blocks!?
+            //}   
+        </span><span class="jsdoc-syntax">}
 
 
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
         </span><span class="jsdoc-comment">//if (db &amp;&amp; !sel.hasAttribute('contenteditable') &amp;&amp; sel.getAttribute('contenteditable') != 'true' ) {
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">db</span><span class="jsdoc-syntax">) {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">db </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.editorcore.enableBlocks</span><span class="jsdoc-syntax">) {
             </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">db</span><span class="jsdoc-syntax">);
 
 
             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">) {
-                </span><span class="jsdoc-var">db.className </span><span class="jsdoc-syntax">+=  </span><span class="jsdoc-string">' roo-ed-selection'</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// since we removed it earlier... its not there..
+                 </span><span class="jsdoc-var">db.className </span><span class="jsdoc-syntax">= (
+                        </span><span class="jsdoc-var">db.classList.length </span><span class="jsdoc-syntax">&gt; 0  ? </span><span class="jsdoc-var">db.className </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' ' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''
+                    </span><span class="jsdoc-syntax">)  + </span><span class="jsdoc-string">'roo-ed-selection'</span><span class="jsdoc-syntax">;
+
+                 </span><span class="jsdoc-comment">// since we removed it earlier... its not there..
                 </span><span class="jsdoc-var">tn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'BLOCK.' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">db.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">);
 
                 </span><span class="jsdoc-comment">//this.editorcore.selectNode(db);
@@ -621,13 +630,7 @@
                     </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">item.width </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">item.width  </span><span class="jsdoc-syntax">: 130,
                     </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                         </span><span class="jsdoc-string">'select'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">) {
-                            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tb.selectedNode.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">)) {
-                                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">);
-                                </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">c.attrname</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">);
-                                </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">);
-                                </span><span class="jsdoc-var">editorcore.syncValue</span><span class="jsdoc-syntax">();
-                                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
-                            }
+
 
                             </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.stylename</span><span class="jsdoc-syntax">) {
                                 </span><span class="jsdoc-var">tb.selectedNode.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">c.stylename</span><span class="jsdoc-syntax">] =  </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">);
@@ -668,13 +671,6 @@
                 </span><span class="jsdoc-var">listeners</span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-string">'change' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nv</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ov</span><span class="jsdoc-syntax">) {
 
-                        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tb.selectedNode.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">)) {
-                            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">);
-                            </span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">f.attrname</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">nv</span><span class="jsdoc-syntax">;
-                            </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">);
-                            </span><span class="jsdoc-var">editorcore.syncValue</span><span class="jsdoc-syntax">();
-                            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
-                        }
 
                         </span><span class="jsdoc-var">tb.selectedNode.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">f.attrname</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">nv</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-var">editorcore.syncValue</span><span class="jsdoc-syntax">();
@@ -685,8 +681,9 @@
         }
 
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">_this </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
-
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">show_delete </span><span class="jsdoc-syntax">= !</span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">block.deleteTitle </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
         </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nm </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'BODY'</span><span class="jsdoc-syntax">){
+            </span><span class="jsdoc-var">show_delete </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
             </span><span class="jsdoc-var">tb.addSeparator</span><span class="jsdoc-syntax">();
 
             </span><span class="jsdoc-var">tb.addButton</span><span class="jsdoc-syntax">( {
@@ -702,53 +699,54 @@
         }
 
         </span><span class="jsdoc-var">tb.addFill</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-var">tb.addButton</span><span class="jsdoc-syntax">({
-            </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">block.deleteTitle </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">block.deleteTitle  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Remove Block or Formating'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// remove the tag, and puts the children outside...
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">show_delete</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">tb.addButton</span><span class="jsdoc-syntax">({
+                </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">block.deleteTitle </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">block.deleteTitle  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Remove Block or Formating'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// remove the tag, and puts the children outside...
 
-            </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
-                </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
-                {
-                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">;
-                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">) {
-                        </span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeNode</span><span class="jsdoc-syntax">();
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">()
+                    {
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">;
+                        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">) {
+                            </span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tb.selectedNode</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.removeNode</span><span class="jsdoc-syntax">();
 
-                    }
-                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">) {
-                        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
-                    }
-                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">stn </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">sn.childNodes</span><span class="jsdoc-syntax">[0] || </span><span class="jsdoc-var">sn.nextSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.previousSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.parentNode</span><span class="jsdoc-syntax">;
-                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">)) {
-                        </span><span class="jsdoc-var">stn </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">sn.nextSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.previousSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.parentNode</span><span class="jsdoc-syntax">;
-                        </span><span class="jsdoc-var">sn.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
-
-                    } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">sn.tagName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'BODY'</span><span class="jsdoc-syntax">) {
-                        </span><span class="jsdoc-comment">// remove and keep parents.
-                        </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.htmleditor.FilterKeepChildren</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">});
-                        </span><span class="jsdoc-var">a.removeTag</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
-                    }
+                        }
+                        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">) {
+                            </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                        }
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">stn </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">sn.childNodes</span><span class="jsdoc-syntax">[0] || </span><span class="jsdoc-var">sn.nextSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.previousSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.parentNode</span><span class="jsdoc-syntax">;
+                        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">)) {
+                            </span><span class="jsdoc-var">stn </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-var">sn.nextSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.previousSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">sn.parentNode</span><span class="jsdoc-syntax">;
+                            </span><span class="jsdoc-var">sn.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
+
+                        } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">sn.tagName </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">'BODY'</span><span class="jsdoc-syntax">) {
+                            </span><span class="jsdoc-comment">// remove and keep parents.
+                            </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.htmleditor.FilterKeepChildren</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">});
+                            </span><span class="jsdoc-var">a.replaceTag</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">sn</span><span class="jsdoc-syntax">);
+                        }
 
 
-                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editorcore.createRange</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editorcore.createRange</span><span class="jsdoc-syntax">();
 
-                    </span><span class="jsdoc-var">range.setStart</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stn</span><span class="jsdoc-syntax">,0);
-                    </span><span class="jsdoc-var">range.setEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stn</span><span class="jsdoc-syntax">,0);
-                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">selection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editorcore.getSelection</span><span class="jsdoc-syntax">();
-                    </span><span class="jsdoc-var">selection.removeAllRanges</span><span class="jsdoc-syntax">();
-                    </span><span class="jsdoc-var">selection.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">range.setStart</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stn</span><span class="jsdoc-syntax">,0);
+                        </span><span class="jsdoc-var">range.setEnd</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">stn</span><span class="jsdoc-syntax">,0);
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">selection </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">editorcore.getSelection</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">selection.removeAllRanges</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">selection.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);
 
 
-                    </span><span class="jsdoc-comment">//_this.updateToolbar(null, null, pn);
-                    </span><span class="jsdoc-var">_this.updateToolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
-                    </span><span class="jsdoc-var">_this.updateFooter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-comment">//_this.updateToolbar(null, null, pn);
+                        </span><span class="jsdoc-var">_this.updateToolbar</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">_this.updateFooter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
 
+                    }
                 }
-            }
 
 
 
 
-        });
-
+            });
+        }
 
         </span><span class="jsdoc-var">tb.el.on</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'click'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">){
             </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">(); </span><span class="jsdoc-comment">// what does this do?

diff --git a/docs/src/Roo_htmleditor_Block.js.html b/docs/src/Roo_htmleditor_Block.js.html
index 830c3d4..36b723b 100644 (file)
--- a/docs/src/Roo_htmleditor_Block.js.html
+++ b/docs/src/Roo_htmleditor_Block.js.html
@@ -25,7 +25,7 @@
     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.htmleditor.Block.cache</span><span class="jsdoc-syntax">;
     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">id </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.id</span><span class="jsdoc-syntax">;
     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cc</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]) != </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">&amp;&amp; (!</span><span class="jsdoc-var">cc</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.node </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">cc</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.node.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'body'</span><span class="jsdoc-syntax">))) {
-        </span><span class="jsdoc-var">Roo.htmleditor.Block.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.readElement</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">Roo.htmleditor.Block.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.readElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.htmleditor.Block.cache</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">id</span><span class="jsdoc-syntax">];
     }
     </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">db  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'data-block'</span><span class="jsdoc-syntax">);

diff --git a/docs/src/Roo_htmleditor_BlockFigure.js.html b/docs/src/Roo_htmleditor_BlockFigure.js.html
index f4f3f27..10a6222 100644 (file)
--- a/docs/src/Roo_htmleditor_BlockFigure.js.html
+++ b/docs/src/Roo_htmleditor_BlockFigure.js.html
@@ -29,45 +29,163 @@
     </span><span class="jsdoc-comment">// setable values.
     </span><span class="jsdoc-var">image_src</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
 
-    </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-var">caption </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-var">text_align</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">caption_display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">,
 
-    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'46%'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%'</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'2%'</span><span class="jsdoc-syntax">,
 
     </span><span class="jsdoc-comment">// used by context menu
     </span><span class="jsdoc-var">friendly_name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Image with caption'</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-var">deleteTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Delete Image and Caption&quot;</span><span class="jsdoc-syntax">,
 
-    </span><span class="jsdoc-var">context </span><span class="jsdoc-syntax">: { </span><span class="jsdoc-comment">// ?? static really
-        </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Width&quot;</span><span class="jsdoc-syntax">,
-            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
-            </span><span class="jsdoc-comment">// ?? number
-        </span><span class="jsdoc-syntax">},
-        </span><span class="jsdoc-var">margin </span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Margin&quot;</span><span class="jsdoc-syntax">,
-            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 40
-            </span><span class="jsdoc-comment">// ?? number
-        </span><span class="jsdoc-syntax">},
-        </span><span class="jsdoc-var">align</span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Align&quot;</span><span class="jsdoc-syntax">,
-            </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">: [[ </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">],[ </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">]],
-            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 80
-
-        },
-        </span><span class="jsdoc-var">text_align</span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Caption Align&quot;</span><span class="jsdoc-syntax">,
-            </span><span class="jsdoc-var">opts </span><span class="jsdoc-syntax">: [ [ </span><span class="jsdoc-string">&quot;left&quot;</span><span class="jsdoc-syntax">],[ </span><span class="jsdoc-string">&quot;right&quot;</span><span class="jsdoc-syntax">],[ </span><span class="jsdoc-string">&quot;center&quot;</span><span class="jsdoc-syntax">]],
-            </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 80
-        },
-
-
-        </span><span class="jsdoc-var">image_src </span><span class="jsdoc-syntax">: {
-            </span><span class="jsdoc-var">title</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Src&quot;</span><span class="jsdoc-syntax">,
-            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: 220
-        }
+
+    </span><span class="jsdoc-var">contextMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar</span><span class="jsdoc-syntax">)
+    {
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.htmleditor.Block.factory</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+        };
+
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">rooui </span><span class="jsdoc-syntax">=  </span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">'undefined' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">Roo </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.bootstrap</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">syncValue </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">toolbar.editorcore.syncValue</span><span class="jsdoc-syntax">;
+
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">= {};
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[
+             {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextItem'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Source: &quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar  </span><span class="jsdoc-comment">//Boostrap?
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextField'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 150,
+                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'image_src'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">keyup </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">combo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+                    {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.image_src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                    }
+                },
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.form
+
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextItem'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Width: &quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar  </span><span class="jsdoc-comment">//Boostrap?
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ComboBox'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">editable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listWidth </span><span class="jsdoc-syntax">: 100,
+                </span><span class="jsdoc-var">triggerAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'all'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">typeAhead </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">valueField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 70,
+                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'width'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">combo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">)
+                    {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                    }
+                },
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.form</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">store </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'SimpleStore'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: [
+                        [</span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'50%'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'100%'</span><span class="jsdoc-syntax">]
+                    ],
+                    </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">: [ </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">],
+                    </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.data
+                </span><span class="jsdoc-syntax">}
+            },
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextItem'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Align: &quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar  </span><span class="jsdoc-comment">//Boostrap?
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ComboBox'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">editable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listWidth </span><span class="jsdoc-syntax">: 100,
+                </span><span class="jsdoc-var">triggerAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'all'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">typeAhead </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">valueField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 70,
+                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'align'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">combo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">)
+                    {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                    }
+                },
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.form</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">store </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'SimpleStore'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: [
+                        [</span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'right'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'center'</span><span class="jsdoc-syntax">]
+                    ],
+                    </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">: [ </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">],
+                    </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.data
+                </span><span class="jsdoc-syntax">}
+            },
+
+
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Hide Caption'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'caption_display'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">pressed </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">enableToggle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">setValue </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-var">this.toggle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">v </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'block' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-keyword">false </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                },
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">toggle</span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">btn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">state</span><span class="jsdoc-syntax">)
+                    {
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.caption_display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">b.caption_display </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'block' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'none' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">;
+                        </span><span class="jsdoc-var">this.setText</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.caption_display </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'block' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">&quot;Hide Caption&quot; </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Show Caption&quot;</span><span class="jsdoc-syntax">)
+                        </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                    }
+                },
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
+            </span><span class="jsdoc-syntax">},
+        ];
+
     },
     </span><span class="jsdoc-comment">/**
      * create a DomHelper friendly object - for use with
@@ -78,47 +196,65 @@
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-var">d.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.caption</span><span class="jsdoc-syntax">;
 
-        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{
+        </span><span class="jsdoc-keyword">return  </span><span class="jsdoc-syntax">{
             </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-string">'data-block' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Figure'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'false'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
-                </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'table'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">display</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'block'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">float </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">,
-                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
-                </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.margin
-            </span><span class="jsdoc-syntax">},
+                </span><span class="jsdoc-string">'max-width'</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">:  0,
+                </span><span class="jsdoc-var">padding</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'10px'</span><span class="jsdoc-syntax">,
+
+            },
+            </span><span class="jsdoc-var">align </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.align</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
                 {
                     </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">src </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.image_src</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">alt </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">d.innerText.replace</span><span class="jsdoc-syntax">(/\n/g, </span><span class="jsdoc-string">&quot; &quot;</span><span class="jsdoc-syntax">), </span><span class="jsdoc-comment">// removeHTML..
                     </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">: {
-                        </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%'
+                        </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'max-width'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">margin </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'0px'
+
+
                     </span><span class="jsdoc-syntax">}
                 },
                 {
                     </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'figcaption'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
-                        </span><span class="jsdoc-string">'text-align'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.text_align
+                        </span><span class="jsdoc-string">'text-align'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'margin-top' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'16px'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'font-size' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'16px'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'line-height' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'24px'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-string">'font-style'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'italic'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.caption_display
                     </span><span class="jsdoc-syntax">},
                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.caption
 
                 </span><span class="jsdoc-syntax">}
             ]
         };
+
     },
 
     </span><span class="jsdoc-var">readElement </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">)
     {
         </span><span class="jsdoc-var">this.image_src </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'img'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'src'</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'float'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'align'</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-var">this.caption </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figcaption'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">this.text_align </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figcaption'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">,</span><span class="jsdoc-string">'text-align'</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'width'</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">this.margin </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'margin'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">//this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+        </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getVal</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'max-width'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">//this.margin = this.getVal(node, 'figure', 'style', 'margin');
 
+    </span><span class="jsdoc-syntax">},
+    </span><span class="jsdoc-var">removeNode </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.node</span><span class="jsdoc-syntax">;
     }
 
 

diff --git a/docs/src/Roo_htmleditor_BlockTable.js.html b/docs/src/Roo_htmleditor_BlockTable.js.html
index 37c3b14..f147705 100644 (file)
--- a/docs/src/Roo_htmleditor_BlockTable.js.html
+++ b/docs/src/Roo_htmleditor_BlockTable.js.html
@@ -19,7 +19,7 @@
     </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">cfg.node</span><span class="jsdoc-syntax">) {
         </span><span class="jsdoc-var">this.rows </span><span class="jsdoc-syntax">= [];
         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.no_row</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">++) {
-            </span><span class="jsdoc-var">this.rows</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">] = []
+            </span><span class="jsdoc-var">this.rows</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">] = [];
             </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.no_col</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">++) {
                 </span><span class="jsdoc-var">this.rows</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">][</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">this.emptyCell</span><span class="jsdoc-syntax">();
             }
@@ -57,6 +57,11 @@
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">= {};
 
         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">[
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextItem'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Width: &quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar  </span><span class="jsdoc-comment">//Boostrap?
+            </span><span class="jsdoc-syntax">},
             {
                 </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ComboBox'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
@@ -71,11 +76,12 @@
                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">combo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">)
                     {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
-
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.form</span><span class="jsdoc-syntax">,
@@ -103,8 +109,10 @@
                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
                     {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.removeColumn</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
@@ -115,8 +123,10 @@
                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
                     {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addColumn</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
@@ -134,8 +144,10 @@
                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
                     {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.removeRow</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
@@ -148,6 +160,7 @@
                     {
                         </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.addRow</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
@@ -162,6 +175,7 @@
                     {
                         </span><span class="jsdoc-var">block</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.resetWidths</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
@@ -189,8 +203,8 @@
             </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
                 </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">border </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'solid 1px #000'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// ??? hard coded?
-                </span><span class="jsdoc-string">'border-collapse' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">,
-            },
+                </span><span class="jsdoc-string">'border-collapse' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'collapse'
+            </span><span class="jsdoc-syntax">},
             </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
                 { </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'tbody' </span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [] }
             ]
@@ -204,8 +218,8 @@
                 </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'6px'</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">border </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'solid 1px #000'</span><span class="jsdoc-syntax">,
-                    </span><span class="jsdoc-var">textAlign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
-                },
+                    </span><span class="jsdoc-var">textAlign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'
+                </span><span class="jsdoc-syntax">},
                 </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [ ]
             };
 
@@ -257,25 +271,21 @@
 
         </span><span class="jsdoc-var">this.rows </span><span class="jsdoc-syntax">= [];
         </span><span class="jsdoc-var">this.no_row </span><span class="jsdoc-syntax">= 0;
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">trs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tr'</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">trs </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">node.rows</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-var">trs.forEach</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tr</span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">row </span><span class="jsdoc-syntax">=  []
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">row </span><span class="jsdoc-syntax">=  [];
             </span><span class="jsdoc-var">this.rows.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">row</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tr</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'roo-html-editor-el'</span><span class="jsdoc-syntax">)) { </span><span class="jsdoc-comment">// ??? this is for our 'row' selection'
-                </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
-            }
+
             </span><span class="jsdoc-var">this.no_row</span><span class="jsdoc-syntax">++;
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">no_column </span><span class="jsdoc-syntax">= 0;
-            </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tr.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'td'</span><span class="jsdoc-syntax">))</span><span class="jsdoc-var">.forEach</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">) {
-                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.hasClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'roo-html-editor-el'</span><span class="jsdoc-syntax">)) { </span><span class="jsdoc-comment">// ??? this is for our 'row' selection'
-                    </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
-                }
+            </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tr.cells</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.forEach</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">td</span><span class="jsdoc-syntax">) {
+
                 </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">add </span><span class="jsdoc-syntax">= {
-                    </span><span class="jsdoc-var">colspan </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">td.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'colspan'</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">td.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'colspan'</span><span class="jsdoc-syntax">) : 1,
-                    </span><span class="jsdoc-var">rowspan </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">td.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rowspan'</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">td.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rowspan'</span><span class="jsdoc-syntax">) : 1,
+                    </span><span class="jsdoc-var">colspan </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">td.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'colspan'</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">td.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'colspan'</span><span class="jsdoc-syntax">)*1 : 1,
+                    </span><span class="jsdoc-var">rowspan </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">td.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rowspan'</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">td.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rowspan'</span><span class="jsdoc-syntax">)*1 : 1,
                     </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">td.hasAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">) ? </span><span class="jsdoc-var">td.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'style'</span><span class="jsdoc-syntax">) : </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">td.innerHTML
-                </span><span class="jsdoc-syntax">}
+                </span><span class="jsdoc-syntax">};
                 </span><span class="jsdoc-var">no_column </span><span class="jsdoc-syntax">+= </span><span class="jsdoc-var">add.colspan</span><span class="jsdoc-syntax">;
 
 
@@ -438,7 +448,7 @@
     </span><span class="jsdoc-var">addRow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
     {
 
-        </span><span class="jsdoc-var">row </span><span class="jsdoc-syntax">= [];
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">row </span><span class="jsdoc-syntax">= [];
         </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">= 0; </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">this.no_col</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++ ) {
 
             </span><span class="jsdoc-var">row.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.emptyCell</span><span class="jsdoc-syntax">());

diff --git a/docs/src/Roo_htmleditor_BlockTd.js.html b/docs/src/Roo_htmleditor_BlockTd.js.html
index 7ba6547..15fee3a 100644 (file)
--- a/docs/src/Roo_htmleditor_BlockTd.js.html
+++ b/docs/src/Roo_htmleditor_BlockTd.js.html
@@ -43,6 +43,7 @@
 
     </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
     </span><span class="jsdoc-var">textAlign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'left'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">valign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">,
 
     </span><span class="jsdoc-var">colspan </span><span class="jsdoc-syntax">: 1,
     </span><span class="jsdoc-var">rowspan </span><span class="jsdoc-syntax">: 1,
@@ -50,9 +51,9 @@
 
     </span><span class="jsdoc-comment">// used by context menu
     </span><span class="jsdoc-var">friendly_name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Table Cell'</span><span class="jsdoc-syntax">,
-    </span><span class="jsdoc-var">deleteTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Delete Table'</span><span class="jsdoc-syntax">,
+    </span><span class="jsdoc-var">deleteTitle </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// use our customer delete
 
-    </span><span class="jsdoc-comment">// context menu is drawn once..
+    // context menu is drawn once..
 
     </span><span class="jsdoc-var">contextMenu </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar</span><span class="jsdoc-syntax">)
     {
@@ -119,10 +120,10 @@
                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
                     {
-                        </span><span class="jsdoc-var">saveSel</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.shrinkColumn</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
-                        </span><span class="jsdoc-var">restoreSel</span><span class="jsdoc-syntax">();
+                         </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
@@ -133,14 +134,55 @@
                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
                     {
-                        </span><span class="jsdoc-var">saveSel</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.growColumn</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
-                        </span><span class="jsdoc-var">restoreSel</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
             </span><span class="jsdoc-syntax">},
+
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextItem'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Vertical Align: &quot;</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar  </span><span class="jsdoc-comment">//Boostrap?
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'ComboBox'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">allowBlank </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">displayField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">editable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listWidth </span><span class="jsdoc-syntax">: 100,
+                </span><span class="jsdoc-var">triggerAction </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'all'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">typeAhead </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">valueField </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: 100,
+                </span><span class="jsdoc-var">name </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'valign'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">select </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">combo</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">index</span><span class="jsdoc-syntax">)
+                    {
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">b.valign </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">b.updateElement</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                    }
+                },
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.form</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">store </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'SimpleStore'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">data </span><span class="jsdoc-syntax">: [
+                        [</span><span class="jsdoc-string">'top'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'middle'</span><span class="jsdoc-syntax">],
+                        [</span><span class="jsdoc-string">'bottom'</span><span class="jsdoc-syntax">] </span><span class="jsdoc-comment">// there are afew more... 
+                    </span><span class="jsdoc-syntax">],
+                    </span><span class="jsdoc-var">fields </span><span class="jsdoc-syntax">: [ </span><span class="jsdoc-string">'val'</span><span class="jsdoc-syntax">],
+                    </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">Roo.data
+                </span><span class="jsdoc-syntax">}
+            },
+
             {
                 </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'TextItem'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">text </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Merge Cells: &quot;</span><span class="jsdoc-syntax">,
@@ -155,11 +197,11 @@
                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
                     {
-                        </span><span class="jsdoc-var">saveSel</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.mergeRight</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-comment">//block().growColumn();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
-                        </span><span class="jsdoc-var">restoreSel</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
@@ -171,11 +213,11 @@
                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
                     {
-                        </span><span class="jsdoc-var">saveSel</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
                         </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.mergeBelow</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-comment">//block().growColumn();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
-                        </span><span class="jsdoc-var">restoreSel</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
@@ -193,14 +235,91 @@
                 </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
                     </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
                     {
-                        </span><span class="jsdoc-var">saveSel</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-comment">//toolbar.editorcore.selectNode(toolbar.tb.selectedNode);
                         </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.split</span><span class="jsdoc-syntax">();
                         </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
-                        </span><span class="jsdoc-var">restoreSel</span><span class="jsdoc-syntax">();
+                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">toolbar.tb.selectedNode</span><span class="jsdoc-syntax">);
+                        </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+
                     }
                 },
                 </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
-            </span><span class="jsdoc-syntax">}
+            </span><span class="jsdoc-syntax">},
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Fill'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar
+
+            </span><span class="jsdoc-syntax">},
+
+
+            {
+                </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Button'</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Delete'</span><span class="jsdoc-syntax">,
+
+                </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.Toolbar</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">menu </span><span class="jsdoc-syntax">: {
+                    </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Menu'</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.menu</span><span class="jsdoc-syntax">,
+                    </span><span class="jsdoc-var">items </span><span class="jsdoc-syntax">: [
+                        {
+                            </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Item'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Column'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                                </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+                                {
+                                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">();
+
+                                    </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.deleteColumn</span><span class="jsdoc-syntax">();
+                                    </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+                                    </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.node</span><span class="jsdoc-syntax">);
+                                    </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+                                }
+                            },
+                            </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.menu
+                        </span><span class="jsdoc-syntax">},
+                        {
+                            </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Item'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Row'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                                </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+                                {
+                                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">();
+                                    </span><span class="jsdoc-var">cell</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.deleteRow</span><span class="jsdoc-syntax">();
+                                    </span><span class="jsdoc-var">syncValue</span><span class="jsdoc-syntax">();
+
+                                    </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.node</span><span class="jsdoc-syntax">);
+                                    </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+
+                                }
+                            },
+                            </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.menu
+                        </span><span class="jsdoc-syntax">},
+                       {
+                            </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Separator'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.menu
+                        </span><span class="jsdoc-syntax">},
+                        {
+                            </span><span class="jsdoc-var">xtype </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Item'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Table'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">listeners </span><span class="jsdoc-syntax">: {
+                                </span><span class="jsdoc-var">click </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">_self</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
+                                {
+                                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">t </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">();
+                                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">nn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">t.node.nextSibling </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">t.node.previousSibling</span><span class="jsdoc-syntax">;
+                                    </span><span class="jsdoc-var">t.node.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">t.node</span><span class="jsdoc-syntax">);
+                                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nn</span><span class="jsdoc-syntax">) {
+                                        </span><span class="jsdoc-var">toolbar.editorcore.selectNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">nn</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
+                                    }
+                                    </span><span class="jsdoc-var">toolbar.editorcore.onEditorEvent</span><span class="jsdoc-syntax">();
+
+                                }
+                            },
+                            </span><span class="jsdoc-var">xns </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">rooui.menu
+                        </span><span class="jsdoc-syntax">},
+                    ]
+                }
+            },
+
             </span><span class="jsdoc-comment">// align... &lt;&lt; fixme
 
         </span><span class="jsdoc-syntax">];
@@ -225,21 +344,27 @@
             </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'td'</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'true'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// this stops cell selection from picking the table.
             </span><span class="jsdoc-string">'data-block' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'Td'</span><span class="jsdoc-syntax">,
-            </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
+            </span><span class="jsdoc-var">valign </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.valign</span><span class="jsdoc-syntax">,
             </span><span class="jsdoc-var">style </span><span class="jsdoc-syntax">: {
-                </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-string">'text-align' </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.textAlign</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">border </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'solid 1px rgb(0, 0, 0)'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// ??? hard coded?
                 </span><span class="jsdoc-string">'border-collapse' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'collapse'</span><span class="jsdoc-syntax">,
-            },
+                </span><span class="jsdoc-var">padding </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'6px'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// 8 for desktop / 4 for mobile
+                </span><span class="jsdoc-string">'vertical-align'</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.valign
+            </span><span class="jsdoc-syntax">},
             </span><span class="jsdoc-var">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.html
         </span><span class="jsdoc-syntax">};
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">ret.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">ret.style.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.width</span><span class="jsdoc-syntax">;
+        }
+
 
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.colspan </span><span class="jsdoc-syntax">&gt; 1) {
-            </span><span class="jsdoc-var">ret.colspan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cell.colspan </span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">ret.colspan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.colspan </span><span class="jsdoc-syntax">;
         }
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ret.rowspan </span><span class="jsdoc-syntax">&gt; 1) {
-            </span><span class="jsdoc-var">this.rowspan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">cell.rowspan </span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.rowspan </span><span class="jsdoc-syntax">&gt; 1) {
+            </span><span class="jsdoc-var">ret.rowspan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.rowspan </span><span class="jsdoc-syntax">;
         }
 
 
@@ -252,7 +377,8 @@
     {
         </span><span class="jsdoc-var">node  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">node </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.node </span><span class="jsdoc-syntax">;
         </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.style.width</span><span class="jsdoc-syntax">;
-
+        </span><span class="jsdoc-var">this.colspan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(1,1*</span><span class="jsdoc-var">node.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'colspan'</span><span class="jsdoc-syntax">));
+        </span><span class="jsdoc-var">this.rowspan </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Math.max</span><span class="jsdoc-syntax">(1,1*</span><span class="jsdoc-var">node.getAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rowspan'</span><span class="jsdoc-syntax">));
         </span><span class="jsdoc-var">this.html </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">node.innerHTML</span><span class="jsdoc-syntax">;
 
 
@@ -273,7 +399,6 @@
     {
         </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.node.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'table'</span><span class="jsdoc-syntax">);
 
-
     },
 
     </span><span class="jsdoc-var">cellData </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
@@ -446,13 +571,19 @@
 
 
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">tab </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.node.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tr'</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'table'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ctr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tab.rows</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.parentNode</span><span class="jsdoc-syntax">;
         </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">tab.rows</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.forEach</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ri</span><span class="jsdoc-syntax">){
+
             </span><span class="jsdoc-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.cells</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.forEach</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ce</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">ci</span><span class="jsdoc-syntax">){
                 </span><span class="jsdoc-var">ce.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ce</span><span class="jsdoc-syntax">);
             });
+            </span><span class="jsdoc-var">r.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">);
         });
         </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= 0 ; </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">table.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">++) {
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tab.rows</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">];
+
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">re </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">tab.ownerDocument.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'tr'</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">ctr.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">re</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= 0 ; </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.length</span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">++) {
                 </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">][</span><span class="jsdoc-var">c</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.cell </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
                     </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
@@ -568,9 +699,52 @@
         </span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
         </span><span class="jsdoc-var">this.updateWidths</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">);
 
+    },
+    </span><span class="jsdoc-var">deleteRow </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-comment">// delete this rows 'tr'
+        // if any of the cells in this row have a rowspan &gt; 1 &amp;&amp; row!= this row..
+        // then reduce the rowspan.
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">table </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.toTableArray</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-comment">// this.cellData.row;
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">=0;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.cellData.row</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.length </span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">this.cellData.row</span><span class="jsdoc-syntax">][</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.row </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.cellData.row</span><span class="jsdoc-syntax">) {
+
+                </span><span class="jsdoc-var">c.rowspan</span><span class="jsdoc-syntax">--;
+                </span><span class="jsdoc-var">c.cell.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rowspan'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c.rowspan</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">continue</span><span class="jsdoc-syntax">;
+            }
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.rowspan </span><span class="jsdoc-syntax">&gt; 1) {
+                </span><span class="jsdoc-var">c.rowspan</span><span class="jsdoc-syntax">--;
+                </span><span class="jsdoc-var">c.cell.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'rowspan'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c.rowspan</span><span class="jsdoc-syntax">);
+            }
+        }
+        </span><span class="jsdoc-var">table.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cellData.row</span><span class="jsdoc-syntax">,1);
+        </span><span class="jsdoc-var">this.redrawAllCells</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">);
+
+    },
+    </span><span class="jsdoc-var">deleteColumn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">table </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.toTableArray</span><span class="jsdoc-syntax">();
+
+        </span><span class="jsdoc-keyword">for </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">i </span><span class="jsdoc-syntax">=0;</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">&lt; </span><span class="jsdoc-var">table.length </span><span class="jsdoc-syntax">; </span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">++) {
+            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">c </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">][</span><span class="jsdoc-var">this.cellData.col</span><span class="jsdoc-syntax">];
+            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.col </span><span class="jsdoc-syntax">!= </span><span class="jsdoc-var">this.cellData.col</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">][</span><span class="jsdoc-var">this.cellData.col</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.colspan</span><span class="jsdoc-syntax">--;
+            } </span><span class="jsdoc-keyword">else if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">c.colspan </span><span class="jsdoc-syntax">&gt; 1) {
+                </span><span class="jsdoc-var">c.colspan</span><span class="jsdoc-syntax">--;
+                </span><span class="jsdoc-var">c.cell.setAttribute</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'colspan'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">c.colspan</span><span class="jsdoc-syntax">);
+            }
+            </span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">i</span><span class="jsdoc-syntax">]</span><span class="jsdoc-var">.splice</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.cellData.col</span><span class="jsdoc-syntax">,1);
+        }
+
+        </span><span class="jsdoc-var">this.redrawAllCells</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">table</span><span class="jsdoc-syntax">);
     }
 
 
+
+
 })
 
 </span></code></body></html>
\ No newline at end of file

diff --git a/docs/src/Roo_htmleditor_KeyEnter.js.html b/docs/src/Roo_htmleditor_KeyEnter.js.html
index b117dd4..4add76a 100644 (file)
--- a/docs/src/Roo_htmleditor_KeyEnter.js.html
+++ b/docs/src/Roo_htmleditor_KeyEnter.js.html
@@ -10,6 +10,8 @@
 
 
 
+
+
 </span><span class="jsdoc-var">Roo.htmleditor.KeyEnter </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">) {
     </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cfg</span><span class="jsdoc-syntax">);
     </span><span class="jsdoc-comment">// this does not actually call walk as it's really just a abstract class
@@ -26,89 +28,58 @@
 
     </span><span class="jsdoc-var">keypress </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">)
     {
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.charCode </span><span class="jsdoc-syntax">!= 13) {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e.charCode </span><span class="jsdoc-syntax">!= 13 &amp;&amp; </span><span class="jsdoc-var">e.charCode </span><span class="jsdoc-syntax">!= 10) {
+            </span><span class="jsdoc-var">Roo.log</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">e.charCode</span><span class="jsdoc-syntax">,</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">]);
             </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
         }
         </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
         </span><span class="jsdoc-comment">// https://stackoverflow.com/questions/18552336/prevent-contenteditable-adding-div-on-enter-chrome
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">doc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.core.doc</span><span class="jsdoc-syntax">;
-
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">docFragment </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createDocumentFragment</span><span class="jsdoc-syntax">();
-
-        </span><span class="jsdoc-comment">//add a new line
+          </span><span class="jsdoc-comment">//add a new line
 
 
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.core.getSelection</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">sel.getRangeAt</span><span class="jsdoc-syntax">(0);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.commonAncestorContainer</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pc </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.closest</span><span class="jsdoc-syntax">([ </span><span class="jsdoc-string">'ol'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'ul'</span><span class="jsdoc-syntax">]);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">pli </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'li'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">pc </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">e.ctrlKey</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">sel.insertNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'br'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'after'</span><span class="jsdoc-syntax">);
 
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.core.win.getSelection</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.getRangeAt</span><span class="jsdoc-syntax">(0);
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">range.commonAncestorContainer </span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1) {
-            </span><span class="jsdoc-var">n  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.parentNode</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-var">this.core.undoManager.addEvent</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.core.fireEditorEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
         }
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">n.tagName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'UL'</span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'LI'</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-var">n.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">);
 
-        }
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">n.tagName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'LI'</span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'LI'</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n.nextSibling</span><span class="jsdoc-syntax">) {
-                </span><span class="jsdoc-var">n.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">n.firstSibling</span><span class="jsdoc-syntax">);
-
-            } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
-                </span><span class="jsdoc-var">n.parentNode.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">);
-            }
-        }
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createRange</span><span class="jsdoc-syntax">();
-            </span><span class="jsdoc-var">range.setStartAfter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-var">range.collapse</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
-
-            </span><span class="jsdoc-comment">//make the cursor there
-            </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.core.win.getSelection</span><span class="jsdoc-syntax">();
-            </span><span class="jsdoc-var">sel.removeAllRanges</span><span class="jsdoc-syntax">();
-            </span><span class="jsdoc-var">sel.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">// deal with &lt;li&gt; insetion
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pli.innerText.trim</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">&amp;&amp;
+            </span><span class="jsdoc-var">pli.previousSibling </span><span class="jsdoc-syntax">&amp;&amp;
+            </span><span class="jsdoc-var">pli.previousSibling.nodeName </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'LI' </span><span class="jsdoc-syntax">&amp;&amp;
+            </span><span class="jsdoc-var">pli.previousSibling.innerText.trim</span><span class="jsdoc-syntax">() ==  </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">pli.parentNode.removeChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pli.previousSibling</span><span class="jsdoc-syntax">);
+            </span><span class="jsdoc-var">sel.cursorAfter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pc</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-var">this.core.undoManager.addEvent</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.core.fireEditorEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
-
-
-        }
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">newEle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createTextNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'\n'</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">docFragment.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newEle</span><span class="jsdoc-syntax">);
-
-        </span><span class="jsdoc-comment">//add the br, or p, or something else
-        </span><span class="jsdoc-var">newEle </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'br'</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-comment">//newEle.setAttribute('data-id', Roo.htmleditor.KeyEnter.i++);
-        </span><span class="jsdoc-var">docFragment.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newEle</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">doc.createTextNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'\n'</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">docFragment.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newEle</span><span class="jsdoc-syntax">);
-
-        </span><span class="jsdoc-var">range.deleteContents</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-var">range.insertNode</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">docFragment</span><span class="jsdoc-syntax">);  </span><span class="jsdoc-comment">//&lt;&lt; inseting here...
-
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">newEle.nextSibling
-        </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">ns.nodeType </span><span class="jsdoc-syntax">== 3) {
-            </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">ns.nextSibling</span><span class="jsdoc-syntax">;
         }
 
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">) {
-            </span><span class="jsdoc-comment">//Roo.log('add extra');
-            </span><span class="jsdoc-var">ns </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'br'</span><span class="jsdoc-syntax">);
-            </span><span class="jsdoc-comment">//ns.setAttribute('data-id', 'x' +  Roo.htmleditor.KeyEnter.i++);
-            </span><span class="jsdoc-var">newEle.parentNode.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ns</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">li </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'LI'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-var">li.innerHTML </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'&amp;nbsp;'</span><span class="jsdoc-syntax">;
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">pli </span><span class="jsdoc-syntax">|| !</span><span class="jsdoc-var">pli.firstSibling</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-var">pc.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">);
+        } </span><span class="jsdoc-keyword">else </span><span class="jsdoc-syntax">{
+            </span><span class="jsdoc-var">pli.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pli.firstSibling</span><span class="jsdoc-syntax">);
         }
+        </span><span class="jsdoc-var">sel.cursorText </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">li.firstChild</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.core.undoManager.addEvent</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-var">this.core.fireEditorEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">e</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 
 
 
-        </span><span class="jsdoc-var">range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">doc.createRange</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-var">range.setStartAfter</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">newEle</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-var">range.collapse</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
 
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">sel </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.core.win.getSelection</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-var">sel.removeAllRanges</span><span class="jsdoc-syntax">();
-        </span><span class="jsdoc-var">sel.addRange</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">range</span><span class="jsdoc-syntax">);
-        </span><span class="jsdoc-comment">//this.core.undoManager.addEvent();
-        </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
 
     }
 };

diff --git a/docs/src/Roo_lib_Range.js.html b/docs/src/Roo_lib_Range.js.html
new file mode 100644 (file)
index 0000000..be372a0
--- /dev/null
+++ b/docs/src/Roo_lib_Range.js.html
@@ -0,0 +1,61 @@
+<html><head><title>Roo/lib/Range.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/**
+ * @class Roo.lib.Range
+ * @constructor
+ * This is a toolkit, normally used to copy features into a Dom Range element
+ * Roo.lib.Range.wrap(x);
+ *
+ *
+ *
+ */
+</span><span class="jsdoc-var">Roo.lib.Range </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">() { };
+
+</span><span class="jsdoc-comment">/**
+ * Wrap a Dom Range object, to give it new features...
+ * @static
+ * @param {Range} the range to wrap
+ */
+</span><span class="jsdoc-var">Roo.lib.Range.wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">) {
+    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.lib.Range.prototype</span><span class="jsdoc-syntax">);
+};
+</span><span class="jsdoc-comment">/**
+ * find a parent node eg. LI / OL
+ * @param {string|Array} node name or array of nodenames
+ * @return {DomElement|false}
+ */
+</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.lib.Range.prototype</span><span class="jsdoc-syntax">,
+{
+
+    </span><span class="jsdoc-var">closest </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">)
+    {
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">typeof</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">) != </span><span class="jsdoc-string">'string'</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-comment">// assume it's a array.
+            </span><span class="jsdoc-keyword">for</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">k of str</span><span class="jsdoc-syntax">) {
+                </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">k</span><span class="jsdoc-syntax">);
+                </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">r</span><span class="jsdoc-syntax">;
+                }
+
+            }
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-var">str </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">str.toLowerCase</span><span class="jsdoc-syntax">();
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.commonAncestorContainer</span><span class="jsdoc-syntax">; </span><span class="jsdoc-comment">// might not be a node
+        </span><span class="jsdoc-keyword">while </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n.nodeType </span><span class="jsdoc-syntax">!= 1) {
+            </span><span class="jsdoc-var">n </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">n.parentNode</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n.nodeName.toLowerCase</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-var">str </span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n</span><span class="jsdoc-syntax">;
+        }
+        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">n.nodeName.toLowerCase</span><span class="jsdoc-syntax">() == </span><span class="jsdoc-string">'body'</span><span class="jsdoc-syntax">) {
+            </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
+        }
+
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">n.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">str</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">;
+
+    },
+    </span><span class="jsdoc-var">cloneRange </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">()
+    {
+        </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.lib.Range.wrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Range.prototype.cloneRange.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">));
+    }
+});</span></code></body></html>
\ No newline at end of file

diff --git a/docs/src/Roo_menu_Item.js.html b/docs/src/Roo_menu_Item.js.html
index e461294..6e2d01e 100644 (file)
--- a/docs/src/Roo_menu_Item.js.html
+++ b/docs/src/Roo_menu_Item.js.html
@@ -35,7 +35,7 @@
      */
     </span><span class="jsdoc-var">text</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
      </span><span class="jsdoc-comment">/**
-     * @cfg {String} HTML to render in menu
+     * @cfg {String} html to render in menu
      * The text to show on the menu item (HTML version).
      */
     </span><span class="jsdoc-var">html</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,

diff --git a/docs/symbols/Roo.HtmlEditorCore.json b/docs/symbols/Roo.HtmlEditorCore.json
index 7898ee5..2adb9ec 100644 (file)
--- a/docs/symbols/Roo.HtmlEditorCore.json
+++ b/docs/symbols/Roo.HtmlEditorCore.json
@@ -32,7 +32,13 @@
     {
       "name" : "allowComments",
       "type" : "boolean",
-      "desc" : "- default false - allow comments in HTML source - by default they are stripped - if you are editing email you may need this.",
+      "desc" : "- default false - allow comments in HTML source\n         - by default they are stripped - if you are editing email you may need this.",
+      "memberOf" : ""
+    },
+    {
+      "name" : "autoClean",
+      "type" : "boolean",
+      "desc" : "- default true - loading and saving will remove quite a bit of formating,\n        if you are doing an email editor, this probably needs disabling, it's designed",
       "memberOf" : ""
     },
     {
@@ -53,6 +59,12 @@
       "desc" : "Whether the component can move the Dom node when rendering (defaults to true).",
       "memberOf" : "Roo.Component"
     },
+    {
+      "name" : "enableBlocks",
+      "type" : "boolean",
+      "desc" : "- default true - if the block editor (table and figure should be enabled)",
+      "memberOf" : ""
+    },
     {
       "name" : "actionMode",
       "type" : "String",

diff --git a/docs/symbols/Roo.form.HtmlEditor.json b/docs/symbols/Roo.form.HtmlEditor.json
index a5b243a..0eeec54 100644 (file)
--- a/docs/symbols/Roo.form.HtmlEditor.json
+++ b/docs/symbols/Roo.form.HtmlEditor.json
@@ -43,12 +43,6 @@
       "desc" : "True to disable the field (defaults to false).",
       "memberOf" : "Roo.form.Field"
     },
-    {
-      "name" : "name",
-      "type" : "String",
-      "desc" : "The field's HTML name attribute.",
-      "memberOf" : "Roo.form.Field"
-    },
     {
       "name" : "resizable",
       "type" : "String",
@@ -61,6 +55,12 @@
       "desc" : "Array of toolbars. - defaults to just the Standard one",
       "memberOf" : ""
     },
+    {
+      "name" : "name",
+      "type" : "String",
+      "desc" : "The field's HTML name attribute.",
+      "memberOf" : "Roo.form.Field"
+    },
     {
       "name" : "bodyCls-",
       "type" : "string",
@@ -127,6 +127,12 @@
       "desc" : "True to mark the field as readOnly in HTML (defaults to false) -- Note: this only sets the element's readOnly DOM attribute.",
       "memberOf" : "Roo.form.Field"
     },
+    {
+      "name" : "enableBlocks",
+      "type" : "boolean",
+      "desc" : "- default true - if the block editor (table and figure should be enabled)",
+      "memberOf" : ""
+    },
     {
       "name" : "cls",
       "type" : "String",
@@ -180,6 +186,12 @@
       "type" : "String",
       "desc" : "Mouse over tip",
       "memberOf" : "Roo.form.Field"
+    },
+    {
+      "name" : "autoClean",
+      "type" : "boolean",
+      "desc" : "- default true - loading and saving will remove quite a bit of formating,\n        if you are doing an email editor, this probably needs disabling, it's designed",
+      "memberOf" : ""
     }
   ],
   "methods" : [

diff --git a/docs/symbols/Roo.menu.CheckItem.json b/docs/symbols/Roo.menu.CheckItem.json
index 2061dd7..e65833e 100644 (file)
--- a/docs/symbols/Roo.menu.CheckItem.json
+++ b/docs/symbols/Roo.menu.CheckItem.json
@@ -111,7 +111,7 @@
       "memberOf" : ""
     },
     {
-      "name" : "HTML",
+      "name" : "html",
       "type" : "String",
       "desc" : "to render in menu\nThe text to show on the menu item (HTML version).",
       "memberOf" : "Roo.menu.Item"

diff --git a/docs/symbols/Roo.menu.Item.json b/docs/symbols/Roo.menu.Item.json
index da72ae3..69cf39b 100644 (file)
--- a/docs/symbols/Roo.menu.Item.json
+++ b/docs/symbols/Roo.menu.Item.json
@@ -102,15 +102,15 @@
       "memberOf" : "Roo.Component"
     },
     {
-      "name" : "itemCls",
+      "name" : "html",
       "type" : "String",
-      "desc" : "The default CSS class to use for menu items (defaults to \"x-menu-item\")",
+      "desc" : "to render in menu\nThe text to show on the menu item (HTML version).",
       "memberOf" : ""
     },
     {
-      "name" : "HTML",
+      "name" : "itemCls",
       "type" : "String",
-      "desc" : "to render in menu\nThe text to show on the menu item (HTML version).",
+      "desc" : "The default CSS class to use for menu items (defaults to \"x-menu-item\")",
       "memberOf" : ""
     },
     {

diff --git a/examples/form/htmledit.js b/examples/form/htmledit.js
index 2fc1058..31c1bc7 100644 (file)
--- a/examples/form/htmledit.js
+++ b/examples/form/htmledit.js
@@ -51,22 +51,48 @@ Roo.onReady(function(){
                                 xns : Roo,
                                
                             },
-                             {
+                            {
+                                xtype : 'Button',
+                                text : "Add Image (BIG)",
+                                cls : 'x-init-enable',
+                                listeners : {
+                                    click : function (_self, e)
+                                    {
+                                        
+                                        var rr = new Roo.htmleditor.BlockFigure({
+                                            image_src: 'https://picsum.photos/1000/500',
+    
+                                            align: 'left',
+                                            caption : 'test',
+                                            text_align: 'left',
+                                            
+                                            width : '100%',
+                                            margin: '2%',
+                                        });
+                                        editor.editorcore.insertAtCursor(rr.toHTML());
+                                    
+                                 
+                                    }
+                                },
+                                xns : Roo,
+                               
+                            },
+                            {
                                 xtype : 'Button',
-                                text : "Add Image",
+                                text : "Add Image (SMALL)",
                                 cls : 'x-init-enable',
                                 listeners : {
                                     click : function (_self, e)
                                     {
                                         
                                         var rr = new Roo.htmleditor.BlockFigure({
-                                            image_src: 'https://www.roojs.org/Roojscom/templates/images/roojsorg_logo-100.png',
+                                            image_src: 'https://picsum.photos/400/300',
     
                                             align: 'left',
                                             caption : 'test',
                                             text_align: 'left',
                                             
-                                            width : '46%',
+                                            width : '100%',
                                             margin: '2%',
                                         });
                                         editor.editorcore.insertAtCursor(rr.toHTML());

diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index 483f559..5dfd60b 100644 (file)
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -21799,6 +21799,42 @@ Roo.extend(Roo.htmleditor.FilterLongBr, Roo.htmleditor.Filter,
 
     }
     
+}); 
+
+/**
+ * @class Roo.htmleditor.FilterBlock
+ * removes id / data-block and contenteditable that are associated with blocks
+ * usage should be done on a cloned copy of the dom
+ * @constructor
+* Run a new Attribute Filter { node : xxxx }}
+* @param {Object} config Configuration options
+ */
+Roo.htmleditor.FilterBlock = function(cfg)
+{
+    Roo.apply(this, cfg);
+    var qa = cfg.node.querySelectorAll;
+    this.removeAttributes('data-block');
+    this.removeAttributes('contenteditable');
+    this.removeAttributes('id');
+    
+}
+
+Roo.apply(Roo.htmleditor.FilterBlock.prototype,
+{
+    node: true, // all tags
+     
+     
+    removeAttributes : function(attr)
+    {
+        var ar = this.node.querySelectorAll('*[' + attr + ']');
+        for (var i =0;i<ar.length;i++) {
+            ar[i].removeAttribute(attr);
+        }
+    }
+        
+        
+        
+    
 });
 /**
  * @class Roo.htmleditor.Tidy
@@ -21962,6 +21998,8 @@ Roo.htmleditor.KeyEnter = function(cfg) {
     Roo.get(this.core.doc.body).on('keypress', this.keypress, this);
 }
 
+//Roo.htmleditor.KeyEnter.i = 0;
+
 
 Roo.htmleditor.KeyEnter.prototype = {
     
@@ -21979,8 +22017,7 @@ Roo.htmleditor.KeyEnter.prototype = {
         var docFragment = doc.createDocumentFragment();
     
         //add a new line
-        var newEle = doc.createTextNode('\n');
-        docFragment.appendChild(newEle);
+       
     
     
         var range = this.core.win.getSelection().getRangeAt(0);
@@ -22012,26 +22049,46 @@ Roo.htmleditor.KeyEnter.prototype = {
             var sel = this.core.win.getSelection();
             sel.removeAllRanges();
             sel.addRange(range);
+            this.core.undoManager.addEvent();
             return false;
             
             
         }
+        var newEle = doc.createTextNode('\n');
+        docFragment.appendChild(newEle);
+        
         //add the br, or p, or something else
         newEle = doc.createElement('br');
+        //newEle.setAttribute('data-id', Roo.htmleditor.KeyEnter.i++);
+        docFragment.appendChild(newEle);
+        doc.createTextNode('\n');
         docFragment.appendChild(newEle);
-    
-        //make the br replace selection
         
         range.deleteContents();
+        range.insertNode(docFragment);  //<< inseting here...
+         
+        var ns = newEle.nextSibling;
+        while (ns && ns.nodeType == 3) { 
+            ns = ns.nextSibling;
+        }
+        
+        if (!ns) {
+            //Roo.log('add extra');
+            ns = doc.createElement('br');
+            //ns.setAttribute('data-id', 'x' +  Roo.htmleditor.KeyEnter.i++);
+            newEle.parentNode.appendChild(ns);
+        }
+        
         
-        range.insertNode(docFragment);
-        range = range.cloneRange();
+        
+        range = doc.createRange();
+        range.setStartAfter(newEle);
         range.collapse(true);
+        
         var sel = this.core.win.getSelection();
         sel.removeAllRanges();
         sel.addRange(range);
-        sel.collapseToEnd();
-    
+        //this.core.undoManager.addEvent();
         return false;
          
     }
@@ -22053,24 +22110,51 @@ Roo.htmleditor.Block  = function(cfg)
 {
     // do nothing .. should not be called really.
 }
-
+/**
+ * factory method to get the block from an element (using cache if necessary)
+ * @static
+ * @param {HtmlElement} the dom element
+ */
 Roo.htmleditor.Block.factory = function(node)
 {
-    
+    var cc = Roo.htmleditor.Block.cache;
     var id = Roo.get(node).id;
-    if (typeof(Roo.htmleditor.Block.cache[id]) != 'undefined') {
+    if (typeof(cc[id]) != 'undefined' && (!cc[id].node || cc[id].node.closest('body'))) {
         Roo.htmleditor.Block.cache[id].readElement();
         return Roo.htmleditor.Block.cache[id];
     }
-    
-    var cls = Roo.htmleditor['Block' + node.getAttribute('data-block')];
+    var db  = node.getAttribute('data-block');
+    if (!db) {
+        db = node.nodeName.toLowerCase().toUpperCaseFirst();
+    }
+    var cls = Roo.htmleditor['Block' + db];
     if (typeof(cls) == 'undefined') {
-        Roo.log("OOps missing block : " + 'Block' + node.getAttribute('data-block'));
+        //Roo.log(node.getAttribute('data-block'));
+        Roo.log("OOps missing block : " + 'Block' + db);
         return false;
     }
     Roo.htmleditor.Block.cache[id] = new cls({ node: node });
     return Roo.htmleditor.Block.cache[id];  /// should trigger update element
 };
+
+/**
+ * initalize all Elements from content that are 'blockable'
+ * @static
+ * @param the body element
+ */
+Roo.htmleditor.Block.initAll = function(body, type)
+{
+    if (typeof(type) == 'undefined') {
+        var ia = Roo.htmleditor.Block.initAll;
+        ia(body,'table');
+        ia(body,'td');
+        ia(body,'figure');
+        return;
+    }
+    Roo.each(Roo.get(body).query(type), function(e) {
+        Roo.htmleditor.Block.factory(e);    
+    },this);
+};
 // question goes here... do we need to clear out this cache sometimes?
 // or show we make it relivant to the htmleditor.
 Roo.htmleditor.Block.cache = {};
@@ -22080,7 +22164,10 @@ Roo.htmleditor.Block.prototype = {
     node : false,
     
      // used by context menu
-    friendly_name : 'Image with caption',
+    friendly_name : 'Based Block',
+    
+    // text for button to delete this element
+    deleteTitle : false,
     
     context : false,
     /**
@@ -22109,170 +22196,1225 @@ Roo.htmleditor.Block.prototype = {
      */
     getVal : function(node, tag, attr, style)
     {
-        var n = node;
-        if (tag !== true && n.tagName != tag.toUpperCase()) {
-            // in theory we could do figure[3] << 3rd figure? or some more complex search..?
-            // but kiss for now.
-            n = node.getElementsByTagName(tag).item(0);
+        var n = node;
+        if (tag !== true && n.tagName != tag.toUpperCase()) {
+            // in theory we could do figure[3] << 3rd figure? or some more complex search..?
+            // but kiss for now.
+            n = node.getElementsByTagName(tag).item(0);
+        }
+        if (attr == 'html') {
+            return n.innerHTML;
+        }
+        if (attr == 'style') {
+            return n.style[style]
+        }
+        
+        return Roo.get(n).attr(attr);
+            
+    },
+    /**
+     * create a DomHelper friendly object - for use with 
+     * Roo.DomHelper.markup / overwrite / etc..
+     * (override this)
+     */
+    toObject : function()
+    {
+        return {};
+    },
+      /**
+     * Read a node that has a 'data-block' property - and extract the values from it.
+     * @param {DomElement} node - the node
+     */
+    readElement : function(node)
+    {
+        
+    } 
+    
+    
+};
+
+ 
+
+/**
+ * @class Roo.htmleditor.BlockFigure
+ * Block that has an image and a figcaption
+ * @cfg {String} image_src the url for the image
+ * @cfg {String} align (left|right) alignment for the block default left
+ * @cfg {String} text_align (left|right) alignment for the text caption default left.
+ * @cfg {String} caption the text to appear below  (and in the alt tag)
+ * @cfg {String|number} image_width the width of the image number or %?
+ * @cfg {String|number} image_height the height of the image number or %?
+ * 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockFigure = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+}
+Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
+ 
+    
+    // setable values.
+    image_src: '',
+    
+    align: 'left',
+    caption : '',
+    text_align: 'left',
+    
+    width : '46%',
+    margin: '2%',
+    
+    // used by context menu
+    friendly_name : 'Image with caption',
+    deleteTitle : "Delete Image and Caption",
+    
+    context : { // ?? static really
+        width : {
+            title: "Width",
+            width: 40
+            // ?? number
+        },
+        margin : {
+            title: "Margin",
+            width: 40
+            // ?? number
+        },
+        align: {
+            title: "Align",
+            opts : [[ "left"],[ "right"]],
+            width : 80
+            
+        },
+        text_align: {
+            title: "Caption Align",
+            opts : [ [ "left"],[ "right"],[ "center"]],
+            width : 80
+        },
+        
+       
+        image_src : {
+            title: "Src",
+            width: 220
+        }
+    },
+    /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     */
+    toObject : function()
+    {
+        var d = document.createElement('div');
+        d.innerHTML = this.caption;
+        
+        return {
+            tag: 'figure',
+            'data-block' : 'Figure',
+            contenteditable : 'false',
+            style : {
+                display: 'table',
+                float :  this.align ,
+                width :  this.width,
+                margin:  this.margin
+            },
+            cn : [
+                {
+                    tag : 'img',
+                    src : this.image_src,
+                    alt : d.innerText.replace(/\n/g, " "), // removeHTML..
+                    style: {
+                        width: '100%'
+                    }
+                },
+                {
+                    tag: 'figcaption',
+                    contenteditable : true,
+                    style : {
+                        'text-align': this.text_align
+                    },
+                    html : this.caption
+                    
+                }
+            ]
+        };
+    },
+    
+    readElement : function(node)
+    {
+        this.image_src = this.getVal(node, 'img', 'src');
+        this.align = this.getVal(node, 'figure', 'style', 'float');
+        this.caption = this.getVal(node, 'figcaption', 'html');
+        this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
+        this.width = this.getVal(node, 'figure', 'style', 'width');
+        this.margin = this.getVal(node, 'figure', 'style', 'margin');
+        
+    } 
+    
+  
+   
+     
+    
+    
+    
+    
+})
+
+ 
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ * 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTable = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+    if (!cfg.node) {
+        this.rows = [];
+        for(var r = 0; r < this.no_row; r++) {
+            this.rows[r] = [];
+            for(var c = 0; c < this.no_col; c++) {
+                this.rows[r][c] = this.emptyCell();
+            }
+        }
+    }
+    
+    
+}
+Roo.extend(Roo.htmleditor.BlockTable, Roo.htmleditor.Block, {
+ 
+    rows : false,
+    no_col : 1,
+    no_row : 1,
+    
+    
+    width: '100%',
+    
+    // used by context menu
+    friendly_name : 'Table',
+    deleteTitle : 'Delete Table',
+    // context menu is drawn once..
+    
+    contextMenu : function(toolbar)
+    {
+        
+        var block = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+        };
+        
+        
+        var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+        
+        var syncValue = toolbar.editorcore.syncValue;
+        
+        var fields = {};
+        
+        return [
+            {
+                xtype : 'ComboBox',
+                allowBlank : false,
+                displayField : 'val',
+                editable : true,
+                listWidth : 100,
+                triggerAction : 'all',
+                typeAhead : true,
+                valueField : 'val',
+                width : 100,
+                name : 'width',
+                listeners : {
+                    select : function (combo, r, index)
+                    {
+                        var b = block();
+                        b.width = r.get('val');
+                        b.updateElement();
+                        syncValue();
+                        
+                    }
+                },
+                xns : rooui.form,
+                store : {
+                    xtype : 'SimpleStore',
+                    data : [
+                        ['100%'],
+                        ['auto']
+                    ],
+                    fields : [ 'val'],
+                    xns : Roo.data
+                }
+            },
+            // -------- Cols
+            
+            {
+                xtype : 'TextItem',
+                text : "Columns: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+         
+            {
+                xtype : 'Button',
+                text: '-',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        block().removeColumn();
+                        syncValue();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: '+',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        block().addColumn();
+                        syncValue();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            // -------- ROWS
+            {
+                xtype : 'TextItem',
+                text : "Rows: ",
+                xns : rooui.Toolbar  //Boostrap?
+            },
+         
+            {
+                xtype : 'Button',
+                text: '-',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        block().removeRow();
+                        syncValue();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: '+',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        block().addRow();
+                        syncValue();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            // -------- ROWS
+            {
+                xtype : 'Button',
+                text: 'Reset Column Widths',
+                listeners : {
+                    
+                    click : function (_self, e)
+                    {
+                        block().resetWidths();
+                        syncValue();
+                    }
+                },
+                xns : rooui.Toolbar
+            } 
+            
+            
+            
+        ];
+        
+    },
+    
+    
+  /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     * ?? should it be called with option to hide all editing features?
+     */
+    toObject : function()
+    {
+        
+        var ret = {
+            tag : 'table',
+            contenteditable : 'false', // this stops cell selection from picking the table.
+            'data-block' : 'Table',
+            style : {
+                width:  this.width,
+                border : 'solid 1px #000', // ??? hard coded?
+                'border-collapse' : 'collapse' 
+            },
+            cn : [
+                { tag : 'tbody' , cn : [] }
+            ]
+        };
+        
+        // do we have a head = not really 
+        var ncols = 0;
+        Roo.each(this.rows, function( row ) {
+            var tr = {
+                tag: 'tr',
+                style : {
+                    margin: '6px',
+                    border : 'solid 1px #000',
+                    textAlign : 'left' 
+                },
+                cn : [ ]
+            };
+            
+            ret.cn[0].cn.push(tr);
+            // does the row have any properties? ?? height?
+            var nc = 0;
+            Roo.each(row, function( cell ) {
+                
+                var td = {
+                    tag : 'td',
+                    contenteditable :  'true',
+                    'data-block' : 'Td',
+                    html : cell.html,
+                    style : cell.style
+                };
+                if (cell.colspan > 1) {
+                    td.colspan = cell.colspan ;
+                    nc += cell.colspan;
+                } else {
+                    nc++;
+                }
+                if (cell.rowspan > 1) {
+                    td.rowspan = cell.rowspan ;
+                }
+                
+                
+                // widths ?
+                tr.cn.push(td);
+                    
+                
+            }, this);
+            ncols = Math.max(nc, ncols);
+            
+            
+        }, this);
+        // add the header row..
+        
+        ncols++;
+         
+        
+        return ret;
+         
+    },
+    
+    readElement : function(node)
+    {
+        node  = node ? node : this.node ;
+        this.width = this.getVal(node, true, 'style', 'width') || '100%';
+        
+        this.rows = [];
+        this.no_row = 0;
+        var trs = Array.from(node.getElementsByTagName('tr'));
+        trs.forEach(function(tr) {
+            var row =  [];
+            this.rows.push(row);
+            if (Roo.get(tr).hasClass('roo-html-editor-el')) { // ??? this is for our 'row' selection'
+                return;
+            }
+            this.no_row++;
+            var no_column = 0;
+            Array.from(tr.getElementsByTagName('td')).forEach(function(td) {
+                if (Roo.get(td).hasClass('roo-html-editor-el')) { // ??? this is for our 'row' selection'
+                    return;
+                }
+                var add = {
+                    colspan : td.hasAttribute('colspan') ? td.getAttribute('colspan') : 1,
+                    rowspan : td.hasAttribute('rowspan') ? td.getAttribute('rowspan') : 1,
+                    style : td.hasAttribute('style') ? td.getAttribute('style') : '',
+                    html : td.innerHTML
+                };
+                no_column += add.colspan;
+                     
+                
+                row.push(add);
+                
+                
+            },this);
+            this.no_col = Math.max(this.no_col, no_column);
+            
+            
+        },this);
+        
+        
+    },
+    normalizeRows: function()
+    {
+        var ret= [];
+        var rid = -1;
+        this.rows.forEach(function(row) {
+            rid++;
+            ret[rid] = [];
+            row = this.normalizeRow(row);
+            var cid = 0;
+            row.forEach(function(c) {
+                while (typeof(ret[rid][cid]) != 'undefined') {
+                    cid++;
+                }
+                if (typeof(ret[rid]) == 'undefined') {
+                    ret[rid] = [];
+                }
+                ret[rid][cid] = c;
+                c.row = rid;
+                c.col = cid;
+                if (c.rowspan < 2) {
+                    return;
+                }
+                
+                for(var i = 1 ;i < c.rowspan; i++) {
+                    if (typeof(ret[rid+i]) == 'undefined') {
+                        ret[rid+i] = [];
+                    }
+                    ret[rid+i][cid] = c;
+                }
+            });
+        }, this);
+        return ret;
+    
+    },
+    
+    normalizeRow: function(row)
+    {
+        var ret= [];
+        row.forEach(function(c) {
+            if (c.colspan < 2) {
+                ret.push(c);
+                return;
+            }
+            for(var i =0 ;i < c.colspan; i++) {
+                ret.push(c);
+            }
+        });
+        return ret;
+    
+    },
+    
+    deleteColumn : function(sel)
+    {
+        if (!sel || sel.type != 'col') {
+            return;
+        }
+        if (this.no_col < 2) {
+            return;
+        }
+        
+        this.rows.forEach(function(row) {
+            var cols = this.normalizeRow(row);
+            var col = cols[sel.col];
+            if (col.colspan > 1) {
+                col.colspan --;
+            } else {
+                row.remove(col);
+            }
+            
+        }, this);
+        this.no_col--;
+        
+    },
+    removeColumn : function()
+    {
+        this.deleteColumn({
+            type: 'col',
+            col : this.no_col-1
+        });
+        this.updateElement();
+    },
+    
+     
+    addColumn : function()
+    {
+        
+        this.rows.forEach(function(row) {
+            row.push(this.emptyCell());
+           
+        }, this);
+        this.updateElement();
+    },
+    
+    deleteRow : function(sel)
+    {
+        if (!sel || sel.type != 'row') {
+            return;
+        }
+        
+        if (this.no_row < 2) {
+            return;
+        }
+        
+        var rows = this.normalizeRows();
+        
+        
+        rows[sel.row].forEach(function(col) {
+            if (col.rowspan > 1) {
+                col.rowspan--;
+            } else {
+                col.remove = 1; // flage it as removed.
+            }
+            
+        }, this);
+        var newrows = [];
+        this.rows.forEach(function(row) {
+            newrow = [];
+            row.forEach(function(c) {
+                if (typeof(c.remove) == 'undefined') {
+                    newrow.push(c);
+                }
+                
+            });
+            if (newrow.length > 0) {
+                newrows.push(row);
+            }
+        });
+        this.rows =  newrows;
+        
+        
+        
+        this.no_row--;
+        this.updateElement();
+        
+    },
+    removeRow : function()
+    {
+        this.deleteRow({
+            type: 'row',
+            row : this.no_row-1
+        });
+        
+    },
+    
+     
+    addRow : function()
+    {
+        
+        row = [];
+        for (var i = 0; i < this.no_col; i++ ) {
+            
+            row.push(this.emptyCell());
+           
+        }
+        this.rows.push(row);
+        this.updateElement();
+        
+    },
+     
+    // the default cell object... at present...
+    emptyCell : function() {
+        return (new Roo.htmleditor.BlockTd({})).toObject();
+        
+     
+    },
+    
+    removeNode : function()
+    {
+        return this.node;
+    },
+    
+    
+    
+    resetWidths : function()
+    {
+        Array.from(this.node.getElementsByTagName('td')).forEach(function(n) {
+            var nn = Roo.htmleditor.Block.factory(n);
+            nn.width = '';
+            nn.updateElement(n);
+        });
+    }
+    
+    
+    
+    
+})
+
+/**
+ *
+ * editing a TD?
+ *
+ * since selections really work on the table cell, then editing really should work from there
+ *
+ * The original plan was to support merging etc... - but that may not be needed yet..
+ *
+ * So this simple version will support:
+ *   add/remove cols
+ *   adjust the width +/-
+ *   reset the width...
+ *   
+ *
+ */
+
+
+ 
+
+/**
+ * @class Roo.htmleditor.BlockTable
+ * Block that manages a table
+ * 
+ * @constructor
+ * Create a new Filter.
+ * @param {Object} config Configuration options
+ */
+
+Roo.htmleditor.BlockTd = function(cfg)
+{
+    if (cfg.node) {
+        this.readElement(cfg.node);
+        this.updateElement(cfg.node);
+    }
+    Roo.apply(this, cfg);
+     
+    
+    
+}
+Roo.extend(Roo.htmleditor.BlockTd, Roo.htmleditor.Block, {
+ 
+    node : false,
+    
+    width: '',
+    textAlign : 'left',
+    
+    colspan : 1,
+    rowspan : 1,
+    
+    
+    // used by context menu
+    friendly_name : 'Table Cell',
+    deleteTitle : 'Delete Table',
+    
+    // context menu is drawn once..
+    
+    contextMenu : function(toolbar)
+    {
+        
+        var cell = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode);
+        };
+        
+        var table = function() {
+            return Roo.htmleditor.Block.factory(toolbar.tb.selectedNode.closest('table'));
+        };
+        
+        var lr = false;
+        var saveSel = function()
+        {
+            lr = toolbar.editorcore.getSelection().getRangeAt(0);
+        }
+        var restoreSel = function()
+        {
+            if (lr) {
+                (function() {
+                    toolbar.editorcore.focus();
+                    var cr = toolbar.editorcore.getSelection();
+                    cr.removeAllRanges();
+                    cr.addRange(lr);
+                    toolbar.editorcore.onEditorEvent();
+                }).defer(10, this);
+                
+                
+            }
+        }
+        
+        var rooui =  typeof(Roo.bootstrap) == 'undefined' ? Roo : Roo.bootstrap;
+        
+        var syncValue = toolbar.editorcore.syncValue;
+        
+        var fields = {};
+        
+        return [
+            {
+                xtype : 'Button',
+                text : 'Edit Table',
+                listeners : {
+                    click : function() {
+                        var t = toolbar.tb.selectedNode.closest('table');
+                        toolbar.editorcore.selectNode(t);
+                        toolbar.editorcore.onEditorEvent();                        
+                    }
+                }
+                
+            },
+              
+           
+             
+            {
+                xtype : 'TextItem',
+                text : "Column Width: ",
+                 xns : rooui.Toolbar 
+               
+            },
+            {
+                xtype : 'Button',
+                text: '-',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        saveSel();
+                        cell().shrinkColumn();
+                        syncValue();
+                        restoreSel();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'Button',
+                text: '+',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        saveSel();
+                        cell().growColumn();
+                        syncValue();
+                        restoreSel();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'TextItem',
+                text : "Merge Cells: ",
+                 xns : rooui.Toolbar 
+               
+            },
+            
+            
+            {
+                xtype : 'Button',
+                text: 'Right',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        saveSel();
+                        cell().mergeRight();
+                        //block().growColumn();
+                        syncValue();
+                        restoreSel();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+             
+            {
+                xtype : 'Button',
+                text: 'Below',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        saveSel();
+                        cell().mergeBelow();
+                        //block().growColumn();
+                        syncValue();
+                        restoreSel();
+                    }
+                },
+                xns : rooui.Toolbar
+            },
+            {
+                xtype : 'TextItem',
+                text : "| ",
+                 xns : rooui.Toolbar 
+               
+            },
+            
+            {
+                xtype : 'Button',
+                text: 'Split',
+                listeners : {
+                    click : function (_self, e)
+                    {
+                        saveSel();
+                        cell().split();
+                        syncValue();
+                        restoreSel();
+                    }
+                },
+                xns : rooui.Toolbar
+            }
+            // align... << fixme
+            
+        ];
+        
+    },
+    
+    
+  /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     * ?? should it be called with option to hide all editing features?
+     */
+ /**
+     * create a DomHelper friendly object - for use with
+     * Roo.DomHelper.markup / overwrite / etc..
+     * ?? should it be called with option to hide all editing features?
+     */
+    toObject : function()
+    {
+        
+        var ret = {
+            tag : 'td',
+            contenteditable : 'true', // this stops cell selection from picking the table.
+            'data-block' : 'Td',
+            width:  this.width,
+            style : {  
+                width:  this.width,
+                'text-align' :  this.textAlign,
+                border : 'solid 1px rgb(0, 0, 0)', // ??? hard coded?
+                'border-collapse' : 'collapse' 
+            },
+            html : this.html
+        };
+        
+        if (this.colspan > 1) {
+            ret.colspan = cell.colspan ;
+        } 
+        if (ret.rowspan > 1) {
+            this.rowspan = cell.rowspan ;
+        }
+        
+           
+        
+        return ret;
+         
+    },
+    
+    readElement : function(node)
+    {
+        node  = node ? node : this.node ;
+        this.width = node.style.width;
+        
+        this.html = node.innerHTML;
+        
+        
+    },
+     
+    // the default cell object... at present...
+    emptyCell : function() {
+        return {
+            colspan :  1,
+            rowspan :  1,
+            textAlign : 'left',
+            html : "&nbsp;" // is this going to be editable now?
+        };
+     
+    },
+    
+    removeNode : function()
+    {
+        return this.node.closest('table');
+        
+        
+    },
+    
+    cellData : false,
+    
+    colWidths : false,
+    
+    toTableArray  : function()
+    {
+        var ret = [];
+        var tab = this.node.closest('tr').closest('table');
+        Array.from(tab.rows).forEach(function(r, ri){
+            ret[ri] = [];
+        });
+        var rn = 0;
+        this.colWidths = [];
+        var all_auto = true;
+        Array.from(tab.rows).forEach(function(r, ri){
+            
+            var cn = 0;
+            Array.from(r.cells).forEach(function(ce, ci){
+                var c =  {
+                    cell : ce,
+                    row : rn,
+                    col: cn,
+                    colspan : ce.colSpan,
+                    rowspan : ce.rowSpan
+                };
+                if (ce.isEqualNode(this.node)) {
+                    this.cellData = c;
+                }
+                // if we have been filled up by a row?
+                if (typeof(ret[rn][cn]) != 'undefined') {
+                    while(typeof(ret[rn][cn]) != 'undefined') {
+                        cn++;
+                    }
+                    c.col = cn;
+                }
+                
+                if (typeof(this.colWidths[cn]) == 'undefined') {
+                    this.colWidths[cn] =   ce.style.width;
+                    if (this.colWidths[cn] != '') {
+                        all_auto = false;
+                    }
+                }
+                
+                
+                if (c.colspan < 2 && c.rowspan < 2 ) {
+                    ret[rn][cn] = c;
+                    cn++;
+                    return;
+                }
+                for(var j = 0; j < c.rowspan; j++) {
+                    if (typeof(ret[rn+j]) == 'undefined') {
+                        continue; // we have a problem..
+                    }
+                    ret[rn+j][cn] = c;
+                    for(var i = 0; i < c.colspan; i++) {
+                        ret[rn+j][cn+i] = c;
+                    }
+                }
+                
+                cn += c.colspan;
+            }, this);
+            rn++;
+        }, this);
+        
+        // initalize widths.?
+        // either all widths or no widths..
+        if (all_auto) {
+            this.colWidths[0] = false; // no widths flag.
+        }
+        
+        
+        return ret;
+        
+    },
+    
+    
+    
+    
+    mergeRight: function()
+    {
+         
+        // get the contents of the next cell along..
+        var tr = this.node.closest('tr');
+        var i = Array.prototype.indexOf.call(tr.childNodes, this.node);
+        if (i >= tr.childNodes.length - 1) {
+            return; // no cells on right to merge with.
         }
-        if (attr == 'html') {
-            return n.innerHTML;
+        var table = this.toTableArray();
+        
+        if (typeof(table[this.cellData.row][this.cellData.col+this.cellData.colspan]) == 'undefined') {
+            return; // nothing right?
         }
-        if (attr == 'style') {
-            return n.style[style]
+        var rc = table[this.cellData.row][this.cellData.col+this.cellData.colspan];
+        // right cell - must be same rowspan and on the same row.
+        if (rc.rowspan != this.cellData.rowspan || rc.row != this.cellData.row) {
+            return; // right hand side is not same rowspan.
         }
         
-        return Roo.get(n).attr(attr);
-            
+        
+        
+        this.node.innerHTML += ' ' + rc.cell.innerHTML;
+        tr.removeChild(rc.cell);
+        this.colspan += rc.colspan;
+        this.node.setAttribute('colspan', this.colspan);
+
     },
-    /**
-     * create a DomHelper friendly object - for use with 
-     * Roo.DomHelper.markup / overwrite / etc..
-     * (override this)
-     */
-    toObject : function()
+    
+    
+    mergeBelow : function()
     {
-        return {};
+        var table = this.toTableArray();
+        if (typeof(table[this.cellData.row+this.cellData.rowspan]) == 'undefined') {
+            return; // no row below
+        }
+        if (typeof(table[this.cellData.row+this.cellData.rowspan][this.cellData.col]) == 'undefined') {
+            return; // nothing right?
+        }
+        var rc = table[this.cellData.row+this.cellData.rowspan][this.cellData.col];
+        
+        if (rc.colspan != this.cellData.colspan || rc.col != this.cellData.col) {
+            return; // right hand side is not same rowspan.
+        }
+        this.node.innerHTML =  this.node.innerHTML + rc.cell.innerHTML ;
+        rc.cell.parentNode.removeChild(rc.cell);
+        this.rowspan += rc.rowspan;
+        this.node.setAttribute('rowspan', this.rowspan);
     },
-      /**
-     * Read a node that has a 'data-block' property - and extract the values from it.
-     * @param {DomElement} node - the node
-     */
-    readElement : function(node)
+    
+    split: function()
     {
+        if (this.node.rowSpan < 2 && this.node.colSpan < 2) {
+            return;
+        }
+        var table = this.toTableArray();
+        var cd = this.cellData;
+        this.rowspan = 1;
+        this.colspan = 1;
         
-    } 
-    
-    
-};
-
- 
-
-/**
- * @class Roo.htmleditor.BlockFigure
- * Block that has an image and a figcaption
- * @cfg {String} image_src the url for the image
- * @cfg {String} align (left|right) alignment for the block default left
- * @cfg {String} text_align (left|right) alignment for the text caption default left.
- * @cfg {String} caption the text to appear below  (and in the alt tag)
- * @cfg {String|number} image_width the width of the image number or %?
- * @cfg {String|number} image_height the height of the image number or %?
- * 
- * @constructor
- * Create a new Filter.
- * @param {Object} config Configuration options
- */
-
-Roo.htmleditor.BlockFigure = function(cfg)
-{
-    if (cfg.node) {
-        this.readElement(cfg.node);
-        this.updateElement(cfg.node);
-    }
-    Roo.apply(this, cfg);
-}
-Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
- 
-    
-    // setable values.
-    image_src: '',
-    
-    align: 'left',
-    caption : '',
-    text_align: 'left',
+        for(var r = cd.row; r < cd.row + cd.rowspan; r++) {
+            
+            
+            
+            for(var c = cd.col; c < cd.col + cd.colspan; c++) {
+                if (r == cd.row && c == cd.col) {
+                    this.node.removeAttribute('rowspan');
+                    this.node.removeAttribute('colspan');
+                    continue;
+                }
+                 
+                var ntd = this.node.cloneNode(); // which col/row should be 0..
+                ntd.removeAttribute('id'); //
+                //ntd.style.width  = '';
+                ntd.innerHTML = '';
+                table[r][c] = { cell : ntd, col : c, row: r , colspan : 1 , rowspan : 1   };
+            }
+            
+        }
+        this.redrawAllCells(table);
+        
+         
+        
+    },
     
-    width : '46%',
-    margin: '2%',
     
-    // used by context menu
-    friendly_name : 'Image with caption',
     
-    context : { // ?? static really
-        width : {
-            title: "Width",
-            width: 40
-            // ?? number
-        },
-        margin : {
-            title: "Margin",
-            width: 40
-            // ?? number
-        },
-        align: {
-            title: "Align",
-            opts : [[ "left"],[ "right"]],
-            width : 80
-            
-        },
-        text_align: {
-            title: "Caption Align",
-            opts : [ [ "left"],[ "right"],[ "center"]],
-            width : 80
-        },
+    redrawAllCells: function(table)
+    {
         
-       
-        image_src : {
-            title: "Src",
-            width: 220
+         
+        var tab = this.node.closest('tr').closest('table');
+        Array.from(tab.rows).forEach(function(r, ri){
+            Array.from(r.cells).forEach(function(ce, ci){
+                ce.parentNode.removeChild(ce);
+            });
+        });
+        for(var r = 0 ; r < table.length; r++) {
+            var re = tab.rows[r];
+            for(var c = 0 ; c < table[r].length; c++) {
+                if (table[r][c].cell === false) {
+                    continue;
+                }
+                
+                re.appendChild(table[r][c].cell);
+                 
+                table[r][c].cell = false;
+            }
         }
+        
     },
-    /**
-     * create a DomHelper friendly object - for use with
-     * Roo.DomHelper.markup / overwrite / etc..
-     */
-    toObject : function()
+    updateWidths : function(table)
     {
-        var d = document.createElement('div');
-        d.innerHTML = this.caption;
-        
-        return {
-            tag: 'figure',
-            'data-block' : 'Figure',
-            contenteditable : 'false',
-            style : {
-                display: 'table',
-                float :  this.align ,
-                width :  this.width,
-                margin:  this.margin
-            },
-            cn : [
-                {
-                    tag : 'img',
-                    src : this.image_src,
-                    alt : d.innerText.replace(/\n/g, " "), // removeHTML..
-                    style: {
-                        width: '100%'
-                    }
-                },
-                {
-                    tag: 'figcaption',
-                    contenteditable : true,
-                    style : {
-                        'text-align': this.text_align
-                    },
-                    html : this.caption
-                    
+        for(var r = 0 ; r < table.length; r++) {
+           
+            for(var c = 0 ; c < table[r].length; c++) {
+                if (table[r][c].cell === false) {
+                    continue;
                 }
-            ]
-        };
+                
+                if (this.colWidths[0] != false && table[r][c].colspan < 2) {
+                    var el = Roo.htmleditor.Block.factory(table[r][c].cell);
+                    el.width = Math.floor(this.colWidths[c])  +'%';
+                    el.updateElement(el.node);
+                }
+                table[r][c].cell = false; // done
+            }
+        }
     },
-    
-    readElement : function(node)
+    normalizeWidths : function(table)
     {
-        this.image_src = this.getVal(node, 'img', 'src');
-        this.align = this.getVal(node, 'figure', 'style', 'float');
-        this.caption = this.getVal(node, 'figcaption', 'html');
-        this.text_align = this.getVal(node, 'figcaption', 'style','text-align');
-        this.width = this.getVal(node, 'figure', 'style', 'width');
-        this.margin = this.getVal(node, 'figure', 'style', 'margin');
-        
-    } 
     
-  
-   
-     
+        if (this.colWidths[0] === false) {
+            var nw = 100.0 / this.colWidths.length;
+            this.colWidths.forEach(function(w,i) {
+                this.colWidths[i] = nw;
+            },this);
+            return;
+        }
+    
+        var t = 0, missing = [];
+        
+        this.colWidths.forEach(function(w,i) {
+            //if you mix % and
+            this.colWidths[i] = this.colWidths[i] == '' ? 0 : (this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;
+            var add =  this.colWidths[i];
+            if (add > 0) {
+                t+=add;
+                return;
+            }
+            missing.push(i);
+            
+            
+        },this);
+        var nc = this.colWidths.length;
+        if (missing.length) {
+            var mult = (nc - missing.length) / (1.0 * nc);
+            var t = mult * t;
+            var ew = (100 -t) / (1.0 * missing.length);
+            this.colWidths.forEach(function(w,i) {
+                if (w > 0) {
+                    this.colWidths[i] = w * mult;
+                    return;
+                }
+                
+                this.colWidths[i] = ew;
+            }, this);
+            // have to make up numbers..
+             
+        }
+        // now we should have all the widths..
+        
     
+    },
     
+    shrinkColumn : function()
+    {
+        var table = this.toTableArray();
+        this.normalizeWidths(table);
+        var col = this.cellData.col;
+        var nw = this.colWidths[col] * 0.8;
+        if (nw < 5) {
+            return;
+        }
+        var otherAdd = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
+        this.colWidths.forEach(function(w,i) {
+            if (i == col) {
+                 this.colWidths[i] = nw;
+                return;
+            }
+            this.colWidths[i] += otherAdd
+        }, this);
+        this.updateWidths(table);
+         
+    },
+    growColumn : function()
+    {
+        var table = this.toTableArray();
+        this.normalizeWidths(table);
+        var col = this.cellData.col;
+        var nw = this.colWidths[col] * 1.2;
+        if (nw > 90) {
+            return;
+        }
+        var otherSub = (this.colWidths[col]  * 0.2) / (this.colWidths.length -1);
+        this.colWidths.forEach(function(w,i) {
+            if (i == col) {
+                this.colWidths[i] = nw;
+                return;
+            }
+            this.colWidths[i] -= otherSub
+        }, this);
+        this.updateWidths(table);
+         
+    }
     
     
 })
@@ -22612,7 +23754,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
      */
     syncValue : function()
     {
-        Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
+        //Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");
         if(this.initialized){
             
             this.undoManager.addEvent();
@@ -22636,8 +23778,10 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             // remove content editable. (blocks)
             
            
-            new Roo.htmleditor.FilterAttributes({node : div, attrib_black: [ 'contenteditable' ] });
+            
             //?? tidy?
+            new Roo.htmleditor.FilterBlock({ node : div });
+            
             var html = div.innerHTML;
             if(Roo.isSafari){
                 var bs = bd.getAttribute('style'); // Safari puts text-align styles on the body element!
@@ -22689,7 +23833,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
      */
     pushValue : function()
     {
-        Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
+        //Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");
         if(this.initialized){
             var v = this.el.dom.value.trim();
             
@@ -22701,12 +23845,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 this.el.dom.value = d.innerHTML;
                 this.owner.fireEvent('push', this, v);
             }
+            Roo.htmleditor.Block.initAll(this.doc.body);
             
-            Roo.each(Roo.get(this.doc.body).query('*[data-block]'), function(e) {
-                
-                Roo.htmleditor.Block.factory(e);
-                
-            },this);
             var lc = this.doc.body.lastChild;
             if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
                 // add an extra line at the end.
@@ -22841,6 +23981,19 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         
         var d = (new DOMParser().parseFromString(html, 'text/html')).body;
         
+        
+        var sn = this.getParentElement();
+        // check if d contains a table, and prevent nesting??
+        //Roo.log(d.getElementsByTagName('table'));
+        //Roo.log(sn);
+        //Roo.log(sn.closest('table'));
+        if (d.getElementsByTagName('table').length && sn && sn.closest('table')) {
+            e.preventDefault();
+            this.insertAtCursor("You can not nest tables");
+            //Roo.log("prevent?"); // fixme - 
+            return false;
+        }
+        
         if (images.length > 0) {
             Roo.each(d.getElementsByTagName('img'), function(img, i) {
                 img.setAttribute('src', images[i]);
@@ -22864,6 +24017,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         
         
         this.insertAtCursor(d.innerHTML);
+        Roo.htmleditor.Block.initAll(this.doc.body);
+        
         
         e.preventDefault();
         return false;
@@ -22937,6 +24092,37 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
 
     onEditorEvent : function(e)
     {
+        
+        if (e && (e.ctrlKey || e.metaKey) && e.keyCode === 90) {
+            return; // we do not handle this.. (undo manager does..)
+        }
+        // in theory this detects if the last element is not a br, then we try and do that.
+        // its so clicking in space at bottom triggers adding a br and moving the cursor.
+        if (e &&
+            e.target.nodeName == 'BODY' &&
+            e.type == "mouseup" &&
+            this.doc.body.lastChild
+           ) {
+            var lc = this.doc.body.lastChild;
+            while (lc.nodeType == 3 && lc.nodeValue == '') {
+                lc = lc.previousSibling;
+            }
+            if (lc.nodeType == 1 && lc.nodeName != 'BR') {
+            // if last element is <BR> - then dont do anything.
+            
+                var ns = this.doc.createElement('br');
+                this.doc.body.appendChild(ns);
+                range = this.doc.createRange();
+                range.setStartAfter(ns);
+                range.collapse(true);
+                var sel = this.win.getSelection();
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        }
+        
+        
+        
         this.owner.fireEvent('editorevent', this, e);
       //  this.updateToolbar();
         this.syncValue(); //we can not sync so often.. sync cleans, so this breaks stuff
@@ -23108,7 +24294,8 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                     }
                     return;
                 }
-                
+                /// this is handled by Roo.htmleditor.KeyEnter
+                 /*
                 if(k == e.ENTER){
                     r = this.doc.selection.createRange();
                     if(r){
@@ -23121,6 +24308,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                         }
                     }
                 }
+                */
                 //if (String.fromCharCode(k).toLowerCase() == 'v') { // paste
                 //    this.cleanUpPaste.defer(100, this);
                 //    return;
@@ -24997,6 +26185,11 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarStandard.prototype,  {
                 this.tb.items.each(function(item){
                     item.enable();
                 });
+                // initialize 'blocks'
+                Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'), function(e) {
+                    Roo.htmleditor.Block.factory(e).updateElement(e);
+                },this);
+            
             }
             
         }
@@ -25833,7 +27026,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
         
         tb.addFill();
         tb.addButton({
-            text: 'Remove Block or Formating', // remove the tag, and puts the children outside...
+            text: block && block.deleteTitle ? block.deleteTitle  : 'Remove Block or Formating', // remove the tag, and puts the children outside...
     
             listeners : {
                 click : function ()

diff --git a/roojs-ui.js b/roojs-ui.js
index 35acac5..112ccdd 100644 (file)
--- a/roojs-ui.js
+++ b/roojs-ui.js
@@ -991,6 +991,9 @@ nn.appendChild(nc);nn=nc;});for(var i=0;i<cn.length;cn++){A.removeChild(cn[i]);n
 Roo.htmleditor.FilterLongBr=function(A){this.walk(A.node);};Roo.extend(Roo.htmleditor.FilterLongBr,Roo.htmleditor.Filter,{tag:'BR',replaceTag:function(A){var ps=A.nextSibling;while(ps&&ps.nodeType==3&&ps.nodeValue.trim().length<1){ps=ps.nextSibling;}if(!ps&&['TD','TH','LI','H1','H2','H3','H4','H5','H6'].indexOf(A.parentNode.tagName)>-1){A.parentNode.removeChild(A);
 return false;}if(!ps||ps.nodeType!=1){return false;}if(!ps||ps.tagName!='BR'){return false;}if(!A.previousSibling){return false;}var ps=A.previousSibling;while(ps&&ps.nodeType==3&&ps.nodeValue.trim().length<1){ps=ps.previousSibling;}if(!ps||ps.nodeType!=1){return false;
 }if(!ps||['BR','H1','H2','H3','H4','H5','H6'].indexOf(ps.tagName)<0){return false;}A.parentNode.removeChild(A);return false;}});
+// Roo/htmleditor/FilterBlock.js
+Roo.htmleditor.FilterBlock=function(A){Roo.apply(this,A);var qa=A.node.querySelectorAll;this.removeAttributes('data-block');this.removeAttributes('contenteditable');this.removeAttributes('id');};Roo.apply(Roo.htmleditor.FilterBlock.prototype,{node:true,removeAttributes:function(A){var ar=this.node.querySelectorAll('*['+A+']');
+for(var i=0;i<ar.length;i++){ar[i].removeAttribute(A);}}});
 // Roo/htmleditor/Tidy.js
 Roo.htmleditor.Tidy=function(A){Roo.apply(this,A);this.core.doc.body.innerHTML=this.tidy(this.core.doc.body,'');};Roo.htmleditor.Tidy.toString=function(A){return Roo.htmleditor.Tidy.prototype.tidy(A,'');};Roo.htmleditor.Tidy.prototype={wrap:function(s){return s.replace(/\n/g," ").replace(/(?![^\n]{1,80}$)([^\n]{1,80})\s/g,'$1\n');
 },tidy:function(A,B){if(A.nodeType==3){return B===false?A.nodeValue:this.wrap(A.nodeValue.trim()).split("\n").join("\n"+B);}if(A.nodeType!=1){return '';}if(A.tagName=='BODY'){return this.cn(A,'');}var C="<"+A.tagName+this.attr(A);if(['IMG','BR','HR','INPUT'].indexOf(A.tagName)>-1){return C+'/>';
@@ -999,21 +1002,66 @@ Roo.htmleditor.Tidy=function(A){Roo.apply(this,A);this.core.doc.body.innerHTML=t
 i++){if(!A.attributes.item(i).value.length){continue;}B.push(A.attributes.item(i).name+'="'+Roo.util.Format.htmlEncode(A.attributes.item(i).value)+'"');}return B.length?(' '+B.join(' ')):'';}}
 // Roo/htmleditor/KeyEnter.js
 Roo.htmleditor.KeyEnter=function(A){Roo.apply(this,A);Roo.get(this.core.doc.body).on('keypress',this.keypress,this);};Roo.htmleditor.KeyEnter.prototype={core:false,keypress:function(e){if(e.charCode!=13){return true;}e.preventDefault();var A=this.core.doc;
-var B=A.createDocumentFragment();var C=A.createTextNode('\n');B.appendChild(C);var D=this.core.win.getSelection().getRangeAt(0);var n=D.commonAncestorContainer;while(n&&n.nodeType!=1){n=n.parentNode;}var li=false;if(n&&n.tagName=='UL'){li=A.createElement('LI');
-n.appendChild(li);}if(n&&n.tagName=='LI'){li=A.createElement('LI');if(n.nextSibling){n.parentNode.insertBefore(li,n.firstSibling);}else{n.parentNode.appendChild(li);}}if(li){D=A.createRange();D.setStartAfter(li);D.collapse(true);var E=this.core.win.getSelection();
-E.removeAllRanges();E.addRange(D);return false;}C=A.createElement('br');B.appendChild(C);D.deleteContents();D.insertNode(B);D=D.cloneRange();D.collapse(true);var E=this.core.win.getSelection();E.removeAllRanges();E.addRange(D);E.collapseToEnd();return false;
-}};
+var B=A.createDocumentFragment();var C=this.core.win.getSelection().getRangeAt(0);var n=C.commonAncestorContainer;while(n&&n.nodeType!=1){n=n.parentNode;}var li=false;if(n&&n.tagName=='UL'){li=A.createElement('LI');n.appendChild(li);}if(n&&n.tagName=='LI'){li=A.createElement('LI');
+if(n.nextSibling){n.parentNode.insertBefore(li,n.firstSibling);}else{n.parentNode.appendChild(li);}}if(li){C=A.createRange();C.setStartAfter(li);C.collapse(true);var D=this.core.win.getSelection();D.removeAllRanges();D.addRange(C);this.core.undoManager.addEvent();
+return false;}var E=A.createTextNode('\n');B.appendChild(E);E=A.createElement('br');B.appendChild(E);A.createTextNode('\n');B.appendChild(E);C.deleteContents();C.insertNode(B);var ns=E.nextSibling;while(ns&&ns.nodeType==3){ns=ns.nextSibling;}if(!ns){ns=A.createElement('br');
+E.parentNode.appendChild(ns);}C=A.createRange();C.setStartAfter(E);C.collapse(true);var D=this.core.win.getSelection();D.removeAllRanges();D.addRange(C);return false;}};
 // Roo/htmleditor/Block.js
-Roo.htmleditor.Block=function(A){};Roo.htmleditor.Block.factory=function(A){var id=Roo.get(A).id;if(typeof(Roo.htmleditor.Block.cache[id])!='undefined'){Roo.htmleditor.Block.cache[id].readElement();return Roo.htmleditor.Block.cache[id];}var B=Roo.htmleditor['Block'+A.getAttribute('data-block')];
-if(typeof(B)=='undefined'){Roo.log("OOps missing block : "+'Block'+A.getAttribute('data-block'));return false;}Roo.htmleditor.Block.cache[id]=new B({node:A});return Roo.htmleditor.Block.cache[id];};Roo.htmleditor.Block.cache={};Roo.htmleditor.Block.prototype={node:false,friendly_name:'Image with caption',context:false,updateElement:function(A){Roo.DomHelper.update(A===undefined?this.node:A,this.toObject());
-},toHTML:function(){return Roo.DomHelper.markup(this.toObject());},getVal:function(A,B,C,D){var n=A;if(B!==true&&n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);}if(C=='html'){return n.innerHTML;}if(C=='style'){return n.style[D]}return Roo.get(n).attr(C);
-},toObject:function(){return {};},readElement:function(A){}};
+Roo.htmleditor.Block=function(A){};Roo.htmleditor.Block.factory=function(A){var cc=Roo.htmleditor.Block.cache;var id=Roo.get(A).id;if(typeof(cc[id])!='undefined'&&(!cc[id].node||cc[id].node.closest('body'))){Roo.htmleditor.Block.cache[id].readElement();return Roo.htmleditor.Block.cache[id];
+}var db=A.getAttribute('data-block');if(!db){db=A.nodeName.toLowerCase().toUpperCaseFirst();}var B=Roo.htmleditor['Block'+db];if(typeof(B)=='undefined'){Roo.log("OOps missing block : "+'Block'+db);return false;}Roo.htmleditor.Block.cache[id]=new B({node:A}
+);return Roo.htmleditor.Block.cache[id];};Roo.htmleditor.Block.initAll=function(A,B){if(typeof(B)=='undefined'){var ia=Roo.htmleditor.Block.initAll;ia(A,'table');ia(A,'td');ia(A,'figure');return;}Roo.each(Roo.get(A).query(B),function(e){Roo.htmleditor.Block.factory(e);
+},this);};Roo.htmleditor.Block.cache={};Roo.htmleditor.Block.prototype={node:false,friendly_name:'Based Block',deleteTitle:false,context:false,updateElement:function(A){Roo.DomHelper.update(A===undefined?this.node:A,this.toObject());},toHTML:function(){return Roo.DomHelper.markup(this.toObject());
+},getVal:function(A,B,C,D){var n=A;if(B!==true&&n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);}if(C=='html'){return n.innerHTML;}if(C=='style'){return n.style[D]}return Roo.get(n).attr(C);},toObject:function(){return {};},readElement:function(A){}
+};
 // Roo/htmleditor/BlockFigure.js
-Roo.htmleditor.BlockFigure=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);};Roo.extend(Roo.htmleditor.BlockFigure,Roo.htmleditor.Block,{image_src:'',align:'left',caption:'',text_align:'left',width:'46%',margin:'2%',friendly_name:'Image with caption',context:{width:{title:"Width",width:40}
+Roo.htmleditor.BlockFigure=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);};Roo.extend(Roo.htmleditor.BlockFigure,Roo.htmleditor.Block,{image_src:'',align:'left',caption:'',text_align:'left',width:'46%',margin:'2%',friendly_name:'Image with caption',deleteTitle:"Delete Image and Caption",context:{width:{title:"Width",width:40}
 ,margin:{title:"Margin",width:40},align:{title:"Align",opts:[["left"],["right"]],width:80},text_align:{title:"Caption Align",opts:[["left"],["right"],["center"]],width:80},image_src:{title:"Src",width:220}},toObject:function(){var d=document.createElement('div');
 d.innerHTML=this.caption;return {tag:'figure','data-block':'Figure',contenteditable:'false',style:{display:'table',float:this.align,width:this.width,margin:this.margin},cn:[{tag:'img',src:this.image_src,alt:d.innerText.replace(/\n/g," "),style:{width:'100%'}
 },{tag:'figcaption',contenteditable:true,style:{'text-align':this.text_align},html:this.caption}]};},readElement:function(A){this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','style','float');this.caption=this.getVal(A,'figcaption','html');
 this.text_align=this.getVal(A,'figcaption','style','text-align');this.width=this.getVal(A,'figure','style','width');this.margin=this.getVal(A,'figure','style','margin');}})
+// Roo/htmleditor/BlockTable.js
+Roo.htmleditor.BlockTable=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);if(!A.node){this.rows=[];for(var r=0;r<this.no_row;r++){this.rows[r]=[];for(var c=0;c<this.no_col;c++){this.rows[r][c]=this.emptyCell();
+}}}};Roo.extend(Roo.htmleditor.BlockTable,Roo.htmleditor.Block,{rows:false,no_col:1,no_row:1,width:'100%',friendly_name:'Table',deleteTitle:'Delete Table',contextMenu:function(A){var B=function(){return Roo.htmleditor.Block.factory(A.tb.selectedNode);};var C=typeof(Roo.bootstrap)=='undefined'?Roo:Roo.bootstrap;
+var D=A.editorcore.syncValue;var E={};return [{xtype:'ComboBox',allowBlank:false,displayField:'val',editable:true,listWidth:100,triggerAction:'all',typeAhead:true,valueField:'val',width:100,name:'width',listeners:{select:function(F,r,G){var b=B();b.width=r.get('val');
+b.updateElement();D();}},xns:C.form,store:{xtype:'SimpleStore',data:[['100%'],['auto']],fields:['val'],xns:Roo.data}},{xtype:'TextItem',text:"Columns: ",xns:C.Toolbar},{xtype:'Button',text:'-',listeners:{click:function(F,e){B().removeColumn();D();}},xns:C.Toolbar}
+,{xtype:'Button',text:'+',listeners:{click:function(F,e){B().addColumn();D();}},xns:C.Toolbar},{xtype:'TextItem',text:"Rows: ",xns:C.Toolbar},{xtype:'Button',text:'-',listeners:{click:function(F,e){B().removeRow();D();}},xns:C.Toolbar},{xtype:'Button',text:'+',listeners:{click:function(F,e){B().addRow();
+D();}},xns:C.Toolbar},{xtype:'Button',text:'Reset Column Widths',listeners:{click:function(F,e){B().resetWidths();D();}},xns:C.Toolbar}];},toObject:function(){var A={tag:'table',contenteditable:'false','data-block':'Table',style:{width:this.width,border:'solid 1px #000','border-collapse':'collapse'}
+,cn:[{tag:'tbody',cn:[]}]};var B=0;Roo.each(this.rows,function(C){var tr={tag:'tr',style:{margin:'6px',border:'solid 1px #000',textAlign:'left'},cn:[]};A.cn[0].cn.push(tr);var nc=0;Roo.each(C,function(D){var td={tag:'td',contenteditable:'true','data-block':'Td',html:D.html,style:D.style}
+;if(D.colspan>1){td.colspan=D.colspan;nc+=D.colspan;}else{nc++;}if(D.rowspan>1){td.rowspan=D.rowspan;}tr.cn.push(td);},this);B=Math.max(nc,B);},this);B++;return A;},readElement:function(A){A=A?A:this.node;this.width=this.getVal(A,true,'style','width')||'100%';
+this.rows=[];this.no_row=0;var B=Array.from(A.getElementsByTagName('tr'));B.forEach(function(tr){var C=[];this.rows.push(C);if(Roo.get(tr).hasClass('roo-html-editor-el')){return;}this.no_row++;var D=0;Array.from(tr.getElementsByTagName('td')).forEach(function(td){if(Roo.get(td).hasClass('roo-html-editor-el')){return;
+}var E={colspan:td.hasAttribute('colspan')?td.getAttribute('colspan'):1,rowspan:td.hasAttribute('rowspan')?td.getAttribute('rowspan'):1,style:td.hasAttribute('style')?td.getAttribute('style'):'',html:td.innerHTML};D+=E.colspan;C.push(E);},this);this.no_col=Math.max(this.no_col,D);
+},this);},normalizeRows:function(){var A=[];var B=-1;this.rows.forEach(function(C){B++;A[B]=[];C=this.normalizeRow(C);var D=0;C.forEach(function(c){while(typeof(A[B][D])!='undefined'){D++;}if(typeof(A[B])=='undefined'){A[B]=[];}A[B][D]=c;c.row=B;c.col=D;if(c.rowspan<2){return;
+}for(var i=1;i<c.rowspan;i++){if(typeof(A[B+i])=='undefined'){A[B+i]=[];}A[B+i][D]=c;}});},this);return A;},normalizeRow:function(A){var B=[];A.forEach(function(c){if(c.colspan<2){B.push(c);return;}for(var i=0;i<c.colspan;i++){B.push(c);}});return B;},deleteColumn:function(A){if(!A||A.type!='col'){return;
+}if(this.no_col<2){return;}this.rows.forEach(function(B){var C=this.normalizeRow(B);var D=C[A.col];if(D.colspan>1){D.colspan--;}else{B.remove(D);}},this);this.no_col--;},removeColumn:function(){this.deleteColumn({type:'col',col:this.no_col-1});this.updateElement();
+},addColumn:function(){this.rows.forEach(function(A){A.push(this.emptyCell());},this);this.updateElement();},deleteRow:function(A){if(!A||A.type!='row'){return;}if(this.no_row<2){return;}var B=this.normalizeRows();B[A.row].forEach(function(D){if(D.rowspan>1){D.rowspan--;
+}else{D.remove=1;}},this);var C=[];this.rows.forEach(function(D){newrow=[];D.forEach(function(c){if(typeof(c.remove)=='undefined'){newrow.push(c);}});if(newrow.length>0){C.push(D);}});this.rows=C;this.no_row--;this.updateElement();},removeRow:function(){this.deleteRow({type:'row',row:this.no_row-1}
+);},addRow:function(){row=[];for(var i=0;i<this.no_col;i++){row.push(this.emptyCell());}this.rows.push(row);this.updateElement();},emptyCell:function(){return (new Roo.htmleditor.BlockTd({})).toObject();},removeNode:function(){return this.node;},resetWidths:function(){Array.from(this.node.getElementsByTagName('td')).forEach(function(n){var nn=Roo.htmleditor.Block.factory(n);
+nn.width='';nn.updateElement(n);});}})
+// Roo/htmleditor/BlockTd.js
+Roo.htmleditor.BlockTd=function(A){if(A.node){this.readElement(A.node);this.updateElement(A.node);}Roo.apply(this,A);};Roo.extend(Roo.htmleditor.BlockTd,Roo.htmleditor.Block,{node:false,width:'',textAlign:'left',colspan:1,rowspan:1,friendly_name:'Table Cell',deleteTitle:'Delete Table',contextMenu:function(A){var B=function(){return Roo.htmleditor.Block.factory(A.tb.selectedNode);
+};var C=function(){return Roo.htmleditor.Block.factory(A.tb.selectedNode.closest('table'));};var lr=false;var D=function(){lr=A.editorcore.getSelection().getRangeAt(0);};var restoreSel=function(){if(lr){(function(){A.editorcore.focus();var cr=A.editorcore.getSelection();
+cr.removeAllRanges();cr.addRange(lr);A.editorcore.onEditorEvent();}).defer(10,this);}};var rooui=typeof(Roo.bootstrap)=='undefined'?Roo:Roo.bootstrap;var E=A.editorcore.syncValue;var F={};return [{xtype:'Button',text:'Edit Table',listeners:{click:function(){var t=A.tb.selectedNode.closest('table');
+A.editorcore.selectNode(t);A.editorcore.onEditorEvent();}}},{xtype:'TextItem',text:"Column Width: ",xns:rooui.Toolbar},{xtype:'Button',text:'-',listeners:{click:function(G,e){D();B().shrinkColumn();E();restoreSel();}},xns:rooui.Toolbar},{xtype:'Button',text:'+',listeners:{click:function(G,e){D();
+B().growColumn();E();restoreSel();}},xns:rooui.Toolbar},{xtype:'TextItem',text:"Merge Cells: ",xns:rooui.Toolbar},{xtype:'Button',text:'Right',listeners:{click:function(G,e){D();B().mergeRight();E();restoreSel();}},xns:rooui.Toolbar},{xtype:'Button',text:'Below',listeners:{click:function(G,e){D();
+B().mergeBelow();E();restoreSel();}},xns:rooui.Toolbar},{xtype:'TextItem',text:"| ",xns:rooui.Toolbar},{xtype:'Button',text:'Split',listeners:{click:function(G,e){D();B().split();E();restoreSel();}},xns:rooui.Toolbar}];},toObject:function(){var A={tag:'td',contenteditable:'true','data-block':'Td',width:this.width,style:{width:this.width,'text-align':this.textAlign,border:'solid 1px rgb(0, 0, 0)','border-collapse':'collapse'}
+,html:this.html};if(this.colspan>1){A.colspan=cell.colspan;}if(A.rowspan>1){this.rowspan=cell.rowspan;}return A;},readElement:function(A){A=A?A:this.node;this.width=A.style.width;this.html=A.innerHTML;},emptyCell:function(){return {colspan:1,rowspan:1,textAlign:'left',html:"&nbsp;"}
+;},removeNode:function(){return this.node.closest('table');},cellData:false,colWidths:false,toTableArray:function(){var A=[];var B=this.node.closest('tr').closest('table');Array.from(B.rows).forEach(function(r,ri){A[ri]=[];});var rn=0;this.colWidths=[];var C=true;
+Array.from(B.rows).forEach(function(r,ri){var cn=0;Array.from(r.cells).forEach(function(ce,ci){var c={cell:ce,row:rn,col:cn,colspan:ce.colSpan,rowspan:ce.rowSpan};if(ce.isEqualNode(this.node)){this.cellData=c;}if(typeof(A[rn][cn])!='undefined'){while(typeof(A[rn][cn])!='undefined'){cn++;
+}c.col=cn;}if(typeof(this.colWidths[cn])=='undefined'){this.colWidths[cn]=ce.style.width;if(this.colWidths[cn]!=''){C=false;}}if(c.colspan<2&&c.rowspan<2){A[rn][cn]=c;cn++;return;}for(var j=0;j<c.rowspan;j++){if(typeof(A[rn+j])=='undefined'){continue;}A[rn+j][cn]=c;
+for(var i=0;i<c.colspan;i++){A[rn+j][cn+i]=c;}}cn+=c.colspan;},this);rn++;},this);if(C){this.colWidths[0]=false;}return A;},mergeRight:function(){var tr=this.node.closest('tr');var i=Array.prototype.indexOf.call(tr.childNodes,this.node);if(i>=tr.childNodes.length-1){return;
+}var A=this.toTableArray();if(typeof(A[this.cellData.row][this.cellData.col+this.cellData.colspan])=='undefined'){return;}var rc=A[this.cellData.row][this.cellData.col+this.cellData.colspan];if(rc.rowspan!=this.cellData.rowspan||rc.row!=this.cellData.row){return;
+}this.node.innerHTML+=' '+rc.cell.innerHTML;tr.removeChild(rc.cell);this.colspan+=rc.colspan;this.node.setAttribute('colspan',this.colspan);},mergeBelow:function(){var A=this.toTableArray();if(typeof(A[this.cellData.row+this.cellData.rowspan])=='undefined'){return;
+}if(typeof(A[this.cellData.row+this.cellData.rowspan][this.cellData.col])=='undefined'){return;}var rc=A[this.cellData.row+this.cellData.rowspan][this.cellData.col];if(rc.colspan!=this.cellData.colspan||rc.col!=this.cellData.col){return;}this.node.innerHTML=this.node.innerHTML+rc.cell.innerHTML;
+rc.cell.parentNode.removeChild(rc.cell);this.rowspan+=rc.rowspan;this.node.setAttribute('rowspan',this.rowspan);},split:function(){if(this.node.rowSpan<2&&this.node.colSpan<2){return;}var A=this.toTableArray();var cd=this.cellData;this.rowspan=1;this.colspan=1;
+for(var r=cd.row;r<cd.row+cd.rowspan;r++){for(var c=cd.col;c<cd.col+cd.colspan;c++){if(r==cd.row&&c==cd.col){this.node.removeAttribute('rowspan');this.node.removeAttribute('colspan');continue;}var B=this.node.cloneNode();B.removeAttribute('id');B.innerHTML='';
+A[r][c]={cell:B,col:c,row:r,colspan:1,rowspan:1};}}this.redrawAllCells(A);},redrawAllCells:function(A){var B=this.node.closest('tr').closest('table');Array.from(B.rows).forEach(function(r,ri){Array.from(r.cells).forEach(function(ce,ci){ce.parentNode.removeChild(ce);
+});});for(var r=0;r<A.length;r++){var re=B.rows[r];for(var c=0;c<A[r].length;c++){if(A[r][c].cell===false){continue;}re.appendChild(A[r][c].cell);A[r][c].cell=false;}}},updateWidths:function(A){for(var r=0;r<A.length;r++){for(var c=0;c<A[r].length;c++){if(A[r][c].cell===false){continue;
+}if(this.colWidths[0]!=false&&A[r][c].colspan<2){var el=Roo.htmleditor.Block.factory(A[r][c].cell);el.width=Math.floor(this.colWidths[c])+'%';el.updateElement(el.node);}A[r][c].cell=false;}}},normalizeWidths:function(A){if(this.colWidths[0]===false){var nw=100.0/this.colWidths.length;
+this.colWidths.forEach(function(w,i){this.colWidths[i]=nw;},this);return;}var t=0,B=[];this.colWidths.forEach(function(w,i){this.colWidths[i]=this.colWidths[i]==''?0:(this.colWidths[i]+'').replace(/[^0-9]+/g,'')*1;var D=this.colWidths[i];if(D>0){t+=D;return;
+}B.push(i);},this);var nc=this.colWidths.length;if(B.length){var C=(nc-B.length)/(1.0*nc);var t=C*t;var ew=(100-t)/(1.0*B.length);this.colWidths.forEach(function(w,i){if(w>0){this.colWidths[i]=w*C;return;}this.colWidths[i]=ew;},this);}},shrinkColumn:function(){var A=this.toTableArray();
+this.normalizeWidths(A);var B=this.cellData.col;var nw=this.colWidths[B]*0.8;if(nw<5){return;}var C=(this.colWidths[B]*0.2)/(this.colWidths.length-1);this.colWidths.forEach(function(w,i){if(i==B){this.colWidths[i]=nw;return;}this.colWidths[i]+=C},this);this.updateWidths(A);
+},growColumn:function(){var A=this.toTableArray();this.normalizeWidths(A);var B=this.cellData.col;var nw=this.colWidths[B]*1.2;if(nw>90){return;}var C=(this.colWidths[B]*0.2)/(this.colWidths.length-1);this.colWidths.forEach(function(w,i){if(i==B){this.colWidths[i]=nw;
+return;}this.colWidths[i]-=C},this);this.updateWidths(A);}})
 // Roo/HtmlEditorCore.js
 Roo.HtmlEditorCore=function(A){Roo.HtmlEditorCore.superclass.constructor.call(this,A);this.addEvents({initialize:true,activate:true,beforesync:true,beforepush:true,sync:true,push:true,editorevent:true});this.applyBlacklists();};Roo.extend(Roo.HtmlEditorCore,Roo.Component,{owner:false,resizable:false,height:300,width:500,stylesheets:false,allowComments:false,frameId:false,validationEvent:false,deferHeight:true,initialized:false,activated:false,sourceEditMode:false,onFocus:Roo.emptyFn,iframePad:3,hideMode:'offsets',clearUp:true,black:false,white:false,bodyCls:'',undoManager:false,getDocMarkup:function(){var st='';
 if(this.stylesheets===false){Roo.get(document.head).select('style').each(function(B){st+=B.dom.outerHTML||new XMLSerializer().serializeToString(B.dom);});Roo.get(document.head).select('link').each(function(B){st+=B.dom.outerHTML||new XMLSerializer().serializeToString(B.dom);
@@ -1024,43 +1072,45 @@ this.frameId=Roo.id();var B=this.owner.wrap.createChild({tag:'iframe',cls:'form-
 this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var C={run:function(){this.assignDocWin();if(this.doc.body||this.doc.readyState=='complete'){try{this.doc.designMode="on";}catch(e){return;}Roo.TaskMgr.stop(C);this.initEditor.defer(10,this);
 }},interval:10,duration:10000,scope:this};Roo.TaskMgr.start(C);},onResize:function(w,h){Roo.log('resize: '+w+','+h);if(!this.iframe){return;}if(typeof w=='number'){this.iframe.style.width=w+'px';}if(typeof h=='number'){this.iframe.style.height=h+'px';if(this.doc){(this.doc.body||this.doc.documentElement).style.height=(h-(this.iframePad*2))+'px';
 }}},toggleSourceEdit:function(A){this.sourceEditMode=A===true;if(this.sourceEditMode){Roo.get(this.iframe).addClass(['x-hidden','hide','d-none']);}else{Roo.get(this.iframe).removeClass(['x-hidden','hide','d-none']);this.deferFocus();}},cleanHtml:function(A){A=String(A);
-if(A.length>5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');}}if(A=='&nbsp;'){A='';}return A;},syncValue:function(){Roo.log("HtmlEditorCore:syncValue (EDITOR->TEXT)");if(this.initialized){this.undoManager.addEvent();
-var bd=(this.doc.body||this.doc.documentElement);var A=document.createElement('div');A.innerHTML=bd.innerHTML;new Roo.htmleditor.FilterAttributes({node:A,attrib_black:['contenteditable']});var B=A.innerHTML;if(Roo.isSafari){var bs=bd.getAttribute('style');
-var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){B='<div style="'+m[0]+'">'+B+'</div>';}}B=this.cleanHtml(B);B=B.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g,function(C){var cc=C.charCodeAt();if(C.length==2){var D=C.charCodeAt(0)-0xD800;
-var E=C.charCodeAt(1)-0xDC00;cc=(D*0x400)+E+0x10000;}else if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return C;}return "&#"+cc+";";});if(this.owner.fireEvent('beforesync',this,B)!==false){this.el.dom.value=B;this.owner.fireEvent('sync',this,B);
-}}},pushValue:function(){Roo.log("HtmlEditorCore:pushValue (TEXT->EDITOR)");if(this.initialized){var v=this.el.dom.value.trim();if(this.owner.fireEvent('beforepush',this,v)!==false){var d=(this.doc.body||this.doc.documentElement);d.innerHTML=v;this.el.dom.value=d.innerHTML;
-this.owner.fireEvent('push',this,v);}Roo.each(Roo.get(this.doc.body).query('*[data-block]'),function(e){Roo.htmleditor.Block.factory(e);},this);var lc=this.doc.body.lastChild;if(lc&&lc.nodeType==1&&lc.getAttribute("contenteditable")=="false"){this.doc.body.appendChild(this.doc.createElement('br'));
+if(A.length>5){if(Roo.isSafari){A=A.replace(/\sclass="(?:Apple-style-span|khtml-block-placeholder)"/gi,'');}}if(A=='&nbsp;'){A='';}return A;},syncValue:function(){if(this.initialized){this.undoManager.addEvent();var bd=(this.doc.body||this.doc.documentElement);
+var A=document.createElement('div');A.innerHTML=bd.innerHTML;new Roo.htmleditor.FilterBlock({node:A});var B=A.innerHTML;if(Roo.isSafari){var bs=bd.getAttribute('style');var m=bs?bs.match(/text-align:(.*?);/i):false;if(m&&m[1]){B='<div style="'+m[0]+'">'+B+'</div>';
+}}B=this.cleanHtml(B);B=B.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g,function(C){var cc=C.charCodeAt();if(C.length==2){var D=C.charCodeAt(0)-0xD800;var E=C.charCodeAt(1)-0xDC00;cc=(D*0x400)+E+0x10000;}else if((cc>=0x4E00&&cc<0xA000)||(cc>=0x3400&&cc<0x4E00)||(cc>=0xf900&&cc<0xfb00)){return C;
+}return "&#"+cc+";";});if(this.owner.fireEvent('beforesync',this,B)!==false){this.el.dom.value=B;this.owner.fireEvent('sync',this,B);}}},pushValue:function(){if(this.initialized){var v=this.el.dom.value.trim();if(this.owner.fireEvent('beforepush',this,v)!==false){var d=(this.doc.body||this.doc.documentElement);
+d.innerHTML=v;this.el.dom.value=d.innerHTML;this.owner.fireEvent('push',this,v);}Roo.htmleditor.Block.initAll(this.doc.body);var lc=this.doc.body.lastChild;if(lc&&lc.nodeType==1&&lc.getAttribute("contenteditable")=="false"){this.doc.body.appendChild(this.doc.createElement('br'));
 }}},deferFocus:function(){this.focus.defer(10,this);},focus:function(){if(this.win&&!this.sourceEditMode){this.win.focus();}else{this.el.focus();}},assignDocWin:function(){var A=this.iframe;if(Roo.isIE){this.doc=A.contentWindow.document;this.win=A.contentWindow;
 }else{if(!Roo.get(this.frameId)&&!A.contentDocument){return;}this.doc=(A.contentDocument||Roo.get(this.frameId).dom.document);this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEditor:function(){this.assignDocWin();this.doc.designMode="on";
 this.doc.open();this.doc.write(this.getDocMarkup());this.doc.close();var A=(this.doc.body||this.doc.documentElement);A.bgProperties='fixed';Roo.EventManager.on(this.doc,{'mouseup':this.onEditorEvent,'dblclick':this.onEditorEvent,'click':this.onEditorEvent,'keyup':this.onEditorEvent,buffer:100,scope:this}
 );Roo.EventManager.on(this.doc,{'paste':this.onPasteEvent,scope:this});if(Roo.isGecko){Roo.EventManager.on(this.doc,'keypress',this.mozKeyPress,this);}if(Roo.isIE||Roo.isSafari||Roo.isOpera){Roo.EventManager.on(this.doc,'keydown',this.fixKeys,this);}this.initialized=true;
 new Roo.htmleditor.KeyEnter({core:this});this.owner.fireEvent('initialize',this);this.pushValue();},onPasteEvent:function(e,v){var cd=(e.browserEvent.clipboardData||window.clipboardData);if(cd.files.length>0){var A=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL);
 var B=A.createObjectURL(cd.files[0]);this.insertAtCursor('<img src=" + url + ">');return false;}var C=cd.getData('text/html');var D=new Roo.rtf.Parser(cd.getData('text/rtf'));var E=D.doc?D.doc.getElementsByType('pict'):[];Roo.log(E);E=E.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable)/);
-}).map(function(g){return g.toDataURL();});C=this.cleanWordChars(C);var d=(new DOMParser().parseFromString(C,'text/html')).body;if(E.length>0){Roo.each(d.getElementsByTagName('img'),function(F,i){F.setAttribute('src',E[i]);});}new Roo.htmleditor.FilterStyleToTag({node:d}
-);new Roo.htmleditor.FilterAttributes({node:d,attrib_white:['href','src','name','align'],attrib_clean:['href','src']});new Roo.htmleditor.FilterBlack({node:d,tag:this.black});new Roo.htmleditor.FilterKeepChildren({node:d,tag:['FONT']});new Roo.htmleditor.FilterParagraph({node:d}
-);new Roo.htmleditor.FilterSpan({node:d});new Roo.htmleditor.FilterLongBr({node:d});this.insertAtCursor(d.innerHTML);e.preventDefault();return false;},onDestroy:function(){if(this.rendered){}},onFirstFocus:function(){this.assignDocWin();this.undoManager=new Roo.lib.UndoManager(100,(this.doc.body||this.doc.documentElement));
-this.activated=true;if(Roo.isGecko){this.win.focus();var s=this.win.getSelection();if(!s.focusNode||s.focusNode.nodeType!=3){var r=s.getRangeAt(0);r.selectNodeContents((this.doc.body||this.doc.documentElement));r.collapse(true);this.deferFocus();}try{this.execCmd('useCSS',true);
+}).map(function(g){return g.toDataURL();});C=this.cleanWordChars(C);var d=(new DOMParser().parseFromString(C,'text/html')).body;var sn=this.getParentElement();if(d.getElementsByTagName('table').length&&sn&&sn.closest('table')){e.preventDefault();this.insertAtCursor("You can not nest tables");
+return false;}if(E.length>0){Roo.each(d.getElementsByTagName('img'),function(F,i){F.setAttribute('src',E[i]);});}new Roo.htmleditor.FilterStyleToTag({node:d});new Roo.htmleditor.FilterAttributes({node:d,attrib_white:['href','src','name','align'],attrib_clean:['href','src']}
+);new Roo.htmleditor.FilterBlack({node:d,tag:this.black});new Roo.htmleditor.FilterKeepChildren({node:d,tag:['FONT']});new Roo.htmleditor.FilterParagraph({node:d});new Roo.htmleditor.FilterSpan({node:d});new Roo.htmleditor.FilterLongBr({node:d});this.insertAtCursor(d.innerHTML);
+Roo.htmleditor.Block.initAll(this.doc.body);e.preventDefault();return false;},onDestroy:function(){if(this.rendered){}},onFirstFocus:function(){this.assignDocWin();this.undoManager=new Roo.lib.UndoManager(100,(this.doc.body||this.doc.documentElement));this.activated=true;
+if(Roo.isGecko){this.win.focus();var s=this.win.getSelection();if(!s.focusNode||s.focusNode.nodeType!=3){var r=s.getRangeAt(0);r.selectNodeContents((this.doc.body||this.doc.documentElement));r.collapse(true);this.deferFocus();}try{this.execCmd('useCSS',true);
 this.execCmd('styleWithCSS',false);}catch(e){}}this.owner.fireEvent('activate',this);},adjustFont:function(A){var B=A.cmd=='increasefontsize'?1:-1;var v=parseInt(this.doc.queryCommandValue('FontSize')||3,10);if(Roo.isSafari){var sm={10:1,13:2,16:3,18:4,24:5,32:6,48:7}
-;v=(v<10)?10:v;v=(v>48)?48:v;v=typeof(sm[v])=='undefined'?1:sm[v];}v=Math.max(1,v+B);this.execCmd('FontSize',v);},onEditorEvent:function(e){this.owner.fireEvent('editorevent',this,e);this.syncValue();},insertTag:function(tg){if(tg.toLowerCase()=='span'||tg.toLowerCase()=='code'||tg.toLowerCase()=='sup'||tg.toLowerCase()=='sub'){range=this.createRange(this.getSelection());
+;v=(v<10)?10:v;v=(v>48)?48:v;v=typeof(sm[v])=='undefined'?1:sm[v];}v=Math.max(1,v+B);this.execCmd('FontSize',v);},onEditorEvent:function(e){if(e&&(e.ctrlKey||e.metaKey)&&e.keyCode===90){return;}if(e&&e.target.nodeName=='BODY'&&e.type=="mouseup"&&this.doc.body.lastChild){var lc=this.doc.body.lastChild;
+while(lc.nodeType==3&&lc.nodeValue==''){lc=lc.previousSibling;}if(lc.nodeType==1&&lc.nodeName!='BR'){var ns=this.doc.createElement('br');this.doc.body.appendChild(ns);range=this.doc.createRange();range.setStartAfter(ns);range.collapse(true);var A=this.win.getSelection();
+A.removeAllRanges();A.addRange(range);}}this.owner.fireEvent('editorevent',this,e);this.syncValue();},insertTag:function(tg){if(tg.toLowerCase()=='span'||tg.toLowerCase()=='code'||tg.toLowerCase()=='sup'||tg.toLowerCase()=='sub'){range=this.createRange(this.getSelection());
 var A=this.doc.createElement(tg.toLowerCase());A.appendChild(range.extractContents());range.insertNode(A);return;}this.execCmd("formatblock",tg);this.undoManager.addEvent();},insertText:function(A){var B=this.createRange();B.deleteContents();B.insertNode(this.doc.createTextNode(A));
 this.undoManager.addEvent();},relayCmd:function(A,B){this.win.focus();this.execCmd(A,B);this.owner.fireEvent('editorevent',this);this.owner.deferFocus();},execCmd:function(A,B){this.doc.execCommand(A,false,B===undefined?null:B);this.syncValue();},insertAtCursor:function(A){if(!this.activated){return;
 }if(Roo.isGecko||Roo.isOpera||Roo.isSafari){this.win.focus();var B,C;var D=this.win;if(D.getSelection&&D.getSelection().getRangeAt){this.createRange(this.getSelection()).deleteContents();B=D.getSelection().getRangeAt(0);C=typeof(A)=='string'?B.createContextualFragment(A):A;
 B.insertNode(C);B=B.cloneRange();B.collapse(false);D.getSelection().removeAllRanges();D.getSelection().addRange(B);}else if(D.document.selection&&D.document.selection.createRange){var E=typeof(A)=='string'?A:A.outerHTML;D.document.selection.createRange().pasteHTML(E);
 }else{var E=typeof(A)=='string'?A:A.outerHTML;this.execCmd('InsertHTML',E);}this.syncValue();this.deferFocus();}},mozKeyPress:function(e){if(e.ctrlKey){var c=e.getCharCode(),A;if(c>0){c=String.fromCharCode(c).toLowerCase();switch(c){case 'b':A='bold';break;
 case 'i':A='italic';break;case 'u':A='underline';break;}if(A){this.win.focus();this.execCmd(A);this.deferFocus();e.preventDefault();}}}},fixKeys:function(){if(Roo.isIE){return function(e){var k=e.getKey(),r;if(k==e.TAB){e.stopEvent();r=this.doc.selection.createRange();
-if(r){r.collapse(true);r.pasteHTML('&#160;&#160;&#160;&#160;');this.deferFocus();}return;}if(k==e.ENTER){r=this.doc.selection.createRange();if(r){var A=r.parentElement();if(!A||A.tagName.toLowerCase()!='li'){e.stopEvent();r.pasteHTML('<br/>');r.collapse(false);
-r.select();}}}};}else if(Roo.isOpera){return function(e){var k=e.getKey();if(k==e.TAB){e.stopEvent();this.win.focus();this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');this.deferFocus();}};}else if(Roo.isSafari){return function(e){var k=e.getKey();if(k==e.TAB){e.stopEvent();
-this.execCmd('InsertText','\t');this.deferFocus();return;}};}}(),getAllAncestors:function(){var p=this.getSelectedNode();var a=[];if(!p){a.push(p);p=this.getParentElement();}while(p&&(p.nodeType==1)&&(p.tagName.toLowerCase()!='body')){a.push(p);p=p.parentNode;
-}a.push(this.doc.body);return a;},lastSel:false,lastSelNode:false,getSelection:function(){this.assignDocWin();return Roo.isIE?this.doc.selection:this.win.getSelection();},selectNode:function(A){var B=A.ownerDocument.createRange();try{B.selectNode(A);}catch(e){B.selectNodeContents(A);
-}var s=this.win.getSelection();s.removeAllRanges();s.addRange(B);},getSelectedNode:function(){var A=this.createRange(this.getSelection()).cloneRange();if(Roo.isIE){var B=A.parentElement();while(true){var C=A.duplicate();C.moveToElementText(B);if(C.inRange(A)){break;
-}if((B.nodeType!=1)||(B.tagName.toLowerCase()=='body')){break;}B=B.parentElement;}return B;}var ac=A.commonAncestorContainer;if(ac.nodeType==3){ac=ac.parentNode;}var ar=ac.childNodes;var D=[];var E=[];var F=false;for(var i=0;i<ar.length;i++){if((ar[i].nodeType==3)&&(!ar[i].data.length)){continue;
-}if(this.rangeIntersectsNode(A,ar[i])&&this.rangeCompareNode(A,ar[i])==3){D.push(ar[i]);continue;}if((ar[i].nodeType==1)&&this.rangeIntersectsNode(A,ar[i])&&(this.rangeCompareNode(A,ar[i])>0)){E.push(ar[i]);continue;}if(!this.rangeIntersectsNode(A,ar[i])||(this.rangeCompareNode(A,ar[i])==0)){continue;
-}F=true;}if(!D.length&&E.length){D=E;}if(F||!D.length||(D.length>1)){return false;}return D[0];},createRange:function(A){if(typeof A!="undefined"){try{return A.getRangeAt?A.getRangeAt(0):A.createRange();}catch(e){return this.doc.createRange();}}else{return this.doc.createRange();
-}},getParentElement:function(){this.assignDocWin();var A=Roo.isIE?this.doc.selection:this.win.getSelection();var B=this.createRange(A);try{var p=B.commonAncestorContainer;while(p.nodeType==3){p=p.parentNode;}return p;}catch(e){return null;}},rangeIntersectsNode:function(A,B){var C=B.ownerDocument.createRange();
-try{C.selectNode(B);}catch(e){C.selectNodeContents(B);}var D=A.cloneRange();D.collapse(true);var E=A.cloneRange();E.collapse(false);var F=C.cloneRange();F.collapse(true);var G=C.cloneRange();G.collapse(false);return D.compareBoundaryPoints(Range.START_TO_START,G)==-1&&E.compareBoundaryPoints(Range.START_TO_START,F)==1;
-},rangeCompareNode:function(A,B){var C=B.ownerDocument.createRange();try{C.selectNode(B);}catch(e){C.selectNodeContents(B);}A.collapse(true);C.collapse(true);var ss=A.compareBoundaryPoints(Range.START_TO_START,C);var ee=A.compareBoundaryPoints(Range.END_TO_END,C);
-var D=ss==1;var E=ee==-1;if(D&&E){return 0;}if(!D&&E){return 1;}if(D&&!E){return 2;}return 3;},cleanWordChars:function(A){var B=[[8211,"&#8211;"],[8212,"&#8212;"],[8216,"'"],[8217,"'"],[8220,'"'],[8221,'"'],[8226,"*"],[8230,"..."]];var C=A;Roo.each(B,function(sw){var D=new RegExp("\\u"+sw[0].toString(16),"g");
-C=C.replace(D,sw[1]);});return C;},cleanUpChild:function(A){new Roo.htmleditor.FilterComment({node:A});new Roo.htmleditor.FilterAttributes({node:A,attrib_black:this.ablack,attrib_clean:this.aclean,style_white:this.cwhite,style_black:this.cblack});new Roo.htmleditor.FilterBlack({node:A,tag:this.black}
+if(r){r.collapse(true);r.pasteHTML('&#160;&#160;&#160;&#160;');this.deferFocus();}return;}};}else if(Roo.isOpera){return function(e){var k=e.getKey();if(k==e.TAB){e.stopEvent();this.win.focus();this.execCmd('InsertHTML','&#160;&#160;&#160;&#160;');this.deferFocus();
+}};}else if(Roo.isSafari){return function(e){var k=e.getKey();if(k==e.TAB){e.stopEvent();this.execCmd('InsertText','\t');this.deferFocus();return;}};}}(),getAllAncestors:function(){var p=this.getSelectedNode();var a=[];if(!p){a.push(p);p=this.getParentElement();
+}while(p&&(p.nodeType==1)&&(p.tagName.toLowerCase()!='body')){a.push(p);p=p.parentNode;}a.push(this.doc.body);return a;},lastSel:false,lastSelNode:false,getSelection:function(){this.assignDocWin();return Roo.isIE?this.doc.selection:this.win.getSelection();
+},selectNode:function(A){var B=A.ownerDocument.createRange();try{B.selectNode(A);}catch(e){B.selectNodeContents(A);}var s=this.win.getSelection();s.removeAllRanges();s.addRange(B);},getSelectedNode:function(){var A=this.createRange(this.getSelection()).cloneRange();
+if(Roo.isIE){var B=A.parentElement();while(true){var C=A.duplicate();C.moveToElementText(B);if(C.inRange(A)){break;}if((B.nodeType!=1)||(B.tagName.toLowerCase()=='body')){break;}B=B.parentElement;}return B;}var ac=A.commonAncestorContainer;if(ac.nodeType==3){ac=ac.parentNode;
+}var ar=ac.childNodes;var D=[];var E=[];var F=false;for(var i=0;i<ar.length;i++){if((ar[i].nodeType==3)&&(!ar[i].data.length)){continue;}if(this.rangeIntersectsNode(A,ar[i])&&this.rangeCompareNode(A,ar[i])==3){D.push(ar[i]);continue;}if((ar[i].nodeType==1)&&this.rangeIntersectsNode(A,ar[i])&&(this.rangeCompareNode(A,ar[i])>0)){E.push(ar[i]);
+continue;}if(!this.rangeIntersectsNode(A,ar[i])||(this.rangeCompareNode(A,ar[i])==0)){continue;}F=true;}if(!D.length&&E.length){D=E;}if(F||!D.length||(D.length>1)){return false;}return D[0];},createRange:function(A){if(typeof A!="undefined"){try{return A.getRangeAt?A.getRangeAt(0):A.createRange();
+}catch(e){return this.doc.createRange();}}else{return this.doc.createRange();}},getParentElement:function(){this.assignDocWin();var A=Roo.isIE?this.doc.selection:this.win.getSelection();var B=this.createRange(A);try{var p=B.commonAncestorContainer;while(p.nodeType==3){p=p.parentNode;
+}return p;}catch(e){return null;}},rangeIntersectsNode:function(A,B){var C=B.ownerDocument.createRange();try{C.selectNode(B);}catch(e){C.selectNodeContents(B);}var D=A.cloneRange();D.collapse(true);var E=A.cloneRange();E.collapse(false);var F=C.cloneRange();
+F.collapse(true);var G=C.cloneRange();G.collapse(false);return D.compareBoundaryPoints(Range.START_TO_START,G)==-1&&E.compareBoundaryPoints(Range.START_TO_START,F)==1;},rangeCompareNode:function(A,B){var C=B.ownerDocument.createRange();try{C.selectNode(B);
+}catch(e){C.selectNodeContents(B);}A.collapse(true);C.collapse(true);var ss=A.compareBoundaryPoints(Range.START_TO_START,C);var ee=A.compareBoundaryPoints(Range.END_TO_END,C);var D=ss==1;var E=ee==-1;if(D&&E){return 0;}if(!D&&E){return 1;}if(D&&!E){return 2;
+}return 3;},cleanWordChars:function(A){var B=[[8211,"&#8211;"],[8212,"&#8212;"],[8216,"'"],[8217,"'"],[8220,'"'],[8221,'"'],[8226,"*"],[8230,"..."]];var C=A;Roo.each(B,function(sw){var D=new RegExp("\\u"+sw[0].toString(16),"g");C=C.replace(D,sw[1]);});return C;
+},cleanUpChild:function(A){new Roo.htmleditor.FilterComment({node:A});new Roo.htmleditor.FilterAttributes({node:A,attrib_black:this.ablack,attrib_clean:this.aclean,style_white:this.cwhite,style_black:this.cblack});new Roo.htmleditor.FilterBlack({node:A,tag:this.black}
 );new Roo.htmleditor.FilterKeepChildren({node:A,tag:this.tag_remove});},cleanWord:function(A){new Roo.htmleditor.FilterWord({node:A?A:this.doc.body});},cleanTableWidths:function(A){new Roo.htmleditor.FilterTableWidth({node:A?A:this.doc.body});},applyBlacklists:function(){var w=typeof(this.owner.white)!='undefined'&&this.owner.white?this.owner.white:[];
 var b=typeof(this.owner.black)!='undefined'&&this.owner.black?this.owner.black:[];this.aclean=typeof(this.owner.aclean)!='undefined'&&this.owner.aclean?this.owner.aclean:Roo.HtmlEditorCore.aclean;this.ablack=typeof(this.owner.ablack)!='undefined'&&this.owner.ablack?this.owner.ablack:Roo.HtmlEditorCore.ablack;
 this.tag_remove=typeof(this.owner.tag_remove)!='undefined'&&this.owner.tag_remove?this.owner.tag_remove:Roo.HtmlEditorCore.tag_remove;this.white=[];this.black=[];Roo.each(Roo.HtmlEditorCore.white,function(A){if(b.indexOf(A)>-1){return;}this.white.push(A);
@@ -1120,13 +1170,13 @@ A[C+'-justifycenter'].toggle(B.queryCommandState('justifycenter'));A[C+'-justify
 break;}}}Roo.menu.MenuMgr.hideAll();},createFontOptions:function(){var A=[],fs=this.fontFamilies,ff,lc;for(var i=0,B=fs.length;i<B;i++){ff=fs[i];lc=ff.toLowerCase();A.push('<option value="',lc,'" style="font-family:',ff,';"',(this.defaultFont==lc?' selected="true">':'>'),ff,'</option>');
 }return A.join('');},toggleSourceEdit:function(A){Roo.log("toolbar toogle");if(A===undefined){A=!this.sourceEditMode;}this.sourceEditMode=A===true;var B=this.tb.items.get(this.editorcore.frameId+'-sourceedit');if(B.pressed!==this.sourceEditMode){B.toggle(this.sourceEditMode);
 return;}if(A){Roo.log("disabling buttons");this.tb.items.each(function(C){if(C.cmd!='sourceedit'&&(typeof(C.cls)!='undefined'&&C.cls.indexOf('x-init-enable')===-1)){C.disable();}});}else{Roo.log("enabling buttons");if(this.editorcore.initialized){this.tb.items.each(function(C){C.enable();
-});}}Roo.log("calling toggole on editor");this.editor.toggleSourceEdit(A);},buttonTips:{bold:{title:'Bold (Ctrl+B)',text:'Make the selected text bold.',cls:'x-html-editor-tip'},italic:{title:'Italic (Ctrl+I)',text:'Make the selected text italic.',cls:'x-html-editor-tip'}
-,underline:{title:'Underline (Ctrl+U)',text:'Underline the selected text.',cls:'x-html-editor-tip'},strikethrough:{title:'Strikethrough',text:'Strikethrough the selected text.',cls:'x-html-editor-tip'},increasefontsize:{title:'Grow Text',text:'Increase the font size.',cls:'x-html-editor-tip'}
-,decreasefontsize:{title:'Shrink Text',text:'Decrease the font size.',cls:'x-html-editor-tip'},backcolor:{title:'Text Highlight Color',text:'Change the background color of the selected text.',cls:'x-html-editor-tip'},forecolor:{title:'Font Color',text:'Change the color of the selected text.',cls:'x-html-editor-tip'}
-,justifyleft:{title:'Align Text Left',text:'Align text to the left.',cls:'x-html-editor-tip'},justifycenter:{title:'Center Text',text:'Center text in the editor.',cls:'x-html-editor-tip'},justifyright:{title:'Align Text Right',text:'Align text to the right.',cls:'x-html-editor-tip'}
-,insertunorderedlist:{title:'Bullet List',text:'Start a bulleted list.',cls:'x-html-editor-tip'},insertorderedlist:{title:'Numbered List',text:'Start a numbered list.',cls:'x-html-editor-tip'},createlink:{title:'Hyperlink',text:'Make the selected text a hyperlink.',cls:'x-html-editor-tip'}
-,sourceedit:{title:'Source Edit',text:'Switch to source editing mode.',cls:'x-html-editor-tip'}},onDestroy:function(){if(this.rendered){this.tb.items.each(function(A){if(A.menu){A.menu.removeAll();if(A.menu.el){A.menu.el.destroy();}}A.destroy();});}},onFirstFocus:function(){this.tb.items.each(function(A){A.enable();
-});}});
+});Roo.each(Roo.get(this.editorcore.doc.body).query('*[data-block]'),function(e){Roo.htmleditor.Block.factory(e).updateElement(e);},this);}}Roo.log("calling toggole on editor");this.editor.toggleSourceEdit(A);},buttonTips:{bold:{title:'Bold (Ctrl+B)',text:'Make the selected text bold.',cls:'x-html-editor-tip'}
+,italic:{title:'Italic (Ctrl+I)',text:'Make the selected text italic.',cls:'x-html-editor-tip'},underline:{title:'Underline (Ctrl+U)',text:'Underline the selected text.',cls:'x-html-editor-tip'},strikethrough:{title:'Strikethrough',text:'Strikethrough the selected text.',cls:'x-html-editor-tip'}
+,increasefontsize:{title:'Grow Text',text:'Increase the font size.',cls:'x-html-editor-tip'},decreasefontsize:{title:'Shrink Text',text:'Decrease the font size.',cls:'x-html-editor-tip'},backcolor:{title:'Text Highlight Color',text:'Change the background color of the selected text.',cls:'x-html-editor-tip'}
+,forecolor:{title:'Font Color',text:'Change the color of the selected text.',cls:'x-html-editor-tip'},justifyleft:{title:'Align Text Left',text:'Align text to the left.',cls:'x-html-editor-tip'},justifycenter:{title:'Center Text',text:'Center text in the editor.',cls:'x-html-editor-tip'}
+,justifyright:{title:'Align Text Right',text:'Align text to the right.',cls:'x-html-editor-tip'},insertunorderedlist:{title:'Bullet List',text:'Start a bulleted list.',cls:'x-html-editor-tip'},insertorderedlist:{title:'Numbered List',text:'Start a numbered list.',cls:'x-html-editor-tip'}
+,createlink:{title:'Hyperlink',text:'Make the selected text a hyperlink.',cls:'x-html-editor-tip'},sourceedit:{title:'Source Edit',text:'Switch to source editing mode.',cls:'x-html-editor-tip'}},onDestroy:function(){if(this.rendered){this.tb.items.each(function(A){if(A.menu){A.menu.removeAll();
+if(A.menu.el){A.menu.el.destroy();}}A.destroy();});}},onFirstFocus:function(){this.tb.items.each(function(A){A.enable();});}});
 // Roo/form/HtmlEditor/ToolbarContext.js
 Roo.form.HtmlEditor.ToolbarContext=function(A){Roo.apply(this,A);this.styles=this.styles||{};};Roo.form.HtmlEditor.ToolbarContext.types={'IMG':[{name:'width',title:"Width",width:40},{name:'height',title:"Height",width:40},{name:'align',title:"Align",opts:[[""],["left"],["right"],["center"],["top"]],width:80}
 ,{name:'border',title:"Border",width:40},{name:'alt',title:"Alt",width:120},{name:'src',title:"Src",width:220}],'FIGURE':[{name:'align',title:"Align",opts:[[""],["left"],["right"],["center"],["top"]],width:80}],'A':[{name:'name',title:"Name",width:50},{name:'target',title:"Target",width:120}
@@ -1153,7 +1203,7 @@ if(I.optname){J=Roo.form.HtmlEditor.ToolbarContext.options[I.optname];}if(J){tb.
 b[c.attrname]=r.get('val');b.updateElement(tb.selectedNode);E.syncValue();return;}if(c.stylename){tb.selectedNode.style[c.stylename]=r.get('val');E.syncValue();return;}if(r===false){tb.selectedNode.removeAttribute(c.attrname);E.syncValue();return;}tb.selectedNode.setAttribute(c.attrname,r.get('val'));
 E.syncValue();}}}));continue;}tb.addField(new Roo.form.TextField({name:'-roo-edit-'+A[i].name,attrname:A[i].name,width:I.width,value:'',listeners:{'change':function(f,nv,ov){if(tb.selectedNode.hasAttribute('data-block')){var b=Roo.htmleditor.Block.factory(tb.selectedNode);
 b[f.attrname]=nv;b.updateElement(tb.selectedNode);E.syncValue();return;}tb.selectedNode.setAttribute(f.attrname,nv);E.syncValue();}}}));}var K=this;if(nm=='BODY'){tb.addSeparator();tb.addButton({text:'Stylesheets',listeners:{click:function(){K.editor.fireEvent('stylesheetsclick',K.editor);
-}}});}tb.addFill();tb.addButton({text:'Remove Block or Formating',listeners:{click:function(){var sn=tb.selectedNode;if(C){sn=Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();}if(!sn){return;}var L=sn.childNodes[0]||sn.nextSibling||sn.previousSibling||sn.parentNode;
+}}});}tb.addFill();tb.addButton({text:C&&C.deleteTitle?C.deleteTitle:'Remove Block or Formating',listeners:{click:function(){var sn=tb.selectedNode;if(C){sn=Roo.htmleditor.Block.factory(tb.selectedNode).removeNode();}if(!sn){return;}var L=sn.childNodes[0]||sn.nextSibling||sn.previousSibling||sn.parentNode;
 if(sn.hasAttribute('data-block')){L=sn.nextSibling||sn.previousSibling||sn.parentNode;sn.parentNode.removeChild(sn);}else if(sn&&sn.tagName!='BODY'){a=new Roo.htmleditor.FilterKeepChildren({tag:false});a.removeTag(sn);}var M=E.createRange();M.setStart(L,0);
 M.setEnd(L,0);var N=E.getSelection();N.removeAllRanges();N.addRange(M);K.updateToolbar(null,null,null);K.updateFooter(false);}}});tb.el.on('click',function(e){e.preventDefault();});tb.el.setVisibilityMode(Roo.Element.DISPLAY);tb.el.hide();return tb;},buildFooter:function(){var A=this.editor.wrap.createChild();
 this.footer=new Roo.Toolbar(A);var B=new Roo.Toolbar.Fill();var _t=this;this.footer.add({text:'&lt;',xtype:'Button',handler:function(){_t.footDisp.scrollTo('left',0,true)}});this.footer.add(B);this.footer.add({text:'&gt;',xtype:'Button',handler:function(){_t.footDisp.select('span').last().scrollIntoView(_t.footDisp,true);