Change markdown instruction to button

[wassimkha]

Hi, I'm trying to change a textDirective in my markdown instructions to an HTML button
My textDirective looks like this:

:toButton{port=”5050” route=”/browser” name=”name of button” display=”internal”}

and I want to transform it to something like:

<button onclick="console.log("port is 8080")">name</button>

So what I've done so far is have my markdown running through some compilers and I added my own custom pluggin:

unified()
        .use(remarkParse)
        .use(remarkDirective)
        .use(customPlugin) //my pluggin
        .use(remarkStringify)
        .process(markdown, (err, file) => {
            if (err){
                console.log(err)
            } else {
                const content = file.contents;
                res.render('render', { markdown: content }); 
            }
        })

and my customPluggin is looking like:

function customPlugin() {
        return (tree, file) => {
            visit(tree, (node, index, parent) => {
                if (node.type === "textDirective" && node.name === "toButton") {
                    const {port, route, name, display} = node.attributes;
                    // create a button here and insert it in the markdown
                }
            })
        }
    }

So I'm able to loop through the tree and select my textDirective with the info that I pass, but after quite some time on this, I'm still unsure on how to make that button and insert it in the markdown.

Any help would be greatly appreciated!

[ChristianMurphy]

Could you share a runnable example of the issue? (using a codesandbox, there are some starters which could help https://codesandbox.io/s/remark-debug-ikwvx and https://codesandbox.io/s/remark-rehype-debug-4cz8v)
Do the examples in syntax-tree/unist#54 (comment) and or remarkjs/remark#867 (comment) help?

[wassimkha]

Thank you for answering so far! I am indeed trying to do something like the first comment, so replacing the current node with an html tag ( parent.children[index] = ... ), the issue is that I need to create a Node element to be able to push it into the children array. Would you know how I can create a Node element?

When I try to insert a string, or anything else, I get the message:

Error: Cannot handle unknown node `element`

[wassimkha]

I'm not sure if this is a working example, but I tried to reproduce it in sandbox: https://codesandbox.io/s/remark-rehype-debug-forked-n8pi4?file=/src/index.js

[ChristianMurphy]

To point you in the right direction.
Directive need to use " for attributes, ” are not parsed as attributes.
Another is, visit can include a test/condition in the second parameter which can simplify the code some,
and last but not least hName, hProperties, and hChildren can be used to tell remark-rehype what HTML tag should be used for the custom directive

combined with your example, thos could look like: https://codesandbox.io/s/remark-rehype-debug-forked-1jf3j?file=/src/index.js

[wassimkha]

Thank you very much @ChristianMurphy for all your inputs! I'll keep trying to get this functionality working

[wassimkha]

@ChristianMurphy I found that I can just create a new node manually and push it to the parent's children:

const newNode = {
                        type: 'html',
                        value: `<div>hello</div>`
                    }
parent.children.push(newNode);

This pretty much did what I wanted!

Thanks for the help!