-
I currently encounter an issue with using Code annotations, but I'm unsure what happens here exactly or why it happens. The issue I encounter is, that when I press the icon, I get moved to it, but no content is showing at all. This is the section I have an issue with: ```java { .annotate }
public class MyPlaceholders extends PlaceholderProvider {
public MyPlaceholders(String identifier) {
super(identifier); // (1)
}
@Override
public String parsePlaceholder(String placeholder, GenericPlayer player, GenericServer server) {
return null;
}
}
```
1. It's recommended to replace this constructor with a No-Args Constructor and have the placeholder name set in the `super` call:
```java
public MyPlaceholders() {
super("myplaceholders");
}
``` My current guess is, that it may be some conflict with JS? I'm using a separate JS code to fetch data to inject into the page where I also have this code block, so maybe something there causes a conflict? Here's the JS file I use, just in case: Details
document$.subscribe(async () => {
const url = 'https://api.allorigins.win/raw?url='
const apiUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent('https://codeberg.org/api/v1/repos/Andre601/asl-api/releases/latest')}`
const repo_stats = document.querySelector('[data-md-component="source"] .md-source__repository');
function loadCodebergInfo(data) {
const facts = document.createElement("ul");
facts.className = "md-source__facts";
const version = document.createElement("li");
version.className = "md-source__fact md-source__fact--version";
const stars = document.createElement("li");
stars.className = "md-source__fact md-source__fact--stars";
const forks = document.createElement("li");
forks.className = "md-source__fact md-source__fact--forks";
version.innerText = data["version"];
stars.innerText = data["stars"];
forks.innerText = data["forks"];
facts.appendChild(version);
facts.appendChild(stars);
facts.appendChild(forks);
repo_stats.appendChild(facts);
}
function loadApiInfo(data) {
const version = data["version"];
const versionToken = '{apiVersion}';
const codeBlocks = document.querySelectorAll('.md-content pre code');
for(const codeBlock of codeBlocks) {
codeBlock.innerHTML = codeBlock.innerHTML.replace(new RegExp(versionToken, 'g'), version.substring(1));
}
}
function loadPluginVersion(data) {
const version = data["version"];
const versionToken = '{version}'
const entries = document.querySelectorAll('.md-content code');
for(const entry of entries) {
entry.innerHTML = entry.innerHTML.replace(new RegExp(versionToken, 'g'), version.substring(1));
}
}
async function fetchApiInfo() {
const tag = await fetch(`${apiUrl}`)
.then(_ => _.json());
const data = {
"version": tag.tag_name
};
__md_set("__api_tag", data, sessionStorage);
loadApiInfo(data);
}
async function fetchInfo() {
const [release, repo] = await Promise.all([
fetch(`${url}${encodeURIComponent('https://codeberg.org/api/v1/repos/Andre601/AdvancedServerList/releases/latest')}`).then(_ => _.json()),
fetch(`${url}${encodeURIComponent('https://codeberg.org/api/v1/repos/Andre601/AdvancedServerList')}`).then(_ => _.json()),
]);
const data = {
"version": release.tag_name,
"stars": repo.stars_count,
"forks": repo.forks_count
};
__md_set("__git_repo", data, sessionStorage);
loadCodebergInfo(data);
loadPluginVersion(data);
}
if(!document.querySelector('[data-md-component="source"] .md-source__facts')) {
const cached = __md_get("__git_repo", sessionStorage);
if((cached != null) && (cached["version"])) {
loadCodebergInfo(cached);
loadPluginVersion(cached);
} else {
fetchInfo();
}
}
if(location.href.includes('/api/')) {
const cachedApi = __md_get("__api_tag", sessionStorage);
if((cachedApi != null) && (cachedApi["version"])) {
loadApiInfo(cachedApi);
} else {
fetchApiInfo();
}
}
}) I really don't know what could be the problems here... So if there is any way to debug code annotations, I would apreciate it. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 5 replies
-
To clarify: The annotation is being created, so it does recognize the ordered list after the code block. But it for some reason does not display the Content on click, so either it doesn't get created properly, or gets blocked it seems... |
Beta Was this translation helpful? Give feedback.
-
Looking further into this, it seems the site's HTML gets somewhat messed up, as by the looks of it is the HTML for the Annotation already there despite not being "opened" while on the Material docs example, the content only appears when pressed. This is further proven by the fact, that the annotation gets highlighted, despite the mouse not being near it, most likely because it hovers over the (currently invisible?) content. |
Beta Was this translation helpful? Give feedback.
-
Hello @Andre601, As for the question in the title, you could try setting a global/general breakpoint for all mousedown events in your browser Dev Tools and see what will happen if you step over the code execution. I think that the .js.map file should be included during You mentioned there is an issue with the formatting of the HTML, so perhaps the 4 spaces of indentation for the codeblock in the list item are the issue. Speaking of list items, you could try using the |
Beta Was this translation helpful? Give feedback.
I finally got something to work here...
The issue was indeed the replacement of the HTML, which seems to remove listeners, which annotations for sure register.
One solution is to create and use a TreeWalker, as that one preserves pre-existing listeners. Issue here was, that it only accepts a single Node and not multiple (i.e. those returned from
querySelectorAll
) andquerySelector
only returns the first match.So solution here was to use
querySelectorAll
and callforEach
to then apply a treewalker on each element in it.I don't know if that can be improved, but it seems to work for now.
My full JS: