FIX: Strip detection text before truncation (#196)

Besides removing images, we also want to make sure that we truncate the text _after_ removing the image, otherwise text sent for detection would be empty.

e.g. a cooked post that looks like that

`<p></p><div class=\"lightbox-wrapper\"><a class=\"lightbox\" href=\"https://asd.cloudfront.net/original/4X/c/d/d/asd.jpeg\" data-download-href=\"/uploads/short-url/asd.jpeg?dl=1\" title=\"IMG_20928\"><img src=\"https://asd.asd.net/optimized/4X/c/d/d/asd.jpeg\" alt=\"IMG_2029\" data-base62-sha1=\"asd\" width=\"666\" height=\"500\" srcset=\"https://asd.cloudfront.net/optimized/4X/c/d/d/asd.jpeg, https://asd.cloudfront.net/optimized/4X/c/d/d/asd.jpeg 1.5x, https://asd.cloudfront.net/optimized/4X/c/d/d/asd.jpeg 2x\" data-dominant-color=\"767065\"><div class=\"meta\">\n<svg class=\"fa d-icon d-icon-far-image svg-icon\" aria-hidden=\"true\"><use href=\"#far-image\"></use></svg><span class=\"filename\">IMG_2029</span><span class=\"informations\">1920×1440 742 KB</span><svg class=\"fa d-icon d-icon-discourse-expand svg-icon\" aria-hidden=\"true\"><use href=\"#discourse-expand\"></use></svg>\n</div></a></div>\n<p>L’església romànica de Santa Margarida.</p>`

should strip the `div.lightbox` and send `<p>L’església romànica de Santa Margarida.</p>` but is sending `<p></p>` now due to the mis-order.

Author: nattsw

app/services/discourse_translator/base.rb

@@ -79,8 +79,9 @@ def self.strip_tags_for_detection(detection_text)
     end
 
     def self.text_for_detection(topic_or_post)
-      strip_tags_for_detection(
-        get_text(topic_or_post).truncate(DETECTION_CHAR_LIMIT, omission: nil),
+      strip_tags_for_detection(get_text(topic_or_post)).truncate(
+        DETECTION_CHAR_LIMIT,
+        omission: nil,
       )
     end
 

app/validators/language_switcher_setting_validator.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class LanguageSwitcherSettingValidator
+  def initialize(opts = {})
+    @opts = opts
+  end
+
+  def valid_value?(val)
+    return true if val == "f"
+    SiteSetting.set_locale_from_cookie
+  end
+
+  def error_message
+    I18n.t("translator.site_settings.errors.set_locale_cookie_requirements")
+  end
+end

assets/javascripts/discourse/components/language-switcher.gjs

@@ -0,0 +1,61 @@
+import Component from "@glimmer/component";
+import {fn} from "@ember/helper";
+import {action} from "@ember/object";
+import {service} from "@ember/service";
+import DButton from "discourse/components/d-button";
+import DropdownMenu from "discourse/components/dropdown-menu";
+import cookie from "discourse/lib/cookie";
+import DMenu from "float-kit/components/d-menu";
+
+export default class LanguageSwitcher extends Component {
+  @service site;
+  @service siteSettings;
+  @service router;
+
+  get localeOptions() {
+    return JSON.parse(this.siteSettings.available_locales).map(({ name, value }) => {
+      return {
+        label: name,
+        value,
+      };
+    });
+  }
+
+  @action
+  async changeLocale(locale) {
+    cookie("locale", locale);
+    this.dMenu.close();
+    // we need a hard refresh here for the locale to take effect
+    window.location.reload();
+  }
+
+  @action
+  onRegisterApi(api) {
+    this.dMenu = api;
+  }
+
+  <template>
+    <DMenu
+      title="Language switcher"
+      @icon="language"
+      class="btn-flat btn-icon icon"
+      @onRegisterApi={{this.onRegisterApi}}
+    >
+      <:content>
+        <DropdownMenu as |dropdown|>
+          {{#each this.localeOptions as |option|}}
+            <dropdown.item
+              class="discourse-translator_locale-option"
+              data-menu-option-id={{option.value}}
+            >
+              <DButton
+                @translatedLabel={{option.label}}
+                @action={{fn this.changeLocale option.value}}
+              />
+            </dropdown.item>
+          {{/each}}
+        </DropdownMenu>
+      </:content>
+    </DMenu>
+  </template>
+}

assets/javascripts/discourse/initializers/extend-for-translate-button.js

@@ -1,20 +1,31 @@
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import { withSilencedDeprecations } from "discourse/lib/deprecated";
 import { withPluginApi } from "discourse/lib/plugin-api";
-import { withSilencedDeprecations } from "discourse-common/lib/deprecated";
 import { i18n } from "discourse-i18n";
+import LanguageSwitcher from "../components/language-switcher";
 import ToggleTranslationButton from "../components/post-menu/toggle-translation-button";
 import TranslatedPost from "../components/translated-post";
 
 function initializeTranslation(api) {
   const siteSettings = api.container.lookup("service:site-settings");
+  if (!siteSettings.translator_enabled) {
+    return;
+  }
+
   const currentUser = api.getCurrentUser();
 
-  if (!currentUser || !siteSettings.translator_enabled) {
-    return;
+  if (!currentUser && siteSettings.experimental_anon_language_switcher) {
+    api.headerIcons.add(
+      "discourse-translator_language-switcher",
+      LanguageSwitcher,
+      { before: ["search"] }
+    );
   }
 
-  customizePostMenu(api);
+  if (currentUser) {
+    customizePostMenu(api);
+  }
 }
 
 function customizePostMenu(api, container) {
@@ -123,24 +134,6 @@ function customizeWidgetPostMenu(api) {
       post.set("translated_text", "");
     }
   });
-
-  api.addPostMenuButton("translate", (attrs, state) => {
-    if (!attrs.can_translate) {
-      return;
-    }
-
-    const [action, title] = !state.isTranslated
-      ? ["translate", "translator.view_translation"]
-      : ["hideTranslation", "translator.hide_translation"];
-
-    return {
-      action,
-      title,
-      icon: "globe",
-      position: "first",
-      className: state.isTranslated ? "translated" : null,
-    };
-  });
 }
 
 export default {

config/locales/server.en.yml

@@ -17,6 +17,9 @@ en:
     translator_azure_custom_subdomain: "Required if using a Virtual Network or Firewall for Azure Cognitive Services. Note: Only enter the custom subdomain not the full custom endpoint."
     restrict_translation_by_group: "Only allowed groups can translate"
     restrict_translation_by_poster_group: "Only allow translation of posts made by users in allowed groups. If empty, allow translations of posts from all users."
+    experimental_anon_language_switcher: "Enable experimental language switcher for anonymous users. This will allow anonymous users to switch between translated versions of Discourse and user-contributed content in topics."
+    errors:
+      set_locale_cookie_requirements: "The experimental language switcher for anonymous users requires the `set locale from cookie` site setting to be enabled."
   translator:
     failed: "The translator is unable to translate this content (%{source_locale}) to the default language of this site (%{target_locale})."
     not_supported: "This language is not supported by the translator."

config/settings.yml

@@ -102,3 +102,7 @@ discourse_translator:
     default: ""
     client: true
     type: group_list
+  experimental_anon_language_switcher:
+    default: false
+    client: true
+    validator: "LanguageSwitcherSettingValidator"

spec/services/base_spec.rb

@@ -82,6 +82,11 @@ class EmptyTranslator < DiscourseTranslator::Base
       post.cooked = text
       expect(DiscourseTranslator::Base.text_for_detection(post)).to eq(text)
     end
+
+    it "strips text before truncation" do
+      post.cooked = "<img src='http://example.com/image.png' />" + "a" * 1000
+      expect(DiscourseTranslator::Base.text_for_detection(post)).to eq("a" * 1000)
+    end
   end
 
   describe ".text_for_translation" do