alchemy_cms 7.0.15 → 7.1.0.pre.b1

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

@@ -1,7 +1,7 @@
 <div class="resource_info">
   <div class="value">
     <label>
-      <%= render_icon @attachment.icon_css_class, style: 'regular', size: 'lg' %>
+      <%= render_icon @attachment.icon_css_class %>
     </label>
     <p><%= @attachment.file_name %></p>
   </div>
@@ -9,32 +9,32 @@
     <label><%= Alchemy::Attachment.human_attribute_name(:url) %></label>
     <p><%= @attachment.url %></p>
     <a data-clipboard-text="<%= @attachment.url %>" class="icon_button--right">
-      <%= render_icon(:clipboard, style: 'regular') %>
+      <%= render_icon(:clipboard) %>
     </a>
   </div>
   <div class="value with-icon">
     <label><%= Alchemy::Attachment.human_attribute_name(:download_url) %></label>
     <p><%= @attachment.url(download: true) %></p>
     <a data-clipboard-text="<%= @attachment.url(download: true) %>" class="icon_button--right">
-      <%= render_icon(:clipboard, style: 'regular') %>
+      <%= render_icon(:clipboard) %>
     </a>
   </div>
 </div>
 
-<% case @attachment.icon_css_class %>
-<% when "file-image" %>
+<% case @attachment.file_mime_type %>
+<% when *Alchemy::Filetypes::IMAGE_FILE_TYPES %>
 <div class="attachment_preview_container image-preview">
   <%= image_tag(@attachment.url, class: "full_width") %>
 </div>
-<% when "file-audio" %>
+<% when *Alchemy::Filetypes::AUDIO_FILE_TYPES %>
 <div class="attachment_preview_container player-preview">
   <%= audio_tag(@attachment.url, preload: "none", controls: true, class: "full_width") %>
 </div>
-<% when "file-video" %>
+<% when *Alchemy::Filetypes::VIDEO_FILE_TYPES %>
 <div class="attachment_preview_container player-preview">
   <%= video_tag(@attachment.url, preload: "metadata", controls: true, class: "full_width") %>
 </div>
-<% when "file-pdf" %>
+<% when "application/pdf" %>
 <iframe src="<%= @attachment.url %>" frameborder=0 class="full-iframe">
   Your browser does not support frames.
 </iframe>

data/app/views/alchemy/admin/clipboard/clear.js.erb

@@ -1,3 +1,3 @@
 $("#clipboard_items").replaceWith("<%= j render_message { Alchemy.t('No items in your clipboard') } -%>");
-$('#clipboard_button .icon').removeClass('fa-paste').addClass('fa-clipboard');
+$('#clipboard_button .icon').removeClass('ri-clipboard-fill').addClass('ri-clipboard-line');
 Alchemy.pleaseWaitOverlay(false);

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

@@ -9,18 +9,14 @@
     <% item_class = item.class.name.demodulize.underscore.pluralize %>
     <li id="clipboard_item_<%= item.id -%>" class="<%= item_class -%>">
       <% if item_class == 'pages' %>
-        <%= render_icon(:file, style: 'regular') %>
+        <%= render_icon(:file) %>
         <%= truncate(item.name, length: 50) %>
       <% else %>
-        <% if item.public? %>
-          <%= render_icon('window-maximize', style: 'regular', class: 'element') %>
-        <% else %>
-          <%= render_icon('window-close', class: 'element') %>
-        <% end %>
+        <%= render_icon(:draggable, style: nil) %>
         <%= truncate(item.display_name_with_preview_text(50), length: 50) %>
       <% end %>
       <span class="float_right">
-        <%= link_to render_icon(:times, size: 'xs'),
+        <%= link_to render_icon(:close, size: '1x'),
           alchemy.remove_admin_clipboard_path(remarkable_type: item_class, remarkable_id: item.id),
           remote: true, method: 'delete',
           title: Alchemy.t('Remove item from clipboard') %>

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

