Chore/1984 textarea (#1986)

* chore: Replace ContentEditable with textarea on desktop * fix: up/down arrows in channel input #1984 --------- Co-authored-by: Lucas Leblow <[email protected]>
TryQuiet · Oct 25, 2023 · 6b96b67 · 6b96b67
1 parent d5c0914
commit 6b96b67
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 306 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,10 @@
 
 * Revert adjusting bootstrap scripts for developing on Windows
 
+* Channel input - replaced ContentEditable with textarea
+
+* Fix - up/down arrows now work properly inside channel input (textarea)
+
 [2.0.1-alpha.2]
 
 * UI layer for taken usernames for desktop and mobile

diff --git a/...ponents/Channel/Channel.regression.cy.tsx/message input words wrapping-base.png b/...ponents/Channel/Channel.regression.cy.tsx/message input words wrapping-base.png
diff --git a/packages/desktop/package-lock.json b/packages/desktop/package-lock.json
diff --git a/packages/desktop/package.json b/packages/desktop/package.json
@@ -231,7 +231,6 @@
     "rc-scrollbars": "^1.1.5",
     "react": "18.1.0",
     "react-alice-carousel": "^1.15.3",
-    "react-contenteditable": "^3.3.3",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",

diff --git a/packages/desktop/src/renderer/components/Channel/Channel.regression.cy.tsx b/packages/desktop/src/renderer/components/Channel/Channel.regression.cy.tsx
@@ -43,16 +43,13 @@ describe('Scroll behavior test', () => {
 
   it('scroll should be at the bottom after entering channel', () => {
     cy.get(channelContent).compareSnapshot('after launch', {
-      capture: 'fullPage'
+      capture: 'fullPage',
     })
   })
 
   it('scroll should be at the bottom after sending messages', () => {
     cy.get(messageInput).focus().type('luke where are you?').type('{enter}')
-    cy.get(messageInput)
-      .focus()
-      .type('you underestimate the power of the force')
-      .type('{enter}')
+    cy.get(messageInput).focus().type('you underestimate the power of the force').type('{enter}')
     cy.get(channelContent).compareSnapshot('send after enter')
   })
 
@@ -62,10 +59,7 @@ describe('Scroll behavior test', () => {
     cy.get(channelContent).compareSnapshot('scroll to the middle')
 
     cy.get(messageInput).focus().type('obi wan was wrong').type('{enter}')
-    cy.get(messageInput)
-      .focus()
-      .type('actually, he is on the dark side')
-      .type('{enter}')
+    cy.get(messageInput).focus().type('actually, he is on the dark side').type('{enter}')
 
     cy.get(channelContent).compareSnapshot('send after scroll')
   })
@@ -91,15 +85,15 @@ describe('Scroll behavior test', () => {
   it('PageUp keydown should scroll message list up.', () => {
     cy.get(messageInput).focus().type('{pageup}')
     cy.get(channelContent).compareSnapshot('after pageup', {
-      capture: 'fullPage'
+      capture: 'fullPage',
     })
   })
 
   it('PageDown keydown should scroll message list down.', () => {
     cy.get(channelContent).scrollTo(0, 0)
     cy.get(messageInput).focus().type('{pagedown}')
     cy.get(channelContent).compareSnapshot('after pagedown', {
-      capture: 'fullPage'
+      capture: 'fullPage',
     })
   })
 
@@ -109,7 +103,7 @@ describe('Scroll behavior test', () => {
       .type('luke where are you?')
       .type('{shift+enter}')
       .type('you underestimate the power of the force')
-      .should('have.text', 'luke where are you?you underestimate the power of the force')
+      .should('have.text', 'luke where are you?\nyou underestimate the power of the force')
   })
 
   it('Check words wrapping in message input', () => {
@@ -120,9 +114,7 @@ describe('Scroll behavior test', () => {
       }
       return word
     }
-    cy.get(messageInput)
-      .focus()
-      .type(longWord())
+    cy.get(messageInput).focus().type(longWord())
 
     cy.get(messageInput).compareSnapshot('message input words wrapping')
   })

diff --git a/packages/desktop/src/renderer/components/SearchModal/SearchModal.tsx b/packages/desktop/src/renderer/components/SearchModal/SearchModal.tsx
@@ -58,7 +58,7 @@ const SearchModal = () => {
     }
   }, [handleKeyDown])
 
-  if (dynamicSearchedChannelsSelector.length === 0) return null
+  if (!searchChannelModal.open || dynamicSearchedChannelsSelector.length === 0) return null
   return (
     <SearchModalComponent
       {...searchChannelModal}

diff --git a/...es/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.stories.tsx b/...es/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { ComponentStory, ComponentMeta } from '@storybook/react'
-
+import CssBaseline from '@mui/material/CssBaseline'
 import { INPUT_STATE } from './InputState.enum'
 
 import { ChannelInputComponent, ChannelInputProps } from './ChannelInput'
@@ -20,7 +20,6 @@ export const LongMessage = Template.bind({})
 
 const args: ChannelInputProps = {
   channelId: 'channelId',
-  channelParticipants: [{ nickname: 'john' }, { nickname: 'emily' }],
   inputPlaceholder: '#general as @alice',
   onChange: function (_arg: string): void {},
   onKeyPress: function (input: string): void {
@@ -35,7 +34,6 @@ const args: ChannelInputProps = {
 
 const argsDisabledInput: ChannelInputProps = {
   channelId: 'channelId',
-  channelParticipants: [{ nickname: 'john' }, { nickname: 'emily' }],
   inputPlaceholder: '#general as @alice',
   onChange: function (_arg: string): void {},
   onKeyPress: function (input: string): void {
@@ -246,7 +244,6 @@ not easy being.
 
 const argsLongMessage: ChannelInputProps = {
   channelId: 'channelId',
-  channelParticipants: [{ nickname: 'john' }, { nickname: 'emily' }],
   inputPlaceholder: '#general as @alice',
   initialMessage: initialMessage,
   onChange: function (_arg: string): void {},

diff --git a/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.test.tsx b/packages/desktop/src/renderer/components/widgets/channels/ChannelInput/ChannelInput.test.tsx
@@ -28,7 +28,7 @@ describe('ChannelInput', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root ChannelInputroot css-j3fbgh-MuiGrid-root"
+            class="MuiGrid-root ChannelInputroot css-1n4ubjj-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column ChannelInputrootContent css-6gh8l0-MuiGrid-root"
@@ -39,18 +39,11 @@ describe('ChannelInput', () => {
                 <div
                   class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-true ChannelInputtextfield css-1r61agb-MuiGrid-root"
                 >
-                  <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true ChannelInputtextArea css-1vd824g-MuiGrid-root"
-                  >
-                    <div
-                      class="ChannelInputinput"
-                      contenteditable="true"
-                      data-testid="messageInput"
-                      placeholder="Message #channel as @user"
-                    >
-                      
-                    </div>
-                  </div>
+                  <textarea
+                    class="ChannelInputinput"
+                    data-testid="messageInput"
+                    placeholder="Message #channel as @user"
+                  />
                   <div
                     class="ChannelInputicons"
                   >
@@ -121,7 +114,7 @@ describe('ChannelInput', () => {
       <body>
         <div>
           <div
-            class="MuiGrid-root ChannelInputroot ChannelInputnotAllowed css-j3fbgh-MuiGrid-root"
+            class="MuiGrid-root ChannelInputroot ChannelInputnotAllowed css-1n4ubjj-MuiGrid-root"
           >
             <div
               class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column ChannelInputrootContent css-6gh8l0-MuiGrid-root"
@@ -132,19 +125,12 @@ describe('ChannelInput', () => {
                 <div
                   class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-true ChannelInputtextfield css-1r61agb-MuiGrid-root"
                 >
-                  <div
-                    class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-true ChannelInputtextArea css-1vd824g-MuiGrid-root"
-                  >
-                    <div
-                      class="ChannelInputinput"
-                      contenteditable="false"
-                      data-testid="messageInput"
-                      disabled=""
-                      placeholder="Message #channel as @user"
-                    >
-                      
-                    </div>
-                  </div>
+                  <textarea
+                    class="ChannelInputinput"
+                    data-testid="messageInput"
+                    disabled=""
+                    placeholder="Message #channel as @user"
+                  />
                   <div
                     class="ChannelInputicons"
                   >