Skip to content

Conversation

cderv
Copy link
Collaborator

@cderv cderv commented Apr 11, 2025

fixes #12513

Currently quarto preview script will define const that is available in Global scope in the previewed HTML

const options = {
origin: "<%- origin %>",
search: "<%- search %>",
inputFile: "<%- inputFile %>",
isPresentation: <%= isPresentation %>
}
document.addEventListener("DOMContentLoaded", function () {
window.QuartoPreview.init(options);
});

Here is an example of the options being seen in JS

---
title: "my board"
format: html
engine: knitr
---

# content

```{js}
//| echo: false
document.addEventListener("DOMContentLoaded", function() {
  const pElement = document.createElement("p");
  const codeElement = document.createElement("code")
  codeElement.textContent = JSON.stringify(options);
  pElement.appendChild(codeElement)
  document.querySelector("#content").appendChild(pElement);
})
```

image

It does not seem like a good thing that is defined globally and impact any JS script.

This PR is here as a draft to discuss this idea.

I don't know if some other tools can rely on these generic options being available. Hopefully not because it could be redefined too. If this should be made available, it should probably be namespaced.

---
title: "my board"
format: html
engine: knitr
---

# content

```{js}
//| echo: false
document.addEventListener("DOMContentLoaded", function() {
  const options = "{new: 'hello'}"
  const pElement = document.createElement("p");
  const codeElement = document.createElement("code")
  codeElement.textContent = JSON.stringify(options);
  pElement.appendChild(codeElement)
  document.querySelector("#content").appendChild(pElement);
})
```

image

@cderv
Copy link
Collaborator Author

cderv commented Apr 11, 2025

I added a way to get the preview options if needed

---
title: "my board"
format: html
engine: knitr
---

# content

```{js}
//| echo: false
document.addEventListener("quarto-preview-initialized", function(e) {
  const pElement = document.createElement("p");
  const codeElement = document.createElement("code")
  codeElement.textContent = JSON.stringify(e.detail);
  pElement.appendChild(codeElement)
  document.querySelector("#content").appendChild(pElement);
})
```

image

@cscheid
Copy link
Collaborator

cscheid commented Apr 11, 2025

Yeah, this is fine. (Essentially no one should be writing to the global scope, libraries or us.)

@cscheid cscheid marked this pull request as ready for review April 11, 2025 18:15
@cscheid cscheid merged commit 098e599 into main Apr 11, 2025
49 checks passed
@cscheid cscheid deleted the fix/quarto-preview-conflict branch April 11, 2025 18:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

grViz in quarto dashboard

2 participants