boxwood 2.13.0 → 2.14.0

package/ui/prose/utilities/convertNodes.js

@@ -0,0 +1,194 @@
+const { resolveAttributes } = require("./parseCustomTag")
+const { replaceVariables } = require("./replaceVariables")
+const { format } = require("./format")
+
+/**
+ * Recursively parses nested lists with proper indentation handling
+ */
+function parseList(
+  items,
+  startIndex,
+  parentIndent,
+  htmlParams,
+  data,
+  allComponents,
+) {
+  const list = []
+  let currentIndex = startIndex
+  const parentListType = items[startIndex].list
+
+  while (currentIndex < items.length) {
+    const item = items[currentIndex]
+
+    // Stop conditions
+    if (item.type !== "li" || item.indent < parentIndent) {
+      break
+    }
+
+    if (item.indent === parentIndent && item.list !== parentListType) {
+      break
+    }
+
+    if (item.indent > parentIndent) {
+      break
+    }
+
+    // Process current list item
+    const processedContent = replaceVariables(item.content, data)
+    const content = [format(processedContent, allComponents)]
+    currentIndex++
+
+    // Check for nested lists
+    const nextItem = items[currentIndex]
+    if (nextItem?.type === "li" && nextItem.indent > item.indent) {
+      const nestedResult = parseList(
+        items,
+        currentIndex,
+        nextItem.indent,
+        htmlParams,
+        data,
+        allComponents,
+      )
+      content.push(nestedResult.list)
+      currentIndex = nestedResult.nextIndex
+    }
+
+    list.push(allComponents.li(htmlParams, content))
+  }
+
+  const listElement =
+    parentListType === "ul"
+      ? allComponents.ul(htmlParams, list)
+      : allComponents.ol(htmlParams, list)
+
+  return { list: listElement, nextIndex: currentIndex }
+}
+
+/**
+ * Processes a custom component item into a node
+ */
+function processCustomComponentItem(item, params, data, markdownRenderer) {
+  const resolvedAttrs = resolveAttributes(item.attributes, data)
+
+  if (item.selfClosing) {
+    return item.component(resolvedAttrs)
+  }
+
+  if (item.singleLine) {
+    return item.component(resolvedAttrs, item.content)
+  }
+
+  // Multi-line component with children - recursively process markdown
+  const childContent = item.content
+    ? markdownRenderer(params, item.content)
+    : []
+  return item.component(resolvedAttrs, childContent)
+}
+
+/**
+ * Processes blockquote items into a single blockquote node
+ */
+function processBlockquotes(
+  items,
+  startIndex,
+  htmlParams,
+  data,
+  allComponents,
+) {
+  const lines = []
+  let i = startIndex
+
+  while (i < items.length && items[i].type === "blockquote") {
+    lines.push(items[i].content)
+    i++
+  }
+
+  const content = replaceVariables(lines.join("\n"), data)
+  const blockquote = allComponents.blockquote(
+    htmlParams,
+    allComponents.p(htmlParams, format(content, allComponents)),
+  )
+
+  return { node: blockquote, nextIndex: i }
+}
+
+/**
+ * Converts parsed items into final node tree
+ */
+function convertItemsToNodes(
+  items,
+  params,
+  htmlParams,
+  data,
+  allComponents,
+  components,
+  markdownRenderer,
+) {
+  const result = []
+  let i = 0
+
+  while (i < items.length) {
+    const item = items[i]
+
+    if (item.type === "custom-component") {
+      result.push(
+        processCustomComponentItem(item, params, data, markdownRenderer),
+      )
+      i++
+    } else if (item.type === "li") {
+      const listResult = parseList(
+        items,
+        i,
+        item.indent,
+        htmlParams,
+        data,
+        allComponents,
+      )
+      result.push(listResult.list)
+      i = listResult.nextIndex
+    } else if (item.type === "blockquote") {
+      const { node, nextIndex } = processBlockquotes(
+        items,
+        i,
+        htmlParams,
+        data,
+        allComponents,
+      )
+      result.push(node)
+      i = nextIndex
+    } else if (item.type === "hr") {
+      result.push(allComponents.hr(htmlParams))
+      i++
+    } else if (item.type === "pre") {
+      // Code blocks - wrap in <pre><code>
+      const codeParams = item.language
+        ? { class: `language-${item.language}` }
+        : {}
+      result.push(
+        allComponents.pre(
+          htmlParams,
+          allComponents.code(codeParams, item.content),
+        ),
+      )
+      i++
+    } else {
+      // Regular block elements (h1-h6, p, etc.)
+      const { type, content } = item
+      const Component = components[type] || allComponents.p
+      const processedContent = replaceVariables(content, data)
+      result.push(
+        Component(htmlParams, format(processedContent, allComponents)),
+      )
+      i++
+    }
+  }
+
+  return result
+}
+
+module.exports = {
+  parseList,
+  processCustomComponentItem,
+  processBlockquotes,
+  convertItemsToNodes,
+}

