mspecter
mspecter

Reputation: 3

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:

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))

Upvotes: 0

Views: 349

Answers (1)

UltraInstinct05
UltraInstinct05

Reputation: 701

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.

Upvotes: 3

Related Questions