0.1.12

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@doc-utils/markdown2html",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@doc-utils/markdown2html",
-      "version": "0.1.9",
+      "version": "0.1.12",
       "dependencies": {
         "bytefield-svg": "^1.6.1",
         "dompurify": "^2.3.6",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@doc-utils/markdown2html",
-  "version": "0.1.9",
+  "version": "0.1.12",
   "publishConfig": {
     "registry": "https://gitea.home.jbrumond.me/api/packages/doc-utils/npm/"
   },

src/pikchr.ts

@@ -6,12 +6,12 @@ export function post_process_pikchr_svg(svg: string, size?: string) {
 
 	// text
 	for (const [ color, regex ] of Object.entries(text_regex)) {
-		svg = svg.replace(regex, `<text fill="${text_css_vars[color]}"`);
+		svg = svg.replace(regex, (_, $1) => `<text${$1}fill="${text_css_vars[color]}"`);
 	}
 
 	// shape fill
 	for (const [ color, regex ] of Object.entries(shape_fill_regex)) {
-		svg = svg.replace(regex, `<path style="fill:${fill_css_vars[color]}`);
+		svg = svg.replace(regex, (_, $1) => `<path${$1}style="fill:${fill_css_vars[color]}`);
 	}
 
 	// arrow heads
@@ -45,106 +45,106 @@ type CSSVarColor
 	;
 
 const text_regex: Record<CSSVarColor, RegExp> = {
-	black: /\b<text fill="rgb\(0,0,0\)"/gi,
-	red:   /\b<text fill="rgb\(255,0,0\)"/gi,
-	orange: /\b<text fill="rgb\(255,165,0\)"/gi,
-	yellow: /\b<text fill="rgb\(255,255,0\)"/gi,
-	green: /\b<text fill="rgb\(0,128,0\)"/gi,
-	teal: /\b<text fill="rgb\(0,128,128\)"/gi,
-	pink: /\b<text fill="rgb\(255,192,203\)"/gi,
-	purple: /\b<text fill="rgb\(128,0,128\)"/gi,
-	blue: /\b<text fill="rgb\(0,0,255\)"/gi,
-	indigo: /\b<text fill="rgb\(75,0,130\)"/gi,
-	magenta: /\b<text fill="rgb\(255,0,255\)"/gi,
-	brown: /\b<text fill="rgb\(165,42,42\)"/gi,
+	black:   /<text( | [^>]+ )fill="rgb\(0,0,0\)"/gi,
+	red:     /<text( | [^>]+ )fill="rgb\(255,0,0\)"/gi,
+	orange:  /<text( | [^>]+ )fill="rgb\(255,165,0\)"/gi,
+	yellow:  /<text( | [^>]+ )fill="rgb\(255,255,0\)"/gi,
+	green:   /<text( | [^>]+ )fill="rgb\(0,128,0\)"/gi,
+	teal:    /<text( | [^>]+ )fill="rgb\(0,128,128\)"/gi,
+	pink:    /<text( | [^>]+ )fill="rgb\(255,192,203\)"/gi,
+	purple:  /<text( | [^>]+ )fill="rgb\(128,0,128\)"/gi,
+	blue:    /<text( | [^>]+ )fill="rgb\(0,0,255\)"/gi,
+	indigo:  /<text( | [^>]+ )fill="rgb\(75,0,130\)"/gi,
+	magenta: /<text( | [^>]+ )fill="rgb\(255,0,255\)"/gi,
+	brown:   /<text( | [^>]+ )fill="rgb\(165,42,42\)"/gi,
 };
 
 const line_regex: Record<CSSVarColor, RegExp> = {
-	black: /stroke:rgb\(0,0,0\)/gi,
-	red:   /stroke:rgb\(255,0,0\)/gi,
-	orange: /stroke:rgb\(255,165,0\)/gi,
-	yellow: /stroke:rgb\(255,255,0\)/gi,
-	green: /stroke:rgb\(0,128,0\)/gi,
-	teal: /stroke:rgb\(0,128,128\)/gi,
-	pink: /stroke:rgb\(255,192,203\)/gi,
-	purple: /stroke:rgb\(128,0,128\)/gi,
-	blue: /stroke:rgb\(0,0,255\)/gi,
-	indigo: /stroke:rgb\(75,0,130\)/gi,
+	black:   /stroke:rgb\(0,0,0\)/gi,
+	red:     /stroke:rgb\(255,0,0\)/gi,
+	orange:  /stroke:rgb\(255,165,0\)/gi,
+	yellow:  /stroke:rgb\(255,255,0\)/gi,
+	green:   /stroke:rgb\(0,128,0\)/gi,
+	teal:    /stroke:rgb\(0,128,128\)/gi,
+	pink:    /stroke:rgb\(255,192,203\)/gi,
+	purple:  /stroke:rgb\(128,0,128\)/gi,
+	blue:    /stroke:rgb\(0,0,255\)/gi,
+	indigo:  /stroke:rgb\(75,0,130\)/gi,
 	magenta: /stroke:rgb\(255,0,255\)/gi,
-	brown: /stroke:rgb\(165,42,42\)/gi,
+	brown:   /stroke:rgb\(165,42,42\)/gi,
 };
 
 const shape_fill_regex = {
-	black: /\b<path style="fill:rgb\(0,0,0\)/gi,
-	red:   /\b<path style="fill:rgb\(255,0,0\)/gi,
-	orange: /\b<path style="fill:rgb\(255,165,0\)/gi,
-	yellow: /\b<path style="fill:rgb\(255,255,0\)/gi,
-	green: /\b<path style="fill:rgb\(0,128,0\)/gi,
-	teal: /\b<path style="fill:rgb\(0,128,128\)/gi,
-	pink: /\b<path style="fill:rgb\(255,192,203\)/gi,
-	purple: /\b<path style="fill:rgb\(128,0,128\)/gi,
-	blue: /\b<path style="fill:rgb\(0,0,255\)/gi,
-	indigo: /\b<path style="fill:rgb\(75,0,130\)/gi,
-	magenta: /\b<path style="fill:rgb\(255,0,255\)/gi,
-	brown: /\b<path style="fill:rgb\(165,42,42\)/gi,
+	black:    /<path( | [^>]+ )style="fill:rgb\(0,0,0\)/gi,
+	red:      /<path( | [^>]+ )style="fill:rgb\(255,0,0\)/gi,
+	orange:   /<path( | [^>]+ )style="fill:rgb\(255,165,0\)/gi,
+	yellow:   /<path( | [^>]+ )style="fill:rgb\(255,255,0\)/gi,
+	green:    /<path( | [^>]+ )style="fill:rgb\(0,128,0\)/gi,
+	teal:     /<path( | [^>]+ )style="fill:rgb\(0,128,128\)/gi,
+	pink:     /<path( | [^>]+ )style="fill:rgb\(255,192,203\)/gi,
+	purple:   /<path( | [^>]+ )style="fill:rgb\(128,0,128\)/gi,
+	blue:     /<path( | [^>]+ )style="fill:rgb\(0,0,255\)/gi,
+	indigo:   /<path( | [^>]+ )style="fill:rgb\(75,0,130\)/gi,
+	magenta:  /<path( | [^>]+ )style="fill:rgb\(255,0,255\)/gi,
+	brown:    /<path( | [^>]+ )style="fill:rgb\(165,42,42\)/gi,
 }
 
 const arrow_head_regex: Record<CSSVarColor, RegExp> = {
-	black: /fill:rgb\(0,0,0\)/gi,
-	red:   /fill:rgb\(255,0,0\)/gi,
-	orange: /fill:rgb:\(255,165,0\)/gi,
-	yellow: /fill:rgb:\(255,255,0\)/gi,
-	green: /fill:rgb:\(0,128,0\)/gi,
-	teal: /fill:rgb:\(0,128,128\)/gi,
-	pink: /fill:rgb:\(255,192,203\)/gi,
-	purple: /fill:rgb:\(128,0,128\)/gi,
-	blue: /fill:rgb:\(0,0,255\)/gi,
-	indigo: /fill:rgb:\(75,0,130\)/gi,
-	magenta: /fill:rgb:\(255,0,255\)/gi,
-	brown: /fill:rgb:\(165,42,42\)/gi,
+	black:    /fill:rgb\(0,0,0\)/gi,
+	red:      /fill:rgb\(255,0,0\)/gi,
+	orange:   /fill:rgb\(255,165,0\)/gi,
+	yellow:   /fill:rgb\(255,255,0\)/gi,
+	green:    /fill:rgb\(0,128,0\)/gi,
+	teal:     /fill:rgb\(0,128,128\)/gi,
+	pink:     /fill:rgb\(255,192,203\)/gi,
+	purple:   /fill:rgb\(128,0,128\)/gi,
+	blue:     /fill:rgb\(0,0,255\)/gi,
+	indigo:   /fill:rgb\(75,0,130\)/gi,
+	magenta:  /fill:rgb\(255,0,255\)/gi,
+	brown:    /fill:rgb\(165,42,42\)/gi,
 };
 
 const line_css_vars: Record<CSSVarColor, string> = {
-	black: 'var(--theme-line, currentcolor)',
-	red: 'var(--theme-chart-shape-red-line, currentcolor)',
-	orange: 'var(--theme-chart-shape-orange-line, currentcolor)',
-	yellow: 'var(--theme-chart-shape-yellow-line, currentcolor)',
-	green: 'var(--theme-chart-shape-green-line, currentcolor)',
-	teal: 'var(--theme-chart-shape-teal-line, currentcolor)',
-	pink: 'var(--theme-chart-shape-pink-line, currentcolor)',
-	purple: 'var(--theme-chart-shape-purple-line, currentcolor)',
-	blue: 'var(--theme-chart-shape-blue-line, currentcolor)',
-	indigo: 'var(--theme-chart-shape-indigo-line, currentcolor)',
-	magenta: 'var(--theme-chart-shape-magenta-line, currentcolor)',
-	brown: 'var(--theme-chart-shape-brown-line, currentcolor)',
+	black:    'var(--theme-line, currentcolor)',
+	red:      'var(--theme-chart-shape-red-line, currentcolor)',
+	orange:   'var(--theme-chart-shape-orange-line, currentcolor)',
+	yellow:   'var(--theme-chart-shape-yellow-line, currentcolor)',
+	green:    'var(--theme-chart-shape-green-line, currentcolor)',
+	teal:     'var(--theme-chart-shape-teal-line, currentcolor)',
+	pink:     'var(--theme-chart-shape-pink-line, currentcolor)',
+	purple:   'var(--theme-chart-shape-purple-line, currentcolor)',
+	blue:     'var(--theme-chart-shape-blue-line, currentcolor)',
+	indigo:   'var(--theme-chart-shape-indigo-line, currentcolor)',
+	magenta:  'var(--theme-chart-shape-magenta-line, currentcolor)',
+	brown:    'var(--theme-chart-shape-brown-line, currentcolor)',
 };
 
 const text_css_vars: Record<CSSVarColor, string> = {
-	black: 'var(--theme-text-body, currentcolor)',
-	red: 'var(--theme-chart-shape-red-line, currentcolor)',
-	orange: 'var(--theme-chart-shape-orange-line, currentcolor)',
-	yellow: 'var(--theme-chart-shape-yellow-line, currentcolor)',
-	green: 'var(--theme-chart-shape-green-line, currentcolor)',
-	teal: 'var(--theme-chart-shape-teal-line, currentcolor)',
-	pink: 'var(--theme-chart-shape-pink-line, currentcolor)',
-	purple: 'var(--theme-chart-shape-purple-line, currentcolor)',
-	blue: 'var(--theme-chart-shape-blue-line, currentcolor)',
-	indigo: 'var(--theme-chart-shape-indigo-line, currentcolor)',
-	magenta: 'var(--theme-chart-shape-magenta-line, currentcolor)',
-	brown: 'var(--theme-chart-shape-brown-line, currentcolor)',
+	black:    'var(--theme-text-body, currentcolor)',
+	red:      'var(--theme-chart-shape-red-line, currentcolor)',
+	orange:   'var(--theme-chart-shape-orange-line, currentcolor)',
+	yellow:   'var(--theme-chart-shape-yellow-line, currentcolor)',
+	green:    'var(--theme-chart-shape-green-line, currentcolor)',
+	teal:     'var(--theme-chart-shape-teal-line, currentcolor)',
+	pink:     'var(--theme-chart-shape-pink-line, currentcolor)',
+	purple:   'var(--theme-chart-shape-purple-line, currentcolor)',
+	blue:     'var(--theme-chart-shape-blue-line, currentcolor)',
+	indigo:   'var(--theme-chart-shape-indigo-line, currentcolor)',
+	magenta:  'var(--theme-chart-shape-magenta-line, currentcolor)',
+	brown:    'var(--theme-chart-shape-brown-line, currentcolor)',
 };
 
 const fill_css_vars: Record<CSSVarColor, string> = {
-	black: 'var(--theme-chart-shape-black-fill, transparent)',
-	red: 'var(--theme-chart-shape-red-fill, transparent)',
-	orange: 'var(--theme-chart-shape-orange-fill, transparent)',
-	yellow: 'var(--theme-chart-shape-yellow-fill, transparent)',
-	green: 'var(--theme-chart-shape-green-fill, transparent)',
-	teal: 'var(--theme-chart-shape-teal-fill, transparent)',
-	pink: 'var(--theme-chart-shape-pink-fill, transparent)',
-	purple: 'var(--theme-chart-shape-purple-fill, transparent)',
-	blue: 'var(--theme-chart-shape-blue-fill, transparent)',
-	indigo: 'var(--theme-chart-shape-indigo-fill, transparent)',
-	magenta: 'var(--theme-chart-shape-magenta-fill, transparent)',
-	brown: 'var(--theme-chart-shape-brown-fill, transparent)',
+	black:    'var(--theme-bg-heavy, transparent)',
+	red:      'var(--theme-chart-shape-red-fill, transparent)',
+	orange:   'var(--theme-chart-shape-orange-fill, transparent)',
+	yellow:   'var(--theme-chart-shape-yellow-fill, transparent)',
+	green:    'var(--theme-chart-shape-green-fill, transparent)',
+	teal:     'var(--theme-chart-shape-teal-fill, transparent)',
+	pink:     'var(--theme-chart-shape-pink-fill, transparent)',
+	purple:   'var(--theme-chart-shape-purple-fill, transparent)',
+	blue:     'var(--theme-chart-shape-blue-fill, transparent)',
+	indigo:   'var(--theme-chart-shape-indigo-fill, transparent)',
+	magenta:  'var(--theme-chart-shape-magenta-fill, transparent)',
+	brown:    'var(--theme-chart-shape-brown-fill, transparent)',
 };