katalyst-content 2.7.1 → 3.0.0.alpha.1

data/app/assets/stylesheets/katalyst/content/{editor/_status-bar.scss → status-bar.css}

@@ -1,25 +1,39 @@
 [data-controller="content--editor--status-bar"] {
+  --background: #ebf9eb;
+  --color: #4dd45c;
+  --border: #4dd45c;
+
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "status actions";
+  align-items: baseline;
+  grid-column-gap: 2rem;
+
   min-height: 3rem;
   line-height: 3rem;
-  padding: 0 1.25rem 0 1.5rem;
+  padding-inline: var(--space-m);
   background: var(--background);
   color: var(--color);
   border: 1px solid var(--border);
   margin-bottom: 1rem;
-  white-space: nowrap;
 
-  display: grid;
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "status actions";
-  align-items: baseline;
+  &[data-state="draft"],
+  &[data-state="unpublished"] {
+    --background: #fefaf3;
+    --color: #ffa800;
+    --border: #ffa800;
+  }
+
+  &[data-state="dirty"] {
+    --background: #eee;
+    --color: #aaa;
+    --border: #888;
+  }
 
   .status-text {
     display: none;
     grid-area: status;
     font-weight: bold;
-    color: var(--color);
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   &[data-state="published"] .status-text[data-published],
@@ -29,44 +43,24 @@
     display: unset;
   }
 
+  button {
+    --button-bg: var(--color);
+    --button-hover-bg: var(--color);
+  }
+
   menu {
-    display: inline;
+    display: inline-flex;
     grid-area: actions;
     margin: 0;
     padding: 0;
+    gap: var(--space-3xs, 0.25rem);
+    align-items: baseline;
   }
 
   menu > li {
     display: inline;
   }
 
-  .button {
-    color: inherit;
-    line-height: 1rem;
-    margin-left: 0.5rem;
-  }
-
-  .button--primary {
-    background: var(--color);
-    border: 1px solid var(--border);
-    color: white;
-
-    &[disabled] {
-      background: var(--color);
-      opacity: 0.8;
-    }
-  }
-
-  .button--secondary {
-    background: var(--background);
-    border: 1px solid var(--border);
-    color: var(--color);
-
-    &[disabled] {
-      background: var(--background);
-    }
-  }
-
   &[data-state="published"] {
     [value="publish"],
     [value="save"],

data/app/assets/stylesheets/katalyst/content/{editor/_table.scss → table.css}

@@ -1,5 +1,3 @@
-@use "variables" as *;
-
 [data-content--editor--table-target="content"] {
   position: relative;
   min-height: 8rem;
@@ -26,17 +24,17 @@
 
   th,
   td {
-    border: 1px solid $grey;
+    border: 1px solid var(--color-mid, #9ca3af);
     padding: 0.25rem 0.5rem;
     text-align: left;
     vertical-align: top;
   }
 
   thead {
-    background-color: $grey;
+    background-color: var(--color-mid, #9ca3af);
   }
 
   tbody th {
-    background-color: $grey-light;
+    background-color: var(--color-tint, #f0ecf3);
   }
 }

data/app/assets/stylesheets/katalyst/content.css

@@ -0,0 +1,4 @@
+@import url("content/editor.css");
+@import url("content/icons.css");
+@import url("content/status-bar.css");
+@import url("content/table.css");

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

@@ -6,12 +6,6 @@ module Katalyst
       class BaseComponent < ViewComponent::Base
         include Katalyst::HtmlAttributes
 
-        CONTAINER_CONTROLLER  = "content--editor--container"
-        LIST_CONTROLLER       = "content--editor--list"
-        ITEM_CONTROLLER       = "content--editor--item"
-        STATUS_BAR_CONTROLLER = "content--editor--status-bar"
-        NEW_ITEM_CONTROLLER   = "content--editor--new-item"
-
         attr_accessor :container, :item
 
         delegate :config, to: ::Katalyst::Content

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

@@ -1,22 +1,38 @@
 <%= tag.div(**html_attributes) do %>
-  <div class="tree" data-invisible="<%= !item.visible? %>">
-    <div role="toolbar" data-tree-accordion-controls>
-      <span role="button" value="collapse" data-action="click-><%= CONTAINER_CONTROLLER %>#collapse" title="Collapse tree"></span>
-      <span role="button" value="expand" data-action="click-><%= CONTAINER_CONTROLLER %>#expand" title="Expand tree"></span>
-    </div>
+  <div class="tree">
+    <icon class="icon" data-icon="<%= item.model_name.param_key %>" aria-hidden="true">&nbsp;</icon>
 
-    <span role="img" value="<%= item.model_name.param_key %>" title="Type"></span>
-    <h4 class="heading" title="<%= item.heading %>"><%= item.heading %></h4>
-    <span role="img" value="invisible" title="Hidden"></span>
-  </div>
+    <strong class="heading" title="<%= item.heading %>"><%= item.heading %></strong>
+
+    <span class="item-background <%= item.background %>">
+      <icon class="icon" data-icon="theme" role="img">&nbsp;</icon>
+    </span>
 
-  <div class="item-background <%= item.background %>"></div>
+    <% unless item.visible? %>
+      <icon class="icon" data-icon="hidden" title="Hidden" role="img">&nbsp;</icon>
+    <% end %>
+  </div>
 
-  <div role="toolbar" data-tree-controls>
-    <span role="button" value="de-nest" data-action="click-><%= CONTAINER_CONTROLLER %>#deNest" title="Outdent"></span>
-    <span role="button" value="nest" data-action="click-><%= CONTAINER_CONTROLLER %>#nest" title="Indent"></span>
-    <%= kpop_link_to("", edit_item_link, role: "button", title: "Edit", value: "edit") %>
-    <span role="button" value="remove" data-action="click-><%= CONTAINER_CONTROLLER %>#remove" title="Remove"></span>
+  <div role="toolbar" class="actions-group">
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#collapse" title="Collapse tree">
+      <icon class="icon" data-icon="collapse" role="img">&nbsp;</icon>
+    </button>
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#expand" title="Expand tree">
+      <icon class="icon" data-icon="expand" role="img">&nbsp;</icon>
+    </button>
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#deNest" title="Outdent">
+      <icon class="icon" data-icon="outdent" role="img">&nbsp;</icon>
+    </button>
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#nest" title="Indent">
+      <icon class="icon" data-icon="indent" role="img">&nbsp;</icon>
+    </button>
+    <%= link_to(edit_item_link, class: "button", title: "Edit", value: "edit",
+                data: { text_button: "", button_padding: "tight", turbo_frame: "content--editor--item-editor" }) do %>
+      <icon class="icon" data-icon="edit" role="img">&nbsp;</icon>
+    <% end %>
+    <button class="button" data-button-padding="tight" data-text-button data-action="content--editor--container#remove" title="Remove">
+      <icon class="icon" data-icon="remove" role="img">&nbsp;</icon>
+    </button>
   </div>
 
   <input autocomplete="off" type="hidden" name="<%= attributes_scope %>[id]" value="<%= item.id %>">

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

@@ -4,8 +4,6 @@ module Katalyst
   module Content
     module Editor
       class ItemComponent < BaseComponent
-        include KpopHelper
-
         def edit_item_link
           if item.persisted?
             helpers.katalyst_content.edit_item_path(item)
@@ -20,7 +18,7 @@ module Katalyst
           {
             id:   dom_id(item),
             data: {
-              controller: ITEM_CONTROLLER,
+              controller: "content--editor--item",
             },
           }
         end

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

@@ -6,25 +6,18 @@ module Katalyst
       class ItemEditorComponent < BaseComponent
         include ::Turbo::FramesHelper
 
-        module Helpers
-          def prefix_partial_path_with_controller_namespace
-            false
-          end
-
-          def content_routes
-            katalyst_content
-          end
-        end
+        alias_method :model, :item
 
         def call
-          tag.div(**html_attributes) do
-            helpers.extend(Helpers)
-            helpers.render(item, path:)
-          end
+          render("form", model:, scope:, url:, id:)
         end
 
         def id
-          "item-editor-#{item.id}"
+          dom_id(item, :form)
+        end
+
+        def scope
+          :item
         end
 
         def title
@@ -35,20 +28,13 @@ module Katalyst
           end
         end
 
-        def path
+        def url
           if item.persisted?
             view_context.katalyst_content.item_path(item)
           else
             view_context.katalyst_content.items_path
           end
         end
-
-        def default_html_attributes
-          {
-            id:,
-            class: "content--item-editor",
-          }
-        end
       end
     end
   end

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

@@ -1,22 +1,15 @@
-<%= tag.div(**html_attributes) do %>
-  <label><%= label %></label>
-  <%#
-    # Template is stored inside the new item dom, and copied into drag
-    # events when the user initiates drag so that it can be copied into the
-    # editor list on drop.
-    #
-  %>
-  <template data-<%= NEW_ITEM_CONTROLLER %>-target="template">
-    <%= render row_component do %>
-      <%= render item_component %>
-    <% end %>
-  </template>
-<% end %>
-<%#
-  # Remove items that are incomplete when rendering new items, this
-  # causes incomplete items to be removed from the list when the user
-  # cancels adding a new item by pressing 'discard' in the new item form.
-%>
-<%= turbo_stream.replace dom_id(item) do %>
-  <%= render item_component(data: { delete: "" }) %>
-<% end %>
+<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 %>
+</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
-          dragstart->#{NEW_ITEM_CONTROLLER}#dragstart
-        ACTIONS
-
         def initialize(item:, container: item.container)
           super
         end
@@ -32,16 +28,17 @@ module Katalyst
           item.model_name.param_key
         end
 
+        alias icon_name item_type
+
         private
 
         def default_html_attributes
           {
-            draggable: "true",
-            role:      "listitem",
-            data:      {
-              item_type:,
-              controller: NEW_ITEM_CONTROLLER,
-              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,3 +1,42 @@
-<div class="content--editor--new-items" role="listbox">
-  <%= render Katalyst::Content::Editor::NewItemComponent.with_collection(items) %>
+<div class="content--editor--new-items"
+     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,16 +4,6 @@ module Katalyst
   module Content
     module Editor
       class TableComponent < BaseComponent
-        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
-        ACTIONS
-
         renders_many :items, ->(item) do
           row = RowComponent.new(item:, container:)
           row.with_content(render(ItemComponent.new(item:, container:)))
@@ -24,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

@@ -6,4 +6,11 @@
   <%= 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 %>
+
+<%= 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
 
@@ -24,8 +18,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:)
@@ -42,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/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

@@ -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
 
@@ -48,8 +47,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,8 @@
 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 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";
@@ -15,13 +16,17 @@ const Definitions = [
     identifier: "content--editor--item",
     controllerConstructor: ItemController,
   },
+  {
+    identifier: "content--editor--item-editor",
+    controllerConstructor: ItemEditorController,
+  },
   {
     identifier: "content--editor--list",
     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/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`] = "";