katalyst-content 0.1.0

data/app/assets/stylesheets/katalyst/content/editor/_item-actions.scss

@@ -0,0 +1,93 @@
+@use "icon" as *;
+
+[data-controller="content--editor--item"] {
+  [data-tree-accordion-controls] {
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    display: grid;
+  }
+
+  [data-tree-controls] {
+    display: flex;
+    align-items: center;
+  }
+
+  [data-tree-accordion-controls],
+  [data-tree-controls] {
+    [role="button"] {
+      @extend %icon-block;
+      &::before {
+        @extend %icon;
+      }
+    }
+  }
+
+  [role="img"][value="link"],
+  [role="img"][value="title"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: grid;
+    place-items: center;
+    border-radius: 2px;
+    background: var(--icon-active-color);
+    margin-right: 0.5rem;
+    flex-shrink: 0;
+
+    [data-invisible="true"] & {
+      background: var(--icon-passive-color);
+    }
+
+    &::before {
+      @extend %icon;
+      color: white;
+      font-size: 1.125rem;
+      line-height: 1.125rem;
+      text-align: center;
+    }
+
+    &[value="link"] {
+      &::before {
+        content: "#";
+      }
+    }
+
+    &[value="title"] {
+      &::before {
+        content: "T";
+      }
+    }
+  }
+
+  [role="img"][value="invisible"] {
+    @extend %icon-block;
+
+    &::before {
+      @extend %icon;
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_2189)'%3E%3Cpath d='M22.1699 0.329991C21.7304 -0.109509 21.0179 -0.109509 20.5784 0.329991L15.8399 5.06849C14.6219 4.69949 13.3334 4.50149 11.9984 4.50149C6.76494 4.50149 2.22744 7.54949 -0.00156052 12.0015C0.962939 13.926 2.35794 15.588 4.05294 16.8555L0.326939 20.5815C-0.112561 21.021 -0.112561 21.7335 0.326939 22.173C0.545939 22.392 0.833939 22.503 1.12194 22.503C1.40994 22.503 1.69794 22.3935 1.91694 22.173L22.1669 1.92299C22.6064 1.48349 22.6064 0.770991 22.1669 0.331491L22.1699 0.329991ZM9.74994 7.49999C10.7399 7.49999 11.5799 8.13899 11.8814 9.02849L9.02844 11.8815C8.14044 11.58 7.49994 10.74 7.49994 9.74999C7.49994 8.50799 8.50794 7.49999 9.74994 7.49999ZM2.58144 12C3.47844 10.581 4.67394 9.37649 6.08394 8.47799C6.17544 8.41949 6.26844 8.36249 6.36144 8.30699C6.12744 8.94749 5.99994 9.63899 5.99994 10.3605C5.99994 11.6475 6.40494 12.8385 7.09494 13.815L5.66694 15.243C4.43844 14.379 3.38844 13.2765 2.58144 12V12Z' fill='%2358607A'/%3E%3Cpath d='M18.0001 10.3589C18.0001 9.72295 17.9011 9.10945 17.7166 8.53345L10.1746 16.0754C10.7506 16.2599 11.3641 16.3589 12.0001 16.3589C15.3136 16.3589 18.0001 13.6724 18.0001 10.3589V10.3589Z' fill='%2358607A'/%3E%3Cpath d='M19.4536 6.79651L17.8276 8.42251C17.8576 8.44051 17.8876 8.45851 17.9161 8.47801C19.3261 9.37801 20.5216 10.5825 21.4186 12C20.5216 13.419 19.3261 14.6235 17.9161 15.522C16.1446 16.6515 14.0986 17.25 12.0001 17.25C11.0941 17.25 10.1971 17.139 9.3286 16.9215L7.5271 18.723C8.9266 19.2255 10.4326 19.5 12.0001 19.5C17.2336 19.5 21.7711 16.452 24.0001 12C22.9456 9.89251 21.3721 8.10001 19.4536 6.79651V6.79651Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_58_2189'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+    }
+  }
+
+  [role="button"][value="collapse"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1454)'%3E%3Cpath d='M15 8.33333L13.825 7.15833L10 10.975L6.175 7.15833L5 8.33333L10 13.3333L15 8.33333Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1454'%3E%3Crect width='20' height='20' fill='white' transform='translate(20) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="expand"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1454)'%3E%3Cpath d='M8.3332 5L7.1582 6.175L10.9749 10L7.1582 13.825L8.3332 15L13.3332 10L8.3332 5Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1454'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="de-nest"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1454)'%3E%3Cpath d='M11.6668 15L12.8418 13.825L9.02513 10L12.8418 6.175L11.6668 5L6.6668 10L11.6668 15Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1454'%3E%3Crect width='20' height='20' fill='white' transform='translate(20 20) rotate(180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="nest"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1454)'%3E%3Cpath d='M8.3332 5L7.1582 6.175L10.9749 10L7.1582 13.825L8.3332 15L13.3332 10L8.3332 5Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1454'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="edit"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1406)'%3E%3Cpath d='M2.25 12.9375V15.75H5.0625L13.3575 7.45504L10.545 4.64254L2.25 12.9375ZM15.5325 5.28004C15.825 4.98754 15.825 4.51504 15.5325 4.22254L13.7775 2.46754C13.485 2.17504 13.0125 2.17504 12.72 2.46754L11.3475 3.84004L14.16 6.65254L15.5325 5.28004V5.28004Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1406'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="remove"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1409)'%3E%3Cpath d='M4.5 14.25C4.5 15.075 5.175 15.75 6 15.75H12C12.825 15.75 13.5 15.075 13.5 14.25V5.25H4.5V14.25ZM14.25 3H11.625L10.875 2.25H7.125L6.375 3H3.75V4.5H14.25V3Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1409'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+}

