alchemy_cms 8.0.0.a → 8.0.0.c

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

@@ -21,10 +21,7 @@ class Datepicker extends AlchemyHTMLElement {
       await import(`flatpickr/${locale}.js`)
     }
 
-    this.flatpickr = flatpickr(
-      this.getElementsByTagName("input")[0],
-      this.flatpickrOptions
-    )
+    this.flatpickr = flatpickr(this.inputField, this.flatpickrOptions)
   }
 
   disconnected() {
@@ -43,7 +40,9 @@ class Datepicker extends AlchemyHTMLElement {
       noCalendar: this.inputType === "time",
       time_24hr: translate("formats.time_24hr"),
       onValueUpdate(_selectedDates, _dateStr, instance) {
-        instance.element.closest("alchemy-element-editor")?.setDirty()
+        instance.element
+          .closest("alchemy-element-editor")
+          ?.setDirty(this.inputField)
       }
     }
 
@@ -53,6 +52,10 @@ class Datepicker extends AlchemyHTMLElement {
 
     return options
   }
+
+  get inputField() {
+    return this.querySelector("input")
+  }
 }
 
 customElements.define("alchemy-datepicker", Datepicker)

data/app/javascript/alchemy_admin/components/element_editor/delete_element_button.js

@@ -1,3 +1,4 @@
+import ajax from "alchemy_admin/utils/ajax"
 import { removeTab } from "alchemy_admin/fixed_elements"
 import { growl } from "alchemy_admin/growler"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
@@ -12,8 +13,8 @@ export class DeleteElementButton extends HTMLElement {
   async handleEvent() {
     const confirmed = await openConfirmDialog(this.message)
     if (confirmed) {
-      const response = await fetch(this.url, { method: "DELETE" })
-      this.#removeElement(await response.json())
+      const response = await ajax("DELETE", this.url)
+      this.#removeElement(response.data)
     }
   }
 

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

@@ -20,8 +20,10 @@ export class ElementEditor extends HTMLElement {
     this.addEventListener("alchemy:element-update-title", this)
     // We use of @rails/ujs for Rails remote forms
     this.addEventListener("ajax:complete", this)
-    // Dirty observer
-    this.addEventListener("change", this)
+
+    // Dirty observer still needs to be jQuery
+    // in order to support select2.
+    $(this).on("change", this.onChange)
 
     this.header?.addEventListener("dblclick", () => {
       this.toggle()
@@ -78,20 +80,22 @@ export class ElementEditor extends HTMLElement {
           this.setTitle(event.detail.title)
         }
         break
-      case "change":
-        // SortableJS fires a native change event :/
-        // and we do not want to set the element editor dirty
-        // when this happens
-        if (event.target.classList.contains("nested-elements")) {
-          return
-        }
-        event.stopPropagation()
-        event.target.classList.add("dirty")
-        this.setDirty()
-        break
     }
   }
 
+  onChange(event) {
+    const target = event.target
+    // SortableJS fires a native change event :/
+    // and we do not want to set the element editor dirty
+    // when this happens
+    if (target.classList.contains("nested-elements")) {
+      return
+    }
+    this.setDirty(target)
+    event.stopPropagation()
+    return false
+  }
+
   /**
    * Scrolls to and highlights element
    * Expands if collapsed
@@ -227,11 +231,17 @@ export class ElementEditor extends HTMLElement {
 
   /**
    * Sets the element into dirty (unsafed) state
+   * @param {HTMLElement} editor
    */
-  setDirty() {
+  setDirty(editor) {
     if (this.hasEditors) {
       this.dirty = true
-      window.onbeforeunload = (event) => event.preventDefault()
+
+      if (!window.onbeforeunload) {
+        window.onbeforeunload = (event) => event.preventDefault()
+      }
+
+      editor?.closest(".ingredient-editor")?.classList.add("dirty")
     }
   }
 

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,8 +29,14 @@ module Alchemy
         with: /\A[a-z_-]+\z/
       }
 
+    validates :icon,
+      format: {with: /\A[\w-]+\z/i},
+      if: -> { icon.is_a?(String) }
+
     delegate :blank?, to: :name
 
+    DEFAULT_ICON_NAME = "layout-bottom-2-line"
+
     class << self
       # Returns the definitions from elements.yml file.
       #
@@ -151,8 +158,32 @@ 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_ICON_NAME
+      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/ingredients/boolean.rb

@@ -6,7 +6,8 @@ module Alchemy
     #
     class Boolean < Alchemy::Ingredient
       def value
-        ActiveRecord::Type::Boolean.new.cast(self[:value])
+        val = self[:value].nil? ? definition.default : self[:value]
+        ActiveRecord::Type::Boolean.new.cast(val)
       end
 
       # The localized value

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