Can't search text from custom components about nextra HOT 14 CLOSED

No way to solve this issue for now, since the search is indexed from md/mdx files for now, only migration to Pagefind could fix it

from nextra.

But Pagefind doesn't support specialized languages (https://pagefind.app/docs/multilingual/), worse than flexsearch at this point.

from nextra.

A little tweak of Nextra's AST pipeline would offer a solution.

First define a remark plugin function, here I named it stringifyReactComponentPlugin:

const stringifyReactComponentPlugin = () => {
  return function transformer(tree) {
  // mdxJsxFlowElement is the type of JSX Element in the tree parsed from .mdx files.
    visit(tree, 'mdxJsxFlowElement', (node) => {
      if (node.name === '<<YOUR COMPONENT NAME>>') {
        node.children = [ { type: 'text', value: '<<TEXT CORRESPONDING TO YOUR COMPONENT>>' } ];
      }
    });
  };
};

Replace <<YOUR COMPONENT NAME>> with the name of your component and <<TEXT CORRESPONDING TO YOUR COMPONENT>> with the string representation of your JSX element.

When you print the node, it will look like this. You can retrieve the attributes passed to the component and generate the corresponding text as desired:

{
  "type": "mdxJsxFlowElement",
  "name": "UserProfile",
  "attributes": [
    {
      "type": "mdxJsxAttribute",
      "name": "userId",
      "value": "mylittleairport"
    },
    {
      "type": "mdxJsxAttribute",
      "name": "shape",
      "value": "round"
    }
  ],
  "children": [],
  "position": {
    "start": {
      "line": 6,
      "column": 1,
      "offset": 29
    },
    "end": {
      "line": 6,
      "column": 73,
      "offset": 101
    }
  },
  "data": {
    "_mdxExplicitJsx": true
  }
}

Then, under the withNextra block of your project, add mdxOptions.remarkPlugins configuration as following:

const withNextra = nextra({
  theme: "nextra-theme-docs",
  themeConfig: "./theme.config.jsx",
  // ADD THIS
  mdxOptions: {
    remarkPlugins: [stringifyReactComponentPlugin],
  }
});

Now re-run your Nextra project, value under the children you just defined will show up in your Nextra search result 🎇🎇.

from nextra.

Thank you! But it seems doesn't work. And in my case, I can found the content in the node, but even I push this JSON Object into node.children, it also can't search anything.:

node.children.push(
    {
      "type": "paragraph",
      "children": [
        {
          "type": "text",
          "value": "some text in the component",
          "position": "position object here"
        }
      ],
      "position": "position object here"
    }
  )                
})

I checked Callout node, the data structures of Callout and my component(XTable) seem to be the same:

Callout

{
  type: 'mdxJsxFlowElement',
  name: 'Callout',
  attributes: [
    { type: 'mdxJsxAttribute', name: 'type', value: 'warning' },
    { type: 'mdxJsxAttribute', name: 'emoji', value: '️' }
  ],
  children: [ { type: 'paragraph', children: [Array], position: [Object] } ],
  position: {
    start: { line: 107, column: 1, offset: 2238 },
    end: { line: 109, column: 11, offset: 2330 }
  },
  data: { _mdxExplicitJsx: true }
}

Callout node.children[0].children[0]

{
    "type":"paragraph",
    "children":[
        {
            "type":"text",
            "value":"<some text here>",
            "position":{
                "start":{
                    "line":71,
                    "column":11,
                    "offset":1780
                },
                "end":{
                    "line":71,
                    "column":21,
                    "offset":1790
                }
            }
        }
    ],
    "position":{
        "start":{
            "line":71,
            "column":11,
            "offset":1780
        },
        "end":{
            "line":71,
            "column":21,
            "offset":1790
        }
    }
}

XTable