package/ui/prose/utilities/format.js

@@ -0,0 +1,184 @@
+const { findMatchingBracket } = require("./brackets")
+
+/**
+ * Format inline markdown elements within text
+ * Handles: images, links, code, bold, italic
+ * @param {string} text - The text to format
+ * @param {Object} allComponents - HTML component functions (contains a, img, code, strong, em, etc.)
+ * @returns {Array|string} - Formatted content as array of components and strings
+ */
+function format(text, allComponents) {
+  const { a: A, img: Img, code: Code, strong: Strong, em: Em } = allComponents
+
+  if (
+    !text.includes("*") &&
+    !text.includes("`") &&
+    !text.includes("[") &&
+    !text.includes("!") &&
+    !text.includes("<") &&
+    !text.includes("\\")
+  ) {
+    return text
+  }
+
+  const result = []
+  let i = 0
+
+  while (i < text.length) {
+    // Handle escape characters
+    if (text[i] === "\\") {
+      if (i + 1 < text.length) {
+        const nextChar = text[i + 1]
+        // Check if next char is a special markdown character
+        if (
+          nextChar === "*" ||
+          nextChar === "`" ||
+          nextChar === "[" ||
+          nextChar === "]" ||
+          nextChar === "(" ||
+          nextChar === ")" ||
+          nextChar === "!" ||
+          nextChar === "<" ||
+          nextChar === ">" ||
+          nextChar === "\\"
+        ) {
+          // Escape the next character - just add it as literal text
+          result.push(nextChar)
+          i += 2 // Skip both \ and the escaped character
+          continue
+        }
+        // If not a special char, keep both the backslash and the next character
+        result.push(text[i])
+        result.push(nextChar)
+        i += 2
+        continue
+      } else {
+        // Backslash at end of string
+        result.push(text[i])
+        i++
+        continue
+      }
+    }
+
+    if (text[i] === "!" && text[i + 1] === "[") {
+      // Try to parse markdown image ![alt](url)
+      const altEnd = text.indexOf("]", i + 2)
+
+      if (altEnd !== -1 && text[altEnd + 1] === "(") {
+        const urlEnd = text.indexOf(")", altEnd + 2)
+
+        if (urlEnd !== -1) {
+          const alt = text.substring(i + 2, altEnd)
+          const src = text.substring(altEnd + 2, urlEnd)
+          result.push(Img({ src, alt }))
+          i = urlEnd + 1
+          continue
+        }
+      }
+
+      // Not a valid image, treat as regular text (skip both ! and [)
+      result.push(text[i])
+      i++
+    } else if (text[i] === "[") {
+      // Try to parse markdown link [text](url)
+      const textEnd = findMatchingBracket(text, i)
+
+      if (textEnd !== -1 && text[textEnd + 1] === "(") {
+        const urlEnd = text.indexOf(")", textEnd + 2)
+
+        if (urlEnd !== -1) {
+          const linkText = text.substring(i + 1, textEnd)
+          const url = text.substring(textEnd + 2, urlEnd)
+          // Recursively format the link text to support images, bold, italic inside links
+          result.push(A({ href: url }, format(linkText, allComponents)))
+          i = urlEnd + 1
+          continue
+        }
+      }
+
+      // Not a valid link, treat as regular text
+      result.push(text[i])
+      i++
+    } else if (text[i] === "<") {
+      // Try to parse autolink <url> or <email>
+      const end = text.indexOf(">", i + 1)
+
+      if (end !== -1) {
+        const content = text.substring(i + 1, end)
+
+        // Check if it's a URL (starts with http:// or https://)
+        if (content.startsWith("http://") || content.startsWith("https://")) {
+          result.push(A({ href: content }, content))
+          i = end + 1
+          continue
+        }
+
+        // Check if it's an email (contains @ and looks like email)
+        if (
+          content.includes("@") &&
+          /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(content)
+        ) {
+          result.push(A({ href: `mailto:${content}` }, content))
+          i = end + 1
+          continue
+        }
+      }
+
+      // Not a valid autolink, treat as regular text
+      result.push(text[i])
+      i++
+    } else if (text[i] === "`") {
+      const end = text.indexOf("`", i + 1)
+      if (end === -1) {
+        result.push(text[i])
+        i++
+      } else {
+        result.push(Code({}, text.substring(i + 1, end)))
+        i = end + 1
+      }
+    } else if (text[i] === "*" && text[i + 1] === "*") {
+      const end = text.indexOf("**", i + 2)
+      if (end === -1) {
+        result.push(text[i])
+        i++
+      } else {
+        result.push(Strong(format(text.substring(i + 2, end), allComponents)))
+        i = end + 2
+      }
+    } else if (text[i] === "*") {
+      const end = text.indexOf("*", i + 1)
+      if (end === -1) {
+        result.push(text[i])
+        i++
+      } else {
+        result.push(Em(format(text.substring(i + 1, end), allComponents)))
+        i = end + 1
+      }
+    } else {
+      // Find next special character
+      const positions = [
+        text.indexOf("`", i),
+        text.indexOf("*", i),
+        text.indexOf("[", i),
+        text.indexOf("<", i),
+        text.indexOf("\\", i),
+      ].filter((pos) => pos !== -1)
+
+      // Look for image pattern ![
+      const exclamPos = text.indexOf("!", i)
+      if (exclamPos !== -1 && text[exclamPos + 1] === "[") {
+        positions.push(exclamPos)
+      }
+
+      const next = positions.length > 0 ? Math.min(...positions) : text.length
+
+      result.push(text.substring(i, next))
+      if (next === text.length) break
+      i = next
+    }
+  }
+
+  return result.length > 0 ? result : text
+}
+
+module.exports = { format }

