remarkPyMdownTabs() — supabase Function Reference

Architecture documentation for the remarkPyMdownTabs() function in remarkTabs.ts from the supabase codebase.

Function typescript DocumentationSystem ReferenceGen calls 1 called by 1

Entity Profile

DocumentationSystem→ ReferenceGen→ remarkPyMdownTabs() — supabase Function Reference

Dependency Diagram

graph TD
  338597d5_a45e_59aa_37ea_69304bfc49d3["remarkPyMdownTabs()"]
  67a945e1_7550_1b68_2ba7_665ba0ff6278["preprocessMdxWithDefaults()"]
  67a945e1_7550_1b68_2ba7_665ba0ff6278 -->|calls| 338597d5_a45e_59aa_37ea_69304bfc49d3
  79e741f0_6b5e_3805_d9ce_d21040e04151["extractLinkedSiblings()"]
  338597d5_a45e_59aa_37ea_69304bfc49d3 -->|calls| 79e741f0_6b5e_3805_d9ce_d21040e04151
  style 338597d5_a45e_59aa_37ea_69304bfc49d3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/lib/mdx/plugins/remarkTabs.ts lines 11–116

const remarkPyMdownTabs = function () {
  return function transformer(root: Root) {
    visit(root, 'paragraph', (node: Paragraph, nodeIndex: number, parent: Root) => {
      for (let i = 0; i < node.children.length; i++) {
        const child = node.children[i]
        if (child.type !== 'text') {
          continue
        }

        // Look for 3 '=', followed by an optionally quoted title,
        // followed by optional newlines of text
        const match = child.value.match(/^\n*=== ("?)(.+)\1\n?((?:.|\n)*)/)

        if (!match) {
          continue
        }

        // Extract the tab title along with the remaining text
        const [, , title, value] = match

        // Rewrite the node's value to remove the tab syntax
        child.value = value

        // Extract sibling nodes that should be linked to this tab
        const siblingsToNest = extractLinkedSiblings(parent, node, nodeIndex)

        const children: any[] = [...node.children.slice(i), ...siblingsToNest]

        const tabPanelElement: MdxJsxFlowElement = {
          type: 'mdxJsxFlowElement',
          name: 'TabPanel',
          attributes: [
            {
              type: 'mdxJsxAttribute',
              name: 'id',
              value: title,
            },
            {
              type: 'mdxJsxAttribute',
              name: 'label',
              value: title,
            },
          ],
          children,
        }

        let nodesAdded = 0
        const previousNode = parent.children[nodeIndex - 1]

        if (previousNode?.type === 'mdxJsxFlowElement' && previousNode.name === 'Tabs') {
          // Add TabPanel to existing Tabs component
          previousNode.children.push(tabPanelElement)

          // Remove this node
          parent.children.splice(nodeIndex, 1)
          nodesAdded--
        } else {
          // Create new Tabs components and add TabPanel
          const tabsElement: MdxJsxFlowElement = {
            type: 'mdxJsxFlowElement',
            name: 'Tabs',
            attributes: [
              {
                type: 'mdxJsxAttribute',
                name: 'scrollable',
              },
              {
                type: 'mdxJsxAttribute',
                name: 'size',
                value: 'small',
              },
              {
                type: 'mdxJsxAttribute',
                name: 'type',
                value: 'underlined',
              },
            ],
            children: [tabPanelElement],
          }

          // Overwrite this paragraph node with Tabs component
          parent.children.splice(nodeIndex, 1, tabsElement)
        }

        // If this wasn't the first child of the paragraph, create
        // a new paragraph before this with the previous text children
        if (i > 0) {
          const previousChildren = node.children.slice(0, i)
          const paragraph: Paragraph = {
            type: 'paragraph',
            children: previousChildren,
          }
          parent.children.splice(nodeIndex, 0, paragraph)

          nodesAdded++
        }

        // Return the correct index for the next visit, since
        // we may have added or removed an element in the array
        return nodeIndex + nodesAdded
      }
    })

    return root
  }
}