katalyst-content 2.2.0 → 2.3.0

data/app/assets/stylesheets/katalyst/content/editor/_variables.scss

@@ -0,0 +1,26 @@
+$grey-light: #f4f4f4 !default;
+$grey: #ececec !default;
+$grey-dark: #999 !default;
+$table-hover-background: #fff0eb !default;
+$primary-color: #ff521f !default;
+
+$row-inset: 2rem !default;
+$row-height: 3rem !default;
+
+$table-header-color: $grey !default;
+$row-background-color: $grey-light !default;
+$row-hover-color: $table-hover-background !default;
+$icon-active-color: $primary-color !default;
+$icon-passive-color: $grey-dark !default;
+
+$status-published-background-color: #ebf9eb !default;
+$status-published-border-color: #4dd45c !default;
+$status-published-color: #4dd45c !default;
+
+$status-draft-background-color: #fefaf3 !default;
+$status-draft-border-color: #ffa800 !default;
+$status-draft-color: #ffa800 !default;
+
+$status-dirty-background-color: #eee !default;
+$status-dirty-border-color: #888 !default;
+$status-dirty-color: #aaa !default;

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

@@ -10,6 +10,10 @@ module Katalyst
           def prefix_partial_path_with_controller_namespace
             false
           end
+
+          def content_routes
+            katalyst_content
+          end
         end
 
         def call

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    class TablesController < ItemsController
+      def update
+        item.attributes = item_params
+
+        if item.valid?
+          render :update, locals: { item_editor: }
+        else
+          render :update, locals: { item_editor: }, status: :unprocessable_entity
+        end
+      end
+      alias_method :create, :update
+
+      private
+
+      def item_editor
+        editor.item_editor(item:)
+      end
+    end
+  end
+end

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

@@ -3,6 +3,8 @@
 module Katalyst
   module Content
     module EditorHelper
+      include TableHelper
+
       using Katalyst::HtmlAttributes::HasHtmlAttributes
 
       def content_editor_rich_text_attributes(attributes = {})

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

@@ -3,6 +3,8 @@
 module Katalyst
   module Content
     module FrontendHelper
+      include TableHelper
+
       # 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

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

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module TableHelper
+      mattr_accessor(:sanitizer, default: Rails::HTML5::Sanitizer.safe_list_sanitizer.new)
+      mattr_accessor(:scrubber)
+
+      # Normalize table content and render to an HTML string (un-sanitised).
+      #
+      # @param table [Katalyst::Content::Table]
+      # @param heading [Boolean] whether to add the heading as a caption
+      # @return [String] un-sanitised HTML as text
+      def normalize_content_table(table, heading: true)
+        TableNormalizer.new(table, heading:).to_html
+      end
+
+      # Sanitize table content and render to an HTML string (un-sanitised).
+      #
+      # @param content [String] un-sanitised HTML as text
+      # @return [ActiveSupport::SafeBuffer] sanitised HTML
+      def sanitize_content_table(content)
+        sanitizer.sanitize(
+          content,
+          tags:       content_table_allowed_tags,
+          attributes: content_table_allowed_attributes,
+          scrubber:,
+        ).html_safe # rubocop:disable Rails/OutputSafety
+      end
+
+      private
+
+      def content_table_allowed_tags
+        Katalyst::Content::Config.table_sanitizer_allowed_tags
+      end
+
+      def content_table_allowed_attributes
+        Katalyst::Content::Config.table_sanitizer_allowed_attributes
+      end
+
+      # rubocop:disable Rails/HelperInstanceVariable
+      class TableNormalizer
+        attr_reader :node, :heading_rows, :heading_columns
+
+        delegate_missing_to :@node
+
+        def initialize(table, heading: true)
+          @table   = table
+          @heading = heading
+
+          root  = ActionText::Fragment.from_html(table.content&.body&.to_html || "").source
+          @node = root.name == "table" ? root : root.at_css("table")
+
+          return unless @node
+
+          @heading_rows = @table.heading_rows.clamp(0..css("tr").length)
+          @heading_columns = @table.heading_columns.clamp(0..)
+        end
+
+        def set_caption!
+          return if at_css("caption")
+
+          prepend_child("<caption>#{@table.heading}</caption>")
+        end
+
+        # move cells between thead and tbody based on heading_rows
+        def set_header_rows!
+          rows = node.css("tr")
+
+          if heading_rows > thead.css("tr").count
+            rows.slice(0, heading_rows).reject { |row| row.parent == thead }.each do |row|
+              thead.add_child(row)
+            end
+          else
+            rows.slice(heading_rows, rows.length).reject { |row| row.parent == tbody }.reverse_each do |row|
+              tbody.prepend_child(row)
+            end
+          end
+        end
+
+        # convert cells between th and td based on heading_columns
+        def set_header_columns!
+          matrix = []
+
+          css("tr").each_with_index do |row, y|
+            row.css("td, th").each_with_index do |cell, x|
+              # step right until we find an empty cell
+              x += 1 until matrix.dig(y, x).nil?
+
+              # update the type of the cell based on the heading configuration
+              set_cell_type!(cell, y, x)
+
+              # record the coordinates that this cell occupies in the matrix
+              # e.g. colspan=2 rowspan=3 would occupy 6 cells
+              row_range(cell, y).each do |ty|
+                col_range(cell, x).each do |tx|
+                  matrix[ty] ||= []
+                  matrix[ty][tx] = cell.text
+                end
+              end
+            end
+          end
+        end
+
+        def set_cell_type!(cell, row, col)
+          cell.name = col < heading_columns || row < heading_rows ? "th" : "td"
+        end
+
+        def to_html
+          return "" if @node.nil?
+
+          set_caption! if @heading && @table.heading.present? && !@table.heading_none?
+          set_header_rows!
+          set_header_columns!
+
+          @node.to_html
+        end
+
+        private
+
+        def thead
+          @thead ||= at_css("thead") || tbody.add_previous_sibling("<thead>").first
+        end
+
+        def tbody
+          @tbody ||= at_css("tbody") || add_child("<tbody>").last
+        end
+
+        def col_range(cell, from)
+          colspan = cell.attributes["colspan"]&.value&.to_i || 1
+          (from..).take(colspan)
+        end
+
+        def row_range(cell, from)
+          rowspan = cell.attributes["rowspan"]&.value&.to_i || 1
+          (from..).take(rowspan)
+        end
+      end
+
+      # rubocop:enable Rails/HelperInstanceVariable
+    end
+  end
+end

