From 794e679c43decffa4586af10d58cc356e058e545 Mon Sep 17 00:00:00 2001
From: Alan <alan@roojs.com>
Date: Thu, 15 Feb 2024 10:37:50 +0800
Subject: [PATCH] add 100% width to img tag in figures

---
 Roo/htmleditor/BlockFigure.js | 5 ++++-
 roojs-all.js                  | 3 ++-
 roojs-bootstrap-debug.js      | 5 ++++-
 roojs-bootstrap.js            | 3 ++-
 roojs-debug.js                | 5 ++++-
 roojs-ui-debug.js             | 5 ++++-
 roojs-ui.js                   | 3 ++-
 7 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/Roo/htmleditor/BlockFigure.js b/Roo/htmleditor/BlockFigure.js
index 9c20794ddf..e766bf57a1 100644
--- a/Roo/htmleditor/BlockFigure.js
+++ b/Roo/htmleditor/BlockFigure.js
@@ -279,8 +279,11 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 maxWidth : iw + ' !important', // this is not getting rendered?
                 margin : m  
                 
-            }
+            },
+            width: this.align == 'center' ?  this.width : '100%' 
+
         };
+        
         /*
         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
                     '<a href="{2}">' + 
diff --git a/roojs-all.js b/roojs-all.js
index 0720fcfa85..762a1785d6 100644
--- a/roojs-all.js
+++ b/roojs-all.js
@@ -2130,7 +2130,8 @@ var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent(
 var b=B();b.align=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.form,store:{xtype:'SimpleStore',data:[['left'],['right'],['center']],fields:['val'],xns:Roo.data}},{xtype:'Button',text:'Hide Caption',name:'caption_display',pressed:false,enableToggle:true,setValue:function(v){this.setText(v?"Hide Caption":"Show Caption");
 this.setPressed(v!='block');},listeners:{toggle:function(F,G){var b=B();b.caption_display=b.caption_display=='block'?'none':'block';this.setText(b.caption_display=='block'?"Hide Caption":"Show Caption");b.updateElement();D();A.editorcore.selectNode(A.tb.selectedNode);
 A.editorcore.onEditorEvent();}},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width!='100%'&&this.align=='center'?'0 auto':0;var iw=this.align=='center'?this.width:'100%';var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:iw,maxWidth:iw+' !important',margin:m}
-};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,'data-caption-display':this.caption_display,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align}
+,width:this.align=='center'?this.width:'100%'};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]}
+;}var B={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,'data-caption-display':this.caption_display,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align}
 ,align:this.align,cn:[A]};if(this.caption_display=='block'){B['cn'].push({tag:'figcaption',style:{textAlign:'left',fontSize:'16px',lineHeight:'24px',display:this.caption_display,maxWidth:(this.align=='center'?this.width:'100%')+' !important',margin:m,width:this.align=='center'?this.width:'100%'}
 ,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{marginTop:'16px',textAlign:'start'},align:'left',cn:[{tag:'i',contenteditable:Roo.htmleditor.BlockFigure.caption_edit,html:this.caption.length?this.caption:"Caption"}]}]});}return B;}
 ,readElement:function(A){this.video_url=this.getVal(A,'div','src');this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','align');this.caption_display=this.getVal(A,true,'data-caption-display');
diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index f1ce730c9a..7d9f8069ef 100644
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -29960,8 +29960,11 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 maxWidth : iw + ' !important', // this is not getting rendered?
                 margin : m  
                 
-            }
+            },
+            width: this.align == 'center' ?  this.width : '100%' 
+
         };
+        
         /*
         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
                     '<a href="{2}">' + 
diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index 127a61beb9..6fe0ea129e 100644
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -1301,7 +1301,8 @@ var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent(
 var b=B();b.align=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.form,store:{xtype:'SimpleStore',data:[['left'],['right'],['center']],fields:['val'],xns:Roo.data}},{xtype:'Button',text:'Hide Caption',name:'caption_display',pressed:false,enableToggle:true,setValue:function(v){this.setText(v?"Hide Caption":"Show Caption");
 this.setPressed(v!='block');},listeners:{toggle:function(F,G){var b=B();b.caption_display=b.caption_display=='block'?'none':'block';this.setText(b.caption_display=='block'?"Hide Caption":"Show Caption");b.updateElement();D();A.editorcore.selectNode(A.tb.selectedNode);
 A.editorcore.onEditorEvent();}},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width!='100%'&&this.align=='center'?'0 auto':0;var iw=this.align=='center'?this.width:'100%';var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:iw,maxWidth:iw+' !important',margin:m}
-};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,'data-caption-display':this.caption_display,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align}
+,width:this.align=='center'?this.width:'100%'};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]}
+;}var B={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,'data-caption-display':this.caption_display,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align}
 ,align:this.align,cn:[A]};if(this.caption_display=='block'){B['cn'].push({tag:'figcaption',style:{textAlign:'left',fontSize:'16px',lineHeight:'24px',display:this.caption_display,maxWidth:(this.align=='center'?this.width:'100%')+' !important',margin:m,width:this.align=='center'?this.width:'100%'}
 ,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{marginTop:'16px',textAlign:'start'},align:'left',cn:[{tag:'i',contenteditable:Roo.htmleditor.BlockFigure.caption_edit,html:this.caption.length?this.caption:"Caption"}]}]});}return B;}
 ,readElement:function(A){this.video_url=this.getVal(A,'div','src');this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','align');this.caption_display=this.getVal(A,true,'data-caption-display');
diff --git a/roojs-debug.js b/roojs-debug.js
index d2f4c6973c..0cc25d8196 100644
--- a/roojs-debug.js
+++ b/roojs-debug.js
@@ -50565,8 +50565,11 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 maxWidth : iw + ' !important', // this is not getting rendered?
                 margin : m  
                 
-            }
+            },
+            width: this.align == 'center' ?  this.width : '100%' 
+
         };
+        
         /*
         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
                     '<a href="{2}">' + 
diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index 25a2ef0ba0..b9f2ae51bb 100644
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -26063,8 +26063,11 @@ Roo.extend(Roo.htmleditor.BlockFigure, Roo.htmleditor.Block, {
                 maxWidth : iw + ' !important', // this is not getting rendered?
                 margin : m  
                 
-            }
+            },
+            width: this.align == 'center' ?  this.width : '100%' 
+
         };
+        
         /*
         '<div class="{0}" width="420" height="315" src="{1}" frameborder="0" allowfullscreen>' +
                     '<a href="{2}">' + 
diff --git a/roojs-ui.js b/roojs-ui.js
index 5126a44de0..065922496c 100644
--- a/roojs-ui.js
+++ b/roojs-ui.js
@@ -1183,7 +1183,8 @@ var b=B();b.width=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent(
 var b=B();b.align=r.get('val');b.updateElement();D();A.editorcore.onEditorEvent();}},xns:C.form,store:{xtype:'SimpleStore',data:[['left'],['right'],['center']],fields:['val'],xns:Roo.data}},{xtype:'Button',text:'Hide Caption',name:'caption_display',pressed:false,enableToggle:true,setValue:function(v){this.setText(v?"Hide Caption":"Show Caption");
 this.setPressed(v!='block');},listeners:{toggle:function(F,G){var b=B();b.caption_display=b.caption_display=='block'?'none':'block';this.setText(b.caption_display=='block'?"Hide Caption":"Show Caption");b.updateElement();D();A.editorcore.selectNode(A.tb.selectedNode);
 A.editorcore.onEditorEvent();}},xns:C.Toolbar}];},toObject:function(){var d=document.createElement('div');d.innerHTML=this.caption;var m=this.width!='100%'&&this.align=='center'?'0 auto':0;var iw=this.align=='center'?this.width:'100%';var A={tag:'img',contenteditable:'false',src:this.image_src,alt:d.innerText.replace(/\n/g," ").replace(/\s+/g,' ').trim(),style:{width:iw,maxWidth:iw+' !important',margin:m}
-};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]};}var B={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,'data-caption-display':this.caption_display,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align}
+,width:this.align=='center'?this.width:'100%'};if(this.href.length>0){A={tag:'a',href:this.href,contenteditable:'true',cn:[A]};}if(this.video_url.length>0){A={tag:'div',cls:this.cls,frameborder:0,allowfullscreen:true,width:420,height:315,src:this.video_url,cn:[A]}
+;}var B={tag:'figure','data-block':'Figure','data-width':this.width,'data-caption':this.caption,'data-caption-display':this.caption_display,contenteditable:'false',style:{display:'block',float:this.align,maxWidth:this.align=='center'?'100% !important':(this.width+' !important'),width:this.align=='center'?'100%':this.width,margin:'0px',padding:this.align=='center'?'0':'0 10px',textAlign:this.align}
 ,align:this.align,cn:[A]};if(this.caption_display=='block'){B['cn'].push({tag:'figcaption',style:{textAlign:'left',fontSize:'16px',lineHeight:'24px',display:this.caption_display,maxWidth:(this.align=='center'?this.width:'100%')+' !important',margin:m,width:this.align=='center'?this.width:'100%'}
 ,cls:this.cls.length>0?(this.cls+'-thumbnail'):'',cn:[{tag:'div',style:{marginTop:'16px',textAlign:'start'},align:'left',cn:[{tag:'i',contenteditable:Roo.htmleditor.BlockFigure.caption_edit,html:this.caption.length?this.caption:"Caption"}]}]});}return B;}
 ,readElement:function(A){this.video_url=this.getVal(A,'div','src');this.cls=this.getVal(A,'div','class');this.href=this.getVal(A,'a','href');this.image_src=this.getVal(A,'img','src');this.align=this.getVal(A,'figure','align');this.caption_display=this.getVal(A,true,'data-caption-display');
-- 
2.39.2