LexicalAutoLinkPlugin で、 target="_blank" を設定したい場合には、下記の記述で実現できます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/; const MATCHERS = [ (text) => { const match = URL_MATCHER.exec(text); if (match === null) { return null; } const fullMatch = match[0]; return { index: match.index, length: fullMatch.length, text: fullMatch, url: fullMatch.startsWith('http') ? fullMatch : `https://${fullMatch}`, attributes: { rel: 'noreferrer', target: '_blank' }, // Optional link attributes }; }, ]; |
Lexicalは本当に便利!
公式サイト
LexicalAutoLinkPlugin
https://lexical.dev/docs/react/plugins#lexicalautolinkplugin