inkpen 0.7.1

data/app/assets/javascripts/inkpen/extensions/inkpen_table/inkpen_table_cell.js

@@ -0,0 +1,100 @@
+/**
+ * InkpenTableCell Extension
+ *
+ * Enhanced table cell with alignment, background color, and text color support.
+ *
+ * @since 0.8.0
+ */
+
+import TableCell from "@tiptap/extension-table-cell"
+
+export const InkpenTableCell = TableCell.extend({
+  name: "tableCell",
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+
+      // Text alignment
+      align: {
+        default: null,
+        parseHTML: element => {
+          return element.getAttribute("data-align") ||
+                 element.style.textAlign ||
+                 null
+        },
+        renderHTML: attributes => {
+          if (!attributes.align) return {}
+          return {
+            "data-align": attributes.align,
+            style: `text-align: ${attributes.align}`
+          }
+        }
+      },
+
+      // Background color
+      background: {
+        default: null,
+        parseHTML: element => element.getAttribute("data-background"),
+        renderHTML: attributes => {
+          if (!attributes.background) return {}
+          return { "data-background": attributes.background }
+        }
+      },
+
+      // Text color (NEW)
+      textColor: {
+        default: null,
+        parseHTML: element => element.getAttribute("data-text-color"),
+        renderHTML: attributes => {
+          if (!attributes.textColor) return {}
+          return { "data-text-color": attributes.textColor }
+        }
+      },
+
+      // Colspan
+      colspan: {
+        default: 1,
+        parseHTML: element => {
+          const colspan = element.getAttribute("colspan")
+          return colspan ? parseInt(colspan, 10) : 1
+        },
+        renderHTML: attributes => {
+          if (attributes.colspan === 1) return {}
+          return { colspan: attributes.colspan }
+        }
+      },
+
+      // Rowspan
+      rowspan: {
+        default: 1,
+        parseHTML: element => {
+          const rowspan = element.getAttribute("rowspan")
+          return rowspan ? parseInt(rowspan, 10) : 1
+        },
+        renderHTML: attributes => {
+          if (attributes.rowspan === 1) return {}
+          return { rowspan: attributes.rowspan }
+        }
+      },
+
+      // Column width for resizing
+      colwidth: {
+        default: null,
+        parseHTML: element => {
+          const colwidth = element.getAttribute("colwidth")
+          return colwidth ? colwidth.split(",").map(Number) : null
+        },
+        renderHTML: attributes => {
+          if (!attributes.colwidth) return {}
+          return {
+            colwidth: attributes.colwidth.join(","),
+            style: `width: ${attributes.colwidth[0]}px`
+          }
+        }
+      }
+    }
+  }
+})
+
+export default InkpenTableCell

data/app/assets/javascripts/inkpen/extensions/inkpen_table/inkpen_table_header.js

@@ -0,0 +1,100 @@
+/**
+ * InkpenTableHeader Extension
+ *
+ * Enhanced table header cell with alignment, background color, and text color support.
+ *
+ * @since 0.8.0
+ */
+
+import TableHeader from "@tiptap/extension-table-header"
+
+export const InkpenTableHeader = TableHeader.extend({
+  name: "tableHeader",
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+
+      // Text alignment
+      align: {
+        default: null,
+        parseHTML: element => {
+          return element.getAttribute("data-align") ||
+                 element.style.textAlign ||
+                 null
+        },
+        renderHTML: attributes => {
+          if (!attributes.align) return {}
+          return {
+            "data-align": attributes.align,
+            style: `text-align: ${attributes.align}`
+          }
+        }
+      },
+
+      // Background color
+      background: {
+        default: null,
+        parseHTML: element => element.getAttribute("data-background"),
+        renderHTML: attributes => {
+          if (!attributes.background) return {}
+          return { "data-background": attributes.background }
+        }
+      },
+
+      // Text color (NEW)
+      textColor: {
+        default: null,
+        parseHTML: element => element.getAttribute("data-text-color"),
+        renderHTML: attributes => {
+          if (!attributes.textColor) return {}
+          return { "data-text-color": attributes.textColor }
+        }
+      },
+
+      // Colspan
+      colspan: {
+        default: 1,
+        parseHTML: element => {
+          const colspan = element.getAttribute("colspan")
+          return colspan ? parseInt(colspan, 10) : 1
+        },
+        renderHTML: attributes => {
+          if (attributes.colspan === 1) return {}
+          return { colspan: attributes.colspan }
+        }
+      },
+
+      // Rowspan
+      rowspan: {
+        default: 1,
+        parseHTML: element => {
+          const rowspan = element.getAttribute("rowspan")
+          return rowspan ? parseInt(rowspan, 10) : 1
+        },
+        renderHTML: attributes => {
+          if (attributes.rowspan === 1) return {}
+          return { rowspan: attributes.rowspan }
+        }
+      },
+
+      // Column width for resizing
+      colwidth: {
+        default: null,
+        parseHTML: element => {
+          const colwidth = element.getAttribute("colwidth")
+          return colwidth ? colwidth.split(",").map(Number) : null
+        },
+        renderHTML: attributes => {
+          if (!attributes.colwidth) return {}
+          return {
+            colwidth: attributes.colwidth.join(","),
+            style: `width: ${attributes.colwidth[0]}px`
+          }
+        }
+      }
+    }
+  }
+})
+
+export default InkpenTableHeader