data/app/javascript/content/application.js

@@ -3,6 +3,7 @@ import ItemController from "./editor/item_controller";
 import ListController from "./editor/list_controller";
 import NewItemController from "./editor/new_item_controller";
 import StatusBarController from "./editor/status_bar_controller";
+import TableController from "./editor/table_controller";
 import TrixController from "./editor/trix_controller";
 
 const Definitions = [
@@ -26,6 +27,10 @@ const Definitions = [
     identifier: "content--editor--status-bar",
     controllerConstructor: StatusBarController,
   },
+  {
+    identifier: "content--editor--table",
+    controllerConstructor: TableController,
+  },
   {
     identifier: "content--editor--trix",
     controllerConstructor: TrixController,

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

@@ -84,7 +84,8 @@ export default class ListController extends Controller {
       this.enterCount <= 0 &&
       this.dragItem.dataset.hasOwnProperty("newItem")
     ) {
-      this.cancelDrag(event);
+      this.dragItem.remove();
+      this.reset();
     }
   }
 

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

@@ -0,0 +1,47 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class TableController extends Controller {
+  static targets = ["content", "input", "update"];
+
+  constructor(config) {
+    super(config);
+
+    this.observer = new MutationObserver(this.change);
+  }
+
+  connect() {
+    this.observer.observe(this.contentTarget, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true,
+    });
+  }
+
+  disconnect() {
+    this.observer.disconnect();
+  }
+
+  change = (mutations) => {
+    this.inputTarget.value = this.table.outerHTML;
+  };
+
+  update = () => {
+    this.updateTarget.click();
+  };
+
+  paste = (e) => {
+    e.preventDefault();
+
+    this.inputTarget.value = e.clipboardData.getData("text/html");
+
+    this.update();
+  };
+
+  /**
+   * @returns {HTMLTableElement} The table element from the content target
+   */
+  get table() {
+    return this.contentTarget.querySelector("table");
+  }
+}

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

@@ -7,6 +7,8 @@ module Katalyst
 
       validates :content, presence: true
 
+      default_scope { with_rich_text_content }
+
       def initialize_copy(source)
         super
 

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

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    class Table < Item
+      has_rich_text :content
+
+      attribute :heading_rows, :integer
+      attribute :heading_columns, :integer
+
+      validates :content, presence: true
+
+      default_scope { with_rich_text_content }
+
+      after_initialize :set_defaults
+
+      def initialize_copy(source)
+        super
+
+        content.body = source.content&.body if source.content.is_a?(ActionText::RichText)
+      end
+
+      def self.permitted_params
+        super + %i[content heading_rows heading_columns]
+      end
+
+      def valid?(context = nil)
+        super(context)
+      end
+
+      def to_plain_text
+        content.to_plain_text if visible?
+      end
+
+      def content=(value)
+        Tables::Importer.call(self, value)
+
+        set_defaults
+
+        content
+      end
+
+      private
+
+      def set_defaults
+        super
+
+        if content.present? && (fragment = content.body.fragment)
+          self.heading_rows    ||= fragment.find_all("thead > tr").count
+          self.heading_columns ||= fragment.find_all("tbody > tr:first-child > th").count
+        end
+      end
+    end
+  end
+end

