alchemy_cms 8.3.11 → 8.4.1

data/app/stylesheets/alchemy/admin.scss

@@ -1,7 +1,6 @@
 @use "defaults";
 @use "fonts";
 @use "admin/archive";
-@use "admin/attachment-select";
 @use "admin/attachments";
 @use "admin/base";
 @use "admin/buttons";
@@ -10,6 +9,7 @@
 @use "admin/dialogs";
 @use "admin/elements";
 @use "admin/element-select";
+@use "admin/empty-state";
 @use "admin/errors";
 @use "admin/filters";
 @use "admin/flash";
@@ -17,6 +17,7 @@
 @use "admin/form_fields";
 @use "admin/forms";
 @use "admin/frame";
+@use "admin/help";
 @use "admin/hints";
 @use "admin/icons";
 @use "admin/image_library";
@@ -31,6 +32,7 @@
 @use "admin/pagination";
 @use "admin/popover";
 @use "admin/preview_window";
+@use "admin/remote-select";
 @use "admin/resource_info";
 @use "admin/search";
 @use "admin/selects";
@@ -39,6 +41,7 @@
 @use "admin/spinner";
 @use "admin/tables";
 @use "admin/tags";
+@use "admin/tags-autocomplete";
 @use "admin/tom-select";
 @use "admin/toolbar";
 @use "admin/typography";

data/app/types/alchemy/cache_control_type.rb

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+module Alchemy
+  # Casts a page layout `cache` / element `page_cache` config value into an
+  # {Alchemy::CacheControl} and validates the hash grammar at definition-load
+  # time (see {#assert_valid_value}, called eagerly on attribute assignment).
+  class CacheControlType < ActiveModel::Type::Value
+    ALLOWED_KEYS = [:visibility, :max_age, :no_cache, :no_store].freeze
+
+    def cast(value)
+      Alchemy::CacheControl.parse(value)
+    end
+
+    def assert_valid_value(value)
+      case value
+      when nil, true, false, Alchemy::CacheControl
+        nil
+      when Integer
+        assert_valid_max_age!(value)
+      when Hash
+        assert_valid_hash!(value)
+      else
+        raise ArgumentError,
+          "#{value.inspect} is not a valid cache setting. " \
+          "Must be true, false, an Integer, or a Hash."
+      end
+    end
+
+    private
+
+    def assert_valid_hash!(hash)
+      options = hash.transform_keys(&:to_sym)
+
+      unknown = options.keys - ALLOWED_KEYS
+      if unknown.any?
+        raise ArgumentError,
+          "unknown cache option(s) #{unknown.map(&:inspect).join(", ")}. " \
+          "Allowed: #{ALLOWED_KEYS.map(&:inspect).join(", ")}."
+      end
+
+      assert_valid_visibility!(options[:visibility]) if options.key?(:visibility)
+      assert_valid_max_age!(options[:max_age]) if options.key?(:max_age)
+      assert_boolean!(:no_cache, options[:no_cache]) if options.key?(:no_cache)
+      assert_boolean!(:no_store, options[:no_store]) if options.key?(:no_store)
+      assert_no_conflicts!(options)
+    end
+
+    def assert_valid_visibility!(value)
+      unless CacheControl::VISIBILITIES.include?(value.to_s.to_sym)
+        raise ArgumentError,
+          "cache visibility #{value.inspect} is invalid. Must be :public or :private."
+      end
+    end
+
+    def assert_valid_max_age!(value)
+      unless value.is_a?(Integer) && value >= 0
+        raise ArgumentError,
+          "cache max_age #{value.inspect} is invalid. Must be a non-negative Integer."
+      end
+    end
+
+    def assert_boolean!(key, value)
+      unless [true, false].include?(value)
+        raise ArgumentError, "cache #{key} #{value.inspect} is invalid. Must be true or false."
+      end
+    end
+
+    def assert_no_conflicts!(options)
+      if options[:no_store]
+        conflicting = [:max_age, :visibility, :no_cache].select { |k| truthy?(options, k) }
+        if conflicting.any?
+          raise ArgumentError,
+            "cache no_store cannot be combined with #{conflicting.map(&:inspect).join(", ")}."
+        end
+      elsif options[:no_cache] && options.key?(:max_age)
+        raise ArgumentError, "cache no_cache cannot be combined with max_age."
+      end
+    end
+
+    def truthy?(options, key)
+      options.key?(key) && options[key]
+    end
+  end
+end

