From 2f1352652a10c0f854cdf2d20f712e89157cbdaa Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 3 Mar 2017 12:53:50 +0100 Subject: [PATCH 1/4] Remove element global in moving and unused code --- tinymce-single/tinymce/block.js | 50 +++++++++------------------------ 1 file changed, 14 insertions(+), 36 deletions(-) diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index 6e5be6aed9ae2..023dc797080a3 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -96,15 +96,6 @@ var blockToolbar; var blockToolbars = {}; - // editor.addButton( 'moveblock', { - // icon: 'gridicons-reblog', - // onclick: function() { - // editor.$( element ).attr( 'data-mce-selected', 'move' ); - // editor.$( editor.getBody() ).addClass( 'is-moving-block' ); - // editor.nodeChanged(); - // } - // } ); - editor.addButton( 'block', { icon: 'gridicons-posts', tooltip: 'Add Block', @@ -133,38 +124,39 @@ } ); } - editor.addButton( 'block-remove', { - icon: 'gridicons-trash', - onClick: removeBlock - } ); - function moveBlockUp() { $blocks = getBlockSelection(); - rect = element.getBoundingClientRect(); - $prev = $blocks.first().prev(); + $first = $blocks.first(); + $last = $blocks.last(); + $prev = $first.prev(); + + rect = $first[0].getBoundingClientRect(); if ( $prev.length ) { editor.undoManager.transact( function() { - $blocks.last().after( $prev ); + $last.after( $prev ); } ); editor.nodeChanged(); - window.scrollBy( 0, - rect.top + element.getBoundingClientRect().top ); + window.scrollBy( 0, - rect.top + $first[0].getBoundingClientRect().top ); } } function moveBlockDown() { $blocks = getBlockSelection(); - rect = element.getBoundingClientRect(); - $next = $blocks.last().next(); + $first = $blocks.first(); + $last = $blocks.last(); + $next = $last.next(); + + rect = $first[0].getBoundingClientRect(); if ( $next.length ) { editor.undoManager.transact( function() { - $blocks.first().before( $next ); + $first.before( $next ); } ); editor.nodeChanged(); - window.scrollBy( 0, - rect.top + element.getBoundingClientRect().top ); + window.scrollBy( 0, - rect.top + $first[0].getBoundingClientRect().top ); } } @@ -593,20 +585,6 @@ insert = false; } ); - // editor.on( 'keydown', function( event ) { - // if ( editor.$( element ).attr( 'data-mce-selected' ) === 'block' ) { - // if ( event.keyCode === tinymce.util.VK.DOWN ) { - // editor.execCommand( 'down' ); - // event.preventDefault(); - // } - - // if ( event.keyCode === tinymce.util.VK.UP ) { - // editor.execCommand( 'up' ); - // event.preventDefault(); - // } - // } - // } ); - var metaCount = 0; editor.on( 'keydown', function( event ) { From c763c7cd3c0f8449af970f622629fd9a0365c740 Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 3 Mar 2017 14:26:52 +0100 Subject: [PATCH 2/4] Get rid of element global --- shared/tinymce/toolbar.js | 2 +- tinymce-single/blocks.js | 19 +++++ .../blocks/elements/blockquote/register.js | 6 +- .../blocks/elements/headings/register.js | 12 ++- .../elements/horizontal-rule/register.js | 6 +- .../blocks/elements/lists/register.js | 12 +-- .../blocks/elements/paragraph/register.js | 2 +- tinymce-single/tinymce/block.js | 73 +++++++++---------- 8 files changed, 77 insertions(+), 55 deletions(-) diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js index 53a9b0f6837b9..3bfe6c529f8be 100644 --- a/shared/tinymce/toolbar.js +++ b/shared/tinymce/toolbar.js @@ -75,7 +75,7 @@ function onClick( callback ) { return function() { editor.undoManager.transact( function() { - callback( editor, window.element ); + callback( editor ); } ); } } diff --git a/tinymce-single/blocks.js b/tinymce-single/blocks.js index 7c7ff5f9d0af2..7f67b97172001 100644 --- a/tinymce-single/blocks.js +++ b/tinymce-single/blocks.js @@ -39,6 +39,25 @@ }, getControls: function() { return _controls; + }, + getSelectedBlocks: function() { + + }, + getSelectedBlock: function( editor ) { + var node = editor.selection.getNode(); + var rootNode = editor.getBody(); + + if ( node === rootNode ) { + return rootNode.firstChild; + } + + while ( node.parentNode ) { + if ( node.parentNode === rootNode ) { + return node; + } + + node = node.parentNode; + } } }; } )( window.wp = window.wp || {} ); diff --git a/tinymce-single/blocks/elements/blockquote/register.js b/tinymce-single/blocks/elements/blockquote/register.js index 90d2babf23b7d..f8191820a45fa 100644 --- a/tinymce-single/blocks/elements/blockquote/register.js +++ b/tinymce-single/blocks/elements/blockquote/register.js @@ -11,8 +11,10 @@ window.wp.blocks.registerBlock( { } } ], - insert: function( editor, element ) { - editor.formatter.apply( 'blockquote', element ); + insert: function( editor ) { + var block = wp.blocks.getSelectedBlock( editor ); + + editor.formatter.apply( 'blockquote', block ); } } ); diff --git a/tinymce-single/blocks/elements/headings/register.js b/tinymce-single/blocks/elements/headings/register.js index 46cc3706bcea2..1f06510bd3040 100644 --- a/tinymce-single/blocks/elements/headings/register.js +++ b/tinymce-single/blocks/elements/headings/register.js @@ -7,8 +7,10 @@ icon: 'gridicons-heading', text: level, stateSelector: 'h' + level, - onClick: function( editor, element ) { - editor.formatter.apply( 'h' + level, element ); + onClick: function( editor ) { + var block = wp.blocks.getSelectedBlock( editor ); + + editor.formatter.apply( 'h' + level, block ); } } ); } ); @@ -16,8 +18,10 @@ controls.push( { classes: 'remove-formatting', icon: 'gridicons-heading', - onClick: function( editor, element ) { - editor.formatter.apply( 'p', element ); + onClick: function( editor ) { + var block = wp.blocks.getSelectedBlock( editor ); + + editor.formatter.apply( 'p', block ); } } ); diff --git a/tinymce-single/blocks/elements/horizontal-rule/register.js b/tinymce-single/blocks/elements/horizontal-rule/register.js index 04ec1167b5e9e..9c80ebb129cff 100644 --- a/tinymce-single/blocks/elements/horizontal-rule/register.js +++ b/tinymce-single/blocks/elements/horizontal-rule/register.js @@ -2,7 +2,9 @@ window.wp.blocks.registerBlock( { elements: [ 'hr' ], type: 'separator', icon: 'gridicons-minus', - insert: function( editor, element ) { - element.parentNode.replaceChild( document.createElement( 'hr' ), element ); + insert: function( editor ) { + var block = wp.blocks.getSelectedBlock( editor ); + + block.parentNode.replaceChild( document.createElement( 'hr' ), block ); } } ); diff --git a/tinymce-single/blocks/elements/lists/register.js b/tinymce-single/blocks/elements/lists/register.js index aefce1b7e5e73..e6b368f2b28ed 100644 --- a/tinymce-single/blocks/elements/lists/register.js +++ b/tinymce-single/blocks/elements/lists/register.js @@ -6,24 +6,26 @@ window.wp.blocks.registerBlock( { { icon: 'gridicons-list-unordered', stateSelector: 'ul', - onClick: function( editor, element ) { + onClick: function( editor ) { editor.execCommand( 'InsertUnorderedList' ); } }, { icon: 'gridicons-list-ordered', stateSelector: 'ol', - onClick: function( editor, element ) { + onClick: function( editor ) { editor.execCommand( 'InsertOrderedList' ); } }, { classes: 'remove-formatting', icon: 'gridicons-list-unordered', - onClick: function( editor, element ) { - if ( element.nodeName === 'UL' ) { + onClick: function( editor ) { + var block = wp.blocks.getSelectedBlock( editor ); + + if ( block.nodeName === 'UL' ) { editor.execCommand( 'InsertUnorderedList' ); - } else if ( element.nodeName === 'OL' ) { + } else if ( block.nodeName === 'OL' ) { editor.execCommand( 'InsertOrderedList' ); } } diff --git a/tinymce-single/blocks/elements/paragraph/register.js b/tinymce-single/blocks/elements/paragraph/register.js index e4cba94e96a31..65b41fb171934 100644 --- a/tinymce-single/blocks/elements/paragraph/register.js +++ b/tinymce-single/blocks/elements/paragraph/register.js @@ -17,7 +17,7 @@ window.wp.blocks.registerBlock( { }, { icon: 'gridicons-list-unordered', - onClick: function( editor, element ) { + onClick: function( editor ) { editor.execCommand( 'InsertUnorderedList' ); } }, diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index 023dc797080a3..37c775aabe7b5 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -1,12 +1,9 @@ ( function( tinymce, wp, _ ) { tinymce.PluginManager.add( 'block', function( editor ) { - var element; - // Set focussed block. Global variable for now. Top-level node for now. - - editor.on( 'nodechange', function( event ) { - element = window.element = event.parents[ event.parents.length - 1 ]; - } ); + function getSelectedBlock() { + return wp.blocks.getSelectedBlock( editor ); + } // Global controls @@ -28,7 +25,7 @@ if ( control.onClick ) { settings.onClick = function() { - control.onClick( element ); + control.onClick( getSelectedBlock() ); editor.nodeChanged(); }; } @@ -38,8 +35,10 @@ var button = this; editor.on( 'nodechange', function() { - if ( isNodeEligibleForControl( element, name ) ) { - button.active( control.isActive( element ) ); + var block = getSelectedBlock(); + + if ( isNodeEligibleForControl( block, name ) ) { + button.active( control.isActive( block ) ); } } ); }; @@ -49,18 +48,21 @@ } ); function addfigcaption() { - if ( ! editor.$( element ).find( 'figcaption' ).length ) { + var block = getSelectedBlock(); + + if ( ! editor.$( block ).find( 'figcaption' ).length ) { var figcaption = editor.$( '

