Linkify plugin cannot be clicked in read-only mode

[Res?]

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.

[Res?]

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

[Res?]

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;
}