fix(steps): simplify logic

[cpreston321]

🔗 Linked issue

#106

❓ Type of change

• 📖 Documentation (updates to the documentation, readme, or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Resolves #106

In this PR, I make the component more generic so it can work for all cases.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[cloudflare-pages]

Deploying undocs with    Cloudflare Pages

Latest commit:	020c7e8
Status:	✅  Deploy successful!
Preview URL:	https://4d58e8cb.undocs.pages.dev
Branch Preview URL:	https://fix-steps.undocs.pages.dev

View logs

[pi0]

Note that html tags (even inlined ones) can cause to make more children have you tried this? (also what about inline code?)

[cpreston321]

Ahh you are right. I came up with something that could be better but this is the solution I came up with:

function transformStepsList(node: ContentNode) {
  // CONVERT OL->LI to Steps
  // TODO: Find a way to opt out of this transformation if needed within markdown.
  if (node.tag === 'ol' && (node.children?.length || 0) > 0 && node.children?.[0].tag === 'li') {
    const stepsChildren = node.children.map((li) => {
      const children = li.children || []

      return {
        type: 'element',
        tag: 'div',
        children,
      }
    })

    const lastLeadingSpaceOnStep = stepsChildren.map((step) => {
      let lastLeadingSpace = -1;

      for (let i = 0; i < step.children.length; i++) {
        const child = step.children[i];
        const prevChild = step.children[i - 1];
        if (
          (child?.type === 'text' && child.value?.startsWith(' ')) ||
          (prevChild?.type === 'text' && prevChild?.value?.endsWith(' '))
        ) {
          lastLeadingSpace = i;
        }
      }

      return lastLeadingSpace;
    }).filter((step) => step > -1);

    const stepsHaveContent = stepsChildren.some((step) => {
      if (lastLeadingSpaceOnStep.length > 0) {
        return step.children.slice(lastLeadingSpaceOnStep[0], lastLeadingSpaceOnStep[0]).length > 1
      }

      return step.children.length > 1
    })

    if (stepsHaveContent) {
      node.type = 'element'
      node.tag = 'Steps'
      node.props = {}
      node.children = stepsChildren
    }
  }
}