Support html translations (#47)

* Add trnaslations that contain html values

* Attempt refactor stimulus controller

* Refactor element swapping

* Rename non-code wrapper to text wrapper

* Fix swap elements

* Revert controller changes

* Revert translation form

* Update gem version

* Update changelog

* Implement html wrapper

* Readd frozen string literal

* Fix linter

* Rename translation

* Revert engine

* Update form

* Handle unknwn

* Handle missing translations

* refactor is_missing_translation

* refactor span to textarea

* refactor matching helper

* Refactor view

* Revert frozen string literal

* Revert changes

* Fix linter

CHANGELOG.md

@@ -5,6 +5,8 @@
 * Fixed some setup issues in test environments ([@oliveranthony17][])
 * Show original translation when deleting the whole inline editing content. ([@CuddlyBunion341][])
 
+* Support for html translations ([@CuddlyBunion341][])
+=======
 ## 0.2.0
 
 * Support for strings coming from gems ([@coorasse][])

app/views/moirai/translation_files/_form.html.erb

@@ -1,9 +1,9 @@
 <span 
-  contenteditable 
+  contenteditable
   data-action="blur->moirai-translation#submit click->moirai-translation#click"
-  style="border: 1px dashed #1d9f74; min-width: 30px; display: inline-block;" 
+  style="outline: 1px solid #1d9f74; min-width: 30px; display: inline-block; <%= 'color: red;' if is_missing_translation %>" 
   data-moirai-translation-key-value="<%= key %>"
   data-moirai-translation-locale-value="<%= locale %>"
   data-controller="moirai-translation">
-  <%= value %>
+  <%= value.to_s.gsub("<", "&lt;").gsub(">", "&gt;").html_safe %>
 </span>

lib/moirai/engine.rb

@@ -27,12 +27,18 @@ module ActionView::Helpers::TranslationHelper # rubocop:disable Lint/ConstantDef
           def translate(key, **options)
             value = original_translate(key, **options)
 
+            is_missing_translation = value.include?('class="translation_missing"')
+            if value.is_a?(String) && is_missing_translation
+              value = extract_inner_content(value)
+            end
+
             if moirai_edit_enabled?
               @key_finder ||= Moirai::KeyFinder.new
 
               render(partial: "moirai/translation_files/form",
                 locals: {key: scope_key_by_partial(key),
                          locale: I18n.locale,
+                         is_missing_translation: is_missing_translation,
                          value: value})
             else
               value
@@ -44,6 +50,13 @@ def translate(key, **options)
           def moirai_edit_enabled?
             params[:moirai] == "true"
           end
+
+          private
+
+          def extract_inner_content(html)
+            match = html.match(/<[^>]+>([^<]*)<\/[^>]+>/)
+            match ? match[1] : nil
+          end
         end
       end
     end

test/dummy/app/views/home/index.html.erb

@@ -5,6 +5,7 @@
 <button><%= t('buttons.very.much.nested.value') %></button>
 
 <p><%= t('second_paragraph') %></p>
+<p><%= t('third_paragraph_html') %></p>
 
 <button><%= t('buttons.very.much.nested.only_german') %></button>
 <button><%= t('buttons.very.much.nested.only_english') %></button>

test/dummy/config/locales/de.yml

@@ -5,6 +5,7 @@ de:
     english: Englisch
   first_paragraph: Dies ist eine Dummy-App von moirai zum Testen. Wechseln Sie die Sprache über die Navigationsleiste.
   second_paragraph: Fallback-Sprache ist Englisch. Die folgenden Schaltflächen wurden nur in einer Sprache definiert
+  third_paragraph_html_html: Enthält <b>fettgedruckten Text</b>, <i>kursiven Text</i> und einen <a href="https://www.google.com">Link</a>
   buttons:
     very:
       much:

test/dummy/config/locales/en.yml

@@ -5,6 +5,7 @@ en:
     english: English
   first_paragraph: This is moirai dummy app for testing. Switch language from the navbar.
   second_paragraph: Fallback language is English. The following buttons have been defined only in one language
+  third_paragraph_html: Contains <b>bold text</b>, <i>italic text</i> and a <a href="https://www.google.com">link</a>
   buttons:
     very:
       much:

test/dummy/config/locales/it.yml

@@ -5,6 +5,7 @@ it:
     english: Inglese
   first_paragraph: Questa è l'applicazione moirai dummy per i test. Cambi la lingua dalla barra di navigazione.
   second_paragraph: La lingua di riserva è l'inglese. I seguenti pulsanti sono stati definiti solo in una lingua
+  third_paragraph_html: Contiene <b>testo in grassetto</b>, <i>testo in corsivo</i> e un <a href="https://www.google.com">link</a>
   buttons:
     very:
       much: