Merge pull request #232 from WordPress/try/tinymce-single/contentedit…

…able-false Move figcaption button to block registration
WordPress · Mar 10, 2017 · c4ea069 · c4ea069
2 parents 42d49e1 + 27562e2
commit c4ea069
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 66 deletions.
diff --git a/tinymce-single/blocks.js b/tinymce-single/blocks.js
@@ -96,7 +96,11 @@
 
 			// Has placeholder for text.
 			if ( brs.length ) {
-				editor.selection.setCursorLocation( brs[0].parentNode, 0 );
+				if ( brs[0].parentNode.getAttribute( 'contenteditable' ) === 'true' ) {
+					editor.selection.select( brs[0].parentNode );
+				} else {
+					editor.selection.setCursorLocation( brs[0].parentNode, 0 );
+				}
 			} else {
 				editor.selection.select( block );
 			}

diff --git a/tinymce-single/blocks/core/image/register.js b/tinymce-single/blocks/core/image/register.js
@@ -9,7 +9,24 @@ window.wp.blocks.registerBlock( {
 		'block-align-center',
 		'block-align-right',
 		'block-align-full',
-		'togglefigcaption'
+		{
+			icon: 'gridicons-caption',
+			onClick: function( block ) {
+				var figcaption = block.querySelector( 'figcaption' );
+
+				if ( figcaption ) {
+					block.removeChild( figcaption );
+				} else {
+					block.insertAdjacentHTML( 'beforeend',
+						'<figcaption contenteditable="true"><br></figcaption>' );
+				}
+
+				window.wp.blocks.selectBlock( block );
+			},
+			isActive: function( block ) {
+				return !! block.querySelector( 'figcaption' );
+			}
+		}
 	],
 	insert: function() {
 		return (

diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js
@@ -46,52 +46,6 @@
 			editor.addButton( name, settings );
 		} );
 
-		function addfigcaption() {
-			var block = getSelectedBlock();
-
-			if ( ! editor.$( block ).find( 'figcaption' ).length ) {
-				var figcaption = editor.$( '<figcaption contenteditable="true"><br></figcaption>' );
-
-				editor.undoManager.transact( function() {
-					editor.$( block ).append( figcaption );
-					editor.selection.setCursorLocation( figcaption[0], 0 );
-				} );
-			}
-		}
-
-		function removefigcaption() {
-			var block = getSelectedBlock();
-			var figcaption = editor.$( block ).find( 'figcaption' );
-
-			if ( figcaption.length ) {
-				editor.undoManager.transact( function() {
-					figcaption.remove();
-				} );
-			}
-		}
-
-		editor.addButton( 'togglefigcaption', {
-			icon: 'gridicons-caption',
-			onClick: function() {
-				var block = getSelectedBlock();
-
-				if ( editor.$( block ).find( 'figcaption' ).length ) {
-					removefigcaption();
-				} else {
-					addfigcaption();
-				}
-			},
-			onPostRender: function() {
-				var button = this;
-
-				editor.on( 'nodechange', function( event ) {
-					var block = getSelectedBlock();
-
-					button.active( editor.$( block ).find( 'figcaption' ).length > 0 );
-				} );
-			}
-		} );
-
 		// Attach block UI.
 
 		editor.on( 'preinit', function() {
@@ -290,7 +244,6 @@
 
 			window.tinymce.ui.WPInsertSeparator = tinymce.ui.Control.extend( {
 				renderHtml: function() {
-					console.log(this)
 					return (
 						'<div id="' + this._id + '" class="insert-separator">' + this.settings.text + '</div>'
 					);
@@ -662,28 +615,21 @@
 				var VK = tinymce.util.VK;
 				var block = getSelectedBlock();
 
-				if ( block.nodeName === 'FIGURE' ) {
-					if ( keyCode === VK.ENTER ) {
-						addfigcaption();
-						event.preventDefault();
-					}
-				} else {
-					if ( keyCode === VK.BACKSPACE ) {
-						var selection = window.getSelection();
-
-						if ( ! selection.isCollapsed && editor.dom.isBlock( selection.focusNode ) ) {
-							if ( selection.anchorOffset === 0 && selection.focusOffset === 0 ) {
-								if ( block.nextSibling && block.nextSibling.contains( selection.focusNode ) ) {
-									removeBlock();
-									event.preventDefault();
-								}
-							}
+				if ( keyCode === VK.BACKSPACE ) {
+					var selection = window.getSelection();
 
-							if ( selection.anchorOffset === 0 && selection.anchorNode === selection.focusNode ) {
+					if ( ! selection.isCollapsed && editor.dom.isBlock( selection.focusNode ) ) {
+						if ( selection.anchorOffset === 0 && selection.focusOffset === 0 ) {
+							if ( block.nextSibling && block.nextSibling.contains( selection.focusNode ) ) {
 								removeBlock();
 								event.preventDefault();
 							}
 						}
+
+						if ( selection.anchorOffset === 0 && selection.anchorNode === selection.focusNode ) {
+							removeBlock();
+							event.preventDefault();
+						}
 					}
 				}