Unbreak Japanese markdown-y links (#51104)

Author: Peter Bengtsson

src/fixtures/fixtures/translations/ja-jp/content/get-started/start-your-journey/hello-world.md

@@ -23,3 +23,11 @@ recover from it.
 ## Use of a reusable that might have auto-title links
 
 {% data reusables.gated-features.more-info %}
+
+If you type in "bar" into Google Translate (English to Japanese)
+you get "バー". The translation guidelines says that when you're
+mentioning an English word, you should leave it and translate it
+using the same character composition used for regular Markdown
+links. Here's one such example:
+
+[[Bar](バー)](/get-started/foo/bar)

src/fixtures/tests/translations.js

@@ -103,4 +103,21 @@ describe('translations', () => {
     const stillAutotitle = texts.filter((text) => /autotitle/i.test(text))
     expect(stillAutotitle.length).toBe(0)
   })
+
+  test('markdown link looking constructs inside links', async () => {
+    // On this page, the translators had written:
+    //
+    //   [[Bar](バー)](/get-started/foo/bar)
+    //
+    // which needs to become:
+    //
+    //   <a href="/ja/get-started/foo/bar">[Bar](バー)</a>
+    const $ = await getDOM('/ja/get-started/start-your-journey/hello-world')
+    const links = $('#article-contents a[href]')
+    const texts = links
+      .filter((i, element) => $(element).attr('href').includes('get-started/foo/bar'))
+      .map((i, element) => $(element).text())
+      .get()
+    expect(texts.includes('[Bar] (バー)')).toBeTruthy()
+  })
 })

src/languages/lib/correct-translation-content.js

@@ -77,6 +77,38 @@ export function correctTranslatedContentStrings(content, englishContent, context
       '- % data variables.product.prodname_copilot_enterprise %}',
       '- {% data variables.product.prodname_copilot_enterprise %}',
     )
+
+    // This might not be exclusive to Japanese but put here because, at
+    // the time of writing, it only happens on the Japanse translations.
+    // According to the Microsoft translation guidelines, they're not
+    // supposed to translate words that will be seen in the UI, but
+    // instead mention then like this:
+    //
+    //    [Save changes](THE TRANSLATION OF "Save changes" IN JAPANESE)
+    //
+    // The problem is when these are wrapped in a deliberate Markdown link.
+    // For example:
+    //
+    //    [[Save changes](THE TRANSLATION OF "Save changes" IN JAPANESE)](#some-section)
+    //
+    // A real observed example is:
+    //
+    //    [[Allow deletions](削除を許可)](#allow-deletions)
+    //
+    // Here, because "削除を許可" contains no spaces, the Markdown parser
+    // thinks "削除を許可" is the URL! But in actuality,
+    // `[Allow deletions](削除を許可)` is the text and `#allow-deletions`
+    // is the URL.
+    // This problem does not exhibit if the text "削除を許可" were to contain
+    // a space character. But we can't assume that we can just add a space.
+    // For example "削除 を許可" would be incorrect. And where do you put the
+    // space? Between which characters.
+    // Instead, we can inject a "hair space" whitespace character between
+    // the `]` and the `(`. Then, the Markdown processor does not get confused
+    // and the link is rendered correctly.
+    // The `\u200A` is the "hair space" character. Technically whitespace
+    // but not wide enough to visually appear as a space.
+    content = content.replace(/\[(\[.*?\])(\(\S+\)\]\()/g, '[$1\u200A$2')
   }
 
   if (context.code === 'zh') {