GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

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; 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) { set fieldHTML(content: string) {
this.innerHTML = content; this.innerHTML = content;
@ -464,6 +458,9 @@ class EditingContainer extends HTMLDivElement {
editingShadow: ShadowRoot; editingShadow: ShadowRoot;
editingArea: EditingArea; editingArea: EditingArea;
baseStylesheet: CSSStyleSheet;
userStyle: HTMLStyleElement;
connectedCallback(): void { connectedCallback(): void {
this.className = "field"; this.className = "field";
@ -478,9 +475,30 @@ class EditingContainer extends HTMLDivElement {
this.editingShadow = this.attachShadow({ mode: "open" }); this.editingShadow = this.attachShadow({ mode: "open" });
const style = this.editingShadow.appendChild(document.createElement("link")); const rootStyle = this.editingShadow.appendChild(
style.setAttribute("rel", "stylesheet"); document.createElement("link")
style.setAttribute("href", "./_anki/css/editing-area.css"); );
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( this.editingArea = this.editingShadow.appendChild(
document.createElement("editing-area") document.createElement("editing-area")
@ -494,7 +512,15 @@ class EditingContainer extends HTMLDivElement {
} }
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void { 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 { isRightToLeft(): boolean {
@ -550,6 +576,10 @@ class EditorField extends HTMLDivElement {
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void { setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
this.editingContainer.setBaseStyling(fontFamily, fontSize, direction); this.editingContainer.setBaseStyling(fontFamily, fontSize, direction);
} }
setUserStyling(css: HTMLStyleElement): void {
this.editingContainer.setUserStyling(css);
}
} }
customElements.define("editor-field", EditorField, { extends: "div" }); 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 { function setNoteId(id: number): void {
currentNoteId = id; currentNoteId = id;
} }

3
qt/aqt/editor.py
View file

@ -504,9 +504,10 @@ class Editor:
self.web.setFocus() self.web.setFocus()
gui_hooks.editor_did_load_note(self) 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(data),
json.dumps(self.fonts()), json.dumps(self.fonts()),
json.dumps(self.note.model()["css"]),
json.dumps(focusTo), json.dumps(focusTo),
json.dumps(self.note.id), json.dumps(self.note.id),
) )