add css as field

This commit is contained in:
Luc Mcgrady 2025-10-21 15:31:21 +01:00
parent 6d62fcc096
commit dc17cb1e81
No known key found for this signature in database
GPG key ID: 4F3D7A0B17CC3D9C
4 changed files with 14 additions and 6 deletions

View file

@ -308,9 +308,10 @@ message NextCardDataResponse {
// complicated to implement.
string front = 3;
string back = 4;
string css = 5;
repeated card_rendering.RenderedTemplateNode partial_front = 5;
repeated card_rendering.RenderedTemplateNode partial_back = 6;
repeated card_rendering.RenderedTemplateNode partial_front = 6;
repeated card_rendering.RenderedTemplateNode partial_back = 7;
}
optional NextCardData next_card = 1;

View file

@ -398,7 +398,6 @@ impl crate::services::SchedulerService for Collection {
let cid = next_card.card.id;
let render = self.render_existing_card(cid, false, true)?;
//let style = format!("<style>{}</style>", render.css);
let answer_buttons = self
.describe_next_states(&next_card.states)?
@ -414,6 +413,8 @@ impl crate::services::SchedulerService for Collection {
next_card: Some(NextCardData {
queue: Some(queue.into()),
css: render.css,
// Filled by python
front: "".to_string(),
back: "".to_string(),

View file

@ -4,10 +4,16 @@ import "../base.scss";
import "../../reviewer/reviewer.scss";
import { enableNightMode } from "../reviewer/reviewer";
const style = document.createElement("style");
document.head.appendChild(style);
addEventListener("message", (e) => {
switch (e.data.type) {
case "html": {
document.body.innerHTML = e.data.value;
if (e.data.css) {
style.innerHTML = e.data.css;
}
break;
}
default: {

View file

@ -76,8 +76,8 @@ export class ReviewerState {
document.addEventListener("keydown", this.onKeyDown.bind(this));
}
updateHtml(htmlString: string) {
this.iframe?.contentWindow?.postMessage({ type: "html", value: htmlString }, "*");
updateHtml(htmlString: string, css?: string) {
this.iframe?.contentWindow?.postMessage({ type: "html", value: htmlString, css }, "*");
}
async showQuestion(answer: CardAnswer | null) {
@ -91,7 +91,7 @@ export class ReviewerState {
this.answerShown.set(false);
const question = resp.nextCard?.front || "";
this.updateHtml(question);
this.updateHtml(question, resp?.nextCard?.css);
this.beginAnsweringMs = Date.now();
}