Preload tinymce assets

Tinymce loads the editor content css and its plugins on initialize.
Since we init tinymce only when its visible it takes long to init the
editor. Using browser preload features to make sure the assets
are already loaded.

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

@@ -1,3 +1,14 @@
+<% 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 = {

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