Skip to content

fix(web): contenteditable div for multi-line text wrapping #19422

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

jinxuan-owyong
Copy link
Contributor

@jinxuan-owyong jinxuan-owyong commented Jun 22, 2025

Description

  • Replace input with contenteditable div to allow multi-line wrapping of fields in the following areas
    • Editing names in /people
    • Description when viewing an asset
    • Viewing album descriptions
  • Wrap long names in /explore to make them more readable

Fixes #17967

How Has This Been Tested?

  • Visually verified multi-line wrapping when editing the field
  • Long names are correctly wrapped when the page is newly loaded
  • jsdom does not support contenteditable API, but the tests in e2e/ cover the editing of fields

Screenshots (if appropriate)

image

Checklist:

  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation if applicable
  • I have no unrelated changes in the PR.
  • I have confirmed that any new dependencies are strictly necessary.
  • I have written tests for new code (if applicable)
  • I have followed naming conventions/patterns in the surrounding code
  • All code in src/services/ uses repositories implementations for database calls, filesystem operations, etc.
  • All code in src/repositories/ is pretty basic/simple and does not have any immich specific logic (that belongs in src/services/)

@midzelis
Copy link
Collaborator

It might be simpler just to use comtenteditable on a normal div snd set the aria appropriately

This can be done for all the places we use auto expanding text, like for album descriptions

@midzelis
Copy link
Collaborator

See also: https://github.com/immich-app/immich/blob/main/web/src/lib/actions/autogrow.ts -- but redoing that in content-editable would be better, since it works better on mobile devices (when viewing the web interface)

@jinxuan-owyong jinxuan-owyong marked this pull request as draft June 26, 2025 17:28
@jinxuan-owyong jinxuan-owyong changed the title fix(web): wrap long names with auto resize textarea fix(web): contenteditable div for multi-line text wrapping Jun 26, 2025
@jinxuan-owyong jinxuan-owyong marked this pull request as ready for review June 28, 2025 10:54
@jinxuan-owyong
Copy link
Contributor Author

@midzelis i've updated the PR with contenteditable

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Support for longer names
3 participants