feat: add ofm option to transform `<img>` tags with video exts into `<video...

Matthew Bailin

2024-01-17 f6299da1823b51917792905ca71257e55f706ed6

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

* enableVideoEmbed plugin

* enableVideoEmbed plugin

* enableVideoEmbed plugin

* enableVideoEmbed plugin

* enableVideoEmbed plugin

* cleaned up index validation, regex, conditional, no autoplay

* Update quartz/plugins/transformers/ofm.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update quartz/plugins/transformers/ofm.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update quartz/plugins/transformers/ofm.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update ofm.ts

* Update ofm.ts

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

 quartz/plugins/transformers/ofm.ts

@@ -26,6 +26,7 @@
  parseBlockReferences: boolean
  enableInHtmlEmbed: boolean
  enableYouTubeEmbed: boolean
  enableVideoEmbed: boolean
}

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

const icons = {
@@ -130,6 +132,7 @@
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,
@@ -346,11 +349,31 @@
              }
            })
          }

          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) => {