sync
authorAlan <alan@roojs.com>
Thu, 30 Sep 2021 01:54:22 +0000 (09:54 +0800)
committerAlan <alan@roojs.com>
Thu, 30 Sep 2021 01:54:22 +0000 (09:54 +0800)
Roo/HtmlEditorCore.js
Roo/form/HtmlEditor/ToolbarContext.js
Roo/htmleditor/BlockFigure.js
roojs-all.js
roojs-debug.js
roojs-ui-debug.js
roojs-ui.js

index 86ab19c..efd098e 100644 (file)
@@ -424,7 +424,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             var lc = this.doc.body.lastChild;
             if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
                 // add an extra line at the end.
-                this.doc.body.appendChild(this.doc.createChild('br'));
+                this.doc.body.appendChild(this.doc.createElement('br'));
             }
             
             
@@ -840,6 +840,24 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
         this.assignDocWin();
         return Roo.isIE ? this.doc.selection : this.win.getSelection();
     },
+    /**
+     * Select a dom node
+     * @param {DomElement} node the node to select
+     */
+    selectNode : function(node)
+    {
+        
+            var nodeRange = node.ownerDocument.createRange();
+            try {
+                nodeRange.selectNode(node);
+            } catch (e) {
+                nodeRange.selectNodeContents(node);
+            }
+            //nodeRange.collapse(true);
+            var s = this.win.getSelection();
+            s.removeAllRanges();
+            s.addRange(nodeRange);
+    },
     
     getSelectedNode: function() 
     {
index 4595827..6b4728b 100644 (file)
@@ -370,17 +370,10 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
             // they have click on an image...
             // let's see if we can change the selection...
             sel = ev.target;
-         
-            var nodeRange = sel.ownerDocument.createRange();
-            try {
-                nodeRange.selectNode(sel);
-            } catch (e) {
-                nodeRange.selectNodeContents(sel);
-            }
-            //nodeRange.collapse(true);
-            var s = this.editorcore.win.getSelection();
-            s.removeAllRanges();
-            s.addRange(nodeRange);
+            
+            
+            this.editorcore.selectNode(sel);
+             
         }  
         
       
