Merge pull request #226 from WordPress/try/tinymce-single/contenteditable-false

Use contenteditable false for object blocks

Author: ellatrix

tinymce-single/blocks.js

@@ -49,6 +49,9 @@
 		},
 		getSelectedBlocks: function() {
 			var editor = window.tinyMCE.activeEditor;
+
+			editor.selection.explicitRange = null;
+
 			var selection = window.getSelection();
 			var startNode = editor.selection.getStart();
 			var endNode = editor.selection.getEnd();

tinymce-single/blocks/core/image/register.js

@@ -13,9 +13,9 @@ window.wp.blocks.registerBlock( {
 	],
 	insert: function() {
 		return (
-			'<figure data-wp-block-type="core:image" class="alignright">' +
+			'<figure data-wp-block-type="core:image" class="alignright" contenteditable="false">' +
 				'<img src="https://cldup.com/HN3-c7ER9p.jpg" alt="">' +
-				'<figcaption>I have no idea which mountain this is. It looks tall!</figcaption>' +
+				'<figcaption contenteditable="true">I have no idea which mountain this is. It looks tall!</figcaption>' +
 			'</figure>'
 		);
 	}

tinymce-single/blocks/my-awesome-plugin/youtube/structure.css

@@ -7,27 +7,27 @@
 	content: '';
 	display: block;
 	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
 }
 
 #editor figure[data-wp-block-type="my-awesome-plugin:youtube"][data-mce-selected]:before {
 	display: none;
 }
 
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"]:before,
 #editor figure[data-wp-block-type="my-awesome-plugin:youtube"] iframe {
 	width: 750px;
 	height: 422px;
 }
 
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignleft:before,
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignright:before,
 #editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignleft iframe,
 #editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignright iframe {
 	width: 375px;
 	height: 211px;
 }
 
+#editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignfull:before,
 #editor figure[data-wp-block-type="my-awesome-plugin:youtube"].alignfull iframe {
 	width: 950px;
 	height: 534px;

tinymce-single/index.html

@@ -20,9 +20,9 @@ <h1>1.0 Is The Loneliest Number</h1>
 
 			<p>Many entrepreneurs idolize Steve Jobs. He’s such a perfectionist, they say. Nothing leaves the doors of 1 Infinite Loop in Cupertino without a polish and finish that makes geeks everywhere drool. No compromise!</p>
 
-			<figure data-wp-block-type="core:image" class="alignright">
+			<figure data-wp-block-type="core:image" class="alignright" contenteditable="false">
 				<img src="https://cldup.com/HN3-c7ER9p.jpg" alt="">
-				<figcaption>I have no idea which mountain this is. It looks tall!</figcaption>
+				<figcaption contenteditable="true">I have no idea which mountain this is. It looks tall!</figcaption>
 			</figure>
 
 			<p>I like Apple for the opposite reason: they’re not afraid of getting a rudimentary 1.0 out into the world.</p>
@@ -39,10 +39,10 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 				<p>The discovery sets a new record for greatest number of habitable-zone planets found around a single star outside our solar system. All of these seven planets could have liquid water—key to life as we know it—under the right atmospheric conditions, but the chances are highest with the three in the habitable zone.</p>
 			</blockquote>
 
-			<figure data-wp-block-type="core:gallery" data-wp-block-setting-column="3">
+			<figure data-wp-block-type="core:gallery" data-wp-block-setting-column="3" contenteditable="false">
 				<figure>
 					<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/1_main_pia21423-png.png" alt="A star shines on a planet's surface.">
-					<figcaption>TRAPPIST-1f</figcaption>
+					<figcaption contenteditable="true">TRAPPIST-1f</figcaption>
 				</figure>
 				<figure>
 					<img src="https://www.nasa.gov/sites/default/files/styles/1x1_cardfeed/public/thumbnails/image/exovolcano1920x1080.00033-1041.jpg" alt="">
@@ -54,9 +54,9 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 
 			<p>Okay, now let’s take an interstellar road trip:</p>
 
-			<figure data-wp-block-type="my-awesome-plugin:youtube">
+			<figure data-wp-block-type="my-awesome-plugin:youtube" contenteditable="false">
 				<iframe width="560" height="315" src="https://www.youtube.com/embed/3-NTv0CdFCk" allowfullscreen></iframe>