data/app/models/katalyst/content/tables/importer.rb

@@ -0,0 +1,151 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Content
+    module Tables
+      class Importer
+        include ActiveModel::Model
+
+        delegate :config, to: Katalyst::Content::Config
+
+        delegate_missing_to :@node
+
+        attr_reader :table
+
+        # Update a table from an HTML5 fragment and apply normalisation rules.
+        #
+        # @param table [Katalyst::Content::Table] the table to update
+        # @param value [Nokogiri::XML::Node, ActionText::RichText, String] the provided HTML fragment
+        def self.call(table, value)
+          new(table).call(wrap(value))
+        end
+
+        def self.wrap(value)
+          case value
+          when Nokogiri::XML::Node
+            value
+          when ActionText::RichText
+            # clone body to avoid modifying the original
+            Nokogiri::HTML5.fragment(value.body.to_html)
+          else
+            Nokogiri::HTML5.fragment(value.to_s)
+          end
+        end
+
+        def initialize(table)
+          super()
+
+          @table = table
+        end
+
+        def call(fragment)
+          @node = fragment.name == "table" ? fragment : fragment.at_css("table")
+
+          unless @node&.name == "table"
+            table.content.body = nil
+            return self
+          end
+
+          # Convert b and i to strong and em
+          normalize_emphasis!
+
+          # Convert `td > strong` to th headings
+          promote_header_cells!
+
+          # Promote any rows with only <th> cells to <thead>
+          # This captures the pattern where a table has a header row but its
+          # in the tbody instead of the thead
+          promote_header_rows!
+
+          # Promote first row to caption if it only has one cell.
+          # This captures the pattern where a table has as single cell that spans
+          # the entire width of the table, and is used as a heading.
+          promote_header_row_caption! if header_row_caption?
+
+          # Update the table heading with the caption, if present, and remove from table
+          set_heading! if caption?
+
+          # Update the table's content with the normalized HTML.
+          table.content.body = to_html
+
+          table
+        end
+
+        def caption?
+          at_css("caption")&.text&.present?
+        end
+
+        def header_row_caption?
+          !at_css("caption") &&
+            (tr = at_css("thead > tr:first-child"))&.elements&.count == 1 &&
+            (tr.elements.first.attributes["colspan"]&.value&.to_i&.> 1)
+        end
+
+        def normalize_emphasis!
+          traverse do |node|
+            case node.name
+            when "b"
+              node.name = "strong"
+            when "i"
+              node.name = "em"
+            else
+              node
+            end
+          end
+        end
+
+        def promote_header_cells!
+          css("td:has(strong)").each { |cell| promote_cell_to_heading!(cell) }
+        end
+
+        # Converts a `td > strong` cell to a `th` cell by updating the cell name
+        # and replacing the cell's content with the strong tag's content.
+        def promote_cell_to_heading!(cell)
+          strong = cell.at_css("strong")
+
+          return unless cell.text.strip == strong.text.strip
+
+          cell.name = "th"
+
+          # remove strong by promoting its children
+          strong.before(strong.children)
+          strong.remove
+        end
+
+        def promote_header_rows!
+          css("tbody > tr").each do |tr|
+            break unless tr.elements.all? { |td| td.name == "th" }
+
+            promote_row_to_head!(tr)
+          end
+        end
+
+        # Moves a row from <tbody> to <thead>.
+        # If the table doesn't have a <thead>, one will be created.
+        def promote_row_to_head!(row)
+          at_css("tbody").before("<thead></thead>") unless at_css("thead")
+          at_css("thead") << row
+        end
+
+        # Promotes the first row to a caption if it only has one cell.
+        def promote_header_row_caption!
+          tr   = at_css("thead > tr:first-child")
+          cell = tr.elements.first
+          tr.remove
+          thead = at_css("thead")
+          thead.before("<caption></caption>")
+          thead.remove if thead.elements.empty?
+          at_css("caption").inner_html = cell.inner_html.strip
+        end
+
+        # Set heading from caption and remove the caption from the table.
+        def set_heading!
+          caption = at_css("caption")
+          table.heading       = caption.text.strip
+          table.heading_style = "default"
+          caption.remove
+        end
+      end
+    end
+  end
+end

