Search code examples
pythonsublimetext3sublime-text-plugin

How to make multi-line pop-up in Sublime Text 3 plugin


I am making a plugin for Sublime Text 3. It contacts my server in Java and receives a response in the form of a list of strings. I want a pop-up window to appear when you press a key combination, in which you can view all the line options and copy the desired one. I found an example of how to do this for one line (Github), but I don’t understand how to modify this for several lines (and several “copy” buttons, of course). It should be like:

  • TEXT1 - Copy

  • TEXT2 - Copy

  • TEXT3 - Copy

  • ...

Below is the code of plugin that shows scope name in pop-up:

import sublime
import sublime_plugin


def copy(view, text):
    sublime.set_clipboard(text)
    view.hide_popup()
    sublime.status_message('Scope name copied to clipboard')


class ShowScopeNameCommand(sublime_plugin.TextCommand):
    def run(self, edit):
        scope = self.view.scope_name(self.view.sel()[-1].b)

        html = """
            <body id=show-scope>
                <style>
                    p {
                        margin-top: 0;
                    }
                    a {
                        font-family: system;
                        font-size: 1.05rem;
                    }
                </style>
                <p>%s</p>
                <a href="%s">Copy</a>
            </body>
        """ % (scope.replace(' ', '<br>'), scope.rstrip())

        self.view.show_popup(html, max_width=512, on_navigate=lambda x: copy(self.view, x))

Solution

  • It's actually quite simple once you know what get's copied when you click on the link that says Copy. As per the official api reference, we have :-

    on_navigate is a callback that should accept a string contents of the href attribute on the link the user clicked.
    

    So whatever is in the href attribute gets copied to clipboard for the show_scope_name command (or to put in more correct terms, the href contents is passed on as an argument to the on_navigate callback). Armed with this information, here is a simple plugin that fetches some todos from Jsonplaceholder (which is a fake REST API for demo purposes), displays it as a list with each one having it's own Copy for you to select what to copy. Instead of Jsonplaceholder, you'll have to send a request to your Java server to get the list of strings and modify the example accordingly.

    import json
    import sublime
    import urllib.parse
    import urllib.request
    import sublime_plugin
    
    
    def get_data(num_of_todos):
        """ Fetches some todos from the Jsonplaceholder API (for the purposes of getting fake data).
    
        Args:
            num_of_todos (int) : The number of todos to be fetched.
    
        Returns:
            final_data (list) : The number of todos as a list.
        """
        try:
            url = "https://jsonplaceholder.typicode.com/todos"
            req = urllib.request.Request(url)
            req.add_header('User-agent', 'Mozilla/5.0')
            with urllib.request.urlopen(req) as response:
                fake_data = json.loads(response.read().decode("utf-8"))
                final_data = []
                for todo in fake_data:
                    final_data.append(todo["title"])
                return final_data[:num_of_todos]
        except urllib.error.HTTPError as error:
            return json.loads(error.read().decode("utf-8"))
    
    
    class MultilinePopUpCopyCommand(sublime_plugin.TextCommand):
        """ Command for fetching some todos & displaying a Copy link for each one of them,
             which upon being pressed copies the specified todo
        """
    
        def run(self, edit):
            """ This method is invoked when the command is run.
    
            Args:
                edit (sublime.Edit) : The edit object necessary for making buffer modifications 
                in the current view.
    
            Returns:
                None.
            """
    
            # Construct an li tree to be injected later in the ul tag.
            li_tree = ""
            final_data = get_data(5)
            for i in range(len(final_data)):
                li_tree += "<li>%s <a href='%s'>Copy</a></li>\n" %(final_data[i], final_data[i])
    
            # The html to be shown.
            html = """
                <body id=copy-multiline>
                    <style>
                        ul {
                            margin: 0;
                        }
    
                        a {
                            font-family: system;
                            font-size: 1.05rem;
                        }
                    </style>
    
                    <ul>
                        %s
                    </ul>
                </body>
            """ %(li_tree)
            self.view.show_popup(html, max_width=512, on_navigate=lambda todo: self.copy_todo(todo))
    
    
        def copy_todo(self, todo):
            """ Copies the todo to the clipboard.
    
            Args:
                todo (str) : The selected todo.
    
            Returns:
                None.
            """
            sublime.set_clipboard(todo)
            self.view.hide_popup()
            sublime.status_message('Todo copied to clipboard !')
    

    Here is a demo of the plugin (Here I have bound the command to a key binding) :-

    enter image description here

    Hope this meets your requirements.