HTML elements added via provideUI() can not be found with document.getElementById()

Customization
1

This seems to be the case. The whole dom tree seems to consist of an “app” node and nothing else. If I add elements via provideUI(), document.getElementById will always return ‘null’ for the ids of these elements. But I can see the element in the debug tools window … Is there a way to access the elements via typescript? Here is some (non working) code as example. Clicking on the link in the popup after /openproject should log a reference to the element, but does not:

import "@logseq/libs";

function main() {

  logseq.provideModel({
    openCalendar () {
      console.log("hi, calendar");
      console.log(document.getElementById('tryFindMe'));
      console.log(document.getElementById('app')?.childNodes);
    },
  });
  logseq.Editor.registerSlashCommand("openproject", async () => {
    logseq.provideUI({
      key: 'miktest',
      template: `
        <button
        id="tryFindMe"
        data-on-click="openCalendar">
        Go Calendar
        </button>
      `,
    })
  });
}

logseq.ready(main).catch(console.error);

Regards, Michael

2

Try ths:

      console.log(parent.document.getElementById('tryFindMe'));
      console.log(parent.document.getElementById('app')?.childNodes);

As an additional note, a plugin is sandboxed within <iframe>.

1 Like
3

Excellent, thanks! Did I miss some documentation?

4

Indeed, there might be a possibility that the document does not exist.
I’m referring to plugin samples and code from existing plugins for guidance.

5

Do you have recommendations for well written plugins, that do not use Vue or React but reveal more than the samples here:

Regards, Michael

6

This document can be extremely helpful. However, it’s in Chinese, not English. Enabling page translation as a browser extension would be advisable.

7

OK, thanks a lot!

Michael