Notes/src/public/app/widgets/dialogs/add_link.js

import { t } from "../../services/i18n.js";
import treeService from '../../services/tree.js';
import noteAutocompleteService from "../../services/note_autocomplete.js";
import utils from "../../services/utils.js";
import BasicWidget from "../basic_widget.js";

const TPL = `
<div class="add-link-dialog modal mx-auto" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" style="max-width: 1000px" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title flex-grow-1">${t('add_link.add_link')}</h5>
                <button type="button" class="help-button" title="${t('add_link.help_on_links')}" data-help-page="links.html">?</button>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="${t('add_link.close')}"></button>
            </div>
            <form class="add-link-form">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="add-link-note-autocomplete">${t('add_link.note')}</label>

                        <div class="input-group">
                            <input class="add-link-note-autocomplete form-control" placeholder="${t('add_link.search_note')}">
                        </div>
                    </div>

                    <div class="add-link-title-settings">
                        <div class="add-link-title-radios form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="link-type" value="reference-link" checked>
                                ${t('add_link.link_title_mirrors')}
                            </label>
                        </div>
                        <div class="add-link-title-radios form-check">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="link-type" value="hyper-link">
                                ${t('add_link.link_title_arbitrary')}
                            </label>
                        </div>

                        <div class="add-link-title-form-group form-group">
                            <br/>
                            <label>
                                ${t('add_link.link_title')}
                                
                                <input class="link-title form-control" style="width: 100%;">
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">${t('add_link.button_add_link')}</button>
                </div>
            </form>
        </div>
    </div>
</div>`;

export default class AddLinkDialog extends BasicWidget {
    doRender() {
        this.$widget = $(TPL);
        this.$form = this.$widget.find(".add-link-form");
        this.$autoComplete = this.$widget.find(".add-link-note-autocomplete");
        this.$linkTitle = this.$widget.find(".link-title");
        this.$addLinkTitleSettings = this.$widget.find(".add-link-title-settings");
        this.$addLinkTitleRadios = this.$widget.find(".add-link-title-radios");
        this.$addLinkTitleFormGroup = this.$widget.find(".add-link-title-form-group");

        /** @var TextTypeWidget */
        this.textTypeWidget = null;

        this.$form.on('submit', () => {
            if (this.$autoComplete.getSelectedNotePath()) {
                this.$widget.modal('hide');

                const linkTitle = this.getLinkType() === 'reference-link' ? null : this.$linkTitle.val();

                this.textTypeWidget.addLink(this.$autoComplete.getSelectedNotePath(), linkTitle);
            }
            else if (this.$autoComplete.getSelectedExternalLink()) {
                this.$widget.modal('hide');

                this.textTypeWidget.addLink(this.$autoComplete.getSelectedExternalLink(), this.$linkTitle.val());
            }
            else {
                logError("No link to add.");
            }

            return false;
        });
    }

    async showAddLinkDialogEvent({textTypeWidget, text = ''}) {
        this.textTypeWidget = textTypeWidget;

        this.$addLinkTitleSettings.toggle(!this.textTypeWidget.hasSelection());

        this.$addLinkTitleSettings.find('input[type=radio]').on('change', e => this.updateTitleSettingsVisibility(e));

        // with selection hyperlink is implied
        if (this.textTypeWidget.hasSelection()) {
            this.$addLinkTitleSettings.find("input[value='hyper-link']").prop("checked", true);
        }
        else {
            this.$addLinkTitleSettings.find("input[value='reference-link']").prop("checked", true);
        }

        this.updateTitleSettingsVisibility();

        utils.openDialog(this.$widget);

        this.$autoComplete.val('');
        this.$linkTitle.val('');

        const setDefaultLinkTitle = async noteId => {
            const noteTitle = await treeService.getNoteTitle(noteId);

            this.$linkTitle.val(noteTitle);
        };

        noteAutocompleteService.initNoteAutocomplete(this.$autoComplete, {
            allowExternalLinks: true,
            allowCreatingNotes: true
        });

        this.$autoComplete.on('autocomplete:noteselected', (event, suggestion, dataset) => {
            if (!suggestion.notePath) {
                return false;
            }

            this.updateTitleSettingsVisibility();

            const noteId = treeService.getNoteIdFromUrl(suggestion.notePath);

            if (noteId) {
                setDefaultLinkTitle(noteId);
            }
        });

        this.$autoComplete.on('autocomplete:externallinkselected', (event, suggestion, dataset) => {
            if (!suggestion.externalLink) {
                return false;
            }

            this.updateTitleSettingsVisibility();

            this.$linkTitle.val(suggestion.externalLink);
        });

        this.$autoComplete.on('autocomplete:cursorchanged',  (event, suggestion, dataset) => {
            if (suggestion.externalLink) {
                this.$linkTitle.val(suggestion.externalLink)
            }
            else {
                const noteId = treeService.getNoteIdFromUrl(suggestion.notePath);

                if (noteId) {
                    setDefaultLinkTitle(noteId);
                }
            }
        });

        if (text && text.trim()) {
            noteAutocompleteService.setText(this.$autoComplete, text);
        }
        else {
            noteAutocompleteService.showRecentNotes(this.$autoComplete);
        }

        this.$autoComplete
            .trigger('focus')
            .trigger('select'); // to be able to quickly remove entered text
    }

    getLinkType() {
        if (this.$autoComplete.getSelectedExternalLink()) {
            return 'external-link';
        }

        return this.$addLinkTitleSettings.find('input[type=radio]:checked').val();
    }

    updateTitleSettingsVisibility() {
        const linkType = this.getLinkType();

        this.$addLinkTitleFormGroup.toggle(linkType !== 'reference-link');
        this.$addLinkTitleRadios.toggle(linkType !== 'external-link')
    }
}