*When* do I properly disable/enable editor buttons?

Anki Development
1

So in another post I asked about how I can disable editor buttons. The solution, which now looks like this,

self.editor.web.eval(f"""
    document.getElementById("{DOMAIN_PREFIX}previous")
            .disabled = {disable_previous};
    document.getElementById("{DOMAIN_PREFIX}next")
            .disabled = {disable_next};
""")

worked fine, until I found out that on WSL, when opening the dialog, I am getting

JS error :4 Uncaught (in promise) TypeError: Cannot set property ‘disabled’ of null

, but later on disabling/enabling works fine.

I suppose this is due to WSL being slow, or subtle differences between Linux and Windows. In either case, I’m pretty sure that the above code is being run too soon. What’s the proper way of executing javascript after the buttons have been added to the DOM?

P.S. I have some GUI tests; is there a nice, perhaps more general, way to reliably know when the web view has finished loading?

2

Anki New Format Pack, the official add-on template, has been updated recently. It shows how you can use the two currently exposed lifeCycle hooks to execute code after the Svelte components have been mounted: anki_new_format_pack/editor.ts at master · hgiesel/anki_new_format_pack · GitHub

It also demonstrates how you can conditionally activate/deactivate add-on buttons.

1 Like
3

Oh, that’s interesting! But, I don’t suppose this code has been made into a release. What do I do on 2.1.45 to 2.1.49, which what I am currently testing against?

4

For 2.1.45 to 2.1.49 you could try using the promise $editorToolbar like this:

$editorToolbar.then(({toolbar}) => console.log(toolbar.hideGroup))

I remember also having access to noteEditorPromise, but I just tested that on 2.1.49 and it doesn’t seem to be exposed there.

1 Like
5

Thanks! A slightly modified version of the above seems to work reliably, at least as far as I tested.

  self.editor.web.eval(f"""
      $editorToolbar.then(({{ toolbar }}) => {{
          setTimeout(function() {{
              // can access buttons here
          }}, 1);
      }});
  """)
1 Like