Archived
Updates
This commit is contained in:
1 parent
70d2335bba
commit
7428b67da5
1086 files changed
+94145
-59082
No files matched your search
@@ -4,7 +4,8 @@
|
||||
* WordPress View plugin.
|
||||
*/
|
||||
tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
var selected,
|
||||
var $ = editor.$,
|
||||
selected,
|
||||
Env = tinymce.Env,
|
||||
VK = tinymce.util.VK,
|
||||
TreeWalker = tinymce.dom.TreeWalker,
|
||||
@@ -12,7 +13,13 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
firstFocus = true,
|
||||
_noop = function() { return false; },
|
||||
isios = /iPad|iPod|iPhone/.test( navigator.userAgent ),
|
||||
cursorInterval, lastKeyDownNode, setViewCursorTries, focus, execCommandView, execCommandBefore;
|
||||
cursorInterval,
|
||||
lastKeyDownNode,
|
||||
setViewCursorTries,
|
||||
focus,
|
||||
execCommandView,
|
||||
execCommandBefore,
|
||||
toolbar;
|
||||
|
||||
function getView( node ) {
|
||||
return getParent( node, 'wpview-wrap' );
|
||||
@@ -34,37 +41,6 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the text/shortcode string for a view.
|
||||
*
|
||||
* @param view The view wrapper's node
|
||||
* @returns string The text/shoercode string of the view
|
||||
*/
|
||||
function getViewText( view ) {
|
||||
if ( view = getView( view ) ) {
|
||||
return window.decodeURIComponent( editor.dom.getAttrib( view, 'data-wpview-text' ) || '' );
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the view's original text/shortcode string
|
||||
*
|
||||
* @param view The view wrapper's HTML id or node
|
||||
* @param text The text string to be set
|
||||
*/
|
||||
function setViewText( view, text ) {
|
||||
view = getView( view );
|
||||
|
||||
if ( view ) {
|
||||
editor.dom.setAttrib( view, 'data-wpview-text', window.encodeURIComponent( text || '' ) );
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function _stop( event ) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
@@ -103,11 +79,9 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
}
|
||||
|
||||
function removeView( view ) {
|
||||
// TODO: trigger an event to run a clean up function.
|
||||
// Maybe `jQuery( view ).trigger( 'remove' );`?
|
||||
editor.undoManager.transact( function() {
|
||||
handleEnter( view );
|
||||
editor.dom.remove( view );
|
||||
wp.mce.views.remove( editor, view );
|
||||
});
|
||||
}
|
||||
|
||||
@@ -115,36 +89,37 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
var clipboard,
|
||||
dom = editor.dom;
|
||||
|
||||
// Bail if node is already selected.
|
||||
if ( ! viewNode || viewNode === selected ) {
|
||||
if ( ! viewNode ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Make sure that the editor is focused.
|
||||
// It is possible that the editor is not focused when the mouse event fires
|
||||
// without focus, the selection will not work properly.
|
||||
editor.getBody().focus();
|
||||
if ( viewNode !== selected ) {
|
||||
// Make sure that the editor is focused.
|
||||
// It is possible that the editor is not focused when the mouse event fires
|
||||
// without focus, the selection will not work properly.
|
||||
editor.getBody().focus();
|
||||
|
||||
deselect();
|
||||
selected = viewNode;
|
||||
dom.setAttrib( viewNode, 'data-mce-selected', 1 );
|
||||
deselect();
|
||||
selected = viewNode;
|
||||
dom.setAttrib( viewNode, 'data-mce-selected', 1 );
|
||||
|
||||
clipboard = dom.create( 'div', {
|
||||
'class': 'wpview-clipboard',
|
||||
'contenteditable': 'true'
|
||||
}, getViewText( viewNode ) );
|
||||
clipboard = dom.create( 'div', {
|
||||
'class': 'wpview-clipboard',
|
||||
'contenteditable': 'true'
|
||||
}, wp.mce.views.getText( viewNode ) );
|
||||
|
||||
editor.dom.select( '.wpview-body', viewNode )[0].appendChild( clipboard );
|
||||
editor.dom.select( '.wpview-body', viewNode )[0].appendChild( clipboard );
|
||||
|
||||
// Both of the following are necessary to prevent manipulating the selection/focus
|
||||
dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
|
||||
dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
|
||||
// Both of the following are necessary to prevent manipulating the selection/focus
|
||||
dom.bind( clipboard, 'beforedeactivate focusin focusout', _stop );
|
||||
dom.bind( selected, 'beforedeactivate focusin focusout', _stop );
|
||||
|
||||
// select the hidden div
|
||||
if ( isios ) {
|
||||
editor.selection.select( clipboard );
|
||||
} else {
|
||||
editor.selection.select( clipboard, true );
|
||||
// select the hidden div
|
||||
if ( isios ) {
|
||||
editor.selection.select( clipboard );
|
||||
} else {
|
||||
editor.selection.select( clipboard, true );
|
||||
}
|
||||
}
|
||||
|
||||
editor.nodeChanged();
|
||||
@@ -173,21 +148,23 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
// Check if the `wp.mce` API exists.
|
||||
if ( typeof wp === 'undefined' || ! wp.mce ) {
|
||||
return {
|
||||
getViewText: _noop,
|
||||
setViewText: _noop,
|
||||
getView: _noop
|
||||
};
|
||||
}
|
||||
|
||||
// Remove the content of view wrappers from HTML string
|
||||
function emptyViews( content ) {
|
||||
return content.replace(/<div[^>]+data-wpview-text=\"([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>(?: |\u00a0)*<\/p><\/div>/g, '$1' );
|
||||
content = content.replace( /<div[^>]+data-wpview-text="([^"]+)"[^>]*>[\s\S]+?wpview-selection-after[^>]+>[^<>]*<\/p>\s*<\/div>/g, function( all, match ) {
|
||||
return '<p>' + window.decodeURIComponent( match ) + '</p>';
|
||||
});
|
||||
|
||||
return content.replace( / data-wpview-marker="[^"]+"/g, '' );
|
||||
}
|
||||
|
||||
// Prevent adding undo levels on changes inside a view wrapper
|
||||
editor.on( 'BeforeAddUndo', function( event ) {
|
||||
if ( event.lastLevel && emptyViews( event.level.content ) === emptyViews( event.lastLevel.content ) ) {
|
||||
event.preventDefault();
|
||||
if ( event.level.content ) {
|
||||
event.level.content = emptyViews( event.level.content );
|
||||
}
|
||||
});
|
||||
|
||||
@@ -197,23 +174,49 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
editor.on( 'BeforeSetContent', function( event ) {
|
||||
var node;
|
||||
|
||||
if ( ! event.selection ) {
|
||||
wp.mce.views.unbind();
|
||||
}
|
||||
|
||||
if ( ! event.content ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( selected ) {
|
||||
removeView( selected );
|
||||
if ( ! event.load ) {
|
||||
if ( selected ) {
|
||||
removeView( selected );
|
||||
}
|
||||
|
||||
node = editor.selection.getNode();
|
||||
|
||||
if ( node && node !== editor.getBody() && /^\s*https?:\/\/\S+\s*$/i.test( event.content ) ) {
|
||||
// When a url is pasted or inserted, only try to embed it when it is in an empty paragrapgh.
|
||||
node = editor.dom.getParent( node, 'p' );
|
||||
|
||||
if ( node && /^[\s\uFEFF\u00A0]*$/.test( $( node ).text() || '' ) ) {
|
||||
// Make sure there are no empty inline elements in the <p>
|
||||
node.innerHTML = '';
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
node = editor.selection.getNode();
|
||||
event.content = wp.mce.views.setMarkers( event.content );
|
||||
});
|
||||
|
||||
// When a url is pasted, only try to embed it when pasted in an empty paragrapgh.
|
||||
if ( event.content.match( /^\s*(https?:\/\/[^\s"]+)\s*$/i ) &&
|
||||
( node.nodeName !== 'P' || node.parentNode !== editor.getBody() || ! editor.dom.isEmpty( node ) ) ) {
|
||||
return;
|
||||
// When pasting strip all tags and check if the string is an URL.
|
||||
// Then replace the pasted content with the cleaned URL.
|
||||
editor.on( 'pastePreProcess', function( event ) {
|
||||
var pastedStr = event.content;
|
||||
|
||||
if ( pastedStr ) {
|
||||
pastedStr = tinymce.trim( pastedStr.replace( /<[^>]+>/g, '' ) );
|
||||
|
||||
if ( /^https?:\/\/\S+$/i.test( pastedStr ) ) {
|
||||
event.content = pastedStr;
|
||||
}
|
||||
}
|
||||
|
||||
event.content = wp.mce.views.toViews( event.content );
|
||||
});
|
||||
|
||||
// When the editor's content has been updated and the DOM has been
|
||||
@@ -229,10 +232,15 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
body = editor.getBody(),
|
||||
bodyRect = body.getBoundingClientRect(),
|
||||
first = body.firstChild,
|
||||
firstRect = first.getBoundingClientRect(),
|
||||
last = body.lastChild,
|
||||
lastRect = last.getBoundingClientRect(),
|
||||
view;
|
||||
firstRect, lastRect, view;
|
||||
|
||||
if ( ! first || ! last ) {
|
||||
return;
|
||||
}
|
||||
|
||||
firstRect = first.getBoundingClientRect();
|
||||
lastRect = last.getBoundingClientRect();
|
||||
|
||||
if ( y < firstRect.top && ( view = getView( first ) ) ) {
|
||||
setViewCursor( true, view );
|
||||
@@ -240,10 +248,14 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
} else if ( y > lastRect.bottom && ( view = getView( last ) ) ) {
|
||||
setViewCursor( false, view );
|
||||
event.preventDefault();
|
||||
} else {
|
||||
} else if ( x < bodyRect.left || x > bodyRect.right ) {
|
||||
tinymce.each( editor.dom.select( '.wpview-wrap' ), function( view ) {
|
||||
var rect = view.getBoundingClientRect();
|
||||
|
||||
if ( y < rect.top ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( y >= rect.top && y <= rect.bottom ) {
|
||||
if ( x < bodyRect.left ) {
|
||||
setViewCursor( true, view );
|
||||
@@ -252,7 +264,8 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
setViewCursor( false, view );
|
||||
event.preventDefault();
|
||||
}
|
||||
return;
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -304,17 +317,6 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
event.stopImmediatePropagation();
|
||||
event.preventDefault();
|
||||
|
||||
if ( ( event.type === 'touchend' || event.type === 'mousedown' ) && ! event.metaKey && ! event.ctrlKey ) {
|
||||
if ( editor.dom.hasClass( event.target, 'edit' ) ) {
|
||||
wp.mce.views.edit( view );
|
||||
editor.focus();
|
||||
return false;
|
||||
} else if ( editor.dom.hasClass( event.target, 'remove' ) ) {
|
||||
removeView( view );
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
if ( event.type === 'touchend' && scrolled ) {
|
||||
scrolled = false;
|
||||
} else {
|
||||
@@ -346,22 +348,31 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
}
|
||||
});
|
||||
|
||||
editor.on( 'PreProcess', function( event ) {
|
||||
// Empty the wpview wrap nodes
|
||||
tinymce.each( editor.dom.select( 'div[data-wpview-text]', event.node ), function( node ) {
|
||||
node.textContent = node.innerText = '\u00a0';
|
||||
});
|
||||
});
|
||||
function resetViews( rootNode ) {
|
||||
// Replace view nodes
|
||||
$( 'div[data-wpview-text]', rootNode ).each( function( i, node ) {
|
||||
var $node = $( node ),
|
||||
text = window.decodeURIComponent( $node.attr( 'data-wpview-text' ) || '' );
|
||||
|
||||
editor.on( 'PostProcess', function( event ) {
|
||||
if ( event.content ) {
|
||||
event.content = event.content.replace( /<div [^>]*?data-wpview-text="([^"]*)"[^>]*>[\s\S]*?<\/div>/g, function( match, shortcode ) {
|
||||
if ( shortcode ) {
|
||||
return '<p>' + window.decodeURIComponent( shortcode ) + '</p>';
|
||||
}
|
||||
return ''; // If error, remove the view wrapper
|
||||
});
|
||||
}
|
||||
if ( text && node.parentNode ) {
|
||||
$node.replaceWith( $( editor.dom.create('p') ).text( text ) );
|
||||
}
|
||||
});
|
||||
|
||||
// Remove marker attributes
|
||||
$( 'p[data-wpview-marker]', rootNode ).attr( 'data-wpview-marker', null );
|
||||
}
|
||||
|
||||
editor.on( 'PreProcess', function( event ) {
|
||||
// Replace the view nodes with their text in the DOM clone.
|
||||
resetViews( event.node );
|
||||
}, true );
|
||||
|
||||
editor.on( 'hide', function() {
|
||||
// Replace the view nodes with their text directly in the editor body.
|
||||
wp.mce.views.unbind();
|
||||
deselect();
|
||||
resetViews( editor.getBody() );
|
||||
});
|
||||
|
||||
// Excludes arrow keys, delete, backspace, enter, space bar.
|
||||
@@ -686,9 +697,42 @@ tinymce.PluginManager.add( 'wpview', function( editor ) {
|
||||
}
|
||||
});
|
||||
|
||||
editor.addButton( 'wp_view_edit', {
|
||||
tooltip: 'Edit ', // trailing space is needed, used for context
|
||||
icon: 'dashicon dashicons-edit',
|
||||
onclick: function() {
|
||||
selected && wp.mce.views.edit( editor, selected );
|
||||
}
|
||||
} );
|
||||
|
||||
editor.addButton( 'wp_view_remove', {
|
||||
tooltip: 'Remove',
|
||||
icon: 'dashicon dashicons-no',
|
||||
onclick: function() {
|
||||
selected && removeView( selected );
|
||||
}
|
||||
} );
|
||||
|
||||
editor.once( 'preinit', function() {
|
||||
toolbar = editor.wp._createToolbar( [
|
||||
'wp_view_edit',
|
||||
'wp_view_remove'
|
||||
] );
|
||||
} );
|
||||
|
||||
editor.on( 'wptoolbar', function( event ) {
|
||||
if ( selected ) {
|
||||
event.element = selected;
|
||||
event.toolbar = toolbar;
|
||||
}
|
||||
} );
|
||||
|
||||
// Add to editor.wp
|
||||
editor.wp = editor.wp || {};
|
||||
editor.wp.getView = getView;
|
||||
|
||||
// Keep for back-compat.
|
||||
return {
|
||||
getViewText: getViewText,
|
||||
setViewText: setViewText,
|
||||
getView: getView
|
||||
};
|
||||
});
|
||||
Reference in new issue
Block a user