enabling RTL (Right-To-Left) text direction toggle

chatgpt-rtl-toggle.js

// ==UserScript==
// @name        chatgpt-rtl-toggle
// @namespace   Violentmonkey Scripts
// @match       https://chatgpt.com/*/*
// @grant       none
// @version     1.0
// @author      -
// @description enabling RTL (Right-To-Left) text direction toggle 
// @run-at      document-end
// @license MIT
// ==/UserScript==
//
// chrome extention: https://chromewebstore.google.com/detail/chatgpt-rtl/cnhikhicflgjbfnllpmbbdpjcfmfnkii

if (!document.getElementById("RTL")) {
  const style = document.createElement("style");
  style.id = "RTL";
  style.innerHTML = `
            #rtlButton {
                transition: .15s;
                cursor: pointer;
            }
            main.rtl #rtlButton {
                transform: rotateY(180deg);
            }
            code, pre {
                direction: ltr;
                text-align: left;
            }
            main form textarea#prompt-textarea {
                padding-right: 96px;
            }
            [class^="react-scroll-to-bottom--css-"] {
                height: 100%;
                overflow-y: auto;
            }
            main.rtl p,
            main.rtl textarea {
                direction: rtl;
            }
            main.rtl .overflow-x-auto {
                overflow-x: unset;
                direction: rtl;
            }
            main.rtl .markdown ul,
            main.rtl .markdown ol {
                padding-left: unset;
                padding-right: 0;
                direction: rtl;
            }
            main.rtl .prose :where(ul):not(:where([class~="not-prose"] *)),
            main.rtl .prose :where(ol):not(:where([class~="not-prose"] *)) {
                padding-left: unset;
                padding-right: 1.625em;
            }
            main.rtl .markdown ul>li::before,
            main.rtl .markdown ol>li::before {
                --tw-translate-x: 100%;
                padding-right: unset;
                padding-left: .5rem;
            }
            main.rtl .prose :where(ul > li):not(:where([class~="not-prose"] *)),
            main.rtl .prose :where(ol > li):not(:where([class~="not-prose"] *)) {
                padding-right: .375em;
                padding-left: unset;
            }
        `;
  document.head.appendChild(style);
}

function addRTLButton(textarea) {
  if (!document.getElementById("rtlButton")) {
    document.querySelector("main").classList.add("rtl");
    const rtlButton = document.createElement("div");
    rtlButton.id = "rtlButton";
    rtlButton.className = "mb-1 me-1";
    rtlButton.innerHTML = `
                <div class="relative">
                    <div class="relative">
                        <div class="flex flex-col">
                            <span class="flex" data-state="closed">
                                <div aria-disabled="false" aria-label="Attach files" class="flex items-center justify-center h-8 w-8 rounded-lg rounded-bl-xl text-token-text-primary dark:text-white focus-visible:outline-black dark:focus-visible:outline-white hover:bg-black/10">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7 6H17 M7 10H13 M7 14H17 M7 18H13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            `;
    textarea.parentElement.parentElement.parentElement.parentElement.lastElementChild.firstElementChild.appendChild(
      rtlButton
    );
    rtlButton.addEventListener("click", () =>
      document.querySelector("main").classList.toggle("rtl")
    );
  }
}

const observer = new MutationObserver(() => {
  const textarea = document.querySelector("main form textarea");
  if (textarea) {
    addRTLButton(textarea);
    // observer.disconnect();
  }
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
});



//chrome extention: https://chromewebstore.google.com/detail/chatgpt-rtl/cnhikhicflgjbfnllpmbbdpjcfmfnkii