diff --git a/Gruntfile.js b/Gruntfile.js index dd77b65b..c3d1581b 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -125,6 +125,7 @@ module.exports = function( grunt ) { 'js-tests/vendor/underscore.js', 'js-tests/vendor/backbone.js', 'js-tests/vendor/wp-util.js', + 'js-tests/vendor/wp-editors.js', 'js-tests/vendor/mock-ajax.js', ], } diff --git a/dev.php b/dev.php index 75da2a04..9f1da453 100644 --- a/dev.php +++ b/dev.php @@ -52,7 +52,7 @@

- Content:
+ Content:
Source:
Image:

diff --git a/js-tests/build/specs.js b/js-tests/build/specs.js index b1291abd..2c45185a 100644 --- a/js-tests/build/specs.js +++ b/js-tests/build/specs.js @@ -250,10 +250,10 @@ describe( "MCE View Constructor", function() { }); it( 'parses shortcode with content', function() { - var shortcode = MceViewConstructor.parseShortcodeString( '[test_shortcode attr="test value 1"]test content [/test_shortcode]') + var shortcode = MceViewConstructor.parseShortcodeString( '[test_shortcode attr="test value 1"]test content[/test_shortcode]') expect( shortcode instanceof Shortcode ).toEqual( true ); expect( shortcode.get( 'attrs' ).findWhere( { attr: 'attr' }).get('value') ).toEqual( 'test value 1' ); - expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( 'test content ' ); + expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( 'test content' ); }); it( 'parses shortcode with dashes in name and attribute', function() { @@ -263,10 +263,16 @@ describe( "MCE View Constructor", function() { }); // https://github.com/fusioneng/Shortcake/issues/171 - xit( 'parses shortcode with line breaks in inner content', function() { - var shortcode = MceViewConstructor.parseShortcodeString( "[test_shortcode]test \ncontent \r2 [/test_shortcode]") + it( 'parses shortcode with line breaks in inner content', function() { + var shortcode = MceViewConstructor.parseShortcodeString( "[test_shortcode]test \ntest \rtest[/test_shortcode]") expect( shortcode instanceof Shortcode ).toEqual( true ); - expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( "test \ncontent \r2 " ); + expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( "test \ntest \rtest" ); + } ); + + it( 'parses shortcode with paragraph and br tags in inner content', function() { + var shortcode = MceViewConstructor.parseShortcodeString( "[test_shortcode]

test

test
test

[/test_shortcode]") + expect( shortcode instanceof Shortcode ).toEqual( true ); + expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( "test\n\ntest\ntest" ); } ); it( 'parses shortcode with unquoted attributes', function() { @@ -658,13 +664,26 @@ var shortcodeViewConstructor = { if ( matches[3] ) { var inner_content = currentShortcode.get( 'inner_content' ); - inner_content.set( 'value', matches[3] ); + inner_content.set( 'value', this.unAutoP( matches[3] ) ); } return currentShortcode; }, + /** + * Strip 'p' and 'br' tags, replace with line breaks. + * Reverse the effect of the WP editor autop functionality. + */ + unAutoP: function( content ) { + if ( switchEditors && switchEditors.pre_wpautop ) { + content = switchEditors.pre_wpautop( content ); + } + + return content; + + }, + // Backwards compatability for Pre WP 4.2. View: { diff --git a/js-tests/src/utils/mceViewConstructorSpec.js b/js-tests/src/utils/mceViewConstructorSpec.js index 5ecbc666..94e981f1 100644 --- a/js-tests/src/utils/mceViewConstructorSpec.js +++ b/js-tests/src/utils/mceViewConstructorSpec.js @@ -121,10 +121,10 @@ describe( "MCE View Constructor", function() { }); it( 'parses shortcode with content', function() { - var shortcode = MceViewConstructor.parseShortcodeString( '[test_shortcode attr="test value 1"]test content [/test_shortcode]') + var shortcode = MceViewConstructor.parseShortcodeString( '[test_shortcode attr="test value 1"]test content[/test_shortcode]') expect( shortcode instanceof Shortcode ).toEqual( true ); expect( shortcode.get( 'attrs' ).findWhere( { attr: 'attr' }).get('value') ).toEqual( 'test value 1' ); - expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( 'test content ' ); + expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( 'test content' ); }); it( 'parses shortcode with dashes in name and attribute', function() { @@ -134,10 +134,16 @@ describe( "MCE View Constructor", function() { }); // https://github.com/fusioneng/Shortcake/issues/171 - xit( 'parses shortcode with line breaks in inner content', function() { - var shortcode = MceViewConstructor.parseShortcodeString( "[test_shortcode]test \ncontent \r2 [/test_shortcode]") + it( 'parses shortcode with line breaks in inner content', function() { + var shortcode = MceViewConstructor.parseShortcodeString( "[test_shortcode]test \ntest \rtest[/test_shortcode]") expect( shortcode instanceof Shortcode ).toEqual( true ); - expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( "test \ncontent \r2 " ); + expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( "test \ntest \rtest" ); + } ); + + it( 'parses shortcode with paragraph and br tags in inner content', function() { + var shortcode = MceViewConstructor.parseShortcodeString( "[test_shortcode]

test

test
test

[/test_shortcode]") + expect( shortcode instanceof Shortcode ).toEqual( true ); + expect( shortcode.get( 'inner_content' ).get('value') ).toEqual( "test\n\ntest\ntest" ); } ); it( 'parses shortcode with unquoted attributes', function() { diff --git a/js-tests/vendor/wp-editors.js b/js-tests/vendor/wp-editors.js new file mode 100644 index 00000000..0b3e04b2 --- /dev/null +++ b/js-tests/vendor/wp-editors.js @@ -0,0 +1,324 @@ +/* global tinymce, tinyMCEPreInit, QTags, setUserSetting */ + +window.switchEditors = { + + switchto: function( el ) { + var aid = el.id, + l = aid.length, + id = aid.substr( 0, l - 5 ), + mode = aid.substr( l - 4 ); + + this.go( id, mode ); + }, + + // mode can be 'html', 'tmce', or 'toggle'; 'html' is used for the 'Text' editor tab. + go: function( id, mode ) { + var t = this, ed, wrap_id, txtarea_el, iframe, editorHeight, toolbarHeight, + DOM = tinymce.DOM; //DOMUtils outside the editor iframe + + id = id || 'content'; + mode = mode || 'toggle'; + + ed = tinymce.get( id ); + wrap_id = 'wp-' + id + '-wrap'; + txtarea_el = DOM.get( id ); + + if ( 'toggle' === mode ) { + if ( ed && ! ed.isHidden() ) { + mode = 'html'; + } else { + mode = 'tmce'; + } + } + + function getToolbarHeight() { + var node = DOM.select( '.mce-toolbar-grp', ed.getContainer() )[0], + height = node && node.clientHeight; + + if ( height && height > 10 && height < 200 ) { + return parseInt( height, 10 ); + } + + return 30; + } + + if ( 'tmce' === mode || 'tinymce' === mode ) { + if ( ed && ! ed.isHidden() ) { + return false; + } + + if ( typeof( QTags ) !== 'undefined' ) { + QTags.closeAllTags( id ); + } + + editorHeight = txtarea_el ? parseInt( txtarea_el.style.height, 10 ) : 0; + + if ( tinyMCEPreInit.mceInit[ id ] && tinyMCEPreInit.mceInit[ id ].wpautop ) { + txtarea_el.value = t.wpautop( txtarea_el.value ); + } + + if ( ed ) { + ed.show(); + + // No point resizing the iframe in iOS + if ( ! tinymce.Env.iOS && editorHeight ) { + toolbarHeight = getToolbarHeight(); + editorHeight = editorHeight - toolbarHeight + 14; + + // height cannot be under 50 or over 5000 + if ( editorHeight > 50 && editorHeight < 5000 ) { + ed.theme.resizeTo( null, editorHeight ); + } + } + } else { + tinymce.init( tinyMCEPreInit.mceInit[id] ); + } + + DOM.removeClass( wrap_id, 'html-active' ); + DOM.addClass( wrap_id, 'tmce-active' ); + DOM.setAttrib( txtarea_el, 'aria-hidden', true ); + setUserSetting( 'editor', 'tinymce' ); + + } else if ( 'html' === mode ) { + + if ( ed && ed.isHidden() ) { + return false; + } + + if ( ed ) { + if ( ! tinymce.Env.iOS ) { + iframe = DOM.get( id + '_ifr' ); + editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0; + + if ( editorHeight ) { + toolbarHeight = getToolbarHeight(); + editorHeight = editorHeight + toolbarHeight - 14; + + // height cannot be under 50 or over 5000 + if ( editorHeight > 50 && editorHeight < 5000 ) { + txtarea_el.style.height = editorHeight + 'px'; + } + } + } + + ed.hide(); + } else { + // The TinyMCE instance doesn't exist, run the content through 'pre_wpautop()' and show the textarea + if ( tinyMCEPreInit.mceInit[ id ] && tinyMCEPreInit.mceInit[ id ].wpautop ) { + txtarea_el.value = t.pre_wpautop( txtarea_el.value ); + } + + DOM.setStyles( txtarea_el, {'display': '', 'visibility': ''} ); + } + + DOM.removeClass( wrap_id, 'tmce-active' ); + DOM.addClass( wrap_id, 'html-active' ); + DOM.setAttrib( txtarea_el, 'aria-hidden', false ); + setUserSetting( 'editor', 'html' ); + } + return false; + }, + + _wp_Nop: function( content ) { + var blocklist1, blocklist2, + preserve_linebreaks = false, + preserve_br = false; + + // Protect pre|script tags + if ( content.indexOf( ']*>[\s\S]+?<\/\1>/g, function( a ) { + a = a.replace( /
(\r\n|\n)?/g, '' ); + a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '' ); + return a.replace( /\r?\n/g, '' ); + }); + } + + // keep
tags inside captions and remove line breaks + if ( content.indexOf( '[caption' ) !== -1 ) { + preserve_br = true; + content = content.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) { + return a.replace( /]*)>/g, '' ).replace( /[\r\n\t]+/, '' ); + }); + } + + // Pretty it up for the source editor + blocklist1 = 'blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|div|h[1-6]|p|fieldset'; + content = content.replace( new RegExp( '\\s*\\s*', 'g' ), '\n' ); + content = content.replace( new RegExp( '\\s*<((?:' + blocklist1 + ')(?: [^>]*)?)>', 'g' ), '\n<$1>' ); + + // Mark

