Add "dir=auto" for input/textarea elements by default (#26735)

Co-authored-by: silverwind <[email protected]>
Co-authored-by: Giteabot <[email protected]>

Author: 3 people

web_src/css/base.css

@@ -478,6 +478,7 @@ a.label,
 /* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
 .ui.input > input {
   line-height: var(--line-height-default);
+  text-align: start; /* Override fomantic's `text-align: left` to make RTL work via HTML `dir="auto"` */
 }
 
 .ui.input.focus > input,

web_src/js/index.js

@@ -84,9 +84,11 @@ import {onDomReady} from './utils/dom.js';
 import {initRepoIssueList} from './features/repo-issue-list.js';
 import {initCommonIssueListQuickGoto} from './features/common-issue-list.js';
 import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
+import {initDirAuto} from './modules/dirauto.js';
 
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
+initDirAuto();
 
 onDomReady(() => {
   initGlobalCommon();

web_src/js/modules/dirauto.js

@@ -0,0 +1,39 @@
+// for performance considerations, it only uses performant syntax
+
+function attachDirAuto(el) {
+  if (el.type !== 'hidden' &&
+      el.type !== 'checkbox' &&
+      el.type !== 'radio' &&
+      el.type !== 'range' &&
+      el.type !== 'color') {
+    el.dir = 'auto';
+  }
+}
+
+export function initDirAuto() {
+  const observer = new MutationObserver((mutationList) => {
+    const len = mutationList.length;
+    for (let i = 0; i < len; i++) {
+      const mutation = mutationList[i];
+      const len = mutation.addedNodes.length;
+      for (let i = 0; i < len; i++) {
+        const addedNode = mutation.addedNodes[i];
+        if (addedNode.nodeType !== Node.ELEMENT_NODE && addedNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE) continue;
+        attachDirAuto(addedNode);
+        const children = addedNode.querySelectorAll('input, textarea');
+        const len = children.length;
+        for (let childIdx = 0; childIdx < len; childIdx++) {
+          attachDirAuto(children[childIdx]);
+        }
+      }
+    }
+  });
+
+  const docNodes = document.querySelectorAll('input, textarea');
+  const len = docNodes.length;
+  for (let i = 0; i < len; i++) {
+    attachDirAuto(docNodes[i]);
+  }
+
+  observer.observe(document, {subtree: true, childList: true});
+}