| | |
| | | import { QuartzTransformerPlugin } from "../types" |
| | | import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast" |
| | | import { |
| | | Root, |
| | | Html, |
| | | BlockContent, |
| | | PhrasingContent, |
| | | 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 rehypeRaw from "rehype-raw" |
| | |
| | | import { splitAnchor } from "../../util/path" |
| | | import { JSResource, CSSResource } from "../../util/resources" |
| | | // @ts-ignore |
| | | import calloutScript from "../../components/scripts/callout.inline.ts" |
| | | import calloutScript from "../../components/scripts/callout.inline" |
| | | // @ts-ignore |
| | | import checkboxScript from "../../components/scripts/checkbox.inline.ts" |
| | | import checkboxScript from "../../components/scripts/checkbox.inline" |
| | | // @ts-ignore |
| | | import mermaidScript from "../../components/scripts/mermaid.inline" |
| | | import mermaidStyle from "../../components/styles/mermaid.inline.scss" |
| | | import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path" |
| | | import { toHast } from "mdast-util-to-hast" |
| | | import { toHtml } from "hast-util-to-html" |
| | | import { PhrasingContent } from "mdast-util-find-and-replace/lib" |
| | | import { capitalize } from "../../util/lang" |
| | | import { PluggableList } from "unified" |
| | | |
| | |
| | | enableYouTubeEmbed: boolean |
| | | enableVideoEmbed: boolean |
| | | enableCheckbox: boolean |
| | | disableBrokenWikilinks: boolean |
| | | } |
| | | |
| | | const defaultOptions: Options = { |
| | |
| | | enableYouTubeEmbed: true, |
| | | enableVideoEmbed: true, |
| | | enableCheckbox: false, |
| | | disableBrokenWikilinks: false, |
| | | } |
| | | |
| | | const calloutMapping = { |
| | |
| | | // \[\[ -> 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 |
| | |
| | | // from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts |
| | | const calloutRegex = new RegExp(/^\[\!([\w-]+)\|?(.+?)?\]([+-]?)/) |
| | | const calloutLineRegex = new RegExp(/^> *\[\!\w+\|?.*?\][+-]?.*$/gm) |
| | | // (?:^| ) -> non-capturing group, tag should start be separated by a space or be the start of the line |
| | | // (?<=^| ) -> a lookbehind assertion, tag should start be separated by a space or be the start of the line |
| | | // #(...) -> 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}\p{Emoji}\p{M}\d])+(?:\/[-_\p{L}\p{Emoji}\p{M}\d]+)*)/gu, |
| | | /(?<=^| )#((?:[-_\p{L}\p{Emoji}\p{M}\d])+(?:\/[-_\p{L}\p{Emoji}\p{M}\d]+)*)/gu, |
| | | ) |
| | | const blockReferenceRegex = new RegExp(/\^([-_A-Za-z0-9]+)$/g) |
| | | const ytLinkRegex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/ |
| | |
| | | textTransform(_ctx, src) { |
| | | // do comments at text level |
| | | if (opts.comments) { |
| | | if (src instanceof Buffer) { |
| | | src = src.toString() |
| | | } |
| | | |
| | | src = (src as string).replace(commentRegex, "") |
| | | src = src.replace(commentRegex, "") |
| | | } |
| | | |
| | | // pre-transform blockquotes |
| | | if (opts.callouts) { |
| | | if (src instanceof Buffer) { |
| | | src = src.toString() |
| | | } |
| | | |
| | | src = (src as string).replace(calloutLineRegex, (value) => { |
| | | src = src.replace(calloutLineRegex, (value) => { |
| | | // force newline after title of callout |
| | | return value + "\n> " |
| | | }) |
| | |
| | | |
| | | // pre-transform wikilinks (fix anchors to things that may contain illegal syntax e.g. codeblocks, latex) |
| | | if (opts.wikilinks) { |
| | | if (src instanceof Buffer) { |
| | | src = src.toString() |
| | | } |
| | | |
| | | // replace all wikilinks inside a table first |
| | | src = (src as string).replace(tableRegex, (value) => { |
| | | src = src.replace(tableRegex, (value) => { |
| | | // escape all aliases and headers in wikilinks inside a table |
| | | return value.replace(tableWikilinkRegex, (_value, raw) => { |
| | | // const [raw]: (string | undefined)[] = capture |
| | |
| | | }) |
| | | |
| | | // replace all other wikilinks |
| | | src = (src as string).replace(wikilinkRegex, (value, ...capture) => { |
| | | src = src.replace(wikilinkRegex, (value, ...capture) => { |
| | | 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("!") ? "!" : "" |
| | |
| | | |
| | | return src |
| | | }, |
| | | markdownPlugins(_ctx) { |
| | | markdownPlugins(ctx) { |
| | | const plugins: PluggableList = [] |
| | | |
| | | // regex replacements |
| | |
| | | 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("!")) { |
| | |
| | | // 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 |
| | | |
| | |
| | | }) |
| | | } |
| | | |
| | | // 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) |
| | | |
| | |
| | | "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] |
| | | } |
| | | } |
| | | }) |
| | | } |
| | |
| | | properties: { |
| | | className: ["expand-button"], |
| | | "aria-label": "Expand mermaid diagram", |
| | | "aria-hidden": "true", |
| | | "data-view-component": true, |
| | | }, |
| | | children: [ |
| | |
| | | { |
| | | type: "element", |
| | | tagName: "div", |
| | | properties: { id: "mermaid-container" }, |
| | | properties: { id: "mermaid-container", role: "dialog" }, |
| | | children: [ |
| | | { |
| | | type: "element", |
| | |
| | | { |
| | | type: "element", |
| | | tagName: "div", |
| | | properties: { className: ["mermaid-header"] }, |
| | | children: [ |
| | | { |
| | | type: "element", |
| | | tagName: "button", |
| | | properties: { |
| | | className: ["close-button"], |
| | | "aria-label": "close button", |
| | | }, |
| | | children: [ |
| | | { |
| | | type: "element", |
| | | tagName: "svg", |
| | | properties: { |
| | | "aria-hidden": "true", |
| | | xmlns: "http://www.w3.org/2000/svg", |
| | | width: 24, |
| | | height: 24, |
| | | viewBox: "0 0 24 24", |
| | | fill: "none", |
| | | stroke: "currentColor", |
| | | "stroke-width": "2", |
| | | "stroke-linecap": "round", |
| | | "stroke-linejoin": "round", |
| | | }, |
| | | children: [ |
| | | { |
| | | type: "element", |
| | | tagName: "line", |
| | | properties: { |
| | | x1: 18, |
| | | y1: 6, |
| | | x2: 6, |
| | | y2: 18, |
| | | }, |
| | | children: [], |
| | | }, |
| | | { |
| | | type: "element", |
| | | tagName: "line", |
| | | properties: { |
| | | x1: 6, |
| | | y1: 6, |
| | | x2: 18, |
| | | y2: 18, |
| | | }, |
| | | children: [], |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | | type: "element", |
| | | tagName: "div", |
| | | properties: { className: ["mermaid-content"] }, |
| | | children: [], |
| | | }, |
| | |
| | | }) |
| | | } |
| | | |
| | | if (opts.mermaid) { |
| | | js.push({ |
| | | script: mermaidScript, |
| | | loadTime: "afterDOMReady", |
| | | contentType: "inline", |
| | | moduleType: "module", |
| | | }) |
| | | |
| | | css.push({ |
| | | content: mermaidStyle, |
| | | inline: true, |
| | | }) |
| | | } |
| | | |
| | | return { js, css } |
| | | }, |
| | | } |