if it has any attributes. + content = content.replace( /(

]+>.*?)<\/p>/g, '$1' ); + + // Separate

containing

+ content = content.replace( /]*)?>\s*

/gi, '\n\n' ); + + // Remove

and
+ content = content.replace( /\s*

/gi, '' ); + content = content.replace( /\s*<\/p>\s*/gi, '\n\n' ); + content = content.replace( /\n[\s\u00a0]+\n/g, '\n\n' ); + content = content.replace( /\s*
\s*/gi, '\n' ); + + // Fix some block element newline issues + content = content.replace( /\s*

\s*/g, '
\n' ); + content = content.replace( /\s*\[caption([^\[]+)\[\/caption\]\s*/gi, '\n\n[caption$1[/caption]\n\n' ); + content = content.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' ); + + blocklist2 = 'blockquote|ul|ol|li|table|thead|tbody|tfoot|tr|th|td|h[1-6]|pre|fieldset'; + content = content.replace( new RegExp('\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ), '\n<$1>' ); + content = content.replace( new RegExp('\\s*\\s*', 'g' ), '\n' ); + content = content.replace( /]*)>/g, '\t' ); + + if ( content.indexOf( '/g, '\n' ); + } + + if ( content.indexOf( ']*)?>\s*/g, '\n\n\n\n' ); + } + + if ( content.indexOf( '/g, function( a ) { + return a.replace( /[\r\n]+/g, '' ); + }); + } + + // Unmark special paragraph closing tags + content = content.replace( /<\/p#>/g, '

