From c133581a81442ef8a041320e786b366b960fb814 Mon Sep 17 00:00:00 2001 From: Daryl Koopersmith Date: Wed, 26 Sep 2012 01:00:08 +0000 Subject: [PATCH] Add JavaScript methods for handling shortcodes. Adds `wp.shortcode`, a set of methods used for parsing shortcodes out of content. Also adds a default set of shortcode properties to `wp.mce.view`. fixes #21996, see #21812, #21813, #21815. git-svn-id: https://develop.svn.wordpress.org/trunk@22004 602fd350-edb4-49c9-b593-d223f7449a82 --- wp-includes/js/mce-view.js | 148 +++++++++--- wp-includes/js/shortcode.js | 215 ++++++++++++++++++ wp-includes/js/shortcode.min.js | 0 .../advanced/skins/wp_theme/content.css | 5 +- wp-includes/script-loader.php | 3 +- 5 files changed, 340 insertions(+), 31 deletions(-) create mode 100644 wp-includes/js/shortcode.js create mode 100644 wp-includes/js/shortcode.min.js diff --git a/wp-includes/js/mce-view.js b/wp-includes/js/mce-view.js index a1954a6c13..a42641f246 100644 --- a/wp-includes/js/mce-view.js +++ b/wp-includes/js/mce-view.js @@ -1,3 +1,4 @@ +// Ensure the global `wp` object exists. if ( typeof wp === 'undefined' ) var wp = {}; @@ -5,45 +6,94 @@ if ( typeof wp === 'undefined' ) var views = {}, instances = {}; - wp.mce = {}; + // Create the `wp.mce` object if necessary. + wp.mce = wp.mce || {}; + // wp.mce.view + // ----------- + // + // A set of utilities that simplifies adding custom UI within a TinyMCE editor. + // At its core, it serves as a series of converters, transforming text to a + // custom UI, and back again. wp.mce.view = { + // ### defaults // The default properties used for the objects in `wp.mce.view.add()`. defaults: { view: Backbone.View, text: function( instance ) { return instance.options.original; + }, + + toView: function( content ) { + if ( ! this.pattern ) + return; + + this.pattern.lastIndex = 0; + var match = this.pattern.exec( content ); + + if ( ! match ) + return; + + return { + index: match.index, + content: match[0], + options: { + original: match[0], + results: _.toArray( arguments ) + } + }; } }, + shortcode: { + view: Backbone.View, + text: function( instance ) { + return instance.options.shortcode.text(); + }, + + toView: function( content ) { + var match = wp.shortcode.next( this.tag, content ); + + if ( ! match ) + return; + + return { + index: match.index, + content: match.content, + options: { + shortcode: match.shortcode + } + }; + } + }, + + // ### add( id, options ) // Registers a new TinyMCE view. // // Accepts a unique `id` and an `options` object. // // `options` accepts the following properties: // - // `pattern` is the regular expression used to scan the content and + // * `pattern` is the regular expression used to scan the content and // detect matching views. // - // `view` is a `Backbone.View` constructor. If a plain object is + // * `view` is a `Backbone.View` constructor. If a plain object is // provided, it will automatically extend the parent constructor // (usually `Backbone.View`). Views are instantiated when the `pattern` // is successfully matched. The instance's `options` object is provided // with the `original` matched value, the match `results` including // capture groups, and the `viewType`, which is the constructor's `id`. // - // `extend` an existing view by passing in its `id`. The current + // * `extend` an existing view by passing in its `id`. The current // view will inherit all properties from the parent view, and if // `view` is set to a plain object, it will extend the parent `view` // constructor. // - // `text` is a method that accepts an instance of the `view` + // * `text` is a method that accepts an instance of the `view` // constructor and transforms it into a text representation. add: function( id, options ) { - var parent; - // Fetch the parent view or the default options. - parent = options.extend ? wp.mce.view.get( options.extend ) : wp.mce.view.defaults; + var parent = options.extend ? wp.mce.view.get( options.extend ) : wp.mce.view.defaults; // Extend the `options` object with the parent's properties. _.defaults( options, parent ); @@ -58,52 +108,93 @@ if ( typeof wp === 'undefined' ) views[ id ] = options; }, + // ### get( id ) // Returns a TinyMCE view options object. get: function( id ) { return views[ id ]; }, + // ### remove( id ) // Unregisters a TinyMCE view. remove: function( id ) { delete views[ id ]; }, + // ### toViews( content ) // Scans a `content` string for each view's pattern, replacing any // matches with wrapper elements, and creates a new view instance for // every match. // // To render the views, call `wp.mce.view.render( scope )`. toViews: function( content ) { + var pieces = [ { content: content } ], + current; + _.each( views, function( view, viewType ) { - if ( ! view.pattern ) - return; + current = pieces.slice(); + pieces = []; - // Scan for matches. - content = content.replace( view.pattern, function( match ) { - var instance, id, tag; + _.each( current, function( piece ) { + var remaining = piece.content, + result; - // Create a new view instance. - instance = new view.view({ - original: match, - results: _.toArray( arguments ), - viewType: viewType - }); + // Ignore processed pieces, but retain their location. + if ( piece.processed ) { + pieces.push( piece ); + return; + } - // Use the view's `id` if it already exists. Otherwise, - // create a new `id`. - id = instance.el.id = instance.el.id || _.uniqueId('__wpmce-'); - instances[ id ] = instance; + // Iterate through the string progressively matching views + // and slicing the string as we go. + while ( remaining && (result = view.toView( remaining )) ) { + // Any text before the match becomes an unprocessed piece. + if ( result.index ) + pieces.push({ content: remaining.substring( 0, result.index ) }); - // If the view is a span, wrap it in a span. - tag = 'span' === instance.tagName ? 'span' : 'div'; + // Add the processed piece for the match. + pieces.push({ + content: wp.mce.view.toView( viewType, result.options ), + processed: true + }); - return '<' + tag + ' class="wp-view-wrap" data-wp-view="' + id + '" contenteditable="false">'; + // Update the remaining content. + remaining = remaining.slice( result.index + result.content.length ); + } + + // There are no additional matches. If any content remains, + // add it as an unprocessed piece. + if ( remaining ) + pieces.push({ content: remaining }); }); }); - return content; + return _.pluck( pieces, 'content' ).join(''); }, + toView: function( viewType, options ) { + var view = wp.mce.view.get( viewType ), + instance, id, tag; + + if ( ! view ) + return ''; + + // Create a new view instance. + instance = new view.view( _.extend( options || {}, { + viewType: viewType + }) ); + + // Use the view's `id` if it already exists. Otherwise, + // create a new `id`. + id = instance.el.id = instance.el.id || _.uniqueId('__wpmce-'); + instances[ id ] = instance; + + // If the view is a span, wrap it in a span. + tag = 'span' === instance.tagName ? 'span' : 'div'; + + return '<' + tag + ' class="wp-view-wrap" data-wp-view="' + id + '" contenteditable="false">'; + }, + + // ### render( scope ) // Renders any view instances inside a DOM node `scope`. // // View instances are detected by the presence of wrapper elements. @@ -130,6 +221,7 @@ if ( typeof wp === 'undefined' ) }); }, + // ### toText( content ) // Scans an HTML `content` string and replaces any view instances with // their respective text representations. toText: function( content ) { @@ -145,4 +237,4 @@ if ( typeof wp === 'undefined' ) } }; -}(jQuery)); \ No newline at end of file +}(jQuery)); diff --git a/wp-includes/js/shortcode.js b/wp-includes/js/shortcode.js new file mode 100644 index 0000000000..98c05fa7c0 --- /dev/null +++ b/wp-includes/js/shortcode.js @@ -0,0 +1,215 @@ +// Utility functions for parsing and handling shortcodes in Javascript. + +// Ensure the global `wp` object exists. +if ( typeof wp === 'undefined' ) + var wp = {}; + +(function(){ + wp.shortcode = { + // ### Find the next matching shortcode + // + // Given a shortcode `tag`, a block of `text, and an optional starting + // `index`, returns the next matching shortcode or `undefined`. + // + // Shortcodes are formatted as an object that contains the match + // `content`, the matching `index`, and the parsed `shortcode` object. + next: function( tag, text, index ) { + var re = wp.shortcode.regexp( tag ), + match, result; + + re.lastIndex = index || 0; + match = re.exec( text ); + + if ( ! match ) + return; + + // If we matched an escaped shortcode, try again. + if ( match[1] === '[' && match[6] === ']' ) + return wp.shortcode.next( tag, text, re.lastIndex ); + + result = { + index: match.index, + content: match[0], + shortcode: new wp.shortcode.Match( match ) + }; + + // If we matched a leading `[`, strip it from the match + // and increment the index accordingly. + if ( match[1] ) { + result.match = result.match.slice( 1 ); + result.index++; + } + + // If we matched a trailing `]`, strip it from the match. + if ( match[6] ) + result.match = result.match.slice( 0, -1 ); + + return result; + }, + + // ### Replace matching shortcodes in a block of text. + // + // Accepts a shortcode `tag`, content `text` to scan, and a `callback` + // to process the shortcode matches and return a replacement string. + // Returns the `text` with all shortcodes replaced. + // + // Shortcode matches are objects that contain the shortcode `tag`, + // a shortcode `attrs` object, the `content` between shortcode tags, + // and a boolean flag to indicate if the match was a `single` tag. + replace: function( tag, text, callback ) { + return text.replace( wp.shortcode.regexp( tag ), function( match, left, tag, attrs, closing, content, right, offset ) { + // If both extra brackets exist, the shortcode has been + // properly escaped. + if ( left === '[' && right === ']' ) + return match; + + // Create the match object and pass it through the callback. + var result = callback( new wp.shortcode.Match( arguments ) ); + + // Make sure to return any of the extra brackets if they + // weren't used to escape the shortcode. + return result ? left + result + right : match; + }); + }, + + // ### Generate a shortcode RegExp. + // + // The base regex is functionally equivalent to the one found in + // `get_shortcode_regex()` in `wp-includes/shortcodes.php`. + // + // Capture groups: + // + // 1. An extra `[` to allow for escaping shortcodes with double `[[]]` + // 2. The shortcode name + // 3. The shortcode argument list + // 4. The self closing `/` + // 5. The content of a shortcode when it wraps some content. + // 6. An extra `]` to allow for escaping shortcodes with double `[[]]` + regexp: _.memoize( function( tag ) { + return new RegExp( '\\[(\\[?)(' + tag + ')\\b([^\\]\\/]*(?:\\/(?!\\])[^\\]\\/]*)*?)(?:(\\/)\\]|\\](?:([^\\[]*(?:\\[(?!\\/\\2\\])[^\\[]*)*)\\[\\/\\2\\])?)(\\]?)', 'g' ); + }), + + + // ### Parse shortcode attributes. + // + // Shortcodes accept many types of attributes. These can chiefly be + // divided into named and numeric attributes: + // + // Named attributes are assigned on a key/value basis, while numeric + // attributes are treated as an array. + // + // Named attributes can be formatted as either `name="value"`, + // `name='value'`, or `name=value`. Numeric attributes can be formatted + // as `"value"` or just `value`. + attrs: _.memoize( function( text ) { + var named = {}, + numeric = [], + pattern, match; + + // This regular expression is reused from `shortcode_parse_atts()` + // in `wp-includes/shortcodes.php`. + // + // Capture groups: + // + // 1. An attribute name, that corresponds to... + // 2. a value in double quotes. + // 3. An attribute name, that corresponds to... + // 4. a value in single quotes. + // 5. An attribute name, that corresponds to... + // 6. an unquoted value. + // 7. A numeric attribute in double quotes. + // 8. An unquoted numeric attribute. + pattern = /(\w+)\s*=\s*"([^"]*)"(?:\s|$)|(\w+)\s*=\s*\'([^\']*)\'(?:\s|$)|(\w+)\s*=\s*([^\s\'"]+)(?:\s|$)|"([^"]*)"(?:\s|$)|(\S+)(?:\s|$)/g; + + // Map zero-width spaces to actual spaces. + text = text.replace( /[\u00a0\u200b]/g, ' ' ); + + // Match and normalize attributes. + while ( (match = pattern.exec( text )) ) { + if ( match[1] ) { + named[ match[1].toLowerCase() ] = match[2]; + } else if ( match[3] ) { + named[ match[3].toLowerCase() ] = match[4]; + } else if ( match[5] ) { + named[ match[5].toLowerCase() ] = match[6]; + } else if ( match[7] ) { + numeric.push( match[7] ); + } else if ( match[8] ) { + numeric.push( match[8] ); + } + } + + return { + named: named, + numeric: numeric + }; + }) + }; + + + // Shortcode Matches + // ----------------- + // + // Shortcode matches are generated automatically when using + // `wp.shortcode.next()` and `wp.shortcode.replace()`. These two methods + // should handle most shortcode needs. + // + // Accepts a `match` object from calling `regexp.exec()` on a `RegExp` + // generated by `wp.shortcode.regexp()`. `match` can also be set to the + // `arguments` from a callback passed to `regexp.replace()`. + wp.shortcode.Match = function( match ) { + this.tag = match[2]; + this.attrs = wp.shortcode.attrs( match[3] ); + this.single = !! match[4]; + this.content = match[5]; + }; + + _.extend( wp.shortcode.Match.prototype, { + // ### Get a shortcode attribute. + // + // Automatically detects whether `attr` is named or numeric and routes + // it accordingly. + get: function( attr ) { + return this.attrs[ _.isNumber( attr ) ? 'numeric' : 'named' ][ attr ]; + }, + + // ### Set a shortcode attribute. + // + // Automatically detects whether `attr` is named or numeric and routes + // it accordingly. + set: function( attr, value ) { + this.attrs[ _.isNumber( attr ) ? 'numeric' : 'named' ][ attr ] = value; + return this; + }, + + // ### Transform the shortcode match into text. + text: function() { + var text = '[' + this.tag; + + _.each( this.attrs.numeric, function( value ) { + if ( /\s/.test( value ) ) + text += ' "' + value + '"'; + else + text += ' ' + value; + }); + + _.each( this.attrs.named, function( value, name ) { + text += ' ' + name + '="' + value + '"'; + }); + + // If the tag is marked as singular, self-close the tag and + // ignore any additional content. + if ( this.single ) + return text + ' /]'; + + // Complete the opening tag. + text += ']'; + + if ( this.content ) + text += this.content; + + // Add the closing tag. + return text + '[/' + this.tag + ']'; + } + }); +}()); diff --git a/wp-includes/js/shortcode.min.js b/wp-includes/js/shortcode.min.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css b/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css index 246cdf929d..807cf9b05d 100644 --- a/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css +++ b/wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css @@ -142,6 +142,7 @@ img.wp-oembed { } /* WordPress TinyMCE Previews */ -div.wp-preview-wrap { - display: inline; +div.wp-view-wrap, +div.wp-view { + display: inline-block; } diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index 01a3dec4ea..d7f5948326 100644 --- a/wp-includes/script-loader.php +++ b/wp-includes/script-loader.php @@ -322,7 +322,8 @@ function wp_default_scripts( &$scripts ) { 'selectMediaMultiple' => __( 'Select one or more media files:' ), ) ); - $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'backbone', 'jquery' ), false, 1 ); + $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 ); + $scripts->add( 'mce-view', "/wp-includes/js/mce-view$suffix.js", array( 'shortcode', 'backbone', 'jquery' ), false, 1 ); if ( is_admin() ) { $scripts->add( 'ajaxcat', "/wp-admin/js/cat$suffix.js", array( 'wp-lists' ) );