Add flexible formatting options for Audio and Quote display

[Majoramari]

No description provided.

[MKSherbini]

@Majoramari Thank you for contributing. We can change the default behavior, but for the callout fix, a single extra space between them will suffice.

Can you make this change so I can accept the PR?

[Majoramari]

a single extra space between them will suffice.

Could you clarify the exact location where I should add the extra space?

[MKSherbini]

Between the audio element and the Quote.

above this line

obsidian-noor/src/api/QuranApi.ts

Line 44 in 19573af

> [!Quote] ${this.getSurahTitle(arabicResponse)} - [[${arabicResponse.number}:${arabicResponse.ayahs![0].numberInSurah}](https://surahquran.com/english.php?sora=${arabicResponse.number}&aya=${arabicResponse.ayahs![0].numberInSurah})]

[Majoramari]

above this line

In the commit 97f8bf7, I swapped the audio and quote, so now the audio comes after the quote to be more UX-friendly when there’s nothing above !Quote.

And this is the result:

Refrence code:

	private async fetchQuran(surah: number, ayah: number) {
		const [arabicResponse, translationResponse] = await Promise.all([
			this.fetchData(surah, this.plugin.settings.reciter, ayah),
			this.fetchData(surah, this.plugin.settings.translationOption, ayah)
		]);

		return `> [!Quote] ${this.getSurahTitle(arabicResponse)} - [[${arabicResponse.number}:${arabicResponse.ayahs![0].numberInSurah}](https://surahquran.com/english.php?sora=${arabicResponse.number}&aya=${arabicResponse.ayahs![0].numberInSurah})]
> 
> ${arabicResponse.ayahs![0].text}${this.getTranslation(translationResponse)}

<audio src="${arabicResponse.ayahs![0].audio}" controls>
<p> Audio tag not supported </p>
</audio>
`;
	}

---

If you still want to add an empty line to get this result:

I can add   between Quote and Audio

[MKSherbini]

UX is subjective, I'd say it's better to be up.

But it's fine, just make it configurable in settings and also increase the version to make it a valid release update.

[Majoramari]

just make it configurable in settings and also increase the version to make it a valid release update.

No problem, I add 2 new settings:

---

✅ Audio Above Quote
❌ Space

✅ Audio Above Quote
✅ Space

✅ Quote Above Audio
❌ Space

✅ Quote Above Audio
✅ Space