data/app/views/alchemy/_edit_mode.html.erb

@@ -1,2 +1,2 @@
-<%= render 'alchemy/menubar' %>
+<%= render Alchemy::Menubar.new %>
 <%= render "alchemy/preview_mode_code" %>

data/app/views/alchemy/_menubar.html.erb

@@ -1,154 +1,2 @@
-<% if !Alchemy::Current.preview_page? && @page && can?(:edit_content, @page) %>
-  <alchemy-menubar>
-    <template>
-      <style>
-        .menubar {
-          --icon-size: 24px;
-          --panel-width: 525px;
-          --border-radius: 3px;
-          --left-offset: 0px;
-          display: flex;
-          position: fixed;
-          top: 0;
-          left: calc(-1 * (var(--panel-width) - var(--left-offset)));
-          z-index: 10000;
-          background: #214166;
-          transition: left 0.25s cubic-bezier(0.23, 1, 0.32, 1);
-          box-shadow: 0 0 0 1px #fff;
-          box-sizing: border-box;
-          border-bottom-right-radius: var(--border-radius);
-          padding: 12px 16px 12px 12px;
-          gap: 12px;
-          justify-content: space-between;
-          align-items: center;
-          flex-wrap: nowrap;
-          overflow: hidden;
-          font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode",
-            "Lucida Sans", Verdana, Tahoma, sans-serif;
-          font-size: 13px;
-          line-height: normal;
-        }
-
-        .menubar * {
-          box-sizing: border-box;
-          margin: 0;
-          padding: 0;
-        }
-
-        .menubar:hover,
-        .menubar:focus-within,
-        .menubar.is-open {
-          left: 0;
-        }
-
-        .menubar > svg {
-          width: var(--icon-size);
-          height: var(--icon-size);
-          flex-shrink: 0;
-          margin-left: 4px;
-        }
-
-        .menubar .button {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          gap: 8px;
-          font-size: inherit;
-          font-weight: 700;
-          cursor: pointer;
-          border-radius: var(--border-radius);
-          background-color: transparent;
-          border: 1px solid rgba(255, 255, 255, 0.5);
-          color: #fff;
-          margin: 0;
-          padding: 0.75em 1.5em;
-          appearance: none;
-          transition: all 250ms;
-          -webkit-font-smoothing: antialiased;
-          -moz-osx-font-smoothing: grayscale;
-          text-decoration: none;
-          white-space: nowrap;
-        }
-
-        .menubar .button:hover {
-          text-decoration: none;
-          background-color: rgba(0, 0, 0, 0.25);
-          border-color: rgba(255, 255, 255, 0.75)
-        }
-
-        .menubar .button:active {
-          box-shadow: inset 0px 1px 1px -1px #333;
-        }
-
-        .menubar .button:focus {
-          outline: solid 2px #eca96e;
-          outline-offset: 2px;
-        }
-      </style>
-
-      <div class="menubar" data-turbo="false">
-        <%= link_to alchemy.admin_dashboard_url, class: "button" do %>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-            <path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path>
-          </svg>
-          <%= Alchemy.t(:to_alchemy) %>
-        <% end %>
-        <%= link_to alchemy.edit_admin_page_url(@page), class: "button" do %>
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-            <path d="M6.41421 15.89L16.5563 5.74785L15.1421 4.33363L5 14.4758V15.89H6.41421ZM7.24264 17.89H3V13.6473L14.435 2.21231C14.8256 1.82179 15.4587 1.82179 15.8492 2.21231L18.6777 5.04074C19.0682 5.43126 19.0682 6.06443 18.6777 6.45495L7.24264 17.89ZM3 19.89H21V21.89H3V19.89Z"></path>
-          </svg>
-          <%= Alchemy.t(:edit_page) %>
-        <% end %>
-        <%= form_tag Alchemy.config.logout_path, method: Alchemy.config.logout_method do %>
-          <%= button_tag class: "button" do %>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
-              <path d="M5 22C4.44772 22 4 21.5523 4 21V3C4 2.44772 4.44772 2 5 2H19C19.5523 2 20 2.44772 20 3V6H18V4H6V20H18V18H20V21C20 21.5523 19.5523 22 19 22H5ZM18 16V13H11V11H18V8L23 12L18 16Z"></path>
-            </svg>
-            <%= Alchemy.t(:logout) %>
-          <% end %>
-        <% end %>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-          <path fill="#fff" d="M15.7 7.9L9.9 2.2 2.1 4.3 0 12.1l5.7 5.8 7.8-2.1 2.2-7.9zm-5.3 10.3l-1.2 4.4 3.2 3.2 4.4-1.2 1.2-4.4-3.2-3.2-4.4 1.2zM23.5 7.3L17.2 9l-1.7 6.2 4.5 4.6 6.2-1.7 1.7-6.2-4.4-4.6z" />
-        </svg>
-      </div>
-    </template>
-
-    <script type="module" data-turbo-eval="false">
-      class Menubar extends HTMLElement {
-        connectedCallback() {
-          const template = this.querySelector("template")
-          const attachedShadowRoot = this.attachShadow({ mode: "open" })
-          attachedShadowRoot.appendChild(template.content.cloneNode(true))
-          const width = this.bar.offsetWidth
-          this.bar.style = `--panel-width: ${width}px; --left-offset: calc(var(--icon-size) + 32px);`
-          this.bar.addEventListener("touchstart", this, { passive: false })
-          document.addEventListener("touchstart", this, { passive: true })
-        }
-
-        handleEvent(event) {
-          // click on menubar
-          if (event.currentTarget === this.bar) {
-            if (!this.bar.classList.contains("is-open")) {
-              event.preventDefault()
-              this.bar.classList.add("is-open")
-            }
-          // click outside of menubar
-          } else if (!event.composedPath().includes(this.bar)) {
-            this.bar.classList.remove("is-open")
-          }
-        }
-
-        disconnectedCallback() {
-          this.bar.removeEventListener("touchstart", this)
-          document.removeEventListener("touchstart", this)
-        }
-
-        get bar() {
-          return this.shadowRoot.querySelector(".menubar")
-        }
-      }
-
-      customElements.define("alchemy-menubar", Menubar)
-    </script>
-  </alchemy-menubar>
-<% end %>
+<% Alchemy::Deprecation.warn("Rendering 'alchemy/menubar' partial is deprecated. Use `render Alchemy::Menubar.new` instead.") %>
+<%= render Alchemy::Menubar.new %>

