Jacky Zhao
2024-01-28 ba40516c544f4196302364a84ee2cbecb331d46d
quartz/plugins/transformers/ofm.ts
@@ -1,5 +1,5 @@
import { QuartzTransformerPlugin } from "../types"
import { Root, Html, Image, BlockContent, DefinitionContent, Paragraph, Code } 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"
@@ -23,6 +23,7 @@
  callouts: boolean
  mermaid: boolean
  parseTags: boolean
  parseArrows: boolean
  parseBlockReferences: boolean
  enableInHtmlEmbed: boolean
  enableYouTubeEmbed: boolean
@@ -36,6 +37,7 @@
  callouts: true,
  mermaid: true,
  parseTags: true,
  parseArrows: true,
  parseBlockReferences: true,
  enableInHtmlEmbed: false,
  enableYouTubeEmbed: true,
@@ -106,11 +108,14 @@
function canonicalizeCallout(calloutName: string): keyof typeof callouts {
  let callout = calloutName.toLowerCase() as keyof typeof calloutMapping
  return calloutMapping[callout] ?? "note"
  // if callout is not recognized, make it a custom one
  return calloutMapping[callout] ?? calloutName
}
export const externalLinkRegex = /^https?:\/\//i
export const arrowRegex = new RegExp(/-{1,2}>/, "g")
// !?               -> optional embedding
// \[\[             -> open brace
// ([^\[\]\|\#]+)   -> one or more non-special characters ([,],|, or #) (name)
@@ -121,7 +126,7 @@
  "g",
)
const highlightRegex = new RegExp(/==([^=]+)==/, "g")
const commentRegex = new RegExp(/%%(.+)%%/, "g")
const commentRegex = new RegExp(/%%[\s\S]*?%%/, "g")
// from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
const calloutRegex = new RegExp(/^\[\!(\w+)\]([+-]?)/)
const calloutLineRegex = new RegExp(/^> *\[\!\w+\][+-]?.*$/, "gm")
@@ -130,7 +135,7 @@
// (?:[-_\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}\p{Emoji}\d])+(?:\/[-_\p{L}\p{Emoji}\d]+)*)/, "gu")
const blockReferenceRegex = new RegExp(/\^([A-Za-z0-9]+)$/, "g")
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)$/)
@@ -147,6 +152,15 @@
  return {
    name: "ObsidianFlavoredMarkdown",
    textTransform(_ctx, src) {
      // do comments at text level
      if (opts.comments) {
        if (src instanceof Buffer) {
          src = src.toString()
        }
        src = src.replace(commentRegex, "")
      }
      // pre-transform blockquotes
      if (opts.callouts) {
        if (src instanceof Buffer) {
@@ -282,13 +296,13 @@
            ])
          }
          if (opts.comments) {
          if (opts.parseArrows) {
            replacements.push([
              commentRegex,
              arrowRegex,
              (_value: string, ..._capture: string[]) => {
                return {
                  type: "text",
                  value: "",
                  type: "html",
                  value: `<span>&rarr;</span>`,
                }
              },
            ])
@@ -304,7 +318,7 @@
                }
                tag = slugTag(tag)
                if (file.data.frontmatter && !file.data.frontmatter.tags.includes(tag)) {
                if (file.data.frontmatter?.tags?.includes(tag)) {
                  file.data.frontmatter.tags.push(tag)
                }
@@ -358,7 +372,6 @@
          return (tree: Root, _file) => {
            visit(tree, "image", (node, index, parent) => {
              if (parent && index != undefined && videoExtensionRegex.test(node.url)) {
                console.log("replacin")
                const newNode: Html = {
                  type: "html",
                  value: `<video controls src="${node.url}"></video>`,
@@ -419,7 +432,7 @@
                  value: `<div
                  class="callout-title"
                >
                  <div class="callout-icon">${callouts[calloutType]}</div>
                  <div class="callout-icon">${callouts[calloutType] ?? callouts.note}</div>
                  <div class="callout-title-inner">${title}</div>
                  ${collapse ? toggleIcon : ""}
                </div>`,
@@ -445,7 +458,7 @@
                node.data = {
                  hProperties: {
                    ...(node.data?.hProperties ?? {}),
                    className: `callout ${collapse ? "is-collapsible" : ""} ${
                    className: `callout ${calloutType} ${collapse ? "is-collapsible" : ""} ${
                      defaultState === "collapsed" ? "is-collapsed" : ""
                    }`,
                    "data-callout": calloutType,