Translate MCE button text/tooltip in custom plugin

Question

I am using a custom MCE button in my wordpress custom plugin below is my code

function enqueue_plugin_scripts($plugin_array)
{
//enqueue TinyMCE plugin script with its ID.
$plugin_array["related_post_button"] =  plugin_dir_url(__FILE__) . "index.js";
return $plugin_array;
}

add_filter("mce_external_plugins", "enqueue_plugin_scripts");

and the js index.js is

(function() {
tinymce.create("tinymce.plugins.related_post_button", {

    //url argument holds the absolute url of our plugin directory
    init : function(ed, url) {

        //add new button     
        ed.addButton("related_btn", {
            title : "Add Related post shortcode",
            cmd : "related_command",
            icon: "custom-mce-icon",
        });

        //button functionality.
        ed.addCommand("related_command", function() {
            var selected_text = ed.selection.getContent();
            var return_text = selected_text + "[related]";
            ed.execCommand("mceInsertContent", 0, return_text);
        });

    },

    createControl : function(n, cm) {
        return null;
    },

    getInfo : function() {
        return {
            longname : "Extra Buttons",
            author : "Narayan Prusty",
            version : "1"
        };
    }
});

tinymce.PluginManager.add("related_post_button", tinymce.plugins.related_post_button);
})();

to translate anything i am using this code in php

_e( "text to tranlate", 'wp-related-articles-acf' );

but how can i achieve that when i have code in index.js title : "Add Related post shortcode",

Please note everything is getting translated correctly, just wanted to know how can i achive that

I already tried https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_external_languages but didnt worked

Answer 1

Create js file button.js and add js directory and list-btn.png needed

(function() {
    tinymce.create("tinymce.plugins.listbuttons_button_plugin", {

        //url argument holds the absolute url of our plugin directory
        init : function(ed, url) {

            //add new button    
            ed.addButton("listbuttons", {
                title : "Add Related post shortcode",
                cmd : "listbuttons_command",
                image : "images/list-btn.png"
            });

            ed.addCommand("listbuttons_command", function() {
                var return_text = "[related]";
                ed.execCommand("mceInsertContent", 0, return_text);
            });

        },

        createControl : function(n, cm) {
            return null;
        },
        getInfo : function() {}
    });

    tinymce.PluginManager.add("listbuttons_button_plugin", tinymce.plugins.listbuttons_button_plugin);
})();

Add Code in Function.php

function enqueue_plugin_scripts($plugin_array){
    $plugin_array["listbuttons_button_plugin"] =  get_template_directory_uri() . "/js/buttons.js";
    return $plugin_array;
}
add_filter("mce_external_plugins", "enqueue_plugin_scripts");

function register_buttons_editor($buttons){
    array_push($buttons, "listbuttons");
    return $buttons;
}
add_filter("mce_buttons", "register_buttons_editor");

function shortcode_button_script(){
    if(wp_script_is("quicktags")){
        ?>
            <script type="text/javascript">
                QTags.addButton("list_buttons_shortcode","Add Related post shortcode",callback);
                function callback(){
                    QTags.insertContent("[listbuttons]");
                }
            </script>
        <?php
    }
}
add_action("admin_print_footer_scripts", "shortcode_button_script");