plum-cms 0.1.0

data/app/helpers/application_helper.rb

@@ -0,0 +1,2 @@
+module ApplicationHelper
+end

data/app/helpers/markdown_helper.rb

@@ -0,0 +1,21 @@
+module MarkdownHelper
+  def markdown(text)
+    return "" if text.blank?
+
+    renderer = Redcarpet::Render::HTML.new(
+      hard_wrap: true,
+      link_attributes: { target: "_blank", rel: "noopener" }
+    )
+
+    markdown = Redcarpet::Markdown.new(renderer,
+      autolink: true,
+      tables: true,
+      fenced_code_blocks: true,
+      strikethrough: true,
+      superscript: true,
+      no_intra_emphasis: true
+    )
+
+    markdown.render(text).html_safe
+  end
+end

data/app/helpers/plum/cp/assets_helper.rb

@@ -0,0 +1,21 @@
+module Plum
+  module Cp
+    module AssetsHelper
+      def plum_asset_label(asset)
+        [ asset.filename, asset.alt_text.presence ].compact.join(" - ")
+      end
+
+      def plum_asset_image_url(asset)
+        return unless asset&.file&.attached?
+
+        asset.url
+      end
+
+      def plum_asset_file_size(asset)
+        return "0 B" unless asset.file.attached?
+
+        number_to_human_size(asset.file.byte_size)
+      end
+    end
+  end
+end

data/app/helpers/plum/cp/theme_settings_helper.rb

@@ -0,0 +1,26 @@
+module Plum
+  module Cp
+    module ThemeSettingsHelper
+      def theme_setting_label(field)
+        field["label"].presence || field["handle"].to_s.humanize
+      end
+
+      def theme_setting_options(field)
+        Array(field["options"]).filter_map do |option|
+          if option.is_a?(Hash)
+            normalized = option.deep_stringify_keys
+            value = normalized["value"].to_s
+            next if value.blank?
+
+            [ normalized["label"].presence || value.humanize, value ]
+          else
+            value = option.to_s
+            next if value.blank?
+
+            [ value.humanize, value ]
+          end
+        end
+      end
+    end
+  end
+end

data/app/javascript/application.js

@@ -0,0 +1,18 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"
+import "controllers"
+import "lexxy"
+
+document.addEventListener("turbo:submit-start", (event) => {
+  event.target.querySelectorAll("lexxy-editor[data-hidden-field]").forEach((editor) => {
+    const hidden = document.getElementById(editor.dataset.hiddenField)
+    if (hidden) hidden.value = editor.value
+  })
+})
+
+document.addEventListener("submit", (event) => {
+  event.target.querySelectorAll("lexxy-editor[data-hidden-field]").forEach((editor) => {
+    const hidden = document.getElementById(editor.dataset.hiddenField)
+    if (hidden) hidden.value = editor.value
+  })
+})

data/app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

data/app/javascript/controllers/index.js

@@ -0,0 +1,4 @@
+// Import and register all your controllers from the importmap via controllers/**/*_controller
+import { application } from "controllers/application"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)

data/app/javascript/controllers/plum/blocks_editor_controller.js

