katalyst-content 0.2.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4834b72d776bd56e8a930a70c5f60880ffee763fda2aa4cb071c4584091ac8fe
-  data.tar.gz: 5987c1c93e5731c9875ba820560e2167fdea33b2e6e3e26a1edb1dfb4464b2b4
+  metadata.gz: 5d759a4e97d9609138eba1c1d03ad9a081cc1badb65be59b5b200a23665909e7
+  data.tar.gz: 848034cbe45b3fb9c0550bd452c5424cccdf5c4a7e4e9b819abaef0bed9b24a3
 SHA512:
-  metadata.gz: bf0e0825807b3736ccdfcfd49b7e1c09a4a9b41878fbb5d6d3c582dd9ef525069f131b960e927e0358647526c94f010b99836676a02cb455139eaba1e30b30d6
-  data.tar.gz: ef847109661189423b6ce3de4034531e1203c17164dd92f7622ad97dd06d39a7e9c854e8595cbde9abe1dd609331ecb4d284a15f2da5b318112b3a075f87651a
+  metadata.gz: 64f111753041dd647e73d863e011b23c3507cb930dcac40dd55f991d422802896cc6d515e998adf31be3a07962a38ac8b22e16490b3a56fcb3638441bd8d5d26
+  data.tar.gz: 24e97c6e52f38944a1947b50cb09347c3e5ebd457bcdb7bff0aff70aeac8412ed0a1ba8cfc85606d26886f30499c3981c4d4de414d2651c38d08f4104b362e79

data/app/assets/javascripts/controllers/content/editor/container_controller.js

@@ -26,6 +26,36 @@ export default class ContainerController extends Controller {
     this.container.reset();
   }
 
