RTL text support

package.json

@@ -20,19 +20,20 @@
     "@quasar/extras": "^1.16.2",
     "@tauri-apps/api": "^1.0.0-beta.8",
     "core-js": "^3.30.1",
+    "direction": "^2.0.1",
     "es6-promise": "^4.2.8",
     "quasar": "^2.11.10",
     "treebank-tokenizer": "^0.0.1",
     "vue": "^3.2.47",
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.21.3",
     "@tauri-apps/cli": "^1.0.0-beta.10",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
     "@vue/compiler-sfc": "^3.2.47",
-    "@babel/eslint-parser": "^7.21.3",
     "eslint": "^8.38.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.0.1",

src/components/AnnotationPage.vue

@@ -3,7 +3,8 @@
     <classes-block />
     <div
       class="q-pa-lg"
-      style="height:60vh; overflow-y:scroll;"
+      style="height:60vh; overflow-y:scroll;unicode-bidi: isolate;"
+      :dir="textDirection"
     >
       <component
         :is="t.type === 'token' ? 'Token' : 'TokenBlock'"
@@ -59,6 +60,7 @@ import TokenBlock from "./TokenBlock";
 import ClassesBlock from "./ClassesBlock.vue";
 import TokenManager from "./token-manager";
 import TreebankTokenizer from "treebank-tokenizer";
