Changeset 2435466 for tinymce-advanced

Timestamp:

12/09/2020 01:24:16 PM (5 years ago)

Author:

azaozz

Message:

Updae for WP 5.6.

Location:

tinymce-advanced/branches/dev/src

Files:

• block-editor/classic-paragraph/edit.js (modified) (3 diffs)
• block-editor/classic-paragraph/index.js (modified) (1 diff)
• block-editor/tma-block-editor.css (modified) (1 diff)
• readme.txt (modified) (2 diffs)

tinymce-advanced/branches/dev/src/block-editor/classic-paragraph/edit.js

@@ -4 +4 @@
  */
 
+
 const { wp } = window;
-const { Component, createElement } = wp.element;
-const { BACKSPACE, DELETE, F10 } = wp.keycodes;
+const { debounce } = window._;
+const settings = window.tadvBlockRegister;
+
+const { BlockControls, useBlockProps } = wp.blockEditor;
+const { ToolbarGroup } = wp.components;
+const { Component, createElement, Fragment, useEffect, useRef } = wp.element;
+const { BACKSPACE, DELETE, F10, isKeyboardEvent } = wp.keycodes;
 
 // TODO
 // const { BlockControls, BlockAlignmentToolbar } = wp.blockEditor;
-
-const settings = window.tadvBlockRegister;
-
 
 function isTmceEmpty( editor ) {
@@ -30 +33 @@
 }
 
