Parse HAST node as a custom preact component

[GitVex]

Heyo,

I've been working on a project to support some custom markdown syntax which will be rendered as a custom preact component.

I've done the steps in remark and the remarkRehype stages, so now I have my markdown content wrapped in §§[content]§§ properly marked by HTML elements <inline-redactions>[content]</inline-redaction>

Though, now I need to tell rehype to parse those elements as a custom preact component InlineRedaction.tsx.
I've gotten so far that I probably need the rehype-react plugin. But I'm struggling to configure it properly.

Does anyone have experience with the plugin or this use case? I'd very much appreciate some pointers here.

[ChristianMurphy]

Why do you need to parse HTML?
Are you using raw nodes?
If so consider using hName instead https://github.com/syntax-tree/mdast-util-to-hast?tab=readme-ov-file#fields-on-nodes

[ChristianMurphy]

Or if you already have the HAST how you want it.
You can indeed use https://github.com/rehypejs/rehype-react
Using Fragment, JSX, and JSXS from preact in https://github.com/rehypejs/rehype-react?tab=readme-ov-file#options

[GitVex]

Thanks for the reply,

I'm using astro and I'm having a hard time configuring the unified processor through the astro config:

// @ts-check
import {defineConfig} from 'astro/config';

import preact from '@astrojs/preact';
import { Fragment, h } from 'preact';
import tailwindcss from '@tailwindcss/vite';
import rehypeReact from "rehype-react";
import {InlineRedaction} from "./src/components/Article/InlineRedaction";


// https://astro.build/config
export default defineConfig({
    integrations: [preact({compat: true})],

    markdown: {
        remarkPlugins: [
            // remark plugins
        ],
        rehypePlugins: [
            [rehypeReact, {
                createElement: h,
                Fragment,
                components: {
                    'inline-redaction': InlineRedaction
                }
            }]
        ]

    },

    vite: {
        plugins: [tailwindcss()]
    }
});

// some more irrelevant code

Though, this doesn't seem to have any effect at all.
Elements of the <inline-redaction> tag are still uneffected by the plugin.

[ChristianMurphy]

Astro is acting as the renderer in this example, rehype react can't do anything to help.
You may be able to pass a custom renderer on the Astro side
https://stackoverflow.com/questions/76414686/custom-components-in-markdown-mdx-on-astro

[GitVex]

Ah, I see. Thanks a lot.

So what I'm getting is that the whole approach of going through the unified pipeline was kind of doomed from the start and I should've used MDX from the start?

[ChristianMurphy]

Markdown can in theory also pass in a components prop (mdx is a remark plugin), what remark can too.
The Astro team would be better able to answer how that works in their renderer.

[GitVex]

I see. Thank you 🙏

I'll go ahead with MDX then.

You've helped me a lot. I'll mark this as answered.