@@ -13,7 +13,7 @@
 <% else -%>
   Alchemy.growl('<%= j Alchemy.t("item copied to clipboard", name: @item.class.name == "Alchemy::Element" ? @item.display_name_with_preview_text : @item.name) %>')
 <% end -%>
-$('#clipboard_button .icon').removeClass('fa-clipboard').addClass('fa-paste');
+$('#clipboard_button .icon').removeClass('ri-clipboard-line').addClass('ri-clipboard-fill');
 
 <%# Update add nested element forms for any elements that accept ONLY this as a nested element %>
 <% if @item.class == Alchemy::Element %>

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

@@ -19,7 +19,7 @@
 <% if @settings %>
 <script type="text/javascript">
   Alchemy.ImageLoader('#jscropper .thumbnail_background');
-  $('#imageToCrop').load(function() {
+  $('#imageToCrop').on("load", function() {
     new Alchemy.ImageCropper(
       <%= @settings[:min_size].to_json %>,
       <%= @settings[:default_box].to_json %>,

data/app/views/alchemy/admin/dashboard/_locked_pages.html.erb

@@ -39,7 +39,7 @@
         <% if (current_alchemy_user.id == page.locked_by) || can?(:manage, Alchemy::Site.current) %>
         <%= form_tag(alchemy.unlock_admin_page_path(page, :redirect_to => alchemy.admin_dashboard_url)) do %>
           <button class="icon_button small" title="<%= Alchemy.t(:explain_unlocking) %>">
-            <%= render_icon(:times, size: 'xs') %>
+            <%= render_icon(:close, size: '1x') %>
           </button>
         <% end %>
         <% end %>

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

@@ -1,16 +1,18 @@
 <%= content_for :toolbar do %>
-  <%= toolbar_button(
-    icon: 'info-circle',
-    label: Alchemy.t(:info),
-    url: alchemy.dashboard_info_path,
-    title: Alchemy.t(:info),
-    dialog_options: {
+  <div class="toolbar_buttons">
+    <%= toolbar_button(
+      icon: 'information',
+      label: Alchemy.t(:info),
+      url: alchemy.dashboard_info_path,
       title: Alchemy.t(:info),
-      size: "420x435"
-    },
-    if_permitted_to: [:info, :alchemy_admin_dashboard],
-    hotkey: 'alt+i'
-  ) %>
+      dialog_options: {
+        title: Alchemy.t(:info),
+        size: "420x435"
+      },
+      if_permitted_to: [:info, :alchemy_admin_dashboard],
+      hotkey: 'alt+i'
+    ) %>
+  </div>
 <% end %>
 
 <div id="dashboard">

data/app/views/alchemy/admin/dashboard/info.html.erb

@@ -9,15 +9,15 @@
 </h2>
 <% if can? :update_check, :alchemy_admin_dashboard %>
 <p class="center" id="update_check">
-  <span id="update_available">
+  <span id="update_available" class="hidden">
     <%= render_icon(:exclamation) %>
     <%= Alchemy.t 'Update available' %>
   </span>
-  <span id="up_to_date">
+  <span id="up_to_date" class="hidden">
     <%= render_icon(:check) %>
     <%= Alchemy.t 'Alchemy is up to date' %>
   </span>
-  <span id="error">
+  <span id="error" class="hidden">
     <%= render_icon(:exclamation) %>
     <%= Alchemy.t 'Update status unavailable' %>
   </span>
@@ -28,12 +28,12 @@
   spinner.spin(el[0])
   $.get('<%= alchemy.update_check_path %>', function(data, textStatus, jqXHR) {
     if (data == 'true') {
-      $('#update_available').show()
+      $('#update_available').removeClass("hidden")
     } else {
-      $('#up_to_date').show()
+      $('#up_to_date').removeClass("hidden")
     }
   }).fail(function(jqXHR, textStatus, errorThrown) {
-    $('#error').show()
+    $('#error').removeClass("hidden")
   }).always(function() {
     spinner.stop()
   })
@@ -58,7 +58,7 @@
       <a href="http://blueimp.github.io/jQuery-File-Upload/" target="_blank">jQuery File Upload</a>
     </li>
     <li>
-      <a href="https://fontawesome.com" target="_blank">FontAwesome Icons</a>
+      <a href="https://remixicon.com" target="_blank">Remix Icon</a>
     </li>
   </ul>
 <% end %>

data/app/views/alchemy/admin/elements/_add_nested_element_form.html.erb

@@ -1,27 +1,25 @@
 <%= content_tag :div, class: 'add-nested-element', data: { element_id: element.id } do %>
-  <% if element.expanded? || element.fixed? %>
-    <% if element.nestable_elements.length == 1 &&
-      (nestable_element = element.nestable_elements.first) &&
-      Alchemy::Element.all_from_clipboard_for_parent_element(get_clipboard("elements"), element).none?
-    %>
-      <%= form_for [:admin, Alchemy::Element.new(name: nestable_element)],
-        remote: true, html: { class: 'add-nested-element-form', id: nil } do |f| %>
-        <%= f.hidden_field :name %>
-        <%= f.hidden_field :page_version_id, value: element.page_version_id %>
-        <%= f.hidden_field :parent_element_id, value: element.id %>
-        <button class="button add-nestable-element-button" data-alchemy-button>
-          <%= Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) %>
-        </button>
-      <% end %>
-    <% else %>
-      <%= link_to_dialog (nestable_element ? Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) : Alchemy.t("New Element")),
-        alchemy.new_admin_element_path(
-          parent_element_id: element.id,
-          page_version_id: element.page_version_id
-        ), {
-          size: "320x125",
-          title: Alchemy.t("New Element")
-        }, class: "button add-nestable-element-button" %>
+  <% if element.nestable_elements.length == 1 &&
+    (nestable_element = element.nestable_elements.first) &&
+    Alchemy::Element.all_from_clipboard_for_parent_element(get_clipboard("elements"), element).none?
+  %>
+    <%= form_for [:admin, Alchemy::Element.new(name: nestable_element)],
+      remote: true, html: { class: 'add-nested-element-form', id: nil } do |f| %>
+      <%= f.hidden_field :name %>
+      <%= f.hidden_field :page_version_id, value: element.page_version_id %>
+      <%= f.hidden_field :parent_element_id, value: element.id %>
+      <button class="add-nestable-element-button" is="alchemy-button">
+        <%= Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) %>
+      </button>
     <% end %>
+  <% else %>
+    <%= link_to_dialog (nestable_element ? Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) : Alchemy.t("New Element")),
+      alchemy.new_admin_element_path(
+        parent_element_id: element.id,
+        page_version_id: element.page_version_id
+      ), {
+        size: "320x125",
+        title: Alchemy.t("New Element")
+      }, class: "button add-nestable-element-button" %>
   <% end %>
 <% end %>

data/app/views/alchemy/admin/elements/_element.html.erb

@@ -1,59 +1,66 @@
-<%= content_tag :div,
-  id: "element_#{element.id}",
-  data: {'element-id' => element.id, 'element-name' => element.name},
-  class: element.css_classes do %>
-
+<alchemy-element-editor
+  id="element_<%= element.id %>"
+  data-element-id="<%= element.id %>"
+  data-element-name="<%= element.name %>"
+  class="<%= element.css_classes %>"
+  <%= element.compact? ? "compact" : nil %>
+  <%= element.fixed? ? "fixed" : nil %>
+>
   <% unless element.fixed? %>
     <%= render 'alchemy/admin/elements/header', element: element %>
   <% end %>
 
-  <% if element.expanded? || element.fixed? %>
-    <%= render 'alchemy/admin/elements/toolbar', element: element %>
+  <%= render 'alchemy/admin/elements/toolbar', element: element %>
 
-    <% element.definition[:message].tap do |message| %>
-      <%= render_message(:info, sanitize(message)) if message %>
-    <% end %>
+  <% if element.has_hint? %>
+    <%= render_message(:hint, sanitize(element.hint)) %>
+  <% end %>
 
-    <% element.definition[:warning].tap do |warning| %>
-      <%= render_message(:warning, sanitize(warning)) if warning %>
-    <% end %>
+  <% element.definition[:message].tap do |message| %>
+    <%= render_message(:info, sanitize(message)) if message %>
+  <% end %>
 
-    <% if element.editable? %>
-      <%= form_for [alchemy, :admin, element], remote: true,
-        html: {id: "element_#{element.id}_form".html_safe, class: 'element-body'} do |f| %>
+  <% element.definition[:warning].tap do |warning| %>
+    <%= render_message(:warning, sanitize(warning)) if warning %>
+  <% end %>
 
-        <div id="element_<%= element.id %>_errors" class="element_errors"></div>
+  <% if element.editable? %>
+    <%= form_for [alchemy, :admin, element], remote: true,
+      html: {id: "element_#{element.id}_form".html_safe, class: 'element-body'} do |f| %>
 
-        <!-- Ingredients -->
-        <% if element.has_ingredients_defined? %>
-          <div class="element-ingredient-editors">
-            <%= render element.ingredients.select { |i| !i.definition[:group] }, element_form: f %>
+      <div id="element_<%= element.id %>_errors" class="element_errors hidden">
+        <h2><%= Alchemy.t("Validation failed") %></h2>
+        <p><%= Alchemy.t(:ingredient_validations_headline) %></p>
+        <ul class="error-messages"></ul>
+      </div>
 
-            <!-- Each ingredient group -->
-            <% element.ingredients.select { |i| i.definition[:group] }.group_by { |i| i.definition[:group] }.each do |group, ingredients| %>
-              <div class="ingredient-group">
-                <%= link_to '#', id: "element_#{element.id}_ingredient_group_#{group.parameterize.underscore}_header", class: 'ingredient-group-header', data: { toggle_ingredient_group: true } do %>
-                  <%= element.translated_group group %>
-                  <i class="ingredient-group-expand icon fa-fw fa-angle-down fas"></i>
-                <% end %>
-                <%= content_tag :div, id: "element_#{element.id}_ingredient_group_#{group.parameterize.underscore}", class: 'ingredient-group-ingredients' do %>
-                  <%= render ingredients, element_form: f %>
-                <% end %>
-              </div>
-            <% end %>
-          </div>
-        <% end %>
+      <!-- Ingredients -->
+      <% if element.has_ingredients_defined? %>
+        <div class="element-ingredient-editors">
+          <%= render element.ingredients.select { |i| !i.definition[:group] }, element_form: f %>
 
-        <% if element.taggable? %>
-          <div class="autocomplete_tag_list">
-            <%= f.label :tag_list %>
-            <%= render 'alchemy/admin/partials/autocomplete_tag_list', f: f %>
-          </div>
-        <% end %>
+          <!-- Each ingredient group -->
+          <% element.ingredients.select { |i| i.definition[:group] }.group_by { |i| i.definition[:group] }.each do |group, ingredients| %>
+            <%= content_tag :details, class: "ingredient-group", id: "element_#{element.id}_ingredient_group_#{group.parameterize.underscore}", is: "alchemy-ingredient-group" do %>
+              <summary>
+                <%= element.translated_group group %>
+                <i class="ingredient-group-expand icon ri-fw ri-arrow-left-s-line"></i>
+              </summary>
+              <%= render ingredients, element_form: f %>
+            <% end %>
+          <% end %>
+        </div>
       <% end %>
 
-      <%= render 'alchemy/admin/elements/footer', element: element %>
+      <% if element.taggable? %>
+        <div class="autocomplete_tag_list">
+          <%= f.label :tag_list %>
+          <%= render 'alchemy/admin/partials/autocomplete_tag_list', f: f %>
+        </div>
+      <% end %>
     <% end %>
+
+    <%= render 'alchemy/admin/elements/footer', element: element %>
   <% end %>
 
   <%# We need to render nested elements even if the element is folded,
@@ -63,7 +70,8 @@
     <div class="nestable-elements">
       <%= content_tag :div,
         class: "nested-elements", data: {
-          'droppable-elements' => element.nestable_elements.join(' ')
+          'droppable-elements' => element.nestable_elements.join(' '),
+          'element-name' => element.name
         } do %>
         <%= render element.all_nested_elements.map { |element|
           Alchemy::ElementEditor.new(element)
@@ -73,4 +81,4 @@
       <%= render "alchemy/admin/elements/add_nested_element_form", element: element %>
     </div>
   <% end %>
-<% end %>
+</alchemy-element-editor>

data/app/views/alchemy/admin/elements/_footer.html.erb

@@ -5,7 +5,7 @@
     </p>
   <% end %>
 
-  <button type="submit" form="element_<%= element.id %>_form" class="button" data-alchemy-button>
+  <button type="submit" form="element_<%= element.id %>_form" is="alchemy-button">
     <%= Alchemy.t(:save) %>
   </button>
 </div>

data/app/views/alchemy/admin/elements/_form.html.erb

@@ -10,7 +10,7 @@
       collection: elements_for_select(@elements),
       prompt: Alchemy.t(:select_element),
       selected: (@elements.first if @elements.count == 1),
-      input_html: {class: 'alchemy_selectbox', autofocus: true, disabled: @elements.count == 1} %>
+      input_html: {is: 'alchemy-select', autofocus: true, disabled: @elements.count == 1} %>
     <% if @elements.count == 1 %>
       <%= form.hidden_field :name, value: @elements.first[:name] %>
     <% end %>

data/app/views/alchemy/admin/elements/_header.html.erb

@@ -5,11 +5,7 @@
     <% elsif element.deprecated? %>
       <%= hint_with_tooltip element.deprecation_notice %>
     <% else %>
-      <% if element.public? %>
-        <%= render_icon('window-maximize', style: 'regular', class: 'element') %>
-      <% else %>
-        <%= render_icon('window-close', class: 'element') %>
-      <% end %>
+      <%= render_icon('draggable', style: nil, class: 'element', fixed_width: false) %>
     <% end %>
   </span>
   <span class="element-title">
@@ -18,13 +14,16 @@
       <%= sanitize(element.preview_text.presence || '&nbsp;') %>
     </span>
   </span>
-  <%= render_hint_for(element) %>
-  <%= link_to '#', {
-    'data-element-toggle' => element.id,
+  <span class="element-hidden-icon">
+    <%= render_icon("cloud-off", size: "1x") %>
+    <span class="element-hidden-label">
+      <%= Alchemy.t(:element_hidden) %>
+    </span>
+  </span>
+  <%= button_tag({
     title: Alchemy.t(element.folded? ? :show_element_content : :hide_element_content),
-    id: "element_#{element.id}_folder",
-    class: "ajax-folder"
-  } do %>
-    <%= render_icon element.folded? ? 'plus-square' : 'minus-square' %>
+    class: "element-toggle"
+  }) do %>
+    <%= render_icon element.folded? ? 'arrow-left-s' : 'arrow-down-s' %>
   <% end %>
 </div>

data/app/views/alchemy/admin/elements/_toolbar.html.erb

@@ -1,48 +1,36 @@
 <% remarkable_type = "elements" %>
 <div class="element-toolbar">
-  <span class="element_tools">
-    <div class="button_with_label">
-      <%= link_to(
-        render_icon(:clone),
-        alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id),
-        remote: true,
-        method: :post,
-        class: "icon_button"
-      ) %>
-      <label><%= Alchemy.t(:copy_element) %></label>
-    </div>
-    <div class="button_with_label">
-      <%= link_to(
-        render_icon(:cut),
-        alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id, remove: true),
-        remote: true,
-        method: :post,
-        class: "icon_button"
-      ) %>
-      <label><%= Alchemy.t(:cut_element) %></label>
-    </div>
-    <div class="button_with_label">
-      <%= link_to_confirm_dialog(
-        render_icon('trash-alt'),
-        Alchemy.t(:confirm_to_delete_element),
-        alchemy.admin_element_path(element),
-        class: "icon_button"
-      ) -%>
-      <label><%= Alchemy.t("Delete element") %></label>
-    </div>
-    <div class="button_with_label publish-element-button">
-      <%= link_to(
-        render_icon(element.public? ? 'eye-slash' : 'eye'),
-        alchemy.publish_admin_element_path(id: element.id),
-        remote: true,
-        method: :patch,
-        class: "icon_button"
-      ) %>
-      <% if element.public? %>
-        <label><%= Alchemy.t(:hide_element) %></label>
-      <% else %>
-        <label><%= Alchemy.t(:show_element) %></label>
-      <% end %>
-    </div>
-  </span>
+  <sl-tooltip placement="top-start" content="<%= Alchemy.t(:copy_element) %>">
+    <%= link_to(
+      render_icon("file-copy"),
+      alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id),
+      remote: true,
+      method: :post,
+      class: "icon_button"
+    ) %>
+  </sl-tooltip>
+  <sl-tooltip content="<%= Alchemy.t(:cut_element) %>">
+    <%= link_to(
+      render_icon("scissors-cut"),
+      alchemy.insert_admin_clipboard_path(remarkable_type: remarkable_type, remarkable_id: element.id, remove: true),
+      remote: true,
+      method: :post,
+      class: "icon_button"
+    ) %>
+  </sl-tooltip>
+  <sl-tooltip content="<%= Alchemy.t("Delete element") %>">
+    <%= link_to_confirm_dialog(
+      render_icon('delete-bin-2'),
+      Alchemy.t(:confirm_to_delete_element),
+      alchemy.admin_element_path(element),
+      class: "icon_button"
+    ) -%>
+  </sl-tooltip>
+  <sl-tooltip content="<%= element.public? ? Alchemy.t(:hide_element) : Alchemy.t(:show_element) %>" placement="top-end">
+    <alchemy-publish-element-button>
+      <sl-switch <%= element.public? ? nil : "checked" %> size="small">
+        <%= t(".hide") %>
+      </sl-switch>
+    </alchemy-publish-element-button>
+  </sl-tooltip>
 </div>

