Skip to content

Commit

Permalink
fix: v-drag functionality (slidevjs#1814)
Browse files Browse the repository at this point in the history
  • Loading branch information
KermanX authored and AlbertBrand committed Aug 16, 2024
1 parent 4773bc4 commit f8695f4
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 15 deletions.
6 changes: 3 additions & 3 deletions packages/client/composables/useDragElements.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Expand Down
42 changes: 30 additions & 12 deletions packages/slidev/node/syntax/markdown-it/markdown-it-v-drag.ts
Original file line number Diff line number Diff line change
@@ -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()
Expand All @@ -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
})
Expand Down

0 comments on commit f8695f4

Please sign in to comment.