Add trix editor to new product form

jibees · Sep 4, 2023 · 0884887 · 0884887
1 parent a9e2f25
commit 0884887
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 13 deletions.
diff --git a/app/views/spree/admin/products/new.html.haml b/app/views/spree/admin/products/new.html.haml
@@ -92,8 +92,8 @@
         = f.field_container :description do
           = f.label :product_description, t(".product_description")
           %br/
-          %text-angular{'id' => 'product_description', 'name' => 'product[description]', 'class' => 'text-angular', "textangular-links-target-blank" => true, 'ta-toolbar' => "[['bold','italics','underline','clear'],['insertLink']]", "ng-model": "product.description"}
-            = sanitize(@product.description)
+          = f.hidden_field :description, id: "product_description", value: @product.description
+          %trix-editor{ input: "product_description", "data-controller": "trixeditor" }
           = f.error_message_on :description
   .four.columns.omega{ style: "text-align: center" }
     %fieldset.no-border-bottom{ id: "image" }

diff --git a/spec/system/admin/products_spec.rb b/spec/system/admin/products_spec.rb
@@ -45,7 +45,7 @@
       fill_in 'product_on_hand', with: 5
       check 'product_on_demand'
       select 'Test Tax Category', from: 'product_tax_category_id'
-      page.find("div[id^='taTextElement']").native.send_keys('A description...')
+      fill_in_trix_editor 'product_description', with: 'A description...'
 
       click_button 'Create'
 
@@ -58,7 +58,8 @@
       expect(page).to have_field 'product_on_hand', with: 5
       expect(page).to have_field 'product_on_demand', checked: true
       expect(page).to have_field 'product_tax_category_id', with: tax_category.id
-      expect(page.find("div[id^='taTextElement']")).to have_content 'A description...'
+      expect(page.find("#product_description",
+                       visible: false).value).to eq('<div>A description...</div>')
       expect(page.find("#product_variant_unit_field")).to have_content 'Weight (kg)'
 
       expect(page).to have_content "Name can't be blank"
@@ -80,7 +81,7 @@
       fill_in 'product_on_hand', with: 5
       check 'product_on_demand'
       select 'Test Tax Category', from: 'product_tax_category_id'
-      page.find("div[id^='taTextElement']").native.send_keys('A description...')
+      fill_in_trix_editor 'product_description', with: 'A description...'
 
       click_button 'Create'
 
@@ -93,7 +94,8 @@
       expect(page).to have_field 'product_on_hand', with: 5
       expect(page).to have_field 'product_on_demand', checked: true
       expect(page).to have_field 'product_tax_category_id', with: tax_category.id
-      expect(page.find("div[id^='taTextElement']")).to have_content 'A description...'
+      expect(page.find("#product_description",
+                       visible: false).value).to eq('<div>A description...</div>')
       expect(page.find("#product_variant_unit_field")).to have_content 'Weight (kg)'
 
       expect(page).to have_content "Unit value must be greater than 0"
@@ -128,7 +130,7 @@
       fill_in 'product_price', with: '19.99'
       fill_in 'product_on_hand', with: 5
       select 'Test Tax Category', from: 'product_tax_category_id'
-      page.find("div[id^='taTextElement']").native.send_keys('A description...')
+      fill_in_trix_editor 'product_description', with: 'A description...'
 
       click_button 'Create'
 
@@ -146,7 +148,7 @@
       expect(product.on_hand).to eq(5)
       expect(product.variants.first.tax_category_id).to eq(tax_category.id)
       expect(product.variants.first.shipping_category).to eq(shipping_category)
-      expect(product.description).to eq("<p>A description...</p>")
+      expect(product.description).to eq("<div>A description...</div>")
       expect(product.group_buy).to be_falsey
       expect(product.variants.first.unit_presentation).to eq("5kg")
     end
@@ -166,8 +168,8 @@
       fill_in 'product_on_hand', with: 0
       check 'product_on_demand'
       select 'Test Tax Category', from: 'product_tax_category_id'
-      page.find("div[id^='taTextElement']").native
-        .send_keys('In demand, and on_demand! The hottest cakes in town.')
+      fill_in_trix_editor 'product_description',
+                          with: 'In demand, and on_demand! The hottest cakes in town.'
 
       click_button 'Create'
 
@@ -193,9 +195,8 @@
       fill_in 'product_on_hand', with: 0
       check 'product_on_demand'
       select 'Test Tax Category', from: 'product_tax_category_id'
-      find("div[id^='taTextElement']").native
-        .send_keys('In demand, and on_demand! The hottest cakes in town.')
-
+      fill_in_trix_editor 'product_description',
+                          with: 'In demand, and on_demand! The hottest cakes in town.'
       click_button 'Create'
 
       expect(current_path).to eq spree.admin_products_path