From 49eb17cb1e1b2211c27bc02364dd5d204d0abc07 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Thu, 6 Jul 2023 10:05:10 +0200 Subject: [PATCH 1/4] Fix disconnecting Tinymce intersection observer Before we were removing the intersection observer even if we are still on the same page. Now removing it were we need to, in the Turbo page change event. --- .../alchemy/alchemy.initializer.js.coffee | 1 + app/javascript/alchemy_admin/tinymce.js | 12 ++++++++---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/alchemy/alchemy.initializer.js.coffee b/app/assets/javascripts/alchemy/alchemy.initializer.js.coffee index d3dfde2f11..b27d1c2420 100644 --- a/app/assets/javascripts/alchemy/alchemy.initializer.js.coffee +++ b/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 diff --git a/app/javascript/alchemy_admin/tinymce.js b/app/javascript/alchemy_admin/tinymce.js index 66b3acb86d..5cdb194e41 100644 --- a/app/javascript/alchemy_admin/tinymce.js +++ b/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 From cae71d5dca1491f983f4a526118c35cb968f6c46 Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Fri, 7 Jul 2023 10:55:57 +0200 Subject: [PATCH 2/4] Bump version to v7.0.1 --- CHANGELOG.md | 4 ++++ lib/alchemy/version.rb | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ecd2ccba17..f7cfb66aaf 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/lib/alchemy/version.rb b/lib/alchemy/version.rb index ca564f291d..001e26622e 100644 --- a/lib/alchemy/version.rb +++ b/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 From 5578fc120a7451e41d03ca0bb4a74fbd4376cfd0 Mon Sep 17 00:00:00 2001 From: Martin Meyerhoff Date: Mon, 31 Jul 2023 14:03:36 +0200 Subject: [PATCH 3/4] Use selenium-webdriver instead of webdrivers gem Selenium-Webdriver now has a feature that makes the webdrivers gem obsolete: https://github.com/titusfortner/webdrivers#update-future-of-this-project --- alchemy_cms.gemspec | 2 +- spec/rails_helper.rb | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/alchemy_cms.gemspec b/alchemy_cms.gemspec index e889617e55..1d5e950e29 100644 --- a/alchemy_cms.gemspec +++ b/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"] diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb index ff28580e15..5ef2fb3717 100644 --- a/spec/rails_helper.rb +++ b/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" From 15d2ac1f045da394a2570fc7ad8a81468f83689c Mon Sep 17 00:00:00 2001 From: Thomas von Deyen Date: Tue, 25 Jul 2023 23:57:12 +0200 Subject: [PATCH 4/4] Fix DOM ids and labels of ingredient editors The boolean ingredient editor label tag must not have a `for` attribute since it nests the input tag. That input does not need an `id` as it is nested. Solves an issue with non-clickable label on the checkbox. The image editor label must not have a `for` attribute as well, as there is no focusable form element. --- app/helpers/alchemy/admin/ingredients_helper.rb | 4 ++-- app/views/alchemy/ingredients/_boolean_editor.html.erb | 4 ++-- app/views/alchemy/ingredients/_picture_editor.html.erb | 2 +- spec/helpers/alchemy/admin/ingredients_helper_spec.rb | 6 ++++++ spec/views/alchemy/ingredients/boolean_editor_spec.rb | 5 +++++ spec/views/alchemy/ingredients/picture_editor_spec.rb | 5 +++++ 6 files changed, 21 insertions(+), 5 deletions(-) diff --git a/app/helpers/alchemy/admin/ingredients_helper.rb b/app/helpers/alchemy/admin/ingredients_helper.rb index 1e438ead4a..6a9f6dc506 100644 --- a/app/helpers/alchemy/admin/ingredients_helper.rb +++ b/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 diff --git a/app/views/alchemy/ingredients/_boolean_editor.html.erb b/app/views/alchemy/ingredients/_boolean_editor.html.erb index 1824432c9e..d02d7877a7 100644 --- a/app/views/alchemy/ingredients/_boolean_editor.html.erb +++ b/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) %> diff --git a/app/views/alchemy/ingredients/_picture_editor.html.erb b/app/views/alchemy/ingredients/_picture_editor.html.erb index d5d57cccab..c57a1f996d 100644 --- a/app/views/alchemy/ingredients/_picture_editor.html.erb +++ b/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] || [ diff --git a/spec/helpers/alchemy/admin/ingredients_helper_spec.rb b/spec/helpers/alchemy/admin/ingredients_helper_spec.rb index b9aa2b4265..324c6d8374 100644 --- a/spec/helpers/alchemy/admin/ingredients_helper_spec.rb +++ b/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 diff --git a/spec/views/alchemy/ingredients/boolean_editor_spec.rb b/spec/views/alchemy/ingredients/boolean_editor_spec.rb index 11e380cd09..0567eac6e0 100644 --- a/spec/views/alchemy/ingredients/boolean_editor_spec.rb +++ b/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 diff --git a/spec/views/alchemy/ingredients/picture_editor_spec.rb b/spec/views/alchemy/ingredients/picture_editor_spec.rb index c74c49fcc8..7634e040bb 100644 --- a/spec/views/alchemy/ingredients/picture_editor_spec.rb +++ b/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