Use intersection observer to init Tinymce editors

Rakefile

@@ -44,13 +44,13 @@ namespace :alchemy do
           yarn install && \
           yarn link && \
           cd spec/dummy && \
-          yarn link @alchemy_cms/admin && \
           export RAILS_ENV=test && \
           bin/rake db:create && \
           bin/rake db:environment:set && \
           bin/rake db:migrate:reset && \
           bin/rails javascript:install:esbuild && \
           bin/rails g alchemy:install --skip --skip-demo-files --auto-accept --skip-db-create && \
+          yarn link @alchemy_cms/admin && \
           bin/rails javascript:build && \
           cd -
         BASH

app/assets/javascripts/alchemy/admin.js

@@ -38,7 +38,6 @@
 //= require alchemy/alchemy.uploader
 //= require alchemy/alchemy.preview_window
 //= require alchemy/alchemy.spinner
-//= require alchemy/alchemy.tinymce
 //= require alchemy/alchemy.tooltips
 //= require alchemy/page_select
 //= require alchemy/node_select

app/models/alchemy/ingredients/richtext.rb

@@ -28,15 +28,23 @@ def preview_text(max_length = 30)
         stripped_body.to_s[0..max_length - 1]
       end
 
-      # Returns css class names for the editor textarea.
-      def tinymce_class_name
-        "has_tinymce#{has_custom_tinymce_config? ? " #{element.name}_#{role}" : ""}"
+      def element_id
+        "tinymce_#{id}"
       end
 
       def has_tinymce?
         true
       end
 
+      # Returns true if there is a tinymce setting defined that contains settings.
+      def has_custom_tinymce_config?
+        custom_tinymce_config.is_a?(Hash)
+      end
+
+      def custom_tinymce_config
+        settings[:tinymce]
+      end
+
       private
 
       def strip_content
@@ -53,11 +61,6 @@ def sanitize_content
       def sanitizer_settings
         settings[:sanitizer] || {}
       end
-
-      # Returns true if there is a tinymce setting defined that contains settings.
-      def has_custom_tinymce_config?
-        settings[:tinymce].is_a?(Hash)
-      end
     end
   end
 end

app/views/alchemy/admin/pages/edit.html.erb

@@ -138,9 +138,6 @@
 <% end %>
 
 <% content_for :javascripts do %>
-<% if Alchemy::Tinymce.custom_configs_present?(@page) %>
-  <%= render 'tinymce_custom_config' %>
-<% end %>
 
 <% content_for :javascript_includes do %>
   <meta name="turbolinks-cache-control" content="no-cache">

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

@@ -5,8 +5,17 @@
     <%= ingredient_label(richtext_editor) %>
     <div class="tinymce_container">
       <%= f.text_area :value,
-        class: richtext_editor.tinymce_class_name,
-        id: "tinymce_#{richtext_editor.id}" %>
+        class: "has_tinymce",
+        id: richtext_editor.element_id %>
     </div>
   <% end %>
+  <% if richtext_editor.has_custom_tinymce_config? %>
+    <script type="text/javascript" charset="utf-8">
+      Alchemy.Tinymce.setCustomConfig("<%= richtext_editor.element_id %>", {
+        <% richtext_editor.custom_tinymce_config.each do |k, v| %>
+        <%= k %>: <%== v.to_json %>,
+        <% end %>
+      });
+    </script>
+  <% end %>
 <% end %>

app/views/layouts/alchemy/admin.html.erb

@@ -25,13 +25,11 @@
       // Store regular expression for external link url matching.
       Alchemy.link_url_regexp = <%= link_url_regexp.inspect %>;
       // Holds the default Alchemy TinyMCE configuration
-      Alchemy.Tinymce = {
-        defaults: {
-          plugins: '<%= Alchemy::Tinymce.plugins.join(',') %>',
-          <% Alchemy::Tinymce.init.each do |k, v| %>
-          <%= k %>: <%== v.to_json %>,
-          <% end %>
-        }
+      Alchemy.TinymceDefaults = {
+        plugins: '<%= Alchemy::Tinymce.plugins.join(',') %>',
+        <% Alchemy::Tinymce.init.each do |k, v| %>
+        <%= k %>: <%== v.to_json %>,
+        <% end %>
       };
     </script>
     <%= render 'alchemy/admin/partials/routes' %>

lib/alchemy/tinymce.rb

@@ -33,29 +33,6 @@ def init=(settings)
       def init
         @@init
       end
-
-      def custom_configs_present?(page)
-        custom_config_ingredients(page).any?
-      end
-
-      def custom_config_ingredients(page)
-        ingredient_definitions_from_elements(page.descendent_element_definitions)
-      end
-
-      private
-
-      def ingredient_definitions_from_elements(definitions)
-        definitions.collect do |el|
-          next if el["ingredients"].blank?
-
-          ingredients = el["ingredients"].select do |c|
-            c["settings"] && c["settings"]["tinymce"].is_a?(Hash)
-          end
-          next if ingredients.blank?
-
-          ingredients.map { |c| c.merge("element" => el["name"]) }
-        end.flatten.compact
-      end
     end
   end
 end

package/admin.js

@@ -8,6 +8,7 @@ import ImageLoader from "./src/image_loader"
 import ImageCropper from "./src/image_cropper"
 import Datepicker from "./src/datepicker"
 import Sitemap from "./src/sitemap"
+import Tinymce from "./src/tinymce"
 import PagePublicationFields from "./src/page_publication_fields.js"
 
 // Global Alchemy object
@@ -28,5 +29,6 @@ Object.assign(Alchemy, {
   IngredientAnchorLink,
   Datepicker,
   Sitemap,
+  Tinymce,
   PagePublicationFields
 })