katalyst-content 2.7.1 → 2.8.0

data/app/components/katalyst/content/editor/new_items_component.html.erb

@@ -1,3 +1,20 @@
-<div class="content--editor--new-items" role="listbox">
-  <%= render Katalyst::Content::Editor::NewItemComponent.with_collection(items) %>
+<div class="content--editor--new-items"
+     data-controller="<%= NEW_ITEMS_CONTROLLER %>"
+     data-action="turbo:before-morph-element-><%= NEW_ITEMS_CONTROLLER %>#morph">
+  <%= tag.button(aria:  { controls: "#{NEW_ITEMS_CONTROLLER}-dialog" },
+                 class: "content--editor--add-button",
+                 data:  { action: "#{NEW_ITEMS_CONTROLLER}#open" }) do %>
+    Add content
+  <% end %>
+  <%= tag.div(class:  "content--editor--inline-add",
+              data:   { "#{NEW_ITEMS_CONTROLLER}_target" => "inline" },
+              hidden: "") do %>
+    <%= tag.button(aria: { controls: "#{NEW_ITEMS_CONTROLLER}-dialog", label: "Add content here" },
+                   data: { action: "#{NEW_ITEMS_CONTROLLER}#open" }) %>
+  <% end %>
+  <%= tag.dialog(id: "#{NEW_ITEMS_CONTROLLER}-dialog", data: { action: "click->#{NEW_ITEMS_CONTROLLER}#close"}) do %>
+    <%= tag.div(role: "list", data: { action: "click->#{NEW_ITEMS_CONTROLLER}#noop:stop" }) do %>
+      <%= render Katalyst::Content::Editor::NewItemComponent.with_collection(items) %>
+    <% end %>
+  <% end %>
 </div>

data/app/components/katalyst/content/editor/table_component.rb

@@ -7,8 +7,6 @@ module Katalyst
         ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
           dragstart->#{LIST_CONTROLLER}#dragstart
           dragover->#{LIST_CONTROLLER}#dragover
-          dragenter->#{LIST_CONTROLLER}#dragenter
-          dragleave->#{LIST_CONTROLLER}#dragleave
           drop->#{LIST_CONTROLLER}#drop
           dragend->#{LIST_CONTROLLER}#dragend
           keyup.esc@document->#{LIST_CONTROLLER}#dragend

data/app/components/katalyst/content/editor_component.html.erb

@@ -6,4 +6,6 @@
   <%= render Katalyst::Content::Editor::TableComponent.new(container:) do |list| %>
     <%= container.draft_items&.each { |item| list.with_item(item) } %>
   <% end %>
+
+  <%= render Katalyst::Content::Editor::NewItemsComponent.new(container:) %>
 <% end %>

data/app/components/katalyst/content/editor_component.rb

@@ -24,8 +24,10 @@ module Katalyst
         Editor::StatusBarComponent.new(container:)
       end
 
+      # @deprecated this component is now part of the editor
       def new_items
-        Editor::NewItemsComponent.new(container:)
+        # no-op, no longer required
+        Class.new { define_method(:render_in) { |_| nil } }.new
       end
 
       def item_editor(item:)

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

@@ -3,6 +3,7 @@
 module Katalyst
   module Content
     class ApplicationController < ActionController::Base
+      protect_from_forgery with: :exception
     end
   end
 end

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

@@ -48,8 +48,8 @@ module Katalyst
       private
 
       def item_params_type
-        type = params.require(:item).fetch(:type, "")
-        if Katalyst::Content.config.items.include?(type)
+        requested_type = params.require(:item).fetch(:type, "")
+        if (type = Katalyst::Content.config.items.find { |t| t == requested_type })
           type.safe_constantize
         else
           Item

data/app/javascript/content/application.js

@@ -1,7 +1,7 @@
 import ContainerController from "./editor/container_controller";
 import ItemController from "./editor/item_controller";
 import ListController from "./editor/list_controller";
-import NewItemController from "./editor/new_item_controller";
+import NewItemsController from "./editor/new_items_controller";
 import StatusBarController from "./editor/status_bar_controller";
 import TableController from "./editor/table_controller";
 import TrixController from "./editor/trix_controller";
