Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions src/cloze-matching.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { SRSettings } from "./settings";

export function matchClozesWithinCardText(
cardText: string,
settings: SRSettings
): RegExpMatchArray[] {
const siblings: RegExpMatchArray[] = [];
if (settings.convertHighlightsToClozes) {
siblings.push(...cardText.matchAll(/==(.*?)==/gm));
}
if (settings.convertBoldTextToClozes) {
siblings.push(...cardText.matchAll(/\*\*(.*?)\*\*/gm));
}
if (settings.convertCurlyBracketsToClozes) {
siblings.push(...cardText.matchAll(/{{(.*?)}}/gm));
}

return siblings.sort((a, b) => {
if (a.index < b.index) {
return -1;
}
if (a.index > b.index) {
return 1;
}
return 0;
});
}
22 changes: 22 additions & 0 deletions src/flashcard-modal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import {
} from "src/constants";
import { escapeRegexString, cyrb53 } from "src/utils";
import { t } from "src/lang/helpers";
import { matchClozesWithinCardText } from "./cloze-matching";

export enum FlashcardModalMode {
DecksList,
Expand Down Expand Up @@ -193,6 +194,7 @@ export class FlashcardModal extends Modal {
// Checks if the input textbox is in focus before processing keyboard shortcuts.
if (
document.activeElement.nodeName != "TEXTAREA" &&
document.activeElement.nodeName !== "INPUT" &&
this.mode !== FlashcardModalMode.DecksList
) {
const consume = () => {
Expand Down Expand Up @@ -413,7 +415,26 @@ export class FlashcardModal extends Modal {
this.currentDeck.nextCard(this);
}

private getClozeBackView(clozeInputs: string[]): string {
const { cardText } = this.currentCard;

const clozeMatches = matchClozesWithinCardText(cardText, this.plugin.data.settings);
const correctAnswers = clozeMatches.map((match) => match[1]);

return correctAnswers.reduce((acc, answer, index) => {
return acc.replace(
clozeMatches[index][0],
answer === clozeInputs[index]
? `<span style="color: green">${clozeInputs[index]}</span>`
: `[<span style="color: red; text-decoration: line-through;">${clozeInputs[index]}</span><span style="color: green">${answer}</span>]`
);
}, this.currentCard.cardText);
}

private showAnswer(): void {
const clozeInputFields = Array.from(document.getElementsByClassName("cloze-input"));
const clozeInputs = clozeInputFields.map((clozeInput) => clozeInput.value);

this.mode = FlashcardModalMode.Back;

this.answerBtn.style.display = "none";
Expand All @@ -428,6 +449,7 @@ export class FlashcardModal extends Modal {
hr.setAttribute("id", "sr-hr-card-divide");
this.flashcardView.appendChild(hr);
} else {
this.currentCard.back = this.getClozeBackView(clozeInputs);
this.flashcardView.empty();
}

Expand Down
60 changes: 14 additions & 46 deletions src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { ReviewDeck, ReviewDeckSelectionModal } from "src/review-deck";
import { t } from "src/lang/helpers";
import { parse } from "src/parser";
import { appIcon } from "src/icons/appicon";
import { matchClozesWithinCardText } from "./cloze-matching";

interface PluginData {
settings: SRSettings;
Expand Down Expand Up @@ -690,52 +691,19 @@ export default class SRPlugin extends Plugin {

const siblingMatches: [string, string][] = [];
if (cardType === CardType.Cloze) {
const siblings: RegExpMatchArray[] = [];
if (settings.convertHighlightsToClozes) {
siblings.push(...cardText.matchAll(/==(.*?)==/gm));
}
if (settings.convertBoldTextToClozes) {
siblings.push(...cardText.matchAll(/\*\*(.*?)\*\*/gm));
}
if (settings.convertCurlyBracketsToClozes) {
siblings.push(...cardText.matchAll(/{{(.*?)}}/gm));
}
siblings.sort((a, b) => {
if (a.index < b.index) {
return -1;
}
if (a.index > b.index) {
return 1;
}
return 0;
});

let front: string, back: string;
for (const m of siblings) {
const deletionStart: number = m.index,
deletionEnd: number = deletionStart + m[0].length;
front =
cardText.substring(0, deletionStart) +
"<span style='color:#2196f3'>[...]</span>" +
cardText.substring(deletionEnd);
front = front
.replace(/==/gm, "")
.replace(/\*\*/gm, "")
.replace(/{{/gm, "")
.replace(/}}/gm, "");
back =
cardText.substring(0, deletionStart) +
"<span style='color:#2196f3'>" +
cardText.substring(deletionStart, deletionEnd) +
"</span>" +
cardText.substring(deletionEnd);
back = back
.replace(/==/gm, "")
.replace(/\*\*/gm, "")
.replace(/{{/gm, "")
.replace(/}}/gm, "");
siblingMatches.push([front, back]);
}
const front = matchClozesWithinCardText(cardText, this.data.settings).reduce(
(acc, sibling) => {
const inputHTML = `<input type="text" class="cloze-input" size="${sibling[1].length}" />`;

return acc
? acc.replace(sibling[0], inputHTML)
: acc + sibling.input.replace(sibling[0], inputHTML);
},
""
);

// back is being created in flashcard-modal.tsx with getClozeBackView()
siblingMatches.push([front, ""]);
} else {
let idx: number;
if (cardType === CardType.SingleLineBasic) {
Expand Down