Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * Helper for Tiny noautolink plugin.

 *

 * @module      tiny_noautolink/noautolink

 * @copyright   2023 Meirza <meirza.arson@moodle.com>

 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later

 */

import Pending from 'core/pending';

const noautolinkClassName = 'nolink';

const noautolinkTagHTML = 'span';

const notificationTimeout = 2000;

/**

 * Handle action.

 *

 * @param {TinyMCE} editor

 * @param {object} messages

 */

export const handleAction = (editor, messages) => {

    const toggleState = isInAnchor(editor, editor.selection.getNode());

    const urlString = getSelectedContent(editor);

    if (!toggleState && urlString !== '') {

        setNoAutoLink(editor, messages, urlString);

    } else if (toggleState) {

        unsetNoAutoLink(editor, messages, urlString);

    } else {

        editor.notificationManager.open({text: messages.infoEmptySelection, type: 'info', timeout: notificationTimeout});

    }

};

/**

 * Display notification feedback when applying the noautolink to the selected text.

 *

 * @param {TinyMCE} editor

 * @param {object} messages

 * @param {String} urlString

 */

const setNoAutoLink = (editor, messages, urlString) => {

    // Check whether the string is a URL. Otherwise, show an error notification.

    if (isValidUrl(urlString)) {

        const pendingPromise = new Pending('tiny_noautolink/setNoautolink');

        // Applying the auto-link prevention.

        setNoautolinkOnSelection(editor, urlString)

        .catch(error => {

            editor.notificationManager.open({text: error, type: 'error', timeout: notificationTimeout});

        })

        .finally(() => {

            editor.notificationManager.open({text: messages.infoAddSuccess, type: 'success', timeout: notificationTimeout});

            pendingPromise.resolve();

        });

    } else {

        editor.notificationManager.open({text: messages.errorInvalidURL, type: 'error', timeout: notificationTimeout});

    }

};

/**

 * Display notification feedback when removing the noautolink to the selected text.

 *

 * @param {TinyMCE} editor

 * @param {object} messages

 */

const unsetNoAutoLink = (editor, messages) => {

    const nodeString = editor.selection.getNode().outerHTML.trim();

    // Convert HTML string to DOM element to get nolink class.

    const wrapper = document.createElement('div');

    wrapper.innerHTML = nodeString;

    const tempElement = wrapper.firstChild;

    if (tempElement.classList.contains('nolink')) {

        const pendingPromise = new Pending('tiny_noautolink/setNoautolink');

        // Removing the auto-link prevention.

        unsetNoautolinkOnSelection(editor, nodeString)

        .catch(error => {

            editor.notificationManager.open({text: error, type: 'error', timeout: notificationTimeout});

            pendingPromise.reject(error); // Handle the error as needed.

        })

        .finally(() => {

            editor.notificationManager.open({text: messages.infoRemoveSuccess, type: 'success', timeout: notificationTimeout});

            pendingPromise.resolve();

        });

    }

};

/**

 * Return the full string based on the position of the cursor within the string.

 *

 * @param {TinyMCE} editor

 * @returns {String}

 */

const getSelectedContent = (editor) => {

    const selection = editor.selection; // Get the selection object.

    let content = selection.getContent({format: 'text'}).trim();

    if (content == '') {

        const range = selection.getRng(); // Get the range object.

        // Check if the cursor is within a text node.

        if (range.startContainer.nodeType === Node.TEXT_NODE) {

            const textContent = range.startContainer.textContent;

            const cursorOffset = range.startOffset;

            // Find the word boundaries around the cursor.

            let wordStart = cursorOffset;

            while (wordStart > 0 && /\S/.test(textContent[wordStart - 1])) {

                wordStart--;

            }

            let wordEnd = cursorOffset;

            while (wordEnd < textContent.length && /\S/.test(textContent[wordEnd])) {

                wordEnd++;

            }

            // Set the selection range to the word.

            selection.setRng({

                startContainer: range.startContainer,

                startOffset: wordStart,

                endContainer: range.startContainer,

                endOffset: wordEnd,

            });

            content = selection.getContent({format: 'text'}).trim();

        }

    }

    return content;

};

/**

 * Wrap the selection with the nolink class.

 *

 * @param {TinyMCE} editor

 * @param {String} url URL the link will point to.

 */

const setNoautolinkOnSelection = async(editor, url) => {

    const newContent = `<${noautolinkTagHTML} class="${noautolinkClassName}">${url}</${noautolinkTagHTML}>`;

    editor.selection.setContent(newContent);

    // Select the new content.

    const currentNode = editor.selection.getNode();

    const currentDOM = editor.dom.select(`${noautolinkTagHTML}.${noautolinkClassName}`, currentNode);

    currentDOM.forEach(function(value, index) {

        if (value.outerHTML == newContent) {

            editor.selection.select(currentDOM[index]);

            return;

        }

    });

};

/**

 * Remove the nolink on the selection.

 *

 * @param {TinyMCE} editor

 * @param {String} url URL the link will point to.

 */

const unsetNoautolinkOnSelection = async(editor, url) => {

    const regex = new RegExp(`</?${noautolinkTagHTML}[^>]*>`, "g");

    url = url.replace(regex, "");

    const currentSpan = editor.dom.getParent(editor.selection.getNode(), noautolinkTagHTML);

    currentSpan.outerHTML = url;

};

/**

 * Check if given string is a valid URL.

 *

 * @param {String} urlString URL the link will point to.

 * @returns {boolean} True is valid, otherwise false.

 */

const isValidUrl = urlString => {

    const urlPattern = new RegExp('^((http|https):\\/\\/|www\\.)' + // A URL must have one of these https/https/www.

                                '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // Validate domain name.

                                '((\\d{1,3}\\.){3}\\d{1,3}))' + // Validate ip (v4) address.

                                '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // Validate port and path.

                                '(\\?[;&a-z\\d%_.~+=-]*)?' + // Validate query string.

                                '(\\#[-a-z\\d_]*)?$', 'i'); // Validate fragment locator.

    return !!urlPattern.test(urlString);

};

/**

 * Get anchor element.

 *

 * @param {TinyMCE} editor

 * @param {Element} selectedElm

 * @returns {Element}

 */

const getAnchorElement = (editor, selectedElm) => {

    selectedElm = selectedElm || editor.selection.getNode();

    return editor.dom.getParent(selectedElm, `${noautolinkTagHTML}.${noautolinkClassName}`);

};

/**

 * Check the current selected element is an anchor or not.

 *

 * @param {TinyMCE} editor

 * @param {Element} selectedElm

 * @returns {boolean}

 */

const isInAnchor = (editor, selectedElm) => getAnchorElement(editor, selectedElm) !== null;

/**

 * Change state of button.

 *

 * @param {TinyMCE} editor

 * @param {function()} toggler

 * @returns {function()}

 */

const toggleState = (editor, toggler) => {

    editor.on('NodeChange', toggler);

    return () => editor.off('NodeChange', toggler);

};

/**

 * Change the active state of button.

 *

 * @param {TinyMCE} editor

 * @returns {function(*): function(): *}

 */

export const toggleActiveState = (editor) => (api) => {

    const updateState = () => api.setActive(!editor.mode.isReadOnly() && isInAnchor(editor, editor.selection.getNode()));

    updateState();

    return toggleState(editor, updateState);

};