Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add ofm option to transform <img> tags with video exts into <video> (closes #463) #664

Merged
merged 11 commits into from
Jan 17, 2024
27 changes: 25 additions & 2 deletions quartz/plugins/transformers/ofm.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export interface Options {
parseBlockReferences: boolean
enableInHtmlEmbed: boolean
enableYouTubeEmbed: boolean
enableVideoEmbed: boolean
}

const defaultOptions: Options = {
Expand All @@ -37,7 +38,8 @@ const defaultOptions: Options = {
parseTags: true,
parseBlockReferences: true,
enableInHtmlEmbed: false,
enableYouTubeEmbed: false,
enableYouTubeEmbed: true,
enableVideoEmbed: false,
}

const icons = {
Expand Down Expand Up @@ -130,6 +132,7 @@ const calloutLineRegex = new RegExp(/^> *\[\!\w+\][+-]?.*$/, "gm")
const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\p{Emoji}\d])+(?:\/[-_\p{L}\p{Emoji}\d]+)*)/, "gu")
const blockReferenceRegex = new RegExp(/\^([A-Za-z0-9]+)$/, "g")
const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/
const videoExtensionRegex = new RegExp(/\.(mp4|webm|ogg|avi|mov|flv|wmv|mkv|mpg|mpeg|3gp|m4v)$/)

export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
userOpts,
Expand Down Expand Up @@ -346,11 +349,31 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
}
})
}

mdastFindReplace(tree, replacements)
}
})

if (opts.enableVideoEmbed) {
plugins.push(() => {
return (tree: Root, _file) => {
visit(tree, "image", (node, index, parent) => {
const match = node.url.match(videoExtensionRegex)
if (parent && match) {
const htmlNode: PhrasingContent = {
type: "html",
value: `<video controls src="${node.url}" controls></video>`,
}
if (index && index >= 0 && index < parent.children.length) {
parent.children.splice(index, 1, htmlNode)
} else {
console.warn("Warning: Invalid index, htmlNode not added")
}
}
})
}
})
}

if (opts.callouts) {
plugins.push(() => {
return (tree: Root, _file) => {
Expand Down
Loading