@@ -0,0 +1,275 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Plum's own simple block editor (no GrapesJS).
+//
+// A calm vertical list of block "cards" — add, reorder, remove — each showing
+// its theme-declared fields as plain inputs. The block library comes from the
+// active theme via Plum::BlockEditorConfig (configValue); the editor never reads
+// a theme directly. The stored value is the canonical ordered array of
+// { id, type, fields }, persisted as JSON in the hidden input.
+export default class extends Controller {
+  static targets = ["input", "list", "picker", "empty"]
+  static values = { config: Object, assetsUrl: String, uploadUrl: String }
+
+  connect() {
+    this.defs = this.configValue.blocks || []
+    this.defsByType = Object.fromEntries(this.defs.map((d) => [d.id, d]))
+    this.blocks = this.readInitial()
+    this.render()
+  }
+
+  readInitial() {
+    try {
+      const parsed = JSON.parse(this.inputTarget.value || "[]")
+      return Array.isArray(parsed) ? parsed : []
+    } catch (_e) {
+      return []
+    }
+  }
+
+  add(event) {
+    event.preventDefault()
+    const type = this.hasPickerTarget ? this.pickerTarget.value : this.defs[0]?.id
+    if (!type || !this.defsByType[type]) return
+    this.blocks.push({ id: this.uuid(), type, fields: {} })
+    this.render()
+  }
+
+  remove(event) {
+    event.preventDefault()
+    const index = Number(event.currentTarget.dataset.index)
+    this.blocks.splice(index, 1)
+    this.render()
+  }
+
+  move(event) {
+    event.preventDefault()
+    const index = Number(event.currentTarget.dataset.index)
+    const target = index + Number(event.currentTarget.dataset.delta)
+    if (target < 0 || target >= this.blocks.length) return
+    const [item] = this.blocks.splice(index, 1)
+    this.blocks.splice(target, 0, item)
+    this.render()
+  }
+
+  fieldChanged(event) {
+    const index = Number(event.currentTarget.dataset.index)
+    const handle = event.currentTarget.dataset.field
+    const block = this.blocks[index]
+    if (!block) return
+    block.fields = block.fields || {}
+    block.fields[handle] = event.currentTarget.type === "checkbox"
+      ? event.currentTarget.checked
+      : event.currentTarget.value
+    this.serialize()
+  }
+
+  serialize() {
+    this.inputTarget.value = JSON.stringify(this.blocks)
+  }
+
+  render() {
+    this.serialize()
+    this.listTarget.innerHTML = ""
+    this.blocks.forEach((block, index) => this.listTarget.appendChild(this.card(block, index)))
+    if (this.hasEmptyTarget) this.emptyTarget.classList.toggle("hidden", this.blocks.length > 0)
+  }
+
+  card(block, index) {
+    const def = this.defsByType[block.type] || { label: block.type, fields: [] }
+    const card = document.createElement("div")
+    card.className = "rounded-lg border border-gray-200 bg-white shadow-sm"
+
+    const header = document.createElement("div")
+    header.className = "flex items-center justify-between border-b border-gray-100 px-4 py-2.5"
+    const title = document.createElement("span")
+    title.className = "text-sm font-semibold text-gray-800"
+    title.textContent = def.label || block.type
+    header.appendChild(title)
+
+    const controls = document.createElement("div")
+    controls.className = "flex items-center gap-1"
+    controls.appendChild(this.iconButton("↑", "move", { index, delta: -1 }, index === 0))
+    controls.appendChild(this.iconButton("↓", "move", { index, delta: 1 }, index === this.blocks.length - 1))
+    controls.appendChild(this.iconButton("Remove", "remove", { index }, false, "text-red-600 hover:text-red-700"))
+    header.appendChild(controls)
+    card.appendChild(header)
+
+    const body = document.createElement("div")
+    body.className = "space-y-3 px-4 py-3"
+    if ((def.fields || []).length === 0) {
+      const none = document.createElement("p")
+      none.className = "text-sm text-gray-400"
+      none.textContent = "This block has no editable fields."
+      body.appendChild(none)
+    }
+    ;(def.fields || []).forEach((f) => body.appendChild(this.field(f, block, index)))
+    card.appendChild(body)
+    return card
+  }
+
+  field(fieldDef, block, index) {
+    const stored = block.fields ? block.fields[fieldDef.handle] : undefined
+    const value = stored === undefined || stored === null ? "" : stored
+
+    if (fieldDef.type === "image" && this.hasAssetsUrlValue) {
+      return this.imagePickerField(fieldDef, index, value)
+    }
+
+    const wrap = document.createElement("label")
+    wrap.className = "block space-y-1"
+    const label = document.createElement("span")
+    label.className = "block text-xs font-medium text-gray-600"
+    label.textContent = fieldDef.label || fieldDef.handle
+    wrap.appendChild(label)
+
+    const cls = "block w-full rounded-md border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-purple-500 focus:outline-none focus:ring-purple-500"
+
+    let input
+    switch (fieldDef.type) {
+      case "textarea":
+      case "rich_text":
+        input = document.createElement("textarea")
+        input.rows = 4
+        input.className = cls
+        input.value = value
+        break
+      case "boolean":
+        input = document.createElement("input")
+        input.type = "checkbox"
+        input.checked = value === true || value === "true"
+        break
+      case "select":
+        input = document.createElement("select")
+        input.className = cls
+        ;(fieldDef.options || []).forEach((o) => {
+          const opt = document.createElement("option")
+          const v = typeof o === "object" ? o.value : o
+          opt.value = v
+          opt.textContent = typeof o === "object" ? o.label : o
+          if (String(v) === String(value)) opt.selected = true
+          input.appendChild(opt)
+        })
+        break
+      case "date":
+        input = document.createElement("input")
+        input.type = "date"
+        input.className = cls
+        input.value = value
+        break
+      default:
+        input = document.createElement("input")
+        input.type = "text"
+        input.className = cls
+        input.value = value
+    }
+
+    input.dataset.index = index
+    input.dataset.field = fieldDef.handle
+    input.dataset.action = "input->plum--blocks-editor#fieldChanged change->plum--blocks-editor#fieldChanged"
+
+    wrap.appendChild(input)
+    return wrap
+  }
+
+  // Builds a nested plum--image-picker for an image block field. The picker's
+  // hidden input doubles as this block editor's field input (it carries the
+  // data-index/data-field/data-action so selecting an asset updates the block).
+  imagePickerField(fieldDef, index, value) {
+    // NOTE: data-* attributes with dashes/colons (Stimulus target/value names)
+    // must be set via setAttribute — assigning through element.dataset[...] with
+    // such keys throws a SyntaxError.
+    const wrap = document.createElement("div")
+    wrap.className = "space-y-1"
+    wrap.setAttribute("data-controller", "plum--image-picker")
+    wrap.setAttribute("data-plum--image-picker-assets-url-value", this.assetsUrlValue)
+    wrap.setAttribute("data-plum--image-picker-upload-url-value", this.uploadUrlValue)
+
+    const label = document.createElement("span")
+    label.className = "block text-xs font-medium text-gray-600"
+    label.textContent = fieldDef.label || fieldDef.handle
+    wrap.appendChild(label)
+
+    const input = document.createElement("input")
+    input.type = "hidden"
+    input.value = value
+    input.setAttribute("data-plum--image-picker-target", "input")
+    // The image picker (a separate, nested controller) updates this hidden input
+    // and dispatches input/change. We listen DIRECTLY rather than via a Stimulus
+    // data-action so the update is captured reliably regardless of cross-controller
+    // routing. The closure captures the current index/handle (recreated on render).
+    const persist = () => {
+      const block = this.blocks[index]
+      if (!block) return
+      block.fields = block.fields || {}
+      block.fields[fieldDef.handle] = input.value
+      this.serialize()
+    }
+    input.addEventListener("input", persist)
+    input.addEventListener("change", persist)
+    wrap.appendChild(input)
+
+    const preview = document.createElement("div")
+    preview.setAttribute("data-plum--image-picker-target", "preview")
+    wrap.appendChild(preview)
+
+    const controls = document.createElement("div")
+    controls.className = "flex items-center gap-2"
+    controls.appendChild(this.pickerButton("Choose image", "toggle", "rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"))
+    controls.appendChild(this.pickerButton("Remove", "clear", "text-sm text-gray-500 hover:text-gray-700"))
+    wrap.appendChild(controls)
+
+    const panel = document.createElement("div")
+    panel.className = "hidden rounded-lg border border-gray-200 bg-gray-50 p-3"
+    panel.setAttribute("data-plum--image-picker-target", "panel")
+
+    const status = document.createElement("p")
+    status.className = "mb-2 text-xs font-medium text-gray-500"
+    status.setAttribute("data-plum--image-picker-target", "status")
+    panel.appendChild(status)
+
+    const grid = document.createElement("div")
+    grid.className = "grid grid-cols-3 gap-2 sm:grid-cols-4"
+    grid.setAttribute("data-plum--image-picker-target", "grid")
+    panel.appendChild(grid)
+
+    const uploadWrap = document.createElement("div")
+    uploadWrap.className = "mt-3 border-t border-gray-200 pt-3"
+    const file = document.createElement("input")
+    file.type = "file"
+    file.accept = "image/*"
+    file.className = "block w-full text-sm text-gray-700"
+    file.setAttribute("data-plum--image-picker-target", "file")
+    file.setAttribute("data-action", "change->plum--image-picker#upload")
+    uploadWrap.appendChild(file)
+    panel.appendChild(uploadWrap)
+
+    wrap.appendChild(panel)
+    return wrap
+  }
+
+  pickerButton(text, action, className) {
+    const btn = document.createElement("button")
+    btn.type = "button"
+    btn.className = className
+    btn.textContent = text
+    btn.dataset.action = `plum--image-picker#${action}`
+    return btn
+  }
+
+  iconButton(text, action, data, disabled, extra = "") {
+    const btn = document.createElement("button")
+    btn.type = "button"
+    btn.disabled = disabled
+    btn.className = `rounded px-2 py-1 text-xs font-medium text-gray-500 hover:bg-gray-100 disabled:opacity-30 ${extra}`.trim()
+    btn.textContent = text
+    Object.entries(data).forEach(([k, v]) => { btn.dataset[k] = v })
+    btn.dataset.action = `plum--blocks-editor#${action}`
+    return btn
+  }
+
+  uuid() {
+    if (window.crypto && window.crypto.randomUUID) return window.crypto.randomUUID()
+    return `b-${Math.random().toString(36).slice(2)}${Date.now().toString(36)}`
+  }
+}

