In react-remark, can I update text from a rehype plugin?

[jasonterando]

Hi, I am experimenting with plugins. In react-remark, I would like to update text in markup with values available in React. I know that there are options like remark-directive, but I still need to be able to write a plug-in to make it work.

While fully realizing I can just do a search/replace on the help variable, I'm trying to learn how this plugin mechanism works.

Spent the better part of the day looking at tutorials, examples, etc. and... I'm lost. I'm pretty sure I can't just replace value, but cannot find what it is I should be doing. Can somebody give me a hint as to where I'm going wrong with this?

Here's what I'm trying to do:

    let help = useSelector((state: WorkbookState) => state.navigation.helpText)
    let name = useSelector((state: WorkbookState) => state.navigation.appName)
    let version = useSelector((state: WorkbookState) => state.navigation.appVersion)

    function replaceNameAndVersion() {
        return (tree: Node) => {
            visit(tree, 'text', (node: Node) => {
                console.log('Text Node', node)
                // @ts-expect-error
                if (node.value.indexOf('{name}') !== -1) {
                    // @ts-expect-error
                    node.value = node.value.replace('{name}', name)
                }
                // @ts-expect-error
                if (node.value.indexOf('{version') !== -1) {
                    // @ts-expect-error
                    node.value = child.replace('{version}', version)
                }
            })
        }
    }

// and later...

    <Remark
        rehypePlugins={[replaceNameAndVersion]}
    >
        {help}
    </Remark>

Here's what the plugin is receiving...

{type: "text", value: "Test Pane", position: {start: {line: 30, column: 4, offset: 842}, end: {line: 30, column: 13, offset: 851}}}

Thanks!

[wooorm]

The answer to your discussion title: yes!

For the rest: reading your question leaves me unsure what you actually want to do. Some more info would be helpful!

I'm trying to learn how this plugin mechanism works.

There are some guides on unifiedjs.com. But. ASTs and compilers and parsers are complex. You’ll need to have pretty decent knowledge of programming. Be able to read code. So at this point, reading the existing plugins will get you very far, that’s what I’d really recommend, read a lot, try a lot, build different things, post your questions here.

Here's what I'm trying to do:

If you want to find and replace, use https://github.com/syntax-tree/hast-util-find-and-replace.
To learn how that works, read its code!

[jasonterando]

Hi Titus - thanks for the response! I hope you are having a great weekend. I've got something working with a combination of remark-directive and react-remark (yeah, I'm working with React and MUI in TypeScript .tsx files)

A challenge I have had with RTFM and examples to figure things out is that most of the examples are not playing well with TypeScript's typing system. Examples like those shown in remark-directive's readme are all JavaScript, as are the unit tests, so there is not much help there.

I have to revert to "any" and spend time in the browser's debugger to figure out what is what. Since you guys have invested a lot of energy building out typings files, I don't think this was the intent.

For example, in the function remarkInfoDirective below, I have a visitor set up for 'textDirective" and it works. The node is typed as TextDirective, although I have to put that in manually, it's not inferred. Not a big deal, but I think there might be ways of using 'textDirective' to determine the type of the node parameter A little more surprising, in the function itself when I access node.data, it's typed as TextDirectiveData (awesome!) but TextDirectiveData has no properties and extends mdast Data, which has no properties and extends UnistData, which also has no properties. In order to set hName and hChildren, I have to typecast node.data as "any", and then TypeScript is no longer helpful in determining what I can or cannot put in for hName, hChildren, etc. I have to run it and debug it to see whether it will work or not.

Similarly, I can't find what type to use for the component function arguments.

None of these things represent blockers to using these libraries. And I am able to do what I need to do -- being able transforming Markdown to React is slick! The process just feels a little bit more "frictional" than it perhaps needs to be.

import { useSelector } from 'react-redux'
import { WorkbookState } from '../models/store'
import { Box, Typography } from '@mui/material'
import { HTMLAttributes } from 'react'
import { visit } from 'unist-util-visit';
import { Node as DastNode } from 'mdast';
import { Remark } from 'react-remark'
import RemarkDirective from 'remark-directive'
import { TextDirective } from 'mdast-util-directive'

// Register `hName`, `hProperties` types, used when turning markdown to HTML:
/// <reference types="mdast-util-to-hast" />
// Register directive nodes in mdast:
/// <reference types="mdast-util-directive" />

