Changeset 29380

Timestamp:

08/06/2014 12:57:12 AM (10 years ago)

Author:

azaozz

Message:

TinyMCE: add support for class attribute on the caption shortcode. Part props knutsp, kadamwhite, fixes #28951.

File:

• trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js (modified) (10 diffs)

trunk/src/wp-includes/js/tinymce/plugins/wpeditimage/plugin.js

@@ -5 +5 @@
     function parseShortcode( content ) {
         return content.replace( /(?:<p>)?\[(?:wp_)?caption([^\]]+)\]([\s\S]+?)\[\/(?:wp_)?caption\](?:<\/p>)?/g, function( a, b, c ) {
-            var id, cls, w, cap, img, width,
+            var id, align, classes, caption, img, width,
                 trim = tinymce.trim;
 
@@ -13 +13 @@
             }
 
-            cls = b.match( /align=['"]([^'"]*)['"] ?/ );
-            if ( cls ) {
-                b = b.replace( cls[0], '' );
-            }
-
-            w = b.match( /width=['"]([0-9]*)['"] ?/ );
-            if ( w ) {
-                b = b.replace( w[0], '' );
+            align = b.match( /align=['"]([^'"]*)['"] ?/ );
+            if ( align ) {
+                b = b.replace( align[0], '' );
+            }
+
+            classes = b.match( /class=['"]([^'"]*)['"] ?/ );
+            if ( classes ) {
+                b = b.replace( classes[0], '' );
+            }
+
+            width = b.match( /width=['"]([0-9]*)['"] ?/ );
+            if ( width ) {
+                b = b.replace( width[0], '' );
             }
 
@@ -27 +32 @@
 
             if ( img && img[2] ) {
-                cap = trim( img[2] );
+                caption = trim( img[2] );
                 img = trim( img[1] );
             } else {
                 // old captions shortcode style
-                cap = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
+                caption = trim( b ).replace( /caption=['"]/, '' ).replace( /['"]$/, '' );
                 img = c;
             }
 
-            id = ( id && id[1] ) ? id[1] : '';
-            cls = ( cls && cls[1] ) ? cls[1] : 'alignnone';
-
-            if ( ! w && img ) {
-                w = img.match( /width=['"]([0-9]*)['"]/ );
-            }
-
-            if ( w && w[1] ) {
-                w = w[1];
-            }
-
-            if ( ! w || ! cap ) {
+            id = ( id && id[1] ) ? id[1].replace( /[<>&]+/g,  '' ) : '';
+            align = ( align && align[1] ) ? align[1] : 'alignnone';
+            classes = ( classes && classes[1] ) ? ' ' + classes[1].replace( /[<>&]+/g,  '' ) : '';
+
+            if ( ! width && img ) {
+                width = img.match( /width=['"]([0-9]*)['"]/ );
+            }
+
+            if ( width && width[1] ) {
+                width = width[1];
+            }
+
+            if ( ! width || ! caption ) {
                 return c;
             }
 
-            width = parseInt( w, 10 );
+            width = parseInt( width, 10 );
             if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {
                 width += 10;
             }
 
-            return '<div class="mceTemp"><dl id="'+ id +'" class="wp-caption '+ cls +'" style="width: '+ width +'px">' +
-                '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ cap +'</dd></dl></div>';
+            return '<div class="mceTemp"><dl id="' + id + '" class="wp-caption ' + align + classes + '" style="width: ' + width + 'px">' +
+                '<dt class="wp-caption-dt">'+ img +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl></div>';
         });
     }
@@ -76 +82 @@
             }
 
-            out = b.replace( /<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function( a, b, c, cap ) {
-                var id, cls, w;
-
-                w = c.match( /width="([0-9]*)"/ );
-                w = ( w && w[1] ) ? w[1] : '';
-
-                if ( ! w || ! cap ) {
+            out = b.replace( /<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function( a, b, c, caption ) {
+                var id, classes, align, width;
+
+                width = c.match( /width="([0-9]*)"/ );
+                width = ( width && width[1] ) ? width[1] : '';
+
+                if ( ! width || ! caption ) {
                     return c;
                 }
@@ -89 +95 @@
                 id = ( id && id[1] ) ? id[1] : '';
 
-                cls = b.match( /class="([^"]*)"/ );
-                cls = ( cls && cls[1] ) ? cls[1] : '';
-                cls = cls.match( /align[a-z]+/ ) || 'alignnone';
-
-                cap = cap.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
+                classes = b.match( /class="([^"]*)"/ );
+                classes = ( classes && classes[1] ) ? classes[1] : '';
+
+                align = classes.match( /align[a-z]+/i ) || 'alignnone';
+                classes = classes.replace( /wp-caption ?|align[a-z]+ ?/gi, '' );
+
+                if ( classes ) {
+                    classes = ' class="' + classes + '"';
+                }
+
+                caption = caption.replace( /\r\n|\r/g, '\n' ).replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( a ) {
                     // no line breaks inside HTML tags
                     return a.replace( /[\r\n\t]+/, ' ' );
@@ -99 +111 @@
 
                 // convert remaining line breaks to <br>
-                cap = cap.replace( /\s*\n\s*/g, '<br />' );
-
-                return '[caption id="'+ id +'" align="'+ cls +'" width="'+ w +'"]'+ c +' '+ cap +'[/caption]';
+                caption = caption.replace( /\s*\n\s*/g, '<br />' );
+
+                return '[caption id="' + id + '" align="' + align + '" width="' + width + '"' + classes + ']' + c + ' ' + caption + '[/caption]';
             });
 
@@ -116 +128 @@
     function extractImageData( imageNode ) {
         var classes, extraClasses, metadata, captionBlock, caption, link, width, height,
+            captionClassName = [],
             dom = editor.dom,
             isIntRegExp = /^\d+$/;
@@ -181 +194 @@
                 if ( /^align/.test( name ) ) {
                     metadata.align = name.replace( 'align', '' );
+                } else if ( name && name !== 'wp-caption' ) {
+                    captionClassName.push( name );
                 }
             } );
+
+            metadata.captionClassName = captionClassName.join( ' ' );
 
             caption = dom.select( 'dd.wp-caption-dd', captionBlock );
@@ -211 +228 @@
     function updateImage( imageNode, imageData ) {
         var classes, className, node, html, parent, wrap, linkNode,
-            captionNode, dd, dl, id, attrs, linkAttrs, width, height,
+            captionNode, dd, dl, id, attrs, linkAttrs, width, height, align,
             dom = editor.dom;
 
@@ -288 +305 @@
 
             id = imageData.attachment_id ? 'attachment_' + imageData.attachment_id : null;
-            className = 'wp-caption align' + ( imageData.align || 'none' );
+            align = 'align' + ( imageData.align || 'none' );
+            className = 'wp-caption ' + align;
+
+            if ( imageData.captionClassName ) {
+                className += ' ' + imageData.captionClassName.replace( /[<>&]+/g,  '' );
+            }
 
             if ( ! editor.getParam( 'wpeditimage_html5_captions' ) ) {