-				<figcaption>More planets! 😊</figcaption>
+				<figcaption contenteditable="true">More planets! 😊</figcaption>
 			</figure>
 
 			<p>And this is the end of another editor block prototype.</p>
@@ -67,7 +67,7 @@ <h2>NASA discovers system of seven Earth-sized planets</h2>
 
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.3/tinymce.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.5/tinymce.min.js"></script>
 
 		<script src="blocks.js"></script>
 		<script src="blocks/core/image/register.js"></script>

tinymce-single/tinymce/block.js

@@ -50,7 +50,7 @@
 			var block = getSelectedBlock();
 
 			if ( ! editor.$( block ).find( 'figcaption' ).length ) {
-				var figcaption = editor.$( '<figcaption><br></figcaption>' );
+				var figcaption = editor.$( '<figcaption contenteditable="true"><br></figcaption>' );
 
 				editor.undoManager.transact( function() {
 					editor.$( block ).append( figcaption );
@@ -97,6 +97,16 @@
 		editor.on( 'preinit', function() {
 			var DOM = tinymce.DOM;
 
+			editor.on( 'mousedown click', function( event ) {
+				if ( event.target.getAttribute( 'contenteditable' ) === 'true' ) {
+					if ( event.target !== editor.selection.getNode() ) {
+						setTimeout( function() {
+							editor.selection.placeCaretAt( event.clientX, event.clientY );
+						}, 50 );
+					}
+				}
+			}, true );
+
 			editor.addButton( 'block', {
 				icon: 'gridicons-posts',
 				tooltip: 'Add Block',
@@ -591,49 +601,16 @@
 			}
 
 			var hidden = true;
-			var keypress = false;
 
 			editor.on( 'keydown', function( event ) {
-				keypress = true;
-
 				if ( ! isInputKeyEvent( event ) ) {
 					return;
 				}
 
-				// No typing directly on elements.
-				if ( anchorNode.nodeType === 1 && ! isEmptySlot( anchorNode ) ) {
-					event.preventDefault();
-				} else {
-					hidden = true;
-				}
-
+				hidden = true;
 				insert = false;
 			} );
 
-			editor.on( 'keyup', function( event ) {
-				keypress = false;
-			} );
-
-			editor.on( 'beforePastePreProcess beforeExecCommand', function( event ) {
-				if ( anchorNode.nodeType === 1 && ! isEmptySlot( anchorNode ) ) {
-					event.preventDefault();
-				}
-			} );
-
-			editor.on( 'input', function( event ) {
-				// Non key input (e.g. emoji).
-				if ( keypress ) {
-					return;
-				}
-
-				if ( anchorNode.nodeType === 1 && ! isEmptySlot( anchorNode ) ) {
-					// Event not cancelable. :(
-					// Let's see how this goes, it might be buggy.
-					editor.undoManager.add();
-					editor.undoManager.undo();
-				}
-			} );
-
 			editor.on( 'mousedown touchstart', function() {
 				hidden = false;
 				insert = false;
@@ -698,30 +675,6 @@
 						addfigcaption();
 						event.preventDefault();
 					}
-
-					if ( keyCode === VK.BACKSPACE ) {
-						var caretEl = editor.selection.getNode();
-
-						if ( caretEl.nodeName !== 'FIGCAPTION' ) {
-							removeBlock();
-							event.preventDefault();
-						} else {
-							var range = editor.selection.getRng();
-
-							if ( range.collapsed && range.startOffset === 0 ) {
-								removefigcaption();
-								event.preventDefault();
-							}
-						}
-					}
-
-					if ( keyCode === VK.LEFT ) {
-						var range = editor.selection.getRng();
-
-						if ( keyCode === VK.LEFT && range.startOffset === 0 ) {
-							event.preventDefault();
-						}
-					}
 				} else {
 					if ( keyCode === VK.BACKSPACE ) {
 						var selection = window.getSelection();
@@ -769,14 +722,6 @@
 				metaCount = 0;
 			} );
 
-			editor.on( 'dragstart', function( event ) {
-				var block = getSelectedBlock();
-
-				if ( block.nodeName === 'FIGURE' ) {
-					event.preventDefault();
-				}
-			} );
-
 			editor.on( 'nodeChange', function() {
 				editor.$( editor.getBody() ).children().attr( 'data-mce-selected', null );
 				editor.$( getSelectedBlock() ).attr( 'data-mce-selected', 'true' );