' ); editor.undoManager.transact( function() { - editor.$( element ).append( figcaption ); + editor.$( block ).append( figcaption ); editor.selection.setCursorLocation( figcaption[0], 0 ); } ); } } function removefigcaption() { - var figcaption = editor.$( element ).find( 'figcaption' ); + var block = getSelectedBlock(); + var figcaption = editor.$( block ).find( 'figcaption' ); if ( figcaption.length ) { editor.undoManager.transact( function() { @@ -72,7 +74,9 @@ editor.addButton( 'togglefigcaption', { icon: 'gridicons-caption', onClick: function() { - if ( editor.$( element ).find( 'figcaption' ).length ) { + var block = getSelectedBlock(); + + if ( editor.$( block ).find( 'figcaption' ).length ) { removefigcaption(); } else { addfigcaption(); @@ -82,9 +86,9 @@ var button = this; editor.on( 'nodechange', function( event ) { - var element = event.parents[ event.parents.length - 1 ]; + var block = getSelectedBlock(); - button.active( editor.$( element ).find( 'figcaption' ).length > 0 ); + button.active( editor.$( block ).find( 'figcaption' ).length > 0 ); } ); } } ); @@ -103,8 +107,8 @@ var button = this; editor.on( 'nodechange', function( event ) { - var element = event.parents[ event.parents.length - 1 ]; - var settings = wp.blocks.getBlockSettingsByElement( element ); + var block = getSelectedBlock(); + var settings = wp.blocks.getBlockSettingsByElement( block ); if ( settings ) { button.icon( settings.icon ); @@ -114,7 +118,7 @@ }); function removeBlock() { - var $blocks = editor.$( '*[data-mce-selected="block"]' ).add( element ); + var $blocks = editor.$( getSelectedBlock() ); var p = editor.$( '


