fix: dont use default callout title if theres additional title children lef...

Jacky Zhao

2024-01-15 f31cabbbf9b0d438710618a3edd2a4eaaae09d7d

 quartz/plugins/transformers/ofm.ts

@@ -1,5 +1,5 @@
import { QuartzTransformerPlugin } from "../types"
import { Root, Html, BlockContent, DefinitionContent, Paragraph } from "mdast"
import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
import { Element, Literal, Root as HtmlRoot } from "hast"
import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
import { slug as slugAnchor } from "github-slugger"
@@ -25,6 +25,7 @@
  parseTags: boolean
  parseBlockReferences: boolean
  enableInHtmlEmbed: boolean
  enableYouTubeEmbed: boolean
}

const defaultOptions: Options = {
@@ -36,6 +37,7 @@
  parseTags: true,
  parseBlockReferences: true,
  enableInHtmlEmbed: false,
  enableYouTubeEmbed: false,
}

const icons = {
@@ -105,6 +107,8 @@
  return calloutMapping[callout] ?? "note"
}

export const externalLinkRegex = /^https?:\/\//i

// !?               -> optional embedding
// \[\[             -> open brace
// ([^\[\]\|\#]+)   -> one or more non-special characters ([,],|, or #) (name)
@@ -123,8 +127,9 @@
// #(...)               -> capturing group, tag itself must start with #
// (?:[-_\p{L}\d\p{Z}])+       -> non-capturing group, non-empty string of (Unicode-aware) alpha-numeric characters and symbols, hyphens and/or underscores
// (?:\/[-_\p{L}\d\p{Z}]+)*)   -> non-capturing group, matches an arbitrary number of tag strings separated by "/"
const tagRegex = new RegExp(/(?:^| )#((?:[-_\p{L}\d])+(?:\/[-_\p{L}\d]+)*)/, "gu")
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=)([^#\&\?]*).*/

export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options> | undefined> = (
  userOpts,
@@ -145,7 +150,7 @@
          src = src.toString()
        }

        src = src.replaceAll(calloutLineRegex, (value) => {
        src = src.replace(calloutLineRegex, (value) => {
          // force newline after title of callout
          return value + "\n> "
        })
@@ -157,14 +162,20 @@
          src = src.toString()
        }

        src = src.replaceAll(wikilinkRegex, (value, ...capture) => {
          const [rawFp, rawHeader, rawAlias] = capture
        src = src.replace(wikilinkRegex, (value, ...capture) => {
          const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture

          const fp = rawFp ?? ""
          const anchor = rawHeader?.trim().replace(/^#+/, "")
          const blockRef = Boolean(anchor?.startsWith("^")) ? "^" : ""
          const displayAnchor = anchor ? `#${blockRef}${slugAnchor(anchor)}` : ""
          const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
          const embedDisplay = value.startsWith("!") ? "!" : ""

          if (rawFp?.match(externalLinkRegex)) {
            return `${embedDisplay}[${displayAlias.replace(/^\|/, "")}](${rawFp})`
          }

          return `${embedDisplay}[[${fp}${displayAnchor}${displayAlias}]]`
        })
      }
@@ -193,7 +204,7 @@
                if (value.startsWith("!")) {
                  const ext: string = path.extname(fp).toLowerCase()
                  const url = slugifyFilePath(fp as FilePath)
                  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg"].includes(ext)) {
                  if ([".png", ".jpg", ".jpeg", ".gif", ".bmp", ".svg", ".webp"].includes(ext)) {
                    const dims = alias ?? ""
                    let [width, height] = dims.split("x", 2)
                    width ||= "auto"
@@ -225,7 +236,7 @@
                      type: "html",
                      value: `<iframe src="${url}"></iframe>`,
                    }
                  } else if (ext === "") {
                  } else {
                    const block = anchor
                    return {
                      type: "html",
@@ -319,7 +330,7 @@
                if (typeof replace === "string") {
                  node.value = node.value.replace(regex, replace)
                } else {
                  node.value = node.value.replaceAll(regex, (substring: string, ...args) => {
                  node.value = node.value.replace(regex, (substring: string, ...args) => {
                    const replaceValue = replace(substring, ...args)
                    if (typeof replaceValue === "string") {
                      return replaceValue
@@ -355,7 +366,7 @@
              }

              const text = firstChild.children[0].value
              const restChildren = firstChild.children.slice(1)
              const restOfTitle = firstChild.children.slice(1)
              const [firstLine, ...remainingLines] = text.split("\n")
              const remainingText = remainingLines.join("\n")

@@ -371,7 +382,10 @@
                  match.input.slice(calloutDirective.length).trim() || capitalize(calloutType)
                const titleNode: Paragraph = {
                  type: "paragraph",
                  children: [{ type: "text", value: titleContent + " " }, ...restChildren],
                  children:
                    restOfTitle.length === 0
                      ? [{ type: "text", value: titleContent + " " }]
                      : restOfTitle,
                }
                const title = mdastToHtml(titleNode)

@@ -423,25 +437,15 @@
        })
      }

      return plugins
    },
    htmlPlugins() {
      const plugins: PluggableList = [rehypeRaw]

      if (opts.mermaid) {
        plugins.push(() => {
          return (tree: HtmlRoot, _file) => {
            visit(tree, "element", (node) => {
              if (node.tagName === "pre") {
                const firstChild = node.children[0]
                if (firstChild && firstChild.type === "element" && firstChild.tagName === "code") {
                  const code = firstChild
                  const isMermaidBlock =
                    (code.properties["className"] as Array<string>)?.[0] === "language-mermaid"
                  if (isMermaidBlock) {
                    node.children = code.children
                    node.properties.className = ["mermaid"]
                  }
          return (tree: Root, _file) => {
            visit(tree, "code", (node: Code) => {
              if (node.lang === "mermaid") {
                node.data = {
                  hProperties: {
                    className: ["mermaid"],
                  },
                }
              }
            })
@@ -449,6 +453,11 @@
        })
      }

      return plugins
    },
    htmlPlugins() {
      const plugins: PluggableList = [rehypeRaw]

      if (opts.parseBlockReferences) {
        plugins.push(() => {
          const inlineTagTypes = new Set(["p", "li"])
@@ -502,6 +511,30 @@
        })
      }

      if (opts.enableYouTubeEmbed) {
        plugins.push(() => {
          return (tree: HtmlRoot) => {
            visit(tree, "element", (node) => {
              if (node.tagName === "img" && typeof node.properties.src === "string") {
                const match = node.properties.src.match(ytLinkRegex)
                const videoId = match && match[2].length == 11 ? match[2] : null
                if (videoId) {
                  node.tagName = "iframe"
                  node.properties = {
                    class: "external-embed",
                    allow: "fullscreen",
                    frameborder: 0,
                    width: "600px",
                    height: "350px",
                    src: `https://www.youtube.com/embed/${videoId}`,
                  }
                }
              }
            })
          }
        })
      }

      return plugins
    },
    externalResources() {