more features for block, and fix caption layout hopefully

[roojs1] / docs / src / Roo_htmleditor_BlockFigure.js.html

diff --git a/docs/src/Roo_htmleditor_BlockFigure.js.html b/docs/src/Roo_htmleditor_BlockFigure.js.html
index 9833ab4..eb95d84 100644 (file)
--- a/docs/src/Roo_htmleditor_BlockFigure.js.html
+++ b/docs/src/Roo_htmleditor_BlockFigure.js.html
@@ -263,15 +263,16 @@
 
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">m </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'50%' </span><span class="jsdoc-syntax">&amp;&amp; </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'0 auto' </span><span class="jsdoc-syntax">: 0;
 
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">iw </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'100%'</span><span class="jsdoc-syntax">;
         </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">img </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">contenteditable </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'false'</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-var">.replace</span><span class="jsdoc-syntax">(/\s+/g, </span><span class="jsdoc-string">' '</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.trim</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-comment">// removeHTML and reduce spaces..
             </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">'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-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">iw</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">maxWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">iw </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' !important'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// this is not getting rendered?
+                </span><span class="jsdoc-var">margin </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">m
 
 
             </span><span class="jsdoc-syntax">}
@@ -310,20 +311,21 @@
                 </span><span class="jsdoc-syntax">]
             };
         }
-
-        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">captionhtml </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.caption_display </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'hidden' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.caption </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.caption.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.caption </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Caption&quot;</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-comment">// we remove caption totally if its hidden... - will delete data.. but otherwise we end up with fake caption
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">captionhtml </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.caption_display </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'none' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'' </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.caption.length </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">this.caption </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">&quot;Caption&quot;</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">'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-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">:  </span><span class="jsdoc-var">m</span><span class="jsdoc-syntax">,
+                </span><span class="jsdoc-var">maxWidth </span><span class="jsdoc-syntax">:  </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'100% !important' </span><span class="jsdoc-syntax">: (</span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' !important'</span><span class="jsdoc-syntax">),
+                </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.align </span><span class="jsdoc-syntax">== </span><span class="jsdoc-string">'center' </span><span class="jsdoc-syntax">? </span><span class="jsdoc-string">'100%' </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-string">'0px'</span><span class="jsdoc-syntax">,
                 </span><span class="jsdoc-var">padding</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'10px'
 
             </span><span class="jsdoc-syntax">},
@@ -335,22 +337,37 @@
 
                 {
                     </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-string">'data-display' </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.caption_display</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-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-var">display </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.caption_display
+                        </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">fontSize </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'16px'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">lineHeight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'24px'</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">maxWidth </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.width </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">' !important'</span><span class="jsdoc-syntax">,
+                        </span><span class="jsdoc-var">margin</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">m</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">cls </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.cls.length </span><span class="jsdoc-syntax">&gt; 0 ? (</span><span class="jsdoc-var">this.cls  </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-string">'-thumbnail' </span><span class="jsdoc-syntax">) : </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">,
                     </span><span class="jsdoc-var">cn </span><span class="jsdoc-syntax">: [
                         {
-                            </span><span class="jsdoc-comment">// we can not rely on yahoo syndication to use CSS elements - so have to use  '&lt;i&gt;' to encase stuff.
-                            </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</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">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">captionhtml
-                        </span><span class="jsdoc-syntax">}
+                            </span><span class="jsdoc-var">tag</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'div'</span><span class="jsdoc-syntax">,
+                            </span><span class="jsdoc-var">style  </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-var">align</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">: [
+                                {
+                                    </span><span class="jsdoc-comment">// we can not rely on yahoo syndication to use CSS elements - so have to use  '&lt;i&gt;' to encase stuff.
+                                    </span><span class="jsdoc-var">tag </span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">'i'</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">html </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">captionhtml
+                                </span><span class="jsdoc-syntax">}
+
+                            ]
+                        }
+
                     ]
 
                 }
@@ -370,14 +387,12 @@
         </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">'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-comment">// remove '&lt;i&gt;
-        </span><span class="jsdoc-keyword">if </span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.caption.trim</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.match</span><span class="jsdoc-syntax">(/^&lt;i[^&gt;]*&gt;/i)) {
-            </span><span class="jsdoc-var">this.caption </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.caption.trim</span><span class="jsdoc-syntax">()</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/^&lt;i[^&gt;]*&gt;/i, </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">)</span><span class="jsdoc-var">.replace</span><span class="jsdoc-syntax">(/^&lt;\/i&gt;$/i, </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">);
-        }
-        </span><span class="jsdoc-var">this.caption_display </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">'display'</span><span class="jsdoc-syntax">);
+        </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">figcaption </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-keyword">false</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">figcaption</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'i'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'html'</span><span class="jsdoc-syntax">);
+
+        </span><span class="jsdoc-var">this.caption_display </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">'data-display'</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-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">'figcaption'</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-comment">//this.margin = this.getVal(node, 'figure', 'style', 'margin');
 
     </span><span class="jsdoc-syntax">},