Tui.editor: How to Add Validation for Hyperlink?

[fransyosuaa]

Hello everyone,, I got an issue when I click insert link feature. So the editor will not check if the user input valid url or not.
At first,, I notice if I insert "www.google.com", it won't open google.com but continue my system url instead (http://localhost.com:9001/www.google.com). User must insert http:// or https:// for make it the correct link.

And then I also tried insert random string (not url), like "9gag" (without dot com), and there's no validation for it, I can click "OK" button.

As for my code,
html

<div #editor></div>

component.ts

import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';
import {
  AfterViewInit,
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  forwardRef,
  ViewChild,
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'markdown-editor',
  templateUrl: './markdown-editor.component.html',
  styleUrls: ['./markdown-editor.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MarkdownEditorComponent),
      multi: true,
    },
  ],
})
export class MarkdownEditorComponent implements AfterViewInit, ControlValueAccessor {
  @ViewChild('editor') el: ElementRef;
  editor;
  value = '';

  propagateChange = (_: any) => {};
  propagateTouch = () => {};

  ngAfterViewInit() {
    this.editor = new Editor({
      el: this.el.nativeElement,
      initialValue: this.value,
      hideModeSwitch: true,
      initialEditType: 'wysiwyg',
      events: {
        change: () => this.onEdit(),
        blur: () => this.propagateTouch(),
      },
      toolbarItems: [
        'bold',
        'italic',
        'strike',
        'divider',
        'hr',
        'divider',
        'ul',
        'ol',
        'task',
        'indent',
        'outdent',
        'divider',
        'link',
        'divider',
        'code',
        'codeblock',
      ],
    });
  }

  onEdit() {
    this.value = this.editor.getMarkdown();
    this.propagateChange(this.value);
  }

  registerOnChange(fn: any) {
    this.propagateChange = fn;
  }

  registerOnTouched(fn: any) {
    this.propagateTouch = fn;
  }

  writeValue(markdown: string) {
    if (markdown !== this.value) {
      this.value = markdown;
      if (this.editor) {
        this.editor.setMarkdown(markdown);
      }
    }
  }
}

How to add validation for Hyperlink's OK button?

Thank you in advance 🙏

[seonim-ryu]

@fransyosuaa Currently, there is no way to handle it, so I think I need to add an api. I think the Editor needs to add a hook that occurs when the OK button is pressed. I'll register for milestones when I work.

[fransyosuaa]

@seonim-ryu if it's possible, can you make the validation as a default?
I mean it's a obvious whatever user input in URL textbox should be valid URL, rite?
Also if user input 9gag.com (notice without www), user can't click on the OK button,
when user input www.9gag.com (notice without http://), it counts as valid and user can go to https://www.9gag.com even thou user doesn't input the http:// or https://