data/app/javascript/controllers/plum/blueprint_controller.js

@@ -0,0 +1,120 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["fields", "input"]
+
+  connect() {
+    this.syncFieldConfigVisibility()
+    this.updateHiddenField()
+  }
+
+  addField(event) {
+    event.preventDefault()
+
+    const fieldHtml = `
+      <div class="grid grid-cols-1 gap-4 p-4 bg-gray-50 rounded-lg sm:grid-cols-2 lg:grid-cols-5" data-plum--blueprint-target="field">
+        <input type="text" placeholder="handle" data-field="handle"
+               data-action="input->plum--blueprint#inputChanged"
+               class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 font-mono text-sm">
+        <select data-field="type" data-action="change->plum--blueprint#inputChanged"
+                class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 text-sm">
+          <option value="text">Text</option>
+          <option value="textarea">Textarea</option>
+          <option value="rich_text">Rich Text</option>
+          <option value="number">Number</option>
+          <option value="boolean">Boolean</option>
+          <option value="date">Date</option>
+          <option value="select">Select</option>
+          <option value="checkboxes">Checkboxes</option>
+          <option value="color">Color</option>
+          <option value="url">URL</option>
+          <option value="taxonomy">Taxonomy</option>
+          <option value="image">Image</option>
+          <option value="relationship">Relationship</option>
+          <option value="blocks">Blocks</option>
+        </select>
+        <input type="text" placeholder="Label" data-field="label"
+               data-action="input->plum--blueprint#inputChanged"
+               class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 text-sm">
+        <input type="text" placeholder="Related type handle" data-field="content_type" data-field-config="relationship"
+               data-action="input->plum--blueprint#inputChanged"
+               class="hidden px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 font-mono text-sm">
+        <input type="text" placeholder="Taxonomy handle" data-field="taxonomy" data-field-config="taxonomy"
+               data-action="input->plum--blueprint#inputChanged"
+               class="hidden px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 font-mono text-sm">
+        <input type="text" placeholder="Option 1, Option 2, Option 3" data-field="options" data-field-config="select checkboxes"
+               data-action="input->plum--blueprint#inputChanged"
+               class="hidden px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 text-sm">
+        <button type="button" data-action="plum--blueprint#removeField" class="justify-self-start text-red-500 hover:text-red-700">
+          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+          </svg>
+        </button>
+      </div>
+    `
+
+    this.fieldsTarget.insertAdjacentHTML('beforeend', fieldHtml)
+    this.syncFieldConfigVisibility()
+    this.updateHiddenField()
+  }
+
+  removeField(event) {
+    event.preventDefault()
+    const fieldDiv = event.currentTarget.closest('[data-plum--blueprint-target="field"]')
+    fieldDiv.remove()
+    this.updateHiddenField()
+  }
+
+  updateHiddenField() {
+    const fields = []
+    const fieldElements = this.fieldsTarget.querySelectorAll('[data-plum--blueprint-target="field"]')
+
+    fieldElements.forEach(fieldEl => {
+      const handle = fieldEl.querySelector('[data-field="handle"]')?.value
+      const type = fieldEl.querySelector('[data-field="type"]')?.value
+      const label = fieldEl.querySelector('[data-field="label"]')?.value
+      const contentType = fieldEl.querySelector('[data-field="content_type"]')?.value?.trim()
+
+      if (handle) {
+        const field = { handle, type, label }
+
+        if (type === "relationship" && contentType) {
+          field.content_type = contentType
+        }
+
+        const taxonomyVal = fieldEl.querySelector('[data-field="taxonomy"]')?.value?.trim()
+        if (type === "taxonomy" && taxonomyVal) {
+          field.taxonomy = taxonomyVal
+        }
+
+        const optionsVal = fieldEl.querySelector('[data-field="options"]')?.value?.trim()
+        if ((type === "select" || type === "checkboxes") && optionsVal) {
+          field.options = optionsVal.split(",").map(o => o.trim()).filter(Boolean)
+        }
+
+        fields.push(field)
+      }
+    })
+
+    this.inputTarget.value = JSON.stringify({ fields })
+  }
+
+  inputChanged(event) {
+    const fieldEl = event.target.closest('[data-plum--blueprint-target="field"]')
+    if (fieldEl) this.syncFieldConfigVisibility(fieldEl)
+
+    this.updateHiddenField()
+  }
+
+  syncFieldConfigVisibility(fieldEl = null) {
+    const fieldElements = fieldEl ? [fieldEl] : this.fieldsTarget.querySelectorAll('[data-plum--blueprint-target="field"]')
+
+    fieldElements.forEach(fieldEl => {
+      const type = fieldEl.querySelector('[data-field="type"]')?.value
+      fieldEl.querySelectorAll('[data-field-config]').forEach(configEl => {
+        const configTypes = configEl.dataset.fieldConfig.split(" ")
+        configEl.classList.toggle("hidden", !configTypes.includes(type))
+      })
+    })
+  }
+}