{
  type: 'mdxJsxFlowElement',
  name: 'XTable',
  attributes: [
    { type: 'mdxJsxAttribute', name: 'headers', value: [Object] },
    { type: 'mdxJsxAttribute', name: 'columns', value: [Object] }
  ],
  children: [
    { type: 'paragraph', children: [Array], position: [Object] },
    { type: 'paragraph', children: [Array], position: [Object] }
  ],
  position: {
    start: { line: 95, column: 1, offset: 2093 },
    end: { line: 100, column: 3, offset: 2185 }
  },
  data: { _mdxExplicitJsx: true }
}

XTable node.children[0].children[0]

{
    "type":"paragraph",
    "children":[
        {
            "type":"text",
            "value":"<some text here>",
            "position":{
                "start":{
                    "line":220,
                    "column":5,
                    "offset":4205
                },
                "end":{
                    "line":220,
                    "column":9,
                    "offset":4209
                }
            }
        }
    ],
    "position":{
        "start":{
            "line":220,
            "column":5,
            "offset":4205
        },
        "end":{
            "line":220,
            "column":9,
            "offset":4209
        }
    }
}

from nextra.

Thank you! But it seems doesn't work. And in my case, I can found the content in the node, but even I push this JSON Object into node.children, it also can't search anything.:

node.children.push(
    {
      "type": "paragraph",
      "children": [
        {
          "type": "text",
          "value": "some text in the component",
          "position": "position object here"
        }
      ],
      "position": "position object here"
    }
  )                
})

I checked Callout node, the data structures of Callout and my component(XTable) seem to be the same:

Callout

{
  type: 'mdxJsxFlowElement',
  name: 'Callout',
  attributes: [
    { type: 'mdxJsxAttribute', name: 'type', value: 'warning' },
    { type: 'mdxJsxAttribute', name: 'emoji', value: '️' }
  ],
  children: [ { type: 'paragraph', children: [Array], position: [Object] } ],
  position: {
    start: { line: 107, column: 1, offset: 2238 },
    end: { line: 109, column: 11, offset: 2330 }
  },
  data: { _mdxExplicitJsx: true }
}

Callout node.children[0].children[0]

{
    "type":"paragraph",
    "children":[
        {
            "type":"text",
            "value":"<some text here>",
            "position":{
                "start":{
                    "line":71,
                    "column":11,
                    "offset":1780
                },
                "end":{
                    "line":71,
                    "column":21,
                    "offset":1790
                }
            }
        }
    ],
    "position":{
        "start":{
            "line":71,
            "column":11,
            "offset":1780
        },
        "end":{
            "line":71,
            "column":21,
            "offset":1790
        }
    }
}

XTable

{
  type: 'mdxJsxFlowElement',
  name: 'XTable',
  attributes: [
    { type: 'mdxJsxAttribute', name: 'headers', value: [Object] },
    { type: 'mdxJsxAttribute', name: 'columns', value: [Object] }
  ],
  children: [
    { type: 'paragraph', children: [Array], position: [Object] },
    { type: 'paragraph', children: [Array], position: [Object] }
  ],
  position: {
    start: { line: 95, column: 1, offset: 2093 },
    end: { line: 100, column: 3, offset: 2185 }
  },
  data: { _mdxExplicitJsx: true }
}

XTable node.children[0].children[0]

{
    "type":"paragraph",
    "children":[
        {
            "type":"text",
            "value":"<some text here>",
            "position":{
                "start":{
                    "line":220,
                    "column":5,
                    "offset":4205
                },
                "end":{
                    "line":220,
                    "column":9,
                    "offset":4209
                }
            }
        }
    ],
    "position":{
        "start":{
            "line":220,
            "column":5,
            "offset":4205
        },
        "end":{
            "line":220,
            "column":9,
            "offset":4209
        }
    }
}

I just tried nested children and it also worked, I don't think the problem came from that. Have you tried restarting your project & refreshing the page?
Only after restarting the project can the remarkPlugin be applied, also I noticed in dev mode only the current page(after being hard refreshed instead of programmatically redirected) will be processed&indexed thus can be searched, you can get full search results of the whole document after rebuilding the project.

from nextra.

Yeah, I restarted the project, and only search the content in the current page.

And I also build the project, not only in the dev mode.

from nextra.

Here is the XTable code:

import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Spacer} from "@nextui-org/react";