data/app/views/katalyst/content/items/edit.html.erb

@@ -1,3 +1,8 @@
+<%# we're going to submit using multiple paths, turbo needs CSRF header token %>
+<% content_for :head do %>
+  <%= csrf_meta_tags %>
+<% end %>
+
 <%= render Kpop::ModalComponent.new(title: item_editor.title, layout: "side-panel") do %>
   <%= render item_editor %>
 <% end %>

data/app/views/katalyst/content/tables/_table.html+form.erb

@@ -0,0 +1,53 @@
+<%= form_with model: table, scope: :item, url: path, data: {
+      controller: "content--editor--table",
+    } do |form| %>
+  <%= render "hidden_fields", form: %>
+  <%= render "form_errors", form: %>
+
+  <div class="field">
+    <%= form.label :heading %>
+    <%= form.text_field :heading %>
+  </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 :background %>
+    <%= form.select :background, Katalyst::Content.config.backgrounds %>
+  </div>
+
+  <div class="field">
+    <%= form.label :visible %>
+    <%= form.check_box :visible %>
+  </div>
+
+  <div class="field">
+    <%= form.label :content %>
+    <% content = sanitize_content_table(normalize_content_table(form.object, heading: false)) %>
+    <div contenteditable="true"
+         data-content--editor--table-target="content"
+         data-action="paste->content--editor--table#paste">
+      <%= content %>
+    </div>
+    <%= form.hidden_field :content, value: content, data: { content__editor__table_target: "input" } %>
+  </div>
+
+  <div class="field">
+    <%= form.label :heading_rows %>
+    <%= form.text_field :heading_rows, type: :number, data: { action: "input->content--editor--table#update" } %>
+  </div>
+
+  <div class="field">
+    <%= form.label :heading_columns %>
+    <%= form.text_field :heading_columns, type: :number, data: { action: "input->content--editor--table#update" } %>
+  </div>
+
+  <%= form.submit "Done" %>
+  <%= link_to "Discard", :back %>
+  <%= form.button "Update",
+                  formaction: table.persisted? ? content_routes.table_path : content_routes.tables_path,
+                  data:       { content__editor__table_target: "update" } %>
+<% end %>

data/app/views/katalyst/content/tables/_table.html.erb

@@ -0,0 +1,3 @@
+<%= content_item_tag table do %>
+  <%= sanitize_content_table(normalize_content_table(table)) %>
+<% end %>

data/app/views/katalyst/content/tables/update.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace item_editor.id do %>
+  <%= render item_editor %>
+<% end %>

data/config/locales/en.yml

@@ -10,6 +10,8 @@ en:
         katalyst/content/item:
           content_type_invalid: file type not supported
           file_size_out_of_range: must be less than %{max_size}
+        katalyst/content/table:
+          table_missing: Table is missing or invalid
   views:
     katalyst:
       content:

data/config/routes.rb

@@ -1,4 +1,5 @@
 Katalyst::Content::Engine.routes.draw do
   resources :direct_uploads, only: :create
   resources :items
+  resources :tables, only: %i[create update]
 end

data/lib/katalyst/content/config.rb

@@ -13,6 +13,7 @@ module Katalyst
         %w[
           Katalyst::Content::Content
           Katalyst::Content::Figure
+          Katalyst::Content::Table
           Katalyst::Content::Section
           Katalyst::Content::Group
           Katalyst::Content::Column
@@ -26,6 +27,14 @@ module Katalyst
       config_accessor(:errors_component) { "Katalyst::Content::Editor::ErrorsComponent" }
 
       config_accessor(:base_controller) { "ApplicationController" }
+
+      # Sanitizer
+      config_accessor(:table_sanitizer_allowed_tags) do
+        %w[table thead tbody tr th td caption a strong em span br p text].freeze
+      end
+      config_accessor(:table_sanitizer_allowed_attributes) do
+        %w[colspan rowspan href].freeze
+      end
     end
   end
 end

data/spec/factories/katalyst/content/items.rb

@@ -39,4 +39,26 @@ FactoryBot.define do
   factory :katalyst_content_column, class: "Katalyst::Content::Column" do
     content_item_defaults
   end
+
+  factory :katalyst_content_table, class: "Katalyst::Content::Table" do
+    content_item_defaults
+    heading { "Contacts" }
+    heading_style { "none" }
+    content { <<~HTML }
+      <table>
+        <thead>
+        <tr>
+          <th>Name</th>
+          <th>Email</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr>
+          <td>John Doe</td>
+          <td>john.doe@example.com</td>
+        </tr>
+        </tbody>
+      </table>
+    HTML
+  end
 end