10 DOM = tinymce.DOM, |
10 DOM = tinymce.DOM, |
11 each = tinymce.each, |
11 each = tinymce.each, |
12 __ = editor.editorManager.i18n.translate, |
12 __ = editor.editorManager.i18n.translate, |
13 $ = window.jQuery, |
13 $ = window.jQuery, |
14 wp = window.wp, |
14 wp = window.wp, |
15 hasWpautop = ( wp && wp.editor && wp.editor.autop && editor.getParam( 'wpautop', true ) ); |
15 hasWpautop = ( wp && wp.editor && wp.editor.autop && editor.getParam( 'wpautop', true ) ), |
|
16 wpTooltips = false; |
16 |
17 |
17 if ( $ ) { |
18 if ( $ ) { |
18 $( document ).triggerHandler( 'tinymce-editor-setup', [ editor ] ); |
19 $( document ).triggerHandler( 'tinymce-editor-setup', [ editor ] ); |
19 } |
20 } |
20 |
21 |
21 function toggleToolbars( state ) { |
22 function toggleToolbars( state ) { |
22 var iframe, initial, toolbars, |
23 var initial, toolbars, iframeHeight, |
23 pixels = 0; |
24 pixels = 0, |
24 |
25 classicBlockToolbar = tinymce.$( '.block-library-classic__toolbar' ); |
25 initial = ( state === 'hide' ); |
26 |
|
27 if ( state === 'hide' ) { |
|
28 initial = true; |
|
29 } else if ( classicBlockToolbar.length && ! classicBlockToolbar.hasClass( 'has-advanced-toolbar' ) ) { |
|
30 // Show the second, third, etc. toolbar rows in the Classic block instance. |
|
31 classicBlockToolbar.addClass( 'has-advanced-toolbar' ); |
|
32 state = 'show'; |
|
33 } |
26 |
34 |
27 if ( editor.theme.panel ) { |
35 if ( editor.theme.panel ) { |
28 toolbars = editor.theme.panel.find('.toolbar:not(.menubar)'); |
36 toolbars = editor.theme.panel.find('.toolbar:not(.menubar)'); |
29 } |
37 } |
30 |
38 |
31 if ( ! toolbars || toolbars.length < 2 || ( state === 'hide' && ! toolbars[1].visible() ) ) { |
39 if ( toolbars && toolbars.length > 1 ) { |
32 return; |
40 if ( ! state && toolbars[1].visible() ) { |
33 } |
41 state = 'hide'; |
34 |
42 } |
35 if ( ! state && toolbars[1].visible() ) { |
43 |
36 state = 'hide'; |
44 each( toolbars, function( toolbar, i ) { |
37 } |
45 if ( i > 0 ) { |
38 |
46 if ( state === 'hide' ) { |
39 each( toolbars, function( toolbar, i ) { |
47 toolbar.hide(); |
40 if ( i > 0 ) { |
48 pixels += 34; |
41 if ( state === 'hide' ) { |
49 } else { |
42 toolbar.hide(); |
50 toolbar.show(); |
43 pixels += 30; |
51 pixels -= 34; |
44 } else { |
52 } |
45 toolbar.show(); |
53 } |
46 pixels -= 30; |
54 }); |
47 } |
55 } |
48 } |
56 |
49 }); |
57 // Resize editor iframe, not needed for iOS and inline instances. |
50 |
58 // Don't resize if the editor is in a hidden container. |
51 if ( pixels && ! initial ) { |
59 if ( pixels && ! tinymce.Env.iOS && editor.iframeElement && editor.iframeElement.clientHeight ) { |
52 // Resize iframe, not needed in iOS |
60 iframeHeight = editor.iframeElement.clientHeight + pixels; |
53 if ( ! tinymce.Env.iOS ) { |
61 |
54 iframe = editor.getContentAreaContainer().firstChild; |
62 // Keep min-height. |
55 DOM.setStyle( iframe, 'height', iframe.clientHeight + pixels ); |
63 if ( iframeHeight > 50 ) { |
56 } |
64 DOM.setStyle( editor.iframeElement, 'height', iframeHeight ); |
57 |
65 } |
|
66 } |
|
67 |
|
68 if ( ! initial ) { |
58 if ( state === 'hide' ) { |
69 if ( state === 'hide' ) { |
59 setUserSetting('hidetb', '0'); |
70 setUserSetting( 'hidetb', '0' ); |
60 wpAdvButton && wpAdvButton.active( false ); |
71 wpAdvButton && wpAdvButton.active( false ); |
61 } else { |
72 } else { |
62 setUserSetting('hidetb', '1'); |
73 setUserSetting( 'hidetb', '1' ); |
63 wpAdvButton && wpAdvButton.active( true ); |
74 wpAdvButton && wpAdvButton.active( true ); |
64 } |
75 } |
65 } |
76 } |
66 |
77 |
67 editor.fire( 'wp-toolbar-toggle' ); |
78 editor.fire( 'wp-toolbar-toggle' ); |
71 editor.addButton( 'wp_adv', { |
82 editor.addButton( 'wp_adv', { |
72 tooltip: 'Toolbar Toggle', |
83 tooltip: 'Toolbar Toggle', |
73 cmd: 'WP_Adv', |
84 cmd: 'WP_Adv', |
74 onPostRender: function() { |
85 onPostRender: function() { |
75 wpAdvButton = this; |
86 wpAdvButton = this; |
76 wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' ? true : false ); |
87 wpAdvButton.active( getUserSetting( 'hidetb' ) === '1' ); |
77 } |
88 } |
78 }); |
89 }); |
79 |
90 |
80 // Hide the toolbars after loading |
91 // Hide the toolbars after loading |
81 editor.on( 'PostRender', function() { |
92 editor.on( 'PostRender', function() { |
82 if ( editor.getParam( 'wordpress_adv_hidden', true ) && getUserSetting( 'hidetb', '0' ) === '0' ) { |
93 if ( editor.getParam( 'wordpress_adv_hidden', true ) && getUserSetting( 'hidetb', '0' ) === '0' ) { |
83 toggleToolbars( 'hide' ); |
94 toggleToolbars( 'hide' ); |
|
95 } else { |
|
96 tinymce.$( '.block-library-classic__toolbar' ).addClass( 'has-advanced-toolbar' ); |
84 } |
97 } |
85 }); |
98 }); |
86 |
99 |
87 editor.addCommand( 'WP_Adv', function() { |
100 editor.addCommand( 'WP_Adv', function() { |
88 toggleToolbars(); |
101 toggleToolbars(); |
561 editor.$( 'a', event.node ).find( 'font, u' ).each( function( i, node ) { |
579 editor.$( 'a', event.node ).find( 'font, u' ).each( function( i, node ) { |
562 dom.remove( node, true ); |
580 dom.remove( node, true ); |
563 }); |
581 }); |
564 } |
582 } |
565 }); |
583 }); |
566 } |
|
567 |
|
568 if ( editor.settings.wp_shortcut_labels && editor.theme.panel ) { |
|
569 var labels = {}; |
|
570 var access = 'Shift+Alt+'; |
|
571 var meta = 'Ctrl+'; |
|
572 |
|
573 // For Mac: ctrl = \u2303, cmd = \u2318, alt = \u2325 |
|
574 |
|
575 if ( tinymce.Env.mac ) { |
|
576 access = '\u2303\u2325'; |
|
577 meta = '\u2318'; |
|
578 } |
|
579 |
|
580 each( editor.settings.wp_shortcut_labels, function( value, name ) { |
|
581 labels[ name ] = value.replace( 'access', access ).replace( 'meta', meta ); |
|
582 } ); |
|
583 |
|
584 each( editor.theme.panel.find('button'), function( button ) { |
|
585 if ( button && button.settings.tooltip && labels.hasOwnProperty( button.settings.tooltip ) ) { |
|
586 // Need to translate now. We are changing the string so it won't match and cannot be translated later. |
|
587 button.settings.tooltip = editor.translate( button.settings.tooltip ) + ' (' + labels[ button.settings.tooltip ] + ')'; |
|
588 } |
|
589 } ); |
|
590 |
|
591 // listbox for the "blocks" drop-down |
|
592 each( editor.theme.panel.find('listbox'), function( listbox ) { |
|
593 if ( listbox && listbox.settings.text === 'Paragraph' ) { |
|
594 each( listbox.settings.values, function( item ) { |
|
595 if ( item.text && labels.hasOwnProperty( item.text ) ) { |
|
596 item.shortcut = '(' + labels[ item.text ] + ')'; |
|
597 } |
|
598 } ); |
|
599 } |
|
600 } ); |
|
601 } |
584 } |
602 }); |
585 }); |
603 |
586 |
604 editor.on( 'SaveContent', function( event ) { |
587 editor.on( 'SaveContent', function( event ) { |
605 // If editor is hidden, we just want the textarea's value to be saved |
588 // If editor is hidden, we just want the textarea's value to be saved |
655 if ( wp && wp.autosave ) { |
636 if ( wp && wp.autosave ) { |
656 wp.autosave.server.triggerSave(); |
637 wp.autosave.server.triggerSave(); |
657 } |
638 } |
658 } ); |
639 } ); |
659 |
640 |
|
641 // Alt+Shift+Z removes a block in the Block Editor, don't add it to the Classic Block. |
|
642 if ( ! editor.settings.classic_block_editor ) { |
|
643 editor.addShortcut( 'access+z', '', 'WP_Adv' ); |
|
644 } |
|
645 |
|
646 // Workaround for not triggering the global help modal in the Block Editor by the Classic Block shortcut. |
|
647 editor.on( 'keydown', function( event ) { |
|
648 var match; |
|
649 |
|
650 if ( tinymce.Env.mac ) { |
|
651 match = event.ctrlKey && event.altKey && event.code === 'KeyH'; |
|
652 } else { |
|
653 match = event.shiftKey && event.altKey && event.code === 'KeyH'; |
|
654 } |
|
655 |
|
656 if ( match ) { |
|
657 editor.execCommand( 'WP_Help' ); |
|
658 event.stopPropagation(); |
|
659 event.stopImmediatePropagation(); |
|
660 return false; |
|
661 } |
|
662 |
|
663 return true; |
|
664 }); |
|
665 |
660 if ( window.getUserSetting( 'editor_plain_text_paste_warning' ) > 1 ) { |
666 if ( window.getUserSetting( 'editor_plain_text_paste_warning' ) > 1 ) { |
661 editor.settings.paste_plaintext_inform = false; |
667 editor.settings.paste_plaintext_inform = false; |
662 } |
668 } |
663 |
669 |
664 // Change the editor iframe title on MacOS, add the correct help shortcut. |
670 // Change the editor iframe title on MacOS, add the correct help shortcut. |
675 if ( times < 2 ) { |
681 if ( times < 2 ) { |
676 window.setUserSetting( 'editor_plain_text_paste_warning', ++times ); |
682 window.setUserSetting( 'editor_plain_text_paste_warning', ++times ); |
677 } |
683 } |
678 } |
684 } |
679 }); |
685 }); |
|
686 |
|
687 editor.on( 'beforerenderui', function() { |
|
688 if ( editor.theme.panel ) { |
|
689 each( [ 'button', 'colorbutton', 'splitbutton' ], function( buttonType ) { |
|
690 replaceButtonsTooltips( editor.theme.panel.find( buttonType ) ); |
|
691 } ); |
|
692 |
|
693 addShortcutsToListbox(); |
|
694 } |
|
695 } ); |
|
696 |
|
697 function prepareTooltips() { |
|
698 var access = 'Shift+Alt+'; |
|
699 var meta = 'Ctrl+'; |
|
700 |
|
701 wpTooltips = {}; |
|
702 |
|
703 // For MacOS: ctrl = \u2303, cmd = \u2318, alt = \u2325 |
|
704 if ( tinymce.Env.mac ) { |
|
705 access = '\u2303\u2325'; |
|
706 meta = '\u2318'; |
|
707 } |
|
708 |
|
709 // Some tooltips are translated, others are not... |
|
710 if ( editor.settings.wp_shortcut_labels ) { |
|
711 each( editor.settings.wp_shortcut_labels, function( value, tooltip ) { |
|
712 var translated = editor.translate( tooltip ); |
|
713 |
|
714 value = value.replace( 'access', access ).replace( 'meta', meta ); |
|
715 wpTooltips[ tooltip ] = value; |
|
716 |
|
717 // Add the translated so we can match all of them. |
|
718 if ( tooltip !== translated ) { |
|
719 wpTooltips[ translated ] = value; |
|
720 } |
|
721 } ); |
|
722 } |
|
723 } |
|
724 |
|
725 function getTooltip( tooltip ) { |
|
726 var translated = editor.translate( tooltip ); |
|
727 var label; |
|
728 |
|
729 if ( ! wpTooltips ) { |
|
730 prepareTooltips(); |
|
731 } |
|
732 |
|
733 if ( wpTooltips.hasOwnProperty( translated ) ) { |
|
734 label = wpTooltips[ translated ]; |
|
735 } else if ( wpTooltips.hasOwnProperty( tooltip ) ) { |
|
736 label = wpTooltips[ tooltip ]; |
|
737 } |
|
738 |
|
739 return label ? translated + ' (' + label + ')' : translated; |
|
740 } |
|
741 |
|
742 function replaceButtonsTooltips( buttons ) { |
|
743 |
|
744 if ( ! buttons ) { |
|
745 return; |
|
746 } |
|
747 |
|
748 each( buttons, function( button ) { |
|
749 var tooltip; |
|
750 |
|
751 if ( button && button.settings.tooltip ) { |
|
752 tooltip = getTooltip( button.settings.tooltip ); |
|
753 button.settings.tooltip = tooltip; |
|
754 |
|
755 // Override the aria label wiht the translated tooltip + shortcut. |
|
756 if ( button._aria && button._aria.label ) { |
|
757 button._aria.label = tooltip; |
|
758 } |
|
759 } |
|
760 } ); |
|
761 } |
|
762 |
|
763 function addShortcutsToListbox() { |
|
764 // listbox for the "blocks" drop-down |
|
765 each( editor.theme.panel.find( 'listbox' ), function( listbox ) { |
|
766 if ( listbox && listbox.settings.text === 'Paragraph' ) { |
|
767 each( listbox.settings.values, function( item ) { |
|
768 if ( item.text && wpTooltips.hasOwnProperty( item.text ) ) { |
|
769 item.shortcut = '(' + wpTooltips[ item.text ] + ')'; |
|
770 } |
|
771 } ); |
|
772 } |
|
773 } ); |
|
774 } |
680 |
775 |
681 /** |
776 /** |
682 * Experimental: create a floating toolbar. |
777 * Experimental: create a floating toolbar. |
683 * This functionality will change in the next releases. Not recommended for use by plugins. |
778 * This functionality will change in the next releases. Not recommended for use by plugins. |
684 */ |
779 */ |
1036 activeToolbar.hide(); |
1138 activeToolbar.hide(); |
1037 } |
1139 } |
1038 } |
1140 } |
1039 } |
1141 } |
1040 |
1142 |
1041 // For full height editor. |
1143 editor.dom.bind( editor.getWin(), 'resize', hide ); |
1042 editor.on( 'resizewindow scrollwindow', hide ); |
1144 |
1043 // For scrollable editor. |
1145 if ( editor.inline ) { |
1044 editor.dom.bind( editor.getWin(), 'resize scroll', hide ); |
1146 // Enable `capture` for the event. |
|
1147 // This will hide/reposition the toolbar on any scrolling in the document. |
|
1148 document.addEventListener( 'scroll', hide, true ); |
|
1149 } else { |
|
1150 editor.dom.bind( editor.getWin(), 'scroll', hide ); |
|
1151 // For full height iframe editor. |
|
1152 editor.on( 'resizewindow scrollwindow', hide ); |
|
1153 } |
1045 |
1154 |
1046 editor.on( 'remove', function() { |
1155 editor.on( 'remove', function() { |
|
1156 document.removeEventListener( 'scroll', hide, true ); |
1047 editor.off( 'resizewindow scrollwindow', hide ); |
1157 editor.off( 'resizewindow scrollwindow', hide ); |
1048 editor.dom.unbind( editor.getWin(), 'resize scroll', hide ); |
1158 editor.dom.unbind( editor.getWin(), 'resize scroll', hide ); |
1049 } ); |
1159 } ); |
1050 |
1160 |
1051 editor.on( 'blur hide', hide ); |
1161 editor.on( 'blur hide', hide ); |