JSFiddle - React, Tailwind, and code Playground

HTML

<button id="button">ok</button>
<textarea id="text">ضع النص هنا</textarea>

CSS

textarea{
    direction: rtl;
    width: calc(100% - 20px);
    display: block;
    height: 300px;
    border: 0px;
    box-shadow: rgb(51, 51, 51) 0px 0px 1px;
    padding: 10px;
    font-family: cursive;
    font-size: 20px;
    color: rgb(51, 51, 51);
    resize: vertical;
}
button{
      display: block;
    width: 70px;
    height: 40px;
    font-family: cursive;
    color: #333;
    margin: 5px auto;
}

JavaScript

function ba7t(txt) {
    "use strict";
    while (txt.indexOf("[") !== -1) {
        txt = txt.slice(0, txt.indexOf("[")) + txt.slice(txt.indexOf("]") + 1);
    }
    return txt;
}
var button = document.getElementById("button"),
		text = document.getElementById("text");
button.onclick = function () {
	"use strict";
  text.value = ba7t(text.value);
}