data/app/assets/javascripts/inkpen/extensions/inkpen_table/table_constants.js

@@ -0,0 +1,152 @@
+/**
+ * InkpenTable Constants
+ *
+ * Colors, menu items, and configuration for the enhanced table extension.
+ *
+ * @since 0.8.0
+ */
+
+// =============================================================================
+// Text Colors
+// =============================================================================
+
+export const TEXT_COLORS = [
+  { name: "default", label: "Default", value: null },
+  { name: "gray", label: "Gray", value: "#787774" },
+  { name: "red", label: "Red", value: "#d44c47" },
+  { name: "orange", label: "Orange", value: "#d9730d" },
+  { name: "yellow", label: "Yellow", value: "#cb912f" },
+  { name: "green", label: "Green", value: "#448361" },
+  { name: "blue", label: "Blue", value: "#337ea9" },
+  { name: "purple", label: "Purple", value: "#9065b0" },
+  { name: "pink", label: "Pink", value: "#c14c8a" }
+]
+
+// =============================================================================
+// Background Colors
+// =============================================================================
+
+export const BACKGROUND_COLORS = [
+  { name: "default", label: "Default", value: null },
+  { name: "gray", label: "Gray", value: "rgba(120, 120, 120, 0.12)" },
+  { name: "red", label: "Red", value: "rgba(239, 68, 68, 0.15)" },
+  { name: "orange", label: "Orange", value: "rgba(249, 115, 22, 0.15)" },
+  { name: "yellow", label: "Yellow", value: "rgba(234, 179, 8, 0.15)" },
+  { name: "green", label: "Green", value: "rgba(34, 197, 94, 0.15)" },
+  { name: "blue", label: "Blue", value: "rgba(59, 130, 246, 0.15)" },
+  { name: "purple", label: "Purple", value: "rgba(168, 85, 247, 0.15)" },
+  { name: "pink", label: "Pink", value: "rgba(236, 72, 153, 0.15)" }
+]
+
+// =============================================================================
+// Table Variants
+// =============================================================================
+
+export const TABLE_VARIANTS = [
+  { name: "default", label: "Default" },
+  { name: "striped", label: "Striped" },
+  { name: "borderless", label: "Borderless" },
+  { name: "minimal", label: "Minimal" }
+]
+
+// =============================================================================
+// Row Menu Items
+// =============================================================================
+
+export const ROW_MENU_ITEMS = [
+  { type: "action", id: "addRowAbove", label: "Add row above", icon: "↑" },
+  { type: "action", id: "addRowBelow", label: "Add row below", icon: "↓" },
+  { type: "separator" },
+  { type: "action", id: "duplicateRow", label: "Duplicate row", icon: "⧉" },
+  { type: "action", id: "deleteRow", label: "Delete row", icon: "✕", danger: true },
+  { type: "separator" },
+  { type: "action", id: "moveRowUp", label: "Move up", icon: "↑" },
+  { type: "action", id: "moveRowDown", label: "Move down", icon: "↓" },
+  { type: "separator" },
+  { type: "action", id: "toggleHeaderRow", label: "Toggle header", icon: "H" },
+  { type: "separator" },
+  { type: "submenu", id: "textColor", label: "Text color", icon: "A" },
+  { type: "submenu", id: "backgroundColor", label: "Background", icon: "◼" }
+]
+
+// =============================================================================
+// Column Menu Items
+// =============================================================================
+
+export const COLUMN_MENU_ITEMS = [
+  { type: "action", id: "addColumnLeft", label: "Add column left", icon: "←" },
+  { type: "action", id: "addColumnRight", label: "Add column right", icon: "→" },
+  { type: "separator" },
+  { type: "action", id: "duplicateColumn", label: "Duplicate column", icon: "⧉" },
+  { type: "action", id: "deleteColumn", label: "Delete column", icon: "✕", danger: true },
+  { type: "separator" },
+  { type: "action", id: "moveColumnLeft", label: "Move left", icon: "←" },
+  { type: "action", id: "moveColumnRight", label: "Move right", icon: "→" },
+  { type: "separator" },
+  { type: "submenu", id: "alignment", label: "Alignment", icon: "≡" },
+  { type: "separator" },
+  { type: "submenu", id: "textColor", label: "Text color", icon: "A" },
+  { type: "submenu", id: "backgroundColor", label: "Background", icon: "◼" }
+]
+
+// =============================================================================
+// Alignment Options
+// =============================================================================
+
+export const ALIGNMENT_OPTIONS = [
+  { name: "left", label: "Left", icon: "←" },
+  { name: "center", label: "Center", icon: "↔" },
+  { name: "right", label: "Right", icon: "→" }
+]
+
+// =============================================================================
+// Default Configuration
+// =============================================================================
+
+export const DEFAULT_CONFIG = {
+  resizable: true,
+  defaultVariant: "default",
+  showHandles: true,
+  showAddButtons: true,
+  showCaption: true,
+  stickyHeader: false,
+  cellBackgrounds: BACKGROUND_COLORS,
+  textColors: TEXT_COLORS
+}
+
+// =============================================================================
+// CSS Classes
+// =============================================================================
+
+export const CSS_CLASSES = {
+  wrapper: "inkpen-table-wrapper",
+  table: "inkpen-table",
+  colHandles: "inkpen-table__col-handles",
+  rowHandles: "inkpen-table__row-handles",
+  handle: "inkpen-table__handle",
+  handleActive: "inkpen-table__handle--active",
+  addRow: "inkpen-table__add-row",
+  addCol: "inkpen-table__add-col",
+  body: "inkpen-table__body",
+  content: "inkpen-table__content",
+  caption: "inkpen-table__caption",
+  menu: "inkpen-table-menu",
+  menuItem: "inkpen-table-menu__item",
+  menuSeparator: "inkpen-table-menu__separator",
+  menuSubmenu: "inkpen-table-menu__submenu",
+  colorSwatch: "inkpen-table-menu__color-swatch",
+  selected: "inkpen-table--selected",
+  rowSelected: "inkpen-table__row--selected",
+  colSelected: "inkpen-table__col--selected"
+}
+
+// =============================================================================
+// Keyboard Shortcuts
+// =============================================================================
+
+export const KEYBOARD_SHORTCUTS = {
+  moveRowUp: { key: "ArrowUp", modifiers: ["Mod", "Shift"] },
+  moveRowDown: { key: "ArrowDown", modifiers: ["Mod", "Shift"] },
+  moveColumnLeft: { key: "ArrowLeft", modifiers: ["Mod", "Shift"] },
+  moveColumnRight: { key: "ArrowRight", modifiers: ["Mod", "Shift"] }
+}

