langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow stylesheet of note type take effect on editor fields

Browse Source
This commit is contained in:
Henrik Giesel 2021-01-28 21:38:55 +01:00
parent 8a525d3643
commit af3753948a
2 changed files with 52 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
qt/aqt/data/web/js/editor.ts
View File

@ -437,12 +437,6 @@ class EditingArea extends HTMLElement {
this.style.color = color;
}
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
this.style.fontFamily = fontFamily;
this.style.fontSize = fontSize;
this.style.direction = direction;
}
set fieldHTML(content: string) {
this.innerHTML = content;
@ -464,6 +458,9 @@ class EditingContainer extends HTMLDivElement {
editingShadow: ShadowRoot;
editingArea: EditingArea;
baseStylesheet: CSSStyleSheet;
userStyle: HTMLStyleElement;
connectedCallback(): void {
this.className = "field";
@ -478,9 +475,30 @@ class EditingContainer extends HTMLDivElement {
this.editingShadow = this.attachShadow({ mode: "open" });
const style = this.editingShadow.appendChild(document.createElement("link"));
style.setAttribute("rel", "stylesheet");
style.setAttribute("href", "./_anki/css/editing-area.css");
const rootStyle = this.editingShadow.appendChild(
document.createElement("link")
);
rootStyle.setAttribute("rel", "stylesheet");
rootStyle.setAttribute("href", "./_anki/css/editing-area.css");
const baseStyle = this.editingShadow.appendChild(
document.createElement("style")
);
baseStyle.setAttribute("rel", "stylesheet");
this.baseStylesheet = baseStyle.sheet as CSSStyleSheet;
this.baseStylesheet.insertRule(
`editing-area {
font-family: initial;
font-size: initial;
direction: initial;
}`,
0
);
this.userStyle = this.editingShadow.appendChild(
document.createElement("style")
);
this.userStyle.setAttribute("rel", "stylesheet");
this.editingArea = this.editingShadow.appendChild(
document.createElement("editing-area")
@ -494,7 +512,15 @@ class EditingContainer extends HTMLDivElement {
}
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
this.editingArea.setBaseStyling(fontFamily, fontSize, direction);
const firstRule = this.baseStylesheet.cssRules[0] as CSSStyleRule;
firstRule.style.fontFamily = fontFamily;
firstRule.style.fontSize = fontSize;
firstRule.style.direction = direction;
}
setUserStyling(css: HTMLStyleElement): void {
this.userStyle.parentNode.replaceChild(css, this.userStyle);
this.userStyle = css;
}
isRightToLeft(): boolean {
@ -550,6 +576,10 @@ class EditorField extends HTMLDivElement {
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
this.editingContainer.setBaseStyling(fontFamily, fontSize, direction);
}
setUserStyling(css: HTMLStyleElement): void {
this.editingContainer.setUserStyling(css);
}
}
customElements.define("editor-field", EditorField, { extends: "div" });
@ -610,6 +640,16 @@ function setFonts(fonts: [string, number, boolean][]): void {
});
}
function setUserStyling(css: string): void {
const userStyle = document.createElement("style");
userStyle.setAttribute("rel", "stylesheet");
userStyle.innerHTML = css;
forField([], (_, field) => {
field.setUserStyling(userStyle.cloneNode(true) as HTMLStyleElement);
});
}
function setNoteId(id: number): void {
currentNoteId = id;
}

3
qt/aqt/editor.py
View File

@ -504,9 +504,10 @@ class Editor:
self.web.setFocus()
gui_hooks.editor_did_load_note(self)
js = "setFields(%s); setFonts(%s); focusField(%s); setNoteId(%s)" % (
js = "setFields(%s); setFonts(%s); setUserStyling(%s); focusField(%s); setNoteId(%s)" % (
json.dumps(data),
json.dumps(self.fonts()),
json.dumps(self.note.model()["css"]),
json.dumps(focusTo),
json.dumps(self.note.id),
)