alchemy_cms 8.0.0.a → 8.0.0.b

data/app/javascript/alchemy_admin/components/element_select.js

@@ -0,0 +1,43 @@
+import { hightlightTerm } from "alchemy_admin/components/remote_select"
+
+const formatItem = (icon, text) => {
+  return `<div class="element-select-item">${icon} ${text}</div>`
+}
+
+class ElementSelect extends HTMLInputElement {
+  constructor() {
+    super()
+    this.classList.add("alchemy_selectbox")
+  }
+
+  connectedCallback() {
+    const el = this
+    const options = {
+      minimumResultsForSearch: 3,
+      dropdownAutoWidth: true,
+      data() {
+        return { results: JSON.parse(el.dataset.options) }
+      },
+      formatResult: (option, _el, search) => {
+        let text
+
+        if (option.id === "") return option.text
+        if (search.term !== "") {
+          text = hightlightTerm(option.text, search.term)
+        } else {
+          text = option.text
+        }
+
+        return formatItem(option.icon, text)
+      },
+      formatSelection: (option) => {
+        return formatItem(option.icon, option.text)
+      }
+    }
+    $(this).select2(options)
+  }
+}
+
+customElements.define("alchemy-element-select", ElementSelect, {
+  extends: "input"
+})

data/app/javascript/alchemy_admin/components/index.js

@@ -1,5 +1,9 @@
+"use strict"
+// ^ add support for top-level await in Terser
+
 import "alchemy_admin/components/action"
 import "alchemy_admin/components/attachment_select"
+import "alchemy_admin/components/auto_submit"
 import "alchemy_admin/components/button"
 import "alchemy_admin/components/char_counter"
 import "alchemy_admin/components/clipboard_button"
@@ -7,6 +11,7 @@ import "alchemy_admin/components/datepicker"
 import "alchemy_admin/components/dialog_link"
 import "alchemy_admin/components/dom_id_select"
 import "alchemy_admin/components/element_editor"
+import "alchemy_admin/components/element_select"
 import "alchemy_admin/components/elements_window"
 import "alchemy_admin/components/elements_window_handle"
 import "alchemy_admin/components/list_filter"

data/app/javascript/alchemy_admin/components/link_buttons.js