\n' ); + content = content.replace( /\s*(

]+>[\s\S]*?<\/p>)/g, '\n$1' ); + + // Trim whitespace + content = content.replace( /^\s+/, '' ); + content = content.replace( /[\s\u00a0]+$/, '' ); + + // put back the line breaks in pre|script + if ( preserve_linebreaks ) { + content = content.replace( //g, '\n' ); + } + + // and the
tags in captions + if ( preserve_br ) { + content = content.replace( /]*)>/g, '' ); + } + + return content; + }, + + _wp_Autop: function(pee) { + var preserve_linebreaks = false, + preserve_br = false, + blocklist = 'table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre' + + '|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section' + + '|article|aside|hgroup|header|footer|nav|figure|details|menu|summary'; + + if ( pee.indexOf( '/g, function( a ) { + return a.replace( /[\r\n]+/g, '' ); + }); + } + + pee = pee.replace( /<[^<>]+>/g, function( a ){ + return a.replace( /[\r\n]+/g, ' ' ); + }); + + // Protect pre|script tags + if ( pee.indexOf( ']*>[\s\S]+?<\/\1>/g, function( a ) { + return a.replace( /(\r\n|\n)/g, '' ); + }); + } + + // keep
tags inside captions and convert line breaks + if ( pee.indexOf( '[caption' ) !== -1 ) { + preserve_br = true; + pee = pee.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) { + // keep existing
+ a = a.replace( /]*)>/g, '' ); + // no line breaks inside HTML tags + a = a.replace( /<[a-zA-Z0-9]+( [^<>]+)?>/g, function( b ) { + return b.replace( /[\r\n\t]+/, ' ' ); + }); + // convert remaining line breaks to
+ return a.replace( /\s*\n\s*/g, '' ); + }); + } + + pee = pee + '\n\n'; + pee = pee.replace( /
\s*
/gi, '\n\n' ); + pee = pee.replace( new RegExp( '(<(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '\n$1' ); + pee = pee.replace( new RegExp( '()', 'gi' ), '$1\n\n' ); + pee = pee.replace( /]*)?>/gi, '\n\n' ); // hr is self closing block element + pee = pee.replace( /\s*' ); + pee = pee.replace( /\r\n|\r/g, '\n' ); + pee = pee.replace( /\n\s*\n+/g, '\n\n' ); + pee = pee.replace( /([\s\S]+?)\n\n/g, '

$1

\n' ); + pee = pee.replace( /

\s*?<\/p>/gi, ''); + pee = pee.replace( new RegExp( '

\\s*(]*)?>)\\s*

', 'gi' ), '$1' ); + pee = pee.replace( /

(/gi, '$1'); + pee = pee.replace( /

\s*]*)>/gi, '

