feat(multi-word): working multi-word system based on selection (#142)

Author: HugoFara

src/backend/Api/V1/Handlers/TermHandler.php

@@ -606,11 +606,38 @@ public function getMultiWordForEdit(int $textId, int $position, ?string $text =
             ];
         }
 
-        // New multi-word expression
+        // Check if text is provided
         if ($text === null || $text === '') {
             return ['error' => 'Multi-word text is required for new expressions'];
         }
 
+        // Try to find existing term by text (case-insensitive)
+        $textLc = mb_strtolower($text, 'UTF-8');
+        $existingWord = QueryBuilder::table('words')
+            ->select(['WoID', 'WoText', 'WoTranslation', 'WoRomanization', 'WoSentence', 'WoStatus', 'WoWordCount'])
+            ->where('WoTextLC', '=', $textLc)
+            ->where('WoLgID', '=', $lgid)
+            ->where('WoWordCount', '>', 1)
+            ->firstPrepared();
+
+        if ($existingWord) {
+            // Found existing multi-word term
+            return [
+                'id' => (int) $existingWord['WoID'],
+                'text' => $existingWord['WoText'],
+                'textLc' => $textLc,
+                'translation' => $existingWord['WoTranslation'] ?? '',
+                'romanization' => $existingWord['WoRomanization'] ?? '',
+                'sentence' => $existingWord['WoSentence'] ?? '',
+                'notes' => '',
+                'status' => (int) $existingWord['WoStatus'],
+                'langId' => $lgid,
+                'wordCount' => (int) $existingWord['WoWordCount'],
+                'isNew' => false
+            ];
+        }
+
+        // New multi-word expression
         // Get sentence at position
         $sentence = $this->wordService->getSentenceTextAtPosition($textId, $position);
 
@@ -620,7 +647,7 @@ public function getMultiWordForEdit(int $textId, int $position, ?string $text =
         return [
             'id' => null,
             'text' => $text,
-            'textLc' => mb_strtolower($text, 'UTF-8'),
+            'textLc' => $textLc,
             'translation' => '',
             'romanization' => '',
             'sentence' => $sentence ?? '',

src/backend/Api/V1/Handlers/TextHandler.php

@@ -346,7 +346,8 @@ public function getWords(int $textId): array
                 'WoText',
                 'WoStatus',
                 'WoTranslation',
-                'WoRomanization'
+                'WoRomanization',
+                'WoNotes'
             ])
             ->leftJoin('words', 'textitems2.Ti2WoID', '=', 'words.WoID')
             ->where('textitems2.Ti2TxID', '=', $textId)
@@ -400,6 +401,7 @@ public function getWords(int $textId): array
                     $wordData['status'] = (int)$record['WoStatus'];
                     $wordData['translation'] = ExportService::replaceTabNewline($record['WoTranslation'] ?? '');
                     $wordData['romanization'] = $record['WoRomanization'] ?? '';
+                    $wordData['notes'] = $record['WoNotes'] ?? '';
 
                     // Get tags
                     $tags = TagService::getWordTagList((int)$record['WoID'], false);
@@ -412,6 +414,7 @@ public function getWords(int $textId): array
                     $wordData['status'] = 0;
                     $wordData['translation'] = '';
                     $wordData['romanization'] = '';
+                    $wordData['notes'] = '';
                 }
 
                 // Add multiword references

src/frontend/js/api/terms.ts