package/ui/prose/utilities/params.js

@@ -0,0 +1,29 @@
+/**
+ * Extracts HTML parameters from params object by filtering out special keys
+ */
+function extractHtmlParams(params) {
+  if (!params) return {}
+
+  return Object.keys(params).reduce((acc, key) => {
+    if (key !== "components" && key !== "data") {
+      acc[key] = params[key]
+    }
+    return acc
+  }, {})
+}
+
+/**
+ * Merges builtin HTML tags with custom components
+ * Custom components can override builtin tags if needed
+ */
+function mergeComponents(builtinHtmlTags, customComponents) {
+  return {
+    ...builtinHtmlTags,
+    ...customComponents,
+  }
+}
+
+module.exports = {
+  extractHtmlParams,
+  mergeComponents,
+}

package/ui/prose/utilities/parseBlock.js

@@ -0,0 +1,284 @@
+const { parseCustomTag } = require("./parseCustomTag")
+const { replaceVariables } = require("./replaceVariables")
+const { format } = require("./format")
+
+// Markdown patterns
+const ORDERED_LIST_REGEXP = /^\d+\.\s/
+const UNORDERED_MARKERS = ["- ", "— ", "– ", "• "]
+const HORIZONTAL_RULE_REGEXP = /^(?:\*\s*\*\s*\*+|-\s*-\s*-+|_\s*_\s*_+)\s*$/
+const HEADINGS = [
+  { prefix: "###### ", type: "h6" },
+  { prefix: "##### ", type: "h5" },
+  { prefix: "#### ", type: "h4" },
+  { prefix: "### ", type: "h3" },
+  { prefix: "## ", type: "h2" },
+  { prefix: "# ", type: "h1" },
+]
+
+/**
+ * Checks if a line is a code block delimiter (```)
+ */
+function isCodeBlockDelimiter(trimmedLine) {
+  return trimmedLine.startsWith("```")
+}
+
+/**
+ * Parses a code block starting from the current index
+ * Returns the code block item and the next index to process
+ */
+function parseCodeBlock(allLines, startIndex) {
+  const line = allLines[startIndex]
+  const language = line.trim().substring(3).trim()
+  const codeLines = []
+  let i = startIndex + 1
+
+  // Collect lines until closing ```
+  while (i < allLines.length) {
+    const codeLine = allLines[i]
+    if (isCodeBlockDelimiter(codeLine.trim())) {
+      i++ // Skip closing delimiter
+      break
+    }
+    codeLines.push(codeLine)
+    i++
+  }
+
+  return {
+    item: {
+      type: "pre",
+      content: codeLines.join("\n"),
+      language: language || undefined,
+      indent: 0,
+    },
+    nextIndex: i,
+  }
+}
+
+/**
+ * Collects content lines for a multi-line custom component
+ */
+function collectComponentContent(allLines, startIndex, tagName, allComponents) {
+  const contentLines = []
+  let i = startIndex
+  let depth = 1
+
+  while (i < allLines.length && depth > 0) {
+    const contentLine = allLines[i]
+    const contentTag = parseCustomTag(contentLine, allComponents)
+
+    if (contentTag && contentTag.tagName === tagName) {
+      if (contentTag.type === "custom-component-open") {
+        depth++
+        contentLines.push(contentLine)
+      } else if (contentTag.type === "custom-component-close") {
+        depth--
+        if (depth === 0) {
+          i++
+          break
+        }
+        contentLines.push(contentLine)
+      }
+    } else {
+      contentLines.push(contentLine)
+    }
+    i++
+  }
+
+  return {
+    content: contentLines.join("\n"),
+    nextIndex: i,
+  }
+}
+
+/**
+ * Processes a custom component tag and returns the appropriate item
+ */
+function processCustomComponent(
+  line,
+  allLines,
+  currentIndex,
+  customTag,
+  data,
+  allComponents,
+) {
+  const indent = line.length - line.trimStart().length
+
+  // Single-line component with content
+  if (customTag.type === "custom-component-single-line") {
+    const processedContent = replaceVariables(customTag.content, data)
+    const formattedContent = format(processedContent, allComponents)
+    return {
+      item: {
+        type: "custom-component",
+        tagName: customTag.tagName,
+        component: customTag.component,
+        attributes: customTag.attributes,
+        content: formattedContent,
+        selfClosing: false,
+        singleLine: true,
+        indent,
+      },
+      nextIndex: currentIndex + 1,
+    }
+  }
+
+  // Self-closing component
+  if (customTag.type === "custom-component" && customTag.selfClosing) {
+    return {
+      item: {
+        type: "custom-component",
+        tagName: customTag.tagName,
+        component: customTag.component,
+        attributes: customTag.attributes,
+        selfClosing: true,
+        indent,
+      },
+      nextIndex: currentIndex + 1,
+    }
+  }
+
+  // Multi-line component
+  if (customTag.type === "custom-component-open") {
+    const { content, nextIndex } = collectComponentContent(
+      allLines,
+      currentIndex + 1,
+      customTag.tagName,
+      allComponents,
+    )
+
+    return {
+      item: {
+        type: "custom-component",
+        tagName: customTag.tagName,
+        component: customTag.component,
+        attributes: customTag.attributes,
+        content,
+        selfClosing: false,
+        indent,
+      },
+      nextIndex,
+    }
+  }
+
+  return null
+}
+
+/**
+ * Determines the type and content of a markdown line
+ */
+function parseMarkdownLine(line) {
+  const trimmed = line.trim()
+  const leadingSpaces = line.length - line.trimStart().length
+
+  // Horizontal rule
+  if (HORIZONTAL_RULE_REGEXP.test(trimmed)) {
+    return { type: "hr", indent: leadingSpaces }
+  }
+
+  // Unordered list
+  const unorderedMarker = UNORDERED_MARKERS.find((marker) =>
+    trimmed.startsWith(marker),
+  )
+  if (unorderedMarker) {
+    const content = trimmed.substring(2)
+    if (content) {
+      return { type: "li", list: "ul", content, indent: leadingSpaces }
+    }
+  }
+
+  // Ordered list
+  if (ORDERED_LIST_REGEXP.test(trimmed)) {
+    const content = trimmed.replace(ORDERED_LIST_REGEXP, "")
+    if (content) {
+      return { type: "li", list: "ol", content, indent: leadingSpaces }
+    }
+  }
+
+  // Headings
+  for (const { prefix, type } of HEADINGS) {
+    if (trimmed.startsWith(prefix)) {
+      return {
+        type,
+        content: trimmed.substring(prefix.length),
+        indent: leadingSpaces,
+      }
+    }
+  }
+
+  // Blockquote
+  if (trimmed.startsWith("> ")) {
+    return {
+      type: "blockquote",
+      content: trimmed.substring(2),
+      indent: leadingSpaces,
+    }
+  }
+
+  // Default to paragraph
+  return { type: "p", content: trimmed, indent: leadingSpaces }
+}
+
+/**
+ * Parses all lines of markdown into structured items
+ */
+function parseMarkdownLines(children, allComponents, data) {
+  const allLines = children.trim().split("\n")
+  const items = []
+  let i = 0
+
+  while (i < allLines.length) {
+    const line = allLines[i]
+    const trimmed = line.trim()
+
+    // Skip empty lines
+    if (trimmed.length === 0) {
+      i++
+      continue
+    }
+
+    // Check for custom component tags
+    const customTag = parseCustomTag(line, allComponents)
+    if (customTag) {
+      const result = processCustomComponent(
+        line,
+        allLines,
+        i,
+        customTag,
+        data,
+        allComponents,
+      )
+      if (result) {
+        items.push(result.item)
+        i = result.nextIndex
+        continue
+      }
+    }
+
+    // Check for code blocks
+    if (isCodeBlockDelimiter(trimmed)) {
+      const { item, nextIndex } = parseCodeBlock(allLines, i)
+      items.push(item)
+      i = nextIndex
+      continue
+    }
+
+    // Parse regular markdown line
+    const item = parseMarkdownLine(line)
+    if (item) {
+      items.push(item)
+    }
+
+    i++
+  }
+
+  return items
+}
+
+module.exports = {
+  isCodeBlockDelimiter,
+  parseCodeBlock,
+  collectComponentContent,
+  processCustomComponent,
+  parseMarkdownLine,
+  parseMarkdownLines,
+}