Open ivanadrzaic opened 3 months ago
Can someone help me with how to make the link visible when pasting, not just the text? So, I want the Quill editor to somehow recognize that it's a URL.
If I copy https://www.youtube.com/ it should turn into a link, not just text.
I've tried this way and it's not working for me.
export class PrimeNgQuillComponent { @ViewChild('quillEditor') quillEditor!: QuillEditorComponent; quillModel: string = ""; simpleUrlRegex = /https?:\/\/[^\s]+/g; constructor( @Inject(QUILL_CONFIG_TOKEN) private config: QuillConfig ) { // console.log('PrimeNgQuill Module - Global COnfig', config); this.config.modules = { ...this.config.modules, clipboard: { matchers: [ [Node.TEXT_NODE, (node: any, delta: Delta) => { const data = this.quillModel const matches = data.match(this.simpleUrlRegex); if (matches && matches.length > 0) { const ops = []; let str = data; matches.forEach((match) => { const split = str.split(match); const beforeLink = split.shift(); ops.push({ insert: beforeLink }); ops.push({ insert: match, attributes: { link: match } }); str = split.join(match); }); ops.push({ insert: str }); delta.ops = ops; } return delta; }], ] }, keyboard: { bindings: { space: { key: 'Space', prefix: /https?:\/\/[^\s]+/, shiftKey: true, handler: (function spaceToLink() { let prevOffset = 0; return function handler(this: any, range: any) { const text = this.quill.getText(prevOffset, range.index) as string; const match = text.match(this.simpleUrlRegex); if (!match) { prevOffset = range.index; return true; } const url = match[match.length - 1]; const ops = []; ops.push({ retain: range.index - url.length }); ops.push({ delete: url.length }); ops.push({ insert: url, attributes: { link: url } }); this.quill.updateContents({ ops }); prevOffset = range.index; return true; }; })(), }, } },
You can use quill-react-commercial.
You can copy url as link like below gif.
Can someone help me with how to make the link visible when pasting, not just the text? So, I want the Quill editor to somehow recognize that it's a URL.
If I copy https://www.youtube.com/ it should turn into a link, not just text.
I've tried this way and it's not working for me.