Replace text angular editor with trix editor in About Us and Shopfront message fields

app/assets/javascripts/admin/all.js

@@ -15,6 +15,7 @@
 //= require angular
 //= require angular-resource
 //= require angular-animate
+//= require angular-sanitize
 //= require angularjs-file-upload
 //= require ../shared/ng-infinite-scroll.min.js
 //= require ../shared/ng-tags-input.min.js
@@ -61,11 +62,6 @@
 //= require ./variant_overrides/variant_overrides
 
 // text, dates and translations
-//= require textAngular-rangy.min.js
-// This replaces angular-sanitize. We should include only one.
-// https://github.com/textAngular/textAngular#where-to-get-it
-//= require textAngular-sanitize.min.js
-//= require textAngular.min.js
 //= require i18n/translations
 //= require darkswarm/i18n.translate.js
 

app/assets/javascripts/admin/enterprise_groups/enterprise_groups.js.coffee

@@ -1 +1 @@
-angular.module("admin.enterprise_groups", ["admin.side_menu", "admin.users", "textAngular"])
+angular.module("admin.enterprise_groups", ["admin.side_menu", "admin.users", "ngSanitize"])

app/assets/javascripts/admin/enterprises/enterprises.js.coffee

@@ -3,24 +3,10 @@ angular.module("admin.enterprises", [
   "admin.utils",
   "admin.shippingMethods",
   "admin.users",
-  "textAngular",
   "admin.side_menu",
   "admin.taxons",
   'admin.indexUtils',
   'admin.tagRules',
   'admin.dropdown',
   'ngSanitize']
 )
-# For more options: https://github.com/textAngular/textAngular/blob/master/src/textAngularSetup.js
-.config [
-  '$provide', ($provide) ->
-    $provide.decorator 'taTranslations', [
-      '$delegate'
-      (taTranslations) ->
-        taTranslations.insertLink = {
-          tooltip: t('admin.enterprises.form.shop_preferences.shopfront_message_link_tooltip'),
-          dialogPrompt: t('admin.enterprises.form.shop_preferences.shopfront_message_link_prompt')
-        }
-        taTranslations
-    ]
-]

app/assets/javascripts/admin/products/products.js.coffee

@@ -1 +1 @@
-angular.module("admin.products", ["textAngular", "admin.utils", "OFNShared"])
+angular.module("admin.products", ["ngSanitize", "admin.utils", "OFNShared"])

app/models/enterprise.rb

@@ -251,12 +251,21 @@ def self.distinct_count
 
   # Remove any unsupported HTML.
   def long_description
-    HtmlSanitizer.sanitize(super)
+    HtmlSanitizer.sanitize_and_enforce_link_target_blank(super)
   end
 
   # Remove any unsupported HTML.
   def long_description=(html)
-    super(HtmlSanitizer.sanitize(html))
+    super(HtmlSanitizer.sanitize_and_enforce_link_target_blank(html))
+  end
+
+  def preferred_shopfront_message=(html)
+    self.prefers_shopfront_message = HtmlSanitizer.sanitize_and_enforce_link_target_blank(html)
+  end
+
+  def preferred_shopfront_closed_message=(html)
+    self.prefers_shopfront_closed_message =
+      HtmlSanitizer.sanitize_and_enforce_link_target_blank(html)
   end
 
   def contact

app/models/enterprise_group.rb

@@ -76,12 +76,12 @@ def to_param
 
   # Remove any unsupported HTML.
   def long_description
-    HtmlSanitizer.sanitize(super)
+    HtmlSanitizer.sanitize_and_enforce_link_target_blank(super)
   end
 
   # Remove any unsupported HTML.
   def long_description=(html)
-    super(HtmlSanitizer.sanitize(html))
+    super(HtmlSanitizer.sanitize_and_enforce_link_target_blank(html))
   end
 
   private

app/services/html_sanitizer.rb

@@ -18,4 +18,16 @@ def self.sanitize(html)
       html, tags: ALLOWED_TAGS, attributes: (ALLOWED_ATTRIBUTES + ALLOWED_TRIX_DATA_ATTRIBUTES)
     )
   end
+
+  def self.sanitize_and_enforce_link_target_blank(html)
+    sanitize(enforce_link_target_blank(html))
+  end
+
+  def self.enforce_link_target_blank(html)
+    return if html.nil?
+
+    Nokogiri::HTML::DocumentFragment.parse(html).tap do |document|
+      document.css("a").each { |link| link["target"] = "_blank" }
+    end.to_s
+  end
 end

app/views/admin/enterprise_groups/_form_about.html.haml

