I’m trying to use @toast-ui/react-editor in a react-admin application. There is a specific feature that we need to use, which is the usage of inline widget nodes. I’ve tried adapting the setup described in the Toast UI Editor documentation for react component, but it seems that the toDom()-function is never called. Instead, it will always show the given text as standard markdown links, as is expected when the inline widgets do not work. Does anyone know why toDom is never called?

Here’s a minimal component that can be used to replicate the scenario:

import React from 'react'
import { Editor } from '@toast-ui/react-editor'
import '@toast-ui/editor/dist/toastui-editor.css'

const reWidgetRule = /[(@S+)]((S+))/

class MyComponent extends React.Component {
    editorRef: any = React.createRef()

    widgetRules = [
        {
            rule: reWidgetRule,
            toDOM(text: string) {
                const matched = text.match(reWidgetRule)
                const span = document.createElement('span')

                span.innerHTML = `<a class="widget-anchor" href="${matched![2]}">${matched![1]}</a>`
                return span
            }
        }
    ]

    render() {
        return (
            <>
                <Editor
                    previewStyle="vertical"
                    height="400px"
                    initialEditType="markdown"
                    initialValue="Test123"
                    ref={ this.editorRef }
                    widgetRules={ this.widgetRules }
                />
            </>
        )
    }
}