alchemy_cms 7.3.5 → 7.4.0

data/app/javascript/alchemy_admin/image_overlay.js

@@ -0,0 +1,73 @@
+import ImageLoader from "alchemy_admin/image_loader"
+import { Dialog } from "alchemy_admin/dialog"
+
+export default class ImageOverlay extends Dialog {
+  constructor(url, options = {}) {
+    super(url, options)
+  }
+
+  init() {
+    ImageLoader.init(this.dialog_body[0])
+    $(".zoomed-picture-background").on("click", (e) => {
+      e.stopPropagation()
+      if (e.target.nodeName === "IMG") {
+        return
+      }
+      this.close()
+      return false
+    })
+    $(".picture-overlay-handle").on("click", (e) => {
+      this.dialog.toggleClass("hide-form")
+      return false
+    })
+    this.$previous = $(".previous-picture")
+    this.$next = $(".next-picture")
+    this.#initKeyboardNavigation()
+    super.init()
+  }
+
+  previous() {
+    if (this.$previous[0] != null) {
+      this.$previous[0].click()
+    }
+  }
+
+  next() {
+    if (this.$next[0] != null) {
+      this.$next[0].click()
+    }
+  }
+
+  build() {
+    this.dialog_container = $('<div class="alchemy-image-overlay-container" />')
+    this.dialog = $('<div class="alchemy-image-overlay-dialog" />')
+    this.dialog_body = $('<div class="alchemy-image-overlay-body" />')
+    this.close_button = $(`<a class="alchemy-image-overlay-close">
+      <alchemy-icon name="close" size="xl"></alchemy-icon>
+    </a>`)
+    this.dialog.append(this.close_button)
+    this.dialog.append(this.dialog_body)
+    this.dialog_container.append(this.dialog)
+    this.overlay = $('<div class="alchemy-image-overlay" />')
+    this.$body.append(this.overlay)
+    this.$body.append(this.dialog_container)
+  }
+
+  #initKeyboardNavigation() {
+    this.$document.keydown((e) => {
+      if (e.target.nodeName === "INPUT" || e.target.nodeName === "TEXTAREA") {
+        return true
+      }
+      switch (e.which) {
+        case 37:
+          this.previous()
+          return false
+        case 39:
+          this.next()
+          return false
+        default:
+          return true
+      }
+    })
+  }
+}

data/app/javascript/alchemy_admin/initializer.js