export function XTable({ headers, columns, ...props }) {
  return (
    <>
      <Spacer y={6} />
      <Table className="" aria-label="table" {...props}>
        <TableHeader>
          {headers.map((header: string, i: number) => (
            <TableColumn key={ i }>{ header }</TableColumn>
          ))}
        </TableHeader>
        <TableBody>
          {columns.map((content: [string], j: number) => (
            <TableRow key={ j } className={styles.xtd}>
              {content.map((text, k) => (
                <TableCell key={ k }>{ text }</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <Spacer y={2} />
    </>
  )
}

in the .mdx file:

<XTable
  headers={['content']}
  columns={[
    ["some text here"]
  ]}
/>

I can't search for some text here.

from nextra.

Here is the XTable code:

import {Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Spacer} from "@nextui-org/react";

export function XTable({ headers, columns, ...props }) {
  return (
    <>
      <Spacer y={6} />
      <Table className="" aria-label="table" {...props}>
        <TableHeader>
          {headers.map((header: string, i: number) => (
            <TableColumn key={ i }>{ header }</TableColumn>
          ))}
        </TableHeader>
        <TableBody>
          {columns.map((content: [string], j: number) => (
            <TableRow key={ j } className={styles.xtd}>
              {content.map((text, k) => (
                <TableCell key={ k }>{ text }</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <Spacer y={2} />
    </>
  )
}

in the .mdx file:

<XTable
  headers={['content']}
  columns={[
    ["some text here"]
  ]}
/>

I think you can try to set the children with the simplest hardcoded value like this:

[ { "type": "text", "value": "TESTTEXT123456" } ]

and then see if TESTTEXT123456 can be searched.

Also every first time you do any search, Nextra fetches a JSON file http://localhost:3000/docs/_next/static/chunks/nextra-data-en-US.json (en-US can vary depending on your configuration), you can see how your documents are being indexed in this file, it can tell if any remarkPlugin was being applied or if this page was processed&indexed.

from nextra.

node.children = [ { "type": "text", "value": "TESTTEXT123456" } ]

Still got nothing.

And there is no TESTTEXT123456 in the nextra-data-en-US.json

from nextra.

stringifyReactComponentPlugin

Can you post the code of your implementation of stringifyReactComponentPlugin here?

from nextra.

stringifyReactComponentPlugin

Can you post the code of your implementation of stringifyReactComponentPlugin here?

import {visit} from 'unist-util-visit'

const stringifyReactComponentPlugin = () => {
  return function transformer(tree) {
  // mdxJsxFlowElement is the type of JSX Element in the tree parsed from .mdx files.
    visit(tree, 'mdxJsxFlowElement', (node) => {
      if (node.name === 'XTable') {
        node.attributes.forEach(attribute => {
          if (attribute.name === "columns") {
            attribute.value.data.estree.body[0].expression.elements.forEach(element => {
              element.elements.forEach(e => {
                let children = null
                switch (e.type) {
                  case "Literal":
                    children = e
                    break
                  case "JSXElement":
                    children = e.children[0]
                    break
                }
                children && node.children.push(
                  {
                    "type": "paragraph",
                    "children": [
                      {
                        "type": "text",
                        "value": children.value,
                        "position": children.loc
                      }
                    ],
                    "position": children.loc
                  }
                )                
              })
            })
            return
          }
        });
      }
    });
  };
};

from nextra.

I got it!

I just found that nextra-data-en-US.json not update, even I restart the project, or refresh the page. Then I open it in InPrivate Window, it final works, thank you very much, this helps me a lot!

from nextra.

I got it!

I just found that nextra-data-en-US.json not update, even I restart the project, or refresh the page. Then I open it in InPrivate Window, it final works, thank you very much, this helps me a lot!

Happy to be able to help you.😀

from nextra.

I got it!
I just found that nextra-data-en-US.json not update, even I restart the project, or refresh the page. Then I open it in InPrivate Window, it final works, thank you very much, this helps me a lot!

Happy to be able to help you.😀

Thank you, I'll close this Issue.

from nextra.