Fix #7561 - pasting images

diff --git a/Roo/HtmlEditorCore.js b/Roo/HtmlEditorCore.js
index 38852b3..0673308 100644 (file)
--- a/Roo/HtmlEditorCore.js
+++ b/Roo/HtmlEditorCore.js
@@ -608,7 +608,24 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 (window.webkitURL && webkitURL);
     
             var url = urlAPI.createObjectURL( cd.files[0]);
-            this.insertAtCursor('<img src=" + url + ">');
+             var d = (new DOMParser().parseFromString('<img src="' + url + '">', 'text/html')).body;
+            // is insert asycn?
+            if (this.enableBlocks) {
+                
+                Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+                    if (img.closest('figure')) { // assume!! that it's aready
+                        return;
+                    }
+                    var fig  = new Roo.htmleditor.BlockFigure({
+                        image_src  : img.src
+                    });
+                    fig.updateElement(img); // replace it..
+                    
+                });
+            }
+            this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
+            e.preventDefault();
+            this.owner.fireEvent('paste', this);
             return false;
         }
         if (cd.types.indexOf('text/html') < 0 ) {

diff --git a/docs/src/Roo_HtmlEditorCore.js.html b/docs/src/Roo_HtmlEditorCore.js.html
index 289e026..7386706 100644 (file)
--- a/docs/src/Roo_HtmlEditorCore.js.html
+++ b/docs/src/Roo_HtmlEditorCore.js.html
@@ -608,7 +608,24 @@
                 (</span><span class="jsdoc-var">window.webkitURL </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">webkitURL</span><span class="jsdoc-syntax">);
 
             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">url </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">urlAPI.createObjectURL</span><span class="jsdoc-syntax">( </span><span class="jsdoc-var">cd.files</span><span class="jsdoc-syntax">[0]);
-            </span><span class="jsdoc-var">this.insertAtCursor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'&lt;img src=&quot; + url + &quot;&gt;'</span><span class="jsdoc-syntax">);
+             </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">d </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">DOMParser</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.parseFromString</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'&lt;img src=&quot;' </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">url </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'&quot;&gt;'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'text/html'</span><span class="jsdoc-syntax">))</span><span class="jsdoc-var">.body</span><span class="jsdoc-syntax">;
+            </span><span class="jsdoc-comment">// is insert asycn?
+            </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-var">Array.from</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d.getElementsByTagName</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'img'</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">img</span><span class="jsdoc-syntax">) {
+                    </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img.closest</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'figure'</span><span class="jsdoc-syntax">)) { </span><span class="jsdoc-comment">// assume!! that it's aready
+                        </span><span class="jsdoc-keyword">return</span><span class="jsdoc-syntax">;
+                    }
+                    </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">fig  </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">new </span><span class="jsdoc-var">Roo.htmleditor.BlockFigure</span><span class="jsdoc-syntax">({
+                        </span><span class="jsdoc-var">image_src  </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">img.src
+                    </span><span class="jsdoc-syntax">});
+                    </span><span class="jsdoc-var">fig.updateElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">img</span><span class="jsdoc-syntax">); </span><span class="jsdoc-comment">// replace it..
+
+                </span><span class="jsdoc-syntax">});
+            }
+            </span><span class="jsdoc-var">this.insertAtCursor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">d.innerHTML.replace</span><span class="jsdoc-syntax">(/&amp;nbsp;/g,</span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">));
+            </span><span class="jsdoc-var">e.preventDefault</span><span class="jsdoc-syntax">();
+            </span><span class="jsdoc-var">this.owner.fireEvent</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'paste'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
             </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
         }
         </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cd.types.indexOf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'text/html'</span><span class="jsdoc-syntax">) &lt; 0 ) {

diff --git a/roojs-all.js b/roojs-all.js
index 08e4b49..9ca1c28 100644 (file)
--- a/roojs-all.js
+++ b/roojs-all.js
@@ -2094,8 +2094,9 @@ this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEdito
 A.bgProperties='fixed';A.setAttribute("translate","no");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&&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;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf'));C=E.doc?E.doc.getElementsByType('pict'):[];
-}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'text/html')).body;
+var d=(new DOMParser().parseFromString('<img src="'+B+'">','text/html')).body;if(this.enableBlocks){Array.from(d.getElementsByTagName('img')).forEach(function(F){if(F.closest('figure')){return;}var G=new Roo.htmleditor.BlockFigure({image_src:F.src});G.updateElement(F);
+});}this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));e.preventDefault();this.owner.fireEvent('paste',this);return false;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf'));
+C=E.doc?E.doc.getElementsByType('pict'):[];}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'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(C.length>0){var ar=Array.from(d.getElementsByTagName('v:imagedata'));Roo.each(ar,function(F){F.parentNode.insertBefore(d.ownerDocument.createElement('img'),F);
 F.parentNode.removeChild(F);});Roo.each(d.getElementsByTagName('img'),function(F,i){F.setAttribute('src',C[i]);});}if(this.autoClean){new Roo.htmleditor.FilterWord({node:d});new Roo.htmleditor.FilterStyleToTag({node:d});new Roo.htmleditor.FilterAttributes({node:d,attrib_white:['href','src','name','align','colspan','rowspan','data-display','data-width','start'],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});new Roo.htmleditor.FilterComment({node:d}

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index ab78981..0a676f7 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -31375,7 +31375,24 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 (window.webkitURL && webkitURL);
     
             var url = urlAPI.createObjectURL( cd.files[0]);
-            this.insertAtCursor('<img src=" + url + ">');
+             var d = (new DOMParser().parseFromString('<img src="' + url + '">', 'text/html')).body;
+            // is insert asycn?
+            if (this.enableBlocks) {
+                
+                Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+                    if (img.closest('figure')) { // assume!! that it's aready
+                        return;
+                    }
+                    var fig  = new Roo.htmleditor.BlockFigure({
+                        image_src  : img.src
+                    });
+                    fig.updateElement(img); // replace it..
+                    
+                });
+            }
+            this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
+            e.preventDefault();
+            this.owner.fireEvent('paste', this);
             return false;
         }
         if (cd.types.indexOf('text/html') < 0 ) {

diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index dd8aed6..ad01200 100644 (file)
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -1349,8 +1349,9 @@ this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEdito
 A.bgProperties='fixed';A.setAttribute("translate","no");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&&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;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf'));C=E.doc?E.doc.getElementsByType('pict'):[];
-}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'text/html')).body;
+var d=(new DOMParser().parseFromString('<img src="'+B+'">','text/html')).body;if(this.enableBlocks){Array.from(d.getElementsByTagName('img')).forEach(function(F){if(F.closest('figure')){return;}var G=new Roo.htmleditor.BlockFigure({image_src:F.src});G.updateElement(F);
+});}this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));e.preventDefault();this.owner.fireEvent('paste',this);return false;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf'));
+C=E.doc?E.doc.getElementsByType('pict'):[];}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'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(C.length>0){var ar=Array.from(d.getElementsByTagName('v:imagedata'));Roo.each(ar,function(F){F.parentNode.insertBefore(d.ownerDocument.createElement('img'),F);
 F.parentNode.removeChild(F);});Roo.each(d.getElementsByTagName('img'),function(F,i){F.setAttribute('src',C[i]);});}if(this.autoClean){new Roo.htmleditor.FilterWord({node:d});new Roo.htmleditor.FilterStyleToTag({node:d});new Roo.htmleditor.FilterAttributes({node:d,attrib_white:['href','src','name','align','colspan','rowspan','data-display','data-width','start'],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});new Roo.htmleditor.FilterComment({node:d}

diff --git a/roojs-debug.js b/roojs-debug.js
index be87bff..99d0499 100644 (file)
--- a/roojs-debug.js
+++ b/roojs-debug.js
@@ -50542,7 +50542,24 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 (window.webkitURL && webkitURL);
     
             var url = urlAPI.createObjectURL( cd.files[0]);
-            this.insertAtCursor('<img src=" + url + ">');
+             var d = (new DOMParser().parseFromString('<img src="' + url + '">', 'text/html')).body;
+            // is insert asycn?
+            if (this.enableBlocks) {
+                
+                Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+                    if (img.closest('figure')) { // assume!! that it's aready
+                        return;
+                    }
+                    var fig  = new Roo.htmleditor.BlockFigure({
+                        image_src  : img.src
+                    });
+                    fig.updateElement(img); // replace it..
+                    
+                });
+            }
+            this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
+            e.preventDefault();
+            this.owner.fireEvent('paste', this);
             return false;
         }
         if (cd.types.indexOf('text/html') < 0 ) {

diff --git a/roojs-ui-debug.js b/roojs-ui-debug.js
index 1fff0c8..d24383a 100644 (file)
--- a/roojs-ui-debug.js
+++ b/roojs-ui-debug.js
@@ -26040,7 +26040,24 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 (window.webkitURL && webkitURL);
     
             var url = urlAPI.createObjectURL( cd.files[0]);
-            this.insertAtCursor('<img src=" + url + ">');
+             var d = (new DOMParser().parseFromString('<img src="' + url + '">', 'text/html')).body;
+            // is insert asycn?
+            if (this.enableBlocks) {
+                
+                Array.from(d.getElementsByTagName('img')).forEach(function(img) {
+                    if (img.closest('figure')) { // assume!! that it's aready
+                        return;
+                    }
+                    var fig  = new Roo.htmleditor.BlockFigure({
+                        image_src  : img.src
+                    });
+                    fig.updateElement(img); // replace it..
+                    
+                });
+            }
+            this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));
+            e.preventDefault();
+            this.owner.fireEvent('paste', this);
             return false;
         }
         if (cd.types.indexOf('text/html') < 0 ) {

diff --git a/roojs-ui.js b/roojs-ui.js
index 220dacb..4bf9cae 100644 (file)
--- a/roojs-ui.js
+++ b/roojs-ui.js
@@ -1147,8 +1147,9 @@ this.win=(A.contentWindow||Roo.get(this.frameId).dom.contentWindow);}},initEdito
 A.bgProperties='fixed';A.setAttribute("translate","no");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&&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;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf'));C=E.doc?E.doc.getElementsByType('pict'):[];