@@ -413,6 +406,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
             if (block) {
                 tn = 'BLOCK.' + db.getAttribute('data-block');
                 this.tb.selectedNode = db;
+                this.editorcore.selectNode(db);
                 if (typeof(this.toolbars[tn]) == 'undefined') {
                    this.toolbars[tn] = this.buildToolbar( block.context,tn ,block.friendly_name);
                 }
@@ -752,7 +746,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                     var range = editorcore.createRange();
         
                     range.setStart(stn,0);
-                    range.setEnd(en,0); //????
+                    range.setEnd(stn,0); 
                     var selection = editorcore.getSelection();
                     selection.removeAllRanges();
                     selection.addRange(range);
index 418ca7e..b3a48bf 100644 (file)
@@ -1,25 +1,4 @@
-/**
- *  
- * <figure data-block="BlockFigure" contenteditable="false" role="group" style="text-align:left">' + 
-        <img data-name="image" src="{SRC}">' + 
-        <figcaption data-name="caption" contenteditable="true" style="text-align:left">XXXX</figcaption>
-    </figure>
-    <br/>
-    
-    usage:
-     -- add to document..
-    new Roo.htmleditor.BlockFigure{
-        image_src : 'http://www.google.com',
-        caption : 'test',
-    }
-     -- load document, and search for elements of this...
-    Roo.DomQuery.select('*[data-block])
-    // loop each and call ctor ({node : xxx})
-    -- html editor click
-    ** see if parent has Element.findParent(*[data-block]);
-    use ?? to 
-    
- */
 
 /**
  * @class Roo.htmleditor.BlockFigure
@@ -54,18 +33,23 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
     caption : '',
     text_align: 'left',
     
-    width : '100',
+    width : '45%',
+    margin: '2%',
     
     // used by context menu
     friendly_name : 'Image with caption',
     
     context : { // ?? static really
         width : {
-            title: "Width %",
+            title: "Width",
+            width: 40
+            // ?? number
+        },
+        margin : {
+            title: "Margin",
             width: 40
             // ?? number
         },
-        
         align: {
             title: "Align",
             opts : [[ "left"],[ "right"]],
@@ -100,7 +84,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
             style : {
                 display: 'table',
                 float :  this.align ,
-                width :  this.width + '%'
+                width :  this.width,
+                margin:  this.margin
             },
             cn : [
                 {
@@ -130,8 +115,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
         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.image_width = this.getVal(node, 'img', 'width');
-        this.image_height = this.getVal(node, 'img', 'height');
+        this.width = this.getVal(node, 'figure', 'style', 'width');
+        this.margin = this.getVal(node, 'figure', 'style', 'margin');
         
     } 
     
index c3a7a66..70aa398 100644 (file)
@@ -1880,11 +1880,11 @@ Roo.htmleditor.Block=function(A){};Roo.htmleditor.Block.factory=function(A){var
 );};Roo.htmleditor.Block.prototype={friendly_name:'Image with caption',context:false,updateElement:function(A){Roo.DomHelper.update(A,this.toObject());},toHTML:function(){return Roo.DomHelper.markup(this.toObject());},getVal:function(A,B,C,D){var n=A;if(n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);
 }if(C=='html'){return n.innerHTML;}if(C=='style'){return Roo.get(n).getStyle(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:'100',friendly_name:'Image with caption',context:{width:{title:"Width %",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+'%'},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.image_width=this.getVal(A,'img','width');
-this.image_height=this.getVal(A,'img','height');}})
+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:'45%',margin:'2%',friendly_name:'Image with 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/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:'',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);
@@ -1900,7 +1900,7 @@ Roo.each(Roo.get(this.doc.body).query('*[data-block]'),function(e){Roo.htmledito
 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.createChild('br'));
+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'));
 }}},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,'paste':this.onPasteEvent,buffer:100,scope:this}
@@ -2020,7 +2020,7 @@ b[c.attrname]=r.get('val');b.updateElement(tb.selectedNode);D.syncValue();return
 D.syncValue();}}}));continue;}tb.addField(new Roo.form.TextField({name:'-roo-edit-'+i,attrname:i,width:H.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);D.syncValue();return;}tb.selectedNode.setAttribute(f.attrname,nv);D.syncValue();}}}));}var J=this;if(nm=='BODY'){tb.addSeparator();tb.addButton({text:'Stylesheets',listeners:{click:function(){J.editor.fireEvent('stylesheetsclick',J.editor);
 }}});}tb.addFill();tb.addButton({text:'Remove',listeners:{click:function(){var sn=tb.selectedNode;var K=sn.childNodes[0]||sn.nextSibling||sn.previousSibling||sn.parentNode;if(sn.hasAttribute('data-block')){K=sn.nextSibling||sn.previousSibling||sn.parentNode;
-sn.parentNode.removeChild(sn);}else{a=new Roo.htmleditor.FilterKeepChildren({tag:false});a.removeTag(sn);}var L=D.createRange();L.setStart(K,0);L.setEnd(en,0);var M=D.getSelection();M.removeAllRanges();M.addRange(L);J.updateToolbar(null,null,null);J.updateFooter(false);
+sn.parentNode.removeChild(sn);}else{a=new Roo.htmleditor.FilterKeepChildren({tag:false});a.removeTag(sn);}var L=D.createRange();L.setStart(K,0);L.setEnd(K,0);var M=D.getSelection();M.removeAllRanges();M.addRange(L);J.updateToolbar(null,null,null);J.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);}});
 var A=Roo.get(B.el);A.addClass('x-editor-context');this.footDispWrap=A;this.footDispWrap.overflow='hidden';this.footDisp=A.createChild();this.footDispWrap.on('click',this.onContextClick,this)},onContextClick:function(ev,A){ev.preventDefault();var cn=A.className;
index cffc560..627f4eb 100644 (file)
@@ -45352,28 +45352,7 @@ Roo.htmleditor.Block.prototype = {
     
 }
 
-/**
- *  
- * <figure data-block="BlockFigure" contenteditable="false" role="group" style="text-align:left">' + 
-        <img data-name="image" src="{SRC}">' + 
-        <figcaption data-name="caption" contenteditable="true" style="text-align:left">XXXX</figcaption>
-    </figure>
-    <br/>
-    
-    usage:
-     -- add to document..
-    new Roo.htmleditor.BlockFigure{
-        image_src : 'http://www.google.com',
-        caption : 'test',
-    }
-     -- load document, and search for elements of this...
-    Roo.DomQuery.select('*[data-block])
-    // loop each and call ctor ({node : xxx})
-    -- html editor click
-    ** see if parent has Element.findParent(*[data-block]);
-    use ?? to 
-    
- */
 
 /**
  * @class Roo.htmleditor.BlockFigure
@@ -45408,18 +45387,23 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
     caption : '',
     text_align: 'left',
     
-    width : '100',
+    width : '45%',
+    margin: '2%',
     
     // used by context menu
     friendly_name : 'Image with caption',
     
     context : { // ?? static really
         width : {
-            title: "Width %",
+            title: "Width",
+            width: 40
+            // ?? number
+        },
+        margin : {
+            title: "Margin",
             width: 40
             // ?? number
         },
-        
         align: {
             title: "Align",
             opts : [[ "left"],[ "right"]],
@@ -45454,7 +45438,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
             style : {
                 display: 'table',
                 float :  this.align ,
-                width :  this.width + '%'
+                width :  this.width,
+                margin: this.margin
             },
             cn : [
                 {
@@ -45484,8 +45469,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
         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.image_width = this.getVal(node, 'img', 'width');
-        this.image_height = this.getVal(node, 'img', 'height');
+        this.width = this.getVal(node, 'figure', 'style', 'width');
+        this.margin = this.getVal(node, 'figure', 'style', 'margin');
         
     } 
     
@@ -45924,7 +45909,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             var lc = this.doc.body.lastChild;
             if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
                 // add an extra line at the end.
-                this.doc.body.appendChild(this.doc.createChild('br'));
+                this.doc.body.appendChild(this.doc.createElement('br'));
             }
             
             
@@ -49028,7 +49013,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                     var range = editorcore.createRange();
         
                     range.setStart(stn,0);
-                    range.setEnd(en,0); //????
+                    range.setEnd(stn,0); 
                     var selection = editorcore.getSelection();
                     selection.removeAllRanges();
                     selection.addRange(range);
index d5fe7fc..8b7daa2 100644 (file)
@@ -21384,28 +21384,7 @@ Roo.htmleditor.Block.prototype = {
     
 }
 
-/**
- *  
- * <figure data-block="BlockFigure" contenteditable="false" role="group" style="text-align:left">' + 
-        <img data-name="image" src="{SRC}">' + 
-        <figcaption data-name="caption" contenteditable="true" style="text-align:left">XXXX</figcaption>
-    </figure>
-    <br/>
-    
-    usage:
-     -- add to document..
-    new Roo.htmleditor.BlockFigure{
-        image_src : 'http://www.google.com',
-        caption : 'test',
-    }
-     -- load document, and search for elements of this...
-    Roo.DomQuery.select('*[data-block])
-    // loop each and call ctor ({node : xxx})
-    -- html editor click
-    ** see if parent has Element.findParent(*[data-block]);
-    use ?? to 
-    
- */
 
 /**
  * @class Roo.htmleditor.BlockFigure
@@ -21440,18 +21419,23 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
     caption : '',
     text_align: 'left',
     
-    width : '100',
+    width : '45%',
+    margin: '2%',
     
     // used by context menu
     friendly_name : 'Image with caption',
     
     context : { // ?? static really
         width : {
-            title: "Width %",
+            title: "Width",
+            width: 40
+            // ?? number
+        },
+        margin : {
+            title: "Margin",
             width: 40
             // ?? number
         },
-        
         align: {
             title: "Align",
             opts : [[ "left"],[ "right"]],
@@ -21486,7 +21470,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
             style : {
                 display: 'table',
                 float :  this.align ,
-                width :  this.width + '%'
+                width :  this.width,
+                margin: this.margin
             },
             cn : [
                 {
@@ -21516,8 +21501,8 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
         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.image_width = this.getVal(node, 'img', 'width');
-        this.image_height = this.getVal(node, 'img', 'height');
+        this.width = this.getVal(node, 'figure', 'style', 'width');
+        this.margin = this.getVal(node, 'figure', 'style', 'margin');
         
     } 
     
@@ -21956,7 +21941,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             var lc = this.doc.body.lastChild;
             if (lc && lc.nodeType == 1 && lc.getAttribute("contenteditable") == "false") {
                 // add an extra line at the end.
-                this.doc.body.appendChild(this.doc.createChild('br'));
+                this.doc.body.appendChild(this.doc.createElement('br'));
             }
             
             
@@ -25060,7 +25045,7 @@ Roo.apply(Roo.form.HtmlEditor.ToolbarContext.prototype,  {
                     var range = editorcore.createRange();
         
                     range.setStart(stn,0);
-                    range.setEnd(en,0); //????
+                    range.setEnd(stn,0); 
                     var selection = editorcore.getSelection();
                     selection.removeAllRanges();
                     selection.addRange(range);
index 6d91f11..60ff227 100644 (file)
@@ -956,11 +956,11 @@ Roo.htmleditor.Block=function(A){};Roo.htmleditor.Block.factory=function(A){var
 );};Roo.htmleditor.Block.prototype={friendly_name:'Image with caption',context:false,updateElement:function(A){Roo.DomHelper.update(A,this.toObject());},toHTML:function(){return Roo.DomHelper.markup(this.toObject());},getVal:function(A,B,C,D){var n=A;if(n.tagName!=B.toUpperCase()){n=A.getElementsByTagName(B).item(0);
 }if(C=='html'){return n.innerHTML;}if(C=='style'){return Roo.get(n).getStyle(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:'100',friendly_name:'Image with caption',context:{width:{title:"Width %",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+'%'},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.image_width=this.getVal(A,'img','width');
-this.image_height=this.getVal(A,'img','height');}})
+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:'45%',margin:'2%',friendly_name:'Image with 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/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:'',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);
@@ -976,7 +976,7 @@ Roo.each(Roo.get(this.doc.body).query('*[data-block]'),function(e){Roo.htmledito
 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.createChild('br'));
+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'));
 }}},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,'paste':this.onPasteEvent,buffer:100,scope:this}
@@ -1096,7 +1096,7 @@ b[c.attrname]=r.get('val');b.updateElement(tb.selectedNode);D.syncValue();return
 D.syncValue();}}}));continue;}tb.addField(new Roo.form.TextField({name:'-roo-edit-'+i,attrname:i,width:H.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);D.syncValue();return;}tb.selectedNode.setAttribute(f.attrname,nv);D.syncValue();}}}));}var J=this;if(nm=='BODY'){tb.addSeparator();tb.addButton({text:'Stylesheets',listeners:{click:function(){J.editor.fireEvent('stylesheetsclick',J.editor);
 }}});}tb.addFill();tb.addButton({text:'Remove',listeners:{click:function(){var sn=tb.selectedNode;var K=sn.childNodes[0]||sn.nextSibling||sn.previousSibling||sn.parentNode;if(sn.hasAttribute('data-block')){K=sn.nextSibling||sn.previousSibling||sn.parentNode;
-sn.parentNode.removeChild(sn);}else{a=new Roo.htmleditor.FilterKeepChildren({tag:false});a.removeTag(sn);}var L=D.createRange();L.setStart(K,0);L.setEnd(en,0);var M=D.getSelection();M.removeAllRanges();M.addRange(L);J.updateToolbar(null,null,null);J.updateFooter(false);
+sn.parentNode.removeChild(sn);}else{a=new Roo.htmleditor.FilterKeepChildren({tag:false});a.removeTag(sn);}var L=D.createRange();L.setStart(K,0);L.setEnd(K,0);var M=D.getSelection();M.removeAllRanges();M.addRange(L);J.updateToolbar(null,null,null);J.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);}});
 var A=Roo.get(B.el);A.addClass('x-editor-context');this.footDispWrap=A;this.footDispWrap.overflow='hidden';this.footDisp=A.createChild();this.footDispWrap.on('click',this.onContextClick,this)},onContextClick:function(ev,A){ev.preventDefault();var cn=A.className;