@@ -1,6 +1,5 @@
 %fieldset.alpha.no-border-bottom#about_panel{ data: { "tabs-and-panels-target": "panel" } }
   %legend= t('.about')
   = f.field_container :long_description do
-    %text-angular{'id' => 'enterprise_group_long_description', 'name' => 'enterprise_group[long_description]', 'class' => 'text-angular', "textangular-links-target-blank" => true,
-      'ta-toolbar' => "[['h1','h2','h3','h4','p'],['bold','italics','underline','clear'],['insertLink']]"}
-      != @enterprise_group[:long_description]
+    = f.hidden_field :long_description, id: "enterprise_group_long_description"
+    %trix-editor{ input: "enterprise_group_long_description", "data-controller": "trixeditor" }

app/views/admin/enterprises/form/_about_us.html.haml

@@ -4,14 +4,7 @@
   .omega.eight.columns
     = f.text_field :description, maxlength: 255, placeholder: t('.desc_short_placeholder')
 .row
-  .alpha.three.columns
+  .alpha.eleven.columns
     = f.label :long_description, t('.desc_long')
-  .omega.eight.columns
-    -# textAngular toolbar options, add to the ta-toolbar array below and separate into groups with extra ],[ if needed:
-    -# 	['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'quote'],
-    -# 	['bold', 'italics', 'underline', 'strikeThrough', 'ul', 'ol', 'redo', 'undo', 'clear'],
-    -# 	['justifyLeft','justifyCenter','justifyRight','indent','outdent'],
-    -# 	['html', 'insertImage', 'insertLink', 'insertVideo']
-    %text-angular{'ng-model' => 'Enterprise.long_description', 'id' => 'enterprise_long_description', 'name' => 'enterprise[long_description]', 'class' => 'text-angular', "textangular-links-target-blank" => true,
-      'ta-toolbar' => "[['h1','h2','h3','h4','p'],['bold','italics','underline','clear'],['insertLink']]",
-      'placeholder' => t('.desc_long_placeholder')}
+    = f.hidden_field :long_description, id: "enterprise_long_description"
+    %trix-editor{ input: "enterprise_long_description", "data-controller": "trixeditor" }

app/views/admin/enterprises/form/_shop_preferences.html.haml

@@ -1,17 +1,13 @@
 .row
-  .three.columns.alpha
+  .eleven.columns.alpha
     = f.label "enterprise_preferred_shopfront_message", t('.shopfront_message')
-  .eight.columns.omega
-    %text-angular{'ng-model' => 'Enterprise.preferred_shopfront_message', 'id' => 'enterprise_preferred_shopfront_message', 'name' => 'enterprise[preferred_shopfront_message]', 'class' => 'text-angular textangular-strip', 'ta-paste' => "stripFormatting($html)", "textangular-links-target-blank" => true,
-      'ta-toolbar' => "[['h1','h2','h3','h4','p'],['bold','italics','underline','clear'],['insertLink']]",
-      'placeholder' => t('.shopfront_message_placeholder')}
+    = f.hidden_field :preferred_shopfront_message, id: "enterprise_preferred_shopfront_message"
+    %trix-editor{ input: "enterprise_preferred_shopfront_message", "data-controller": "trixeditor", placeholder: t('.shopfront_message_placeholder') }
 .row
-  .three.columns.alpha
+  .eleven.columns.alpha
     = f.label "enterprise_preferred_shopfront_closed_message", t('.shopfront_closed_message')
-  .eight.columns.omega
-    %text-angular{'ng-model' => 'Enterprise.preferred_shopfront_closed_message', 'id' => 'enterprise_preferred_shopfront_closed_message', 'name' => 'enterprise[preferred_shopfront_closed_message]', 'class' => 'text-angular textangular-strip', 'ta-paste' => "stripFormatting($html)", "textangular-links-target-blank" => true,
-      'ta-toolbar' => "[['h1','h2','h3','h4','p'],['bold','italics','underline','clear'],['insertLink']]",
-      'placeholder' => t('.shopfront_closed_message_placeholder')}
+    = f.hidden_field :preferred_shopfront_closed_message, id: "enterprise_preferred_shopfront_closed_message"
+    %trix-editor{ input: "enterprise_preferred_shopfront_closed_message", "data-controller": "trixeditor", placeholder: t('.shopfront_closed_message_placeholder') }
 
 .row
   .text-normal
@@ -77,7 +73,7 @@
     = f.radio_button :preferred_product_low_stock_display, true, 'ng-model' => 'Enterprise.preferred_product_low_stock_display', 'ng-value' => 'true'
     = f.label :preferred_product_low_stock_display, t('.enabled'), value: :true
   .five.columns.omega
