fix: use best practices according to obsidian

Author: Railly

main.ts

@@ -24,17 +24,17 @@ export default class SimpleFlashcardsPlugin extends Plugin {
 					.split("\n")
 					.filter((line) => line.length > 0);
 
-				const flashcardContainer = el.createEl("div", {
+				const flashcardContainer = el.createDiv({
 					cls: "flashcard-container",
 				});
 
-				const flashcardEl = flashcardContainer.createEl("div", {
+				const flashcardEl = flashcardContainer.createDiv({
 					cls: "flashcard",
 				});
-				const frontFace = flashcardEl.createEl("div", {
+				const frontFace = flashcardEl.createDiv({
 					cls: "flashcard-face flashcard-face--front",
 				});
-				const backFace = flashcardEl.createEl("div", {
+				const backFace = flashcardEl.createDiv({
 					cls: "flashcard-face flashcard-face--back",
 				});
 
@@ -61,56 +61,67 @@ export default class SimpleFlashcardsPlugin extends Plugin {
 					const question = questionParts.join(" ");
 					const answer = answerParts.join("  \n");
 
-					frontFace.innerHTML = await marked(question, {
-						async: true,
-					});
-					backFace.innerHTML = await marked(answer, { async: true });
+					frontFace.insertAdjacentHTML(
+						"afterbegin",
+						await marked(question, { async: true })
+					);
+					backFace.insertAdjacentHTML(
+						"afterbegin",
+						await marked(answer, { async: true })
+					);
 				} else {
 					let frontContent = lines.join(" ");
 					let backContent = lines.join(" ");
 
 					frontContent = this.getClozeFront(frontContent);
 					backContent = this.getClozeBack(backContent);
 
-					frontFace.innerHTML = await marked(frontContent, {
-						async: true,
-					});
-					const answerContainer = backFace.createEl("div", {
+					frontFace.insertAdjacentHTML(
+						"afterbegin",
+						await marked(frontContent, { async: true })
+					);
+					const answerContainer = backFace.createDiv({
 						cls: "answer-container",
 					});
-					answerContainer.innerHTML = await marked(backContent, {
-						async: true,
-						gfm: true,
-						breaks: true,
-					});
+					answerContainer.insertAdjacentHTML(
+						"afterbegin",
+						await marked(backContent, {
+							async: true,
+							gfm: true,
+							breaks: true,
+						})
+					);
 				}
 
 				switch (this.settings.toggleRevealMethod) {
 					case "hover":
 						flashcardContainer.addEventListener(
 							"mouseenter",
 							() => {
-								flashcardEl.classList.add("is-flipped");
+								flashcardEl.addClass("is-flipped");
 							}
 						);
 						flashcardContainer.addEventListener(
 							"mouseleave",
 							() => {
-								flashcardEl.classList.remove("is-flipped");
+								flashcardEl.removeClass("is-flipped");
 							}
 						);
 						break;
 
 					case "surface-click":
-						flashcardEl.classList.add("clickable");
+						flashcardEl.addClass("clickable");
 						flashcardContainer.addEventListener(
 							"click",
 							(event) => {
 								//@ts-ignore
 								if (event.target.closest("img")) {
 									event.stopPropagation();
 								} else {
-									flashcardEl.classList.toggle("is-flipped");
+									flashcardEl.toggleClass(
+										"is-flipped",
+										!flashcardEl.hasClass("is-flipped")
+									);
 								}
 							}
 						);
@@ -123,15 +134,15 @@ export default class SimpleFlashcardsPlugin extends Plugin {
 							text: "Reveal",
 						});
 						revealButton.addEventListener("click", () => {
-							flashcardEl.classList.add("is-flipped");
+							flashcardEl.addClass("is-flipped");
 						});
 
 						const hideButton = backFace.createEl("button", {
 							cls: "flashcard-button",
 							text: "Hide",
 						});
 						hideButton.addEventListener("click", () => {
-							flashcardEl.classList.remove("is-flipped");
+							flashcardEl.removeClass("is-flipped");
 						});
 						break;
 					}
@@ -196,8 +207,7 @@ export default class SimpleFlashcardsPlugin extends Plugin {
 			const backHeight = backFace ? backFace.scrollHeight : 0;
 
 			const maxHeight = Math.max(frontHeight, backHeight);
-			//@ts-ignore
-			flashcard.style.height = maxHeight + "px";
+			flashcard.addClass(`height-${maxHeight}`);
 		});
 	}
 }

styles.css

@@ -85,3 +85,13 @@
 .flashcard-button:hover {
 	opacity: 1;
 }
+
+.flashcard.height-100 {
+	height: 100px;
+}
+.flashcard.height-200 {
+	height: 200px;
+}
+.flashcard.height-300 {
+	height: 300px;
+}