Replace react-content-marker with a regexp (#3014)

Fixes #2515
Fixes #3006

Ports all the rules from react-content-marker into an inlined implementation. Results are cleaner, more efficient, and less buggy. Also, for placeholders we now match the rules used in the editor highlighting.

In a few places the rules are relaxed a bit and/or made more sane, but these are unlikely to actually effect real-world messages noticably. Except where they fix current bugs. Also, the placeholder rules now match the editor.

translate/package.json

@@ -28,7 +28,6 @@
     "messageformat": "^4.0.0-2",
     "nprogress": "^0.2.0",
     "react": "^16.14.0",
-    "react-content-marker": "^2.2.0",
     "react-dom": "^16.14.0",
     "react-infinite-scroll-hook": "^4.0.1",
     "react-linkify": "^0.2.2",

translate/public/locale/en-US/translate.ftl

@@ -1,10 +1,5 @@
 ### Localization for the Translate page of Pontoon
 
-# Naming convention for l10n IDs: "module-ComponentName--string-summary".
-# This allows us to minimize the risk of conflicting IDs throughout the app.
-# Please sort alphabetically by (module name, component name). For each module,
-# keep strings in order of appearance.
-
 
 ## Pontoon Add-On promotion
 ## Renders Pontoon Add-On promotion banner
@@ -570,75 +565,35 @@ otherlocales-Translation--header-link =
     .title = Open string in { $locale } ({ $code })
 
 
-## Placeable parsers
+## Message terms
 ## Used to mark specific terms and characters in translations.
 
-placeable-parser-altAttribute =
-    .title = 'alt' attribute inside XML tag
-placeable-parser-camelCaseString =
-    .title = Camel case string
-placeable-parser-emailPattern =
+highlight-cli-option =
+    .title = Command line option
+highlight-email =
     .title = Email
-placeable-parser-escapeSequence =
+highlight-escape =
     .title = Escape sequence
-placeable-parser-filePattern =
-    .title = File location
-placeable-parser-fluentFunction =
-    .title = Fluent function
-placeable-parser-fluentParametrizedTerm =
-    .title = Fluent parametrized term
-placeable-parser-fluentString =
-    .title = Fluent string
-placeable-parser-fluentTerm =
-    .title = Fluent term
-placeable-parser-javaFormattingVariable =
-    .title = Java Message formatting variable
-placeable-parser-jsonPlaceholder =
-    .title = JSON placeholder
-placeable-parser-leadingSpace =
-    .title = Leading space
-placeable-parser-multipleSpaces =
-    .title = Multiple spaces
-placeable-parser-narrowNonBreakingSpace =
-    .title = Narrow non-breaking space
-placeable-parser-newlineCharacter =
+highlight-newline =
     .title = Newline character
-placeable-parser-newlineEscape =
-    .title = Escaped newline
-placeable-parser-nonBreakingSpace =
-    .title = Non-breaking space
-placeable-parser-nsisVariable =
-    .title = NSIS Variable
-placeable-parser-numberString =
+highlight-number =
     .title = Number
-placeable-parser-optionPattern =
-    .title = Command line option
-placeable-parser-punctuation =
+highlight-placeholder =
+    .title = Placeholder
+highlight-placeholder-entity =
+    .title = HTML/XML entity
+highlight-placeholder-html =
+    .title = HTML tag
+highlight-placeholder-printf =
+    .title = Printf format string
+highlight-punctuation =
     .title = Punctuation
-placeable-parser-pythonFormatNamedString =
-    .title = Python format string
-placeable-parser-pythonFormatString =
-    .title = Python format string
-placeable-parser-pythonFormattingVariable =
-    .title = Python string formatting variable
-placeable-parser-qtFormatting =
-    .title = Qt string formatting variable
-placeable-parser-shortCapitalNumberString =
-    .title = Short capital letter and number string
-placeable-parser-stringFormattingVariable =
-    .title = String formatting variable
-placeable-parser-tabCharacter =
+highlight-spaces =
+    .title = Unusual space
+highlight-tab =
     .title = Tab character
-placeable-parser-thinSpace =
-    .title = Thin space
-placeable-parser-unusualSpace =
-    .title = Unusual space in string
-placeable-parser-uriPattern =
-    .title = URI
-placeable-parser-xmlEntity =
-    .title = XML entity
-placeable-parser-xmlTag =
-    .title = XML tag
+highlight-url =
+    .title = URL
 
 
 ## Project menu

translate/public/locale/fr/translate.ftl

@@ -1,10 +1,5 @@
 ### Localization for the Translate page of Pontoon
 
-# Naming convention for l10n IDs: "module-ComponentName--string-summary".
-# This allows us to minimize the risk of conflicting IDs throughout the app.
-# Please sort alphabetically by (module name, component name). For each module,
-# keep strings in order of appearance.
-
 
 ## Editor Menu
 ## Allows contributors to modify or propose a translation
@@ -186,65 +181,35 @@ otherlocales-Translation--copy =
     .title = Copier la traduction
 
 
-## Placeable parsers
+## Message terms
 ## Used to mark specific terms and characters in translations.
 
-placeable-parser-altAttribute =
-    .title = Attribut 'alt' dans une balise XML
-placeable-parser-camelCaseString =
-    .title = Chaîne Camel Case
-placeable-parser-emailPattern =
+highlight-cli-option =
+    .title = Option de ligne de commande
+highlight-email =
     .title = Courriel
-placeable-parser-escapeSequence =
+highlight-escape =
     .title = Séquence d'échappement
-placeable-parser-filePattern =
-    .title = Emplacement de fichier
-placeable-parser-javaFormattingVariable =
-    .title = Variable de mise en forme Java Message
-placeable-parser-jsonPlaceholder =
-    .title = Emplacment JSON
-placeable-parser-multipleSpaces =
-    .title = Espaces multiple
-placeable-parser-narrowNonBreakingSpace =
-    .title = Espace insécable fine
-placeable-parser-newlineCharacter =
+highlight-newline =
     .title = Caractère de nouvelle ligne
-placeable-parser-newlineEscape =
-    .title = Caractère de nouvelle ligne échappé
-placeable-parser-nonBreakingSpace =
-    .title = Espace insécable
-placeable-parser-nsisVariable =
-    .title = Variable NSIS
-placeable-parser-numberString =
+highlight-number =
     .title = Nombre
-placeable-parser-optionPattern =
-    .title = Otion de ligne de commande
-placeable-parser-punctuation =
+highlight-placeholder =
+    .title = Emplacement
+highlight-placeholder-entity =
+    .title = Entité HTML/XML
+highlight-placeholder-html =
+    .title = Balise HTML
+highlight-placeholder-printf =
+    .title = Chaîne de mise en forme Printf
+highlight-punctuation =
     .title = Ponctuation
-placeable-parser-pythonFormatNamedString =
-    .title = Chaîne de mise en forme Python
-placeable-parser-pythonFormatString =
-    .title = Chaîne de mise en forme Python
-placeable-parser-pythonFormattingVariable =
-    .title = Variable de chaîne de mise en forme Python
-placeable-parser-qtFormatting =
-    .title = Variable de chaîne de mise en forme Qt
-placeable-parser-stringFormattingVariable =
-    .title = Variable de chaîne de mise en forme
-placeable-parser-shortCapitalNumberString =
-    .title = Chaîne courte de majuscules et chiffres
-placeable-parser-tabCharacter =
+highlight-spaces =
+    .title = Espace inhabituelle
+highlight-tab =
     .title = Caractère tabulation
-placeable-parser-thinSpace =
-    .title = Espace fine
-placeable-parser-unusualSpace =
-    .title = Espace inhabituelle dans la chaîne
-placeable-parser-uriPattern =
-    .title = URI
-placeable-parser-xmlEntity =
-    .title = Entité XML
-placeable-parser-xmlTag =
-    .title = Balise XML
+highlight-url =
+    .title = URL
 
 
 ## Resource menu

translate/src/modules/originalstring/components/OriginalString.test.js

@@ -36,7 +36,7 @@ describe('<OriginalString>', () => {
   it('renders original input as simple string', () => {
     const wrapper = mountOriginalString();
 
-    expect(wrapper.find('.original').children().children().text()).toMatch(
+    expect(wrapper.find('.original').children().text()).toMatch(
       /^Hello\W*\nSimple\W*\nString$/,
     );
   });

translate/src/modules/originalstring/components/OriginalString.tsx

@@ -65,7 +65,8 @@ export function OriginalString({
         const markedTerm = target.dataset['match'];
         if (markedTerm) {
           setPopupTerms(
-            terms.terms?.filter((t) => t.text === markedTerm) ?? [],
+            terms.terms?.filter((t) => t.text.toLowerCase() === markedTerm) ??
+              [],
           );
         }
       }
@@ -115,9 +116,7 @@ function InnerOriginalString({
 
   return (
     <p className='original' onClick={onClick}>
-      <Highlight fluent={isFluent} terms={terms}>
-        {source}
-      </Highlight>
+      <Highlight terms={terms}>{source}</Highlight>
     </p>
   );
 }

translate/src/modules/originalstring/components/RichString.tsx

@@ -31,9 +31,7 @@ export function RichString({
             </td>
             <td>
               <span>
-                <Highlight fluent terms={terms}>
-                  {handle.current.value}
-                </Highlight>
+                <Highlight terms={terms}>{handle.current.value}</Highlight>
               </span>
             </td>
           </tr>