enable rich text in callout title
This commit is contained in:
parent
831a47ad61
commit
736871ad78
@ -1,6 +1,6 @@
|
|||||||
import { PluggableList } from "unified"
|
import { PluggableList } from "unified"
|
||||||
import { QuartzTransformerPlugin } from "../types"
|
import { QuartzTransformerPlugin } from "../types"
|
||||||
import { Root, HTML, BlockContent, DefinitionContent, Code } from "mdast"
|
import { Root, HTML, BlockContent, DefinitionContent, Code, Paragraph } from "mdast"
|
||||||
import { Replace, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
|
import { Replace, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
|
||||||
import { slug as slugAnchor } from "github-slugger"
|
import { slug as slugAnchor } from "github-slugger"
|
||||||
import rehypeRaw from "rehype-raw"
|
import rehypeRaw from "rehype-raw"
|
||||||
@ -113,6 +113,7 @@ const highlightRegex = new RegExp(/==(.+)==/, "g")
|
|||||||
const commentRegex = new RegExp(/%%(.+)%%/, "g")
|
const commentRegex = new RegExp(/%%(.+)%%/, "g")
|
||||||
// from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
|
// from https://github.com/escwxyz/remark-obsidian-callout/blob/main/src/index.ts
|
||||||
const calloutRegex = new RegExp(/^\[\!(\w+)\]([+-]?)/)
|
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
|
// (?:^| ) -> non-capturing group, tag should start be separated by a space or be the start of the line
|
||||||
// #(\w+) -> tag itself is # followed by a string of alpha-numeric characters
|
// #(\w+) -> tag itself is # followed by a string of alpha-numeric characters
|
||||||
const tagRegex = new RegExp(/(?:^| )#([\w-_\/]+)/, "g")
|
const tagRegex = new RegExp(/(?:^| )#([\w-_\/]+)/, "g")
|
||||||
@ -122,14 +123,13 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
|
|||||||
) => {
|
) => {
|
||||||
const opts = { ...defaultOptions, ...userOpts }
|
const opts = { ...defaultOptions, ...userOpts }
|
||||||
|
|
||||||
const findAndReplace = opts.enableInHtmlEmbed
|
const mdastToHtml = (ast: PhrasingContent | Paragraph) => {
|
||||||
? (tree: Root, regex: RegExp, replace?: Replace | null | undefined) => {
|
|
||||||
if (replace) {
|
|
||||||
const mdastToHtml = (ast: PhrasingContent) => {
|
|
||||||
const hast = toHast(ast, { allowDangerousHtml: true })!
|
const hast = toHast(ast, { allowDangerousHtml: true })!
|
||||||
return toHtml(hast, { allowDangerousHtml: true })
|
return toHtml(hast, { allowDangerousHtml: true })
|
||||||
}
|
}
|
||||||
|
const findAndReplace = opts.enableInHtmlEmbed
|
||||||
|
? (tree: Root, regex: RegExp, replace?: Replace | null | undefined) => {
|
||||||
|
if (replace) {
|
||||||
visit(tree, "html", (node: HTML) => {
|
visit(tree, "html", (node: HTML) => {
|
||||||
if (typeof replace === "string") {
|
if (typeof replace === "string") {
|
||||||
node.value = node.value.replace(regex, replace)
|
node.value = node.value.replace(regex, replace)
|
||||||
@ -157,10 +157,19 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
|
|||||||
return {
|
return {
|
||||||
name: "ObsidianFlavoredMarkdown",
|
name: "ObsidianFlavoredMarkdown",
|
||||||
textTransform(_ctx, src) {
|
textTransform(_ctx, src) {
|
||||||
|
// pre-transform blockquotes
|
||||||
|
if (opts.callouts) {
|
||||||
|
src = src.toString()
|
||||||
|
src = src.replaceAll(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)
|
// pre-transform wikilinks (fix anchors to things that may contain illegal syntax e.g. codeblocks, latex)
|
||||||
if (opts.wikilinks) {
|
if (opts.wikilinks) {
|
||||||
src = src.toString()
|
src = src.toString()
|
||||||
return src.replaceAll(wikilinkRegex, (value, ...capture) => {
|
src = src.replaceAll(wikilinkRegex, (value, ...capture) => {
|
||||||
const [rawFp, rawHeader, rawAlias] = capture
|
const [rawFp, rawHeader, rawAlias] = capture
|
||||||
const fp = rawFp ?? ""
|
const fp = rawFp ?? ""
|
||||||
const anchor = rawHeader?.trim().slice(1)
|
const anchor = rawHeader?.trim().slice(1)
|
||||||
@ -170,6 +179,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
|
|||||||
return `${embedDisplay}[[${fp}${displayAnchor}${displayAlias}]]`
|
return `${embedDisplay}[[${fp}${displayAnchor}${displayAlias}]]`
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return src
|
return src
|
||||||
},
|
},
|
||||||
markdownPlugins() {
|
markdownPlugins() {
|
||||||
@ -296,14 +306,22 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
|
|||||||
)
|
)
|
||||||
const collapse = collapseChar === "+" || collapseChar === "-"
|
const collapse = collapseChar === "+" || collapseChar === "-"
|
||||||
const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
|
const defaultState = collapseChar === "-" ? "collapsed" : "expanded"
|
||||||
const title =
|
const titleContent =
|
||||||
match.input.slice(calloutDirective.length).trim() || capitalize(calloutType)
|
match.input.slice(calloutDirective.length).trim() || capitalize(calloutType)
|
||||||
|
const titleNode: Paragraph = {
|
||||||
|
type: 'paragraph',
|
||||||
|
children: [
|
||||||
|
{type: 'text', value: titleContent + " "},
|
||||||
|
...restChildren
|
||||||
|
]
|
||||||
|
}
|
||||||
|
const title = mdastToHtml(titleNode)
|
||||||
|
|
||||||
const toggleIcon = `<svg 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" class="fold">
|
const toggleIcon = `<svg 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" class="fold">
|
||||||
<polyline points="6 9 12 15 18 9"></polyline>
|
<polyline points="6 9 12 15 18 9"></polyline>
|
||||||
</svg>`
|
</svg>`
|
||||||
|
|
||||||
const titleNode: HTML = {
|
const titleHtml: HTML = {
|
||||||
type: "html",
|
type: "html",
|
||||||
value: `<div
|
value: `<div
|
||||||
class="callout-title"
|
class="callout-title"
|
||||||
@ -314,7 +332,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
|
|||||||
</div>`,
|
</div>`,
|
||||||
}
|
}
|
||||||
|
|
||||||
const blockquoteContent: (BlockContent | DefinitionContent)[] = [titleNode]
|
const blockquoteContent: (BlockContent | DefinitionContent)[] = [titleHtml]
|
||||||
if (remainingText.length > 0) {
|
if (remainingText.length > 0) {
|
||||||
blockquoteContent.push({
|
blockquoteContent.push({
|
||||||
type: "paragraph",
|
type: "paragraph",
|
||||||
@ -323,7 +341,6 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
|
|||||||
type: "text",
|
type: "text",
|
||||||
value: remainingText,
|
value: remainingText,
|
||||||
},
|
},
|
||||||
...restChildren,
|
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -335,8 +352,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
|
|||||||
node.data = {
|
node.data = {
|
||||||
hProperties: {
|
hProperties: {
|
||||||
...(node.data?.hProperties ?? {}),
|
...(node.data?.hProperties ?? {}),
|
||||||
className: `callout ${collapse ? "is-collapsible" : ""} ${
|
className: `callout ${collapse ? "is-collapsible" : ""} ${defaultState === "collapsed" ? "is-collapsed" : ""
|
||||||
defaultState === "collapsed" ? "is-collapsed" : ""
|
|
||||||
}`,
|
}`,
|
||||||
"data-callout": calloutType,
|
"data-callout": calloutType,
|
||||||
"data-callout-fold": collapse,
|
"data-callout-fold": collapse,
|
||||||
|
@ -92,6 +92,11 @@
|
|||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
& > .callout-title-inner > p {
|
||||||
|
color: var(--color);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.callout-icon {
|
.callout-icon {
|
||||||
|
Loading…
Reference in New Issue
Block a user