data/app/assets/javascripts/inkpen/extensions/inkpen_table/table_helpers.js

@@ -0,0 +1,254 @@
+/**
+ * InkpenTable Helpers
+ *
+ * DOM utilities and positioning functions for the enhanced table extension.
+ * Follows Fizzy patterns: named function exports, no object exports.
+ *
+ * @since 0.8.0
+ */
+
+// =============================================================================
+// DOM Utilities
+// =============================================================================
+
+/**
+ * Create an element with optional attributes and children
+ */
+export function createElement(tag, attrs = {}, children = []) {
+  const el = document.createElement(tag)
+
+  for (const [key, value] of Object.entries(attrs)) {
+    if (key === "className") {
+      el.className = value
+    } else if (key === "dataset") {
+      Object.assign(el.dataset, value)
+    } else if (key.startsWith("on") && typeof value === "function") {
+      el.addEventListener(key.slice(2).toLowerCase(), value)
+    } else {
+      el.setAttribute(key, value)
+    }
+  }
+
+  for (const child of children) {
+    if (typeof child === "string") {
+      el.appendChild(document.createTextNode(child))
+    } else if (child) {
+      el.appendChild(child)
+    }
+  }
+
+  return el
+}
+
+/**
+ * Wait for next animation frame
+ */
+export function nextFrame() {
+  return new Promise(resolve => requestAnimationFrame(resolve))
+}
+
+/**
+ * Wait for multiple animation frames
+ */
+export function waitFrames(count = 2) {
+  return new Promise(resolve => {
+    let remaining = count
+    const tick = () => {
+      remaining--
+      if (remaining <= 0) {
+        resolve()
+      } else {
+        requestAnimationFrame(tick)
+      }
+    }
+    requestAnimationFrame(tick)
+  })
+}
+
+// =============================================================================
+// Positioning
+// =============================================================================
+
+/**
+ * Position an element below a reference element
+ */
+export function positionBelow(element, reference, options = {}) {
+  const { offsetX = 0, offsetY = 4 } = options
+  const refRect = reference.getBoundingClientRect()
+  const elRect = element.getBoundingClientRect()
+
+  let left = refRect.left + offsetX
+  let top = refRect.bottom + offsetY
+
+  // Keep within viewport horizontally
+  const viewportWidth = window.innerWidth
+  if (left + elRect.width > viewportWidth - 8) {
+    left = viewportWidth - elRect.width - 8
+  }
+  if (left < 8) {
+    left = 8
+  }
+
+  // Flip above if not enough space below
+  const viewportHeight = window.innerHeight
+  if (top + elRect.height > viewportHeight - 8) {
+    top = refRect.top - elRect.height - offsetY
+  }
+
+  element.style.position = "fixed"
+  element.style.left = `${left}px`
+  element.style.top = `${top}px`
+}
+
+/**
+ * Position an element to the right of a reference element (for submenus)
+ */
+export function positionRight(element, reference, options = {}) {
+  const { offsetX = 0, offsetY = 0 } = options
+  const refRect = reference.getBoundingClientRect()
+  const elRect = element.getBoundingClientRect()
+
+  let left = refRect.right + offsetX
+  let top = refRect.top + offsetY
+
+  // Flip to left if not enough space on right
+  const viewportWidth = window.innerWidth
+  if (left + elRect.width > viewportWidth - 8) {
+    left = refRect.left - elRect.width - offsetX
+  }
+
+  // Keep within viewport vertically
+  const viewportHeight = window.innerHeight
+  if (top + elRect.height > viewportHeight - 8) {
+    top = viewportHeight - elRect.height - 8
+  }
+  if (top < 8) {
+    top = 8
+  }
+
+  element.style.position = "fixed"
+  element.style.left = `${left}px`
+  element.style.top = `${top}px`
+}
+
+// =============================================================================
+// Table Utilities
+// =============================================================================
+
+/**
+ * Get table dimensions from a table element
+ */
+export function getTableDimensions(tableElement) {
+  const rows = tableElement.querySelectorAll("tr")
+  const rowCount = rows.length
+  const colCount = rows[0]?.querySelectorAll("td, th").length || 0
+
+  return { rowCount, colCount }
+}
+
+/**
+ * Get row index from a cell element
+ */
+export function getRowIndex(cellElement) {
+  const row = cellElement.closest("tr")
+  if (!row) return -1
+
+  const tbody = row.parentElement
+  return Array.from(tbody.children).indexOf(row)
+}
+
+/**
+ * Get column index from a cell element
+ */
+export function getColumnIndex(cellElement) {
+  const row = cellElement.closest("tr")
+  if (!row) return -1
+
+  return Array.from(row.children).indexOf(cellElement)
+}
+
+/**
+ * Find the table wrapper from any child element
+ */
+export function findTableWrapper(element) {
+  return element.closest(".inkpen-table-wrapper")
+}
+
+/**
+ * Find the actual table element from a wrapper
+ */
+export function findTableElement(wrapper) {
+  return wrapper?.querySelector("table")
+}
+
+// =============================================================================
+// Selection Utilities
+// =============================================================================
+
+/**
+ * Check if a ProseMirror selection is a cell selection
+ */
+export function isCellSelection(selection) {
+  return selection && selection.$anchorCell !== undefined
+}
+
+/**
+ * Get selected cell positions from a CellSelection
+ */
+export function getSelectedCells(selection) {
+  if (!isCellSelection(selection)) return []
+
+  const cells = []
+  selection.forEachCell((node, pos) => {
+    cells.push({ node, pos })
+  })
+  return cells
+}
+
+// =============================================================================
+// Event Utilities
+// =============================================================================
+
+/**
+ * Stop event propagation and prevent default
+ */
+export function stopEvent(event) {
+  event.preventDefault()
+  event.stopPropagation()
+}
+
+/**
+ * Create a click-outside handler
+ */
+export function onClickOutside(element, callback) {
+  const handler = (event) => {
+    if (!element.contains(event.target)) {
+      callback(event)
+    }
+  }
+
+  document.addEventListener("mousedown", handler)
+  document.addEventListener("touchstart", handler)
+
+  return () => {
+    document.removeEventListener("mousedown", handler)
+    document.removeEventListener("touchstart", handler)
+  }
+}
+
+/**
+ * Create an escape key handler
+ */
+export function onEscapeKey(callback) {
+  const handler = (event) => {
+    if (event.key === "Escape") {
+      callback(event)
+    }
+  }
+
+  document.addEventListener("keydown", handler)
+
+  return () => {
+    document.removeEventListener("keydown", handler)
+  }
+}