Feat/540-emoji-codes

CHANGELOG.md

@@ -6,15 +6,16 @@
 
 * Adds sticky date markers to the chat view [#505](https://github.com/TryQuiet/quiet/issues/505)
 * Adds meaningful text to date markers, like "Today", "Yesterday", "Friday", or "Nov 30, 1999" [#2745](https://github.com/TryQuiet/quiet/issues/2745)
+* You can now type emoticons (<3) and emojicodes (:heart:) with tab completion and a handy dropdown. [#540](https://github.com/TryQuiet/quiet/issues/540) (thanks @agiledev24 for your initial work on this!)
+
+### Fixes
+* Fixes an issue where heart emojis were displaying all tiny, ASCII, and goth. Now our hearts are big and bright red, for vibes! [#510](https://github.com/TryQuiet/quiet/issues/510)
+* Fixes back button navigation issues in user profile/edit screens ([#2570]https://github.com/TryQuiet/quiet/issues/2570)
 
 ### Chores
 
 * Improves speed, reliability, and documentation for Cypress tests
 
-### Fixes
-
-* Fixes back button navigation issues in user profile/edit screens ([#2570]https://github.com/TryQuiet/quiet/issues/2570)
-
 ## [4.0.3]
 
 ### New features

packages/desktop/src/renderer/components/Channel/Channel.cy.tsx

@@ -80,7 +80,7 @@ describe('Scroll behavior test', () => {
   })
 
   it('PageUp keydown should scroll message list up.', () => {
-    cy.get(messageInput).focus().type('{pageup}{pageup}{pageup}{pageup}{pageup}{pageup}{pageup}')
+    cy.get(messageInput).focus().type('{pageup}{pageup}{pageup}{pageup}{pageup}{pageup}{pageup}{pageup}{pageup}')
 
     cy.get(channelContent).then($el => {
       const container = $el[0]
@@ -90,8 +90,13 @@ describe('Scroll behavior test', () => {
   })
 
   it('PageDown keydown should scroll message list down.', () => {
+    // note that Cypress UI before/after views do not correctly display the scroll position; to see the effect for debugging purposes, insert wait statements to slow down the test
     cy.get(channelContent).scrollTo(0, 0)
-    cy.get(messageInput).focus().type('{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}')
+    cy.get(messageInput)
+      .focus()
+      .type(
+        '{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}{pagedown}'
+      )
     cy.get(channelContent).assertScrolledToBottom()
   })
 

packages/desktop/src/renderer/components/Channel/Channel.emoji.cy.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import CssBaseline from '@mui/material/CssBaseline'
+import { composeStories, setGlobalConfig } from '@storybook/testing-react'
+import { it, beforeEach, cy, Cypress, describe } from 'local-cypress'
+
+import * as stories from './Channel.stories'
+import { withTheme } from '../../storybook/decorators'
+import { mount } from 'cypress/react18'
+
+const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
+Cypress.on('uncaught:exception', err => {
+  // returning false here prevents Cypress from failing the test
+  if (resizeObserverLoopErrRe.test(err.message)) {
+    return false
+  }
+})
+
+// @ts-expect-error
+setGlobalConfig(withTheme)
+
+// Use SendingMessagesWithScroll story to avoid TypeScript errors in other stories
+const { SendingMessagesWithScroll } = composeStories(stories)
+
+describe('Emoji conversion in code blocks test', () => {
+  beforeEach(() => {
+    mount(
+      <React.Fragment>
+        <CssBaseline>
+          <SendingMessagesWithScroll />
+        </CssBaseline>
+      </React.Fragment>
+    )
+    cy.wait(0)
+  })
+
+  it('should NOT convert text typed inside an unclosed code fence', () => {
+    cy.get('[data-testid="messageInput"]').type('```Some code :) ')
+
+    // The code fence is still open (no closing triple backticks).
+    // So ":) " should remain literal and not become an emoji.
+    cy.get('[data-testid="messageInput"]').should('have.value', '```Some code :) ')
+  })
+
+  it('should convert text immediately after closing the code fence', () => {
+    cy.get('[data-testid="messageInput"]')
+      // Start an open code fence
+      .type('```Inside code block :smile:')
+      // Still open => :smile: remains literal
+      .should('have.value', '```Inside code block :smile:')
+      // Close the code block
+      .type('``` ')
+      // Now that fence is closed, the space after “``` ” is outside code block
+      // Type a known emoticon
+      .type(':p')
+      .should('have.value', '```Inside code block :smile:``` :p')
+      // Type punctuation => triggers conversion of :p
+      .type('.')
+
+    cy.get('[data-testid="messageInput"]').should('have.value', '```Inside code block :smile:``` 😛.')
+  })
+
+  it('should convert text typed entirely outside code fences', () => {
+    // Type something normal outside code block
+    cy.get('[data-testid="messageInput"]').type('Hello :smile: ').should('have.value', 'Hello 😄 ')
+  })
+
+  it('should handle multiple code fences correctly', () => {
+    cy.get('[data-testid="messageInput"]')
+      // First code fence
+      .type('```Block1 :)``` code between ```Block2 :heart: ')
+
+    // "Block1 :)" is inside the first code fence => no conversion
+    // "Block2 :heart:" is inside second code fence => no conversion yet
+    cy.get('[data-testid="messageInput"]').should('have.value', '```Block1 :)``` code between ```Block2 :heart: ')
+
+    // close second code fence
+    cy.get('[data-testid="messageInput"]').type('``` ')
+
+    // After closing the second fence, type a space + emoticon
+    cy.get('[data-testid="messageInput"]').type(':p ')
+
+    // Now the :p should convert to 😛 because we’re outside all fences
+    cy.get('[data-testid="messageInput"]').should(
+      'have.value',
+      '```Block1 :)``` code between ```Block2 :heart: ``` 😛 '
+    )
+  })
+})

packages/desktop/src/renderer/components/Channel/Channel.emoji.dropdown.cy.tsx

@@ -0,0 +1,172 @@
+import React from 'react'
+import CssBaseline from '@mui/material/CssBaseline'
+import { composeStories, setGlobalConfig } from '@storybook/testing-react'
+import { it, beforeEach, cy, Cypress, describe } from 'local-cypress'
+
+import * as stories from './Channel.stories'
+import { withTheme } from '../../storybook/decorators'
+import { mount } from 'cypress/react18'
+import { ArrowKeyStepper } from 'react-virtualized'
+
+const resizeObserverLoopErrRe = /^[^(ResizeObserver loop limit exceeded)]/
+Cypress.on('uncaught:exception', err => {
+  if (resizeObserverLoopErrRe.test(err.message)) {
+    return false
+  }
+})
+
+// @ts-expect-error
+setGlobalConfig(withTheme)
+
+// Use SendingMessagesWithScroll story to avoid TypeScript errors in other stories
+const { SendingMessagesWithScroll } = composeStories(stories)
+
+describe('Emoji dropdown behavior', () => {
+  // Tests for checking that the emoji dropdown appears and disappears as expected
+  // - appears when typing colon + characters
+  // - disappears with Tab key (emoji selection)
+  // - disappears with mouse click (emoji selection)
+  // - disappears with Enter key (message sending)
+  // - disappears when clicking away
+  // - disappears when typing non-emoji pattern
+  beforeEach(() => {
+    mount(
+      <React.Fragment>
+        <CssBaseline>
+          <SendingMessagesWithScroll />
+        </CssBaseline>
+      </React.Fragment>
+    )
+    cy.wait(0)
+  })
+
+  it('should show dropdown when typing colon followed by characters', () => {
+    // Start typing an emoji code
+    cy.get('[data-testid="messageInput"]').type(':sm')
+
+    // Verify the dropdown appears
+    cy.get('[data-testid="emoji-dropdown"]').should('be.visible').should('contain', ':smile:')
+  })
+
+  it('should hide dropdown when selecting an emoji with Tab key', () => {
+    // Start typing an emoji code
+    cy.get('[data-testid="messageInput"]').type(':sm')
+
+    // Verify dropdown appears
+    cy.get('[data-testid="emoji-dropdown"]').should('be.visible')
+
+    // Instead of Tab, trigger the keydown event directly
+    cy.get('[data-testid="messageInput"]').trigger('keydown', {
+      key: 'Tab',
+      keyCode: 9,
+      which: 9,
+      code: 'Tab',
+    })
+
+    // Verify dropdown disappears
+    cy.get('[data-testid="emoji-dropdown"]').should('not.exist')
+  })
+
+  it('should hide dropdown when selecting an emoji with Enter key', () => {
+    // Start typing an emoji code
+    cy.get('[data-testid="messageInput"]').type(':sm')
+
+    // Verify dropdown appears
+    cy.get('[data-testid="emoji-dropdown"]').should('be.visible')
+
+    // Trigger the Enter keydown event directly
+    cy.get('[data-testid="messageInput"]').trigger('keydown', {
+      key: 'Enter',
+      keyCode: 13,
+      which: 13,
+      code: 'Enter',
+    })
+
+    // Verify dropdown disappears
+    cy.get('[data-testid="emoji-dropdown"]').should('not.exist')
+  })
+
+  it('should hide dropdown when clicking an emoji suggestion', () => {
+    // Start typing an emoji code
+    cy.get('[data-testid="messageInput"]').type(':sm')
+
+    // Verify dropdown appears
+    cy.get('[data-testid="emoji-dropdown"]').should('be.visible')
+
+    // Click the first emoji suggestion
+    cy.get('[data-testid="emoji-dropdown"] > div').first().click()
+
+    // Verify dropdown disappears
+    cy.get('[data-testid="emoji-dropdown"]').should('not.exist')
+
+    // Verify emoji was inserted (smiley emoji U+1F603)
+    cy.get('[data-testid="messageInput"]').should('have.value', '😃')
+  })
+
+  it('should hide dropdown when clicking away', () => {
+    // Start typing an emoji code
+    cy.get('[data-testid="messageInput"]').type(':sm')
+
+    // Verify dropdown appears
+    cy.get('[data-testid="emoji-dropdown"]').should('be.visible')
+
+    // Click away from the input
+    cy.get('body').click()
+
+    // Verify dropdown no longer exists in the DOM
+    cy.get('[data-testid="emoji-dropdown"]').should('not.exist')
+  })
+
+  it('should scroll dropdown when navigating with arrow keys', () => {
+    // Type ":h" to get a decent number of emoji suggestions without being too specific
+    cy.get('[data-testid="messageInput"]').type(':h')
+
+    // Verify dropdown appears
+    cy.get('[data-testid="emoji-dropdown"]').should('be.visible')
+
+    // Check initial scroll position
+    cy.get('[data-testid="emoji-dropdown"]').then($dropdown => {
+      const initialScrollTop = $dropdown[0].scrollTop
+
+      // Add a data attribute to track initial scroll position
+      $dropdown[0].setAttribute('data-initial-scroll', initialScrollTop.toString())
+
+      // Press arrow down key multiple times to navigate through suggestions
+      for (let i = 0; i < 8; i++) {
+        cy.get('[data-testid="messageInput"]').trigger('keydown', {
+          key: 'ArrowDown',
+          keyCode: 40,
+          which: 40,
+          code: 'ArrowDown',
+          bubbles: true,
+        })
+      }
+
+      // After key presses, verify the dropdown is still visible
+      cy.get('[data-testid="emoji-dropdown"]')
+        .should('be.visible')
+        .then($updatedDropdown => {
+          // Get the initial scroll position from the data attribute
+          const initialScroll = parseInt($updatedDropdown[0].getAttribute('data-initial-scroll') || '0')
+          const currentScrollTop = $updatedDropdown[0].scrollTop
+
+          // If scrollTop changed, scrolling occurred
+          expect(currentScrollTop).to.be.gte(initialScroll)
+        })
+    })
+  })
+
+  it('should hide dropdown when typing text that no longer matches emoji pattern', () => {
+    // Start typing an emoji code
+    cy.get('[data-testid="messageInput"]').type(':sm')
+
+    // Verify dropdown appears
+    cy.get('[data-testid="emoji-dropdown"]').should('be.visible')
+
+    // Type a space to break the emoji pattern
+    cy.get('[data-testid="messageInput"]').type(' ')
+
+    // Verify dropdown disappears
+    cy.get('[data-testid="emoji-dropdown"]').should('not.exist')
+  })
+})