jupyterlab_github_markdown_alerts_extension 1.0.17 → 1.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.d.ts +1 -0
- package/lib/index.js +4 -120
- package/lib/utils.d.ts +24 -0
- package/lib/utils.js +120 -0
- package/package.json +1 -1
- package/src/__tests__/jupyterlab_github_markdown_alerts_extension.spec.ts +224 -4
- package/src/index.ts +4 -175
- package/src/utils.ts +179 -0
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -1,125 +1,9 @@
|
|
|
1
1
|
import { IMarkdownParser } from '@jupyterlab/rendermime';
|
|
2
2
|
import { ISettingRegistry } from '@jupyterlab/settingregistry';
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
iconClass: 'octicon-info',
|
|
8
|
-
iconColor: '#0969da',
|
|
9
|
-
iconColorDark: '#2f81f7',
|
|
10
|
-
iconPath: 'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
11
|
-
},
|
|
12
|
-
TIP: {
|
|
13
|
-
className: 'markdown-alert-tip',
|
|
14
|
-
title: 'Tip',
|
|
15
|
-
iconClass: 'octicon-light-bulb',
|
|
16
|
-
iconColor: '#1a7f37',
|
|
17
|
-
iconColorDark: '#3fb950',
|
|
18
|
-
iconPath: 'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
|
|
19
|
-
},
|
|
20
|
-
IMPORTANT: {
|
|
21
|
-
className: 'markdown-alert-important',
|
|
22
|
-
title: 'Important',
|
|
23
|
-
iconClass: 'octicon-report',
|
|
24
|
-
iconColor: '#8250df',
|
|
25
|
-
iconColorDark: '#a371f7',
|
|
26
|
-
iconPath: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
27
|
-
},
|
|
28
|
-
WARNING: {
|
|
29
|
-
className: 'markdown-alert-warning',
|
|
30
|
-
title: 'Warning',
|
|
31
|
-
iconClass: 'octicon-alert',
|
|
32
|
-
iconColor: '#9a6700',
|
|
33
|
-
iconColorDark: '#d29922',
|
|
34
|
-
iconPath: 'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
35
|
-
},
|
|
36
|
-
CAUTION: {
|
|
37
|
-
className: 'markdown-alert-caution',
|
|
38
|
-
title: 'Caution',
|
|
39
|
-
iconClass: 'octicon-stop',
|
|
40
|
-
iconColor: '#cf222e',
|
|
41
|
-
iconColorDark: '#f85149',
|
|
42
|
-
iconPath: 'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
43
|
-
}
|
|
44
|
-
};
|
|
45
|
-
/**
|
|
46
|
-
* Create SVG icon element as data URI with both light and dark theme versions
|
|
47
|
-
*/
|
|
48
|
-
function createIcon(iconPath, iconClass, iconColor, iconColorDark) {
|
|
49
|
-
// Create light theme icon
|
|
50
|
-
const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
|
|
51
|
-
const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
|
|
52
|
-
// Create dark theme icon
|
|
53
|
-
const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
|
|
54
|
-
const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
|
|
55
|
-
return (`<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
|
|
56
|
-
`<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`);
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Process markdown text to convert GitHub-style alerts
|
|
60
|
-
*/
|
|
61
|
-
function processAlerts(text) {
|
|
62
|
-
const lines = text.split('\n');
|
|
63
|
-
const result = [];
|
|
64
|
-
let i = 0;
|
|
65
|
-
let inCodeBlock = false;
|
|
66
|
-
while (i < lines.length) {
|
|
67
|
-
const line = lines[i];
|
|
68
|
-
// Track code blocks (both ``` and ~~~)
|
|
69
|
-
if (line.trim().match(/^```|^~~~/)) {
|
|
70
|
-
inCodeBlock = !inCodeBlock;
|
|
71
|
-
result.push(line);
|
|
72
|
-
i++;
|
|
73
|
-
continue;
|
|
74
|
-
}
|
|
75
|
-
// Skip alert processing inside code blocks
|
|
76
|
-
if (inCodeBlock) {
|
|
77
|
-
result.push(line);
|
|
78
|
-
i++;
|
|
79
|
-
continue;
|
|
80
|
-
}
|
|
81
|
-
const alertMatch = line.match(/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/);
|
|
82
|
-
if (alertMatch) {
|
|
83
|
-
const alertType = alertMatch[1];
|
|
84
|
-
const contentLines = [];
|
|
85
|
-
i++;
|
|
86
|
-
while (i < lines.length && lines[i].startsWith('>')) {
|
|
87
|
-
const content = lines[i].replace(/^>\s?/, '');
|
|
88
|
-
if (content) {
|
|
89
|
-
contentLines.push(content);
|
|
90
|
-
}
|
|
91
|
-
i++;
|
|
92
|
-
}
|
|
93
|
-
if (contentLines.length > 0) {
|
|
94
|
-
const content = contentLines.join('\n\n');
|
|
95
|
-
// Use HTML comments as markers that will survive markdown processing
|
|
96
|
-
result.push(`<!--ALERT_START:${alertType}-->`, content, `<!--ALERT_END:${alertType}-->`);
|
|
97
|
-
continue;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
result.push(line);
|
|
101
|
-
i++;
|
|
102
|
-
}
|
|
103
|
-
return result.join('\n');
|
|
104
|
-
}
|
|
105
|
-
/**
|
|
106
|
-
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
107
|
-
*/
|
|
108
|
-
function postProcessAlerts(html, showBackgrounds) {
|
|
109
|
-
// Replace alert markers with proper HTML structure
|
|
110
|
-
const result = html.replace(/<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g, (match, alertType, content) => {
|
|
111
|
-
const config = ALERT_TYPES[alertType];
|
|
112
|
-
const icon = createIcon(config.iconPath, config.iconClass, config.iconColor, config.iconColorDark);
|
|
113
|
-
const backgroundClass = showBackgrounds
|
|
114
|
-
? ' markdown-alert-with-backgrounds'
|
|
115
|
-
: '';
|
|
116
|
-
return (`<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
|
|
117
|
-
`<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
|
|
118
|
-
content +
|
|
119
|
-
'</div>');
|
|
120
|
-
});
|
|
121
|
-
return result;
|
|
122
|
-
}
|
|
3
|
+
// Import utility functions from separate module (allows testing without JupyterLab deps)
|
|
4
|
+
import { processAlerts, postProcessAlerts } from './utils';
|
|
5
|
+
// Re-export for backwards compatibility
|
|
6
|
+
export { processAlerts, postProcessAlerts } from './utils';
|
|
123
7
|
/**
|
|
124
8
|
* Initialization data for the jupyterlab_github_markdown_alerts_extension extension.
|
|
125
9
|
*/
|
package/lib/utils.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Alert type configuration
|
|
3
|
+
*/
|
|
4
|
+
export interface IAlertConfig {
|
|
5
|
+
className: string;
|
|
6
|
+
title: string;
|
|
7
|
+
iconPath: string;
|
|
8
|
+
iconClass: string;
|
|
9
|
+
iconColor: string;
|
|
10
|
+
iconColorDark: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const ALERT_TYPES: Record<string, IAlertConfig>;
|
|
13
|
+
/**
|
|
14
|
+
* Create SVG icon element as data URI with both light and dark theme versions
|
|
15
|
+
*/
|
|
16
|
+
export declare function createIcon(iconPath: string, iconClass: string, iconColor: string, iconColorDark: string): string;
|
|
17
|
+
/**
|
|
18
|
+
* Process markdown text to convert GitHub-style alerts
|
|
19
|
+
*/
|
|
20
|
+
export declare function processAlerts(text: string): string;
|
|
21
|
+
/**
|
|
22
|
+
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
23
|
+
*/
|
|
24
|
+
export declare function postProcessAlerts(html: string, showBackgrounds: boolean): string;
|
package/lib/utils.js
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
export const ALERT_TYPES = {
|
|
2
|
+
NOTE: {
|
|
3
|
+
className: 'markdown-alert-note',
|
|
4
|
+
title: 'Note',
|
|
5
|
+
iconClass: 'octicon-info',
|
|
6
|
+
iconColor: '#0969da',
|
|
7
|
+
iconColorDark: '#2f81f7',
|
|
8
|
+
iconPath: 'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
9
|
+
},
|
|
10
|
+
TIP: {
|
|
11
|
+
className: 'markdown-alert-tip',
|
|
12
|
+
title: 'Tip',
|
|
13
|
+
iconClass: 'octicon-light-bulb',
|
|
14
|
+
iconColor: '#1a7f37',
|
|
15
|
+
iconColorDark: '#3fb950',
|
|
16
|
+
iconPath: 'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
|
|
17
|
+
},
|
|
18
|
+
IMPORTANT: {
|
|
19
|
+
className: 'markdown-alert-important',
|
|
20
|
+
title: 'Important',
|
|
21
|
+
iconClass: 'octicon-report',
|
|
22
|
+
iconColor: '#8250df',
|
|
23
|
+
iconColorDark: '#a371f7',
|
|
24
|
+
iconPath: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
25
|
+
},
|
|
26
|
+
WARNING: {
|
|
27
|
+
className: 'markdown-alert-warning',
|
|
28
|
+
title: 'Warning',
|
|
29
|
+
iconClass: 'octicon-alert',
|
|
30
|
+
iconColor: '#9a6700',
|
|
31
|
+
iconColorDark: '#d29922',
|
|
32
|
+
iconPath: 'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
33
|
+
},
|
|
34
|
+
CAUTION: {
|
|
35
|
+
className: 'markdown-alert-caution',
|
|
36
|
+
title: 'Caution',
|
|
37
|
+
iconClass: 'octicon-stop',
|
|
38
|
+
iconColor: '#cf222e',
|
|
39
|
+
iconColorDark: '#f85149',
|
|
40
|
+
iconPath: 'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Create SVG icon element as data URI with both light and dark theme versions
|
|
45
|
+
*/
|
|
46
|
+
export function createIcon(iconPath, iconClass, iconColor, iconColorDark) {
|
|
47
|
+
// Create light theme icon
|
|
48
|
+
const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
|
|
49
|
+
const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
|
|
50
|
+
// Create dark theme icon
|
|
51
|
+
const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
|
|
52
|
+
const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
|
|
53
|
+
return (`<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
|
|
54
|
+
`<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`);
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Process markdown text to convert GitHub-style alerts
|
|
58
|
+
*/
|
|
59
|
+
export function processAlerts(text) {
|
|
60
|
+
const lines = text.split('\n');
|
|
61
|
+
const result = [];
|
|
62
|
+
let i = 0;
|
|
63
|
+
let inCodeBlock = false;
|
|
64
|
+
while (i < lines.length) {
|
|
65
|
+
const line = lines[i];
|
|
66
|
+
// Track code blocks (both ``` and ~~~)
|
|
67
|
+
if (line.trim().match(/^```|^~~~/)) {
|
|
68
|
+
inCodeBlock = !inCodeBlock;
|
|
69
|
+
result.push(line);
|
|
70
|
+
i++;
|
|
71
|
+
continue;
|
|
72
|
+
}
|
|
73
|
+
// Skip alert processing inside code blocks
|
|
74
|
+
if (inCodeBlock) {
|
|
75
|
+
result.push(line);
|
|
76
|
+
i++;
|
|
77
|
+
continue;
|
|
78
|
+
}
|
|
79
|
+
const alertMatch = line.match(/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/);
|
|
80
|
+
if (alertMatch) {
|
|
81
|
+
const alertType = alertMatch[1];
|
|
82
|
+
const contentLines = [];
|
|
83
|
+
i++;
|
|
84
|
+
while (i < lines.length && lines[i].startsWith('>')) {
|
|
85
|
+
const content = lines[i].replace(/^>\s?/, '');
|
|
86
|
+
contentLines.push(content); // Keep empty lines for paragraph separation
|
|
87
|
+
i++;
|
|
88
|
+
}
|
|
89
|
+
if (contentLines.length > 0) {
|
|
90
|
+
// Use single newlines to preserve table structure
|
|
91
|
+
// Empty lines in contentLines will still create paragraph breaks
|
|
92
|
+
const content = contentLines.join('\n');
|
|
93
|
+
// Use HTML comments as markers that will survive markdown processing
|
|
94
|
+
result.push(`<!--ALERT_START:${alertType}-->`, content, `<!--ALERT_END:${alertType}-->`);
|
|
95
|
+
continue;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
result.push(line);
|
|
99
|
+
i++;
|
|
100
|
+
}
|
|
101
|
+
return result.join('\n');
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
105
|
+
*/
|
|
106
|
+
export function postProcessAlerts(html, showBackgrounds) {
|
|
107
|
+
// Replace alert markers with proper HTML structure
|
|
108
|
+
const result = html.replace(/<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g, (match, alertType, content) => {
|
|
109
|
+
const config = ALERT_TYPES[alertType];
|
|
110
|
+
const icon = createIcon(config.iconPath, config.iconClass, config.iconColor, config.iconColorDark);
|
|
111
|
+
const backgroundClass = showBackgrounds
|
|
112
|
+
? ' markdown-alert-with-backgrounds'
|
|
113
|
+
: '';
|
|
114
|
+
return (`<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
|
|
115
|
+
`<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
|
|
116
|
+
content +
|
|
117
|
+
'</div>');
|
|
118
|
+
});
|
|
119
|
+
return result;
|
|
120
|
+
}
|
package/package.json
CHANGED
|
@@ -1,9 +1,229 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Unit tests for GitHub Markdown Alerts Extension
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
import { processAlerts, postProcessAlerts } from '../utils';
|
|
6
|
+
|
|
7
|
+
describe('processAlerts', () => {
|
|
8
|
+
describe('basic alert detection', () => {
|
|
9
|
+
it('should convert NOTE alert syntax', () => {
|
|
10
|
+
const input = `> [!NOTE]
|
|
11
|
+
> This is a note.`;
|
|
12
|
+
const result = processAlerts(input);
|
|
13
|
+
expect(result).toContain('<!--ALERT_START:NOTE-->');
|
|
14
|
+
expect(result).toContain('This is a note.');
|
|
15
|
+
expect(result).toContain('<!--ALERT_END:NOTE-->');
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
it('should convert TIP alert syntax', () => {
|
|
19
|
+
const input = `> [!TIP]
|
|
20
|
+
> This is a tip.`;
|
|
21
|
+
const result = processAlerts(input);
|
|
22
|
+
expect(result).toContain('<!--ALERT_START:TIP-->');
|
|
23
|
+
expect(result).toContain('This is a tip.');
|
|
24
|
+
expect(result).toContain('<!--ALERT_END:TIP-->');
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('should convert IMPORTANT alert syntax', () => {
|
|
28
|
+
const input = `> [!IMPORTANT]
|
|
29
|
+
> This is important.`;
|
|
30
|
+
const result = processAlerts(input);
|
|
31
|
+
expect(result).toContain('<!--ALERT_START:IMPORTANT-->');
|
|
32
|
+
expect(result).toContain('This is important.');
|
|
33
|
+
expect(result).toContain('<!--ALERT_END:IMPORTANT-->');
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
it('should convert WARNING alert syntax', () => {
|
|
37
|
+
const input = `> [!WARNING]
|
|
38
|
+
> This is a warning.`;
|
|
39
|
+
const result = processAlerts(input);
|
|
40
|
+
expect(result).toContain('<!--ALERT_START:WARNING-->');
|
|
41
|
+
expect(result).toContain('This is a warning.');
|
|
42
|
+
expect(result).toContain('<!--ALERT_END:WARNING-->');
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
it('should convert CAUTION alert syntax', () => {
|
|
46
|
+
const input = `> [!CAUTION]
|
|
47
|
+
> This is a caution.`;
|
|
48
|
+
const result = processAlerts(input);
|
|
49
|
+
expect(result).toContain('<!--ALERT_START:CAUTION-->');
|
|
50
|
+
expect(result).toContain('This is a caution.');
|
|
51
|
+
expect(result).toContain('<!--ALERT_END:CAUTION-->');
|
|
52
|
+
});
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
describe('table handling', () => {
|
|
56
|
+
it('should preserve table structure with consecutive rows', () => {
|
|
57
|
+
const input = `> [!NOTE]
|
|
58
|
+
> | Header 1 | Header 2 |
|
|
59
|
+
> |----------|----------|
|
|
60
|
+
> | Cell 1 | Cell 2 |`;
|
|
61
|
+
const result = processAlerts(input);
|
|
62
|
+
// Tables require consecutive lines - single newlines between rows
|
|
63
|
+
expect(result).toContain('| Header 1 | Header 2 |\n|----------|----------|\n| Cell 1 | Cell 2 |');
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it('should not insert blank lines between table rows', () => {
|
|
67
|
+
const input = `> [!WARNING]
|
|
68
|
+
> | A | B |
|
|
69
|
+
> |---|---|
|
|
70
|
+
> | 1 | 2 |
|
|
71
|
+
> | 3 | 4 |`;
|
|
72
|
+
const result = processAlerts(input);
|
|
73
|
+
// Verify no double newlines between table rows
|
|
74
|
+
expect(result).not.toMatch(/\|[^\n]*\n\n\|/);
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
describe('paragraph separation', () => {
|
|
79
|
+
it('should preserve empty lines for paragraph separation', () => {
|
|
80
|
+
const input = `> [!NOTE]
|
|
81
|
+
> First paragraph.
|
|
82
|
+
>
|
|
83
|
+
> Second paragraph.`;
|
|
84
|
+
const result = processAlerts(input);
|
|
85
|
+
// Empty line in original should create paragraph break
|
|
86
|
+
expect(result).toContain('First paragraph.\n\nSecond paragraph.');
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
it('should handle multiple paragraphs', () => {
|
|
90
|
+
const input = `> [!TIP]
|
|
91
|
+
> Paragraph one.
|
|
92
|
+
>
|
|
93
|
+
> Paragraph two.
|
|
94
|
+
>
|
|
95
|
+
> Paragraph three.`;
|
|
96
|
+
const result = processAlerts(input);
|
|
97
|
+
expect(result).toContain('Paragraph one.\n\nParagraph two.\n\nParagraph three.');
|
|
98
|
+
});
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
describe('list handling', () => {
|
|
102
|
+
it('should preserve bullet list structure', () => {
|
|
103
|
+
const input = `> [!WARNING]
|
|
104
|
+
> - Item one
|
|
105
|
+
> - Item two
|
|
106
|
+
> - Item three`;
|
|
107
|
+
const result = processAlerts(input);
|
|
108
|
+
expect(result).toContain('- Item one\n- Item two\n- Item three');
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
it('should preserve numbered list structure', () => {
|
|
112
|
+
const input = `> [!NOTE]
|
|
113
|
+
> 1. First item
|
|
114
|
+
> 2. Second item
|
|
115
|
+
> 3. Third item`;
|
|
116
|
+
const result = processAlerts(input);
|
|
117
|
+
expect(result).toContain('1. First item\n2. Second item\n3. Third item');
|
|
118
|
+
});
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
describe('code block handling', () => {
|
|
122
|
+
it('should not process alerts inside backtick code blocks', () => {
|
|
123
|
+
const input = `\`\`\`markdown
|
|
124
|
+
> [!NOTE]
|
|
125
|
+
> This is inside a code block.
|
|
126
|
+
\`\`\``;
|
|
127
|
+
const result = processAlerts(input);
|
|
128
|
+
// Should not be converted to alert markers
|
|
129
|
+
expect(result).not.toContain('<!--ALERT_START:NOTE-->');
|
|
130
|
+
expect(result).toContain('> [!NOTE]');
|
|
131
|
+
});
|
|
132
|
+
|
|
133
|
+
it('should not process alerts inside tilde code blocks', () => {
|
|
134
|
+
const input = `~~~markdown
|
|
135
|
+
> [!WARNING]
|
|
136
|
+
> This is inside a code block.
|
|
137
|
+
~~~`;
|
|
138
|
+
const result = processAlerts(input);
|
|
139
|
+
expect(result).not.toContain('<!--ALERT_START:WARNING-->');
|
|
140
|
+
expect(result).toContain('> [!WARNING]');
|
|
141
|
+
});
|
|
142
|
+
|
|
143
|
+
it('should process alerts after code block ends', () => {
|
|
144
|
+
const input = `\`\`\`
|
|
145
|
+
code
|
|
146
|
+
\`\`\`
|
|
147
|
+
|
|
148
|
+
> [!NOTE]
|
|
149
|
+
> This is after the code block.`;
|
|
150
|
+
const result = processAlerts(input);
|
|
151
|
+
expect(result).toContain('<!--ALERT_START:NOTE-->');
|
|
152
|
+
expect(result).toContain('This is after the code block.');
|
|
153
|
+
});
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
describe('edge cases', () => {
|
|
157
|
+
it('should handle alert with no content', () => {
|
|
158
|
+
const input = `> [!NOTE]`;
|
|
159
|
+
const result = processAlerts(input);
|
|
160
|
+
// No content lines, should not create alert
|
|
161
|
+
expect(result).not.toContain('<!--ALERT_START');
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
it('should handle regular blockquotes (not alerts)', () => {
|
|
165
|
+
const input = `> This is a regular blockquote.
|
|
166
|
+
> It should not be converted.`;
|
|
167
|
+
const result = processAlerts(input);
|
|
168
|
+
expect(result).not.toContain('<!--ALERT_START');
|
|
169
|
+
expect(result).toContain('> This is a regular blockquote.');
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
it('should handle multiple alerts in same document', () => {
|
|
173
|
+
const input = `> [!NOTE]
|
|
174
|
+
> First alert.
|
|
175
|
+
|
|
176
|
+
Some text between.
|
|
177
|
+
|
|
178
|
+
> [!WARNING]
|
|
179
|
+
> Second alert.`;
|
|
180
|
+
const result = processAlerts(input);
|
|
181
|
+
expect(result).toContain('<!--ALERT_START:NOTE-->');
|
|
182
|
+
expect(result).toContain('<!--ALERT_END:NOTE-->');
|
|
183
|
+
expect(result).toContain('<!--ALERT_START:WARNING-->');
|
|
184
|
+
expect(result).toContain('<!--ALERT_END:WARNING-->');
|
|
185
|
+
});
|
|
186
|
+
});
|
|
187
|
+
});
|
|
188
|
+
|
|
189
|
+
describe('postProcessAlerts', () => {
|
|
190
|
+
it('should wrap alert markers with styled div', () => {
|
|
191
|
+
const input = '<!--ALERT_START:NOTE-->Content here<!--ALERT_END:NOTE-->';
|
|
192
|
+
const result = postProcessAlerts(input, false);
|
|
193
|
+
expect(result).toContain('class="markdown-alert markdown-alert-note"');
|
|
194
|
+
expect(result).toContain('class="markdown-alert-title"');
|
|
195
|
+
expect(result).toContain('Content here');
|
|
196
|
+
expect(result).toContain('</div>');
|
|
197
|
+
});
|
|
198
|
+
|
|
199
|
+
it('should add background class when showBackgrounds is true', () => {
|
|
200
|
+
const input = '<!--ALERT_START:WARNING-->Warning content<!--ALERT_END:WARNING-->';
|
|
201
|
+
const result = postProcessAlerts(input, true);
|
|
202
|
+
expect(result).toContain('markdown-alert-with-backgrounds');
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
it('should not add background class when showBackgrounds is false', () => {
|
|
206
|
+
const input = '<!--ALERT_START:TIP-->Tip content<!--ALERT_END:TIP-->';
|
|
207
|
+
const result = postProcessAlerts(input, false);
|
|
208
|
+
expect(result).not.toContain('markdown-alert-with-backgrounds');
|
|
209
|
+
});
|
|
210
|
+
|
|
211
|
+
it('should include correct title for each alert type', () => {
|
|
212
|
+
const types = ['NOTE', 'TIP', 'IMPORTANT', 'WARNING', 'CAUTION'];
|
|
213
|
+
const titles = ['Note', 'Tip', 'Important', 'Warning', 'Caution'];
|
|
214
|
+
|
|
215
|
+
types.forEach((type, index) => {
|
|
216
|
+
const input = `<!--ALERT_START:${type}-->Content<!--ALERT_END:${type}-->`;
|
|
217
|
+
const result = postProcessAlerts(input, false);
|
|
218
|
+
expect(result).toContain(`>${titles[index]}</p>`);
|
|
219
|
+
});
|
|
220
|
+
});
|
|
221
|
+
|
|
222
|
+
it('should include icon images for light and dark themes', () => {
|
|
223
|
+
const input = '<!--ALERT_START:NOTE-->Content<!--ALERT_END:NOTE-->';
|
|
224
|
+
const result = postProcessAlerts(input, false);
|
|
225
|
+
expect(result).toContain('class="octicon octicon-info octicon-light');
|
|
226
|
+
expect(result).toContain('class="octicon octicon-info octicon-dark');
|
|
227
|
+
expect(result).toContain('data:image/svg+xml;base64');
|
|
8
228
|
});
|
|
9
229
|
});
|
package/src/index.ts
CHANGED
|
@@ -6,182 +6,11 @@ import {
|
|
|
6
6
|
import { IMarkdownParser } from '@jupyterlab/rendermime';
|
|
7
7
|
import { ISettingRegistry } from '@jupyterlab/settingregistry';
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
*/
|
|
12
|
-
interface IAlertConfig {
|
|
13
|
-
className: string;
|
|
14
|
-
title: string;
|
|
15
|
-
iconPath: string;
|
|
16
|
-
iconClass: string;
|
|
17
|
-
iconColor: string;
|
|
18
|
-
iconColorDark: string;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const ALERT_TYPES: Record<string, IAlertConfig> = {
|
|
22
|
-
NOTE: {
|
|
23
|
-
className: 'markdown-alert-note',
|
|
24
|
-
title: 'Note',
|
|
25
|
-
iconClass: 'octicon-info',
|
|
26
|
-
iconColor: '#0969da',
|
|
27
|
-
iconColorDark: '#2f81f7',
|
|
28
|
-
iconPath:
|
|
29
|
-
'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
30
|
-
},
|
|
31
|
-
TIP: {
|
|
32
|
-
className: 'markdown-alert-tip',
|
|
33
|
-
title: 'Tip',
|
|
34
|
-
iconClass: 'octicon-light-bulb',
|
|
35
|
-
iconColor: '#1a7f37',
|
|
36
|
-
iconColorDark: '#3fb950',
|
|
37
|
-
iconPath:
|
|
38
|
-
'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
|
|
39
|
-
},
|
|
40
|
-
IMPORTANT: {
|
|
41
|
-
className: 'markdown-alert-important',
|
|
42
|
-
title: 'Important',
|
|
43
|
-
iconClass: 'octicon-report',
|
|
44
|
-
iconColor: '#8250df',
|
|
45
|
-
iconColorDark: '#a371f7',
|
|
46
|
-
iconPath:
|
|
47
|
-
'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
48
|
-
},
|
|
49
|
-
WARNING: {
|
|
50
|
-
className: 'markdown-alert-warning',
|
|
51
|
-
title: 'Warning',
|
|
52
|
-
iconClass: 'octicon-alert',
|
|
53
|
-
iconColor: '#9a6700',
|
|
54
|
-
iconColorDark: '#d29922',
|
|
55
|
-
iconPath:
|
|
56
|
-
'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
57
|
-
},
|
|
58
|
-
CAUTION: {
|
|
59
|
-
className: 'markdown-alert-caution',
|
|
60
|
-
title: 'Caution',
|
|
61
|
-
iconClass: 'octicon-stop',
|
|
62
|
-
iconColor: '#cf222e',
|
|
63
|
-
iconColorDark: '#f85149',
|
|
64
|
-
iconPath:
|
|
65
|
-
'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Create SVG icon element as data URI with both light and dark theme versions
|
|
71
|
-
*/
|
|
72
|
-
function createIcon(
|
|
73
|
-
iconPath: string,
|
|
74
|
-
iconClass: string,
|
|
75
|
-
iconColor: string,
|
|
76
|
-
iconColorDark: string
|
|
77
|
-
): string {
|
|
78
|
-
// Create light theme icon
|
|
79
|
-
const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
|
|
80
|
-
const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
|
|
81
|
-
|
|
82
|
-
// Create dark theme icon
|
|
83
|
-
const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
|
|
84
|
-
const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
|
|
85
|
-
|
|
86
|
-
return (
|
|
87
|
-
`<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
|
|
88
|
-
`<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`
|
|
89
|
-
);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
/**
|
|
93
|
-
* Process markdown text to convert GitHub-style alerts
|
|
94
|
-
*/
|
|
95
|
-
function processAlerts(text: string): string {
|
|
96
|
-
const lines = text.split('\n');
|
|
97
|
-
const result: string[] = [];
|
|
98
|
-
let i = 0;
|
|
99
|
-
let inCodeBlock = false;
|
|
100
|
-
|
|
101
|
-
while (i < lines.length) {
|
|
102
|
-
const line = lines[i];
|
|
103
|
-
|
|
104
|
-
// Track code blocks (both ``` and ~~~)
|
|
105
|
-
if (line.trim().match(/^```|^~~~/)) {
|
|
106
|
-
inCodeBlock = !inCodeBlock;
|
|
107
|
-
result.push(line);
|
|
108
|
-
i++;
|
|
109
|
-
continue;
|
|
110
|
-
}
|
|
9
|
+
// Import utility functions from separate module (allows testing without JupyterLab deps)
|
|
10
|
+
import { processAlerts, postProcessAlerts } from './utils';
|
|
111
11
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
result.push(line);
|
|
115
|
-
i++;
|
|
116
|
-
continue;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
const alertMatch = line.match(
|
|
120
|
-
/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/
|
|
121
|
-
);
|
|
122
|
-
|
|
123
|
-
if (alertMatch) {
|
|
124
|
-
const alertType = alertMatch[1];
|
|
125
|
-
const contentLines: string[] = [];
|
|
126
|
-
|
|
127
|
-
i++;
|
|
128
|
-
while (i < lines.length && lines[i].startsWith('>')) {
|
|
129
|
-
const content = lines[i].replace(/^>\s?/, '');
|
|
130
|
-
if (content) {
|
|
131
|
-
contentLines.push(content);
|
|
132
|
-
}
|
|
133
|
-
i++;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
if (contentLines.length > 0) {
|
|
137
|
-
const content = contentLines.join('\n\n');
|
|
138
|
-
|
|
139
|
-
// Use HTML comments as markers that will survive markdown processing
|
|
140
|
-
result.push(
|
|
141
|
-
`<!--ALERT_START:${alertType}-->`,
|
|
142
|
-
content,
|
|
143
|
-
`<!--ALERT_END:${alertType}-->`
|
|
144
|
-
);
|
|
145
|
-
continue;
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
result.push(line);
|
|
150
|
-
i++;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
return result.join('\n');
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
/**
|
|
157
|
-
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
158
|
-
*/
|
|
159
|
-
function postProcessAlerts(html: string, showBackgrounds: boolean): string {
|
|
160
|
-
// Replace alert markers with proper HTML structure
|
|
161
|
-
const result = html.replace(
|
|
162
|
-
/<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g,
|
|
163
|
-
(match, alertType, content) => {
|
|
164
|
-
const config = ALERT_TYPES[alertType];
|
|
165
|
-
const icon = createIcon(
|
|
166
|
-
config.iconPath,
|
|
167
|
-
config.iconClass,
|
|
168
|
-
config.iconColor,
|
|
169
|
-
config.iconColorDark
|
|
170
|
-
);
|
|
171
|
-
const backgroundClass = showBackgrounds
|
|
172
|
-
? ' markdown-alert-with-backgrounds'
|
|
173
|
-
: '';
|
|
174
|
-
|
|
175
|
-
return (
|
|
176
|
-
`<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
|
|
177
|
-
`<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
|
|
178
|
-
content +
|
|
179
|
-
'</div>'
|
|
180
|
-
);
|
|
181
|
-
}
|
|
182
|
-
);
|
|
183
|
-
return result;
|
|
184
|
-
}
|
|
12
|
+
// Re-export for backwards compatibility
|
|
13
|
+
export { processAlerts, postProcessAlerts } from './utils';
|
|
185
14
|
|
|
186
15
|
/**
|
|
187
16
|
* Initialization data for the jupyterlab_github_markdown_alerts_extension extension.
|
package/src/utils.ts
ADDED
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Alert type configuration
|
|
3
|
+
*/
|
|
4
|
+
export interface IAlertConfig {
|
|
5
|
+
className: string;
|
|
6
|
+
title: string;
|
|
7
|
+
iconPath: string;
|
|
8
|
+
iconClass: string;
|
|
9
|
+
iconColor: string;
|
|
10
|
+
iconColorDark: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export const ALERT_TYPES: Record<string, IAlertConfig> = {
|
|
14
|
+
NOTE: {
|
|
15
|
+
className: 'markdown-alert-note',
|
|
16
|
+
title: 'Note',
|
|
17
|
+
iconClass: 'octicon-info',
|
|
18
|
+
iconColor: '#0969da',
|
|
19
|
+
iconColorDark: '#2f81f7',
|
|
20
|
+
iconPath:
|
|
21
|
+
'M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
22
|
+
},
|
|
23
|
+
TIP: {
|
|
24
|
+
className: 'markdown-alert-tip',
|
|
25
|
+
title: 'Tip',
|
|
26
|
+
iconClass: 'octicon-light-bulb',
|
|
27
|
+
iconColor: '#1a7f37',
|
|
28
|
+
iconColorDark: '#3fb950',
|
|
29
|
+
iconPath:
|
|
30
|
+
'M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'
|
|
31
|
+
},
|
|
32
|
+
IMPORTANT: {
|
|
33
|
+
className: 'markdown-alert-important',
|
|
34
|
+
title: 'Important',
|
|
35
|
+
iconClass: 'octicon-report',
|
|
36
|
+
iconColor: '#8250df',
|
|
37
|
+
iconColorDark: '#a371f7',
|
|
38
|
+
iconPath:
|
|
39
|
+
'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
40
|
+
},
|
|
41
|
+
WARNING: {
|
|
42
|
+
className: 'markdown-alert-warning',
|
|
43
|
+
title: 'Warning',
|
|
44
|
+
iconClass: 'octicon-alert',
|
|
45
|
+
iconColor: '#9a6700',
|
|
46
|
+
iconColorDark: '#d29922',
|
|
47
|
+
iconPath:
|
|
48
|
+
'M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'
|
|
49
|
+
},
|
|
50
|
+
CAUTION: {
|
|
51
|
+
className: 'markdown-alert-caution',
|
|
52
|
+
title: 'Caution',
|
|
53
|
+
iconClass: 'octicon-stop',
|
|
54
|
+
iconColor: '#cf222e',
|
|
55
|
+
iconColorDark: '#f85149',
|
|
56
|
+
iconPath:
|
|
57
|
+
'M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'
|
|
58
|
+
}
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
/**
|
|
62
|
+
* Create SVG icon element as data URI with both light and dark theme versions
|
|
63
|
+
*/
|
|
64
|
+
export function createIcon(
|
|
65
|
+
iconPath: string,
|
|
66
|
+
iconClass: string,
|
|
67
|
+
iconColor: string,
|
|
68
|
+
iconColorDark: string
|
|
69
|
+
): string {
|
|
70
|
+
// Create light theme icon
|
|
71
|
+
const svgContentLight = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColor}" d="${iconPath}"></path></svg>`;
|
|
72
|
+
const dataUriLight = `data:image/svg+xml;base64,${btoa(svgContentLight)}`;
|
|
73
|
+
|
|
74
|
+
// Create dark theme icon
|
|
75
|
+
const svgContentDark = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="${iconColorDark}" d="${iconPath}"></path></svg>`;
|
|
76
|
+
const dataUriDark = `data:image/svg+xml;base64,${btoa(svgContentDark)}`;
|
|
77
|
+
|
|
78
|
+
return (
|
|
79
|
+
`<img src="${dataUriLight}" class="octicon ${iconClass} octicon-light mr-2" width="16" height="16" aria-hidden="true" alt="" />` +
|
|
80
|
+
`<img src="${dataUriDark}" class="octicon ${iconClass} octicon-dark mr-2" width="16" height="16" aria-hidden="true" alt="" />`
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Process markdown text to convert GitHub-style alerts
|
|
86
|
+
*/
|
|
87
|
+
export function processAlerts(text: string): string {
|
|
88
|
+
const lines = text.split('\n');
|
|
89
|
+
const result: string[] = [];
|
|
90
|
+
let i = 0;
|
|
91
|
+
let inCodeBlock = false;
|
|
92
|
+
|
|
93
|
+
while (i < lines.length) {
|
|
94
|
+
const line = lines[i];
|
|
95
|
+
|
|
96
|
+
// Track code blocks (both ``` and ~~~)
|
|
97
|
+
if (line.trim().match(/^```|^~~~/)) {
|
|
98
|
+
inCodeBlock = !inCodeBlock;
|
|
99
|
+
result.push(line);
|
|
100
|
+
i++;
|
|
101
|
+
continue;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Skip alert processing inside code blocks
|
|
105
|
+
if (inCodeBlock) {
|
|
106
|
+
result.push(line);
|
|
107
|
+
i++;
|
|
108
|
+
continue;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
const alertMatch = line.match(
|
|
112
|
+
/^>\s*\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\]\s*$/
|
|
113
|
+
);
|
|
114
|
+
|
|
115
|
+
if (alertMatch) {
|
|
116
|
+
const alertType = alertMatch[1];
|
|
117
|
+
const contentLines: string[] = [];
|
|
118
|
+
|
|
119
|
+
i++;
|
|
120
|
+
while (i < lines.length && lines[i].startsWith('>')) {
|
|
121
|
+
const content = lines[i].replace(/^>\s?/, '');
|
|
122
|
+
contentLines.push(content); // Keep empty lines for paragraph separation
|
|
123
|
+
i++;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
if (contentLines.length > 0) {
|
|
127
|
+
// Use single newlines to preserve table structure
|
|
128
|
+
// Empty lines in contentLines will still create paragraph breaks
|
|
129
|
+
const content = contentLines.join('\n');
|
|
130
|
+
|
|
131
|
+
// Use HTML comments as markers that will survive markdown processing
|
|
132
|
+
result.push(
|
|
133
|
+
`<!--ALERT_START:${alertType}-->`,
|
|
134
|
+
content,
|
|
135
|
+
`<!--ALERT_END:${alertType}-->`
|
|
136
|
+
);
|
|
137
|
+
continue;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
result.push(line);
|
|
142
|
+
i++;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
return result.join('\n');
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Post-process rendered HTML to wrap alert markers with styled divs
|
|
150
|
+
*/
|
|
151
|
+
export function postProcessAlerts(
|
|
152
|
+
html: string,
|
|
153
|
+
showBackgrounds: boolean
|
|
154
|
+
): string {
|
|
155
|
+
// Replace alert markers with proper HTML structure
|
|
156
|
+
const result = html.replace(
|
|
157
|
+
/<!--ALERT_START:(NOTE|TIP|IMPORTANT|WARNING|CAUTION)-->([\s\S]*?)<!--ALERT_END:\1-->/g,
|
|
158
|
+
(match, alertType, content) => {
|
|
159
|
+
const config = ALERT_TYPES[alertType];
|
|
160
|
+
const icon = createIcon(
|
|
161
|
+
config.iconPath,
|
|
162
|
+
config.iconClass,
|
|
163
|
+
config.iconColor,
|
|
164
|
+
config.iconColorDark
|
|
165
|
+
);
|
|
166
|
+
const backgroundClass = showBackgrounds
|
|
167
|
+
? ' markdown-alert-with-backgrounds'
|
|
168
|
+
: '';
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
`<div class="markdown-alert ${config.className}${backgroundClass}" dir="auto">` +
|
|
172
|
+
`<p class="markdown-alert-title" dir="auto">${icon}${config.title}</p>` +
|
|
173
|
+
content +
|
|
174
|
+
'</div>'
|
|
175
|
+
);
|
|
176
|
+
}
|
|
177
|
+
);
|
|
178
|
+
return result;
|
|
179
|
+
}
|