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/>.

import {renderForPromise} from 'core/templates';

import {getFilePicker} from './options';

import {getString} from 'core/str';

/**

 * Get the image path for the specified image.

 *

 * @param {string} identifier The name of the image

 * @param {string} component The component name

 * @return {string} The image URL path

 */

export const getImagePath = (identifier, component = 'editor_tiny') => Promise.resolve(M.util.image_url(identifier, component));

export const getButtonImage = async(identifier, component = 'editor_tiny') => renderForPromise('editor_tiny/toolbar_button', {

    image: await getImagePath(identifier, component),

});

/**

 * Helper to display a filepicker and return a Promise.

 *

 * The Promise will resolve when a file is selected, or reject if the file type is not found.

 *

 * @param {TinyMCE} editor

 * @param {string} filetype

 * @returns {Promise<object>} The file object returned by the filepicker

 */

export const displayFilepicker = (editor, filetype) => new Promise((resolve, reject) => {

    const configuration = getFilePicker(editor, filetype);

    if (configuration) {

        const options = {

            ...configuration,

            formcallback: resolve,

        };

        M.core_filepicker.show(Y, options);

        return;

    }

    reject(`Unknown filetype ${filetype}`);

});

/**

 * Given a TinyMCE Toolbar configuration, add the specified button to the named section.

 *

 * @param {object} toolbar

 * @param {string} section

 * @param {string} button

 * @param {string|null} [after=null]

 * @returns {object} The toolbar configuration

 */

export const addToolbarButton = (toolbar, section, button, after = null) => {

    if (!toolbar) {

        return [{

            name: section,

            items: [button],

        }];

    }

    const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));

    return mutatedToolbar.map((item) => {

        if (item.name === section) {

            if (after) {

                // Insert new button after the specified button.

                let index = item.items.findIndex(value => value == after);

                if (index !== -1) {

                    item.items.splice(index + 1, 0, button);

                }

            } else {

                // Append button to end of button section.

                item.items.push(button);

            }

        }

        return item;

    });

};

/**

 * Given a TinyMCE Toolbar configuration, add the specified buttons to the named section.

 *

 * @param {object} toolbar

 * @param {string} section

 * @param {Array} buttons

 * @returns {object} The toolbar configuration

 */

export const addToolbarButtons = (toolbar, section, buttons) => {

    if (!toolbar) {

        return [{

            name: section,

            items: buttons,

        }];

    }

    const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));

    return mutatedToolbar.map((item) => {

        if (item.name === section) {

            buttons.forEach(button => item.items.push(button));

        }

        return item;

    });

};

/**

 * Insert a new section into the toolbar.

 *

 * @param {array} toolbar The TinyMCE.editor.settings.toolbar configuration

 * @param {string} name The new section name to add

 * @param {string} relativeTo Insert relative to this section name

 * @param {boolean} append Append or Prepend

 * @returns {array}

 */

export const addToolbarSection = (toolbar, name, relativeTo, append = true) => {

    const newSection = {

        name,

        items: [],

    };

    const sectionInserted = toolbar.some((section, index) => {

        if (section.name === relativeTo) {

            if (append) {

                toolbar.splice(index + 1, 0, newSection);

            } else {

                toolbar.splice(index, 0, newSection);

            }

            return true;

        }

        return false;

    });

    if (!sectionInserted) {

        // Relative section not found.

        if (append) {

            toolbar.push(newSection);

        } else {

            toolbar.unshift(newSection);

        }

    }

    return toolbar;

};

/**

 * Given a TinyMCE Menubar configuration, add the specified button to the named section.

 *

 * @param {object} menubar

 * @param {string} section

 * @param {string} menuitem

 * @param {string|null} [after=null]

 * @returns {object}

 */

export const addMenubarItem = (menubar, section, menuitem, after = null) => {

    if (!menubar) {

        const emptyMenubar = {};

        emptyMenubar[section] = {

            title: section,

            items: menuitem,

        };

    }

    const mutatedMenubar = JSON.parse(JSON.stringify(menubar));

    Array.from(Object.entries(mutatedMenubar)).forEach(([name, menu]) => {

        if (name === section) {

            if (after) {

                // Insert new item after the specified menu item.

                let index = menu.items.indexOf(after);

                if (index !== -1) {

                    index += after.length;

                    menu.items = menu.items.slice(0, index) + ` ${menuitem}` + menu.items.slice(index);

                }

            } else {

                // Append item to end of the menu section.

                menu.items = `${menu.items} ${menuitem}`;

            }

        }

    });

    return mutatedMenubar;

};

/**

 * Given a TinyMCE contextmenu configuration, add the specified button to the end.

 *

 * @param {string} contextmenu

 * @param {string[]} menuitems

 * @returns {string}

 */

export const addContextmenuItem = (contextmenu, ...menuitems) => {

    const contextmenuItems = (contextmenu ?? '').split(' ');

    return contextmenuItems

        .concat(menuitems)

        .filter((item) => item !== '')

        .join(' ');

};

/**

 * Given a TinyMCE quickbars configuration, add items to the menu.

 *

 * @param {string} quicktoolbar

 * @param {string[]} toolbaritems

 * @returns {string}

 */

