boxwood 2.18.0 → 2.19.0

package/ui/utilities/convertNodes.js

@@ -1,6 +1,22 @@
+const { Input } = require("../..")
 const { resolveAttributes } = require("./parseCustomTag")
 const { replaceVariables } = require("./replaceVariables")
 const { format } = require("./format")
+const { slugify } = require("./slugify")
+const { restoreCodeSegments } = require("../prose/utilities/protectCode")
+
+const HEADING_TYPES = new Set(["h1", "h2", "h3", "h4", "h5", "h6"])
+
+/**
+ * Strip inline markdown syntax so anchor slugs come from the visible text,
+ * e.g. "## [Link](https://x.com)" -> slug "link"
+ */
+function stripInlineMarkdown(text) {
+  return text
+    .replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1")
+    .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
+    .replace(/[`*_~]/g, "")
+}
 
 /**
  * Recursively parses nested lists with proper indentation handling
@@ -36,6 +52,16 @@ function parseList(
     // Process current list item
     const processedContent = replaceVariables(item.content, data)
     const content = [format(processedContent, allComponents)]
+
+    // Task list items get a disabled checkbox: - [x] done
+    if (item.task) {
+      const checkbox = { type: "checkbox", disabled: true }
+      if (item.checked) {
+        checkbox.checked = true
+      }
+      content.unshift(Input(checkbox), " ")
+    }
+
     currentIndex++
 
     // Check for nested lists
@@ -112,6 +138,42 @@ function processBlockquotes(
   return { node: blockquote, nextIndex: i }
 }
 
+/**
+ * Converts a table item into table/thead/tbody nodes
+ * Column alignment renders as an inline text-align style
+ */
+function processTable(item, htmlParams, data, allComponents) {
+  const cellParams = (index) => {
+    const align = item.aligns[index]
+    return align ? { ...htmlParams, style: { textAlign: align } } : htmlParams
+  }
+  const cellContent = (cell) =>
+    format(replaceVariables(cell, data), allComponents)
+
+  const head = allComponents.thead(
+    htmlParams,
+    allComponents.tr(
+      htmlParams,
+      item.header.map((cell, index) =>
+        allComponents.th(cellParams(index), cellContent(cell)),
+      ),
+    ),
+  )
+  const body = allComponents.tbody(
+    htmlParams,
+    item.rows.map((row) =>
+      allComponents.tr(
+        htmlParams,
+        row.map((cell, index) =>
+          allComponents.td(cellParams(index), cellContent(cell)),
+        ),
+      ),
+    ),
+  )
+
+  return allComponents.table(htmlParams, [head, body])
+}
+
 /**
  * Converts parsed items into final node tree
  */
@@ -124,6 +186,14 @@ function convertItemsToNodes(
   markdownRenderer,
 ) {
   const result = []
+  // Anchor slugs used so far - repeated headings get -2, -3 suffixes
+  const slugs = new Map()
+  // Masked-code tokens from Prose - restored in anchor slug sources so
+  // "## Title with `code`" slugs from the real code text, not the mask
+  const codeTokens = params && params.__codeTokens
+  // Heading anchors are opt-in - Prose enables them, plain Markdown stays a
+  // faithful GFM renderer with untouched headings
+  const headingAnchors = params && params.__headingAnchors
   let i = 0
 
   while (i < items.length) {
@@ -158,6 +228,9 @@ function convertItemsToNodes(
     } else if (item.type === "hr") {
       result.push(allComponents.hr(htmlParams))
       i++
+    } else if (item.type === "table") {
+      result.push(processTable(item, htmlParams, data, allComponents))
+      i++
     } else if (item.type === "pre") {
       // Code blocks - wrap in <pre><code>
       const codeParams = item.language
@@ -175,8 +248,32 @@ function convertItemsToNodes(
       const { type, content } = item
       const Component = allComponents[type] || allComponents.p
       const processedContent = replaceVariables(content, data)
+      let elementParams = htmlParams
+
+      // Headings get an anchor id derived from their text,
+      // e.g. "## Mój tytuł" -> <h2 id="moj-tytul">
+      if (headingAnchors && HEADING_TYPES.has(type) && !htmlParams.id) {
+        // Tokens can chain across nested Prose calls (an inner call masks
+        // the outer call's token again) - restore until stable
+        let slugSource = processedContent
+        if (codeTokens) {
+          let previous
+          do {
+            previous = slugSource
+            slugSource = restoreCodeSegments(slugSource, codeTokens)
+          } while (slugSource !== previous)
+        }
+        const slug = slugify(stripInlineMarkdown(slugSource))
+        if (slug) {
+          const count = slugs.get(slug) || 0
+          slugs.set(slug, count + 1)
+          const id = count === 0 ? slug : `${slug}-${count + 1}`
+          elementParams = { ...htmlParams, id }
+        }
+      }
+
       result.push(
-        Component(htmlParams, format(processedContent, allComponents)),
+        Component(elementParams, format(processedContent, allComponents)),
       )
       i++
     }
@@ -189,5 +286,6 @@ module.exports = {
   parseList,
   processCustomComponentItem,
   processBlockquotes,
+  processTable,
   convertItemsToNodes,
 }

package/ui/utilities/params.js

@@ -1,3 +1,11 @@
+// Internal params threaded through recursive calls - never HTML attributes
+const INTERNAL_KEYS = new Set([
+  "components",
+  "data",
+  "__codeTokens",
+  "__headingAnchors",
+])
+
 /**
  * Extracts HTML parameters from params object by filtering out special keys
  */
@@ -5,7 +13,7 @@ function extractHtmlParams(params) {
   if (!params) return {}
 
   return Object.keys(params).reduce((acc, key) => {
-    if (key !== "components" && key !== "data") {
+    if (!INTERNAL_KEYS.has(key)) {
       acc[key] = params[key]
     }
     return acc

package/ui/utilities/parseBlock.js

@@ -54,6 +54,73 @@ function parseCodeBlock(allLines, startIndex) {
   }
 }
 
+/**
+ * Scan a line for a > outside quoted attribute values
+ * Quote state carries across lines via the state object, so quoted values
+ * may span multiple lines
+ * @param {string} line - The line to scan
+ * @param {{quote: string|null}} state - Carried quote state (mutated)
+ * @returns {boolean} - True when the line contains an unquoted >
+ */
+function scanUnquotedGt(line, state) {
+  let found = false
+  for (const char of line) {
+    if (state.quote) {
+      if (char === state.quote) state.quote = null
+      continue
+    }
+    if (char === '"' || char === "'") {
+      state.quote = char
+      continue
+    }
+    if (char === ">") found = true
+  }
+  return found
+}
+
+/**
+ * Parses a custom component tag whose attributes span multiple lines, e.g.
+ * <Gallery images="{[
+ *   images[0],
+ *   images[1]
+ * ]}" />
+ * Joins lines until the first > outside quoted values and parses the result
+ * as a single tag (a quoted "5 > 3" does not end the tag)
+ * Returns the parsed tag and the index of the line that closes it, or null
+ */
+function parseMultilineTag(allLines, startIndex, allComponents) {
+  if (!allComponents || typeof allComponents !== "object") {
+    return null
+  }
+
+  const trimmed = allLines[startIndex].trim()
+  const match = trimmed.match(/^<([A-Za-z][A-Za-z0-9-]*)(\s|$)/)
+  if (!match || !allComponents[match[1]]) {
+    return null
+  }
+  // The tag closes on this line - not a multi-line tag
+  const state = { quote: null }
+  if (scanUnquotedGt(allLines[startIndex], state)) {
+    return null
+  }
+
+  const lines = [allLines[startIndex]]
+  for (let i = startIndex + 1; i < allLines.length; i++) {
+    // A blank line ends the markdown block - the candidate is not a tag,
+    // so plain text starting with a component name is never swallowed
+    if (!allLines[i].trim()) {
+      return null
+    }
+    lines.push(allLines[i])
+    if (scanUnquotedGt(allLines[i], state)) {
+      const tag = parseCustomTag(lines.join("\n"), allComponents)
+      return tag ? { tag, endIndex: i } : null
+    }
+  }
+
+  return null
+}
+
 /**
  * Collects content lines for a multi-line custom component
  */
@@ -78,6 +145,21 @@ function collectComponentContent(allLines, startIndex, tagName, allComponents) {
         }
         contentLines.push(contentLine)
       }
+    } else if (!contentTag) {
+      // A nested same-name tag whose attributes span multiple lines also
+      // affects depth - consume its whole span so its closing tag matches
+      const multiline = parseMultilineTag(allLines, i, allComponents)
+      if (multiline && multiline.tag.tagName === tagName) {
+        if (multiline.tag.type === "custom-component-open") {
+          depth++
+        }
+        for (let j = i; j <= multiline.endIndex; j++) {
+          contentLines.push(allLines[j])
+        }
+        i = multiline.endIndex + 1
+        continue
+      }
+      contentLines.push(contentLine)
     } else {
       contentLines.push(contentLine)
     }
@@ -163,6 +245,91 @@ function processCustomComponent(
   return null
 }
 
+/**
+ * Split a table row into trimmed cells, honoring escaped \| pipes
+ * "| a | b |" -> ["a", "b"]
+ */
+function splitTableRow(line) {
+  let trimmed = line.trim()
+  if (trimmed.startsWith("|")) {
+    trimmed = trimmed.substring(1)
+  }
+  if (trimmed.endsWith("|") && !trimmed.endsWith("\\|")) {
+    trimmed = trimmed.substring(0, trimmed.length - 1)
+  }
+
+  const cells = []
+  let current = ""
+  for (let i = 0; i < trimmed.length; i++) {
+    const char = trimmed[i]
+    if (char === "\\" && trimmed[i + 1] === "|") {
+      current += "|"
+      i++
+      continue
+    }
+    if (char === "|") {
+      cells.push(current.trim())
+      current = ""
+      continue
+    }
+    current += char
+  }
+  cells.push(current.trim())
+  return cells
+}
+
+/**
+ * Checks if a line is a table separator row, e.g. | --- | :---: | ---: |
+ */
+function isTableSeparator(trimmed) {
+  if (!trimmed.startsWith("|")) {
+    return false
+  }
+  const cells = splitTableRow(trimmed)
+  return cells.length > 0 && cells.every((cell) => /^:?-+:?$/.test(cell))
+}
+
+/**
+ * Parses a table block: a header row, a separator row and body rows
+ * Returns the table item and the next index to process
+ */
+function parseTable(allLines, startIndex) {
+  const line = allLines[startIndex]
+  const header = splitTableRow(line)
+
+  // Column alignment comes from the separator row (:--- :---: ---:)
+  const aligns = splitTableRow(allLines[startIndex + 1]).map((cell) => {
+    const left = cell.startsWith(":")
+    const right = cell.endsWith(":")
+    if (left && right) return "center"
+    if (right) return "right"
+    return null
+  })
+
+  const rows = []
+  let i = startIndex + 2
+  while (i < allLines.length && allLines[i].trim().startsWith("|")) {
+    const cells = splitTableRow(allLines[i]).slice(0, header.length)
+    // Normalize short rows to the header width
+    while (cells.length < header.length) {
+      cells.push("")
+    }
+    rows.push(cells)
+    i++
+  }
+
+  return {
+    item: {
+      type: "table",
+      header,
+      aligns,
+      rows,
+      indent: line.length - line.trimStart().length,
+    },
+    nextIndex: i,
+  }
+}
+
 /**
  * Determines the type and content of a markdown line
  */
@@ -175,6 +342,23 @@ function parseMarkdownLine(line) {
     return { type: "hr", indent: leadingSpaces }
   }
 
+  // Task list items: [ ] todo, [x] done - GFM allows them in both list types
+  // The text may be empty ("- [ ]" renders a bare checkbox)
+  const listItem = (list, content) => {
+    const task = content.match(/^\[([ xX])\](?:\s+(.*))?$/)
+    if (task) {
+      return {
+        type: "li",
+        list,
+        task: true,
+        checked: task[1] !== " ",
+        content: task[2] || "",
+        indent: leadingSpaces,
+      }
+    }
+    return { type: "li", list, content, indent: leadingSpaces }
+  }
+
   // Unordered list
   const unorderedMarker = UNORDERED_MARKERS.find((marker) =>
     trimmed.startsWith(marker),
@@ -182,7 +366,7 @@ function parseMarkdownLine(line) {
   if (unorderedMarker) {
     const content = trimmed.substring(2)
     if (content) {
-      return { type: "li", list: "ul", content, indent: leadingSpaces }
+      return listItem("ul", content)
     }
   }
 
@@ -190,7 +374,7 @@ function parseMarkdownLine(line) {
   if (ORDERED_LIST_REGEXP.test(trimmed)) {
     const content = trimmed.replace(ORDERED_LIST_REGEXP, "")
     if (content) {
-      return { type: "li", list: "ol", content, indent: leadingSpaces }
+      return listItem("ol", content)
     }
   }
 
@@ -237,12 +421,21 @@ function parseMarkdownLines(children, allComponents, data) {
     }
 
     // Check for custom component tags
-    const customTag = parseCustomTag(line, allComponents)
+    let customTag = parseCustomTag(line, allComponents)
+    let tagEndIndex = i
+    if (!customTag) {
+      // Tag attributes may span multiple lines
+      const multiline = parseMultilineTag(allLines, i, allComponents)
+      if (multiline) {
+        customTag = multiline.tag
+        tagEndIndex = multiline.endIndex
+      }
+    }
     if (customTag) {
       const result = processCustomComponent(
         line,
         allLines,
-        i,
+        tagEndIndex,
         customTag,
         data,
         allComponents,
@@ -262,6 +455,18 @@ function parseMarkdownLines(children, allComponents, data) {
       continue
     }
 
+    // Check for tables: a header row followed by a separator row
+    if (
+      trimmed.startsWith("|") &&
+      i + 1 < allLines.length &&
+      isTableSeparator(allLines[i + 1].trim())
+    ) {
+      const { item, nextIndex } = parseTable(allLines, i)
+      items.push(item)
+      i = nextIndex
+      continue
+    }
+
     // Parse regular markdown line
     const item = parseMarkdownLine(line)
     if (item) {
@@ -277,6 +482,11 @@ function parseMarkdownLines(children, allComponents, data) {
 module.exports = {
   isCodeBlockDelimiter,
   parseCodeBlock,
+  parseMultilineTag,
+  scanUnquotedGt,
+  splitTableRow,
+  isTableSeparator,
+  parseTable,
   collectComponentContent,
   processCustomComponent,
   parseMarkdownLine,

package/ui/utilities/parseCustomTag.js

@@ -1,8 +1,36 @@
-const { resolveExpression } = require("./replaceVariables")
+const {
+  resolveExpression,
+  replaceVariables,
+} = require("./replaceVariables")
+
+/**
+ * Find the first > that is not inside a quoted attribute value
+ * @param {string} text - The text to scan
+ * @param {number} from - Index to start scanning at
+ * @returns {number} - Index of the unquoted > or -1
+ */
+function findUnquotedGt(text, from) {
+  let quote = null
+  for (let i = from; i < text.length; i++) {
+    const char = text[i]
+    if (quote) {
+      if (char === quote) quote = null
+      continue
+    }
+    if (char === '"' || char === "'") {
+      quote = char
+      continue
+    }
+    if (char === ">") return i
+  }
+  return -1
+}
 
 /**
  * Parse a custom component tag from markdown
  * Supports both <Component attr="value"> and <Component attr={variable}>
+ * Attribute values may contain > when quoted, e.g. title="5 > 3",
+ * and may span multiple lines (the line then contains newlines)
  * @param {string} line - The line to parse
  * @param {Object} customComponents - Map of component names to functions
  * @returns {Object|null} - Parsed tag info or null if not a custom tag
@@ -14,74 +42,88 @@ function parseCustomTag(line, customComponents) {
 
   const trimmed = line.trim()
 
-  // Check for single-line tag: <tag>content</tag> or <tag attr="value">content</tag>
-  const singleLineMatch = trimmed.match(
-    /^<([A-Za-z][A-Za-z0-9-]*)(\s+[^>]*)?>(.+?)<\/\1>\s*$/,
-  )
-  if (singleLineMatch) {
-    const [, tagName, attributesStr, content] = singleLineMatch
+  // Closing tag: </ComponentName>
+  const closeTagMatch = trimmed.match(/^<\/([A-Za-z][A-Za-z0-9-]*)>\s*$/)
+  if (closeTagMatch) {
+    const [, tagName] = closeTagMatch
     const component = customComponents[tagName]
     if (component) {
-      const attributes = parseAttributes(attributesStr || "")
       return {
-        type: "custom-component-single-line",
+        type: "custom-component-close",
         tagName,
         component,
-        attributes,
-        content,
-        selfClosing: false,
       }
     }
+    return null
   }
 
-  // Check for self-closing tag: <ComponentName ... /> (space before / is optional)
-  const selfClosingMatch = trimmed.match(
-    /^<([A-Za-z][A-Za-z0-9-]*)(\s+[^>]*)?\s*\/>\s*$/,
-  )
-  if (selfClosingMatch) {
-    const [, tagName, attributesStr] = selfClosingMatch
-    const component = customComponents[tagName]
-    if (component) {
-      const attributes = parseAttributes(attributesStr || "")
-      return {
-        type: "custom-component",
-        tagName,
-        component,
-        attributes,
-        selfClosing: true,
-      }
+  // Tag name followed by whitespace, / or >
+  const nameMatch = trimmed.match(/^<([A-Za-z][A-Za-z0-9-]*)(?=[\s/>])/)
+  if (!nameMatch) {
+    return null
+  }
+  const tagName = nameMatch[1]
+  const component = customComponents[tagName]
+  if (!component) {
+    return null
+  }
+
+  const gt = findUnquotedGt(trimmed, nameMatch[0].length)
+  if (gt === -1) {
+    return null
+  }
+
+  // Self-closing when / directly precedes the > (whitespace allowed between)
+  let attributesEnd = gt
+  let selfClosing = false
+  let before = gt - 1
+  while (before > 0 && /\s/.test(trimmed[before])) {
+    before--
+  }
+  if (trimmed[before] === "/") {
+    selfClosing = true
+    attributesEnd = before
+  }
+
+  const attributesStr = trimmed.substring(nameMatch[0].length, attributesEnd)
+  const after = trimmed.substring(gt + 1)
+
+  if (selfClosing) {
+    if (after.trim() !== "") {
+      return null
+    }
+    return {
+      type: "custom-component",
+      tagName,
+      component,
+      attributes: parseAttributes(attributesStr),
+      selfClosing: true,
     }
   }
 
-  // Check for opening tag: <ComponentName ...>
-  const openTagMatch = trimmed.match(
-    /^<([A-Za-z][A-Za-z0-9-]*)(\s+[^>]*)?>\s*$/,
-  )
-  if (openTagMatch) {
-    const [, tagName, attributesStr] = openTagMatch
-    const component = customComponents[tagName]
-    if (component) {
-      const attributes = parseAttributes(attributesStr || "")
-      return {
-        type: "custom-component-open",
-        tagName,
-        component,
-        attributes,
-        selfClosing: false,
-      }
+  if (after.trim() === "") {
+    return {
+      type: "custom-component-open",
+      tagName,
+      component,
+      attributes: parseAttributes(attributesStr),
+      selfClosing: false,
     }
   }
 
-  // Check for closing tag: </ComponentName>
-  const closeTagMatch = trimmed.match(/^<\/([A-Za-z][A-Za-z0-9-]*)>\s*$/)
-  if (closeTagMatch) {
-    const [, tagName] = closeTagMatch
-    const component = customComponents[tagName]
-    if (component) {
+  // Single-line tag with content: <tag ...>content</tag>
+  const closeToken = `</${tagName}>`
+  const content = after.replace(/\s+$/, "")
+  if (content.endsWith(closeToken)) {
+    const inner = content.substring(0, content.length - closeToken.length)
+    if (inner) {
       return {
-        type: "custom-component-close",
+        type: "custom-component-single-line",
         tagName,
         component,
+        attributes: parseAttributes(attributesStr),
+        content: inner,
+        selfClosing: false,
       }
     }
   }
@@ -160,18 +202,24 @@ function parseAttributes(attributesStr) {
         }
       }
       
-      // Check if the entire quoted value is a variable reference: "{variable}"
-      if (value.startsWith("{") && value.endsWith("}")) {
-        const variableName = value.substring(1, value.length - 1).trim()
-        if (variableName) {
-          attributes[name] = { __variable: variableName }
-        } else {
-          attributes[name] = value
-        }
+      // Whole-value variable reference: "{variable}" - resolves to the raw
+      // value (array, object, number), not a string
+      const inner = value.substring(1, value.length - 1)
+      if (
+        value.startsWith("{") &&
+        value.endsWith("}") &&
+        inner.trim() &&
+        !inner.includes("{") &&
+        !inner.includes("}")
+      ) {
+        attributes[name] = { __variable: inner.trim() }
+      } else if (/\{[^{}]+\}/.test(value)) {
+        // Partial interpolation: "/products/{id}" or "Photo of {name}"
+        attributes[name] = { __interpolate: value }
       } else {
         attributes[name] = value
       }
-      
+
       if (i < str.length) i++ // Skip closing quote
     } else if (str[i] === "{") {
       // Variable reference
@@ -216,6 +264,9 @@ function resolveAttributes(attributes, data) {
       const variablePath = value.__variable
       const resolvedValue = resolveExpression(data, variablePath)
       resolved[key] = resolvedValue
+    } else if (value && typeof value === "object" && value.__interpolate) {
+      // Partial interpolation always produces a string
+      resolved[key] = replaceVariables(value.__interpolate, data)
     } else {
       resolved[key] = value
     }
@@ -228,4 +279,5 @@ module.exports = {
   parseCustomTag,
   parseAttributes,
   resolveAttributes,
+  findUnquotedGt,
 }