fix: implement regex fix for alt in image wikilinks (closes #753)

Jacky Zhao

2024-01-29 2d727443b3cc716ea057a897f588e2c563102d5c

fix: implement regex fix for alt in image wikilinks (closes #753)

 quartz/plugins/transformers/ofm.ts

@@ -138,6 +138,7 @@
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)$/)
const wikilinkImageEmbedRegex = new RegExp(/^(?<alt>(?!^\d*x?\d*$).*?)?(\|?\s*?(?<width>\d+)(x(?<height>\d+))?)?$/)

export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
  userOpts,
@@ -222,18 +223,10 @@
                  const ext: string = path.extname(fp).toLowerCase()
                  const url = slugifyFilePath(fp as FilePath)
                  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
                    // either |alt|dims or |dims
                    let [alt, dims] = (alias ?? "").split("|")

                    // |dims case, treat first alt slot as dims
                    if (dims === undefined) {
                      dims = alt
                      alt = ""
                    }

                    let [width, height] = dims.split("x", 2)
                    width ||= "auto"
                    height ||= "auto"
                    const match = wikilinkImageEmbedRegex.exec(alias ?? "")
                    const alt = match?.groups?.alt ?? ""
                    const width = match?.groups?.width ?? "auto"
                    const height = match?.groups?.height ?? "auto"
                    return {
                      type: "image",
                      url,
@@ -267,9 +260,8 @@
                    return {
                      type: "html",
                      data: { hProperties: { transclude: true } },
                      value: `<blockquote class="transclude" data-url="${url}" data-block="${block}"><a href="${
                        url + anchor
                      }" class="transclude-inner">Transclude of ${url}${block}</a></blockquote>`,
                      value: `<blockquote class="transclude" data-url="${url}" data-block="${block}"><a href="${url + anchor
                        }" class="transclude-inner">Transclude of ${url}${block}</a></blockquote>`,
                    }
                  }

@@ -467,9 +459,8 @@
                node.data = {
                  hProperties: {
                    ...(node.data?.hProperties ?? {}),
                    className: `callout ${calloutType} ${collapse ? "is-collapsible" : ""} ${
                      defaultState === "collapsed" ? "is-collapsed" : ""
                    }`,
                    className: `callout ${calloutType} ${collapse ? "is-collapsible" : ""} ${defaultState === "collapsed" ? "is-collapsed" : ""
                      }`,
                    "data-callout": calloutType,
                    "data-callout-fold": collapse,
                  },