BUG: codeblock on RTL locale puts copy button on the left while code is also on the left

YoniChechik commented 1 year ago

Have you read the Contributing Guidelines on issues?

[X] I have read the Contributing Guidelines on issues.

Prerequisites

[X] I'm using the latest version of Docusaurus.
[X] I have tried the npm run clear or yarn clear command.
[X] I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
[X] I have tried creating a repro with https://new.docusaurus.io.
[X] I have read the console error message carefully (if applicable).

Description

codeblock on RTL locale puts copy button on the left while code is also on the left.

This is my current hack to fix this

/*RTL hack! the copy botton of CodeBlock is set incorrectly, thiis is how to fix it*/
/*for dev*/
.buttonGroup_node_modules-\@docusaurus-theme-classic-lib-theme-CodeBlock-Content-styles-module {
  left: 0.5rem !important;
  right: unset !important;
}
/*for prod*/
.buttonGroup__atx {
  left: 0.5rem !important;
  right: unset !important;
}

Reproducible demo

No response

Steps to reproduce

some RTL local with code block

Expected behavior

copy button shold stay on the right

Actual behavior

copy button is on the left

Your environment

No response

Self-service

[ ] I'd be willing to fix this bug myself.

Vishruta-Patil commented 1 year ago

@Josh-Cena Can I work on this issue ?

Josh-Cena commented 1 year ago

@Vishruta-Patil Yes, you can directly send a PR

Vishruta-Patil commented 1 year ago

@josh-cena I have setup the project locally but can you tell me where can I find RTL locale with the code block.

Josh-Cena commented 1 year ago

You need to start the website with an RTL locale, such as fa or ar. You need to modify the config file and then run start with --locale ar.

Josh-Cena commented 1 year ago

Fixed by #8803. @Vishruta-Patil next time, please read the PR template carefully. There's a checklist item that asks you to fill in the issue number you are fixing.

facebook / docusaurus