-}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'text/html')).body;
+var d=(new DOMParser().parseFromString('<img src="'+B+'">','text/html')).body;if(this.enableBlocks){Array.from(d.getElementsByTagName('img')).forEach(function(F){if(F.closest('figure')){return;}var G=new Roo.htmleditor.BlockFigure({image_src:F.src});G.updateElement(F);
+});}this.insertAtCursor(d.innerHTML.replace(/&nbsp;/g,' '));e.preventDefault();this.owner.fireEvent('paste',this);return false;}if(cd.types.indexOf('text/html')<0){return false;}var C=[];var D=cd.getData('text/html');if(cd.types.indexOf('text/rtf')>-1){var E=new Roo.rtf.Parser(cd.getData('text/rtf'));
+C=E.doc?E.doc.getElementsByType('pict'):[];}C=C.filter(function(g){return !g.path.match(/^rtf\/(head|pgdsctbl|listtable|footerf)/);}).map(function(g){return g.toDataURL();}).filter(function(g){return g!='about:blank';});D=this.cleanWordChars(D);var d=(new DOMParser().parseFromString(D,'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(C.length>0){var ar=Array.from(d.getElementsByTagName('v:imagedata'));Roo.each(ar,function(F){F.parentNode.insertBefore(d.ownerDocument.createElement('img'),F);
 F.parentNode.removeChild(F);});Roo.each(d.getElementsByTagName('img'),function(F,i){F.setAttribute('src',C[i]);});}if(this.autoClean){new Roo.htmleditor.FilterWord({node:d});new Roo.htmleditor.FilterStyleToTag({node:d});new Roo.htmleditor.FilterAttributes({node:d,attrib_white:['href','src','name','align','colspan','rowspan','data-display','data-width','start'],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});new Roo.htmleditor.FilterComment({node:d}