' ); editor.undoManager.transact( function() { @@ -232,13 +236,9 @@ var blockToolbarWidth = 0; toolbarInsert.reposition = function () { - if ( ! element ) { - return; - } - var toolbar = this.getEl(); var toolbarRect = toolbar.getBoundingClientRect(); - var elementRect = element.getBoundingClientRect(); + var elementRect = getSelectedBlock().getBoundingClientRect(); var contentRect = editor.getBody().getBoundingClientRect(); DOM.setStyles( toolbar, { @@ -251,13 +251,9 @@ } toolbarInline.reposition = function () { - if ( ! element ) { - return; - } - var toolbar = this.getEl(); var toolbarRect = toolbar.getBoundingClientRect(); - var elementRect = element.getBoundingClientRect(); + var elementRect = getSelectedBlock().getBoundingClientRect(); DOM.setStyles( toolbar, { position: 'absolute', @@ -270,13 +266,9 @@ toolbarCaret.reposition = blockToolbar.reposition = function () { - if ( ! element ) { - return; - } - var toolbar = this.getEl(); var toolbarRect = toolbar.getBoundingClientRect(); - var elementRect = element.getBoundingClientRect(); + var elementRect = getSelectedBlock().getBoundingClientRect(); var contentRect = editor.getBody().getBoundingClientRect(); @@ -361,7 +353,7 @@ } function showBlockUI( focus ) { - var settings = wp.blocks.getBlockSettingsByElement( element ), + var settings = wp.blocks.getBlockSettingsByElement( getSelectedBlock() ), controls; if ( ! hasBlockUI ) { @@ -383,11 +375,9 @@ blockToolbars[ settings._id ] = editor.wp._createToolbar( controls ); blockToolbars[ settings._id ].reposition = function () { - if (!element) return - var toolbar = this.getEl(); var toolbarRect = toolbar.getBoundingClientRect(); - var elementRect = element.getBoundingClientRect(); + var elementRect = getSelectedBlock().getBoundingClientRect(); var contentRect = editor.getBody().getBoundingClientRect(); DOM.setStyles( toolbar, { @@ -590,8 +580,9 @@ editor.on( 'keydown', function( event ) { var keyCode = event.keyCode; var VK = tinymce.util.VK; + var block = getSelectedBlock(); - if ( element.nodeName === 'FIGURE' ) { + if ( block.nodeName === 'FIGURE' ) { if ( keyCode === VK.ENTER ) { addfigcaption(); event.preventDefault(); @@ -626,7 +617,7 @@ if ( ! selection.isCollapsed && editor.dom.isBlock( selection.focusNode ) ) { if ( selection.anchorOffset === 0 && selection.focusOffset === 0 ) { - if ( element.nextSibling && element.nextSibling.contains( selection.focusNode ) ) { + if ( block.nextSibling && block.nextSibling.contains( selection.focusNode ) ) { removeBlock(); event.preventDefault(); } @@ -660,7 +651,9 @@ } ); editor.on( 'dragstart', function( event ) { - if ( element.nodeName === 'FIGURE' ) { + var block = getSelectedBlock(); + + if ( block.nodeName === 'FIGURE' ) { event.preventDefault(); } } ); From be82c89ff58246607bb8293a7b9e17c4ce830fce Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 3 Mar 2017 14:40:14 +0100 Subject: [PATCH 3/4] Pass block node to onClick again --- shared/tinymce/toolbar.js | 2 +- tinymce-single/blocks.js | 1 + tinymce-single/blocks/elements/blockquote/register.js | 6 ++---- tinymce-single/blocks/elements/headings/register.js | 8 ++------ .../blocks/elements/horizontal-rule/register.js | 4 +--- tinymce-single/blocks/elements/lists/register.js | 4 +--- tinymce-single/blocks/elements/paragraph/register.js | 8 ++++---- tinymce-single/blocks/elements/preformatted/register.js | 2 +- 8 files changed, 13 insertions(+), 22 deletions(-) diff --git a/shared/tinymce/toolbar.js b/shared/tinymce/toolbar.js index 3bfe6c529f8be..c53362a324811 100644 --- a/shared/tinymce/toolbar.js +++ b/shared/tinymce/toolbar.js @@ -75,7 +75,7 @@ function onClick( callback ) { return function() { editor.undoManager.transact( function() { - callback( editor ); + callback( window.wp.blocks.getSelectedBlock(), editor ); } ); } } diff --git a/tinymce-single/blocks.js b/tinymce-single/blocks.js index 7f67b97172001..94d4fb78321b4 100644 --- a/tinymce-single/blocks.js +++ b/tinymce-single/blocks.js @@ -44,6 +44,7 @@ }, getSelectedBlock: function( editor ) { + var editor = window.tinyMCE.activeEditor; var node = editor.selection.getNode(); var rootNode = editor.getBody(); diff --git a/tinymce-single/blocks/elements/blockquote/register.js b/tinymce-single/blocks/elements/blockquote/register.js index f8191820a45fa..336954ada6c74 100644 --- a/tinymce-single/blocks/elements/blockquote/register.js +++ b/tinymce-single/blocks/elements/blockquote/register.js @@ -6,14 +6,12 @@ window.wp.blocks.registerBlock( { { classes: 'remove-formatting', icon: 'gridicons-quote', - onClick: function( editor ) { + onClick: function( block, editor ) { editor.formatter.remove( 'blockquote' ); } } ], - insert: function( editor ) { - var block = wp.blocks.getSelectedBlock( editor ); - + insert: function( block, editor ) { editor.formatter.apply( 'blockquote', block ); } } ); diff --git a/tinymce-single/blocks/elements/headings/register.js b/tinymce-single/blocks/elements/headings/register.js index 1f06510bd3040..c73a3c4c570b7 100644 --- a/tinymce-single/blocks/elements/headings/register.js +++ b/tinymce-single/blocks/elements/headings/register.js @@ -7,9 +7,7 @@ icon: 'gridicons-heading', text: level, stateSelector: 'h' + level, - onClick: function( editor ) { - var block = wp.blocks.getSelectedBlock( editor ); - + onClick: function( block, editor ) { editor.formatter.apply( 'h' + level, block ); } } ); @@ -18,9 +16,7 @@ controls.push( { classes: 'remove-formatting', icon: 'gridicons-heading', - onClick: function( editor ) { - var block = wp.blocks.getSelectedBlock( editor ); - + onClick: function( block, editor ) { editor.formatter.apply( 'p', block ); } } ); diff --git a/tinymce-single/blocks/elements/horizontal-rule/register.js b/tinymce-single/blocks/elements/horizontal-rule/register.js index 9c80ebb129cff..433bb19b748d1 100644 --- a/tinymce-single/blocks/elements/horizontal-rule/register.js +++ b/tinymce-single/blocks/elements/horizontal-rule/register.js @@ -2,9 +2,7 @@ window.wp.blocks.registerBlock( { elements: [ 'hr' ], type: 'separator', icon: 'gridicons-minus', - insert: function( editor ) { - var block = wp.blocks.getSelectedBlock( editor ); - + insert: function( block ) { block.parentNode.replaceChild( document.createElement( 'hr' ), block ); } } ); diff --git a/tinymce-single/blocks/elements/lists/register.js b/tinymce-single/blocks/elements/lists/register.js index e6b368f2b28ed..e17561c06b319 100644 --- a/tinymce-single/blocks/elements/lists/register.js +++ b/tinymce-single/blocks/elements/lists/register.js @@ -20,9 +20,7 @@ window.wp.blocks.registerBlock( { { classes: 'remove-formatting', icon: 'gridicons-list-unordered', - onClick: function( editor ) { - var block = wp.blocks.getSelectedBlock( editor ); - + onClick: function( block, editor ) { if ( block.nodeName === 'UL' ) { editor.execCommand( 'InsertUnorderedList' ); } else if ( block.nodeName === 'OL' ) { diff --git a/tinymce-single/blocks/elements/paragraph/register.js b/tinymce-single/blocks/elements/paragraph/register.js index 65b41fb171934..d0424216475e6 100644 --- a/tinymce-single/blocks/elements/paragraph/register.js +++ b/tinymce-single/blocks/elements/paragraph/register.js @@ -5,25 +5,25 @@ window.wp.blocks.registerBlock( { controls: [ { icon: 'gridicons-heading', - onClick: function( editor ) { + onClick: function( block, editor ) { editor.formatter.apply( 'h1' ); } }, { icon: 'gridicons-quote', - onClick: function( editor ) { + onClick: function( block, editor ) { editor.formatter.apply( 'blockquote' ); } }, { icon: 'gridicons-list-unordered', - onClick: function( editor ) { + onClick: function( block, editor ) { editor.execCommand( 'InsertUnorderedList' ); } }, { icon: 'gridicons-code', - onClick: function( editor ) { + onClick: function( block, editor ) { editor.formatter.apply( 'pre' ); } }, diff --git a/tinymce-single/blocks/elements/preformatted/register.js b/tinymce-single/blocks/elements/preformatted/register.js index 342f4f4bb4719..48410627428b7 100644 --- a/tinymce-single/blocks/elements/preformatted/register.js +++ b/tinymce-single/blocks/elements/preformatted/register.js @@ -9,7 +9,7 @@ window.wp.blocks.registerBlock( { { classes: 'remove-formatting', icon: 'gridicons-code', - onClick: function( editor ) { + onClick: function( block, editor ) { editor.formatter.remove( 'pre' ); } } From d9b891ca6cc0954b5a6f7c59c703e062933f7390 Mon Sep 17 00:00:00 2001 From: iseulde Date: Fri, 3 Mar 2017 14:45:14 +0100 Subject: [PATCH 4/4] Remove getSelectedBlock wrapper in block plugin --- tinymce-single/tinymce/block.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/tinymce-single/tinymce/block.js b/tinymce-single/tinymce/block.js index 37c775aabe7b5..75b19c731c522 100644 --- a/tinymce-single/tinymce/block.js +++ b/tinymce-single/tinymce/block.js @@ -1,9 +1,6 @@ ( function( tinymce, wp, _ ) { tinymce.PluginManager.add( 'block', function( editor ) { - - function getSelectedBlock() { - return wp.blocks.getSelectedBlock( editor ); - } + var getSelectedBlock = wp.blocks.getSelectedBlock; // Global controls