Trouble with Recognizing URLs in Quill Editor

[ivanadrzaic]

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;
              };
            })(),
          },
         }
       },
   

[ludejun]

You can use quill-react-commercial.

You can copy url as link like below gif.