[Feature request] @vuepress/plugin-markdown-hint support 'details' container to unfold by default

[pecliu]

Clear and concise description of the problem

now,details' container in @vuepress/plugin-markdown-hint is folded by default

need config entrance to let it be fold by default

Suggested solution

need config entrance to let it be fold by default

Alternative

No response

Additional context

No response

[Mister-Hope]

1. If you are not a native English speaker, then providing a copy with mother language would be helpful in some cases.

2. To let the container being expanded by default, adding the following snippets would be helpful:

// vuepress/client.ts
import { defineClientConfig, useRoute } from 'vuepress/client'

export default defineClientConfig({
  setup() {
    const route = useRoute()

    onMounted() {
      // Toggle all <details> open when path changes
      watch(() => route.path, () => {
        document.querySelectorAll('details').forEach((detail) => {
          detail.open = true
        })
      }, { immediate: true })
    })
  },
})

[Mister-Hope]

@pengzhanbo I don't think it's worthy to be further worked on, RFC here.

IMO, the goal of details is to hide some further explanations out of the main document to make the structure and content clean, while providing an easier way to access these further explanations rather than as attachement.

[pengzhanbo]

@Mister-Hope I agree with this viewpoint. If the details container needs to be expanded by default, it indicates that what is required in this scenario is not the details container, but rather containers like tip/warning/caution/important.

[pecliu]

1. If you are not a native English speaker, then providing a copy with mother language would be helpful in some cases.
2. To let the container being expanded by default, adding the following snippets would be helpful:

// vuepress/client.ts
import { defineClientConfig, useRoute } from 'vuepress/client'

export default defineClientConfig({
  setup() {
    const route = useRoute()

    onMounted() {
      // Toggle all <details> open when path changes
      watch(() => route.path, () => {
        document.querySelectorAll('details').forEach((detail) => {
          detail.open = true
        })
      }, { immediate: true })
    })
  },
})

tks, it works！ it should be the code below:

  setup() {
    const route = useRoute()
    onMounted(() => {
      // Toggle all <details> open when path changes
      document.querySelectorAll('details').forEach((detail) => {
        detail.open = true
      })
      watch(() => route.path, () => {
        setTimeout(() => {
          document.querySelectorAll('details').forEach((detail) => {
            detail.open = true
          })
        }, 200)
      }, { immediate: true })
    })
  },