export const addQuickbarsToolbarItem = (quicktoolbar, ...toolbaritems) => {

    const quicktoolbarItems = (quicktoolbar ?? '').split(' ');

    return quicktoolbarItems

        .concat(toolbaritems)

        .filter((item) => item !== '')

        .join(' ');

};

/**

 * Get the link to the user documentation for the named plugin.

 *

 * @param {string} pluginName

 * @returns {string}

 */

export const getDocumentationLink = (pluginName) => `https://docs.moodle.org/en/editor_tiny/${pluginName}`;

/**

 * Get the default plugin metadata for the named plugin.

 * If no URL is provided, then a URL is generated pointing to the standard Moodle Documentation.

 *

 * @param {string} component The component name

 * @param {string} pluginName The plugin name

 * @param {string|null} [url=null] An optional URL to the plugin documentation

 * @returns {object}

 */

export const getPluginMetadata = async(component, pluginName, url = null) => {

    const name = await getString('helplinktext', component);

    return {

        getMetadata: () => ({

            name,

            url: url ?? getDocumentationLink(pluginName),

        }),

    };

};

/**

 * Ensure that the editor is still in the DOM, removing it if it is not.

 *

 * @param {TinyMCE} editor

 * @returns {TinyMCE|null}

 */

export const ensureEditorIsValid = (editor) => {

    // TinyMCE uses the element ID as a map key internally, even if the target has changed.

    // In cases such as where an editor is in a modal form which has been detached from the DOM, but the editor not removed,

    // we need to manually destroy the editor.

    // We could theoretically do this with a Mutation Observer, but in some cases the Node may be moved,

    // or added back elsewhere in the DOM.

    if (!editor.getElement().isConnected) {

        return null;

    }

    return editor;

};

/**

 * Given a TinyMCE Toolbar configuration, remove the specified button from the named section.

 *

 * @param {object} toolbar

 * @param {string} section

 * @param {string} button

 * @returns {object} The toolbar configuration

 */

 export const removeToolbarButton = (toolbar, section, button) => {

    if (!toolbar) {

        return [{

            name: section,

            items: [button],

        }];

    }

    const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));

    return mutatedToolbar.map((item) => {

        if (item.name === section) {

            item.items.splice(item.items.indexOf(button), 1);

        }

        return item;

    });

};

/**

 * Given a TinyMCE Toolbar configuration, remove the specified buttons from the named section.

 *

 * @param {object} toolbar

 * @param {string} section

 * @param {Array} buttons

 * @returns {object} The toolbar configuration

 */

 export const removeToolbarButtons = (toolbar, section, buttons) => {

    if (!toolbar) {

        return [{

            name: section,

            items: buttons,

        }];

    }

    const mutatedToolbar = JSON.parse(JSON.stringify(toolbar));

    return mutatedToolbar.map((item) => {

        if (item.name === section) {

            buttons.forEach(button => item.items.splice(item.items.indexOf(button), 1));

        }

        return item;

    });

};

/**

 * Remove the specified sub-menu item from the named section.

 * Recreate a menu with the same sub-menu items but remove the specified item.

 *

 * @param {TinyMCE} editor

 * @param {string} section

 * @param {string} submenuitem The text of sub-menu that we want to removed

 */

export const removeSubmenuItem = async(editor, section, submenuitem) => {

    // Get menu items.

    const menuItems = editor.ui.registry.getAll().menuItems[section];

    // Because we will match between title strings,

    // we make sure no problems arise while applying multi-language.

    const submenuitemtitle = await getString(submenuitem, 'editor_tiny');

    // Overriding the menu items,

    // by recreating them but excluding the specified sub-menu.

    if (menuItems) {

        editor.ui.registry.addNestedMenuItem(

            section,

            {

                text: menuItems.text,

                getSubmenuItems: () => {

                    let newSubmenu = [];

                    menuItems.getSubmenuItems().forEach((item) => {

                        // Need to trim the text because some of the sub-menus use space to replace an icon.

                        if (item.text.trim() != submenuitemtitle) {

                            newSubmenu.push(item);

                        }

                    });

                    return newSubmenu;

                }

            }

        );

    }

};

/**

 * Given a TinyMCE Menubar configuration, remove the specified menu from the named section.

 *

 * @param {string} menubar

 * @param {string} section

 * @param {string} menuitem

 * @returns {object}

 */

export const removeMenubarItem = (menubar, section, menuitem) => {

    menubar[section].items = menubar[section].items

        .replace(menuitem, '');

    return menubar;

};

/**

 * Given a TinyMCE Menubar configuration, remove the specified menu from the named section.

 *

 * @param {string} menubar

 * @param {string} section

 * @param {Array} menuitems

 * @returns {object}

 */

export const removeMenubarItems = (menubar, section, menuitems) => {

    // Create RegExp pattern.

    const regexPattern = new RegExp(menuitems.join('|'), "ig");

    // Remove menuitems.

    menubar[section].items = menubar[section].items.replace(regexPattern, '');

    return menubar;

};

/**

 * Updates the state of the editor.

 *

 * @param {TinyMCE} editor

 * @param {HTMLElement} target

 */

export const updateEditorState = (editor, target) => {

    if (target.hasAttribute('readonly')) {

        editor.mode.set("readonly");

    } else {

        editor.mode.set("design");

    }

};