fix: v-drag functionality (slidevjs#1814)

AlbertBrand · Aug 16, 2024 · f8695f4 · f8695f4
1 parent 4773bc4
commit f8695f4
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/packages/client/composables/useDragElements.ts b/packages/client/composables/useDragElements.ts
@@ -69,15 +69,15 @@ export function useDragElementsUpdater(no: number) {
 
       section = type === 'prop'
       // eslint-disable-next-line regexp/no-super-linear-backtracking
-        ? section.replace(/<(v-?drag-?\w*)(.*?)>/gi, (full, tag, attrs, index) => {
+        ? section.replace(/<(v-?drag-?\w*)(.*?)(\/)?>/gi, (full, tag, attrs, selfClose, index) => {
           if (index === idx) {
             replaced = true
             const posMatch = attrs.match(/pos=".*?"/)
             if (!posMatch)
-              return `<${tag}${ensureSuffix(' ', attrs)}pos="${posStr}">`
+              return `<${tag}${ensureSuffix(' ', attrs)}pos="${posStr}"${selfClose}>`
             const start = posMatch.index
             const end = start + posMatch[0].length
-            return `<${tag}${attrs.slice(0, start)}pos="${posStr}"${attrs.slice(end)}>`
+            return `<${tag}${attrs.slice(0, start)}pos="${posStr}"${attrs.slice(end)}${selfClose}>`
           }
           return full
         })

diff --git a/packages/slidev/node/syntax/markdown-it/markdown-it-v-drag.ts b/packages/slidev/node/syntax/markdown-it/markdown-it-v-drag.ts
@@ -1,6 +1,10 @@
 import type MarkdownIt from 'markdown-it'
 import type MagicString from 'magic-string-stack'
 import { SourceMapConsumer } from 'source-map-js'
+import type { Token } from 'markdown-it'
+
+const dragComponentRegex = /<(v-?drag-?\w*)([\s>])/i
+const dragDirectiveRegex = /(?<![</\w])v-drag(=".*?")?/i
 
 export default function MarkdownItVDrag(md: MarkdownIt, markdownTransformMap: Map<string, MagicString>) {
   const visited = new WeakSet()
@@ -26,27 +30,41 @@ export default function MarkdownItVDrag(md: MarkdownIt, markdownTransformMap: Ma
   md.parse = function (src, env) {
     const smc = getSourceMapConsumer(env.id)
     const toOriginalPos = smc
-      ? (line: number) => smc.originalPositionFor({ line, column: 0 }).line
+      ? (line: number) => smc.originalPositionFor({ line: line + 1, column: 0 }).line - 1
       : (line: number) => line
     function toMarkdownSource(map: [number, number], idx: number) {
-      const [start, end] = map
-      return `[${toOriginalPos(start)},${toOriginalPos(end)},${idx}]`
+      const start = toOriginalPos(map[0])
+      const end = toOriginalPos(map[1])
+      return `[${start},${Math.max(start + 1, end)},${idx}]`
+    }
+
+    function replaceChildren(token: Token, regex: RegExp, replacement: string) {
+      for (const child of token.children ?? []) {
+        if (child.type === 'html_block' || child.type === 'html_inline') {
+          child.content = child.content.replace(regex, replacement)
+        }
+        replaceChildren(child, regex, replacement)
+      }
     }
+
     return _parse.call(this, src, env)
       .map((token) => {
-        if (!['html_block', 'html_inline'].includes(token.type) || !token.content.includes('v-drag') || visited.has(token))
+        if (!['html_block', 'html_inline', 'inline'].includes(token.type) || !token.content.includes('drag') || visited.has(token))
           return token
 
         // Iterates all html tokens and replaces <v-drag> with <v-drag :markdownSource="..."> to pass the markdown source to the component
         token.content = token.content
-          .replace(
-            /<(v-?drag-?\w*)([\s>])/gi,
-            (_, tag, space, idx) => `<${tag} :markdownSource="${toMarkdownSource(token.map!, idx)}"${space}`,
-          )
-          .replace(
-            /(?<![</\w])v-drag(=".*?")?/g,
-            (_, value, idx) => `v-drag${value ?? ''} :markdownSource="[${token.map![0]},${token.map![1]},${idx}]"`,
-          )
+          .replace(dragComponentRegex, (_, tag, space, idx) => {
+            const replacement = `<${tag} :markdownSource="${toMarkdownSource(token.map!, idx)}"${space}`
+            replaceChildren(token, dragComponentRegex, replacement)
+            return replacement
+          })
+          .replace(dragDirectiveRegex, (_, value, idx) => {
+            const replacement = `v-drag${value ?? ''} :markdownSource="${toMarkdownSource(token.map!, idx)}"`
+            replaceChildren(token, dragDirectiveRegex, replacement)
+            return replacement
+          })
+
         visited.add(token)
         return token
       })