fix(callouts)!: match callout DOM to Obsidian (#2104)

Emile Bangma

2025-09-21 4923affa7722dfc751f1074348e6dad214fe0c08

 quartz/plugins/transformers/ofm.ts

@@ -41,6 +41,7 @@
  enableYouTubeEmbed: boolean
  enableVideoEmbed: boolean
  enableCheckbox: boolean
  disableBrokenWikilinks: boolean
}

const defaultOptions: Options = {
@@ -56,6 +57,7 @@
  enableYouTubeEmbed: true,
  enableVideoEmbed: true,
  enableCheckbox: false,
  disableBrokenWikilinks: false,
}

const calloutMapping = {
@@ -113,9 +115,9 @@
// \[\[               -> open brace
// ([^\[\]\|\#]+)     -> one or more non-special characters ([,],|, or #) (name)
// (#[^\[\]\|\#]+)?   -> # then one or more non-special characters (heading link)
// (\\?\|[^\[\]\#]+)? -> optional escape \ then | then one or more non-special characters (alias)
// (\\?\|[^\[\]\#]+)? -> optional escape \ then | then zero or more non-special characters (alias)
export const wikilinkRegex = new RegExp(
  /!?\[\[([^\[\]\|\#\\]+)?(#+[^\[\]\|\#\\]+)?(\\?\|[^\[\]\#]+)?\]\]/g,
  /!?\[\[([^\[\]\|\#\\]+)?(#+[^\[\]\|\#\\]+)?(\\?\|[^\[\]\#]*)?\]\]/g,
)

// ^\|([^\n])+\|\n(\|) -> matches the header row
@@ -191,7 +193,7 @@
          const [rawFp, rawHeader, rawAlias]: (string | undefined)[] = capture

          const [fp, anchor] = splitAnchor(`${rawFp ?? ""}${rawHeader ?? ""}`)
          const blockRef = Boolean(rawHeader?.match(/^#?\^/)) ? "^" : ""
          const blockRef = Boolean(rawHeader?.startsWith("#^")) ? "^" : ""
          const displayAnchor = anchor ? `#${blockRef}${anchor.trim().replace(/^#+/, "")}` : ""
          const displayAlias = rawAlias ?? rawHeader?.replace("#", "|") ?? ""
          const embedDisplay = value.startsWith("!") ? "!" : ""
@@ -206,7 +208,7 @@

      return src
    },
    markdownPlugins(_ctx) {
    markdownPlugins(ctx) {
      const plugins: PluggableList = []

      // regex replacements
@@ -222,7 +224,7 @@
                let [rawFp, rawHeader, rawAlias] = capture
                const fp = rawFp?.trim() ?? ""
                const anchor = rawHeader?.trim() ?? ""
                const alias = rawAlias?.slice(1).trim()
                const alias: string | undefined = rawAlias?.slice(1).trim()

                // embed cases
                if (value.startsWith("!")) {
@@ -275,6 +277,18 @@
                  // otherwise, fall through to regular link
                }

                // treat as broken link if slug not in ctx.allSlugs
                if (opts.disableBrokenWikilinks) {
                  const slug = slugifyFilePath(fp as FilePath)
                  const exists = ctx.allSlugs && ctx.allSlugs.includes(slug)
                  if (!exists) {
                    return {
                      type: "html",
                      value: `<a class=\"internal broken\">${alias ?? fp}</a>`,
                    }
                  }
                }

                // internal link
                const url = fp + anchor

@@ -464,6 +478,21 @@
                  })
                }

                // For the rest of the MD callout elements other than the title, wrap them with
                // two nested HTML <div>s (use some hacked mdhast component to achieve this) of
                // class `callout-content` and `callout-content-inner` respectively for
                // grid-based collapsible animation.
                if (calloutContent.length > 0) {
                  node.children = [
                    node.children[0],
                    {
                      data: { hProperties: { className: ["callout-content"] }, hName: "div" },
                      type: "blockquote",
                      children: [...calloutContent],
                    },
                  ]
                }

                // replace first line of blockquote with title and rest of the paragraph text
                node.children.splice(0, 1, ...blockquoteContent)

@@ -485,21 +514,6 @@
                    "data-callout-metadata": calloutMetaData,
                  },
                }

                // Add callout-content class to callout body if it has one.
                if (calloutContent.length > 0) {
                  const contentData: BlockContent | DefinitionContent = {
                    data: {
                      hProperties: {
                        className: "callout-content",
                      },
                      hName: "div",
                    },
                    type: "blockquote",
                    children: [...calloutContent],
                  }
                  node.children = [node.children[0], contentData]
                }
              }
            })
          }