Custom Turndown plugin to HTMLarkdown plugin equivalent

[EvitanRelta]

Question on Reddit on whether HTMLarkdown can be customised to convert custom-HTML to custom-Markdown, like in Turndown.

Yep, it can! Here's a Turndown plugin, that adds a custom rule:

import { kebabCase } from 'lodash-es'

import type { NodeType } from 'prosemirror-model'
import type Turndown from 'turndown'

/**
 * A Turndown plugin which adds a custom rule for suggestion nodes created by the suggestion
 * extension factory function.
 *
 * @param nodeType The node object that matches this rule.
 */
function suggestion(nodeType: NodeType): Turndown.Plugin {
    const attributeType = kebabCase(nodeType.name.replace(/Suggestion$/, ''))
    const isSuggestion = (node: Element) => node.hasAttribute(`data-${attributeType}`)

    return (turndown: Turndown) => {
        turndown.addRule(nodeType.name, {
            filter: isSuggestion ,
            replacement: (_, node) => {
                const label = String((node as Element).getAttribute('data-label'))
                const id = String((node as Element).getAttribute('data-id'))

                return `[${label}](${attributeType}://${id})`
            },
        })
    }
}

export { suggestion }

And here's the equivalent in HTMLarkdown:

import { kebabCase } from 'lodash-es'

import type { NodeType } from 'prosemirror-model'
import type { Plugin, HTMLarkdown } from 'htmlarkdown'

function suggestion(nodeType: NodeType): Plugin {
    const attributeType = kebabCase(nodeType.name.replace(/Suggestion$/, ''))
    const isSuggestion = (node: Element) => node.hasAttribute(`data-${attributeType}`)

    return (htmlarkdown: HTMLarkdown) => {
        htmlarkdown.addRule({
            filter: [isSuggestion],
            replacement: (node) => {
                const label = String(node.getAttribute('data-label'))
                const id = String(node.getAttribute('data-id'))

                return `[${label}](${attributeType}://${id})`
            },
        })
    }
}

export { suggestion }

[EvitanRelta]

Actually, the demo-site exposes the HTMLarkdown instance that's used at window.htmlarkdown, so u can actually try adding the rule and testing like:

[rfgamaral]

Thank you so much for documenting this 👍

[EvitanRelta]

no problem! :D