refacto and never use escape method

src/components/FluxNote.vue

@@ -88,7 +88,7 @@ export default defineComponent({
     const store = useUserRepoStore()
     useUserSettings()
     const { visitRepo } = useVisitRepo({ user: props.user, repo: props.repo })
-    const { renderString } = useMarkdown(props.repo)
+    const { toHTML } = useMarkdown(props.repo)
     const { listenToClick } = useLinks('note-display')
     const { stackedNotes, resetStackedNotes } = useQueryStackedNotes()
     const { scrollToFocusedNote } = useQueryStackedNotes()
@@ -98,7 +98,7 @@ export default defineComponent({
     const renderedContent = computed(() =>
       props.content !== null
         ? props.parseContent
-          ? renderString(props.content)
+          ? toHTML(props.content)
           : props.content
         : store.readme
     )

src/hooks/useMarkdown.hook.ts

@@ -5,6 +5,7 @@ import markdownItCheckbox from 'markdown-it-checkbox'
 import markdownItSvgCodeCopy from 'markdown-it-svg-code-copy'
 import markdownItFootnote from 'markdown-it-footnote'
 import { html5Media } from '@/utils/markdown/markdown-html5-media'
+import { decodeBase64ToUTF8 } from '@/utils/decodeBase64ToUTF8'
 
 const md = new MarkdownIt({
   typographer: true,
@@ -38,10 +39,10 @@ const md = new MarkdownIt({
 
 export const useMarkdown = (defaultPrefix?: string) => {
   return {
-    renderString: (content: string) => (content ? md.render(content) : ''),
+    toHTML: (content: string) => (content ? md.render(content) : ''),
     render: (content: string, prefix?: string) =>
       content
-        ? md.render(decodeURIComponent(escape(atob(content))), {
+        ? md.render(decodeBase64ToUTF8(content), {
             docId: defaultPrefix ?? prefix ?? ''
           })
         : ''

src/modules/card/hooks/useSpacedRepetitionCards.ts

@@ -6,6 +6,7 @@ import { useMarkdown } from '@/hooks/useMarkdown.hook'
 import { Card } from '@/modules/card/models/Card'
 import { RepetitionCard } from '@/modules/card/models/RepetitionCard'
 import { useUserRepoStore } from '@/modules/repo/store/userRepo.store'
+import { decodeBase64ToUTF8 } from '@/utils/decodeBase64ToUTF8'
 import { asyncComputed } from '@vueuse/core'
 import { isAfter } from 'date-fns'
 import { computed, nextTick, watch } from 'vue'
@@ -16,7 +17,7 @@ interface Repetition {
 }
 
 export const useSpacedRepetitionCards = () => {
-  const { renderString } = useMarkdown()
+  const { toHTML } = useMarkdown()
   const store = useUserRepoStore()
   const { listenToClick } = useLinks('flip-card')
 
@@ -64,14 +65,14 @@ export const useSpacedRepetitionCards = () => {
       const content = await getRawContent()
 
       const [front, back, references] =
-        decodeURIComponent(escape(atob(content ?? '')))?.split('___') ?? []
+        decodeBase64ToUTF8(content ?? '').split('___') ?? []
 
       cards.push({
         repetition,
         card: {
-          front: renderString(front),
+          front: toHTML(front),
-          back: renderString(back),
+          back: toHTML(back),
-          references: renderString(references)
+          references: toHTML(references)
         }
       })
     }

src/utils/decodeBase64ToUTF8.ts

@@ -0,0 +1,8 @@
+export const decodeBase64ToUTF8 = (content: string): string => {
+  return decodeURIComponent(
+    atob(content)
+      .split('')
+      .map((char) => `%${('00' + char.charCodeAt(0).toString(16)).slice(-2)}`)
+      .join('')
+  )
+}