@@ -1,3 +1,11 @@
+import {
+  confirmToDeleteDialog,
+  openConfirmDialog
+} from "alchemy_admin/confirm_dialog"
+
+import Hotkeys from "alchemy_admin/hotkeys"
+import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
+
 /**
  * add change listener to select to redirect the user after selecting another locale or site
  * @param {string} selectId
@@ -18,12 +26,53 @@ function selectHandler(selectId, parameterName, forcedReload = false) {
   })
 }
 
+// Watches elements for Alchemy Dialogs
+//
+// Links having a data-alchemy-confirm-delete
+// and input/buttons having a data-alchemy-confirm attribute get watched.
+//
+// You can pass a scope so that only elements inside this scope are queried.
+//
+// The href attribute of the link is the url for the overlay window.
+//
+// See Dialog for further options you can add to the data attribute.
+//
+function watchForConfirmDialogs(scope) {
+  if (scope == null) {
+    scope = "#alchemy"
+  }
+  $(scope).on("click", "[data-alchemy-confirm-delete]", function (event) {
+    const $this = $(this)
+    const options = $this.data("alchemy-confirm-delete")
+    confirmToDeleteDialog($this.attr("href"), options)
+    event.preventDefault()
+  })
+  $(scope).on("click", "[data-alchemy-confirm]", function (event) {
+    const options = $(this).data("alchemy-confirm")
+    openConfirmDialog(
+      options.message,
+      $.extend(options, {
+        ok_label: options.ok_label,
+        cancel_label: options.cancel_label,
+        on_ok: () => {
+          pleaseWaitOverlay()
+          this.form.submit()
+        }
+      })
+    )
+    event.preventDefault()
+  })
+}
+
 export default function Initializer() {
   // We obviously have javascript enabled.
   $("html").removeClass("no-js")
 
-  // Initialize the GUI.
-  Alchemy.GUI.init()
+  // Initialize hotkeys.
+  Hotkeys()
+
+  // Watch for click on confirm dialog links.
+  watchForConfirmDialogs()
 
   // Add observer for please wait overlay.
   $(".please_wait")

data/app/javascript/alchemy_admin/link_dialog.js

@@ -1,9 +1,10 @@
 import { translate } from "alchemy_admin/i18n"
+import { Dialog } from "alchemy_admin/dialog"
 
 // Represents the link Dialog that appears, if a user clicks the link buttons
 // in TinyMCE or on an Ingredient that has links enabled (e.g. Picture)
 //
-export class LinkDialog extends Alchemy.Dialog {
+export class LinkDialog extends Dialog {
   #onCreateLink
 
   constructor(link) {

data/app/javascript/alchemy_admin/node_tree.js

@@ -14,7 +14,9 @@ function displayNodeFolders() {
     }
 
     if (list.children.length > 0 || node.folded) {
-      leftIconArea.innerHTML = HandlebarsTemplates.node_folder({ node: node })
+      leftIconArea.innerHTML = Handlebars.templates["node_folder.hbs"]({
+        node: node
+      })
     } else {
       leftIconArea.innerHTML = " "
     }

data/app/javascript/alchemy_admin/page_sorter.js

@@ -44,7 +44,7 @@ export function displayPageFolders() {
     }
 
     if (list.children.length > 0 || page.folded) {
-      pageFolderEl.outerHTML = HandlebarsTemplates.page_folder({ page })
+      pageFolderEl.outerHTML = Handlebars.templates["page_folder.hbs"]({ page })
     } else {
       pageFolderEl.innerHTML = ""
     }

data/app/javascript/alchemy_admin/picture_selector.js

@@ -1,4 +1,5 @@
 import { on } from "alchemy_admin/utils/events"
+import { openDialog } from "alchemy_admin/dialog"
 
 function toggleCheckboxes(state) {
   document
@@ -58,7 +59,7 @@ export default function PictureSelector() {
 
     const url = editMultiplePicturesUrl(event.target.href)
 
-    Alchemy.openDialog(url, {
+    openDialog(url, {
       title: event.target.title,
       size: "400x295"
     })

data/app/javascript/alchemy_admin/shoelace_theme.js

@@ -43,8 +43,8 @@ setDefaultAnimation("dialog.hide", {
 })
 
 const spriteUrl = document
-  .querySelector('meta[name="alchemy-icon-sprite"]')
-  .getAttribute("content")
+  .querySelector('link[rel="preload"][as="image"]')
+  .getAttribute("href")
 
 const iconMap = {
   "x-lg": "close"

data/app/javascript/alchemy_admin/templates/compiled.js

@@ -0,0 +1 @@
+(()=>{var n=Handlebars.template,e=Handlebars.templates=Handlebars.templates||{};e["node_folder.hbs"]=n({1:function(n,e,l,a,r){return"right"},3:function(n,e,l,a,r){return"down"},compiler:[8,">= 4.3.0"],main:function(n,e,l,a,r){var o,t=n.lambda,u=n.escapeExpression,c=n.lookupProperty||function(n,e){if(Object.prototype.hasOwnProperty.call(n,e))return n[e]};return'<a class="node_folder" data-record-id="'+u(t(null!=(o=null!=e?c(e,"node"):e)?c(o,"id"):o,e))+'" data-record-type="'+u(t(null!=(o=null!=e?c(e,"node"):e)?c(o,"type"):o,e))+'">\n  <alchemy-icon name="arrow-'+(null!=(o=c(l,"if").call(null!=e?e:n.nullContext||{},null!=(o=null!=e?c(e,"node"):e)?c(o,"folded"):o,{name:"if",hash:{},fn:n.program(1,r,0),inverse:n.program(3,r,0),data:r,loc:{start:{line:2,column:28},end:{line:2,column:72}}}))?o:"")+'-s"></alchemy-icon>\n</a>\n'},useData:!0}),e["page_folder.hbs"]=n({1:function(n,e,l,a,r){return"right"},3:function(n,e,l,a,r){return"down"},compiler:[8,">= 4.3.0"],main:function(n,e,l,a,r){var o,t=n.lookupProperty||function(n,e){if(Object.prototype.hasOwnProperty.call(n,e))return n[e]};return'<a class="page_folder icon_button" data-page-id="'+n.escapeExpression(n.lambda(null!=(o=null!=e?t(e,"page"):e)?t(o,"id"):o,e))+'">\n  <alchemy-icon name="arrow-'+(null!=(o=t(l,"if").call(null!=e?e:n.nullContext||{},null!=(o=null!=e?t(e,"page"):e)?t(o,"folded"):o,{name:"if",hash:{},fn:n.program(1,r,0),inverse:n.program(3,r,0),data:r,loc:{start:{line:2,column:28},end:{line:2,column:72}}}))?o:"")+'-s"></alchemy-icon>\n</a>\n'},useData:!0})})();

data/app/javascript/alchemy_admin.js

@@ -1,18 +1,20 @@
+// We still use jQuery in some places (ie. select2)
+import "handlebars"
+import "jquery"
 import "@ungap/custom-elements"
 import "@hotwired/turbo-rails"
+import "select2"
 
 import Rails from "@rails/ujs"
 
-import GUI from "alchemy_admin/gui"
 import { translate } from "alchemy_admin/i18n"
+import { currentDialog, closeCurrentDialog } from "alchemy_admin/dialog"
 import Dirty from "alchemy_admin/dirty"
 import * as FixedElements from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
 import ImageLoader from "alchemy_admin/image_loader"
-import ImageCropper from "alchemy_admin/image_cropper"
 import Initializer from "alchemy_admin/initializer"
 import { LinkDialog } from "alchemy_admin/link_dialog"
-import pictureSelector from "alchemy_admin/picture_selector"
 import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 import Sitemap from "alchemy_admin/sitemap"
 import Spinner from "alchemy_admin/spinner"
@@ -26,6 +28,9 @@ import {
 // Web Components
 import "alchemy_admin/components"
 
+// Handlebars Templates
+import "alchemy_admin/templates/compiled"
+
 // Shoelace Setup
 import "alchemy_admin/shoelace_theme"
 
@@ -36,15 +41,14 @@ if (typeof window.Alchemy === "undefined") {
 
 // Enhance the global Alchemy object with imported features
 Object.assign(Alchemy, {
+  closeCurrentDialog,
+  currentDialog,
   ...Dirty,
-  GUI,
   t: translate, // Global utility method for translating a given string
   FixedElements,
   growl,
   ImageLoader: ImageLoader.init,
-  ImageCropper,
   LinkDialog,
-  pictureSelector,
   pleaseWaitOverlay,
   Sitemap,
   Spinner,

data/app/javascript/preview.js

@@ -0,0 +1,117 @@
+window.Alchemy = Alchemy || {}
+
+Object.assign(Alchemy, {
+  ElementSelector: {
+    styles: {
+      reset: {
+        outline: "",
+        "outline-offset": "",
+        cursor: ""
+      },
+      hover: {
+        outline: "2px dashed #f0b437",
+        "outline-offset": "4px",
+        cursor: "pointer"
+      },
+      selected: {
+        outline: "2px dashed #90b9d0",
+        "outline-offset": "4px"
+      }
+    },
+
+    init() {
+      window.addEventListener("message", (event) => {
+        switch (event.data.message) {
+          case "Alchemy.blurElements":
+            this.blurElements()
+            break
+          case "Alchemy.focusElement":
+            this.focusElement(event.data)
+            break
+          default:
+            console.info("Received unknown message!", event.data)
+        }
+      })
+      this.elements = Array.from(
+        document.querySelectorAll("[data-alchemy-element]")
+      )
+      this.elements.forEach((element) => {
+        element.addEventListener("mouseover", () => {
+          if (!element.classList.contains("selected")) {
+            Object.assign(element.style, this.getStyle("hover"))
+          }
+        })
+        element.addEventListener("mouseout", () => {
+          if (!element.classList.contains("selected")) {
+            Object.assign(element.style, this.getStyle("reset"))
+          }
+        })
+        element.addEventListener("click", (e) => {
+          e.stopPropagation()
+          e.preventDefault()
+          this.selectElement(element)
+          this.focusElementEditor(element)
+        })
+      })
+    },
+
+    // Mark element in preview frame as selected and scrolls to it.
+    selectElement(element) {
+      this.blurElements(element)
+      element.classList.add("selected")
+      Object.assign(element.style, this.getStyle("selected"))
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      })
+    },
+
+    // Blur all elements in preview frame.
+    blurElements(selectedElement) {
+      this.elements.forEach((element) => {
+        if (element !== selectedElement) {
+          element.classList.remove("selected")
+          Object.assign(element.style, this.getStyle("reset"))
+        }
+      })
+    },
+
+    // Focus the element in the Alchemy preview window.
+    focusElement(data) {
+      const element = this.getElement(data.element_id)
+      if (element) {
+        return this.selectElement(element)
+      } else {
+        return console.warn("Could not focus element with id", data.element_id)
+      }
+    },
+
+    getElement(element_id) {
+      return this.elements.find(
+        (element) => element.dataset.alchemyElement === element_id.toString()
+      )
+    },
+
+    // Focus the element editor in the Alchemy element window.
+    focusElementEditor(element) {
+      const element_id = element.dataset.alchemyElement
+      window.parent.postMessage(
+        {
+          message: "Alchemy.focusElementEditor",
+          element_id
+        },
+        window.location.origin
+      )
+    },
+
+    getStyle(state) {
+      if (state === "reset") {
+        return this.styles["reset"]
+      } else {
+        return this.styles[state]
+      }
+    }
+  }
+})
+
+Alchemy.ElementSelector.init()

data/app/models/alchemy/image_cropper_settings.rb

@@ -20,8 +20,7 @@ module Alchemy
       {
         min_size: large_enough? ? min_size : false,
         ratio: ratio,
-        default_box: default_box,
-        image_size: [image_width, image_height]
+        default_box: default_box
       }.freeze
     end
 
@@ -79,8 +78,8 @@ module Alchemy
       [
         default_crop_from[0],
         default_crop_from[1],
-        default_crop_from[0] + default_crop_size[0],
-        default_crop_from[1] + default_crop_size[1]
+        default_crop_size[0],
+        default_crop_size[1]
       ]
     end
   end

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

@@ -2,5 +2,5 @@
   <script type="text/javascript">
     Alchemy = { locale: "<%= session[:alchemy_locale] %>" };
   </script>
-  <%= javascript_include_tag("alchemy/preview") %>
+  <%= javascript_include_tag("alchemy/preview.min") %>
 <% end %>

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

@@ -8,7 +8,7 @@
     <%= simple_format Alchemy.t(:explain_cropping) %>
   <% end %>
   <div class="thumbnail_background">
-    <%= image_tag @picture.thumbnail_url(size: '800x600'), id: 'imageToCrop' %>
+    <%= image_tag @picture.url(flatten: true), id: 'imageToCrop' %>
   </div>
   <form>
     <%= button_tag Alchemy.t(:apply), type: 'submit' %>
@@ -17,20 +17,23 @@
 </div>
 <% end %>
 <% if @settings %>
-<script type="text/javascript">
-  Alchemy.ImageLoader('#jscropper .thumbnail_background');
-  $('#imageToCrop').on("load", function() {
-    new Alchemy.ImageCropper(
-      <%= @settings[:min_size].to_json %>,
-      <%= @settings[:default_box].to_json %>,
-      <%= @settings[:ratio] %>,
-      <%= @settings[:image_size].to_json %>,
-      [
-        "<%= params[:crop_from_form_field_id] %>",
-        "<%= params[:crop_size_form_field_id] %>",
-      ],
-      <%= @element.id %>
-    );
-  });
+<script type="module">
+  import ImageCropper from "alchemy_admin/image_cropper";
+  import ImageLoader from "alchemy_admin/image_loader";
+
+  const image = document.getElementById("imageToCrop");
+
+  new ImageLoader(image);
+  new ImageCropper(
+    image,
+    <%= @settings[:min_size].to_json %>,
+    <%= @settings[:default_box].to_json %>,
+    <%= @settings[:ratio] %>,
+    [
+      "<%= params[:crop_from_form_field_id] %>",
+      "<%= params[:crop_size_form_field_id] %>",
+    ],
+    <%= @element.id %>
+  );
 </script>
 <% end %>

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

@@ -22,7 +22,7 @@
     <%= Alchemy.t 'Update status unavailable' %>
   </span>
 </p>
-<script type="text/javascript">
+<script type="module">
   var el = $('#update_check');
   var spinner = new Alchemy.Spinner('small')
   spinner.spin(el[0])

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

@@ -3,14 +3,15 @@
     (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" data-turbo="false">
-        <%= Alchemy.t(:add_nested_element, name: Alchemy.t(nestable_element.to_sym, scope: 'element_names')) %>
-      </button>
+    <%= turbo_frame_tag("new_nested_element_#{element.id}") do %>
+      <%= form_for [:admin, Alchemy::Element.new(name: nestable_element)], 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 %>
     <% 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")),

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

@@ -0,0 +1,14 @@
+<%= render Alchemy::Admin::ToolbarButton.new(
+  url: alchemy.admin_clipboard_path(remarkable_type: "elements"),
+  label: Alchemy.t("Show clipboard"),
+  icon: :clipboard,
+  icon_style: clipboard_empty?("elements") ? "line" : "fill",
+  dialog_options: {
+    title: Alchemy.t("Clipboard"),
+    size: "400x305"
+  },
+  link_options: {
+    id: "clipboard_button"
+  },
+  if_permitted_to: [:index, :alchemy_admin_clipboard]
+) %>

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

@@ -4,6 +4,7 @@
   data-element-name="<%= element.name %>"
   class="<%= element.css_classes.join(" ") %>"
   <%= element.compact? ? "compact" : nil %>
+  <%= local_assigns[:created] ? "created" : nil %>
   <%= element.fixed? ? "fixed" : nil %>
 >
   <% unless element.fixed? %>
@@ -68,6 +69,7 @@
   <% if element.nestable_elements.any? %>
     <div class="nestable-elements">
       <%= content_tag :div,
+        id: "element_#{element.id}_nested_elements",
         class: "nested-elements", data: {
           'droppable-elements' => element.nestable_elements.join(' '),
           'element-name' => element.name

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

@@ -3,18 +3,20 @@
     <%= Alchemy.t(:no_more_elements_to_add) %>
   <% end %>
 <%- else -%>
-  <%= alchemy_form_for [:admin, @element] do |form| %>
-    <%= form.hidden_field :page_version_id %>
-    <%= form.input :name,
-      label: Alchemy.t(:element_of_type),
-      collection: elements_for_select(@elements),
-      prompt: Alchemy.t(:select_element),
-      selected: (@elements.first if @elements.count == 1),
-      input_html: {is: 'alchemy-select', autofocus: true} %>
-    <% if @elements.count == 1 %>
-      <%= form.hidden_field :name, value: @elements.first[:name] %>
-    <% end %>
-    <%= form.hidden_field :parent_element_id, value: @parent_element.try(:id) %>
-    <%= form.submit Alchemy.t(:add) %>
+  <%= turbo_frame_tag @element do %>
+    <%= alchemy_form_for [:admin, @element], remote: false do |form| %>
+      <%= form.hidden_field :page_version_id %>
+      <%= form.input :name,
+        label: Alchemy.t(:element_of_type),
+        collection: elements_for_select(@elements),
+        prompt: Alchemy.t(:select_element),
+        selected: (@elements.first if @elements.count == 1),
+        input_html: {is: 'alchemy-select', autofocus: true} %>
+      <% if @elements.count == 1 %>
+        <%= form.hidden_field :name, value: @elements.first[:name] %>
+      <% end %>
+      <%= form.hidden_field :parent_element_id, value: @parent_element.try(:id) %>
+      <%= form.submit Alchemy.t(:add) %>
+    <%- end -%>
   <%- end -%>
 <%- end -%>

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

@@ -0,0 +1,34 @@
+<% opts = {
+  partial: "alchemy/admin/elements/element",
+  locals: {
+    element: Alchemy::ElementEditor.new(@element),
+    created: true
+  }
+} %>
+
+<% if @element.fixed? %>
+  <% target = "fixed_element_#{@element.id}" %>
+<% elsif @element.parent_element %>
+  <% target = "element_#{@element.parent_element_id}_nested_elements" %>
+<% else %>
+  <% target = "main-content-elements" %>
+<% end %>
+
+<%- if @cut_element_id -%>
+  <%= turbo_stream.remove "element_#{@cut_element_id}" %>
+<% end %>
+
+<% if @insert_at_top %>
+  <%= turbo_stream.prepend target, **opts %>
+<% else %>
+  <%= turbo_stream.append target, **opts %>
+<% end %>
+
+<%= turbo_stream.replace "clipboard_button",
+  partial: "alchemy/admin/elements/clipboard_button" %>
+
+<alchemy-growl>
+  <%= Alchemy.t(:successfully_added_element) %>
+</alchemy-growl>
+
+<alchemy-action name="closeCurrentDialog"></alchemy-action>

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

@@ -1,4 +1,5 @@
 <%= turbo_frame_tag "alchemy_elements_window" do %>
+  <alchemy-elements-window-handle></alchemy-elements-window-handle>
   <alchemy-elements-window>
     <div class="elements-window-toolbar">
       <%= render Alchemy::Admin::ToolbarButton.new(
@@ -12,20 +13,7 @@
         },
         if_permitted_to: [:create, Alchemy::Element]
       ) %>
-      <%= render Alchemy::Admin::ToolbarButton.new(
-        url: alchemy.admin_clipboard_path(remarkable_type: "elements"),
-        label: Alchemy.t("Show clipboard"),
-        icon: :clipboard,
-        icon_style: clipboard_empty?("elements") ? "line" : "fill",
-        dialog_options: {
-          title: Alchemy.t("Clipboard"),
-          size: "400x305"
-        },
-        link_options: {
-          id: "clipboard_button"
-        },
-        if_permitted_to: [:index, :alchemy_admin_clipboard]
-      ) %>
+      <%= render "alchemy/admin/elements/clipboard_button" %>
       <sl-tooltip content="<%= Alchemy.t("Collapse all elements") %>" placement="top-end" class="right">
         <button id="collapse-all-elements-button" class="icon_button">
           <alchemy-icon name="contract-up-down"></alchemy-icon>
@@ -53,7 +41,7 @@
           <%= render @elements.map { |element| Alchemy::ElementEditor.new(element) } %>
         </sl-tab-panel>
         <% @fixed_elements.each do |element| %>
-          <sl-tab-panel name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
+          <sl-tab-panel id="fixed_element_<%= element.id %>" name="fixed-element-<%= element.id %>" style="--padding: 0" class="scrollable-elements">
             <%= render Alchemy::ElementEditor.new(element) %>
           </sl-tab-panel>
         <% end %>

data/app/views/alchemy/admin/ingredients/_picture_fields.html.erb

@@ -1,6 +1,6 @@
 <%= f.input :caption, as: ingredient.settings[:caption_as_textarea] ? 'text' : 'string' %>
 <%= f.input :title %>
-<%= f.input :alt_tag, as: :text, placeholder: ingredient.alt_text(language: @language) %>
+<%= f.input :alt_tag, as: :text, placeholder: ingredient.alt_text(language: @language), input_html: {rows: 4} %>
 <%- if ingredient.settings[:sizes].present? && ingredient.settings[:srcset].blank? -%>
   <%= f.input :render_size,
     collection: [

data/app/views/alchemy/admin/layoutpages/edit.html.erb

@@ -1,7 +1,9 @@
-<%= alchemy_form_for [:admin, @page], url: alchemy.admin_layoutpage_path(@page), class: 'edit_page' do |f| %>
-  <%= f.input :name, autofocus: true %>
-  <%= render Alchemy::Admin::TagsAutocomplete.new do %>
-    <%= f.input :tag_list, input_html: { value: f.object.tag_list.join(",") } %>
+<%= turbo_frame_tag @page do %>
+  <%= alchemy_form_for [:admin, @page], url: alchemy.admin_layoutpage_path(@page), class: 'edit_page', remote: false do |f| %>
+    <%= f.input :name, autofocus: true %>
+    <%= render Alchemy::Admin::TagsAutocomplete.new do %>
+      <%= f.input :tag_list, input_html: { value: f.object.tag_list.join(",") } %>
+    <% end %>
+    <%= f.submit Alchemy.t(:save) %>
   <% end %>
-  <%= f.submit Alchemy.t(:save) %>
 <% end %>