data/app/views/alchemy/_preview_mode_code.html.erb

@@ -1,6 +1,3 @@
 <% if Alchemy::Current.preview_page? %>
-  <script type="text/javascript">
-    Alchemy = { locale: "<%= session[:alchemy_locale] %>" };
-  </script>
   <%= javascript_include_tag("alchemy/preview.min") %>
 <% end %>

data/app/views/alchemy/admin/_left_menu.html.erb

@@ -1,14 +1,27 @@
 <div id="left_menu">
-  <%= render "alchemy/admin/main_navi" %>
+  <%= render Alchemy::Admin::MainNavigation::Menu.new %>
 
   <div id="logout">
+    <div class="main_navi_entry">
+      <%= link_to_dialog(
+        safe_join([
+          render_icon(:question, class: 'module'),
+          tag.label(Alchemy.t("Help"))
+        ]),
+        alchemy.help_path,
+        {
+          title: Alchemy.t("AlchemyCMS Help"),
+          size: "500x400"
+        }
+      ) %>
+    </div>
     <div class="main_navi_entry">
       <% if current_alchemy_user %>
         <%= link_to_dialog(
-          %(
-            #{render_icon('logout-box-r', class: 'module')}
-            <label>#{Alchemy.t(:leave)}</label>
-          ).html_safe,
+          safe_join([
+            render_icon('logout-box-r', class: 'module'),
+            tag.label(Alchemy.t(:leave))
+          ]),
           alchemy.leave_admin_path, {
             size: "320x140",
             title: Alchemy.t("Leave Alchemy")

data/app/views/alchemy/admin/_top_menu.html.erb

@@ -1,6 +1,6 @@
 <div id="top_menu">
   <%= render "alchemy/admin/header", locked_pages: locked_pages %>
-  <div id="toolbar">
+  <div class="toolbar">
     <%= yield(:toolbar) %>
   </div>
 </div>

data/app/views/alchemy/admin/attachments/_archive_overlay.html.erb

@@ -1,13 +1,13 @@
 <%= turbo_frame_tag "archive_overlay" do %>
-  <div id="overlay_toolbar">
+  <div class="toolbar">
     <div class="toolbar_buttons">
       <% if can? :create, Alchemy::Attachment %>
         <div class="toolbar_button">
-          <%= render 'alchemy/admin/uploader/button',
+          <%= render Alchemy::Admin::UploaderButton.new(
             object: Alchemy::Attachment.new,
             dropzone: '#assign_file_list',
             file_attribute: 'file',
-            in_dialog: true,
+            inline_label: true,
             accept: Array(search_filter_params[:only]).map { |extension|
               Marcel::MimeType.for(extension:)
             }.join(",").presence,
@@ -18,7 +18,8 @@
               q: search_filter_params[:q].merge(
                 last_upload: true
               )
-            ) %>
+            )
+          ) %>
         </div>
       <% end %>
     </div>