export function HelpPanel(props: { showHelp: (topic: string) => void }) {
    let name = useSelector((state: WorkbookState) => state.navigation.appName)
    let version = useSelector((state: WorkbookState) => state.navigation.appVersion)
    let help = useSelector((state: WorkbookState) => state.navigation.helpText)

    /**
     * Replace info[name] and info[version]
     * @returns 
     */
    function remarkInfoDirective() {
        return (tree: DastNode) => {
            visit(tree, 'textDirective', function (node: TextDirective) {
                if (node.name !== 'info' || node.children.length === 0) return
                const child = node.children[0]
                if (child.type !== 'text') return

                // What is the type for "data"?  TextDirectiveData does not have hName or hChildren...
                const data: any = node.data || (node.data = {})

                let replaceWith
                switch (child.value) {
                    case 'name':
                        replaceWith = name
                        break
                    case 'version':
                        replaceWith = version
                        break
                    default:
                        // if not an information item that we know about, ignore it
                        return
                }
                data.hName = 'span'
                data.hChildren = [
                    {
                        type: 'text',
                        value: replaceWith
                    }
                ]
            });
        }
    }

    /**
     * Transform HTML headers to MUI Typography and add a slug
     * @param component 
     * @returns 
     */
    const rehypeTransformHeader = (component: any) => {
        if (component.children && component.children.length === 1 && component.node) {
            const id = component.children.toString().toLowerCase().replace(/[^\s\w]/g, '').replace(/\s/g, '-')
            const name = component.node.tagName
            return <Typography id={id} variant={name} {...component} />
        } else {
            return null
        }
    }

    return (
        <Remark
            remarkPlugins={[RemarkDirective, remarkInfoDirective]}
            rehypeReactOptions={{
                passNode: true,
                components: {
                    h1: rehypeTransformHeader,
                    h2: rehypeTransformHeader,
                    h3: rehypeTransformHeader,
                    h4: rehypeTransformHeader,
                    h5: rehypeTransformHeader,
                    h6: rehypeTransformHeader,
                    p: (attrs:any) => <Box {...attrs} />
                }
            }}
        >
            {help}
        </Remark>
    )
}

[ChristianMurphy]

A challenge I have had with RTFM and examples to figure things out is that most of the examples are not playing well with TypeScript's typing system.
I have to revert to "any" and spend time in the browser's debugger to figure out what is what.

The typings in react-remark are currently a version behind, which may cause type incompatibility which doesn't reflect the actual state of if the code runs or not.
There's a PR working to upgrade the types, along with re-architect the build and documentation, it's been a slow process due to other initiatives being the priority over this remarkjs/react-remark#39

I access node.data, it's typed as TextDirectiveData (awesome!) but TextDirectiveData has no properties and extends mdast Data, which has no properties and extends UnistData, which also has no properties. In order to set hName and hChildren

Correct, Data is empty by default, but Data is also designed to be extensible.
You can find an example of how to do this in the type tests https://github.com/DefinitelyTyped/DefinitelyTyped/blob/7f2bd34e1870ee0537cc60b71c30f38ee44c6c65/types/mdast/mdast-tests.ts#L390-L399

Similarly, I can't find what type to use for the component function arguments.

Using the jump to definition feature in you editor of choice is a good way to find a type definition (not just here but in general).
A link to where you can find the type in case you aren't using an IDE https://github.com/syntax-tree/hast-util-to-jsx-runtime/blob/05c087bef85f6dd6a1f1a09abc0aef89236f7f69/lib/components.d.ts#L61-L65

[jasonterando]

Thanks Christian. This ecosystem is obviously a huge undertaking, and the results are awesome. I'm sure the backlog of things to do far exceeds the amount of people available to do them, as is the case with a lot of great projects.

In the case of the component, when I jumped to the definition I saw the definition below. That "unknown" makes it a little rough to know what to put in. I imagine this may be on the list of things you want to smooth over in that remark #39.

The bottom line is that I can get the libraries to do what I need, which is the important part. Functional typings just give warm fuzzies that I'm using the library as intended. At the moment, it fees like I'm throwing pasta against the wall and seeing what sticks.

Thanks to both you and Titus for the responses. When I get to the finish line on the project I'm working on, I may look for opportunities to contribute to the remark/rehype ecosystem.

        components?: Record<
          string,
          ComponentLike<ReturnType<H>, ComponentPropsWithNode>
        >

// and further above

  type ComponentPropsWithoutNode = Record<string, unknown>

  interface ComponentPropsWithNode extends ComponentPropsWithoutNode {
    node: Node
  }