@@ -20,8 +20,8 @@ const Definitions = [
     controllerConstructor: ListController,
   },
   {
-    identifier: "content--editor--new-item",
-    controllerConstructor: NewItemController,
+    identifier: "content--editor--new-items",
+    controllerConstructor: NewItemsController,
   },
   {
     identifier: "content--editor--status-bar",

data/app/javascript/content/editor/list_controller.js

@@ -1,10 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class ListController extends Controller {
-  connect() {
-    this.enterCount = 0;
-  }
-
   /**
    * When the user starts a drag within the list, set the item's dataTransfer
    * properties to indicate that it's being dragged and update its style.
@@ -28,11 +24,6 @@ export default class ListController extends Controller {
    * When the user drags an item over another item in the last, swap the
    * dragging item with the item under the cursor.
    *
-   * As a special case, if the item is dragged over placeholder space at the end
-   * of the list, move the item to the bottom of the list instead. This allows
-   * users to hit the list element more easily when adding new items to an empty
-   * list.
-   *
    * @param event {DragEvent}
    */
   dragover(event) {
@@ -46,54 +37,7 @@ export default class ListController extends Controller {
   }
 
   /**
-   * When the user drags an item into the list, create a placeholder item to
-   * represent the new item. Note that we can't access the drag data
-   * until drop, so we assume that this is our template item for now.
-   *
-   * Users can cancel the drag by dragging the item out of the list or by
-   * pressing escape. Both are handled by `cancelDrag`.
-   *
-   * @param event {DragEvent}
-   */
-  dragenter(event) {
-    event.preventDefault();
-
-    // Safari doesn't support relatedTarget, so we count enter/leave pairs
-    this.enterCount++;
-
-    if (copyAllowed(event) && !this.dragItem) {
-      const item = document.createElement("li");
-      item.dataset.dragging = "";
-      item.dataset.newItem = "";
-      this.element.appendChild(item);
-    }
-  }
-
-  /**
-   * When the user drags the item out of the list, remove the placeholder.
-   * This allows users to cancel the drag by dragging the item out of the list.
-   *
-   * @param event {DragEvent}
-   */
-  dragleave(event) {
-    // Safari doesn't support relatedTarget, so we count enter/leave pairs
-    // https://bugs.webkit.org/show_bug.cgi?id=66547
-    this.enterCount--;
-
-    if (
-      this.enterCount <= 0 &&
-      this.dragItem?.dataset.hasOwnProperty("newItem")
-    ) {
-      this.dragItem.remove();
-      this.reset();
-    }
-  }
-
-  /**
-   * When the user drops an item into the list, end the drag and reindex the list.
-   *
-   * If the item is a new item, we replace the placeholder with the template
-   * item data from the dataTransfer API.
+   * When the user drops an item, end the drag and reindex the list.
    *
    * @param event {DragEvent}
    */
@@ -106,32 +50,17 @@ export default class ListController extends Controller {
     delete item.dataset.dragging;
     swap(dropTarget(event.target), item);
 
-    if (item.dataset.hasOwnProperty("newItem")) {
-      const placeholder = item;
-      const template = document.createElement("template");
-      template.innerHTML = event.dataTransfer.getData("text/html");
-      item = template.content.querySelector("li");
-
-      this.element.replaceChild(item, placeholder);
-      requestAnimationFrame(() =>
-        item.querySelector("[role='button'][value='edit']").click(),
-      );
-    }
-
     this.dispatch("drop", { target: item, bubbles: true, prefix: "content" });
   }
 
   /**
-   * End an in-progress drag. If the item is a new item, remove it, otherwise
-   * reset the item's style and restore its original position in the list.
+   * End an in-progress drag by resetting the item's style and restoring its
+   * original position in the list.
    */
   dragend() {
     const item = this.dragItem;
 
-    if (!item) {
-    } else if (item.dataset.hasOwnProperty("newItem")) {
-      item.remove();
-    } else {
+    if (item) {
       delete item.dataset.dragging;
       this.reset();
     }
@@ -155,7 +84,7 @@ export default class ListController extends Controller {
 }
 
 /**
- * Swaps two list items. If target is a list, the item is appended.
+ * Swaps two list items.
  *
  * @param target the target element to swap with
  * @param item the item the user is dragging
@@ -164,39 +93,17 @@ function swap(target, item) {
   if (!target) return;
   if (target === item) return;
 
-  if (target.nodeName === "LI") {
-    const positionComparison = target.compareDocumentPosition(item);
-    if (positionComparison & Node.DOCUMENT_POSITION_FOLLOWING) {
-      target.insertAdjacentElement("beforebegin", item);
-    } else if (positionComparison & Node.DOCUMENT_POSITION_PRECEDING) {
-      target.insertAdjacentElement("afterend", item);
-    }
-  }
-
-  if (target.nodeName === "OL") {
-    target.appendChild(item);
+  const positionComparison = target.compareDocumentPosition(item);
+  if (positionComparison & Node.DOCUMENT_POSITION_FOLLOWING) {
+    target.insertAdjacentElement("beforebegin", item);
+  } else if (positionComparison & Node.DOCUMENT_POSITION_PRECEDING) {
+    target.insertAdjacentElement("afterend", item);
   }
 }
 
-/**
- * Returns true if the event supports copy or copy move.
- *
- * Chrome and Firefox use copy, but Safari only supports copyMove.
- */
-function copyAllowed(event) {
-  return (
-    event.dataTransfer.effectAllowed === "copy" ||
-    event.dataTransfer.effectAllowed === "copyMove"
-  );
-}
-
 /**
  * Given an event target, return the closest drop target, if any.
  */
 function dropTarget(e) {
-  return (
-    e &&
-    (e.closest("[data-controller='content--editor--list'] > *") ||
-      e.closest("[data-controller='content--editor--list']"))
-  );
+  return e && e.closest("[data-controller='content--editor--list'] > *");
 }

data/app/javascript/content/editor/new_items_controller.js

@@ -0,0 +1,143 @@
+import { Controller } from "@hotwired/stimulus";
+
+const EDGE_AREA = 24;
+
+export default class NewItemsController extends Controller {
+  static targets = ["inline"];
+
+  connect() {
+    this.form.addEventListener("mousemove", this.move);
+  }
+
+  disconnect() {
+    this.form?.removeEventListener("mousemove", this.move);
+    delete this.currentItem;
+  }
+
+  open(e) {
+    e.preventDefault();
+    this.dialog.showModal();
+  }
+
+  close(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  noop(e) {}
+
+  /**
+   * Add the selected item to the DOM at the current position or the end of the list.
+   */
+  add(e) {
+    e.preventDefault();
+
+    const template = e.target.querySelector("template");
+    const item = template.content.querySelector("li").cloneNode(true);
+    const target = this.currentItem;
+
+    if (target) {
+      target.insertAdjacentElement("beforebegin", item);
+    } else {
+      this.list.insertAdjacentElement("beforeend", item);
+    }
+
+    this.toggleInline(false);
+    this.dialog.close();
+
+    requestAnimationFrame(() => {
+      item.querySelector(`[value="edit"]`).click();
+    });
+  }
+
+  morph(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  move = (e) => {
+    if (this.isOverInlineTarget(e)) return;
+    if (this.dialog.open) return;
+
+    const target = this.getCurrentItem(e);
+
+    // return if we're already showing this item
+    if (this.currentItem === target) return;
+
+    // hide the button if it's already visible
+    if (this.currentItem) this.toggleInline(false);
+
+    this.currentItem = target;
+
+    // clear any previously set timer
+    if (this.timer) clearTimeout(this.timer);
+
+    // show the button after a debounce pause
+    this.timer = setTimeout(() => {
+      delete this.timer;
+      this.toggleInline();
+    }, 100);
+  };
+
+  toggleInline(show = !!this.currentItem) {
+    if (show) {
+      this.inlineTarget.style.top = `${this.currentItem.offsetTop}px`;
+      this.inlineTarget.toggleAttribute("hidden", false);
+    } else {
+      this.inlineTarget.toggleAttribute("hidden", true);
+    }
+  }
+
+  get dialog() {
+    return this.element.querySelector("dialog");
+  }
+
+  /**
+   * @returns {HTMLFormElement}
+   */
+  get form() {
+    return this.element.closest("form");
+  }
+
+  /**
+   * @returns {HTMLUListElement,null}
+   */
+  get list() {
+    return this.form.querySelector(`[data-controller="content--editor--list"]`);
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @returns {HTMLLIElement,null}
+   */
+  getCurrentItem(e) {
+    const item = document.elementFromPoint(e.clientX, e.clientY).closest("li");
+    if (!item) return null;
+
+    const bounds = item.getBoundingClientRect();
+
+    // check X for center(ish) mouse position
+    if (e.clientX < bounds.left + bounds.width / 2 - 2 * EDGE_AREA) return null;
+    if (e.clientX > bounds.left + bounds.width / 2 + 2 * EDGE_AREA) return null;
+
+    // check Y for hits on this item or it's next sibling
+    if (e.clientY - bounds.y <= EDGE_AREA) {
+      return item;
+    } else if (bounds.y + bounds.height - e.clientY <= EDGE_AREA) {
+      return item.nextElementSibling;
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @returns {Boolean} true when the target of the event is the floating button
+   */
+  isOverInlineTarget(e) {
+    return (
+      this.inlineTarget ===
+      document.elementFromPoint(e.clientX, e.clientY).closest("div")
+    );
+  }
+}

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-content
 version: !ruby/object:Gem::Version
-  version: 2.7.1
+  version: 2.8.0
 platform: ruby
 authors:
 - Katalyst Interactive
 bindir: bin
 cert_chain: []
-date: 2025-02-26 00:00:00.000000000 Z
+date: 2025-03-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: activerecord
@@ -133,7 +133,7 @@ files:
 - app/javascript/content/editor/item.js
 - app/javascript/content/editor/item_controller.js
 - app/javascript/content/editor/list_controller.js
-- app/javascript/content/editor/new_item_controller.js
+- app/javascript/content/editor/new_items_controller.js
 - app/javascript/content/editor/rules_engine.js
 - app/javascript/content/editor/status_bar_controller.js
 - app/javascript/content/editor/table_controller.js

data/app/javascript/content/editor/new_item_controller.js

@@ -1,12 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-export default class NewItemController extends Controller {
-  static targets = ["template"];
-
-  dragstart(event) {
-    if (this.element !== event.target) return;
-
-    event.dataTransfer.setData("text/html", this.templateTarget.innerHTML);
-    event.dataTransfer.effectAllowed = "copy";
-  }
-}