+  drop(event) {
+    this.container.reindex(); // set indexes before calculating previous
+
+    const item = getEventItem(event);
+    const previous = item.previousItem;
+
+    let delta = 0;
+    if (previous === undefined) {
+      // if previous does not exist, set depth to 0
+      delta = -item.depth;
+    } else if (
+      previous.isLayout &&
+      item.nextItem &&
+      item.nextItem.depth > previous.depth
+    ) {
+      // if previous is a layout and next is a child of previous, make item a child of previous
+      delta = previous.depth - item.depth + 1;
+    } else {
+      // otherwise, make item a sibling of previous
+      delta = previous.depth - item.depth;
+    }
+
+    item.traverse((child) => {
+      child.depth += delta;
+    });
+
+    this.#update();
+    event.preventDefault();
+  }
+
   remove(event) {
     const item = getEventItem(event);
 
@@ -38,7 +68,9 @@ export default class ContainerController extends Controller {
   nest(event) {
     const item = getEventItem(event);
 
-    item.nest();
+    item.traverse((child) => {
+      child.depth += 1;
+    });
 
     this.#update();
     event.preventDefault();
@@ -47,7 +79,9 @@ export default class ContainerController extends Controller {
   deNest(event) {
     const item = getEventItem(event);
 
-    item.deNest();
+    item.traverse((child) => {
+      child.depth -= 1;
+    });
 
     this.#update();
     event.preventDefault();

data/app/assets/javascripts/controllers/content/editor/list_controller.js

@@ -46,7 +46,7 @@ export default class ListController extends Controller {
   }
 
   drop(event) {
-    const item = this.dragItem();
+    let item = this.dragItem();
 
     if (!item) return;
 
@@ -55,17 +55,18 @@ export default class ListController extends Controller {
     swap(this.dropTarget(event.target), item);
 
     if (item.dataset.hasOwnProperty("newItem")) {
+      const placeholder = item;
       const template = document.createElement("template");
       template.innerHTML = event.dataTransfer.getData("text/html");
-      const newItem = template.content.querySelector("li");
+      item = template.content.querySelector("li");
 
-      this.element.replaceChild(newItem, item);
+      this.element.replaceChild(item, placeholder);
       setTimeout(() =>
-        newItem.querySelector("[role='button'][value='edit']").click()
+        item.querySelector("[role='button'][value='edit']").click()
       );
     }
 
-    this.reindex();
+    this.dispatch("drop", { target: item, bubbles: true, prefix: "content" });
   }
 
   dragend() {

data/app/assets/javascripts/controllers/content/editor/trix_controller.js

@@ -25,7 +25,7 @@ delete Trix.config.blockAttributes.heading1;
  * input does not permit. Uses a permissive regex pattern which is not suitable
  * for untrusted use cases.
  */
-const LINK_PATTERN = "(https?|/|#).*?";
+const LINK_PATTERN = "(https?|mailto:|tel:|/|#).*?";
 
 /**
  * Customize default toolbar:
@@ -76,3 +76,13 @@ Trix.config.toolbar.getDefaultHTML = () => {
 </div>
 `;
 };
+
+/**
+ * If the <trix-editor> element is in the HTML when Trix loads, then Trix will have already injected the toolbar content
+ * before our code gets a chance to run. Fix that now.
+ *
+ * Note: in Trix 2 this is likely to no longer be necessary.
+ */
+document.querySelectorAll("trix-toolbar").forEach((e) => {
+  e.innerHTML = Trix.config.toolbar.getDefaultHTML();
+});

data/app/assets/javascripts/utils/content/editor/item.js

@@ -131,7 +131,7 @@ export default class Item {
 
     callback(this);
     this.#traverseCollapsed(callback);
-    expanded.forEach((item) => this.#traverseCollapsed(item));
+    expanded.forEach((item) => item.#traverseCollapsed(callback));
   }
 
   /**
@@ -148,16 +148,6 @@ export default class Item {
     });
   }
 
-  /**
-   * Increase the depth of this item and its descendants.
-   * If this causes it to become a child of a collapsed item, then collapse this item.
-   */
-  nest() {
-    this.traverse((child) => {
-      child.depth += 1;
-    });
-  }
-
   /**
    * Move the given item into this element's hidden children list.
    * Assumes the list already exists.
@@ -168,15 +158,6 @@ export default class Item {
     this.#childrenListElement.appendChild(item.node);
   }
 
-  /**
-   * Decrease the depth of this item (and its descendants).
-   */
-  deNest() {
-    this.traverse((child) => {
-      child.depth -= 1;
-    });
-  }
-
   /**
    * Collapses visible (logical) children into this element's hidden children
    * list, creating it if it doesn't already exist.

data/app/assets/javascripts/utils/content/editor/rules-engine.js

@@ -59,7 +59,7 @@ export default class RulesEngine {
    * First item can't have a parent, so its depth should always be 0
    */
   firstItemDepthZero(item) {
-    if (item.index === 0 && !item.depth === 0) {
+    if (item.index === 0 && item.depth !== 0) {
       this.debug(`enforce depth on item ${item.index}: ${item.depth} => 0`);
 
       item.depth = 0;

data/app/assets/stylesheets/katalyst/content/editor/_new-items.scss

@@ -10,6 +10,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    text-align: center;
     transform: translate3d(0, 0, 0);
     cursor: grab;
     background: white;

data/app/controllers/katalyst/content/items_controller.rb

@@ -13,6 +13,10 @@ module Katalyst
         render locals: { item: @container.items.build(item_params) }
       end
 
+      def edit
+        render locals: { item: @item }
+      end
+
       def create
         @item = item = @container.items.build(item_params)
         if item.save
@@ -22,10 +26,6 @@ module Katalyst
         end
       end
 
-      def edit
-        render locals: { item: @item }
-      end
-
       def update
         @item.attributes = item_params
 

data/app/helpers/katalyst/content/editor/container.rb

@@ -6,6 +6,7 @@ module Katalyst
       class Container < Base
         ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
           submit->#{CONTAINER_CONTROLLER}#reindex
+          content:drop->#{CONTAINER_CONTROLLER}#drop
           content:reindex->#{CONTAINER_CONTROLLER}#reindex
           content:reset->#{CONTAINER_CONTROLLER}#reset
         ACTIONS
@@ -13,12 +14,17 @@ module Katalyst
         def build(options)
           form_with(model: container, **default_options(id: container_form_id, **options)) do |form|
             concat hidden_input
+            concat errors
             concat(capture { yield form })
           end
         end
 
         private
 
+        def errors
+          Editor::Errors.new(self, container).build
+        end
+
         # Hidden input ensures that if the container is empty then the controller
         # receives an empty array.
         def hidden_input

data/app/helpers/katalyst/content/editor/errors.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module Editor
+      class Errors < Base
+        def build(**options)
+          turbo_frame_tag dom_id(container, :errors) do
+            next unless container.errors.any?
+
+            tag.div(class: "content-errors", **options) do
+              tag.h2("Errors in content") +
+                tag.ul(class: "errors") do
+                  container.errors.each do |error|
+                    concat(tag.li(error.full_message))
+                  end
+                end
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/helpers/katalyst/content/editor_helper.rb

@@ -25,6 +25,12 @@ module Katalyst
         Editor::List.new(self, container).items(item)
       end
 
+      # Generate a turbo stream fragment that will show structural errors to the user.
+      def content_editor_errors(container:, **options)
+        turbo_stream.replace(dom_id(container, :errors),
+                             Editor::Errors.new(self, container).build(**options))
+      end
+
       # Gene
       def content_editor_new_item(item:, container: item.container, **options, &block)
         Editor::NewItem.new(self, container).build(item, **options, &block)

data/app/models/concerns/katalyst/content/container.rb

@@ -95,6 +95,11 @@ module Katalyst
         self
       end
 
+      # Required for testing items validation
+      def items_attributes
+        draft_version&.nodes&.as_json
+      end
+
       # Updates the current draft version with new structure. Attributes should be structural information about the
       # items, e.g. `{index => {id:, depth:}` or `[{id:, depth:}]`.
       #

data/app/models/concerns/katalyst/content/version.rb

@@ -13,6 +13,12 @@ module Katalyst
         # rubocop:enable Rails/ReflectionClassName
 
         attribute :nodes, Katalyst::Content::Types::NodesType.new, default: -> { [] }
+
+        validate :ensure_items_exists
+      end
+
+      def ensure_items_exists
+        parent.errors.add(:items, :missing_item) unless items.all?(&:present?)
       end
 
       def items
@@ -22,10 +28,10 @@ module Katalyst
 
         items = parent.items.where(id: nodes.map(&:id)).index_by(&:id)
         nodes.map do |node|
-          item       = items[node.id]
-          item.index = node.index
-          item.depth = node.depth
-          item
+          items[node.id]&.tap do |item|
+            item.index = node.index
+            item.depth = node.depth
+          end
         end
       end
 

data/app/models/katalyst/content/figure.rb

@@ -20,7 +20,7 @@ module Katalyst
         # if image has changed, duplicate the change, otherwise attach the existing blob
         if source.attachment_changes["image"]
           self.image = source.attachment_changes["image"].attachable
-        elsif source.image.attached?
+        elsif source.image.attached? && !source.image.marked_for_destruction?
           image.attach(source.image.blob)
         end
       end

data/app/models/katalyst/content/item.rb

@@ -11,7 +11,7 @@ module Katalyst
       belongs_to :container, polymorphic: true
 
       validates :heading, presence: true
-      validates :background, presence: true, inclusion: { in: config.backgrounds }
+      validates :background, presence: true, inclusion: { in: config.backgrounds }, if: :validate_background?
 
       after_initialize :initialize_tree
 
@@ -43,6 +43,10 @@ module Katalyst
         self.parent   ||= nil
         self.children ||= []
       end
+
+      def validate_background?
+        true
+      end
     end
   end
 end

data/app/views/katalyst/content/columns/_column.html.erb

@@ -8,7 +8,7 @@
       <%= render_content_items items %>
     </div>
     <div class="column">
-      <%= render_content_items [last] %>
+      <%= render_content_items [last] if last %>
     </div>
   </div>
 <% end %>

data/app/views/katalyst/content/figures/_figure.html+form.erb

@@ -2,16 +2,10 @@
   <%= render "hidden_fields", form: form %>
   <%= render "form_errors", form: form %>
 
-  <%= content_editor_image_field item: figure, method: :image do |builder| %>
-    <div class="field">
-      <%= form.label :image %>
-      <div>
-        <%= builder.preview class: "image-wrapper" %>
-      </div>
-      <%= form.file_field :image, **builder.file_input_options %>
-      <hint><%= builder.hint_text %></hint>
-    </div>
-  <% end %>
+  <div class="field">
+    <%= form.label :image %>
+    <%= form.file_field :image %>
+  </div>
 
   <div class="field">
     <%= form.label :heading %>

data/config/locales/en.yml

@@ -4,6 +4,8 @@ en:
       katalyst/content/figure:
         heading: "Alternate text"
     errors:
+      messages:
+        missing_item: Content items are missing or invalid
       models:
         katalyst/content/item:
           content_type_invalid: file type not supported

data/lib/katalyst/content/version.rb

@@ -2,6 +2,6 @@
 
 module Katalyst
   module Content
-    VERSION = "0.2.0"
+    VERSION = "0.2.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-content
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.1
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-11 00:00:00.000000000 Z
+date: 2022-11-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: active_storage_validations
@@ -35,7 +35,6 @@ files:
 - README.md
 - app/assets/config/katalyst-content.js
 - app/assets/javascripts/controllers/content/editor/container_controller.js
-- app/assets/javascripts/controllers/content/editor/image_field_controller.js
 - app/assets/javascripts/controllers/content/editor/item_controller.js
 - app/assets/javascripts/controllers/content/editor/list_controller.js
 - app/assets/javascripts/controllers/content/editor/new_item_controller.js
@@ -58,7 +57,7 @@ files:
 - app/controllers/katalyst/content/items_controller.rb
 - app/helpers/katalyst/content/editor/base.rb
 - app/helpers/katalyst/content/editor/container.rb
-- app/helpers/katalyst/content/editor/image_field.rb
+- app/helpers/katalyst/content/editor/errors.rb
 - app/helpers/katalyst/content/editor/item.rb
 - app/helpers/katalyst/content/editor/list.rb
 - app/helpers/katalyst/content/editor/new_item.rb

data/app/assets/javascripts/controllers/content/editor/image_field_controller.js

@@ -1,90 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-export default class ImageFieldController extends Controller {
-  static targets = ["preview"];
-  static values = {
-    mimeTypes: Array,
-  };
-
-  #counter = 0;
-
-  onUpload(event) {
-    this.previewTarget.classList.remove("hidden");
-
-    const reader = new FileReader();
-
-    reader.onload = (e) => {
-      this.imageTag.src = e.target.result;
-    };
-
-    reader.readAsDataURL(event.currentTarget.files[0]);
-  }
-
-  drop(event) {
-    event.preventDefault();
-
-    const file = fileForEvent(event, this.mimeTypesValue);
-    if (file) {
-      const dT = new DataTransfer();
-      dT.items.add(file);
-      this.fileInput.files = dT.files;
-      this.fileInput.dispatchEvent(new Event("change"));
-    }
-
-    this.#counter = 0;
-    this.element.classList.remove("droppable");
-  }
-
-  dragover(event) {
-    event.preventDefault();
-  }
-
-  dragenter(event) {
-    event.preventDefault();
-
-    if (this.#counter === 0) {
-      this.element.classList.add("droppable");
-    }
-    this.#counter++;
-  }
-
-  dragleave(event) {
-    event.preventDefault();
-
-    this.#counter--;
-    if (this.#counter === 0) {
-      this.element.classList.remove("droppable");
-    }
-  }
-
-  get fileInput() {
-    return this.element.querySelector("input[type='file']");
-  }
-
-  get imageTag() {
-    return this.previewTarget.querySelector("img");
-  }
-}
-
-/**
- * Given a drop event, find the first acceptable file.
- * @param event {DropEvent}
- * @param mimeTypes {String[]}
- * @returns {File}
- */
-function fileForEvent(event, mimeTypes) {
-  const accept = (file) => mimeTypes.indexOf(file.type) > -1;
-
-  let file;
-
-  if (event.dataTransfer.items) {
-    const item = [...event.dataTransfer.items].find(accept);
-    if (item) {
-      file = item.getAsFile();
-    }
-  } else {
-    file = [...event.dataTransfer.files].find(accept);
-  }
-
-  return file;
-}

data/app/helpers/katalyst/content/editor/image_field.rb

@@ -1,72 +0,0 @@
-# frozen_string_literal: true
-
-module Katalyst
-  module Content
-    module Editor
-      class ImageField < Base
-        IMAGE_FIELD_CONTROLLER = "content--editor--image-field"
-
-        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-          dragover->#{IMAGE_FIELD_CONTROLLER}#dragover
-          dragenter->#{IMAGE_FIELD_CONTROLLER}#dragenter
-          dragleave->#{IMAGE_FIELD_CONTROLLER}#dragleave
-          drop->#{IMAGE_FIELD_CONTROLLER}#drop
-        ACTIONS
-
-        attr_accessor :item, :method
-
-        def build(item, method, **options, &block)
-          self.item   = item
-          self.method = method
-
-          tag.div **default_options(**options) do
-            concat(capture { yield self }) if block
-          end
-        end
-
-        def preview(**options)
-          add_option(options, :data, "#{IMAGE_FIELD_CONTROLLER}_target", "preview")
-          add_option(options, :class, "hidden") unless preview?
-
-          tag.div **options do
-            image_tag preview_url, class: "image-thumbnail"
-          end
-        end
-
-        def file_input_options(options = {})
-          add_option(options, :accept, config.image_mime_types.join(","))
-          add_option(options, :data, :action, "change->#{IMAGE_FIELD_CONTROLLER}#onUpload")
-
-          options
-        end
-
-        def hint_text
-          t("views.katalyst.content.item.size_hint", max_size: number_to_human_size(config.max_image_size.megabytes))
-        end
-
-        def preview?
-          value&.attached? && value&.persisted?
-        end
-
-        def preview_url
-          preview? ? main_app.url_for(value) : ""
-        end
-
-        def value
-          item.send(method)
-        end
-
-        private
-
-        def default_options(**options)
-          add_option(options, :data, :controller, IMAGE_FIELD_CONTROLLER)
-          add_option(options, :data, :action, ACTIONS)
-          add_option(options, :data, :"#{IMAGE_FIELD_CONTROLLER}_mime_types_value",
-                     config.image_mime_types.to_json)
-
-          options
-        end
-      end
-    end
-  end
-end