data/app/views/alchemy/admin/elements/create.js.erb

@@ -1,5 +1,4 @@
 (function() {
-  var $el;
   var $element_area;
   var element_html = '<%= j render(Alchemy::ElementEditor.new(@element)) %>';
 
@@ -12,10 +11,9 @@
     Alchemy.FixedElements.buildTabs('<%= Alchemy.t(:main_content) %>');
   }
   Alchemy.FixedElements.createTab('<%= @element.id %>', '<%= @element.display_name %>');
-  $element_area = $('#fixed-element-<%= @element.id %>');
+  $element_area = $('[name="fixed-element-<%= @element.id %>"]');
 <% elsif @element.parent_element %>
   $element_area = $('#element_<%= @element.parent_element_id %> > .nestable-elements > .nested-elements');
-  Alchemy.Buttons.enable('.nestable-elements');
 <% else %>
   $element_area = $('#main-content-elements');
 <% end %>
@@ -26,22 +24,16 @@
   $element_area.append(element_html);
 <%- end -%>
 
-  if ($element_area.find('.element-editor').length > 0) {
-    Alchemy.SortableElements(<%= @page.id %>, '<%= form_authenticity_token %>', $element_area);
-  } else {
-    $element_area.sortable('refresh');
-  }
+<% if @element.fixed? %>
+  Alchemy.SortableElements('[name="fixed-element-<%= @element.id %>"] .nested-elements');
+<% end %>
 
   Alchemy.growl('<%= Alchemy.t(:successfully_added_element) %>');
   Alchemy.closeCurrentDialog();
-  Alchemy.Tinymce.init(<%= @element.richtext_ingredients_ids.to_json %>);
-  Alchemy.PreviewWindow.refresh(function() {
-    Alchemy.ElementEditors.focusElementPreview(<%= @element.id %>);
-  });
 
-  $el = $('#element_<%= @element.id %>');
-  $el.trigger('FocusElementEditor.Alchemy');
-  Alchemy.GUI.initElement($el);
+  el = document.querySelector('#element_<%= @element.id %>');
+  el.focusElement();
+  el.focusElementPreview();
 
 <%- if @clipboard.blank? -%>
   $('#clipboard_button .icon.clipboard').removeClass('full');

data/app/views/alchemy/admin/elements/destroy.js.erb

@@ -1,9 +1,7 @@
 $('#element_<%= @element.id %>').hide(200, function() {
   $(this).remove();
   Alchemy.growl('<%= j @notice %>');
-  $('#element_area .sortable-elements').sortable('refresh');
   Alchemy.PreviewWindow.refresh();
-  Alchemy.Tinymce.remove(<%= @richtext_ids.to_json %>);
   <% if @element.fixed? %>
   Alchemy.FixedElements.removeTab(<%= @element.id %>);
   <% end %>

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

@@ -1,33 +1,36 @@
 <% if @fixed_elements.any? %>
-  <div id="fixed-elements">
-    <ul>
-      <li>
-        <a href="#main-content-elements">
-          <%= Alchemy.t(:main_content) %>
-        </a>
-      </li>
-      <% @fixed_elements.each do |element| %>
-        <li>
-          <a href="#fixed-element-<%= element.id %>">
-            <%= element.display_name %>
-          </a>
-        </li>
-      <% end %>
-    </ul>
-    <div id="main-content-elements" class="sortable-elements" data-droppable-elements="<%= @page.element_definition_names.join(' ') %>">
+  <sl-tab-group id="fixed-elements">
+    <sl-tab slot="nav" panel="main-content-elements">
+      <%= Alchemy.t(:main_content) %>
+    </sl-tab>
+    <% @fixed_elements.each do |element| %>
+      <sl-tab slot="nav" panel="fixed-element-<%= element.id %>">
+        <%= element.display_name %>
+      </sl-tab>
+    <% end %>
+    <sl-tab-panel
+      name="main-content-elements"
+      class="sortable-elements scrollable-elements"
+      data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
+      data-element-name="main-content-elements"
+      id="main-content-elements"
+      style="--padding: 0"
+    >
       <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
-    </div>
+    </sl-tab-panel>
     <% @fixed_elements.each do |element| %>
-      <div
-        id="fixed-element-<%= element.id %>"
-        class="sortable-elements"
-        data-droppable-elements="<%= element.nestable_elements.join(' ') %>">
+      <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
         <%= render Alchemy::ElementEditor.new(element) %>
-      </div>
+      </sl-tab-panel>
     <% end %>
-  </div>
+  </sl-tab-group>
 <% else %>
-  <div id="main-content-elements" class="sortable-elements" data-droppable-elements="<%= @page.element_definition_names.join(' ') %>">
+  <div
+    id="main-content-elements"
+    class="sortable-elements scrollable-elements"
+    data-droppable-elements="<%= @page.element_definition_names.join(' ') %>"
+    data-element-name="main-content-elements"
+  >
     <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
   </div>
 <% end %>