alchemy_cms 7.0.0.pre.a → 7.0.0.pre.b

data/package/src/datepicker.js

@@ -24,6 +24,7 @@ export default function Datepicker(scope = document) {
         altInput: true,
         altFormat: Alchemy.t(`formats.${type}`),
         altInputClass: "flatpickr-input",
+        dateFormat: "Z",
         enableTime: /time/.test(type),
         noCalendar: type === "time",
         time_24hr: Alchemy.t("formats.time_24hr"),

data/package/src/tinymce.js

@@ -0,0 +1,142 @@
+// Alchemy Tinymce wrapper
+//
+
+let tinymceCustomConfigs = {}
+let tinymceIntersectionObserver = null
+
+// Returns default config for a tinymce editor.
+function getDefaultConfig(editorId) {
+  const config = Alchemy.TinymceDefaults
+  config.language = Alchemy.locale
+  config.selector = `#${editorId}`
+  config.init_instance_callback = initInstanceCallback
+  return config
+}
+
+// Returns configuration for given custom tinymce editor selector.
+//
+// It uses the +.getDefaultConfig+ and merges the custom parts.
+function getConfig(editorId) {
+  const editorConfig = tinymceCustomConfigs[editorId] || {}
+  return { ...getDefaultConfig(editorId), ...editorConfig }
+}
+
+// create intersection observer and register textareas to be initialized when
+// they are visible
+function initEditors(ids) {
+  initializeIntersectionObserver()
+
+  ids.forEach((id) => {
+    const editorId = `tinymce_${id}`
+    const textarea = document.getElementById(editorId)
+
+    if (textarea) {
+      tinymceIntersectionObserver.observe(textarea)
+    } else {
+      console.warn(`Could not initialize TinyMCE for textarea#${editorId}!`)
+    }
+  })
+}
+
+// initialize IntersectionObserver
+// the observer will initialize Tinymce if the textarea becomes visible
+function initializeIntersectionObserver() {
+  if (tinymceIntersectionObserver !== null) {
+    tinymceIntersectionObserver.disconnect()
+  }
+
+  const observerCallback = (entries, observer) => {
+    entries.forEach((entry) => {
+      if (entry.intersectionRatio > 0) {
+        initTinymceEditor(entry.target)
+        // disable observer after the Tinymce was initialized
+        observer.unobserve(entry.target)
+      }
+    })
+  }
+  const options = {
+    root: Alchemy.ElementEditors.element_area.get(0),
+    rootMargin: "0px",
+    threshold: [0.05]
+  }
+
+  tinymceIntersectionObserver = new IntersectionObserver(
+    observerCallback,
+    options
+  )
+}
+
+// Initializes one specific TinyMCE editor
+function initTinymceEditor(textarea) {
+  const editorId = textarea.id
+  const config = getConfig(editorId)
+
+  // remove editor instance, if already initialized
+  removeEditor(editorId)
+
+  if (config) {
+    const spinner = new Alchemy.Spinner("small")
+    textarea.closest(".tinymce_container").prepend(spinner.spin().el.get(0))
+    tinymce.init(config)
+  } else {
+    console.warn("No tinymce configuration found for", id)
+  }
+}
+
+// Gets called after an editor instance gets initialized
+function initInstanceCallback(editor) {
+  const element = document.getElementById(editor.id).closest(".element-editor")
+  element.getElementsByClassName("spinner").item(0).remove()
+  editor.on("dirty", function () {
+    Alchemy.setElementDirty(element)
+  })
+  editor.on("click", function (event) {
+    event.target = element
+    Alchemy.ElementEditors.onClickElement(event)
+  })
+}
+
+function removeEditor(editorId) {
+  const editorElement = document.getElementById(editorId)
+  if (tinymceIntersectionObserver && editorElement) {
+    tinymceIntersectionObserver.unobserve(editorElement)
+  }
+
+  const editor = tinymce.get(editorId)
+  if (editor) {
+    editor.remove()
+  }
+}
+
+export default {
+  // Initializes all TinyMCE editors with given ids
+  //
+  // @param ids [Array]
+  //   - Editor ids that should be initialized.
+  init(ids) {
+    initEditors(ids)
+  },
+
+  // Initializes TinyMCE editor with given options
+  initWith(options) {
+    tinymce.init({ ...Alchemy.TinymceDefaults, ...options })
+  },
+
+  // Removes the TinyMCE editor from given dom ids.
+  remove(ids) {
+    ids.forEach((id) => removeEditor(`tinymce_${id}`))
+  },
+
+  // Remove all tinymce instances for given selector
+  removeFrom(selector) {
+    // the selector is a jQuery selector - it has to be refactor if we taking care of the calling methods
+    $(selector).each(function (element) {
+      removeEditor(element.id)
+    })
+  },
+
+  // set tinymce configuration for a given selector key
+  setCustomConfig(key, configuration) {
+    tinymceCustomConfigs[key] = configuration
+  }
+}

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alchemy_cms/admin",
-  "version": "7.0.0-a",
+  "version": "7.0.0-b",
   "description": "AlchemyCMS",
   "browser": "package/dist/admin.js",
   "files": [
@@ -33,7 +33,7 @@
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
     "babel-jest": "^29.0.1",
-    "esbuild": "^0.17.5",
+    "esbuild": "^0.18.4",
     "jest": "^25.2.7",
     "prettier": "^2.0.2",
     "xhr-mock": "^2.5.1"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: alchemy_cms
 version: !ruby/object:Gem::Version
-  version: 7.0.0.pre.a
+  version: 7.0.0.pre.b
 platform: ruby
 authors:
 - Thomas von Deyen
@@ -13,7 +13,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-30 00:00:00.000000000 Z
+date: 2023-06-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionmailer
@@ -509,6 +509,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '2.5'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
 - !ruby/object:Gem::Dependency
   name: capybara
   requirement: !ruby/object:Gem::Requirement
@@ -692,6 +706,7 @@ files:
 - ".github/PULL_REQUEST_TEMPLATE.md"
 - ".github/workflows/brakeman-analysis.yml"
 - ".github/workflows/ci.yml"
+- ".github/workflows/lint.yml"
 - ".github/workflows/stale.yml"
 - ".gitignore"
 - ".hound.yml"
@@ -699,6 +714,7 @@ files:
 - ".prettierrc"
 - ".rspec"
 - ".rubocop.yml"
+- ".standard.yml"
 - ".yardopts"
 - CHANGELOG.md
 - CODE_OF_CONDUCT.md
@@ -743,7 +759,6 @@ files:
 - app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee
 - app/assets/javascripts/alchemy/alchemy.spinner.js
 - app/assets/javascripts/alchemy/alchemy.string_extension.js.coffee
-- app/assets/javascripts/alchemy/alchemy.tinymce.js.coffee
 - app/assets/javascripts/alchemy/alchemy.tooltips.coffee
 - app/assets/javascripts/alchemy/alchemy.uploader.js.coffee
 - app/assets/javascripts/alchemy/menubar.js.coffee
@@ -817,6 +832,21 @@ files:
 - app/assets/stylesheets/tinymce/skins/alchemy/img/object.gif
 - app/assets/stylesheets/tinymce/skins/alchemy/img/trans.gif
 - app/assets/stylesheets/tinymce/skins/alchemy/skin.min.css.scss
+- app/components/alchemy/ingredients/audio_view.rb
+- app/components/alchemy/ingredients/base_view.rb
+- app/components/alchemy/ingredients/boolean_view.rb
+- app/components/alchemy/ingredients/datetime_view.rb
+- app/components/alchemy/ingredients/file_view.rb
+- app/components/alchemy/ingredients/headline_view.rb
+- app/components/alchemy/ingredients/html_view.rb
+- app/components/alchemy/ingredients/link_view.rb
+- app/components/alchemy/ingredients/node_view.rb
+- app/components/alchemy/ingredients/page_view.rb
+- app/components/alchemy/ingredients/picture_view.rb
+- app/components/alchemy/ingredients/richtext_view.rb
+- app/components/alchemy/ingredients/select_view.rb
+- app/components/alchemy/ingredients/text_view.rb
+- app/components/alchemy/ingredients/video_view.rb
 - app/controllers/alchemy/admin/attachments_controller.rb
 - app/controllers/alchemy/admin/base_controller.rb
 - app/controllers/alchemy/admin/clipboard_controller.rb
@@ -931,7 +961,6 @@ files:
 - app/models/concerns/alchemy/dom_ids.rb
 - app/models/concerns/alchemy/picture_thumbnails.rb
 - app/models/concerns/alchemy/touch_elements.rb
-- app/presenters/alchemy/picture_view.rb
 - app/serializers/alchemy/attachment_serializer.rb
 - app/serializers/alchemy/base_serializer.rb
 - app/serializers/alchemy/element_serializer.rb
@@ -1034,7 +1063,6 @@ files:
 - app/views/alchemy/admin/pages/_sitemap.html.erb
 - app/views/alchemy/admin/pages/_table.html.erb
 - app/views/alchemy/admin/pages/_table_row.html.erb
-- app/views/alchemy/admin/pages/_tinymce_custom_config.html.erb
 - app/views/alchemy/admin/pages/_toolbar.html.erb
 - app/views/alchemy/admin/pages/configure.html.erb
 - app/views/alchemy/admin/pages/edit.html.erb
@@ -1165,6 +1193,8 @@ files:
 - babel.config.js
 - bin/rails
 - bin/rspec
+- bin/setup
+- bin/start
 - config/alchemy/config.yml
 - config/alchemy/modules.yml
 - config/brakeman.ignore
@@ -1178,6 +1208,7 @@ files:
 - config/spring.rb
 - db/migrate/20230121212637_alchemy_six_point_one.rb
 - db/migrate/20230123112425_add_searchable_to_alchemy_pages.rb
+- db/migrate/20230505132743_add_indexes_to_alchemy_pictures.rb
 - lib/alchemy.rb
 - lib/alchemy/ability_helper.rb
 - lib/alchemy/admin/locale.rb
@@ -1312,6 +1343,7 @@ files:
 - package/src/page_sorter.js
 - package/src/picture_editors.js
 - package/src/sitemap.js
+- package/src/tinymce.js
 - package/src/translations.js
 - package/src/utils/__tests__/ajax.spec.js
 - package/src/utils/__tests__/events.spec.js
@@ -1391,7 +1423,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 2.5.0
+      version: 3.0.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">"
@@ -1399,7 +1431,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements:
 - ImageMagick (libmagick), v6.6 or greater.
-rubygems_version: 3.4.6
+rubygems_version: 3.4.12
 signing_key:
 specification_version: 4
 summary: A powerful, userfriendly and flexible CMS for Rails

data/app/assets/javascripts/alchemy/alchemy.tinymce.js.coffee

@@ -1,93 +0,0 @@
-# Alchemy Tinymce wrapper
-#
-$.extend Alchemy.Tinymce,
-
-  customConfigs: {}
-
-  # Returns default config for a tinymce editor.
-  #
-  getDefaultConfig: (id) ->
-    config = @defaults
-    config.language = Alchemy.locale
-    config.selector = "#tinymce_#{id}"
-    config.init_instance_callback = @initInstanceCallback
-    return config
-
-  # Returns configuration for given custom tinymce editor selector.
-  #
-  # It uses the +.getDefaultConfig+ and merges the custom parts.
-  #
-  getConfig: (id, selector) ->
-    editor_config = @customConfigs[selector]
-    if editor_config
-      $.extend({}, @getDefaultConfig(id), editor_config)
-    else
-      @getDefaultConfig(id)
-
-  # Initializes all TinyMCE editors with given ids
-  #
-  # @param ids [Array]
-  #   - Editor ids that should be initialized.
-  #
-  init: (ids) ->
-    for id in ids
-      @initEditor(id)
-
-  # Initializes TinyMCE editor with given options
-  #
-  initWith: (options) ->
-    tinymce.init $.extend({}, @defaults, options)
-    return
-
-  # Initializes one specific TinyMCE editor
-  #
-  # @param id [Number]
-  #   - Editor id that should be initialized.
-  #
-  initEditor: (id) ->
-    editor_id = "tinymce_#{id}"
-    textarea = $("##{editor_id}")
-    editor = tinymce.get(editor_id)
-    # remove editor instance, if already initialized
-    editor.remove() if editor
-    if textarea.length == 0
-      console.warn "Could not initialize TinyMCE for textarea#tinymce_#{id}!"
-      return
-    config = @getConfig(id, textarea[0].classList[1])
-    if config
-      spinner = new Alchemy.Spinner('small')
-      textarea.closest('.tinymce_container').prepend spinner.spin().el
-      tinymce.init(config)
-    else
-      console.warn('No tinymce configuration found for', id)
-
-  # Gets called after an editor instance gets intialized
-  #
-  initInstanceCallback: (editor) ->
-    $this = $("##{editor.id}")
-    element = $this.closest('.element-editor')
-    element.find('.spinner').remove()
-    editor.on 'dirty', ->
-      Alchemy.setElementDirty(element)
-      return
-    editor.on 'click', (event) ->
-      event.target = element[0]
-      Alchemy.ElementEditors.onClickElement(event)
-      return
-    return
-
-  # Removes the TinyMCE editor from given dom ids.
-  #
-  remove: (ids) ->
-    for id in ids
-      editor = tinymce.get("tinymce_#{id}")
-      if editor
-        editor.remove()
-
-  # Remove all tinymce instances for given selector
-  removeFrom: (selector) ->
-    $(selector).each ->
-      elem = tinymce.get(this.id)
-      elem.remove() if elem
-      return
-    return

data/app/presenters/alchemy/picture_view.rb

@@ -1,88 +0,0 @@
-# frozen_string_literal: true
-
-module Alchemy
-  # Renders a picture ingredient view
-  class PictureView
-    include ActionView::Helpers::AssetTagHelper
-    include ActionView::Helpers::UrlHelper
-    include Rails.application.routes.url_helpers
-
-    attr_reader :ingredient, :html_options, :options, :picture
-
-    DEFAULT_OPTIONS = {
-      show_caption: true,
-      disable_link: false,
-      srcset: [],
-      sizes: [],
-    }.with_indifferent_access
-
-    def initialize(ingredient, options = {}, html_options = {})
-      @ingredient = ingredient
-      @options = DEFAULT_OPTIONS.merge(ingredient.settings).merge(options || {})
-      @html_options = html_options || {}
-      @picture = ingredient.picture
-    end
-
-    def render
-      return if picture.blank?
-
-      output = caption ? img_tag + caption : img_tag
-
-      if is_linked?
-        output = link_to(output, url_for(ingredient.link), {
-          title: ingredient.link_title.presence,
-          target: ingredient.link_target == "blank" ? "_blank" : nil,
-          data: { link_target: ingredient.link_target.presence },
-        })
-      end
-
-      if caption
-        content_tag(:figure, output, { class: ingredient.css_class.presence }.merge(html_options))
-      else
-        output
-      end
-    end
-
-    def caption
-      return unless show_caption?
-
-      @_caption ||= content_tag(:figcaption, ingredient.caption)
-    end
-
-    def src
-      ingredient.picture_url(options.except(*DEFAULT_OPTIONS.keys))
-    end
-
-    def img_tag
-      @_img_tag ||= image_tag(
-        src, {
-          alt: alt_text,
-          title: ingredient.title.presence,
-          class: caption ? nil : ingredient.css_class.presence,
-          srcset: srcset.join(", ").presence,
-          sizes: options[:sizes].join(", ").presence,
-        }.merge(caption ? {} : html_options)
-      )
-    end
-
-    def show_caption?
-      options[:show_caption] && ingredient.caption.present?
-    end
-
-    def is_linked?
-      !options[:disable_link] && ingredient.link.present?
-    end
-
-    def srcset
-      options[:srcset].map do |size|
-        url = ingredient.picture_url(size: size)
-        width, height = size.split("x")
-        width.present? ? "#{url} #{width}w" : "#{url} #{height}h"
-      end
-    end
-
-    def alt_text
-      ingredient.alt_tag.presence || html_options.delete(:alt) || ingredient.picture.name&.humanize
-    end
-  end
-end

data/app/views/alchemy/admin/pages/_tinymce_custom_config.html.erb

@@ -1,10 +0,0 @@
-<script>
-  // Populate custom tinymce configurations
-  <% Alchemy::Tinymce.custom_config_ingredients(@page).each do |ingredient| %>
-  Alchemy.Tinymce.customConfigs["<%= ingredient['element'] %>_<%= ingredient['role'] %>"] = {
-    <% ingredient.fetch('settings', {}).fetch('tinymce', {}).each do |k, v| %>
-    <%= k %>: <%== v.to_json %>,
-    <% end %>
-  };
-  <% end %>
-</script>