data/app/views/alchemy/admin/attachments/_file_to_assign.html.erb

@@ -1,10 +1,10 @@
 <li class="assign_file_file <%= cycle('even', 'odd') %>">
-  <%= link_to alchemy.assign_admin_attachment_path(
+  <%= button_to alchemy.assign_admin_attachment_path(
       id: file_to_assign.id,
       form_field_id: @form_field_id
     ),
-    remote: true,
-    method: 'put' do %>
+    method: :put,
+    form_class: "assign_file" do %>
     <span class="list-primary">
       <%= render_icon(file_to_assign.icon_css_class) %>
       <%= file_to_assign.name %>

data/app/views/alchemy/admin/attachments/_files_list.html.erb

@@ -1,96 +1,84 @@
-<% if @attachments.empty? %>
-  <%= render_message do %>
-    <% if search_filter_params[:q].present? %>
-      <%= Alchemy.t(:no_search_results) %>
-    <% else %>
-      <%= Alchemy.t(:no_files_in_archive) %>
-    <% end %>
-  <% end %>
-<% else %>
-  <%= render Alchemy::Admin::Resource::Table.new(@attachments, query: @query) do |table| %>
-    <% table.icon_column { |attachment| attachment.icon_css_class } %>
-    <% table.column :name, sortable: true do |attachment| %>
-      <% if can?(:show, attachment) %>
-        <%= link_to_dialog(
-              attachment.name,
-              alchemy.admin_attachment_path(attachment),
-              {
-                title: attachment.name,
-                size: attachment_preview_size(attachment)
-              },
-              {
-                title: Alchemy.t('Attachment Preview')
-              }
-            ) %>
-      <% else %>
-        <%= attachment.name %>
-      <% end %>
-    <% end %>
-    <% table.column :file_name, sortable: true %>
-    <% table.column :file_mime_type do |attachment| %>
-      <%= mime_to_human(attachment.file_mime_type) %>
-    <% end %>
-    <% table.column :file_size, sortable: true do |attachment| %>
-      <%= number_to_human_size(attachment.file_size) %>
-    <% end %>
-    <% table.column :created_at, sortable: true %>
-
-    <% table.with_action(:show, Alchemy.t('Attachment Preview')) do |attachment| %>
+<%= render Alchemy::Admin::Resource::Table.new(@attachments, query: @query) do |table| %>
+  <% table.icon_column { |attachment| attachment.icon_css_class } %>
+  <% table.column :name, sortable: true do |attachment| %>
+    <% if can?(:show, attachment) %>
       <%= link_to_dialog(
-            render_icon(:information),
+            attachment.name,
             alchemy.admin_attachment_path(attachment),
             {
               title: attachment.name,
               size: attachment_preview_size(attachment)
             },
-            class: "icon_button"
+            {
+              title: Alchemy.t('Attachment Preview')
+            }
           ) %>
+    <% else %>
+      <%= attachment.name %>
     <% end %>
-    <% table.with_action(:download) do |attachment| %>
-      <sl-tooltip content="<%= Alchemy.t("download_file", filename: attachment.file_name) %>">
-        <%= link_to render_icon(:download),
-          alchemy.download_attachment_path(attachment),
-          target: "_blank",
+  <% end %>
+  <% table.column :file_name, sortable: true %>
+  <% table.column :file_mime_type do |attachment| %>
+    <%= mime_to_human(attachment.file_mime_type) %>
+  <% end %>
+  <% table.column :file_size, sortable: true do |attachment| %>
+    <%= number_to_human_size(attachment.file_size) %>
+  <% end %>
+  <% table.column :created_at, sortable: true %>
+
+  <% table.with_action(:show, Alchemy.t('Attachment Preview')) do |attachment| %>
+    <%= link_to_dialog(
+          render_icon(:information),
+          alchemy.admin_attachment_path(attachment),
+          {
+            title: attachment.name,
+            size: attachment_preview_size(attachment)
+          },
+          class: "icon_button"
+        ) %>
+  <% end %>
+  <% table.with_action(:download) do |attachment| %>
+    <sl-tooltip content="<%= Alchemy.t("download_file", filename: attachment.file_name) %>">
+      <%= link_to render_icon(:download),
+        alchemy.download_attachment_path(attachment),
+        target: "_blank",
+        class: "icon_button" %>
+    </sl-tooltip>
+  <% end %>
+  <% table.with_action(:edit, Alchemy.t(:replace_file)) do |attachment| %>
+    <%= render 'alchemy/admin/attachments/replace_button',
+      redirect_url: alchemy.admin_attachments_path,
+      object: attachment,
+      file_attribute: 'file' %>
+  <% end %>
+  <% table.with_action(:destroy) do |attachment| %>
+    <% if @deletable_attachment_ids.include?(attachment.id) %>
+      <sl-tooltip content="<%= Alchemy.t(:delete_file) %>">
+        <%= link_to_confirm_dialog render_icon(:minus),
+          Alchemy.t(:confirm_to_delete_file),
+          alchemy.admin_attachment_path(
+            id: attachment,
+            q: search_filter_params[:q],
+            page: params[:page],
+            per_page: params[:per_page]
+          ),
           class: "icon_button" %>
       </sl-tooltip>
-    <% end %>
-    <% table.with_action(:edit, Alchemy.t(:replace_file)) do |attachment| %>
-      <%= render 'alchemy/admin/attachments/replace_button',
-        redirect_url: alchemy.admin_attachments_path,
-        object: attachment,
-        file_attribute: 'file' %>
-    <% end %>
-    <% table.with_action(:destroy) do |attachment| %>
-      <% if @deletable_attachment_ids.include?(attachment.id) %>
-        <sl-tooltip content="<%= Alchemy.t(:delete_file) %>">
-          <%= link_to_confirm_dialog render_icon(:minus),
-            Alchemy.t(:confirm_to_delete_file),
-            alchemy.admin_attachment_path(
-              id: attachment,
-              q: search_filter_params[:q],
-              page: params[:page],
-              per_page: params[:per_page]
-            ),
-            class: "icon_button" %>
-        </sl-tooltip>
-      <% else %>
-        <sl-tooltip content="<%= Alchemy.t(:in_use) %>">
-          <button class="icon_button disabled">
-            <%= render_icon(:minus) %>
-          </button>
-        </sl-tooltip>
-      <% end %>
-    <% end %>
-    <% table.with_action(:edit, Alchemy.t(:rename_file)) do |attachment| %>
-      <%= link_to_dialog render_icon(:edit),
-        alchemy.edit_admin_attachment_path(attachment, q: search_filter_params[:q], page: params[:page]),
-        {
-          title: Alchemy.t(:rename_file),
-          size: '500x250'
-        },
-        class: "icon_button" %>
+    <% else %>
+      <sl-tooltip content="<%= Alchemy.t(:in_use) %>">
+        <button class="icon_button disabled">
+          <%= render_icon(:minus) %>
+        </button>
+      </sl-tooltip>
     <% end %>
   <% end %>
-
-  <%= render "alchemy/admin/resources/pagination", resources: @attachments %>
+  <% table.with_action(:edit, Alchemy.t(:rename_file)) do |attachment| %>
+    <%= link_to_dialog render_icon(:edit),
+      alchemy.edit_admin_attachment_path(attachment, q: search_filter_params[:q], page: params[:page]),
+      {
+        title: Alchemy.t(:rename_file),
+        size: '500x250'
+      },
+      class: "icon_button" %>
+  <% end %>
 <% end %>

data/app/views/alchemy/admin/attachments/assign.turbo_stream.erb

@@ -0,0 +1,8 @@
+<turbo-stream
+  action="assign_attachment"
+  target="<%= @form_field_id %>"
+  attachment-id="<%= @assignable_id %>"
+  attachment-name="<%= @attachment.name %>"
+>
+  <template><%= render_icon(@attachment.icon_css_class) %></template>
+</turbo-stream>

data/app/views/alchemy/admin/attachments/index.html.erb

@@ -2,12 +2,14 @@
   <div class="toolbar_buttons">
     <% if can? :create, Alchemy::Attachment %>
       <div class="toolbar_button">
-        <%= render 'alchemy/admin/uploader/button',
+        <%= render Alchemy::Admin::UploaderButton.new(
           redirect_url: alchemy.admin_attachments_path(q: {
             last_upload: true
           }),
           object: Alchemy::Attachment.new,
-          file_attribute: 'file' %>
+          file_attribute: 'file',
+          inline_label: true
+        ) %>
       </div>
     <% end %>
   </div>
@@ -15,8 +17,31 @@
   <%= render 'alchemy/admin/partials/search_form' %>
 <% end %>
 
-<div id="archive_all" class="with_tag_filter resources-table-wrapper">
-  <%= render 'alchemy/admin/resources/table_header' %>
-  <%= render 'files_list' %>
-  <%= render 'library_sidebar' %>
-</div>
+<% if Alchemy::Attachment.none? %>
+  <%= render 'alchemy/admin/resources/empty_state' do %>
+    <%= render Alchemy::Admin::UploaderButton.new(
+      redirect_url: alchemy.admin_attachments_path(q: {
+        last_upload: true
+      }),
+      object: Alchemy::Attachment.new,
+      file_attribute: 'file',
+      inline_label: true
+    ) %>
+  <% end %>
+<% else %>
+  <%= render "alchemy/admin/resources/table_header" %>
+
+  <% if @attachments.none? && search_filter_params.present? %>
+    <%= render_message do %>
+      <%= Alchemy.t(:no_search_results) %>
+    <% end %>
+  <% else %>
+    <div class="resources-table-wrapper">
+      <%= render "files_list" %>
+    </div>
+  <% end %>
+
+  <%= render "alchemy/admin/resources/pagination", resources: @attachments %>
+<% end %>
+
+<%= render "library_sidebar" %>

data/app/views/alchemy/admin/clipboard/insert.turbo_stream.erb

@@ -1,6 +1,6 @@
 <% if @item.class.name == 'Alchemy::Element' && params[:remove] -%>
   <% if @item.fixed? -%>
-    <alchemy-action name="removeFixedElement" params="[<%= @item.id %>]"></alchemy-action>
+    <turbo-stream action="remove_fixed_element" element-id="<%= @item.id %>"></turbo-stream>
   <% else -%>
     <%= turbo_stream.remove "element_#{@item.id}" %>
   <% end -%>

data/app/views/alchemy/admin/crop.html.erb

@@ -7,25 +7,25 @@
   <%= render_message do %>
     <%= simple_format Alchemy.t(:explain_cropping) %>
   <% end %>
-  <%= content_tag "alchemy-picture-thumbnail", nil,
-    src: @picture.url(flatten: true),
-    id: "imageToCrop" %>
-  <form>
-    <%= button_tag Alchemy.t(:apply), type: 'submit' %>
-    <%= button_tag Alchemy.t('Reset Imagemask'), class: 'reset_mask secondary', type: 'reset' %>
-  </form>
+  <% if @settings.present? %>
+    <alchemy-image-cropper
+      default-box="<%= @settings[:default_box].to_json %>"
+      crop-from-field-id="<%= params[:crop_from_form_field_id] %>"
+      crop-size-field-id="<%= params[:crop_size_form_field_id] %>"
+      element-id="<%= @element.id %>"
+      <% if @settings[:ratio] %>ratio="<%= @settings[:ratio] %>"<% end %>
+    >
+      <div class="thumbnail_background">
+        <%= image_tag @picture.url(flatten: true), alt: @picture.name %>
+      </div>
+      <form>
+        <%= button_tag Alchemy.t(:apply), type: 'submit' %>
+        <%= button_tag Alchemy.t('Reset Imagemask'), class: 'reset_mask secondary', type: 'reset' %>
+      </form>
+    </alchemy-image-cropper>
+  <% else %>
+    <%= content_tag "alchemy-picture-thumbnail", nil,
+      src: @picture.url(flatten: true) %>
+  <% end %>
 </div>
 <% end %>
-<% if @settings %>
-<script type="module">
-  import { ImageCropper } from "alchemy_admin/image_cropper";
-
-  const image = document.getElementById("imageToCrop")?.querySelector("img");
-
-  new ImageCropper(image, <%== @settings.merge(
-    crop_from_form_field_id: params[:crop_from_form_field_id],
-    crop_size_form_field_id: params[:crop_size_form_field_id],
-    element_id: @element.id
-  ).to_json %>);
-</script>
-<% end %>