@@ -23,6 +23,7 @@ export interface Term {
   textLc: string;
   translation: string;
   romanization?: string;
+  notes?: string;
   status: number;
   langId: number;
   sentence?: string;

src/frontend/js/api/texts.ts

@@ -54,6 +54,7 @@ export interface TextWord {
   status?: number;
   translation?: string;
   romanization?: string;
+  notes?: string;
   tags?: string;
   // Multiword references (mw2, mw3, etc.)
   [key: `mw${number}`]: string | undefined;

src/frontend/js/reading/stores/multi_word_form_store.ts

@@ -228,13 +228,38 @@ function createMultiWordFormStore(): MultiWordFormStoreState {
         // For now, show if there's existing romanization or language supports it
         this.showRomanization = data.romanization !== '';
 
+        // Add curly braces around the term in sentence if not present
+        let sentence = data.sentence;
+        if (sentence && !sentence.includes('{') && data.text) {
+          const termText = data.text.trim();
+          // Escape regex special characters and allow flexible whitespace matching
+          const escapedText = termText
+            .replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+            .replace(/\s+/g, '\\s+'); // Allow any whitespace to match any whitespace
+
+          try {
+            // Case-insensitive match with flexible whitespace
+            const regex = new RegExp('(' + escapedText + ')', 'iu');
+            sentence = sentence.replace(regex, '{$1}');
+          } catch {
+            // If regex fails, try simple case-insensitive indexOf
+            const lowerSentence = sentence.toLowerCase();
+            const lowerTerm = termText.toLowerCase();
+            const idx = lowerSentence.indexOf(lowerTerm);
+            if (idx !== -1) {
+              const matchedText = sentence.substring(idx, idx + termText.length);
+              sentence = sentence.substring(0, idx) + '{' + matchedText + '}' + sentence.substring(idx + termText.length);
+            }
+          }
+        }
+
         // Set form data
         this.formData = {
           text: data.text,
           textLc: data.textLc,
           translation: data.translation === '*' ? '' : data.translation,
           romanization: data.romanization,
-          sentence: data.sentence,
+          sentence: sentence,
           status: data.status || 1,
           wordCount: data.wordCount || wordCount
         };

src/frontend/js/reading/stores/word_store.ts

@@ -30,6 +30,7 @@ export interface WordData {
   status: number;
   translation: string;
   romanization: string;
+  notes?: string;
   tags?: string;
 }
 
@@ -154,7 +155,12 @@ function createWordStore(): WordStoreState {
         showAll: this.showAll,
         showTranslations: this.showTranslations,
         rightToLeft: this.rightToLeft,
-        textSize: this.textSize
+        textSize: this.textSize,
+        // Annotation settings for Markdown-rendered annotations
+        showLearning: this.showLearning,
+        displayStatTrans: this.displayStatTrans,
+        modeTrans: this.modeTrans,
+        annTextSize: this.annTextSize
       };
 
       return renderText(this.words, settings);
@@ -233,6 +239,7 @@ function createWordStore(): WordStoreState {
           status: word.status ?? 0,
           translation: word.translation ?? '',
           romanization: word.romanization ?? '',
+          notes: word.notes ?? '',
           tags: word.tags
         };
 

tests/frontend/reading/text_multiword_selection.test.ts

@@ -105,6 +105,8 @@ describe('text_multiword_selection.ts', () => {
     });
 
     it('opens modal when multiple words are selected', () => {
+      // In the real database, words are stored consecutively without space elements
+      // The getSelectedText function adds spaces between consecutive word elements
       document.body.innerHTML = `
         <div id="thetext">
           <span id="sent_1">
@@ -136,17 +138,18 @@ describe('text_multiword_selection.ts', () => {
       expect(mockStore.loadForEdit).toHaveBeenCalledWith(
         1, // textId from URL
         1, // position (first word's data_order)
-        expect.any(String), // text
+        'Hello World', // text extracted with space added between consecutive words
         2 // word count
       );
     });
 
     it('shows alert when selected text is too long', () => {
+      // Words are stored consecutively without space elements
       document.body.innerHTML = `
         <div id="thetext">
           <span id="sent_1">
-            <span class="wsty" data_order="1">${'A'.repeat(200)}</span>
-            <span class="wsty" data_order="2">${'B'.repeat(100)}</span>
+            <span id="ID-1-1" class="wsty" data_order="1">${'A'.repeat(200)}</span>
+            <span id="ID-2-1" class="wsty" data_order="2">${'B'.repeat(100)}</span>
           </span>
         </div>
       `;
@@ -216,6 +219,7 @@ describe('text_multiword_selection.ts', () => {
         writable: true
       });
 
+      // Words are stored consecutively without space elements
       document.body.innerHTML = `
         <div id="thetext">
           <span id="sent_1">
@@ -245,7 +249,7 @@ describe('text_multiword_selection.ts', () => {
       expect(mockStore.loadForEdit).toHaveBeenCalledWith(
         42, // textId extracted from URL
         1,
-        expect.any(String),
+        'Hello World',
         2
       );
     });