[7.0] Fix DOM ids and labels of ingredient editors

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 7.0.1 (2023-07-07)
+
+- Fix disconnecting Tinymce intersection observer [#2519](https://github.com/AlchemyCMS/alchemy_cms/pull/2519) ([tvdeyen](https://github.com/tvdeyen))
+
 ## 7.0.0 (2023-07-05)
 
 - Remove old alchemy_admin files from sprockets builds [#2517](https://github.com/AlchemyCMS/alchemy_cms/pull/2517) ([tvdeyen](https://github.com/tvdeyen))

alchemy_cms.gemspec

@@ -63,7 +63,7 @@ Gem::Specification.new do |gem|
   gem.add_development_dependency "rspec-activemodel-mocks", ["~> 1.0"]
   gem.add_development_dependency "rspec-rails", [">= 4.0.0.beta2"]
   gem.add_development_dependency "simplecov", ["~> 0.20"]
-  gem.add_development_dependency "webdrivers", ["~> 5.0"]
+  gem.add_development_dependency "selenium-webdriver", ["~> 4.10"]
   gem.add_development_dependency "webmock", ["~> 3.3"]
   gem.add_development_dependency "shoulda-matchers", ["~> 5.0"]
   gem.add_development_dependency "timecop", ["~> 0.9"]

app/assets/javascripts/alchemy/alchemy.initializer.js.coffee

@@ -52,5 +52,6 @@ $(document).on 'turbo:load', ->
 
 $(document).on 'turbo:before-fetch-request', ->
   # Ensure that all tinymce editors get removed before parsing a new page
+  Alchemy.Tinymce.removeIntersectionObserver()
   Alchemy.Tinymce.removeFrom $('.has_tinymce')
   return

app/helpers/alchemy/admin/ingredients_helper.rb

@@ -32,8 +32,8 @@ def render_ingredient_role(ingredient)
       end
 
       # Renders the label and hint for a ingredient.
-      def ingredient_label(ingredient, column = :value)
-        label_tag ingredient.form_field_id(column) do
+      def ingredient_label(ingredient, column = :value, html_options = {})
+        label_tag ingredient.form_field_id(column), html_options do
           [render_ingredient_role(ingredient), render_hint_for(ingredient)].compact.join(" ").html_safe
         end
       end

app/javascript/alchemy_admin/tinymce.js

@@ -41,10 +41,6 @@ function initEditors(ids) {
 // initialize IntersectionObserver
 // the observer will initialize Tinymce if the textarea becomes visible
 function initializeIntersectionObserver() {
-  if (tinymceIntersectionObserver !== null) {
-    tinymceIntersectionObserver.disconnect()
-  }
-
   const observerCallback = (entries, observer) => {
     entries.forEach((entry) => {
       if (entry.intersectionRatio > 0) {
@@ -108,6 +104,12 @@ function removeEditor(editorId) {
   }
 }
 
+function removeIntersectionObserver() {
+  if (tinymceIntersectionObserver !== null) {
+    tinymceIntersectionObserver.disconnect()
+  }
+}
+
 export default {
   // Initializes all TinyMCE editors with given ids
   //
@@ -135,6 +137,8 @@ export default {
     })
   },
 
+  removeIntersectionObserver,
+
   // set tinymce configuration for a given selector key
   setCustomConfig(key, configuration) {
     tinymceCustomConfigs[key] = configuration

app/views/alchemy/ingredients/_boolean_editor.html.erb

@@ -2,8 +2,8 @@
   class: boolean_editor.css_classes,
   data: boolean_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, boolean_editor.ingredient) do |f| %>
-    <%= f.label :value, style: "display: inline-block" do %>
-      <%= f.check_box :value, id: boolean_editor.form_field_id %>
+    <%= f.label :value, style: "display: inline-block", for: nil do %>
+      <%= f.check_box :value, id: nil %>
       <%= render_ingredient_role(boolean_editor) %>
     <% end %>
     <%= render_hint_for(boolean_editor) %>

app/views/alchemy/ingredients/_picture_editor.html.erb

@@ -4,7 +4,7 @@
   class: picture_editor.css_classes,
   data: picture_editor.data_attributes do %>
   <%= element_form.fields_for(:ingredients, picture_editor.ingredient) do |f| %>
-    <%= ingredient_label(picture_editor, :picture_id) %>
+    <%= ingredient_label(picture_editor, :picture_id, for: nil) %>
     <%= content_tag :div,
       data: {
         target_size: picture_editor.settings[:size] || [

lib/alchemy/version.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Alchemy
-  VERSION = "7.0.0"
+  VERSION = "7.0.1"
 
   def self.version
     VERSION

spec/helpers/alchemy/admin/ingredients_helper_spec.rb

@@ -33,6 +33,12 @@
         is_expected.to have_selector("label > .hint-with-icon", text: "This is a hint")
       end
     end
+
+    context "with html_options given" do
+      it "adds them to the label tag" do
+        expect(helper.ingredient_label(ingredient_editor, :value, for: "foo")).to have_selector('label[for="foo"]')
+      end
+    end
   end
 
   describe "#render_ingredient_role" do

spec/rails_helper.rb

@@ -12,7 +12,6 @@
 require "rails-controller-testing"
 require "rspec-activemodel-mocks"
 require "rspec/rails"
-require "webdrivers/chromedriver"
 require "shoulda-matchers"
 require "factory_bot"
 require "view_component/test_helpers"

spec/views/alchemy/ingredients/boolean_editor_spec.rb

@@ -38,4 +38,9 @@
       end
     end
   end
+
+  it "does not add a for attribute to the label tag" do
+    is_expected.to have_selector("label", text: "Boolean")
+    is_expected.to_not have_selector("label[for]", text: "Boolean")
+  end
 end

spec/views/alchemy/ingredients/picture_editor_spec.rb

@@ -86,4 +86,9 @@
       is_expected.to have_selector("a.disabled .icon.fa-crop")
     end
   end
+
+  it "does not add a for attribute to the label tag" do
+    is_expected.to have_selector("label", text: "Image")
+    is_expected.to_not have_selector("label[for]", text: "Image")
+  end
 end