Linkify plugin cannot be clicked in read-only mode

[resqiar]

Hi, thank you for working on this great library!

I'm trying to integrate Linkify plugin to Draftail Editor, so I use this plugin draft-js-linkify-plugin, everything was fine, works great, but when the editor is in read-only mode, the link is not clickable, even though there is an anchor tag.

Readonly Mode

Editor Component

import 'draft-js/dist/Draft.css'
import 'draftail/dist/draftail.css'
import 'draft-js-linkify-plugin/lib/plugin.css'
import createLinkifyPlugin from 'draft-js-linkify-plugin'

const linkify = createLinkifyPlugin({
    target: '_blank',
    component: (props: any) => {
        const { contentState, ...rest } = props
        return (
            <a
                {...rest}
                onClick={() => {
                    window.open(rest.href, '_blank')
                }}
            />
        )
    },
})

export default function RichTextEditor(props) {
    return (
        <DraftailEditor
                        // linkify plugin
            plugins={[linkify]}
            readOnly={!props.readOnly ? false : true}
            decorators={[new PrismDecorator({ defaultLanguage: 'javascript' })]}
            blockTypes={
                !props.readOnly
                    ? [
                            { type: BLOCK_TYPE.HEADER_ONE },
                            { type: BLOCK_TYPE.HEADER_TWO },
                            { type: BLOCK_TYPE.HEADER_THREE },
                            { type: BLOCK_TYPE.HEADER_FOUR },
                            { type: BLOCK_TYPE.HEADER_FIVE },
                            { type: BLOCK_TYPE.UNORDERED_LIST_ITEM },
                            { type: BLOCK_TYPE.ORDERED_LIST_ITEM },
                            { type: BLOCK_TYPE.CODE },
                            { type: BLOCK_TYPE.BLOCKQUOTE },
                      ]
                    : undefined
            }
            inlineStyles={
                !props.readOnly
                    ? [
                            { type: INLINE_STYLE.BOLD },
                            { type: INLINE_STYLE.ITALIC },
                            { type: INLINE_STYLE.UNDERLINE },
                            { type: INLINE_STYLE.STRIKETHROUGH },
                            { type: INLINE_STYLE.SUPERSCRIPT },
                            { type: INLINE_STYLE.SUBSCRIPT },
                      ]
                    : undefined
            }
        />
    )
}

Package.json

    "dependencies": {
        "draft-js": "0.10.5",
        "draft-js-linkify-plugin": "^2.0.2",
        "draftail": "1.4.1",
        "next": "10.2.3",
        "react": "17.0.2",
        "react-dom": "17.0.2",
    }

So what I missed here? I tried to follow this example on CodeSandbox since Draftail examples do not work for me, unfortunately.

[resqiar]

Here is the link to reproduce my problem, check this CodeSandbox, can someone explain what is going on? @thibaudcolas.

[resqiar]

Never mind, after 2 months of silence, I figured it out myself. just override the default style this way

.Draftail-Editor--readonly {
    pointer-events: auto !important;
}

.Draftail-Editor--readonly .DraftEditor-editorContainer::before {
    display: none !important;
}