[MM-56713] Show consistent markdown formatting buttons & keyboard shortcuts when editing messages (#29398)

* footer

* changes

* edit

* some changes

* form submit

* ci fixes

* rev fix 1

* ci fix

* Fixed some styles

* Added delete on empty post option

* fix E2E tests

* fix more tests

* Fixed UI isses when editing post in RHS

* Fixed formatting bar behjaviour

* Reset draft to original post when cancelling or escaping

* DFisplayed @mention warning

* fixed existing test

* Added test for @mention during editing

* Displayed long message warning during edit post

* Removed a console log:

* Handled message with image links when using image proxy

* Fixed a11y styling for button

* Fixed emoji picker keyboard shortcut

* Checnged edit box ID

* Added draft test

* Fixed edit text box id

* e2e fix

* e2e fix

* handled deleting empty fposts

* Fixed e2e test

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: Harshil Sharma <harshil.sharma@mattermost.com>
Co-authored-by: yasserfaraazkhan <attitude3cena.yf@gmail.com>

e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/dot_menu_spec.js

@@ -68,8 +68,8 @@ describe('Keyboard Shortcuts', () => {
             cy.uiPostDropdownMenuShortcut(postId, 'Edit', 'E');
 
             // # add test to the message
-            cy.get('body').type(postEditMessage);
-            cy.get('body').type('{enter}');
+            cy.get('#edit_textbox').type(postEditMessage);
+            cy.get('#edit_textbox').type('{enter}');
 
             // * Verify edited message
             cy.uiWaitUntilMessagePostedIncludes(postMessage + postEditMessage);

e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/up_arrow_edit_message_rhs_spec.js

@@ -26,7 +26,7 @@ describe('Keyboard Shortcuts', () => {
             cy.clickPostDotMenu(postId);
             cy.findByText('Reply').click();
             const replyMessage = 'Well, hello there.';
-            cy.uiGetReplyTextBox().type(replyMessage);
+            cy.uiGetReplyTextBox().type(replyMessage, {delay: 100});
             cy.uiGetReplyTextBox().type('{enter}');
             cy.uiWaitUntilMessagePostedIncludes(replyMessage);
 

e2e-tests/cypress/tests/integration/channels/messaging/center_channel_rhs_overlap_spec.js

@@ -116,7 +116,8 @@ describe('Messaging', () => {
             cy.get('#edit_textbox').should('be.visible');
 
             // * Update the post message and type ENTER
-            cy.get('#edit_textbox').invoke('val', '').type(message2).type('{enter}').wait(TIMEOUTS.HALF_SEC);
+            cy.get('#edit_textbox').clear().type(message2);
+            cy.get('#edit_textbox').type('{enter}').wait(TIMEOUTS.HALF_SEC);
 
             // * Edit Post Input is still visible after typing ENTER
             cy.get('#edit_textbox').should('be.visible');
@@ -764,9 +765,6 @@ describe('Messaging', () => {
             // * Edit Post Input should appear
             cy.get('#edit_textbox').should('be.visible');
 
-            // # Check that a scrollbar exists
-            cy.get('.post--editing__wrapper.scroll').should('be.visible');
-
             // # Update the message
             cy.get('#edit_textbox', {timeout: TIMEOUTS.FIVE_SEC}).type(' test').wait(TIMEOUTS.HALF_SEC);
 

e2e-tests/cypress/tests/integration/channels/messaging/direct_message_spec.js

@@ -67,7 +67,7 @@ describe('Direct Message', () => {
 
             // * Edit post Input should appear, and edit the post
             cy.get('#edit_textbox').should('be.visible');
-            cy.get('#edit_textbox').should('have.text', originalMessage).type(' World{enter}');
+            cy.get('#edit_textbox').should('have.text', originalMessage).type(' World{enter}', {delay: 100});
             cy.get('#edit_textbox').should('not.exist');
 
             // * Verify that last post does contain "Edited"

e2e-tests/cypress/tests/integration/channels/messaging/edit_message_spec.js

@@ -65,7 +65,7 @@ describe('Edit Message', () => {
         cy.get('#suggestionList').should('not.exist');
 
         // # In the modal click the emoji picker icon
-        cy.get('#editPostEmoji').click();
+        cy.get('div.post-edit__container button#emojiPickerButton').click();
 
         // * Assert emoji picker is visible
         cy.get('#emojiPicker').should('be.visible');
@@ -93,7 +93,7 @@ describe('Edit Message', () => {
                 cy.get(`#edit_post_${postId}`).click();
 
                 // # Edit the post
-                cy.get('#edit_textbox').type('Some text {enter}');
+                cy.get('#edit_textbox').type('Some text {enter}', {delay: 100});
 
                 // # Mouseover the post again
                 cy.get(`#post_${postId}`).trigger('mouseover');
@@ -138,7 +138,7 @@ describe('Edit Message', () => {
 
             // * Edit Post Input should appear, and edit the post
             cy.get('#edit_textbox').should('be.visible');
-            cy.get('#edit_textbox').should('have.text', secondMessage).type(' Another new message{enter}');
+            cy.get('#edit_textbox').should('have.text', secondMessage).type(' Another new message{enter}', {delay: 100});
             cy.get('#edit_textbox').should('not.exist');
 
             // * Check the second post and verify that it contains new edited message.
@@ -162,7 +162,7 @@ describe('Edit Message', () => {
             cy.get('#edit_textbox').should('be.visible');
 
             // * Press the escape key to cancel
-            cy.get('#edit_textbox').should('have.text', message).type(' Another new message{esc}');
+            cy.get('#edit_textbox').should('have.text', message).type(' Another new message{esc}', {delay: 100});
             cy.get('#edit_textbox').should('not.exist');
 
             // * Check that the message wasn't edited
@@ -195,14 +195,14 @@ describe('Edit Message', () => {
         cy.get('#edit_textbox').type(' @user');
 
         // # Press the enter key
-        cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).focus().type('{enter}');
+        cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).focus().type('{enter}', {delay: 100});
 
         // * Check if the textbox contains expected text
         cy.get('.post-body__info').should('be.visible');
         cy.get('.post-body__info').contains('span', "Editing this message with an '@mention' will not notify the recipient.");
 
         // # Press the escape key
-        cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).focus().type('{enter}');
+        cy.get('#edit_textbox').wait(TIMEOUTS.HALF_SEC).focus().type('{enter}', {delay: 100});
 
         // # Open the RHS
         cy.getLastPostId().then((postId) => {