data/app/assets/stylesheets/katalyst/content/editor/_item-rules.scss

@@ -0,0 +1,19 @@
+[data-controller="content--editor--list"] {
+  // Lower opacity for buttons you can't use
+  [data-deny-de-nest] [role="button"][value="de-nest"],
+  [data-deny-nest] [role="button"][value="nest"],
+  [data-deny-remove] [role="button"][value="remove"],
+  [data-deny-drag] [role="button"][value="drag"],
+  [data-deny-edit] [role="button"][value="edit"] {
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
+  // Only show 1 of the collapse / expand button
+  [data-deny-collapse] [role="button"][value="collapse"],
+  [data-deny-expand] [role="button"][value="expand"],
+  [data-invisible="false"] [role="img"][value="invisible"] {
+    display: none !important;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,39 @@
+@use "icon" as *;
+
+.content--editor--new-items {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+
+  [role="listitem"] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transform: translate3d(0, 0, 0);
+    cursor: grab;
+    background: white;
+    box-shadow: rgb(0 0 0 / 25%) 0 1px 1px, rgb(0 0 0 / 31%) 0 0 2px;
+    min-height: 5rem;
+    padding: 1.5rem;
+
+    &:hover {
+      box-shadow: rgb(0 0 0 / 25%) 0 1px 2px, rgb(0 0 0 / 31%) 0 0 5px;
+    }
+
+    &::before {
+      @extend %icon;
+      width: 2.5rem;
+      height: 2.5rem;
+      position: unset;
+    }
+
+    &[data-item-type="link"]:before {
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_67_1273)'%3E%3Cpath d='M16 22H32V26H16V22ZM40.2 24H44C44 18.48 39.52 14 34 14H26V17.8H34C37.42 17.8 40.2 20.58 40.2 24ZM7.8 24C7.8 20.58 10.58 17.8 14 17.8H22V14H14C8.48 14 4 18.48 4 24C4 29.52 8.48 34 14 34H22V30.2H14C10.58 30.2 7.8 27.42 7.8 24ZM38 24H34V30H28V34H34V40H38V34H44V30H38V24Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_67_1273'%3E%3Crect width='48' height='48' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+    }
+
+    &[data-item-type="button"]:before {
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_67_1276)'%3E%3Cpath d='M44 18V30C44 32.2 42.2 34 40 34H38V30H40V18H8V30H20V34H8C5.8 34 4 32.2 4 30V18C4 15.8 5.8 14 8 14H40C42.2 14 44 15.8 44 18ZM29 38L31.18 33.18L36 31L31.18 28.82L29 24L26.82 28.82L22 31L26.82 33.18L29 38ZM34 28L35.24 25.24L38 24L35.24 22.76L34 20L32.76 22.76L30 24L32.76 25.24L34 28ZM29 38L31.18 33.18L36 31L31.18 28.82L29 24L26.82 28.82L22 31L26.82 33.18L29 38ZM34 28L35.24 25.24L38 24L35.24 22.76L34 20L32.76 22.76L30 24L32.76 25.24L34 28Z' /%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_67_1276'%3E%3Crect width='48' height='48' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+    }
+  }
+}

data/app/assets/stylesheets/katalyst/content/editor/_status-bar.scss

@@ -0,0 +1,87 @@
+[data-controller="content--editor--status-bar"] {
+  min-height: 3rem;
+  line-height: 3rem;
+  padding: 0 1.25rem 0 1.5rem;
+  background: var(--background);
+  color: var(--color);
+  border: 1px solid var(--border);
+  margin-bottom: 1rem;
+
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "status actions";
+  align-items: baseline;
+  grid-column-gap: 2rem;
+
+  .status-text {
+    display: none;
+    grid-area: status;
+    font-weight: bold;
+  }
+
+  &[data-state="published"] .status-text[data-published],
+  &[data-state="draft"] .status-text[data-draft],
+  &[data-state="dirty"] .status-text[data-dirty] {
+    display: unset;
+  }
+
+  menu {
+    display: inline;
+    grid-area: actions;
+    margin: 0;
+    padding: 0;
+  }
+
+  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"],
+    [value="revert"],
+    [value="discard"] {
+      display: none;
+    }
+  }
+
+  &[data-state="draft"] {
+    [value="save"],
+    [value="discard"] {
+      display: none;
+    }
+  }
+
+  &[data-state="dirty"] {
+    [value="revert"] {
+      display: none;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    class ApplicationController < ActionController::Base
+    end
+  end
+end

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

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    class ItemsController < ApplicationController
+      before_action :set_container, only: %i[new create]
+      before_action :set_item, except: %i[new create]
+      before_action :set_editor_variant
+
+      helper EditorHelper
+
+      def new
+        render locals: { item: @container.items.build(item_params) }
+      end
+
+      def create
+        item = @container.items.build(item_params)
+        if item.save
+          render :update, locals: { item: item, previous: @container.items.build(type: item.type) }
+        else
+          render :new, status: :unprocessable_entity, locals: { item: item }
+        end
+      end
+
+      def edit
+        render locals: { item: @item }
+      end
+
+      def update
+        @item.attributes = item_params
+
+        if @item.valid?
+          previous = @item
+          @item    = @item.dup.tap(&:save!)
+          render locals: { item: @item, previous: previous }
+        else
+          render :edit, status: :unprocessable_entity, locals: { item: @item }
+        end
+      end
+
+      private
+
+      def item_params_type
+        type = params.require(:item).fetch(:type, "")
+        if Katalyst::Content.config.items.include?(type)
+          type.safe_constantize
+        else
+          Item
+        end
+      end
+
+      def item_params
+        params.require(:item).permit(item_params_type.permitted_params)
+      end
+
+      def set_container
+        @container = Item.new(item_params).container
+        raise ActiveRecord::RecordNotFound unless @container
+      end
+
+      def set_item
+        @item = Item.find(params[:id])
+      end
+
+      def set_editor_variant
+        request.variant << :form
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module ApplicationHelper
+    end
+  end
+end

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

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module Editor
+      class Base
+        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"
+
+        TURBO_FRAME = "content--editor--item-frame"
+
+        attr_accessor :template, :container
+
+        delegate_missing_to :template
+
+        def initialize(template, container)
+          self.template  = template
+          self.container = container
+        end
+
+        def container_form_id
+          dom_id(container, :items)
+        end
+
+        def attributes_scope
+          "#{container.model_name.param_key}[items_attributes][]"
+        end
+
+        private
+
+        def add_option(options, key, *path)
+          if path.length > 1
+            add_option(options[key] ||= {}, *path)
+          else
+            options[key] = [options[key], *path].compact.join(" ")
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module Editor
+      class Container < Base
+        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
+          submit->#{CONTAINER_CONTROLLER}#reindex
+          content:reindex->#{CONTAINER_CONTROLLER}#reindex
+          content:reset->#{CONTAINER_CONTROLLER}#reset
+        ACTIONS
+
+        def build(options)
+          form_with(model: container, **default_options(id: container_form_id, **options)) do |form|
+            concat hidden_input
+            concat(capture { yield form })
+          end
+        end
+
+        private
+
+        # Hidden input ensures that if the container is empty then the controller
+        # receives an empty array.
+        def hidden_input
+          tag.input(type: "hidden", name: "#{attributes_scope}[id]")
+        end
+
+        def default_options(options)
+          add_option(options, :data, :controller, CONTAINER_CONTROLLER)
+          add_option(options, :data, :action, ACTIONS)
+
+          # depth = options.delete(:depth) || container.depth
+          #
+          # add_option(options, :data, :"#{CONTAINER_CONTROLLER}-max-depth-value", depth) if depth
+
+          options
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module Editor
+      class Item < Base
+        attr_accessor :item
+
+        def build(item, **options, &block)
+          self.item = item
+          tag.div **default_options(id: dom_id(item), **options) do
+            concat(capture { yield self }) if block
+            concat fields(item)
+          end
+        end
+
+        def accordion_actions
+          tag.div role: "toolbar", data: { tree_accordion_controls: "" } do
+            concat tag.span(role: "button", value: "collapse",
+                            data: { action: "click->#{CONTAINER_CONTROLLER}#collapse", title: "Collapse tree" })
+            concat tag.span(role: "button", value: "expand",
+                            data: { action: "click->#{CONTAINER_CONTROLLER}#expand", title: "Expand tree" })
+          end
+        end
+
+        def item_actions
+          tag.div role: "toolbar", data: { tree_controls: "" } do
+            concat tag.span(role: "button", value: "de-nest",
+                            data: { action: "click->#{CONTAINER_CONTROLLER}#deNest", title: "Outdent" })
+            concat tag.span(role: "button", value: "nest",
+                            data: { action: "click->#{CONTAINER_CONTROLLER}#nest", title: "Indent" })
+            concat link_to("", edit_item_link,
+                           role: "button", title: "Edit", value: "edit",
+                           data: { turbo_frame: TURBO_FRAME })
+            concat tag.span(role: "button", value: "remove",
+                            data: { action: "click->#{CONTAINER_CONTROLLER}#remove", title: "Remove" })
+          end
+        end
+
+        def edit_item_link
+          if item.persisted?
+            katalyst_content.edit_item_path(item)
+          else
+            katalyst_content.new_item_path(item: item.attributes.slice("type", "container_id",
+                                                                       "container_type").compact)
+          end
+        end
+
+        def fields(item)
+          template.fields(attributes_scope, model: item, index: nil, skip_default_ids: true) do |f|
+            concat f.hidden_field(:id)
+            concat f.hidden_field(:depth)
+            concat f.hidden_field(:index)
+          end
+        end
+
+        private
+
+        def default_options(options)
+          add_option(options, :data, :controller, ITEM_CONTROLLER)
+
+          options
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module Editor
+      class List < Base
+        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
+        ACTIONS
+
+        def build(options, &_block)
+          tag.ol **default_options(id: container_form_id, **options) do
+            yield self
+          end
+        end
+
+        def items(*items)
+          render partial:    "katalyst/content/editor/item",
+                 layout:     "katalyst/content/editor/list_item",
+                 collection: items,
+                 as:         :item
+        end
+
+        private
+
+        def default_options(options)
+          add_option(options, :data, :controller, LIST_CONTROLLER)
+          add_option(options, :data, :action, ACTIONS)
+          add_option(options, :data, :"#{CONTAINER_CONTROLLER}_target", "container")
+
+          options
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module Editor
+      class NewItem < Base
+        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
+          dragstart->#{NEW_ITEM_CONTROLLER}#dragstart
+        ACTIONS
+
+        def build(item, **options, &block)
+          capture do
+            concat(tag.div(**default_options(options)) do
+              concat capture(&block)
+              concat item_template(item)
+            end)
+            concat turbo_replace_placeholder(item)
+          end
+        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.
+        def turbo_replace_placeholder(item)
+          turbo_stream.replace dom_id(item) do
+            content_editor_item(item: item, data: { delete: "" })
+          end
+        end
+
+        # 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.
+        def item_template(item)
+          tag.template data: { "#{NEW_ITEM_CONTROLLER}-target" => "template" } do
+            content_editor_items(item: item)
+          end
+        end
+
+        private
+
+        def default_options(options)
+          add_option(options, :draggable, true)
+          add_option(options, :role, "listitem")
+          add_option(options, :data, :turbo_frame, TURBO_FRAME)
+          add_option(options, :data, :controller, NEW_ITEM_CONTROLLER)
+          add_option(options, :data, :action, ACTIONS)
+
+          options
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module Editor
+      class StatusBar < Base
+        ACTIONS = <<~ACTIONS.gsub(/\s+/, " ").freeze
+          content:change@document->#{STATUS_BAR_CONTROLLER}#change
+        ACTIONS
+
+        def build(**options)
+          tag.div **default_options(**options) do
+            concat status(:published, last_update: l(container.updated_at, format: :short))
+            concat status(:draft)
+            concat status(:dirty)
+            concat actions
+          end
+        end
+
+        def status(state, **options)
+          tag.span(t("views.katalyst.content.editor.#{state}_html", **options),
+                   class: "status-text",
+                   data:  { state => "" })
+        end
+
+        def actions
+          tag.menu do
+            concat action(:discard, class: "button button--text")
+            concat action(:revert, class: "button button--text") if container.state == :draft
+            concat action(:save, class: "button button--secondary")
+            concat action(:publish, class: "button button--primary")
+          end
+        end
+
+        def action(action, **options)
+          tag.li do
+            button_tag(t("views.katalyst.content.editor.#{action}"),
+                       name:  "commit",
+                       value: action,
+                       form:  container_form_id,
+                       **options)
+          end
+        end
+
+        private
+
+        def default_options(**options)
+          add_option(options, :data, :controller, STATUS_BAR_CONTROLLER)
+          add_option(options, :data, :action, ACTIONS)
+          add_option(options, :data, :state, container.state)
+
+          options
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module EditorHelper
+      def content_editor_new_items(container:)
+        Katalyst::Content.config.items.map do |item_class|
+          item_class = item_class.is_a?(String) ? item_class.safe_constantize : item_class
+          item_class.new(container: container)
+        end
+      end
+
+      def content_editor_container(container:, **options, &block)
+        Editor::Container.new(self, container).build(options, &block)
+      end
+
+      def content_editor_list(container:, items: container.draft_items, **options)
+        Editor::List.new(self, container).build(options) do |list|
+          list.items(*items) if items.present?
+        end
+      end
+
+      # Generate items without their list wrapper, similar to form_with/fields
+      def content_editor_items(item:, container: item.container)
+        Editor::List.new(self, container).items(item)
+      end
+
+      # Gene
+      def content_editor_new_item(item:, container: item.container, **options, &block)
+        Editor::NewItem.new(self, container).build(item, **options, &block)
+      end
+
+      def content_editor_item(item:, container: item.container, **options, &block)
+        Editor::Item.new(self, container).build(item, **options, &block)
+      end
+
+      def content_editor_status_bar(container:, **options)
+        Editor::StatusBar.new(self, container).build(**options)
+      end
+    end
+  end
+end