TinyMce Reply Issue

[brashell]

When enabling TinyMce and attempting to create a reply to a reply within a topic, you are unable to create any input or press buttons.

• WordPress 3.9.1 Multisite subfolder
• It does not appear to be a Javascript conflict with another plugin
• Without tinymce enabled it works fine

Here is a youtube video of the bug:

​http://youtu.be/L1rYwcC87Tk

[johnjamesjacoby]

Move from awaiting review to 2.7 milestone.

[netweb]

#2700 was marked as a duplicate.

[Stagger Lee]

This is fix from latest WP Edit plugin. (comments, but same is when adapted to bbPress)
PHP code:

// Enable comment editor
		add_filter('comment_form_defaults', 'wpep_comment_form_editor');
			add_action('wp_enqueue_scripts', 'wpep_comment_form_scripts');
			add_action('init', 'wpep_comment_form_allowed_tags');
		
		function wpep_comment_form_editor($fields) {
			$args = array(
				'teeny' => true, 
				'textarea_rows' => '13', 
				'media_buttons' => false, 
				'tinymce' => array('toolbar1' => 'bold italic underline blockquote strikethrough bullist numlist alignleft aligncenter alignright undo redo link unlink')
				);
			
			ob_start();
			wp_editor('', 'comment', $args);
			$fields['comment_field'] = ob_get_clean();
			return $fields;
		}
		
		function wpep_comment_form_scripts(){
		 
			wp_deregister_script('comment-reply');
			wp_register_script( 'comment-reply', get_template_directory_uri() . '/js/comment-reply.js', '', true );
		}
		
		function wpep_comment_form_allowed_tags() {
		
			global $allowedtags;
			
			$allowedtags['ul'] = array();
			$allowedtags['ol'] = array();
			$allowedtags['li'] = array();
			$allowedtags['strong'] = array();
			$allowedtags['ins'] = array(
				'datetime' => true
			);
			$allowedtags['del'] = array(
				'datetime' => true
			);
			$allowedtags['pre'] = array(
				'lang' => true,
				'line' => true
			);
			$allowedtags['span'] = array(
				'style' => true
			);
			$allowedtags['img'] = array(
				'width' => true,
				'height' => true,
				'src' => true,
				'alt' => true
			);
			$allowedtags['a'] = array(
				'target' => true,
				'href' => true,
				'title' => true,
			);
		}

JS file:

addComment = {
    moveForm : function(commId, parentId, respondId, postId) {
        var t = this;
 
        // Remove editor if necessary
        t.red();
 
        var div,
        comm = t.I(commId),
        respond = t.I(respondId),
        cancel = t.I('cancel-comment-reply-link'),
        parent = t.I('comment_parent'), post = t.I('comment_post_ID');
 
        if ( ! comm || ! respond || ! cancel || ! parent)
                return;
 
        t.respondId = respondId;
        postId = postId || false;
 
        if ( ! t.I('wp-temp-form-div') ) {
                div = document.createElement('div');
                div.id = 'wp-temp-form-div';
                div.style.display = 'none';
                respond.parentNode.insertBefore(div, respond);
        }
 
        comm.parentNode.insertBefore(respond, comm.nextSibling);
 
        if ( post && postId )
            post.value = postId;
        parent.value = parentId;
        cancel.style.display = '';
 
        // Add editor if necessary
        t.aed();
 
        cancel.onclick = function() {
            var t = addComment;
 
            // Remove editor if necessary
            t.red();
 
            var temp = t.I('wp-temp-form-div'), respond = t.I(t.respondId);
 
            if ( ! temp || ! respond )
                return;
 
            t.I('comment_parent').value = '0';
            temp.parentNode.insertBefore(respond, temp);
            temp.parentNode.removeChild(temp);
            this.style.display = 'none';
            this.onclick = null;
 
            // Add editor if necessary
            t.aed();
 
            return false;
        }
 
        return false;
    },
    I : function(e) {
        return document.getElementById(e);
    },
    red : function() {
        /* TinyMCE defined means wp_editor has Visual or both Visual and HTML/Text editors enabled
         * If editor is in HTML editor only mode our work here is unnecessary
         */
        if(typeof(tinyMCE) == 'undefined')
            return;
 
        var tmce = tinyMCE.get('comment');
        if (tmce && !tmce.isHidden()){
            /* Remove TinyMCE from textarea if necessary
             * and mark the current editor tab as Visual
             */
            this.mode = 'tmce';
            tmce.remove();
        }else{
            /* Html editor can be moved in DOM without removal
             * so we just mark current editor tab as Html
             */
            this.mode = 'html';
        }
    },
    aed : function() {
        if(typeof(tinyMCE) == 'undefined')
            return;
 
        if (this.mode == 'tmce'){
            /* Add Visual editor to textarea using code from wp-includes/js/editor.js
             * enqueued by _WP_Editors PHP class whenever Visual editor is enabled.
             * This code switches to Visual editor with id 'comment'
             */
            switchEditors.go('comment', 'tmce');
        }else if (this.mode == 'html'){
            /* Add HTML/Text editor to textarea using code from wp-includes/js/editor.js
             * enqueued by _WP_Editors PHP class whenever Visual editor is enabled.
             * If Visual editor is not enabled 'return' above makes this code off limits.
             * This code switches to HTML editor with id 'comment'
             */
            switchEditors.go('comment', 'html');
        }
    }
}

[netweb]

Marking this as a duplicate of #2971 and which was fixed in r6096

[chherbst]

This is not a duplicate of #2971. This happens even with the fix from r6096.

[chherbst]

The attached patch is an adopted version of the one in comment #3 with all unnecessary parts removed.

[johnjamesjacoby]

Attached patch does the following:

• Iterates on the great work from @chherbst
• Adds docs
• Renames some functions for clarity
• Animates up or down to the new form location
• Adds margin around reply form when nested

[johnjamesjacoby]

In 6964:

Replies: ensure visual editor works correctly with hierarchical replies.

This commit updates reply.js in the default theme to include a bit of element juggling that prevents TinyMCE from freezing up when it is relocated on the page.

Before this commit, clicking "Reply" while having the Visual Editor enabled would cause it to not be able to be typed inside of. Now, when clicking commit, TinyMCE is correctly reinvoked in its new location, and the page will expediently scroll to that new position, fixing a related UX bug where it was possible for the reply form to get lost inside of deep hierarchies.

Props chherbst. Fixes #2646. For 2.7, trunk.

[johnjamesjacoby]

In 6965:

Replies: ensure visual editor works correctly with hierarchical replies.

This commit updates reply.js in the default theme to include a bit of element juggling that prevents TinyMCE from freezing up when it is relocated on the page.

Before this commit, clicking "Reply" while having the Visual Editor enabled would cause it to not be able to be typed inside of. Now, when clicking commit, TinyMCE is correctly reinvoked in its new location, and the page will expediently scroll to that new position, fixing a related UX bug where it was possible for the reply form to get lost inside of deep hierarchies.

Props chherbst. Fixes #2646. For 2.6.2, branches/2.6.