find and replace custom elements #155

gaurishhs · 2023-10-13T09:41:37Z

gaurishhs
Oct 13, 2023

hi! i'm making a utility to replace tags with mso comments used by microsoft email engine (further a part of an email framework). it's work is to basically replace something like <outlook>hi</outlook> to  i tried using hast-util-find-and-replace but that doesn't seem to work in my case.

export const rehypeMso: Plugin<[Options?], Root, Root> = (options) => {
    if (!options) options = { tag: "outlook" };
    const processor = this;
    return (tree, vfile) => findAndReplace(tree, [
        [
            /outlook/gi, 
            ($0) => {
                return {
                    type: "comment",
                    value: "if !mso"
                }
            }
        ]
    ])
}

i also tried to implement something like visiting every node and modifying them

export const rehypeMso: Plugin<[Options?], Root, Root> = (options) => {
    if (!options) options = { tag: "outlook" };
    const processor = this;
    return (tree, vfile) => {
        const ctx: ComponentContext = { tree, vfile, processor };
        visit(tree, 'element', (node, index, parent) => {
            node.type = 'comment'
        })
    }
}

but got typescript errors

Type '"comment"' is not assignable to type '"element"'.ts(2322) which is quite fair since i check for it to be an element first.

how should i be going about doing this?

wooorm · 2023-10-13T10:52:33Z

wooorm
Oct 13, 2023
Maintainer

You seem to not be dealing with HTML, but perhaps some custom XML flavor.
These projects are for HTML.

find-and-replace replaces text. <outlook> is not text.

visit is perhaps what you want.
Perhaps our guides are also useful:

Can you take some time investigating this info, change your example based on it, and post here if you still have questions?

7 replies

gaurishhs Oct 13, 2023
Author

yeah i dont wanna use both at the same time.

ChristianMurphy Oct 13, 2023
Maintainer

Okay, rehype is a general framework for working with HTML, it supports the parse5 and DOM parsers, and can support others like PostHTML. "Both at the same time" doesn't really make sense as a characterization.

If you're looking for suggestions on how to leverage the rehype ecosystem, you've been given several.
If you don't want to use rehype, the rehype discussion forum may not be the best place to ask questions 😉😅
If you have follow up questions on how to leverage rehype feel free to ask them.

gaurishhs Oct 14, 2023
Author

"Both at the same time" doesn't really make sense as a characterization.

I apologise for the misunderstanding, i mean't that i don't want to use posthtml rather i would go with parse5

visit(tree, 'element', (node, index, parent) => {
            if (node.tagName === options?.tag) {
                // Replace it with mso comment
                if (!index) return;
                if (node.children.length !== 1) return;
                if (!parent || !parent?.children[index]) return;
                parent.children.splice(index, 1, {
                  type: "comment",
                  value: ` [if mso]> ${node.children[0].value} <![endif] `,
                })
                return [SKIP, index]                
            } 
        })

This is what i managed to do, This does work but i don't know whether i am doing it correctly or not, node.children[0].value should be used or not?

Input:

const file = await unified()
  .use(rehypeParse)
  .use(rehypeMso)
  .use(rehypeStringify).process(`<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Saturn</title>
  </head>
  <body>
    <h1>Saturn</h1>
    <outlook>
        hi 
        halo
        haahhaa
        a
        a
        a
        a
        a
        a
        
    </outlook>
  </body>
</html>`)

Output:

<!doctype html><html lang="en"><head>
    <meta charset="utf-8">
    <title>Saturn</title>
  </head>
  <body>
    <h1>Saturn</h1>
    <!-- [if mso]> 
        hi 
        halo
        haahhaa
        a
        a
        a
        a
        a
        a
        
     <![endif] -->
  
</body></html>

wooorm Oct 15, 2023
Maintainer

Not enough info.
See my earliest point: these projects are about HTML, old “IE-like comments” are not part of HTML.
Also, not enough info, you post certain input, and some code and some output which doesn’t work, and... What do you want? I don’t know what you want?

gaurishhs Oct 15, 2023
Author

Got that, Will try to be more informative next time.

Thanks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rehype

find and replace custom elements #155

{{title}}

Replies: 1 comment 7 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

rehype

find and replace custom elements #155

gaurishhs Oct 13, 2023

Replies: 1 comment · 7 replies

wooorm Oct 13, 2023 Maintainer

gaurishhs Oct 13, 2023 Author

ChristianMurphy Oct 13, 2023 Maintainer

gaurishhs Oct 14, 2023 Author

wooorm Oct 15, 2023 Maintainer

gaurishhs Oct 15, 2023 Author

gaurishhs
Oct 13, 2023

Replies: 1 comment 7 replies

wooorm
Oct 13, 2023
Maintainer

gaurishhs Oct 13, 2023
Author

ChristianMurphy Oct 13, 2023
Maintainer

gaurishhs Oct 14, 2023
Author

wooorm Oct 15, 2023
Maintainer

gaurishhs Oct 15, 2023
Author