@@ -27,7 +27,7 @@ class LinkButtons extends HTMLElement {
     this.linkTargetField.value = data.target
 
     this.unlinkButton.linked = true
-    this.elementEditor.setDirty()
+    this.setElementDirty()
   }
 
   removeLink() {
@@ -40,7 +40,11 @@ class LinkButtons extends HTMLElement {
     this.linkButton.classList.remove("linked")
     this.unlinkButton.linked = false
 
-    this.elementEditor.setDirty()
+    this.setElementDirty()
+  }
+
+  setElementDirty() {
+    this.elementEditor.setDirty(this)
   }
 
   get linkButton() {

data/app/javascript/alchemy_admin/components/remote_select.js

@@ -1,6 +1,10 @@
 import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { setupSelectLocale } from "alchemy_admin/i18n"
 
+export function hightlightTerm(name, term) {
+  return name.replace(new RegExp(term, "gi"), (match) => `<em>${match}</em>`)
+}
+
 export class RemoteSelect extends AlchemyHTMLElement {
   static properties = {
     allowClear: { default: false },
@@ -148,6 +152,6 @@ export class RemoteSelect extends AlchemyHTMLElement {
    * @private
    */
   _hightlightTerm(name, term) {
-    return name.replace(new RegExp(term, "gi"), (match) => `<em>${match}</em>`)
+    return hightlightTerm(name, term)
   }
 }

data/app/javascript/alchemy_admin/components/tinymce.js

@@ -2,6 +2,9 @@ import "tinymce"
 import { AlchemyHTMLElement } from "alchemy_admin/components/alchemy_html_element"
 import { currentLocale } from "alchemy_admin/i18n"
 
+const DARK_THEME = "alchemy-dark"
+const LIGHT_THEME = "alchemy"
+
 class Tinymce extends AlchemyHTMLElement {
   #min_height = null
 
@@ -32,6 +35,9 @@ class Tinymce extends AlchemyHTMLElement {
       options
     )
     this.tinymceIntersectionObserver.observe(this)
+
+    // Set up theme change listener
+    this._setupThemeChangeListener()
   }
 
   /**
@@ -42,6 +48,9 @@ class Tinymce extends AlchemyHTMLElement {
       this.tinymceIntersectionObserver.disconnect()
     }
 
+    // Remove theme change listener
+    this._removeThemeChangeListener()
+
     tinymce.get(this.editorId)?.remove(this.editorId)
   }
 
@@ -66,24 +75,84 @@ class Tinymce extends AlchemyHTMLElement {
    */
   _initTinymceEditor() {
     tinymce.init(this.configuration).then((editors) => {
-      editors.forEach((editor) => {
-        // mark the editor container as visible
-        // without these correction the editor remains hidden
-        // after a drag and drop action
-        editor.show()
-
-        // remove the spinner after the Tinymce initialized
-        this.getElementsByTagName("alchemy-spinner")[0].remove()
-
-        // event listener to mark the editor as dirty
-        if (this.elementEditor) {
-          editor.on("dirty", () => this.elementEditor.setDirty())
-          editor.on("click", () => this.elementEditor.onClickElement(false))
-        }
-      })
+      editors.forEach((editor) => this._setupEditor(editor))
     })
   }
 
+  /**
+   * Setup editor after initialization
+   * @param {Object} editor - The TinyMCE editor instance
+   * @private
+   */
+  _setupEditor(editor) {
+    // mark the editor container as visible
+    // without these correction the editor remains hidden
+    // after a drag and drop action
+    editor.show()
+
+    // remove the spinner after the Tinymce initialized (only on first init)
+    const spinner = this.getElementsByTagName("alchemy-spinner")[0]
+    if (spinner) {
+      spinner.remove()
+    }
+
+    // event listener to mark the editor as dirty
+    if (this.elementEditor) {
+      editor.on("dirty", (evt) => {
+        this.elementEditor.setDirty(evt.target.editorContainer)
+      })
+      editor.on("click", () => this.elementEditor.onClickElement(false))
+    }
+  }
+
+  /**
+   * Set up listener for OS theme changes
+   * @private
+   */
+  _setupThemeChangeListener() {
+    this.darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+    this.themeChangeHandler = (event) => this._handleThemeChange(event)
+    this.darkModeMediaQuery.addEventListener("change", this.themeChangeHandler)
+  }
+
+  /**
+   * Remove theme change listener
+   * @private
+   */
+  _removeThemeChangeListener() {
+    if (this.darkModeMediaQuery && this.themeChangeHandler) {
+      this.darkModeMediaQuery.removeEventListener(
+        "change",
+        this.themeChangeHandler
+      )
+    }
+  }
+
+  /**
+   * Handle OS theme change and update TinyMCE skin
+   * @param {MediaQueryListEvent} event - The media query change event
+   * @private
+   */
+  _handleThemeChange(event) {
+    const editor = tinymce.get(this.editorId)
+    if (editor) {
+      const skin = event.matches ? DARK_THEME : LIGHT_THEME
+      const content_css = event.matches ? DARK_THEME : LIGHT_THEME
+
+      // Update the skin by reinitializing the editor with new configuration
+      editor.remove()
+      tinymce
+        .init({
+          content_css,
+          ...this.configuration,
+          skin
+        })
+        .then((editors) => {
+          editors.forEach((editor) => this._setupEditor(editor))
+        })
+    }
+  }
+
   get configuration() {
     const customConfig = {}
 
@@ -103,10 +172,12 @@ class Tinymce extends AlchemyHTMLElement {
     })
 
     const config = {
+      content_css: this.preferredTheme,
       ...Alchemy.TinymceDefaults,
       ...customConfig,
       language: currentLocale(),
-      selector: `#${this.editorId}`
+      selector: `#${this.editorId}`,
+      skin: this.preferredTheme
     }
 
     // Tinymce has a height of 400px by default
@@ -117,6 +188,12 @@ class Tinymce extends AlchemyHTMLElement {
     return config
   }
 
+  get preferredTheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? DARK_THEME
+      : LIGHT_THEME
+  }
+
   get editorId() {
     return this.editor.id
   }

data/app/javascript/alchemy_admin/dialog.js

@@ -233,7 +233,7 @@ export class Dialog {
     this.dialog_header = $('<div class="alchemy-dialog-header" />')
     this.dialog_title = $('<div class="alchemy-dialog-title" />')
     this.close_button = $(
-      '<a class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></a>'
+      '<button class="alchemy-dialog-close"><alchemy-icon name="close"></alchemy-icon></button>'
     )
     this.dialog_title.text(this.options.title)
     this.dialog_header.append(this.dialog_title)

data/app/javascript/alchemy_admin/file_editors.js

@@ -16,7 +16,7 @@ class FileEditor {
     this.fileIcon.innerHTML = ""
     this.fileName.innerHTML = ""
     this.deleteLink.classList.add("hidden")
-    this.container.closest("alchemy-element-editor").setDirty()
+    this.container.closest("alchemy-element-editor").setDirty(this.formField)
     return false
   }
 }

data/app/javascript/alchemy_admin/image_loader.js

@@ -1,6 +1,8 @@
 // Shows spinner while loading images and
 // fades the image after its been loaded
 
+import Spinner from "alchemy_admin/spinner"
+
 export default class ImageLoader {
   static init(scope = document) {
     if (typeof scope === "string") {
@@ -15,7 +17,7 @@ export default class ImageLoader {
   constructor(image) {
     this.image = image
     this.parent = image.parentNode
-    this.spinner = new Alchemy.Spinner("small")
+    this.spinner = new Spinner("small")
     this.bind()
   }
 
@@ -28,7 +30,7 @@ export default class ImageLoader {
     if (!force && this.image.complete) return
 
     this.image.classList.add("loading")
-    this.spinner.spin(this.image.parentElement)
+    this.spinner.spin(this.parent)
   }
 
   onLoaded() {

data/app/javascript/alchemy_admin/picture_editors.js

@@ -5,7 +5,7 @@ import { growl } from "alchemy_admin/growler"
 import ImageLoader from "alchemy_admin/image_loader"
 
 const UPDATE_DELAY = 125
-const IMAGE_PLACEHOLDER = '<alchemy-icon name="image"></alchemy-icon>'
+const IMAGE_PLACEHOLDER = '<alchemy-icon name="image" size="xl"></alchemy-icon>'
 const THUMBNAIL_SIZE = "160x120"
 
 export class PictureEditor {
@@ -75,6 +75,7 @@ export class PictureEditor {
         this.image.src = data.url
         this.image.alt = data.alt
         this.image.title = data.title
+        this.setElementDirty()
       })
       .catch((error) => {
         console.error(error.message || error)
@@ -83,8 +84,6 @@ export class PictureEditor {
   }
 
   ensureImage() {
-    if (this.image) return
-
     const img = new Image()
     this.thumbnailBackground.replaceChildren(img)
     this.image = img
@@ -96,7 +95,11 @@ export class PictureEditor {
     this.pictureIdField.value = ""
     this.image = null
     this.cropLink.classList.add("disabled")
-    this.container.closest(".element-editor").setDirty()
+    this.setElementDirty()
+  }
+
+  setElementDirty() {
+    this.container.closest(".element-editor").setDirty(this.container)
   }
 
   updateCropLink() {

data/app/javascript/alchemy_admin/picture_selector.js

@@ -15,13 +15,13 @@ function checkedInputs() {
 }
 
 function editMultiplePicturesUrl(href) {
-  const searchParameters = new URLSearchParams()
+  const url = new URL(href)
+
   checkedInputs().forEach((entry) =>
-    searchParameters.append(entry.name, entry.value)
+    url.searchParams.append(entry.name, entry.value)
   )
-  const url = href + "?" + searchParameters.toString()
 
-  return url
+  return url.toString()
 }
 
 /**

data/app/jobs/alchemy/delete_picture_job.rb

@@ -0,0 +1,12 @@
+module Alchemy
+  class DeletePictureJob < BaseJob
+    queue_as :default
+
+    def perform(picture_id)
+      picture = Alchemy::Picture.find_by(id: picture_id)
+      return if picture.nil? || !picture.deletable?
+
+      picture.destroy
+    end
+  end
+end

data/app/models/alchemy/attachment.rb

@@ -23,19 +23,12 @@ module Alchemy
     include Alchemy::NameConversions
     include Alchemy::Taggable
     include Alchemy::TouchElements
+    include Alchemy::RelatableResource
 
     include Alchemy.storage_adapter.attachment_class_methods
 
     stampable stamper_class_name: Alchemy.user_class_name
 
-    has_many :file_ingredients,
-      class_name: "Alchemy::Ingredients::File",
-      foreign_key: "related_object_id",
-      inverse_of: :related_object
-
-    has_many :elements, through: :file_ingredients
-    has_many :pages, through: :elements
-
     scope :by_file_type, ->(file_type) do
       Alchemy.storage_adapter.by_file_type_scope(file_type)
     end
@@ -86,7 +79,7 @@ module Alchemy
       end
 
       def ransackable_scopes(_auth_object = nil)
-        %i[by_file_type recent last_upload without_tag]
+        %i[by_file_type recent last_upload without_tag deletable]
       end
     end
 

data/app/models/alchemy/element.rb

@@ -37,6 +37,7 @@ module Alchemy
       "compact",
       "deprecated",
       "hint",
+      "icon",
       "ingredients",
       "message",
       "nestable_elements",

data/app/models/alchemy/element_definition.rb

@@ -21,6 +21,7 @@ module Alchemy
     attribute :message
     attribute :warning
     attribute :hint
+    attribute :icon
 
     validates :name,
       presence: true,
@@ -28,6 +29,10 @@ module Alchemy
         with: /\A[a-z_-]+\z/
       }
 
+    validates :icon,
+      format: {with: /\A[\w-]+\z/i},
+      if: -> { icon.is_a?(String) }
+
     delegate :blank?, to: :name
 
     class << self
@@ -151,8 +156,33 @@ module Alchemy
       end
     end
 
+    def icon_file
+      @_icon_file ||= File.read(icon_file_path).html_safe
+    end
+
+    def icon_file_name
+      "#{icon_name}.svg"
+    end
+
+    def icon_name
+      case icon
+      when TrueClass then name
+      when String then icon
+      else
+        "default"
+      end
+    end
+
     private
 
+    def icon_file_path
+      icons_root_path.join("app/assets/images/alchemy/element_icons", icon_file_name)
+    end
+
+    def icons_root_path
+      icon.nil? ? Alchemy::Engine.root : Rails.root
+    end
+
     def hint_translation_scope
       :element_hints
     end

data/app/models/alchemy/ingredient.rb

@@ -54,7 +54,7 @@ module Alchemy
 
         define_method :"#{name}_id=" do |id|
           self.related_object_id = id
-          self.related_object_type = class_name
+          self.related_object_type = id.nil? ? nil : class_name
         end
       end
 

data/app/models/alchemy/language.rb

@@ -25,8 +25,8 @@ require_dependency "alchemy/site"
 module Alchemy
   class Language < BaseRecord
     belongs_to :site
-    has_many :pages, inverse_of: :language
-    has_many :nodes, inverse_of: :language
+    has_many :pages, inverse_of: :language, dependent: :restrict_with_error
+    has_many :nodes, inverse_of: :language, dependent: :restrict_with_error
 
     before_validation :set_locale, if: -> { locale.blank? }
 
@@ -54,11 +54,6 @@ module Alchemy
     after_update :set_pages_language,
       if: :should_set_pages_language?
 
-    before_destroy if: -> { pages.any? } do
-      errors.add(:pages, :still_present)
-      throw(:abort)
-    end
-
     scope :published, -> { where(public: true) }
     scope :with_root_page, -> { joins(:pages).where(Page.table_name => {language_root: true}) }
 

data/app/models/alchemy/page/page_naming.rb

@@ -5,6 +5,7 @@ module Alchemy
     module PageNaming
       extend ActiveSupport::Concern
       include NameConversions
+
       RESERVED_URLNAMES = %w[admin messages new]
 
       included do
@@ -16,8 +17,7 @@ module Alchemy
           presence: true, uniqueness: {scope: [:parent_id], case_sensitive: false, unless: -> { parent_id.nil? }}
         validates :urlname,
           uniqueness: {scope: [:language_id, :layoutpage], if: -> { urlname.present? }, case_sensitive: false},
-          exclusion: {in: RESERVED_URLNAMES},
-          length: {minimum: 3, if: -> { urlname.present? }}
+          exclusion: {in: RESERVED_URLNAMES}
 
         before_save :set_title,
           if: -> { title.blank? }
@@ -73,17 +73,10 @@ module Alchemy
         self[:title] = name
       end
 
-      # Converts the given name into an url friendly string.
-      #
-      # Names shorter than 3 will be filled up with dashes,
-      # so it does not collidate with the language code.
+      # Returns the full nested urlname.
       #
-      def converted_url_name
-        url_name = convert_to_urlname(slug.blank? ? name : slug)
-        url_name.rjust(3, "-")
-      end
-
       def nested_url_name
+        converted_url_name = convert_to_urlname(slug.blank? ? name : slug)
         if parent&.language_root?
           converted_url_name
         else

data/app/models/alchemy/page/page_natures.rb

@@ -13,8 +13,21 @@ module Alchemy
         language.public? && !!public_version&.public?
       end
 
+      # Cache-Control max-age duration in seconds.
+      #
+      # You can set this via the `ALCHEMY_PAGE_CACHE_MAX_AGE` environment variable,
+      # in the `Alchemy.config.page_cache_max_age` configuration option,
+      # or in the pages definition in `config/alchemy/page_layouts.yml` file.
+      #
+      # Defaults to 600 seconds.
       def expiration_time
-        public_until ? public_until - Time.current : nil
+        return 0 unless cache_page?
+
+        if definition.cache.to_s.match?(/\d+/)
+          definition.cache.to_i
+        else
+          Alchemy.config.page_cache.max_age
+        end
       end
 
       def rootpage?
@@ -144,17 +157,9 @@ module Alchemy
       # @returns Boolean
       #
       def cache_page?
-        return false unless caching_enabled?
-
-        page_layout = PageDefinition.get(self.page_layout)
-        page_layout.cache != false && page_layout.searchresults != true
-      end
-
-      private
+        return false if !public? || restricted?
 
-      def caching_enabled?
-        Alchemy.config.cache_pages &&
-          Rails.application.config.action_controller.perform_caching
+        definition.cache != false && definition.searchresults != true
       end
     end
   end

data/app/models/alchemy/page.rb

@@ -115,7 +115,7 @@ module Alchemy
     has_many :site_languages, through: :site, source: :languages
     has_many :folded_pages, dependent: :destroy
     has_many :legacy_urls, class_name: "Alchemy::LegacyPageUrl", dependent: :destroy
-    has_many :nodes, class_name: "Alchemy::Node", inverse_of: :page
+    has_many :nodes, class_name: "Alchemy::Node", inverse_of: :page, dependent: :restrict_with_error
     has_many :versions, class_name: "Alchemy::PageVersion", inverse_of: :page, dependent: :destroy
     has_one :draft_version, -> { drafts }, class_name: "Alchemy::PageVersion"
     has_one :public_version, -> { published }, class_name: "Alchemy::PageVersion", autosave: -> { persisted? }
@@ -132,11 +132,6 @@ module Alchemy
     before_create -> { versions.build },
       if: -> { versions.none? }
 
-    before_destroy if: -> { nodes.any? } do
-      errors.add(:nodes, :still_present)
-      throw(:abort)
-    end
-
     before_save :set_language_code,
       if: -> { language.present? }
 

data/app/models/alchemy/page_definition.rb

@@ -13,7 +13,7 @@ module Alchemy
     attribute :autogenerate, default: []
     attribute :layoutpage, :boolean, default: false
     attribute :unique, :boolean, default: false
-    attribute :cache, :boolean, default: true
+    attribute :cache, default: true
     attribute :insert_elements_at, :string, default: "bottom"
     attribute :fixed_attributes, default: {}
     attribute :searchable, :boolean, default: true

data/app/models/alchemy/picture.rb

@@ -32,14 +32,8 @@ module Alchemy
     include Alchemy::NameConversions
     include Alchemy::Taggable
     include Alchemy::TouchElements
+    include Alchemy::RelatableResource
 
-    has_many :picture_ingredients,
-      class_name: "Alchemy::Ingredients::Picture",
-      foreign_key: "related_object_id",
-      inverse_of: :related_object
-
-    has_many :elements, through: :picture_ingredients
-    has_many :pages, through: :elements
     has_many :descriptions, class_name: "Alchemy::PictureDescription", dependent: :destroy
 
     accepts_nested_attributes_for :descriptions, allow_destroy: true, reject_if: ->(attr) { attr[:text].blank? }
@@ -86,15 +80,16 @@ module Alchemy
 
     scope :named, ->(name) { where("#{table_name}.name LIKE ?", "%#{name}%") }
     scope :recent, -> { where("#{table_name}.created_at > ?", Time.current - 24.hours).order(:created_at) }
-    scope :deletable,
-      -> {
-        where("#{table_name}.id NOT IN (SELECT related_object_id FROM alchemy_ingredients WHERE related_object_type = 'Alchemy::Picture')")
-      }
     scope :without_tag, -> { left_outer_joins(:taggings).where(gutentag_taggings: {id: nil}) }
     scope :by_file_format, ->(file_format) do
       Alchemy.storage_adapter.by_file_format_scope(file_format)
     end
 
+    # Case insensitive Ransack searching and sorting for name attribute
+    ransacker :name, type: :string do
+      arel_table[:name].lower
+    end
+
     # Class methods
 
     class << self
@@ -251,12 +246,6 @@ module Alchemy
       pages.any? && pages.not_restricted.blank?
     end
 
-    # Returns true if picture is not assigned to any Picture ingredient.
-    #
-    def deletable?
-      picture_ingredients.empty?
-    end
-
     def image_file_name
       Alchemy.storage_adapter.image_file_name(self)
     end

data/app/models/alchemy/site/layout.rb

@@ -3,6 +3,7 @@
 module Alchemy
   module Site::Layout
     extend ActiveSupport::Concern
+
     SITE_DEFINITIONS_FILE = Rails.root.join("config/alchemy/site_layouts.yml")
 
     module ClassMethods