katalyst-content 2.8.0 → 3.0.0.alpha.2

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

@@ -1,12 +1,15 @@
-<%= tag.button(**html_attributes) do %>
-  <%= label %>
-  <%#
+<li>
+  <%= tag.button(**html_attributes) do %>
+    <icon class="icon" data-icon="<%= icon_name %>" role="img">&nbsp;</icon>
+    <%= label %>
+    <%#
     # Template is stored inside the new item dom, and copied into the dom when
     # the user selects the item.
-  %>
-  <template>
-    <%= render row_component do %>
-      <%= render item_component %>
-    <% end %>
-  </template>
-<% end %>
+    %>
+    <template>
+      <%= render row_component do %>
+        <%= render item_component %>
+      <% end %>
+    </template>
+  <% end %>
+</li>

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

@@ -8,10 +8,6 @@ module Katalyst
 
         with_collection_parameter :item
 
-        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-          #{NEW_ITEMS_CONTROLLER}#add
-        ACTIONS
-
         def initialize(item:, container: item.container)
           super
         end
@@ -32,14 +28,17 @@ module Katalyst
           item.model_name.param_key
         end
 
+        alias icon_name item_type
+
         private
 
         def default_html_attributes
           {
-            role: "listitem",
-            data: {
-              item_type:,
-              action:    ACTIONS,
+            class: "button",
+            role:  "listitem",
+            data:  {
+              ghost_button: "",
+              action:       "content--editor--new-items#add",
             },
           }
         end

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

@@ -1,20 +1,42 @@
 <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 %>
+     data-controller="content--editor--new-items"
+     data-action="turbo:before-morph-element->content--editor--new-items#morph">
+  <button aria-controls="content--editor--new-items-dialog"
+          class="button"
+          data-action="click->content--editor--new-items#open"
+          data-button-padding="tight"
+          data-text-button>
+    <icon aria-hidden="true" class="icon" data-icon="add">&nbsp;</icon>
+    Add item
+  </button>
+  <div class="content--editor--inline-add" data-content--editor--new-items-target="inline" hidden>
+    <button aria-controls="content--editor--new-items-dialog"
+            class="button"
+            data-action="content--editor--new-items#open"
+            data-button-padding="tight">
+      <icon aria-hidden="true" class="icon" data-icon="add">&nbsp;</icon>
+      <span class="visually-hidden">Add item here</span>
+    </button>
+  </div>
+  <dialog id="content--editor--new-items-dialog" class="modal" data-action="click->content--editor--new-items#close">
+    <article class="flow" data-action="click->content--editor--new-items#noop:stop">
+      <header class="repel" data-nowrap>
+        <h2>Add item</h2>
+        <button class="button"
+                data-action="click->content--editor--new-items#close"
+                data-button-padding="tight"
+                data-text-button>
+          <icon aria-hidden="true" class="icon" data-icon="close">&nbsp;</icon>
+          <span class="visually-hidden">Close</span>
+        </button>
+      </header>
+      <main>
+        <%= tag.div(role: "list", data: { action: "click->content--editor--new-items#noop:stop" }) do %>
+          <ul role="list" class="items-list">
+            <%= render Katalyst::Content::Editor::NewItemComponent.with_collection(items) %>
+          </ul>
+        <% end %>
+      </main>
+    </article>
+  </dialog>
 </div>

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

@@ -4,8 +4,6 @@ module Katalyst
   module Content
     module Editor
       class NewItemsComponent < BaseComponent
-        include ::Turbo::FramesHelper
-
         renders_many :items, Editor::NewItemComponent
 
         def items

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

@@ -1,4 +1,5 @@
-<li draggable="true"
+<li class="content--editor--item"
+    draggable="true"
     data-content-item
     data-content-item-id="<%= item.id %>"
     data-content-index="<%= item.index %>"

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

@@ -4,11 +4,6 @@ module Katalyst
   module Content
     module Editor
       class StatusBarComponent < BaseComponent
-        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-          content:change@document->#{STATUS_BAR_CONTROLLER}#change
-          turbo:morph-element->#{STATUS_BAR_CONTROLLER}#morph
-        ACTIONS
-
         attr_reader :container
 
         def call
@@ -37,10 +32,10 @@ module Katalyst
 
         def actions
           tag.menu do
-            concat action(:discard, class: "button button--text")
-            concat action(:revert, class: "button button--text") if container.draft?
-            concat action(:save, class: "button button--secondary")
-            concat action(:publish, class: "button button--primary")
+            concat action(:discard, class: "button", data: { text_button: "" })
+            concat action(:revert, class: "button", data: { text_button: "" })
+            concat action(:save, class: "button", data: { ghost_button: "" })
+            concat action(:publish, class: "button")
           end
         end
 
@@ -59,8 +54,11 @@ module Katalyst
         def default_html_attributes
           {
             data: {
-              controller: STATUS_BAR_CONTROLLER,
-              action:     ACTIONS,
+              controller: "content--editor--status-bar",
+              action:     %w[
+                content:change@document->content--editor--status-bar#change
+                turbo:morph-element->content--editor--status-bar#morph
+              ],
               state:      container.state,
             },
           }

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

@@ -1,9 +1,3 @@
-<div role="rowheader">
-  <h4>Heading</h4>
-  <h4></h4>
-  <h4>Actions</h4>
-</div>
-
 <%= tag.ol(id: container_form_id, **html_attributes) do %>
   <% items.each do |item| %>
     <%= item %>

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

@@ -4,14 +4,6 @@ module Katalyst
   module Content
     module Editor
       class TableComponent < BaseComponent
-        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-          dragstart->#{LIST_CONTROLLER}#dragstart
-          dragover->#{LIST_CONTROLLER}#dragover
-          drop->#{LIST_CONTROLLER}#drop
-          dragend->#{LIST_CONTROLLER}#dragend
-          keyup.esc@document->#{LIST_CONTROLLER}#dragend
-        ACTIONS
-
         renders_many :items, ->(item) do
           row = RowComponent.new(item:, container:)
           row.with_content(render(ItemComponent.new(item:, container:)))
@@ -22,11 +14,19 @@ module Katalyst
 
         def default_html_attributes
           {
-            data: {
-              controller:                       LIST_CONTROLLER,
-              action:                           ACTIONS,
-              "#{CONTAINER_CONTROLLER}_target": "container",
+            class: "katalyst--content--editor",
+            data:  {
+              controller:                        "content--editor--list",
+              action:                            %w[
+                dragstart->content--editor--list#dragstart
+                dragover->content--editor--list#dragover
+                drop->content--editor--list#drop
+                dragend->content--editor--list#dragend
+                keyup.esc@document->content--editor--list#dragend
+              ],
+              content__editor__container_target: "container",
             },
+            role:  "list",
           }
         end
       end

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

@@ -9,3 +9,8 @@
 
   <%= render Katalyst::Content::Editor::NewItemsComponent.new(container:) %>
 <% end %>
+
+<%= turbo_frame_tag(
+      "content--editor--item-editor",
+      data: { controller: "content--editor--item-editor" },
+    ) %>

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

@@ -3,13 +3,7 @@
 module Katalyst
   module Content
     class EditorComponent < Editor::BaseComponent
-      ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
-        submit->#{CONTAINER_CONTROLLER}#reindex
-        content:drop->#{CONTAINER_CONTROLLER}#drop
-        content:reindex->#{CONTAINER_CONTROLLER}#reindex
-        turbo:render@document->#{CONTAINER_CONTROLLER}#connect
-        content:reset->#{CONTAINER_CONTROLLER}#reset
-      ACTIONS
+      include ::Turbo::FramesHelper
 
       attr_reader :url, :scope
 
@@ -44,10 +38,17 @@ module Katalyst
 
       def default_html_attributes
         {
-          id:   container_form_id,
-          data: {
-            controller: CONTAINER_CONTROLLER,
-            action:     ACTIONS,
+          id:    container_form_id,
+          class: "content--editor",
+          data:  {
+            controller: "content--editor--container",
+            action:     %w[
+              submit->content--editor--container#reindex
+              content:drop->content--editor--container#drop
+              content:reindex->content--editor--container#reindex
+              turbo:render@document->content--editor--container#connect
+              content:reset->content--editor--container#reset
+            ],
           },
         }
       end

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

@@ -6,7 +6,6 @@ module Katalyst
       before_action :set_container, only: %i[new create]
       before_action :set_item, except: %i[new create]
       before_action :set_editor_variant
-      before_action :require_kpop, only: %i[new edit]
 
       attr_reader :container, :item, :editor
 

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

@@ -5,6 +5,8 @@ module Katalyst
     module FrontendHelper
       include TableHelper
 
+      using Katalyst::HtmlAttributes::HasHtmlAttributes
+
       # Render all items from a content version as HTML
       # @param version [Katalyst::Content::Version] The content version to render
       # @return [ActiveSupport::SafeBuffer,String,nil] Content as HTML
@@ -14,16 +16,24 @@ module Katalyst
         capture do
           cache version do
             without_partial_path_prefix do
-              concat render partial: version.tree.select(&:visible?)
+              concat(render_content_items(*version.tree.select(&:visible?), class: "flow"))
             end
           end
         end
       end
 
-      def render_content_items(items)
-        items = items.select(&:visible?)
-        without_partial_path_prefix do
-          render partial: items if items.any?
+      def render_content_items(*items, tag: :div, theme: nil, **)
+        items = items.flatten.select(&:visible?)
+
+        grouped_items = items.slice_when { |first, second| first.theme != second.theme }
+
+        grouped_items.each do |siblings|
+          content_theme = (siblings.first.theme if siblings.first.theme != theme)
+          concat(content_items_tag(tag, content_theme:, **) do
+            without_partial_path_prefix do
+              concat(render(partial: siblings))
+            end
+          end)
         end
       end
 
@@ -31,7 +41,15 @@ module Katalyst
         FrontendBuilder.new(self, item).render(...)
       end
 
-      private
+      def content_items_tag(tag, content_theme:, **attributes, &)
+        html_attributes = {
+          class: "content-items",
+          data:  {
+            content_theme:,
+          },
+        }.merge_html(attributes)
+        content_tag(tag, **html_attributes, &)
+      end
 
       def without_partial_path_prefix
         current = prefix_partial_path_with_controller_namespace
@@ -44,6 +62,8 @@ module Katalyst
     end
 
     class FrontendBuilder
+      include Katalyst::HtmlAttributes
+
       attr_accessor :template, :item
 
       delegate_missing_to :@template
@@ -53,32 +73,28 @@ module Katalyst
         self.item     = item
       end
 
-      def render(**, &)
-        content_tag tag, **default_options(**) do
-          content_tag(:div, &)
-        end
+      def render(tag: :div, **, &)
+        update_html_attributes(**)
+
+        content_tag(tag, **html_attributes, &)
       end
 
       private
 
-      def default_options(**options)
+      def default_html_attributes
         {
-          id:    item.heading&.parameterize,
-          class: ["content-item", item.model_name.param_key, item.background, options[:class]],
-          data:  { content_index: item.index, content_depth: item.depth, **options.fetch(:data, {}) },
-          **options.except(:class, :data, :root),
+          id:    item.dom_id,
+          class: ["content-item", wrapper_class],
+          data:  {
+            content_index:     item.index,
+            content_depth:     item.depth,
+            content_item_type: item.item_type,
+          },
         }
       end
 
-      def tag
-        case item
-        when Figure
-          :figure
-        when Section
-          :section
-        else
-          :div
-        end
+      def wrapper_class
+        "wrapper" if item.depth.zero?
       end
     end
   end

data/app/javascript/content/application.js

@@ -1,5 +1,6 @@
 import ContainerController from "./editor/container_controller";
 import ItemController from "./editor/item_controller";
+import ItemEditorController from "./editor/item_editor_controller";
 import ListController from "./editor/list_controller";
 import NewItemsController from "./editor/new_items_controller";
 import StatusBarController from "./editor/status_bar_controller";
@@ -15,6 +16,10 @@ const Definitions = [
     identifier: "content--editor--item",
     controllerConstructor: ItemController,
   },
+  {
+    identifier: "content--editor--item-editor",
+    controllerConstructor: ItemEditorController,
+  },
   {
     identifier: "content--editor--list",
     controllerConstructor: ListController,

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

@@ -272,7 +272,7 @@ export default class Item {
  */
 function createChildrenList(node) {
   const childrenList = document.createElement("ol");
-  childrenList.setAttribute("class", "hidden");
+  childrenList.toggleAttribute("hidden", true);
 
   // if objectType is "rich-content" set richContentChildren as a data attribute
   childrenList.dataset[`contentChildren`] = "";

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

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus";
+import Item from "./item";
+
+export default class ItemEditorController extends Controller {
+  static targets = ["dialog"];
+
+  connect() {
+    this.element.addEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  dismiss() {
+    if (!this.dialogTarget) return;
+    if (!this.dialogTarget.open) this.dialogTarget.close();
+
+    if (!("itemPersisted" in this.dialogTarget.dataset)) {
+      this.#removeTargetItem();
+    }
+
+    this.element.removeAttribute("src");
+    this.dialogTarget.remove();
+  }
+
+  dialogTargetConnected(dialog) {
+    dialog.showModal();
+  }
+
+  onSubmit = (event) => {
+    if (
+      event.detail.success &&
+      "closeDialog" in event.detail.formSubmission?.submitter?.dataset
+    ) {
+      this.dialogTarget.close();
+      this.element.removeAttribute("src");
+      this.dialogTarget.remove();
+    }
+  };
+
+  noop() {}
+
+  #removeTargetItem() {
+    const el = document.getElementById(this.dialogTarget.dataset.itemId);
+    const item = new Item(el.closest("[data-content-item]"));
+    const list = item.node.parentElement;
+
+    item.node.remove();
+
+    this.dispatch("reindex", {
+      target: list,
+      bubbles: true,
+      prefix: "content",
+    });
+  }
+}

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

@@ -32,7 +32,7 @@ export default class NewItemsController extends Controller {
   add(e) {
     e.preventDefault();
 
-    const template = e.target.querySelector("template");
+    const template = e.target.closest("li").querySelector("template");
     const item = template.content.querySelector("li").cloneNode(true);
     const target = this.currentItem;
 

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

@@ -20,9 +20,7 @@ module Katalyst
 
         def add(node)
           if node.depth == depth
-            node.parent = current
-            children << node
-            self
+            add_sibling(node)
           elsif node.depth > depth
             push(children.last)
             add(node)
@@ -32,6 +30,21 @@ module Katalyst
           end
         end
 
+        def add_sibling(node)
+          node.parent = current
+
+          previous = children.last
+
+          children << node
+
+          if previous
+            previous.next_sibling = node
+            node.previous_sibling = previous
+          end
+
+          self
+        end
+
         private
 
         attr_writer :current, :depth, :children

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

@@ -16,12 +16,12 @@ module Katalyst
 
       validates :heading, presence: true
       validates :heading_style, inclusion: { in: config.heading_styles }
-      validates :background, presence: true, inclusion: { in: config.backgrounds }, if: :validate_background?
+      validates :theme, inclusion: { in: config.themes, allow_blank: true }
 
       after_initialize :initialize_tree
       before_validation :set_defaults
 
-      attr_accessor :parent, :children, :index, :depth
+      attr_accessor :parent, :children, :index, :depth, :previous_sibling, :next_sibling
 
       def self.permitted_params
         %i[
@@ -30,7 +30,7 @@ module Katalyst
           type
           heading
           heading_style
-          background
+          theme
           visible
         ]
       end
@@ -51,6 +51,18 @@ module Katalyst
         is_a? Layout
       end
 
+      def dom_id
+        heading&.parameterize
+      end
+
+      def item_type
+        model_name.param_key
+      end
+
+      def theme
+        super.presence || parent&.theme
+      end
+
       private
 
       def initialize_tree
@@ -61,10 +73,6 @@ module Katalyst
       def set_defaults
         self.heading_style = "none" if heading_style.blank?
       end
-
-      def validate_background?
-        true
-      end
     end
   end
 end

data/app/views/katalyst/content/asides/_aside.html+form.erb

@@ -1,32 +1,28 @@
-<%= form_with model: aside, scope: :item, url: path do |form| %>
-  <%= render "hidden_fields", form: %>
-  <%= render "form_errors", form: %>
+<%# locals: (form:, aside:) %>
 
-  <div class="field">
-    <%= form.label :heading %>
-    <%= form.text_field :heading %>
-  </div>
+<%= render "form_errors", form: %>
 
-  <div class="field">
-    <%= form.label :heading_style %>
-    <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
-  </div>
+<div class="field">
+  <%= form.label :heading %>
+  <%= form.text_field :heading %>
+</div>
 
-  <div class="field">
-    <%= form.label :background %>
-    <%= form.select :background, Katalyst::Content.config.backgrounds %>
-  </div>
+<div class="field">
+  <%= form.label :heading_style %>
+  <%= form.collection_radio_buttons :heading_style, Katalyst::Content.config.heading_styles, :itself, :itself %>
+</div>
 
-  <div class="field">
-    <%= form.label :visible %>
-    <%= form.check_box :visible %>
-  </div>
+<div class="field">
+  <%= form.label :theme %>
+  <%= form.select :theme, Katalyst::Content.config.themes %>
+</div>
 
-  <div class="field">
-    <%= form.label :reverse %>
-    <%= form.check_box :reverse %>
-  </div>
+<div class="field">
+  <%= form.label :visible %>
+  <%= form.check_box :visible %>
+</div>
 
-  <%= form.submit "Done" %>
-  <%= link_to "Discard", :back %>
-<% end %>
+<div class="field">
+  <%= form.label :reverse %>
+  <%= form.check_box :reverse %>
+</div>

data/app/views/katalyst/content/asides/_aside.html.erb

@@ -1,16 +1,14 @@
-<%= content_item_tag aside do %>
+<%= content_item_tag(aside, data: { aside_reverse: ("" if aside.reverse) }) do %>
   <%= tag.h3 aside.heading, class: aside.heading_style_class if aside.show_heading? %>
 
   <% if aside.children.any? %>
     <% items = aside.children.select(&:visible?) %>
     <% last = items.pop %>
-    <div role="aside-container" <%= "class=reverse" if aside.reverse %>>
-      <div>
-        <%= render_content_items items %>
+    <div class="sidebar">
+      <div class="aside--main">
+        <%= render_content_items(*items, theme: aside.theme, class: "flow") %>
       </div>
-      <aside>
-        <%= render_content_items [last] %>
-      </aside>
+      <%= render_content_items(last, tag: :aside, class: "aside--sidebar", theme: aside.theme) %>
     </div>
   <% end %>
 <% end %>