+import {direction} from 'direction'
 
 export default {
   name: "AnnotationPage",
@@ -84,6 +86,7 @@ export default {
       "inputSentences",
       "enableKeyboardShortcuts",
       "annotationPrecision",
+      "textDirection",
     ]),
   },
   watch: {
@@ -101,6 +104,9 @@ export default {
     },
     annotationPrecision() {
       this.tokenizeCurrentSentence();
+    },
+    textDirection() {
+      this.tokenizeCurrentSentence();
     }
   },
   created() {
@@ -135,7 +141,6 @@ export default {
     tokenizeCurrentSentence() {
       this.currentSentence = this.inputSentences[this.currentIndex];
       this.currentAnnotation = this.annotations[this.currentIndex];
-
       let tokens, spans;
 
       if (this.$store.state.annotationPrecision == "char") {
@@ -149,11 +154,47 @@ export default {
         spans = this.tokenizer.span_tokenize(this.currentSentence.text);
       }
 
+      tokens = this.handleRtlAndLtrMix(tokens);
+
       let combined = tokens.map((t, i) => [spans[i][0], spans[i][1], t]);
 
       this.tm = new TokenManager(this.classes);
       this.tm.setTokensAndAnnotation(combined, this.currentAnnotation);
     },
+
+    /*if ltr and rtl text both exist in the same file
+    then the tokens are generated in one direction based on users input
+    which causes one direction(ltr or rtl) of the texts to be in reverse.
+    To handle that the tokens that should be in the opposite direction is reversed*/
+    handleRtlAndLtrMix(tokens){
+      /* initialize an empty map where key will be start index
+      and the value will be total number of consecutive opposite direction texts*/
+      const indexMap = new Map();
+
+      for(let i = 0; i<tokens.length; i++){
+        const tokenDirection = direction(tokens[i]);
+        // if different text direction is found start counting the total number of consecutive opposite direction texts
+        if(this.textDirection !== tokenDirection && tokenDirection !== 'neutral') {
+          indexMap.set(i, 1);
+          let j = i + 1
+          while (direction(tokens[j]) !== this.textDirection && j < tokens.length) {
+            indexMap.set(i, indexMap.get(i) + 1);
+            j += 1
+          }
+          i = j - 1
+        }
+      }
+
+      /* for every start index in the map
+      reverse the tokens in array based on the total number of opposite direction
+      texts that come after it and reverse that part in token array */
+      for(let startIndex of indexMap.keys()){
+        const endIndex = startIndex + indexMap.get(startIndex) - 1
+        let reversedPart = tokens.slice(startIndex, endIndex + 1).reverse();
+        tokens.splice(startIndex, endIndex - startIndex + 1, ...reversedPart);
+      }
+      return tokens
+    },
     selectTokens() {
       let selection = document.getSelection();
 

src/components/AnnotationSidebar.vue

@@ -2,6 +2,7 @@
   <nav class="px-3">
     <split-type-selector class="mt-4 mb-5" />
     <annotation-precision-selector class="mt-4 mb-5" />
+    <text-direction-selector class="mt-4 mb-5" />
     <progress-bar
       class="mb-5"
       :completed="currentIndex"
@@ -17,6 +18,7 @@ import ProgressBar from "./sidebar/ProgressBar.vue";
 import SplitTypeSelector from "./sidebar/SplitTypeSelector.vue";
 import AnnotationPrecisionSelector from "./sidebar/AnnotationPrecisionSelector.vue";
 import KeyboardShortcuts from "./sidebar/KeyboardShortcuts.vue";
+import TextDirectionSelector from "@/components/sidebar/TextDirectionSelector.vue";
 
 export default {
   name: "AnnotationSidebar",
@@ -25,6 +27,7 @@ export default {
     SplitTypeSelector,
     AnnotationPrecisionSelector,
     KeyboardShortcuts,
+    TextDirectionSelector,
   },
   computed: {
     ...mapState(["currentIndex", "inputSentences"]),

src/components/StartPage.vue

@@ -39,8 +39,8 @@
       </div>
       <div class="row items-center">
         <q-file
-          class="col-5 q-mx-sm"
           v-model="textFile"
+          class="col-5 q-mx-sm"
           accept=".txt"
           filled
           label="Text file"
@@ -52,8 +52,8 @@
           </template>
         </q-file>
         <q-file
-          class="col-5 q-mx-sm"
           v-model="annotationFile"
+          class="col-5 q-mx-sm"
           accept=".json"
           filled
           label="(Optional) Annotations"

src/components/TokenBlock.vue

@@ -7,7 +7,10 @@
       :key="t.start"
       :token="t"
     />
-    <span class="tag">
+    <span
+      class="tag"
+      :dir="selectedTextDirection"
+    >
       {{ token.label }}
       <q-btn
         icon="fa fa-times-circle"
@@ -44,6 +47,11 @@ export default {
       showClose: false,
     };
   },
+  computed:{
+    selectedTextDirection(){
+      return this.$store.state.textDirection;
+    }
+  },
 };
 </script>
 

src/components/sidebar/TextDirectionSelector.vue

@@ -0,0 +1,56 @@
+<template>
+  <section>
+    <div class="q-px-md q-pb-md">
+      <q-select
+        v-model="textDirection"
+        outlined
+        :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+        :options="directionOptions"
+        :map-options="true"
+        label="Text Direction"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+
+export default {
+  name: "TextDirectionSelector",
+  data() {
+    return {
+      directionOptions: [
+        { label: "Right to Left", value: "rtl" },
+        { label: "Left to Right", value: "ltr" },
+      ],
+    };
+  },
+  computed: {
+    textDirection: {
+      get() {
+        switch (this.$store.state.textDirection) {
+          case "rtl":
+            return "rtl";
+          case "ltr":
+            return "ltr";
+          default:
+            return "ltr";
+        }
+      },
+      set(option) {
+        switch (option.value) {
+          case "rtl":
+            this.$store.commit("setTextDirection", "rtl");
+            break;
+          case "ltr":
+            this.$store.commit("setTextDirection", "ltr");
+            break;
+          default:
+            this.$store.commit("setTextDirection", "ltr");
+            break;
+        }
+      },
+    },
+  },
+};
+</script>

src/store/index.js

@@ -73,6 +73,9 @@ export const mutations = {
   setAnnotationPrecision(state, payload) {
     state.annotationPrecision = payload;
   },
+  setTextDirection(state, payload) {
+    state.textDirection = payload;
+  },
   setKeyboardShortcuts(state, payload) {
     state.enableKeyboardShortcuts = payload;
   },
@@ -189,6 +192,7 @@ export default {
       separator: "\n",
       enableKeyboardShortcuts: false,
       annotationPrecision: "word",
+      textDirection: "ltr",
       // current state
       currentAnnotation: {},
       currentClass: tags && tags[0] || {},

yarn.lock

@@ -4371,6 +4371,11 @@ dir-glob@^3.0.1:
   dependencies:
     path-type "^4.0.0"
 
+direction@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/direction/-/direction-2.0.1.tgz#71800dd3c4fa102406502905d3866e65bdebb985"
+  integrity sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==
+
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"