Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-22 21:04:57 +02:00
Code Issues Projects Releases Wiki Activity

Add JavaScript methods for handling shortcodes.

Browse Source 
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: http://core.svn.wordpress.org/trunk@22004 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Daryl Koopersmith 2012-09-26 01:00:08 +00:00
parent ebb0bdbf9c
commit 9186ea913c
5 changed files with 340 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
wp-includes/js/mce-view.js
View File

@ -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"></' + tag + '>';
// 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"></' + tag + '>';
},
// ### 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));
}(jQuery));

215
wp-includes/js/shortcode.js Normal file
View File

@ -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 + ']';
}
});
}());

0
wp-includes/js/shortcode.min.js vendored Normal file
View File

5
wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css
View File

@ -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;
}

3
wp-includes/script-loader.php
View File

@ -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' ) );