-export default class ClassicEdit extends Component {
-    constructor( props ) {
-        super( props );
-        this.initialize = this.initialize.bind( this );
-        this.onSetup = this.onSetup.bind( this );
-        this.focus = this.focus.bind( this );
-    }
-
-    componentDidMount() {
+export default function TadvEdit( {
+    clientId,
+    attributes: { content },
+    setAttributes,
+    onReplace,
+} ) {
+    const didMount = useRef( false );
+
+    useEffect( () => {
+        if ( ! didMount.current ) {
+            return;
+        }
+
+        const editor = window.tinymce.get( `editor-${ clientId }` );
+        let currentContent;
+
+        if ( editor ) {
+            currentContent = editor.getContent();
+        }
+
+        if ( currentContent !== content ) {
+            editor.setContent( content || '' );
+        }
+    }, [ content ] );
+
+    useEffect( () => {
         const { baseURL, suffix } = window.wpEditorL10n.tinymce;
+
+        didMount.current = true;
 
         window.tinymce.EditorManager.overrideDefaults( {
@@ -46 +68 @@
         } );
 
+        function onSetup( editor ) {
+            let bookmark;
+
+            if ( content ) {
+                editor.on( 'loadContent', () => editor.setContent( content ) );
+            }
+
+            editor.on( 'blur', () => {
+                bookmark = editor.selection.getBookmark( 2, true );
+                // There is an issue with Chrome and the editor.focus call in core at https://core.trac.wordpress.org/browser/trunk/src/js/_enqueues/lib/link.js#L451.
+                // This causes a scroll to the top of editor content on return from some content updating dialogs so tracking
+                // scroll position until this is fixed in core.
+                const scrollContainer = document.querySelector(
+                    '.interface-interface-skeleton__content'
+                );
+                const scrollPosition = scrollContainer.scrollTop;
+
+                setAttributes( {
+                    content: editor.getContent(),
+                } );
+
+                editor.once( 'focus', () => {
+                    if ( bookmark ) {
+                        editor.selection.moveToBookmark( bookmark );
+                        if ( scrollContainer.scrollTop !== scrollPosition ) {
+                            scrollContainer.scrollTop = scrollPosition;
+                        }
+                    }
+                } );
+
+                return false;
+            } );
+
+            editor.on( 'mousedown touchstart', () => {
+                bookmark = null;
+            } );
+
+            const debouncedOnChange = debounce( () => {
+                const value = editor.getContent();
+
+                if ( value !== editor._lastChange ) {
+                    editor._lastChange = value;
+                    setAttributes( {
+                        content: value,
+                    } );
+                }
+            }, 250 );
+            editor.on( 'Paste Change input Undo Redo', debouncedOnChange );
+
+            // We need to cancel the debounce call because when we remove
+            // the editor (onUnmount) this callback is executed in
+            // another tick. This results in setting the content to empty.
+            editor.on( 'remove', debouncedOnChange.cancel );
+
+            editor.on( 'keydown', ( event ) => {
+                if ( isKeyboardEvent.primary( event, 'z' ) ) {
+                    // Prevent the gutenberg undo kicking in so TinyMCE undo stack works as expected
+                    event.stopPropagation();
+                }
+
+                if (
+                    ( event.keyCode === BACKSPACE ||
+                        event.keyCode === DELETE ) &&
+                    isTmceEmpty( editor )
+                ) {
+                    // delete the block
+                    onReplace( [] );
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                }
+
+                const { altKey } = event;
+                /*
+                 * Prevent Mousetrap from kicking in: TinyMCE already uses its own
+                 * `alt+f10` shortcut to focus its toolbar.
+                 */
+                if ( altKey && event.keyCode === F10 ) {
+                    event.stopPropagation();
+                }
+            } );
+
+            editor.on( 'init', () => {
+                const rootNode = editor.getBody();
+
+                // Create the toolbar by refocussing the editor.
+                if ( rootNode.ownerDocument.activeElement === rootNode ) {
+                    rootNode.blur();
+                    editor.focus();
+                }
+            } );
+        }
+
+        function initialize() {
+            const { settings } = window.wpEditorL10n.tinymce;
+            wp.oldEditor.initialize( `editor-${ clientId }`, {
+                tinymce: {
+                    ...settings,
+                    inline: true,
+                    content_css: false,
+                    fixed_toolbar_container: `#toolbar-${ clientId }`,
+                    setup: onSetup,
+                },
+            } );
+        }
+
+        function onReadyStateChange() {
+            if ( document.readyState === 'complete' ) {
+                initialize();
+            }
+        }
+
         if ( document.readyState === 'complete' ) {
-            this.initialize();
+            initialize();
         } else {
-            window.addEventListener( 'DOMContentLoaded', this.initialize );
-        }
-    }
-
-    componentWillUnmount() {
-        window.addEventListener( 'DOMContentLoaded', this.initialize );
-        wp.oldEditor.remove( `editor-${ this.props.clientId }` );
-    }
-
-    componentDidUpdate( prevProps ) {
-        const { clientId, isSelected, attributes: { content } } = this.props;
+            document.addEventListener( 'readystatechange', onReadyStateChange );
+        }
+
+        return () => {
+            document.removeEventListener(
+                'readystatechange',
+                onReadyStateChange
+            );
+            wp.oldEditor.remove( `editor-${ clientId }` );
+        };
+    }, [] );
+
+    function focus() {
         const editor = window.tinymce.get( `editor-${ clientId }` );
-
-        if ( prevProps.attributes.content !== content && this.content !== content ) {
-            editor.setContent( content || '' );
-        }
-
-        if ( ! isSelected && editor.initialized ) {
-            editor.fire( 'blur', { wpBlockDidUpdate: true } );
-        }
-    }
-
-    initialize() {
-        const { clientId, setAttributes } = this.props;
-        const { settings } = window.wpEditorL10n.tinymce;
-        wp.oldEditor.initialize( `editor-${ clientId }`, {
-            tinymce: {
-                ...settings,
-                inline: true,
-                content_css: false,
-                fixed_toolbar_container: `#toolbar-${ clientId }`,
-                setup: this.onSetup,
-            },
-        } );
-
-        setAttributes({
-            id: clientId,
-        });
-    }
-
-    onSetup( editor ) {
-        const { attributes: { content }, setAttributes } = this.props;
-        let bookmark;
-
-        this.editor = editor;
-
-        if ( content ) {
-            editor.on( 'loadContent', () => editor.setContent( content ) );
-        }
-
-        editor.on( 'blur', ( event ) => {
-            if ( event.wpBlockDidUpdate ) {
-                return;
-            }
-
-            bookmark = editor.selection.getBookmark( 2, true );
-            this.content = editor.getContent();
-            const { isSelected } = this.props;
-
-            setAttributes( {
-                content: this.content,
-            } );
-
-            editor.once( 'focus', () => {
-                if ( bookmark ) {
-                    editor.selection.moveToBookmark( bookmark );
-                }
-            } );
-
-            if ( isSelected ) {
-                return false;
-            }
-        } );
-
-        editor.on( 'mousedown touchstart', () => {
-            bookmark = null;
-        } );
-
-        editor.on( 'keydown', ( event ) => {
-            if ( ( event.keyCode === BACKSPACE || event.keyCode === DELETE ) && isTmceEmpty( editor ) ) {
-                // delete the block
-                this.props.onReplace( [] );
-                event.preventDefault();
-                event.stopImmediatePropagation();
-            }
-
-            const { altKey } = event;
-            /*
-             * Prevent Mousetrap from kicking in: TinyMCE already uses its own
-             * `alt+f10` shortcut to focus its toolbar.
-             */
-            if ( altKey && event.keyCode === F10 ) {
-                event.stopPropagation();
-            }
-        } );
-
-        editor.on( 'init', () => {
-            const rootNode = this.editor.getBody();
-
-            // Create the toolbar by refocussing the editor.
-            if ( document.activeElement === rootNode ) {
-                rootNode.blur();
-                this.editor.focus();
-            }
-        } );
-    }
-
-    focus() {
-        if ( this.editor ) {
-            this.editor.focus();
-        }
-    }
-
-    onToolbarKeyDown( event ) {
+        if ( editor ) {
+            editor.focus();
+        }
+    }
+
+    function onToolbarKeyDown( event ) {
+        // Prevent WritingFlow from kicking in and allow arrows navigation on the toolbar.
         event.stopPropagation();
+        // Prevent Mousetrap from moving focus to the top toolbar when pressing `alt+f10` on this block toolbar.
         event.nativeEvent.stopImmediatePropagation();
     }
 
-    render() {
-        const { clientId, name, attributes, setAttributes } = this.props;
-
-        // TODO
-        //const width = attributes.width || null;
-
-        return [
-            createElement( 'div', {
-                key: "toolbar",
+    return createElement(
+        'div',
+        useBlockProps(),
+        createElement(
+            'div',
+            {
+                key: 'toolbar',
                 id: `toolbar-${ clientId }`,
-                className: "block-library-classic__toolbar tma-classic-paragraph__toolbar",
-                onClick: this.focus,
+                className: 'block-library-classic__toolbar tma-classic-paragraph__toolbar',
+                onClick: focus,
                 'data-placeholder': settings.classicParagraphTitle,
-                onKeyDown: this.onToolbarKeyDown,
-            } ),
-            createElement( 'div', {
-                key: "editor",
+                onKeyDown: onToolbarKeyDown,
+            }
+        ),
+        createElement(
+            'div',
+            {
+                key: 'editor',
                 id: `editor-${ clientId }`,
-                className: "wp-block-freeform block-library-rich-text__tinymce tma-classic-paragraph",
-            } ),
-
-            /* TODO
-            createElement( BlockControls,
-                null,
-                createElement( BlockAlignmentToolbar, {
-                    value: width,
-                    onChange: ( nextWidth ) => setAttributes( { width: nextWidth } ),
-                    controls: [ 'center', 'wide', 'full' ],
-                } )
-            ),
-            */
-        ];
-    }
+                className: 'wp-block-freeform block-library-rich-text__tinymce tma-classic-paragraph',
+            }
+        )
+    );
+
+    /* TODO: Add alignment toolbar with "wide" and "full" buttons?
+        const width = attributes.width || null;
+
+        createElement( BlockControls,
+            null,
+            createElement( BlockAlignmentToolbar, {
+                value: width,
+                onChange: ( nextWidth ) => setAttributes( { width: nextWidth } ),
+                controls: [ 'center', 'wide', 'full' ],
+            } )
+        )
+    */
 }

tinymce-advanced/branches/dev/src/block-editor/classic-paragraph/index.js

@@ -48 +48 @@
                         label: __( 'Convert to Blocks' ),
                         onClick: convertToBlocks,
-                        small: null,
-                        role: 'menuitem',
                     }
                 );

tinymce-advanced/branches/dev/src/block-editor/tma-block-editor.css

@@ -35 +35 @@
 
 .block-library-classic__toolbar .mce-menubar i.mce-caret {
-    margin-top: .35em;
+    margin-top: .4em;
 }
 

tinymce-advanced/branches/dev/src/readme.txt

@@ -2 +2 @@
 Contributors: automattic, azaozz
 Tags: block editor, classic editor, editor, Gutenberg, formatting, tinymce, write
-Requires at least: 5.5
-Tested up to: 5.5
-Stable tag: 5.5.0
+Requires at least: 5.6
+Tested up to: 5.6
+Stable tag: 5.6.0
 Requires PHP: 5.6
 License: GPLv2
@@ -47 +47 @@
 
 == Changelog ==
+
+= 5.6.0 =
+* Updated for WordPress 5.6.
 
 = 5.5.1 =