From 635e0f269ea40951b7d405b21527be8e7881af63 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 24 Nov 2023 10:54:38 +0100
Subject: [PATCH 1/2] Extract Tinymce setup scripts into partial

---
 .../alchemy/admin/tinymce/_setup.html.erb      | 18 ++++++++++++++++++
 app/views/layouts/alchemy/admin.html.erb       | 17 +----------------
 2 files changed, 19 insertions(+), 16 deletions(-)
 create mode 100644 app/views/alchemy/admin/tinymce/_setup.html.erb

diff --git a/app/views/alchemy/admin/tinymce/_setup.html.erb b/app/views/alchemy/admin/tinymce/_setup.html.erb
new file mode 100644
index 0000000000..f56fa5cb6e
--- /dev/null
+++ b/app/views/alchemy/admin/tinymce/_setup.html.erb
@@ -0,0 +1,18 @@
+<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>
diff --git a/app/views/layouts/alchemy/admin.html.erb b/app/views/layouts/alchemy/admin.html.erb
index 58080fa3f5..00073c74a5 100644
--- a/app/views/layouts/alchemy/admin.html.erb
+++ b/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) %>

From bd50facd4b6c3a25d4cb12ca67d80cbcf204435d Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Thu, 23 Nov 2023 21:25:34 +0100
Subject: [PATCH 2/2] 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.
---
 .../alchemy/admin/tinymce/_setup.html.erb     | 11 ++++
 lib/alchemy/tinymce.rb                        |  8 ++-
 spec/features/admin/tinymce_feature_spec.rb   | 52 +++++++++++++++++++
 spec/libraries/tinymce_spec.rb                | 12 +++++
 4 files changed, 82 insertions(+), 1 deletion(-)

diff --git a/app/views/alchemy/admin/tinymce/_setup.html.erb b/app/views/alchemy/admin/tinymce/_setup.html.erb
index f56fa5cb6e..d3a387f431 100644
--- a/app/views/alchemy/admin/tinymce/_setup.html.erb
+++ b/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 = {
diff --git a/lib/alchemy/tinymce.rb b/lib/alchemy/tinymce.rb
index 8fd1e60375..a8dab50996 100644
--- a/lib/alchemy/tinymce.rb
+++ b/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
diff --git a/spec/features/admin/tinymce_feature_spec.rb b/spec/features/admin/tinymce_feature_spec.rb
index f26daffa1a..60b9144ae1 100644
--- a/spec/features/admin/tinymce_feature_spec.rb
+++ b/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
diff --git a/spec/libraries/tinymce_spec.rb b/spec/libraries/tinymce_spec.rb
index 87b10d1b38..91ad78b213 100644
--- a/spec/libraries/tinymce_spec.rb
+++ b/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