minor fixes & cleanups for editor

Author: MaxGraey

src/.vuepress/components/EditorFrame.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onActivated, onDeactivated, onUnmounted, ref } from 'vue'
 
 const props = defineProps<{
-  code: string
+  initialSource: string
 }>()
 
 const editor = ref<HTMLElement | null>(null)
+const iframeKey = ref(0)
 const isMaximized = ref(false)
-const iframeSrc = ref('data:text/html;base64,')
 
-const editorSrc = computed(() => `/editor.html#${props.code}`)
-
-let readyStateListener: (() => void) | null = null
+const iframeSrc = computed(() => `/editor.html#${props.initialSource}`)
 
 function updateBodyOverflow(): void {
   document.body.style.overflow = isMaximized.value ? 'hidden' : 'auto'
@@ -22,41 +20,28 @@ function toggleEditor(): void {
   updateBodyOverflow()
 
   if (!isMaximized.value) {
-    editor.value?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    editor.value?.scrollIntoView({
+      block: 'nearest',
+      behavior: 'smooth',
+    })
   }
 }
 
-onMounted(() => {
-  const setIframeSrc = (): void => {
-    iframeSrc.value = editorSrc.value
-  }
-
-  if (document.readyState === 'complete') {
-    setIframeSrc()
-    return
-  }
+function closeEditor(): void {
+  isMaximized.value = false
+  document.body.style.overflow = 'auto'
+}
 
-  readyStateListener = () => {
-    if (document.readyState === 'complete') {
-      setIframeSrc()
-      if (readyStateListener) {
-        document.removeEventListener('readystatechange', readyStateListener)
-        readyStateListener = null
-      }
-    }
-  }
+onActivated(() => {
+  iframeKey.value += 1
+})
 
-  document.addEventListener('readystatechange', readyStateListener, { once: true })
+onDeactivated(() => {
+  if (isMaximized.value) closeEditor()
 })
 
 onUnmounted(() => {
-  if (readyStateListener) {
-    document.removeEventListener('readystatechange', readyStateListener)
-  }
-
-  if (isMaximized.value) {
-    document.body.style.overflow = 'auto'
-  }
+  if (isMaximized.value) closeEditor()
 })
 </script>
 
@@ -70,7 +55,7 @@ onUnmounted(() => {
     >
       {{ isMaximized ? '◲' : '◰' }}
     </button>
-    <iframe :src="iframeSrc" title="Editor" loading="lazy" />
+    <iframe :key="iframeKey" :src="iframeSrc" title="Editor" />
   </div>
 </template>
 

src/.vuepress/config.ts

@@ -11,7 +11,6 @@ import { defaultTheme } from '@vuepress/theme-default'
 import { defineUserConfig } from 'vuepress'
 
 import type { Plugin } from '@vuepress/core'
-import type { Markdown } from '@vuepress/markdown'
 
 import navbar from './nav'
 import sidebar from './sidebar'
@@ -97,7 +96,7 @@ export default defineUserConfig({
 function assemblyScriptEditorPlugin(): Plugin {
   return {
     name: 'as-editor',
-    extendsMarkdown(md: Markdown) {
+    extendsMarkdown(md) {
       const defaultFence = md.renderer.rules.fence
 
       md.renderer.rules.fence = (tokens, idx, options, env, self) => {
@@ -111,7 +110,7 @@ function assemblyScriptEditorPlugin(): Plugin {
         }
 
         const encoded = Buffer.from(token.content, 'utf8').toString('base64')
-        return `<EditorFrame code="${encoded}" />`
+        return `<EditorFrame initialSource="${encoded}" />`
       }
     },
   }