data/app/javascript/controllers/plum/form_fields_controller.js

@@ -0,0 +1,84 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["fields", "input"]
+
+  connect() {
+    this.updateHiddenField()
+  }
+
+  addField(event) {
+    event.preventDefault()
+
+    this.fieldsTarget.insertAdjacentHTML("beforeend", this.fieldHtml())
+    this.updateHiddenField()
+  }
+
+  removeField(event) {
+    event.preventDefault()
+    event.currentTarget.closest("[data-plum--form-fields-target='field']").remove()
+    this.updateHiddenField()
+  }
+
+  inputChanged() {
+    this.updateHiddenField()
+  }
+
+  updateHiddenField() {
+    const fields = []
+    const fieldElements = this.fieldsTarget.querySelectorAll("[data-plum--form-fields-target='field']")
+
+    fieldElements.forEach((fieldEl) => {
+      const handle = fieldEl.querySelector("[data-field='handle']")?.value
+      const type = fieldEl.querySelector("[data-field='type']")?.value
+      const label = fieldEl.querySelector("[data-field='label']")?.value
+      const required = fieldEl.querySelector("[data-field='required']")?.checked
+      const options = fieldEl.querySelector("[data-field='options']")?.value
+
+      if (handle) {
+        fields.push({
+          handle,
+          type,
+          label,
+          required,
+          options: options ? options.split(",").map((option) => option.trim()).filter(Boolean) : []
+        })
+      }
+    })
+
+    this.inputTarget.value = JSON.stringify({ fields })
+  }
+
+  fieldHtml() {
+    return `
+      <div class="grid grid-cols-1 gap-4 p-4 bg-gray-50 rounded-lg sm:grid-cols-2" data-plum--form-fields-target="field">
+        <input type="text" placeholder="handle" data-field="handle"
+               data-action="input->plum--form-fields#inputChanged"
+               class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 font-mono text-sm">
+        <input type="text" placeholder="Label" data-field="label"
+               data-action="input->plum--form-fields#inputChanged"
+               class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 text-sm">
+        <select data-field="type" data-action="change->plum--form-fields#inputChanged"
+                class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 text-sm">
+          <option value="text">Text</option>
+          <option value="email">Email</option>
+          <option value="textarea">Textarea</option>
+          <option value="select">Select</option>
+          <option value="checkbox">Checkbox</option>
+        </select>
+        <input type="text" placeholder="Options, comma-separated" data-field="options"
+               data-action="input->plum--form-fields#inputChanged"
+               class="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 text-sm">
+        <label class="flex items-center gap-2 text-sm text-gray-700">
+          <input type="checkbox" data-field="required" data-action="change->plum--form-fields#inputChanged"
+                 class="h-4 w-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500">
+          Required
+        </label>
+        <button type="button" data-action="plum--form-fields#removeField"
+                class="justify-self-start text-sm font-medium text-red-700 hover:text-red-700">
+          Remove
+        </button>
+      </div>
+    `
+  }
+}