Merge pull request #2620 from tvdeyen/preload-tinymce-assets

Preload tinymce assets

app/views/alchemy/admin/tinymce/_setup.html.erb

@@ -0,0 +1,29 @@
+<% asset_host = ActionController::Base.config.asset_host %>
+
+<link rel="preload" href="<%= asset_host %><%= assets_prefix %>/tinymce/skins/alchemy/skin.min.css" as="style" />
+<link rel="preload" href="<%= asset_host %><%= assets_prefix %>/tinymce/skins/alchemy/content.min.css" as="style" />
+<% if Alchemy::Tinymce.init[:content_css] %>
+  <link rel="preload" href="<%= asset_host %><%= Alchemy::Tinymce.init[:content_css] %>" as="style" />
+<% end %>
+<% Alchemy::Tinymce.preloadable_plugins.each do |plugin| %>
+  <link rel="preload" href="<%= asset_host %><%= assets_prefix %>/tinymce/plugins/<%= plugin %>/plugin.min.js" as="script">
+<% end %>
+
+<script>
+  // Setting TinyMCE path.
+  var tinyMCEPreInit = {
+    <% if ActionController::Base.config.asset_host_set? %>
+    base: '<%= asset_url(assets_prefix + '/tinymce') %>',
+    <% else %>
+    base: '<%= asset_path(assets_prefix + '/tinymce') %>',
+    <% end %>
+    suffix: '.min'
+  };
+  // Holds the default Alchemy TinyMCE configuration
+  Alchemy.TinymceDefaults = {
+    plugins: '<%= Alchemy::Tinymce.plugins.join(',') %>',
+    <% Alchemy::Tinymce.init.each do |k, v| %>
+    <%= k %>: <%== v.to_json %>,
+    <% end %>
+  };
+</script>

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

@@ -13,25 +13,10 @@
     <script>
       // Global Alchemy JavaScript object.
       var Alchemy = {};
-      // Setting TinyMCE path.
-      var tinyMCEPreInit = {
-        <% if ActionController::Base.config.asset_host_set? %>
-        base: '<%= asset_url(assets_prefix + '/tinymce') %>',
-        <% else %>
-        base: '<%= asset_path(assets_prefix + '/tinymce') %>',
-        <% end %>
-        suffix: '.min'
-      };
       // Store regular expression for external link url matching.
       Alchemy.link_url_regexp = <%= link_url_regexp.inspect %>;
-      // Holds the default Alchemy TinyMCE configuration
-      Alchemy.TinymceDefaults = {
-        plugins: '<%= Alchemy::Tinymce.plugins.join(',') %>',
-        <% Alchemy::Tinymce.init.each do |k, v| %>
-        <%= k %>: <%== v.to_json %>,
-        <% end %>
-      };
     </script>
+    <%= render 'alchemy/admin/tinymce/setup' %>
     <%= render 'alchemy/admin/partials/routes' %>
     <%= javascript_include_tag('alchemy/admin/all', 'data-turbo-track' => true) %>
     <%= javascript_importmap_tags("alchemy_admin", importmap: Alchemy.importmap) %>

lib/alchemy/tinymce.rb

@@ -4,7 +4,9 @@ module Alchemy
   module Tinymce
     mattr_accessor :languages, :plugins
 
-    @@plugins = %w[alchemy_link anchor autoresize charmap code directionality fullscreen hr link lists paste tabfocus table]
+    DEFAULT_PLUGINS = %w[anchor autoresize charmap code directionality fullscreen hr link lists paste tabfocus table]
+
+    @@plugins = DEFAULT_PLUGINS + %w[alchemy_link]
     @@init = {
       skin: "alchemy",
       width: "auto",
@@ -33,6 +35,10 @@ def init=(settings)
       def init
         @@init
       end
+
+      def preloadable_plugins
+        @@plugins - DEFAULT_PLUGINS
+      end
     end
   end
 end

spec/features/admin/tinymce_feature_spec.rb

@@ -29,4 +29,56 @@
       )
     end
   end
+
+  describe "assets preloading" do
+    it "should preload assets" do
+      visit admin_dashboard_path
+      expect(page)
+        .to have_css('link[rel="preload"][href="/assets/tinymce/skins/alchemy/skin.min.css"]')
+        .and have_css('link[rel="preload"][href="/assets/tinymce/skins/alchemy/content.min.css"]')
+    end
+
+    context "with asset host" do
+      around do |example|
+        host = ActionController::Base.config.asset_host
+        ActionController::Base.config.asset_host = "https://myhost.com"
+        example.run
+        ActionController::Base.config.asset_host = host
+      end
+
+      it "should preload assets from host" do
+        visit admin_dashboard_path
+        expect(page)
+          .to have_css('link[rel="preload"][href="https://myhost.com/assets/tinymce/skins/alchemy/skin.min.css"]')
+          .and have_css('link[rel="preload"][href="https://myhost.com/assets/tinymce/skins/alchemy/content.min.css"]')
+      end
+    end
+
+    context "when content_css is configured" do
+      before do
+        Alchemy::Tinymce.init = {content_css: "/assets/custom-stylesheet.css"}
+      end
+
+      it "should preload it" do
+        visit admin_dashboard_path
+        expect(page)
+          .to have_css('link[rel="preload"][href="/assets/custom-stylesheet.css"]')
+      end
+
+      context "with asset host" do
+        around do |example|
+          host = ActionController::Base.config.asset_host
+          ActionController::Base.config.asset_host = "https://myhost.com"
+          example.run
+          ActionController::Base.config.asset_host = host
+        end
+
+        it "should preload it from host" do
+          visit admin_dashboard_path
+          expect(page)
+            .to have_css('link[rel="preload"][href="https://myhost.com/assets/custom-stylesheet.css"]')
+        end
+      end
+    end
+  end
 end

spec/libraries/tinymce_spec.rb

@@ -20,5 +20,17 @@ module Alchemy
         expect(Tinymce.init).to include(another_config)
       end
     end
+
+    describe ".preloadable_plugins" do
+      subject { Tinymce.preloadable_plugins }
+
+      before do
+        Tinymce.plugins += ["foo"]
+      end
+
+      it "returns all plugins without default plugins" do
+        is_expected.to eq(%w[alchemy_link foo])
+      end
+    end
   end
 end