Editor <-> Plug communication

Plug Development
1

Hi,

I've read through the code of some of the main plugs and the official docs but i still can't get the following to work: how can i make the plug "widget" react to editor events or respond to lua calls?

I've tried the custom events api, mq, events, but they seem to be disabled from the js available in the plug.

What is "the way"?

2

The Widgets.md from the standard library may answer/clarify some parts... namely dom + onclick may be of interest (and the whole file, in fact, I think)...

3

Personally I found the library manager plug useful for my understanding on this subject: plug-manager in github.

The manifest (the yaml file) contains a list of functions, and you define that some of those are registered as a command, and some of the methods are to be called when an event occurs.

And once a event is registered like that, you can call it from lua.
So you can do this in your markdown file, to trigger that event, which then does a call to the plug and display the result:

${event.dispatch("get-plug:https", "//github.com/silverbulletmd/")}

While using 'get-plug' directly from lua is probably not a good idea, I think it does show the flexibility and the basic way in which you can register event listeners and commands in the plug.

4

Ah, okay, that repo does help.
I was trying something more convoluted: creating a CustomEvent and adding an eventListener to the plug code. Then using the lua-js interop i would fire the custom events. Pretty ugly stuff.

The actual thing I'm trying to do is: I have a map widget on the sidebar, and i want it to zoom and pan to certain places when the user scrolls through certain elements in the editor. Sounds weird, but I'm using it to document a hiking trip and focusing on certain places as the text scrolls. I kinda got it to work with my current method, will see to make it a bit less hacky.

Thanks a bunch folks!

5

I'm unsure if there is even an idiomatic way to do this currently. This is about the best I can come up with.

-- Store all elements we later want to modify in a global array
local spans = {}

function widgets.selection()
  local span = dom.span {}

  table.insert(spans, span)
  
  return widget.html(
    dom.span {
      dom.span {
        "The current selection is: "
      },
      span
    }
  )
end

event.listen {
  name = "page:click",
  run = function ()
    local selection = editor.getSelection()
    local content = editor.getText()
    local text = string.sub(content, selection.from + 1, selection.to)

    for i = #spans, 1, -1 do
      local span = spans[i]
      -- If the span is no longer part of the dom, remove it
      if not span.isConnected then
        table.remove(spans, i)
      end

      span.innerText = text
    end
  end
}

If you aren't talking about widgets, but about panels, then were are some simpler options, but for widgets, I think there aren't any good options.

6

Although that solution is based on text selection, right?
My intention was using scroll as trigger; i think there's no scroll events in the lua api.

7

It was more a demo on how to modify a widget from space lua. It's true that there are no scroll events, or ways to get the scroll position in space lua, sooo you will probably have to hack something together, by either inserting javascript into the dom, or using js.window.