'); + pee = pee.replace( /<\/blockquote>\s*<\/p>/gi, '

'); + pee = pee.replace( new RegExp( '

\\s*(]*)?>)', 'gi' ), '$1' ); + pee = pee.replace( new RegExp( '(]*)?>)\\s*

', 'gi' ), '$1' ); + pee = pee.replace( /\s*\n/gi, '
\n'); + pee = pee.replace( new RegExp( '(]*>)\\s*
', 'gi' ), '$1' ); + pee = pee.replace( /
(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)>)/gi, '$1' ); + pee = pee.replace( /(?:

|
)*\s*\[caption([^\[]+)\[\/caption\]\s*(?:<\/p>|
)*/gi, '[caption$1[/caption]' ); + + pee = pee.replace( /(<(?:div|th|td|form|fieldset|dd)[^>]*>)(.*?)<\/p>/g, function( a, b, c ) { + if ( c.match( /]*)?>/ ) ) { + return a; + } + + return b + '

' + c + '

'; + }); + + // put back the line breaks in pre|script + if ( preserve_linebreaks ) { + pee = pee.replace( //g, '\n' ); + } + + if ( preserve_br ) { + pee = pee.replace( /]*)>/g, '' ); + } + + return pee; + }, + + pre_wpautop: function( content ) { + var t = this, o = { o: t, data: content, unfiltered: content }, + q = typeof( jQuery ) !== 'undefined'; + + if ( q ) { + jQuery( 'body' ).trigger( 'beforePreWpautop', [ o ] ); + } + + o.data = t._wp_Nop( o.data ); + + if ( q ) { + jQuery('body').trigger('afterPreWpautop', [ o ] ); + } + + return o.data; + }, + + wpautop: function( pee ) { + var t = this, o = { o: t, data: pee, unfiltered: pee }, + q = typeof( jQuery ) !== 'undefined'; + + if ( q ) { + jQuery( 'body' ).trigger('beforeWpautop', [ o ] ); + } + + o.data = t._wp_Autop( o.data ); + + if ( q ) { + jQuery( 'body' ).trigger('afterWpautop', [ o ] ); + } + + return o.data; + } +}; diff --git a/js/build/shortcode-ui.js b/js/build/shortcode-ui.js index cd9d2739..f62fef7e 100644 --- a/js/build/shortcode-ui.js +++ b/js/build/shortcode-ui.js @@ -448,13 +448,26 @@ var shortcodeViewConstructor = { if ( matches[3] ) { var inner_content = currentShortcode.get( 'inner_content' ); - inner_content.set( 'value', matches[3] ); + inner_content.set( 'value', this.unAutoP( matches[3] ) ); } return currentShortcode; }, + /** + * Strip 'p' and 'br' tags, replace with line breaks. + * Reverse the effect of the WP editor autop functionality. + */ + unAutoP: function( content ) { + if ( switchEditors && switchEditors.pre_wpautop ) { + content = switchEditors.pre_wpautop( content ); + } + + return content; + + }, + // Backwards compatability for Pre WP 4.2. View: { diff --git a/js/src/utils/shortcode-view-constructor.js b/js/src/utils/shortcode-view-constructor.js index 961c0d3e..6876d486 100644 --- a/js/src/utils/shortcode-view-constructor.js +++ b/js/src/utils/shortcode-view-constructor.js @@ -184,13 +184,26 @@ var shortcodeViewConstructor = { if ( matches[3] ) { var inner_content = currentShortcode.get( 'inner_content' ); - inner_content.set( 'value', matches[3] ); + inner_content.set( 'value', this.unAutoP( matches[3] ) ); } return currentShortcode; }, + /** + * Strip 'p' and 'br' tags, replace with line breaks. + * Reverse the effect of the WP editor autop functionality. + */ + unAutoP: function( content ) { + if ( switchEditors && switchEditors.pre_wpautop ) { + content = switchEditors.pre_wpautop( content ); + } + + return content; + + }, + // Backwards compatability for Pre WP 4.2. View: {