Fix: fix missing TinyMCE icons in development by patching AssetUrlProcessor

Co-authored-by: Junie <junie@jetbrains.com>

Author: texpert

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+- **Fix:** Restore TinyMCE editor icons in development, [#1183](https://github.com/owen2345/camaleon-cms/pull/1183)
+  - sprockets-rails >= 3.5 registers `Sprockets::Rails::AssetUrlProcessor`, a `text/css` post-processor that rewrites every relative `url(...)` reference to a digested asset path. TinyMCE's bundled skin (`tinymce/skins/lightgray/skin.min.css`) references its icon font with relative urls such as `url("fonts/tinymce.woff")`, whose real logical path is `tinymce/skins/lightgray/fonts/...`. The processor cannot resolve them and rewrites them to an invalid root path (`/fonts/tinymce.woff`) that 404s, leaving the editor toolbar without icons.
+  - Only surfaces in environments that compile assets on the fly (development): production ships the skin as raw static files via `tinymce.install = :copy`, bypassing Sprockets (and the processor) entirely. The processor must not be disabled globally, however, because other stylesheets (e.g. Bootstrap, whose glyphicon `@font-face` urls are relative) rely on it to produce resolvable asset paths. `config/initializers/assets.rb` now replaces it (when `config.assets.compile` is true) with a `TinymceSkinSafeAssetUrlProcessor` subclass that, for the TinyMCE skin only, first expands the skin's directory-relative font urls into full logical asset paths (prefixed with the skin's own logical directory) before delegating to the original processor, which then resolves and digests them correctly; every other stylesheet is processed unchanged. Bumped `config.assets.version` so host apps invalidate any stale cached skin asset. Added a regression spec covering the swap, the url expansion/digesting and that the icon font resolves.
+
 - **Fix:** Restore `object_class` scoping on `CustomField#metas` and `CustomFieldGroup#metas`, [#1183](https://github.com/owen2345/camaleon-cms/pull/1183)
   - Regression introduced in #1173 (polymorphic meta ownership) dropped the `-> { where(object_class: 'CustomField' / 'CustomFieldGroup') }` scope from these associations. Meta rows are keyed by both `objectid` and `object_class`, so when a custom field's numeric id collided with another model's id (e.g. a `Post` sharing the same id), `get_option('field_key')` read the wrong `_default` meta and returned `nil`.
   - Visible symptom: on **General Site → Theme settings**, the `editor` Footer message field rendered as a plain `text_box` (no TinyMCE editor frame), because `_render.html.erb` fell back to `text_box` when `field_key` resolved to nil.

config/initializers/assets.rb

@@ -1,10 +1,54 @@
 # Be sure to restart your server when you modify this file.
 
 # Version of your assets, change this if you want to expire all your assets.
-Rails.application.config.assets.version = '1.0'
+Rails.application.config.assets.version = '1.1'
 
 Rails.application.config.tinymce.install = :copy
 
+# TinyMCE editor icons in development.
+#
+# sprockets-rails >= 3.5 registers `Sprockets::Rails::AssetUrlProcessor`, a `text/css`
+# post-processor that rewrites every relative `url(...)` reference to a digested asset
+# path. TinyMCE's bundled skin (`tinymce/skins/lightgray/skin.min.css`) references its
+# icon font with directory-relative urls such as `url('fonts/tinymce.woff')`. Sprockets
+# resolves `url()` paths against the asset load roots (not the referencing file's own
+# directory), so it cannot find `fonts/tinymce.woff` (its real logical path is
+# `tinymce/skins/lightgray/fonts/...`) and rewrites it to an invalid root path
+# (`/fonts/tinymce.woff`) which 404s, leaving the editor toolbar without icons.
+#
+# In production this never happens: `tinymce.install = :copy` ships the skin as raw static
+# files under `public/assets`, bypassing Sprockets (and this processor) entirely. The bug
+# only surfaces in environments that compile assets on the fly (development).
+#
+# We must NOT disable the processor globally: other stylesheets (e.g. Bootstrap, whose
+# glyphicon @font-face urls are relative) rely on it to produce resolvable digested paths.
+# Instead, swap it for a thin subclass that, for the TinyMCE skin only, first expands the
+# skin's directory-relative font urls into full logical asset paths (prefixing them with the
+# skin's own logical directory) before delegating to the original processor. The original
+# then resolves and digests them correctly. Every other stylesheet is processed unchanged.
+if defined?(Sprockets::Rails::AssetUrlProcessor) && Rails.application.config.assets.compile &&
+   Sprockets.respond_to?(:unregister_postprocessor) && Sprockets.respond_to?(:register_postprocessor)
+  class TinymceSkinSafeAssetUrlProcessor < Sprockets::Rails::AssetUrlProcessor
+    SKIN_MARKER = 'tinymce/skins/'.freeze
+    # Directory-relative `url(...)` references that are not absolute/external/data urls.
+    RELATIVE_URL = %r{url\(\s*["']?(?!(?:#|data|http|/))(?:\./)?(?<path>[^"'\s)]+)\s*["']?\)}
+
+    def self.call(input)
+      filename = input[:filename].to_s
+      return super unless filename.include?(SKIN_MARKER)
+
+      logical_dir = File.dirname(filename[filename.index('tinymce/')..])
+      rewritten = input[:data].gsub(RELATIVE_URL) do
+        "url(#{logical_dir}/#{Regexp.last_match(:path)})"
+      end
+      super(input.merge(data: rewritten))
+    end
+  end
+
+  Sprockets.unregister_postprocessor('text/css', Sprockets::Rails::AssetUrlProcessor)
+  Sprockets.register_postprocessor('text/css', TinymceSkinSafeAssetUrlProcessor)
+end
+
 # Add additional assets to the asset load path
 Rails.application.config.assets.precompile += %w[camaleon_cms/*]
 # Rails.application.config.assets.precompile += %w( themes/*/assets/* )

spec/initializers/tinymce_asset_url_processor_spec.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+# Regression: sprockets-rails >= 3.5 registers `Sprockets::Rails::AssetUrlProcessor`, which rewrites
+# relative `url(...)` references in CSS to digested asset paths. TinyMCE's bundled skin references its
+# icon font with directory-relative urls (e.g. `url('fonts/tinymce.woff')`). Sprockets resolves
+# `url()` paths against the asset load roots (not the referencing file's own directory), so the
+# default processor cannot find them and rewrites them to an invalid root path (`/fonts/...`) that
+# 404s, breaking the editor toolbar icons in development.
+#
+# We cannot disable the processor globally because other stylesheets (e.g. Bootstrap glyphicons) rely
+# on it. `config/initializers/assets.rb` swaps it for a subclass that, for the TinyMCE skin only,
+# expands the directory-relative font urls into full logical asset paths before delegating to the
+# original processor, so they resolve to proper digested paths while every other stylesheet is
+# processed unchanged.
+RSpec.describe 'TinyMCE skin asset urls', type: :request do
+  let(:skin_css) { Rails.application.assets&.find_asset('tinymce/skins/lightgray/skin.min.css') }
+
+  before { skip('Sprockets is not serving assets in this environment') if skin_css.nil? }
+
+  it 'replaces the default AssetUrlProcessor with the tinymce-safe subclass' do
+    expect(Rails.application.config.assets.compile).to be(true)
+    registered = (Sprockets.postprocessors['text/css'] || []).map(&:to_s)
+    expect(registered).to include(a_string_matching(/TinymceSkinSafeAssetUrlProcessor/))
+    expect(registered).not_to include('Sprockets::Rails::AssetUrlProcessor')
+  end
+
+  it 'rewrites the skin font urls to resolvable digested asset paths (icons load in development)' do
+    # The relative reference must be gone, replaced by a digested path under the skin directory.
+    expect(skin_css.source).not_to match(%r{url\(["']?(?:\./)?fonts/tinymce\.woff})
+    expect(skin_css.source).not_to match(%r{url\(["']?/fonts/tinymce\.woff})
+    expect(skin_css.source)
+      .to match(%r{url\(/assets/tinymce/skins/lightgray/fonts/tinymce-[0-9a-f]+\.woff\)})
+  end
+
+  it 'exposes the icon font as a resolvable asset' do
+    expect(Rails.application.assets.find_asset('tinymce/skins/lightgray/fonts/tinymce.woff')).not_to be_nil
+  end
+
+  it 'expands directory-relative skin font urls to full logical paths before delegating' do
+    env = Rails.application.assets
+    css = 'a{src:url("fonts/tinymce.woff")}'
+    input = { environment: env, filename: skin_css.filename, data: css,
+              name: skin_css.logical_path, content_type: 'text/css', metadata: {} }
+    out = TinymceSkinSafeAssetUrlProcessor.call(input)
+    expect(out[:data]).to match(%r{url\(/assets/tinymce/skins/lightgray/fonts/tinymce-[0-9a-f]+\.woff\)})
+  end
+end