feat(plugin-md-power): improve normal demo sandbox

docs/notes/theme/guide/代码演示/demo/normal-lib.html

@@ -5,8 +5,8 @@ <h3>vuepress-theme-plume</h3>
 </div>
 
 <script>
-$('#message', document).text('So Awesome!')
-const datetime = $('#datetime', document)
+$('#message').text('So Awesome!')
+const datetime = $('#datetime')
 setInterval(() => {
   datetime.text(dayjs().format('YYYY-MM-DD HH:mm:ss'))
 }, 1000)

docs/notes/theme/guide/代码演示/demo/normal.html

@@ -5,7 +5,7 @@ <h3>vuepress-theme-plume</h3>
 <script lang="ts">
 const a = 'So Awesome!'
 const app = document.querySelector('#app')
-app.appendChild(window.document.createElement('small')).textContent = a
+app.appendChild(document.createElement('small')).textContent = a
 </script>
 
 <style lang="css">

docs/notes/theme/guide/代码演示/前端演示.md

@@ -154,7 +154,7 @@ export default defineUserConfig({
 
   `code-setting=":lines-number"`,则会在代码块后面添加 `:lines-number`，使代码块支持显示行号。
 
-  `code-setting=":collapsed-lines=10"`,则会在代码块后面添加 `:collapsed-lines=10`，使代码块从第 210行开始折叠。
+  `code-setting=":collapsed-lines=10"`,则会在代码块后面添加 `:collapsed-lines=10`，使代码块从第 10 行开始折叠。
 
 ```md
 @[demo vue expanded title="标题" desc="描述" code-setting=":collapsed-lines=10"](./demo/Counter.vue)
@@ -420,16 +420,6 @@ export default defineComponent({
 
 同时，也支持通过 外部链接 的方式引入 第三方的库，比如 `jQuery` ， `dayjs` 等。
 
-::: important `document` 的差异
-普通代码演示 的代码 运行在 `ShadowDOM` 中，从而实现与 站点其他内容的隔离。避免对环境的污染。
-
-因此，在普通演示的脚本代码中，**全局对象 `document` 指向的是 `ShadowDOM`** ，请着重注意此差异。
-如果您需要使用 浏览器的全局对象，请使用 `window.document` 代替 `document`。
-
-如果引入了如 `JQuery` 库，由于此差异，`$(selector)` 的行为会发生变化，要查询 `ShadowDOM` 中的元素，
-需要使用 `$(selector, document)`，即在第二个参数中传入 `document` 作为查询的上下文。
-:::
-
 ::: warning 不建议过于复杂的演示。
 :::
 
@@ -600,7 +590,7 @@ export default defineComponent({
 ```js
 const a = 'So Awesome!'
 const app = document.querySelector('#app')
-app.appendChild(window.document.createElement('small')).textContent = a
+app.appendChild(document.createElement('small')).textContent = a
 ```
 @tab CSS
 ```css
@@ -633,7 +623,7 @@ app.appendChild(window.document.createElement('small')).textContent = a
 ```js
 const a = 'So Awesome!'
 const app = document.querySelector('#app')
-app.appendChild(window.document.createElement('small')).textContent = a
+app.appendChild(document.createElement('small')).textContent = a
 ```
 
 @tab CSS
@@ -678,8 +668,8 @@ app.appendChild(window.document.createElement('small')).textContent = a
 ```
 @tab Javascript
 ```js
-$('#message', document).text('So Awesome!')
-const datetime = $('#datetime', document)
+$('#message').text('So Awesome!')
+const datetime = $('#datetime')
 setInterval(() => {
   datetime.text(dayjs().format('YYYY-MM-DD HH:mm:ss'))
 }, 1000)
@@ -725,8 +715,8 @@ setInterval(() => {
 @tab Javascript
 
 ```js
-$('#message', document).text('So Awesome!')
-const datetime = $('#datetime', document)
+$('#message').text('So Awesome!')
+const datetime = $('#datetime')
 setInterval(() => {
   datetime.text(dayjs().format('YYYY-MM-DD HH:mm:ss'))
 }, 1000)

plugins/plugin-md-power/src/client/components/VPDemoBasic.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useExpand } from '../composables/demo.js'
 
 import '../styles/demo.css'
 
@@ -10,10 +10,7 @@ const props = defineProps<{
   expanded?: boolean
 }>()
 
-const showCode = ref(props.expanded ?? true)
-function toggleCode() {
-  showCode.value = !showCode.value
-}
+const [showCode, toggleCode] = useExpand(props.expanded)
 </script>
 
 <template>

plugins/plugin-md-power/src/client/components/VPDemoNormal.vue

@@ -1,130 +1,48 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
-import { computed, onMounted, ref, useId, useTemplateRef, watch } from 'vue'
-import { loadScript, loadStyle } from '../utils/shared.js'
-import Loading from './icons/Loading.vue'
+import { useTemplateRef } from 'vue'
+import { type DemoConfig, useExpand, useFence, useNormalDemo, useResources } from '../composables/demo.js'
 
 import '../styles/demo.css'
 
 const props = defineProps<{
   title?: string
   desc?: string
   expanded?: boolean
-  config?: {
-    html: string
-    css: string
-    script: string
-    jsLib: string[]
-    cssLib: string[]
-  }
+  config?: DemoConfig
 }>()
 
-const draw = useTemplateRef<HTMLDivElement>('draw')
-const id = useId()
-const loaded = ref(true)
+const [showCode, toggleCode] = useExpand(props.expanded)
 
-const resourcesEl = useTemplateRef<HTMLDivElement>('resourcesEl')
-const resources = computed<{
-  name: string
-  items: { name: string, url: string }[]
-}[]>(() => {
-  if (!props.config)
-    return []
-  return [
-    { name: 'JavaScript', items: props.config.jsLib.map(url => ({ name: normalizeName(url), url })) },
-    { name: 'CSS', items: props.config.cssLib.map(url => ({ name: normalizeName(url), url })) },
-  ].filter(i => i.items.length)
-})
+const { resources, showResources, toggleResources } = useResources(
+  useTemplateRef<HTMLDivElement>('resourcesEl'),
+  () => props.config,
+)
 
-function normalizeName(url: string) {
-  return url.slice(url.lastIndexOf('/') + 1)
-}
+const { id, height } = useNormalDemo(
+  useTemplateRef<HTMLIFrameElement>('draw'),
+  () => props.title,
+  () => props.config,
+)
 
-const showResources = ref(false)
-
-function toggleResources() {
-  showResources.value = !showResources.value
-}
-
-onClickOutside(resourcesEl, () => {
-  showResources.value = false
-})
-
-onMounted(() => {
-  if (!draw.value)
-    return
-  const root = draw.value.attachShadow({ mode: 'open' })
-
-  watch(() => props.config, async () => {
-    root.innerHTML = props.config?.html ?? ''
-
-    props.config?.cssLib?.forEach(url => loadStyle(url, root))
-    if (props.config?.css) {
-      const style = document.createElement('style')
-      style.innerHTML = props.config?.css ?? ''
-      root.appendChild(style)
-    }
-
-    if (props.config?.jsLib?.length) {
-      loaded.value = false
-      await Promise.all(props.config.jsLib.map(url => loadScript(url)))
-        .catch(e => console.warn(e))
-      loaded.value = true
-    }
-
-    if (props.config?.script) {
-      const script = document.createElement('script')
-      script.type = 'text/javascript'
-      script.innerHTML = `;(function(document){\n${props.config.script}\n})(document.querySelector('#VPDemoNormalDraw${id}').shadowRoot);`
-      root.appendChild(script)
-    }
-  }, { immediate: true })
-})
-
-const fence = useTemplateRef<HTMLDivElement>('fence')
-const data = ref<{
-  js: string
-  css: string
-  html: string
-  jsType: string
-  cssType: string
-}>({ js: '', css: '', html: '', jsType: '', cssType: '' })
-
-onMounted(() => {
-  if (!fence.value)
-    return
-
-  data.value.html = props.config?.html ?? ''
-  const els = Array.from(fence.value.querySelectorAll('div[class*="language-"]'))
-  for (const el of els) {
-    const lang = el.className.match(/language-(\w+)/)?.[1] ?? ''
-    const content = el.querySelector('pre')?.textContent ?? ''
-    if (lang === 'js' || lang === 'javascript') {
-      data.value.js = content
-      data.value.jsType = 'js'
-    }
-    if (lang === 'ts' || lang === 'typescript') {
-      data.value.js = content
-      data.value.jsType = 'ts'
-    }
-    if (lang === 'css' || lang === 'scss' || lang === 'less' || lang === 'stylus' || lang === 'styl') {
-      data.value.css = content
-      data.value.cssType = lang === 'styl' ? 'stylus' : lang
-    }
-  }
-})
-
-const showCode = ref(props.expanded ?? false)
-function toggleCode() {
-  showCode.value = !showCode.value
-}
+const data = useFence(
+  useTemplateRef<HTMLDivElement>('fence'),
+  () => props.config,
+)
 </script>
 
 <template>
   <div class="vp-demo-wrapper normal">
     <div class="demo-draw">
-      <Loading v-if="!loaded" />
-      <div :id="`VPDemoNormalDraw${id}`" ref="draw" />
+      <iframe
+        :id="`VPDemoNormalDraw${id}`"
+        ref="draw"
+        class="draw-iframe"
+        allow="accelerometer *; bluetooth *; camera *; encrypted-media *; display-capture *; geolocation *; gyroscope *; microphone *; midi *; clipboard-read *; clipboard-write *; web-share *; serial *; xr-spatial-tracking *"
+        allowfullscreen="true"
+        allowpaymentrequest="true"
+        allowtransparency="true"
+        sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" :style="{ height }"
+      />
     </div>
     <div v-if="title || desc" class="demo-info">
       <p v-if="title" class="title">