katalyst-content 3.0.0.alpha.1 → 3.0.0.alpha.3

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

@@ -0,0 +1,200 @@
+@import url("icons.css");
+@import url("status-bar.css");
+@import url("table.css");
+
+.content--editor {
+  --row-inset: 2rem;
+  --row-hover-bg: var(--color-tint, #fff0eb);
+  --row-padding: 0 var(--space-2xs, 0.25rem);
+
+  position: relative;
+}
+
+/* Rows */
+
+.content--editor--item {
+  /* https://github.com/react-dnd/react-dnd/issues/832 */
+  transform: translate3d(0, 0, 0);
+
+  &:hover {
+    background: var(--row-hover-bg);
+  }
+
+  &[draggable] {
+    cursor: grab;
+  }
+
+  /* Dragged visuals */
+
+  &[data-dragging] {
+    box-shadow: inset 0 0 0 2px var(--color-tint, #fff0eb);
+
+    > * {
+      visibility: hidden;
+    }
+  }
+
+  /* Hidden items */
+
+  [data-invisible] {
+    color: var(--color-mid, #aaa);
+  }
+
+  /* row item controller */
+
+  > [data-controller] {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: baseline;
+    padding: var(--row-padding);
+  }
+
+  /* row content */
+
+  .tree {
+    display: flex;
+    gap: var(--space-xs, 0.5rem);
+    align-items: baseline;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .actions-group {
+    display: flex;
+    gap: var(--space-3xs, 0.25em);
+    align-items: baseline;
+  }
+
+  /* Theme identifier */
+
+  .item-theme {
+    display: inline-flex;
+    background-color: var(--theme-background-color);
+    color: var(--theme-text-color);
+    aspect-ratio: 1;
+    padding: var(--space-3xs);
+    border-radius: var(--radius-s);
+  }
+
+  [data-content-theme="light"] {
+    --theme-text-color: black;
+    --theme-background-color: white;
+  }
+
+  [data-content-theme="dark"] {
+    --theme-text-color: white;
+    --theme-background-color: black;
+  }
+
+  /* Depth */
+
+  &[data-content-depth="1"] .tree {
+    padding-left: calc(var(--row-inset) * 1);
+  }
+
+  &[data-content-depth="2"] .tree {
+    padding-left: calc(var(--row-inset) * 2);
+  }
+
+  &[data-content-depth="3"] .tree {
+    padding-left: calc(var(--row-inset) * 3);
+  }
+
+  &[data-content-depth="4"] .tree {
+    padding-left: calc(var(--row-inset) * 4);
+  }
+
+  &[data-content-depth="5"] .tree {
+    padding-left: calc(var(--row-inset) * 5);
+  }
+
+  &[data-content-depth="6"] .tree {
+    padding-left: calc(var(--row-inset) * 6);
+  }
+
+  /* Lower opacity for buttons you can't use */
+
+  &[data-deny-de-nest] .button:has([data-icon="outdent"]),
+  &[data-deny-nest] .button:has([data-icon="indent"]),
+  &[data-deny-remove] .button:has([data-icon="remove"]),
+  &[data-deny-drag] .button:has([data-icon="drag"]),
+  &[data-deny-edit] .button:has([data-icon="edit"]) {
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
+  &:not(:hover) .actions-group .button {
+    opacity: 0;
+  }
+
+  /* Only show 1 of the collapse / expand button */
+
+  &[data-deny-collapse] .button:has([data-icon="collapse"]),
+  &[data-deny-expand] .button:has([data-icon="expand"]) {
+    display: none !important;
+    pointer-events: none;
+  }
+
+  /* Always show the expand button when there are hidden children */
+
+  &:has([data-content-children]) .button:has([data-icon="expand"]) {
+    opacity: 1 !important;
+  }
+}
+
+/* Inline add link */
+
+.content--editor--inline-add {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 0;
+  z-index: 1;
+  outline: 1px solid var(--color-dark-glare, #555);
+
+  button {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    margin: 0;
+    padding: 0.25rem;
+
+    animation: content--editor--pulse 200ms ease;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  button:active {
+    transform: translate(-50%, -50%) scale(99%);
+  }
+
+  &[hidden] button {
+    transform: translate(-50%, -50%) scale(0);
+  }
+}
+
+@keyframes content--editor--pulse {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+  }
+
+  80% {
+    transform: translate(-50%, -50%) scale(1.1);
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* New items picker */
+
+.content--editor--new-items {
+  .items-list {
+    display: flex;
+    gap: var(--space-2xs, 0.25rem);
+    flex-wrap: wrap;
+  }
+}

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

@@ -1,196 +1,4 @@
-.content--editor {
-  --row-inset: 2rem;
-  --row-hover-bg: var(--color-tint, #fff0eb);
-  --row-padding: 0 var(--space-2xs, 0.25rem);
-
-  position: relative;
-}
-
-/* Rows */
-
-.content--editor--item {
-  /* https://github.com/react-dnd/react-dnd/issues/832 */
-  transform: translate3d(0, 0, 0);
-
-  &:hover {
-    background: var(--row-hover-bg);
-  }
-
-  &[draggable] {
-    cursor: grab;
-  }
-
-  /* Dragged visuals */
-
-  &[data-dragging] {
-    box-shadow: inset 0 0 0 2px var(--color-tint, #fff0eb);
-
-    > * {
-      visibility: hidden;
-    }
-  }
-
-  /* Hidden items */
-
-  [data-invisible] {
-    color: var(--color-mid, #aaa);
-  }
-
-  /* row item controller */
-
-  > [data-controller] {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    align-items: baseline;
-    padding: var(--row-padding);
-  }
-
-  /* row content */
-
-  .tree {
-    display: flex;
-    gap: var(--space-xs, 0.5rem);
-    align-items: baseline;
-
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .actions-group {
-    display: flex;
-    gap: var(--space-3xs, 0.25em);
-    align-items: baseline;
-  }
-
-  /* Theme identifier */
-
-  .item-background {
-    display: inline-flex;
-    background-color: var(--theme-background-color);
-    color: var(--theme-text-color);
-    aspect-ratio: 1;
-    padding: var(--space-3xs);
-    border-radius: var(--radius-s);
-  }
-
-  .item-background.light {
-    --theme-text-color: black;
-    --theme-background-color: white;
-  }
-
-  .item-background.dark {
-    --theme-text-color: white;
-    --theme-background-color: black;
-  }
-
-  /* Depth */
-
-  &[data-content-depth="1"] .tree {
-    padding-left: calc(var(--row-inset) * 1);
-  }
-
-  &[data-content-depth="2"] .tree {
-    padding-left: calc(var(--row-inset) * 2);
-  }
-
-  &[data-content-depth="3"] .tree {
-    padding-left: calc(var(--row-inset) * 3);
-  }
-
-  &[data-content-depth="4"] .tree {
-    padding-left: calc(var(--row-inset) * 4);
-  }
-
-  &[data-content-depth="5"] .tree {
-    padding-left: calc(var(--row-inset) * 5);
-  }
-
-  &[data-content-depth="6"] .tree {
-    padding-left: calc(var(--row-inset) * 6);
-  }
-
-  /* Lower opacity for buttons you can't use */
-
-  &[data-deny-de-nest] .button:has([data-icon="outdent"]),
-  &[data-deny-nest] .button:has([data-icon="indent"]),
-  &[data-deny-remove] .button:has([data-icon="remove"]),
-  &[data-deny-drag] .button:has([data-icon="drag"]),
-  &[data-deny-edit] .button:has([data-icon="edit"]) {
-    opacity: 0.2;
-    pointer-events: none;
-  }
-
-  &:not(:hover) .actions-group .button {
-    opacity: 0;
-  }
-
-  /* Only show 1 of the collapse / expand button */
-
-  &[data-deny-collapse] .button:has([data-icon="collapse"]),
-  &[data-deny-expand] .button:has([data-icon="expand"]) {
-    display: none !important;
-    pointer-events: none;
-  }
-
-  /* Always show the expand button when there are hidden children */
-
-  &:has([data-content-children]) .button:has([data-icon="expand"]) {
-    opacity: 1 !important;
-  }
-}
-
-/* Inline add link */
-
-.content--editor--inline-add {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 0;
-  z-index: 1;
-  outline: 1px solid var(--color-dark-glare, #555);
-
-  button {
-    position: absolute;
-    top: 0;
-    left: 50%;
-    margin: 0;
-    padding: 0.25rem;
-
-    animation: content--editor--pulse 200ms ease;
-    transform: translate(-50%, -50%) scale(1);
-  }
-
-  button:active {
-    transform: translate(-50%, -50%) scale(99%);
-  }
-
-  &[hidden] button {
-    transform: translate(-50%, -50%) scale(0);
-  }
-}
-
-@keyframes content--editor--pulse {
-  0% {
-    transform: translate(-50%, -50%) scale(0);
-  }
-
-  80% {
-    transform: translate(-50%, -50%) scale(1.1);
-  }
-
-  100% {
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-/* New items picker */
-
-.content--editor--new-items {
-  .items-list {
-    display: flex;
-    gap: var(--space-2xs, 0.25rem);
-    flex-wrap: wrap;
-  }
-}
+@import url("editor/editor.css");
+@import url("editor/icons.css");
+@import url("editor/status-bar.css");
+@import url("editor/table.css");

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

@@ -0,0 +1,46 @@
+/* Spacing */
+
+.content-item {
+  --flow-space: var(--space-m);
+  margin-block: var(--block-space, var(--space-m));
+}
+
+/* Themes */
+
+[data-content-theme] {
+  display: flow-root;
+}
+
+[data-content-theme] [data-content-theme] {
+  margin-inline: calc(-1 * var(--gutter));
+  padding-inline: var(--gutter);
+}
+
+[data-content-theme="light"] {
+  background: var(--background, var(--background-color));
+  color: var(--text-color);
+
+  --text-color: var(--color-dark, black);
+  --background: var(--color-light, black);
+  --link-color: var(--color-dark, black);
+}
+
+[data-content-theme="dark"] {
+  background: var(--background, var(--background-color));
+  color: var(--text-color);
+
+  --text-color: var(--color-light, white);
+  --background: var(--color-dark, black);
+  --link-color: var(--color-light, white);
+}
+
+/* Figures */
+
+.content-item[data-content-item-type="figure"] {
+  margin-inline: unset;
+  text-align: center;
+
+  img {
+    margin-inline: auto;
+  }
+}

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

@@ -0,0 +1 @@
+@import url("frontend/frontend.css");

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

@@ -4,9 +4,11 @@
 
     <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>
+    <% if item.theme.present? %>
+      <span class="item-theme" data-content-theme="<%= item.theme %>">
+        <icon class="icon" data-icon="theme" role="img">&nbsp;</icon>
+      </span>
+    <% end %>
 
     <% unless item.visible? %>
       <icon class="icon" data-icon="hidden" title="Hidden" role="img">&nbsp;</icon>
@@ -27,7 +29,7 @@
       <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 %>
+                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">

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

@@ -7,7 +7,7 @@
           data-button-padding="tight"
           data-text-button>
     <icon aria-hidden="true" class="icon" data-icon="add">&nbsp;</icon>
-    Add item
+    <%= t(".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"
@@ -15,23 +15,25 @@
             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>
+      <span class="visually-hidden"><%= t(".add_item_inline") %></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">
+  <dialog id="content--editor--new-items-dialog" class="modal" data-action="click->content--editor--new-items#click">
+    <article class="flow">
       <header class="repel" data-nowrap>
-        <h2>Add item</h2>
+        <h2><%= t(".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>
+          <span class="visually-hidden"><%= t(".close") %></span>
         </button>
       </header>
-      <main>
-        <%= tag.div(role: "list", data: { action: "click->content--editor--new-items#noop:stop" }) do %>
+      <main class="flow">
+        <% if content? %>
+          <%= content %>
+        <% else %>
           <ul role="list" class="items-list">
             <%= render Katalyst::Content::Editor::NewItemComponent.with_collection(items) %>
           </ul>

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

@@ -6,12 +6,36 @@ module Katalyst
       class NewItemsComponent < BaseComponent
         renders_many :items, Editor::NewItemComponent
 
+        attr_reader :item_types
+
+        def initialize(container:, **)
+          super
+
+          @item_types = Katalyst::Content.config.items.map do |item_class|
+            item_class.is_a?(String) ? item_class.safe_constantize : item_class
+          end.index_by do |item_class|
+            item_class.new.item_type.to_sym
+          end
+        end
+
         def items
-          Katalyst::Content.config.items.map do |item_class|
-            item_class = item_class.safe_constantize if item_class.is_a?(String)
+          item_types.values.map do |item_class|
             item_class.new(container:)
           end
         end
+
+        def item(type)
+          item = item_class_for(type).new(container:)
+          render Editor::NewItemComponent.new(item:)
+        end
+
+        private
+
+        def item_class_for(type)
+          item_types.fetch(type) do
+            raise ArgumentError, "Unknown type: #{type.inspect}, supported types: #{item_types.keys.join(', ')}"
+          end
+        end
       end
     end
   end

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

@@ -7,7 +7,8 @@
     <%= container.draft_items&.each { |item| list.with_item(item) } %>
   <% end %>
 
-  <%= render Katalyst::Content::Editor::NewItemsComponent.new(container:) %>
+  <%= content %>
+  <%= new_items %>
 <% end %>
 
 <%= turbo_frame_tag(

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

@@ -5,6 +5,10 @@ module Katalyst
     class EditorComponent < Editor::BaseComponent
       include ::Turbo::FramesHelper
 
+      renders_one :new_items, -> do
+        Katalyst::Content::Editor::NewItemsComponent.new(container:)
+      end
+
       attr_reader :url, :scope
 
       def initialize(container:, url: [:admin, container], scope: :container, **)
@@ -18,12 +22,6 @@ module Katalyst
         Editor::StatusBarComponent.new(container:)
       end
 
-      # @deprecated this component is now part of the editor
-      def new_items
-        # no-op, no longer required
-        Class.new { define_method(:render_in) { |_| nil } }.new
-      end
-
       def item_editor(item:)
         Editor::ItemEditorComponent.new(container:, item:)
       end

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