Merge branch 'main' into develop

CHANGELOG.md

@@ -16,12 +16,11 @@ These are the section headers that we use:
 
 ## [Unreleased]()
 
+## [1.26.1](https://github.com/argilla-io/argilla/compare/v1.26.0...v1.26.1)
+
 ### Added
 
-- If you expand the labels of a `single or multi` label Question, the state is maintained during the entire annotation process. ([#4630](https://github.com/argilla-io/argilla/pull/4630))
-- Added support for span questions in the Python SDK. ([#4617](https://github.com/argilla-io/argilla/pull/4617))
-- Added support for spans values in suggestions and responses. ([#4623](https://github.com/argilla-io/argilla/pull/4623))
-- Added `Span` questions for `FeedbackDataset` ([#4622](https://github.com/argilla-io/argilla/pull/4622))
+- Added support for automatic detection of RTL languages. ([#4686](https://github.com/argilla-io/argilla/pull/4686))
 
 ## [1.26.0](https://github.com/argilla-io/argilla/compare/v1.25.0...v1.26.0)
 
@@ -32,7 +31,6 @@ These are the section headers that we use:
 - Added support for span values in suggestions and responses. ([#4623](https://github.com/argilla-io/argilla/pull/4623))
 - Added `span` questions for `FeedbackDataset`. ([#4622](https://github.com/argilla-io/argilla/pull/4622))
 - Added `ARGILLA_CACHE_DIR` environment variable to configure the client cache directory. ([#4509](https://github.com/argilla-io/argilla/pull/4509))
-  > > > > > > > main
 
 ### Fixed
 

frontend/assets/scss/base/base.scss

@@ -304,3 +304,10 @@ a {
 .--capitalized {
   text-transform: capitalize;
 }
+
+.--rtl {
+  direction: rtl;
+}
+.--ltr {
+  direction: ltr;
+}

frontend/components/base/base-render-markdown/RenderMarkdown.base.component.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="markdown-render" v-html="markdownToHtml" v-copy-code />
+  <div
+    class="markdown-render"
+    :class="classes"
+    v-html="markdownToHtml"
+    v-copy-code
+  />
 </template>
 <script>
 import { marked } from "marked";
@@ -52,6 +57,9 @@ export default {
     },
   },
   computed: {
+    classes() {
+      return this.$language.isRTL(this.markdown) ? "--rtl" : "--ltr";
+    },
     markdownToHtml() {
       return marked.parse(this.markdown, {
         headerIds: false,

frontend/components/base/base-render-markdown/renderMarkdown.base.component.spec.js

@@ -25,7 +25,7 @@ describe("RenderMarkdownBaseComponent", () => {
   it("render correct html", () => {
     const wrapper = shallowMount(RenderMarkdownBaseComponent, options);
     expect(wrapper.html()).toBe(
-      `<div class="markdown-render">
+      `<div class="markdown-render --ltr">
   <h1>example</h1>
 </div>`
     );
@@ -38,7 +38,7 @@ describe("RenderMarkdownBaseComponent", () => {
       },
     });
     expect(wrapper.html()).toBe(
-      `<div class="markdown-render">
+      `<div class="markdown-render --ltr">
   <p><svg viewBox="0 0 100 100" width="100" height="100">
       <circle fill="red" stroke-width="3" stroke="black" r="40" cy="50" cx="50"></circle>
     </svg></p>
@@ -53,7 +53,7 @@ describe("RenderMarkdownBaseComponent", () => {
       },
     });
     expect(wrapper.html()).toBe(
-      `<div class="markdown-render">
+      `<div class="markdown-render --ltr">
   <p><svg viewBox="0 0 100 100" width="100" height="100">
       <circle fill="red" stroke-width="3" stroke="black" r="40" cy="50" cx="50"></circle>
     </svg></p>
@@ -69,7 +69,7 @@ describe("RenderMarkdownBaseComponent", () => {
       },
     });
     expect(wrapper.html()).toBe(
-      `<div class="markdown-render">
+      `<div class="markdown-render --ltr">
   <p><a target="_blank" href="https://example.com">example</a></p>
 </div>`
     );
@@ -83,7 +83,7 @@ describe("RenderMarkdownBaseComponent", () => {
       },
     });
     expect(wrapper.html()).toBe(
-      `<div class="markdown-render">
+      `<div class="markdown-render --ltr">
   <p><a target="_blank" href="https://example.com">example</a></p>
 </div>`
     );

frontend/components/feedback-task/container/fields/text-field/TextField.component.vue

@@ -17,7 +17,7 @@
       </BaseActionTooltip>
     </div>
     <div class="content-area --body1">
-      <div v-if="!useMarkdown" v-html="text" />
+      <div :class="classes" v-if="!useMarkdown" v-html="text" />
       <RenderMarkdownBaseComponent v-else :markdown="text" />
     </div>
   </div>
@@ -45,6 +45,11 @@ export default {
       default: false,
     },
   },
+  computed: {
+    classes() {
+      return this.$language.isRTL(this.text) ? "--rtl" : "--ltr";
+    },
+  },
   setup(props) {
     return useTextFieldViewModel(props);
   },

frontend/components/feedback-task/container/questions/form/text-area/ContentEditableFeedbackTask.vue

@@ -11,7 +11,7 @@
         ref="text"
         id="contentId"
         class="content__text"
-        :class="textIsEdited ? '--edited-text' : null"
+        :class="classes"
         :contenteditable="true"
         :placeholder="placeholder"
         @input="onInputText"
@@ -54,6 +54,21 @@ export default {
     };
   },
   computed: {
+    classes() {
+      const classes = [];
+
+      if (this.textIsEdited) {
+        classes.push("--edited-text");
+      }
+
+      if (this.$language.isRTL(this.value)) {
+        classes.push("--rtl");
+      } else {
+        classes.push("--ltr");
+      }
+
+      return classes;
+    },
     textIsEdited() {
       return this.originalValue !== this.value;
     },

frontend/jest.setup.ts

@@ -54,6 +54,9 @@ const buildNuxt = async () => {
 
 config.mocks = {
   $t: (key) => `#${key}#`,
+  $language: {
+    isRTL: () => false,
+  },
 };
 
 export default async () => {

frontend/nuxt.config.ts

@@ -76,6 +76,7 @@ const config: NuxtConfig = {
     { src: "~/plugins/plugins/variables.js" },
     { src: "~/plugins/plugins/vue-draggable.js" },
     { src: "~/plugins/plugins/platform.ts" },
+    { src: "~/plugins/plugins/language.ts" },
   ],
 
   // Auto import components (https://go.nuxtjs.dev/config-components)

frontend/plugins/plugins/language.ts

@@ -0,0 +1,8 @@
+import { Inject } from "@nuxt/types/app";
+import { useLanguageDirection } from "~/v1/infrastructure/services/useLanguageDirection";
+
+export default (_, inject: Inject) => {
+  const language = useLanguageDirection();
+
+  inject("language", language);
+};

frontend/v1/infrastructure/services/useLanguageDirection.test.ts

@@ -0,0 +1,55 @@
+import { useLanguageDirection } from "./useLanguageDirection";
+
+describe("useLanguageDirection", () => {
+  const { isRTL } = useLanguageDirection();
+
+  describe("isRTL should", () => {
+    test("be true if the text is Arabic", () => {
+      const text = "مرحبا بالعالم";
+
+      const result = isRTL(text);
+
+      expect(result).toBe(true);
+    });
+
+    test("be true if the text is Hebrew", () => {
+      const text = "שלום עולם";
+
+      const result = isRTL(text);
+
+      expect(result).toBe(true);
+    });
+
+    test("be true if the text is Persian", () => {
+      const text = "سلام دنیا";
+
+      const result = isRTL(text);
+
+      expect(result).toBe(true);
+    });
+
+    test("be false if the text is LTR", () => {
+      const text = "Hello World";
+
+      const result = isRTL(text);
+
+      expect(result).toBe(false);
+    });
+
+    test("be true if the text has more than RTL characters than LTR characters", () => {
+      const text = "هذا نص مثال Hello";
+
+      const result = isRTL(text);
+
+      expect(result).toBe(true);
+    });
+
+    test("be false if the text has more LTR characters than RTL characters", () => {
+      const text = "Esto es un texto de ejemplo مرحبًا";
+
+      const result = isRTL(text);
+
+      expect(result).toBe(false);
+    });
+  });
+});

frontend/v1/infrastructure/services/useLanguageDirection.ts

@@ -0,0 +1,20 @@
+export const useLanguageDirection = () => {
+  const isRTL = (text: string) => {
+    const rtlCount = (
+      text.match(/[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/g) || []
+    ).length;
+
+    const ltrCount = (
+      text.match(
+        // eslint-disable-next-line no-misleading-character-class
+        /[A-Za-z\u00C0-\u00C0\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF]/g
+      ) || []
+    ).length;
+
+    return rtlCount > ltrCount;
+  };
+
+  return {
+    isRTL,
+  };
+};

pyproject.toml

@@ -49,8 +49,8 @@ dependencies = [
 dynamic = ["version"]
 
 [project.optional-dependencies]
-server = ["argilla-server ~= 1.26.0"]
-server-postgresql = ["argilla-server[postgresql] ~= 1.26.0"]
+server = ["argilla-server ~= 1.26.1"]
+server-postgresql = ["argilla-server[postgresql] ~= 1.26.1"]
 listeners = ["schedule ~= 1.1.0", "prodict ~= 0.8.0"]
 integrations = [
     "PyYAML >= 5.4.1,< 6.1.0", # Required by `argilla.client.feedback.config` just used in `HuggingFaceDatasetMixin`