Skip to content
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

feat: implement text direction support #475

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Conversation

Goues
Copy link

@Goues Goues commented Mar 19, 2021

This PR adds new functionality to allow RTL text in react-mentions. Under normal circumstances, you can achieve this via CSS direction: rtl, however, the problem with that is that you need to know which direction is going to be used up front or you need to detect it from the textarea value on change. However, HTML supports dir="auto" as attribute on any element that enabled auto detection by the browser.

In our use case, we have a textarea where we expect RTL and LTR text to appear at the same time - you first add the text in your RTL language and then you add Engligh below it. This means we need text direction per paragraph of text. We take this approach everywhere but now we would like to allow mentioning, so we are looking into react-mentions for the functionality.

I called the prop unstable, because I don't thinks it complete and it needs to be improved, but I need help with this by someone who knows the library a bit more. One problem will be a selection that is hard to achieve with multiple wrapping divs.

This also solves #469

@vercel
Copy link

vercel bot commented Mar 19, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/signavio/react-mentions/7VqM4FsyKw2vpQcgpwbAXAsWGKxW
✅ Preview: https://react-mentions-git-fork-goues-rtl-signavio.vercel.app

@codecov-io
Copy link

Codecov Report

Merging #475 (382f895) into master (5af7025) will decrease coverage by 0.21%.
The diff coverage is 72.72%.

❗ Current head 382f895 differs from pull request most recent head 851b918. Consider uploading reports for the commit 851b918 to get more accurate results
Impacted file tree graph

@@            Coverage Diff             @@
##           master     #475      +/-   ##
==========================================
- Coverage   78.84%   78.63%   -0.22%     
==========================================
  Files          32       32              
  Lines         695      702       +7     
  Branches      108      109       +1     
==========================================
+ Hits          548      552       +4     
- Misses        146      149       +3     
  Partials        1        1              
Impacted Files Coverage Δ
src/Highlighter.js 93.93% <70.00%> (-4.37%) ⬇️
src/MentionsInput.js 68.82% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5af7025...851b918. Read the comment docs.

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

Successfully merging this pull request may close these issues.

2 participants