Merge remote-tracking branch 'origin/main' into feat/explore-as-search

components/common/CommonMask.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const {
+  zIndex = 100,
+  background = 'transparent',
+} = $defineProps<{
+  zIndex?: number
+  background?: string
+}>()
+</script>
+
+<template>
+  <div fixed top-0 bottom-0 left-0 right-0 :style="{ background, zIndex }" />
+</template>

components/user/UserDropdown.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts">
+const mask = useMask()
+</script>
+
 <template>
-  <VDropdown :distance="0" placement="top-start" strategy="fixed">
+  <VDropdown :distance="0" placement="top-start" strategy="fixed" @apply-show="mask.show()" @apply-hide="mask.hide()">
     <button btn-action-icon :aria-label="$t('action.switch_account')">
       <div :class="{ 'hidden xl:block': currentUser }" i-ri:more-2-line />
       <AccountAvatar v-if="currentUser" xl:hidden :account="currentUser.account" w-9 h-9 square />

composables/content-parse.ts

@@ -453,16 +453,16 @@ function transformCollapseMentions() {
   return (node: Node, root: Node): Node | Node[] => {
     if (processed || node.parent !== root || !node.children)
       return node
-    const metions: (Node | undefined)[] = []
+    const mentions: (Node | undefined)[] = []
     const children = node.children as Node[]
     for (const child of children) {
       // metion
       if (isMention(child)) {
-        metions.push(child)
+        mentions.push(child)
       }
       // spaces in between
       else if (child.type === TEXT_NODE && !child.value.trim()) {
-        metions.push(child)
+        mentions.push(child)
       }
       // other content, stop collapsing
       else {
@@ -470,17 +470,17 @@ function transformCollapseMentions() {
           child.value = child.value.trimStart()
         // remove <br> after mention
         if (child.name === 'br')
-          metions.push(undefined)
+          mentions.push(undefined)
         break
       }
     }
     processed = true
-    if (metions.length === 0)
+    if (mentions.length === 0)
       return node
 
     return {
       ...node,
-      children: [h('mention-group', null, ...metions.filter(Boolean)), ...children.slice(metions.length)],
+      children: [h('mention-group', null, ...mentions.filter(Boolean)), ...children.slice(mentions.length)],
     }
   }
 }

composables/mask.ts

@@ -0,0 +1,34 @@
+import { h, render } from 'vue'
+import CommonMask from '~/components/common/CommonMask.vue'
+
+export interface UseMaskOptions {
+  getContainer?: () => HTMLElement
+  background?: string
+  zIndex?: number
+}
+
+export function useMask(options: UseMaskOptions = {}) {
+  const {
+    background = 'transparent',
+    getContainer = () => document.body,
+    zIndex = 100,
+  } = options
+  const wrapperEl = (process.server ? null : document.createElement('div')) as HTMLDivElement
+
+  function show() {
+    const container = getContainer()
+    container?.appendChild(wrapperEl)
+    const MaskComp = h(CommonMask, { background, zIndex })
+    render(MaskComp, wrapperEl)
+  }
+
+  function hide() {
+    render(null, wrapperEl)
+    wrapperEl.parentNode?.removeChild(wrapperEl)
+  }
+
+  return {
+    show,
+    hide,
+  }
+}

tests/content-rich.test.ts

@@ -84,7 +84,7 @@ describe('content-rich', () => {
     expect(formatted).toMatchSnapshot()
   })
 
-  it('collapse metions', async () => {
+  it('collapse mentions', async () => {
     const { formatted } = await render('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> content <span class="h-card"><a href="https://m.webtoo.ls/@antfu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>antfu</span></a></span> <span class="h-card"><a href="https://mastodon.roe.dev/@daniel" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>daniel</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@sxzz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>sxzz</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@patak" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>patak</span></a></span> content</p>', {
       collapseMentionLink: true,
     })