-    = f.radio_button :preferred_product_low_stock_display, false, 'ng-model' => 'Enterprise.preferred_product_low_stock_display', 'ng-value' => 'false' 
+    = f.radio_button :preferred_product_low_stock_display, false, 'ng-model' => 'Enterprise.preferred_product_low_stock_display', 'ng-value' => 'false'
     = f.label :preferred_product_low_stock_display, t('.disabled'), value: :false
 
 .row

app/webpacker/controllers/trixeditor_controller.js

@@ -28,6 +28,8 @@ export default class extends Controller {
     ) {
       this.#addHRButton();
     }
+
+    this.#setTranslations();
   };
 
   #addHRButton = () => {
@@ -42,4 +44,57 @@ export default class extends Controller {
       this.#trixActionInvoke(event);
     });
   };
+
+  #setTranslation(selector, attribute, value) {
+    let element = this.element.parentElement.querySelector(selector);
+    if(element && element.hasAttribute(attribute)) {
+      element.setAttribute(attribute, value);
+    }
+  }
+
+  #setTranslations() {
+    if(I18n.t("js.trix")) {
+      // Calling 'Trix.config.lang = I18n.t("js.trix")' doesn't work due to read-only error, so set
+      // translations one at a time.
+      for (const [key, translation] of Object.entries(I18n.t("js.trix"))) {
+
+        // Set all translations (only works in Firefox for some reason)
+        Trix.config.lang[key] = translation;
+
+        // Set toolbar translations (Chrome)
+        this.#setTranslation(
+          `[data-trix-action="${this.#translationKeyToAttributeMappings(key)}"]`,
+          "title",
+          translation
+        );
+        this.#setTranslation(
+          `[data-trix-attribute="${this.#translationKeyToAttributeMappings(key)}"]`,
+          "title",
+          translation
+        );
+      }
+
+      // Set translations for link dialog (Chrome)
+      this.#setTranslation(`[data-trix-dialog="href"] input`,
+                                  "aria-label", I18n.t("js.trix.url"));
+      this.#setTranslation(`[data-trix-dialog="href"] input`,
+                                  "placeholder", I18n.t("js.trix.urlPlaceholder"));
+      this.#setTranslation('.trix-dialog--link input[data-trix-method="setAttribute"]',
+                                  "value", I18n.t("js.trix.link"));
+      this.#setTranslation('.trix-dialog--link input[data-trix-method="removeAttribute"]',
+                                  "value", I18n.t("js.trix.unlink"));
+    }
+  }
+
+  #translationKeyToAttributeMappings(key) {
+    let mapping = {
+      "bullets": "bullet",
+      "link": "href",
+      "numbers": "number",
+      "indent": "increaseNestingLevel",
+      "outdent": "decreaseNestingLevel"
+    }[key];
+
+    return mapping || key;
+  }
 }

app/webpacker/css/admin/all.scss

@@ -6,7 +6,6 @@
 @import "~jquery-ui/themes/base/resizable";
 @import "vendor/assets/stylesheets/jquery-ui-theme";
 @import "~jquery-ui/themes/base/dialog";
-@import "../shared/textAngular";
 @import "../shared/ng-tags-input.min";
 @import "vendor/assets/stylesheets/select2.css.scss";
 @import "~flatpickr/dist/flatpickr";
@@ -72,7 +71,6 @@
 @import "components/todo";
 @import "components/tooltip";
 @import "components/wizard_progress";
-@import "components/text-angular";
 
 @import "pages/enterprise_form";
 @import "pages/subscription_form";

app/webpacker/css/admin/trix.scss

@@ -1,3 +1,7 @@
+trix-toolbar .trix-button-row {
+  flex-wrap: wrap;
+}
+
 trix-toolbar [data-trix-button-group="file-tools"] {
   display: none;
 }
@@ -11,7 +15,7 @@ trix-editor {
   color: #222;
 
   a {
-    color: #f27052; // Equivalent to text-angular a
+    color: #f27052;
   }
 
   @include trix-styles;

app/webpacker/css/admin_v3/all.scss

@@ -10,7 +10,6 @@
 @import "~jquery-ui/themes/base/resizable";
 @import "vendor/assets/stylesheets/jquery-ui-theme";
 @import "~jquery-ui/themes/base/dialog";
-@import "../shared/textAngular";
 @import "../shared/ng-tags-input.min";
 @import "vendor/assets/stylesheets/select2.css.scss";
 @import "~flatpickr/dist/flatpickr";
@@ -76,7 +75,6 @@
 @import "../admin/components/todo";
 @import "../admin/components/tooltip";
 @import "../admin/components/wizard_progress";
-@import "components/text-angular"; // admin_v3
 
 @import "../admin/pages/enterprise_form";
 @import "../admin/pages/subscription_form";