@diplodoc/transform 4.68.2 → 4.69.0
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/README.md +7 -0
- package/README.ru.md +2 -0
- package/dist/css/_yfm-only.css.map +1 -1
- package/dist/css/_yfm-only.min.css.map +1 -1
- package/dist/css/base.css +27 -13
- package/dist/css/base.css.map +3 -3
- package/dist/css/base.min.css +1 -1
- package/dist/css/base.min.css.map +3 -3
- package/dist/css/print.css.map +1 -1
- package/dist/css/yfm.css +27 -13
- package/dist/css/yfm.css.map +3 -3
- package/dist/css/yfm.min.css +1 -1
- package/dist/css/yfm.min.css.map +3 -3
- package/dist/js/base.js +24 -12
- package/dist/js/base.js.map +2 -2
- package/dist/js/base.min.js +3 -3
- package/dist/js/base.min.js.map +3 -3
- package/dist/js/yfm.js +24 -12
- package/dist/js/yfm.js.map +3 -3
- package/dist/js/yfm.min.js +4 -4
- package/dist/js/yfm.min.js.map +3 -3
- package/dist/scss/_code.scss +39 -22
- package/dist/scss/_common.scss +2 -2
- package/lib/plugins/code.d.ts +9 -1
- package/lib/plugins/code.js +58 -40
- package/lib/plugins/code.js.map +1 -1
- package/lib/plugins/images/index.js +13 -3
- package/lib/plugins/images/index.js.map +1 -1
- package/lib/typings.d.ts +6 -0
- package/package.json +4 -3
- package/src/js/code.ts +26 -17
- package/src/scss/_code.scss +39 -22
- package/src/scss/_common.scss +2 -2
- package/src/transform/plugins/code.ts +73 -40
- package/src/transform/plugins/images/index.ts +14 -3
- package/src/transform/typings.ts +6 -0
package/lib/plugins/code.js
CHANGED
|
@@ -1,44 +1,59 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
/* eslint-disable max-len */
|
|
3
3
|
const utils_1 = require("./utils");
|
|
4
|
-
const
|
|
4
|
+
const wrapInFloatingContainer = (element, id, { lineWrapping }) => {
|
|
5
|
+
const wrappingButton = lineWrapping
|
|
6
|
+
? `<button role="button" class="yfm-code-button yfm-wrapping-button" aria-label="Toggle line wrapping">
|
|
7
|
+
<svg width="16" height="16" viewBox="0 0 16 16" class="yfm-code-icon yfm-wrapping-icon" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
8
|
+
<path
|
|
9
|
+
fill="currentColor"
|
|
10
|
+
fill-rule="evenodd"
|
|
11
|
+
clip-rule="evenodd"
|
|
12
|
+
d="M2.47 11.28a.75.75 0 0 1 0-1.06l3-3a.75.75 0 0 1 1.06 1.06L4.81 10H9a3.25 3.25 0 0 0 0-6.5H8A.75.75 0 0 1 8 2h1a4.75 4.75 0 1 1 0 9.5H4.81l1.72 1.72a.75.75 0 1 1-1.06 1.06z"
|
|
13
|
+
/>
|
|
14
|
+
</svg>
|
|
15
|
+
</button>`
|
|
16
|
+
: '';
|
|
5
17
|
return `
|
|
6
|
-
<div class="yfm-
|
|
18
|
+
<div class="yfm-code-floating-container">
|
|
7
19
|
${element}
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
stroke="currentColor"
|
|
16
|
-
fill="transparent"
|
|
17
|
-
stroke-width="1.5"
|
|
18
|
-
d="M9.5 13l3 3l5 -5"
|
|
19
|
-
visibility="hidden"
|
|
20
|
-
>
|
|
21
|
-
<animate
|
|
22
|
-
id="visibileAnimation-${id}"
|
|
23
|
-
attributeName="visibility"
|
|
24
|
-
from="hidden"
|
|
25
|
-
to="visible"
|
|
26
|
-
dur="0.2s"
|
|
27
|
-
fill="freeze"
|
|
28
|
-
begin=""
|
|
29
|
-
/>
|
|
30
|
-
<animate
|
|
31
|
-
id="hideAnimation-${id}"
|
|
32
|
-
attributeName="visibility"
|
|
33
|
-
from="visible"
|
|
34
|
-
to="hidden"
|
|
35
|
-
dur="1s"
|
|
36
|
-
begin="visibileAnimation-${id}.end+1"
|
|
37
|
-
fill="freeze"
|
|
20
|
+
<div class="yfm-code-floating">
|
|
21
|
+
${wrappingButton}
|
|
22
|
+
<button role="button" class="yfm-code-button yfm-clipboard-button" aria-label="Copy">
|
|
23
|
+
<svg width="16" height="16" viewBox="0 0 24 24" class="yfm-code-icon yfm-clipboard-icon" data-animation="${id}">
|
|
24
|
+
<path
|
|
25
|
+
fill="currentColor"
|
|
26
|
+
d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
|
|
38
27
|
/>
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
28
|
+
<path
|
|
29
|
+
stroke="currentColor"
|
|
30
|
+
fill="transparent"
|
|
31
|
+
stroke-width="1.5"
|
|
32
|
+
d="M9.5 13l3 3l5 -5"
|
|
33
|
+
visibility="hidden"
|
|
34
|
+
>
|
|
35
|
+
<animate
|
|
36
|
+
id="visibileAnimation-${id}"
|
|
37
|
+
attributeName="visibility"
|
|
38
|
+
from="hidden"
|
|
39
|
+
to="visible"
|
|
40
|
+
dur="0.2s"
|
|
41
|
+
fill="freeze"
|
|
42
|
+
begin=""
|
|
43
|
+
/>
|
|
44
|
+
<animate
|
|
45
|
+
id="hideAnimation-${id}"
|
|
46
|
+
attributeName="visibility"
|
|
47
|
+
from="visible"
|
|
48
|
+
to="hidden"
|
|
49
|
+
dur="1s"
|
|
50
|
+
begin="visibileAnimation-${id}.end+1"
|
|
51
|
+
fill="freeze"
|
|
52
|
+
/>
|
|
53
|
+
</path>
|
|
54
|
+
</svg>
|
|
55
|
+
</button>
|
|
56
|
+
</div>
|
|
42
57
|
</div>
|
|
43
58
|
`;
|
|
44
59
|
};
|
|
@@ -52,7 +67,7 @@ function termReplace(str, env, escape) {
|
|
|
52
67
|
const termCode = str.replace(reg, (_match, p1, _p2, p3) => `<i class="yfm yfm-term_title" term-key=":${p3}" id="${(0, utils_1.generateID)()}">${p1}</i>`);
|
|
53
68
|
return termCode || str;
|
|
54
69
|
}
|
|
55
|
-
function addLineNumbers(code) {
|
|
70
|
+
function addLineNumbers(code, { lineWrapping }) {
|
|
56
71
|
const lines = code.split('\n');
|
|
57
72
|
const lineCount = lines.length;
|
|
58
73
|
const maxDigits = String(lineCount).length;
|
|
@@ -62,11 +77,14 @@ function addLineNumbers(code) {
|
|
|
62
77
|
return (linesToProcess
|
|
63
78
|
.map((line, index) => {
|
|
64
79
|
const lineNumber = String(index + 1).padStart(maxDigits, ' ');
|
|
65
|
-
return
|
|
80
|
+
return lineWrapping
|
|
81
|
+
? `<span class="yfm-line-number">${lineNumber}</span><span class="yfm-line">${line}</span>`
|
|
82
|
+
: `<span class="yfm-line-number">${lineNumber}</span>${line}`;
|
|
66
83
|
})
|
|
67
84
|
.join('\n') + (hasTrailingNewline ? '\n' : ''));
|
|
68
85
|
}
|
|
69
|
-
const code = (md) => {
|
|
86
|
+
const code = (md, opts) => {
|
|
87
|
+
const lineWrapping = (opts === null || opts === void 0 ? void 0 : opts.codeLineWrapping) || false;
|
|
70
88
|
const superCodeRenderer = md.renderer.rules.fence;
|
|
71
89
|
md.renderer.rules.fence = function (tokens, idx, options, env, self) {
|
|
72
90
|
const token = tokens[idx];
|
|
@@ -77,12 +95,12 @@ const code = (md) => {
|
|
|
77
95
|
const codeMatch = superCode.match(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/);
|
|
78
96
|
if (codeMatch) {
|
|
79
97
|
const codeContent = codeMatch[1];
|
|
80
|
-
const codeWithLineNumbers = addLineNumbers(codeContent);
|
|
98
|
+
const codeWithLineNumbers = addLineNumbers(codeContent, { lineWrapping });
|
|
81
99
|
superCode = superCode.replace(codeContent, codeWithLineNumbers);
|
|
82
100
|
}
|
|
83
101
|
}
|
|
84
102
|
const superCodeWithTerms = superCode && (env === null || env === void 0 ? void 0 : env.terms) ? termReplace(superCode, env, md.utils.escapeRE) : superCode;
|
|
85
|
-
return
|
|
103
|
+
return wrapInFloatingContainer(superCodeWithTerms, idx, { lineWrapping });
|
|
86
104
|
};
|
|
87
105
|
};
|
|
88
106
|
module.exports = code;
|
package/lib/plugins/code.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"code.js","sourceRoot":"","sources":["../../src/transform/plugins/code.ts"],"names":[],"mappings":";AAAA,4BAA4B;AAI5B,mCAAmC;AAEnC,MAAM,
|
|
1
|
+
{"version":3,"file":"code.js","sourceRoot":"","sources":["../../src/transform/plugins/code.ts"],"names":[],"mappings":"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"}
|
|
@@ -21,15 +21,25 @@ function replaceImageSrc(state, currentPath, path, imgSrc, { assetsPublicPath =
|
|
|
21
21
|
}
|
|
22
22
|
function getSvgContent(file, from, { rawContent, notFoundCb, log, root = '' }) {
|
|
23
23
|
try {
|
|
24
|
-
|
|
24
|
+
const content = rawContent(file);
|
|
25
|
+
if (!content || typeof content !== 'string') {
|
|
26
|
+
return null;
|
|
27
|
+
}
|
|
28
|
+
return content;
|
|
25
29
|
}
|
|
26
30
|
catch (_a) {
|
|
27
31
|
const path = file.replace(root, '');
|
|
28
32
|
// Normalize path separators to forward slashes for cross-platform compatibility
|
|
29
33
|
const normalizedPath = path.replace(/\\/g, '/');
|
|
30
34
|
log.error(`SVG ${normalizedPath} from ${from} not found`);
|
|
31
|
-
|
|
32
|
-
notFoundCb
|
|
35
|
+
try {
|
|
36
|
+
if (notFoundCb) {
|
|
37
|
+
notFoundCb(normalizedPath);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
catch (_b) {
|
|
41
|
+
// notFoundCb may throw in some backends (e.g. memcache)
|
|
42
|
+
// to signal that the file needs to be fetched
|
|
33
43
|
}
|
|
34
44
|
return null;
|
|
35
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/transform/plugins/images/index.ts"],"names":[],"mappings":";AAIA,+BAA+B;AAC/B,iCAA2B;AAC3B,+BAA8B;AAC9B,2BAAgC;AAEhC,2CAAgE;AAChE,uCAA0E;AAE1E,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC;AAOjG,SAAS,eAAe,CACpB,KAAgB,EAChB,WAAmB,EACnB,IAAY,EACZ,MAAc,EACd,EAAC,gBAAgB,GAAG,UAAG,EAAE,IAAI,GAAG,EAAE,EAAE,GAAG,EAAY;;IAEnD,IAAI,IAAA,sBAAY,EAAC,IAAI,CAAC,EAAE,CAAC;QACrB,MAAA,KAAK,CAAC,EAAE,CAAC,MAAM,0CAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;SAAM,CAAC;QACJ,GAAG,CAAC,KAAK,CAAC,oBAAoB,IAAA,YAAI,EAAC,MAAM,CAAC,OAAO,IAAA,YAAI,EAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC1E,CAAC;IAED,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,UAAG,EAAE,EAAE,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,IAAA,WAAI,EAAC,gBAAgB,EAAE,cAAc,CAAC,CAAC;IACzD,gFAAgF;IAChF,OAAO,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;AACzC,CAAC;AAaD,SAAS,aAAa,CAAC,IAAY,EAAE,IAAY,EAAE,EAAC,UAAU,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,GAAG,EAAE,EAAO;IAC7F,IAAI,CAAC;QACD,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/transform/plugins/images/index.ts"],"names":[],"mappings":"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"}
|
package/lib/typings.d.ts
CHANGED
|
@@ -72,6 +72,12 @@ export interface OptionsType {
|
|
|
72
72
|
rawContent?: (path: string, assets: Record<string, string | boolean>) => string | boolean;
|
|
73
73
|
calcPath?: (root: string, path: string) => string;
|
|
74
74
|
replaceImageSrc?: (state: StateCore, currentPath: string, path: string, imgSrc: string, opts: unknown) => string;
|
|
75
|
+
/**
|
|
76
|
+
* Show button to toggle line wrapping of code.
|
|
77
|
+
* @type {boolean}
|
|
78
|
+
* @default false
|
|
79
|
+
*/
|
|
80
|
+
codeLineWrapping?: boolean;
|
|
75
81
|
}
|
|
76
82
|
export interface OutputType {
|
|
77
83
|
result: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@diplodoc/transform",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.69.0",
|
|
4
4
|
"description": "A simple transformer of text in YFM (Yandex Flavored Markdown) to HTML",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"markdown",
|
|
@@ -41,7 +41,8 @@
|
|
|
41
41
|
"playground": "run-p dev:*",
|
|
42
42
|
"artifact:playground": "node ./playground/scripts/pages.mjs",
|
|
43
43
|
"prepublishOnly": "npm run lint && npm run test && npm run build",
|
|
44
|
-
"test": "vitest run
|
|
44
|
+
"test": "vitest run",
|
|
45
|
+
"test:coverage": "vitest run --coverage",
|
|
45
46
|
"test:playwright:nobuild": "cd e2e && npm run playwright:docker --",
|
|
46
47
|
"test:playwright": "npm run build && npm run test:playwright:nobuild --",
|
|
47
48
|
"typecheck": "tsc -p tsconfig.json --noEmit",
|
|
@@ -77,7 +78,7 @@
|
|
|
77
78
|
},
|
|
78
79
|
"devDependencies": {
|
|
79
80
|
"@diplodoc/babel-preset": "^1.0.2",
|
|
80
|
-
"@diplodoc/lint": "^1.
|
|
81
|
+
"@diplodoc/lint": "^1.13.2",
|
|
81
82
|
"@diplodoc/tsconfig": "^1.0.2",
|
|
82
83
|
"@types/css": "0.0.34",
|
|
83
84
|
"@types/github-slugger": "^1.3.0",
|
package/src/js/code.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import {copyToClipboard, getEventTarget, isCustom} from './utils';
|
|
2
2
|
|
|
3
|
-
const
|
|
3
|
+
const COPY_BUTTON_SELECTOR = '.yfm-clipboard-button';
|
|
4
|
+
const WRAP_BUTTON_SELECTOR = '.yfm-wrapping-button';
|
|
4
5
|
|
|
5
6
|
function notifySuccess(svgButton: HTMLElement | null) {
|
|
6
7
|
if (!svgButton) {
|
|
@@ -20,15 +21,9 @@ function notifySuccess(svgButton: HTMLElement | null) {
|
|
|
20
21
|
}
|
|
21
22
|
|
|
22
23
|
function buttonCopyFn(target: HTMLElement) {
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
if (!
|
|
26
|
-
return;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const code = parent.querySelector<HTMLElement>('pre code');
|
|
30
|
-
|
|
31
|
-
if (!code) {
|
|
24
|
+
const container = target.parentNode?.parentNode;
|
|
25
|
+
const code = container?.querySelector<HTMLElement>('pre code');
|
|
26
|
+
if (!container || !code) {
|
|
32
27
|
return;
|
|
33
28
|
}
|
|
34
29
|
|
|
@@ -45,22 +40,36 @@ function buttonCopyFn(target: HTMLElement) {
|
|
|
45
40
|
.join('');
|
|
46
41
|
|
|
47
42
|
copyToClipboard(textContent.trim()).then(() => {
|
|
48
|
-
notifySuccess(
|
|
43
|
+
notifySuccess(container.querySelector('.yfm-clipboard-icon'));
|
|
49
44
|
|
|
50
45
|
setTimeout(() => target.blur(), 1500);
|
|
51
46
|
});
|
|
52
47
|
}
|
|
53
48
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
49
|
+
function buttonWrapFn(target: HTMLElement) {
|
|
50
|
+
const container = target.parentNode?.parentNode;
|
|
51
|
+
const code = container?.querySelector<HTMLElement>('pre code');
|
|
52
|
+
if (!container || !code) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
code.classList.toggle('wrap');
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
setTimeout(() => target.blur(), 500);
|
|
59
|
+
}
|
|
59
60
|
|
|
60
|
-
|
|
61
|
+
if (typeof document !== 'undefined') {
|
|
62
|
+
document.addEventListener('click', (event) => {
|
|
63
|
+
if (isCustom(event)) {
|
|
61
64
|
return;
|
|
62
65
|
}
|
|
63
66
|
|
|
64
|
-
|
|
67
|
+
const target = getEventTarget(event) as HTMLElement;
|
|
68
|
+
|
|
69
|
+
if (target.matches(COPY_BUTTON_SELECTOR)) {
|
|
70
|
+
buttonCopyFn(target);
|
|
71
|
+
} else if (target.matches(WRAP_BUTTON_SELECTOR)) {
|
|
72
|
+
buttonWrapFn(target);
|
|
73
|
+
}
|
|
65
74
|
});
|
|
66
75
|
}
|
package/src/scss/_code.scss
CHANGED
|
@@ -1,14 +1,23 @@
|
|
|
1
1
|
.yfm {
|
|
2
|
-
&-
|
|
2
|
+
&-code-floating-container {
|
|
3
3
|
position: relative;
|
|
4
4
|
|
|
5
|
-
.yfm-
|
|
5
|
+
.yfm-code-button {
|
|
6
6
|
min-width: 20px;
|
|
7
7
|
min-height: 20px;
|
|
8
|
+
flex-shrink: 0;
|
|
9
|
+
|
|
10
|
+
//reset default button style
|
|
11
|
+
background: none;
|
|
12
|
+
color: inherit;
|
|
13
|
+
border: none;
|
|
14
|
+
padding: 0;
|
|
15
|
+
font: inherit;
|
|
16
|
+
cursor: pointer;
|
|
8
17
|
}
|
|
9
18
|
|
|
10
19
|
&:hover {
|
|
11
|
-
.yfm-
|
|
20
|
+
.yfm-code-floating {
|
|
12
21
|
opacity: 1;
|
|
13
22
|
}
|
|
14
23
|
}
|
|
@@ -16,42 +25,50 @@
|
|
|
16
25
|
& > pre {
|
|
17
26
|
border-radius: 10px;
|
|
18
27
|
overflow: hidden;
|
|
28
|
+
|
|
29
|
+
// codeblock has line-wrapping and line-numbers
|
|
30
|
+
code:has(> .yfm-line) {
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-columns: auto 1fr;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
code.wrap {
|
|
36
|
+
white-space: pre-wrap;
|
|
37
|
+
}
|
|
19
38
|
}
|
|
20
39
|
|
|
21
|
-
|
|
40
|
+
.yfm-code-floating {
|
|
22
41
|
position: absolute;
|
|
23
42
|
top: 16px;
|
|
24
43
|
right: 16px;
|
|
25
44
|
z-index: 1;
|
|
45
|
+
|
|
26
46
|
opacity: 0;
|
|
27
47
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
border: none;
|
|
32
|
-
padding: 0;
|
|
33
|
-
font: inherit;
|
|
34
|
-
cursor: pointer;
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-wrap: nowrap;
|
|
50
|
+
gap: 4px;
|
|
35
51
|
|
|
36
|
-
&:focus
|
|
52
|
+
&:focus,
|
|
53
|
+
&:has(> .yfm-code-button:focus) {
|
|
37
54
|
opacity: 1;
|
|
38
55
|
}
|
|
39
56
|
}
|
|
40
57
|
|
|
41
|
-
|
|
58
|
+
.yfm-code-icon {
|
|
42
59
|
pointer-events: none;
|
|
43
60
|
}
|
|
61
|
+
}
|
|
44
62
|
|
|
45
|
-
|
|
46
|
-
|
|
63
|
+
&-clipboard-inline-code {
|
|
64
|
+
transition: 0.3s;
|
|
47
65
|
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}
|
|
66
|
+
&:hover {
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
background-color: var(
|
|
69
|
+
--yfm-color-code-hovered-background,
|
|
70
|
+
var(--yfm-color-code-background-hovered-private)
|
|
71
|
+
);
|
|
55
72
|
}
|
|
56
73
|
}
|
|
57
74
|
}
|
package/src/scss/_common.scss
CHANGED
|
@@ -276,9 +276,9 @@
|
|
|
276
276
|
|
|
277
277
|
hr {
|
|
278
278
|
box-sizing: content-box;
|
|
279
|
-
height: 0.25em;
|
|
279
|
+
height: var(--yfm-hr-height, 0.25em);
|
|
280
280
|
padding: 0;
|
|
281
|
-
margin: 1.5em 0;
|
|
281
|
+
margin: var(--yfm-hr-margin, 1.5em 0);
|
|
282
282
|
overflow: hidden;
|
|
283
283
|
|
|
284
284
|
background-color: var(--yfm-color-border, var(--yfm-color-border-private));
|
|
@@ -4,44 +4,64 @@ import type {MarkdownItPluginCb} from './typings';
|
|
|
4
4
|
|
|
5
5
|
import {generateID} from './utils';
|
|
6
6
|
|
|
7
|
-
const
|
|
7
|
+
const wrapInFloatingContainer = (
|
|
8
|
+
element: string | undefined,
|
|
9
|
+
id: number,
|
|
10
|
+
{lineWrapping}: {lineWrapping: boolean},
|
|
11
|
+
) => {
|
|
12
|
+
const wrappingButton = lineWrapping
|
|
13
|
+
? `<button role="button" class="yfm-code-button yfm-wrapping-button" aria-label="Toggle line wrapping">
|
|
14
|
+
<svg width="16" height="16" viewBox="0 0 16 16" class="yfm-code-icon yfm-wrapping-icon" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
15
|
+
<path
|
|
16
|
+
fill="currentColor"
|
|
17
|
+
fill-rule="evenodd"
|
|
18
|
+
clip-rule="evenodd"
|
|
19
|
+
d="M2.47 11.28a.75.75 0 0 1 0-1.06l3-3a.75.75 0 0 1 1.06 1.06L4.81 10H9a3.25 3.25 0 0 0 0-6.5H8A.75.75 0 0 1 8 2h1a4.75 4.75 0 1 1 0 9.5H4.81l1.72 1.72a.75.75 0 1 1-1.06 1.06z"
|
|
20
|
+
/>
|
|
21
|
+
</svg>
|
|
22
|
+
</button>`
|
|
23
|
+
: '';
|
|
24
|
+
|
|
8
25
|
return `
|
|
9
|
-
<div class="yfm-
|
|
26
|
+
<div class="yfm-code-floating-container">
|
|
10
27
|
${element}
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
stroke="currentColor"
|
|
19
|
-
fill="transparent"
|
|
20
|
-
stroke-width="1.5"
|
|
21
|
-
d="M9.5 13l3 3l5 -5"
|
|
22
|
-
visibility="hidden"
|
|
23
|
-
>
|
|
24
|
-
<animate
|
|
25
|
-
id="visibileAnimation-${id}"
|
|
26
|
-
attributeName="visibility"
|
|
27
|
-
from="hidden"
|
|
28
|
-
to="visible"
|
|
29
|
-
dur="0.2s"
|
|
30
|
-
fill="freeze"
|
|
31
|
-
begin=""
|
|
32
|
-
/>
|
|
33
|
-
<animate
|
|
34
|
-
id="hideAnimation-${id}"
|
|
35
|
-
attributeName="visibility"
|
|
36
|
-
from="visible"
|
|
37
|
-
to="hidden"
|
|
38
|
-
dur="1s"
|
|
39
|
-
begin="visibileAnimation-${id}.end+1"
|
|
40
|
-
fill="freeze"
|
|
28
|
+
<div class="yfm-code-floating">
|
|
29
|
+
${wrappingButton}
|
|
30
|
+
<button role="button" class="yfm-code-button yfm-clipboard-button" aria-label="Copy">
|
|
31
|
+
<svg width="16" height="16" viewBox="0 0 24 24" class="yfm-code-icon yfm-clipboard-icon" data-animation="${id}">
|
|
32
|
+
<path
|
|
33
|
+
fill="currentColor"
|
|
34
|
+
d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"
|
|
41
35
|
/>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
<path
|
|
37
|
+
stroke="currentColor"
|
|
38
|
+
fill="transparent"
|
|
39
|
+
stroke-width="1.5"
|
|
40
|
+
d="M9.5 13l3 3l5 -5"
|
|
41
|
+
visibility="hidden"
|
|
42
|
+
>
|
|
43
|
+
<animate
|
|
44
|
+
id="visibileAnimation-${id}"
|
|
45
|
+
attributeName="visibility"
|
|
46
|
+
from="hidden"
|
|
47
|
+
to="visible"
|
|
48
|
+
dur="0.2s"
|
|
49
|
+
fill="freeze"
|
|
50
|
+
begin=""
|
|
51
|
+
/>
|
|
52
|
+
<animate
|
|
53
|
+
id="hideAnimation-${id}"
|
|
54
|
+
attributeName="visibility"
|
|
55
|
+
from="visible"
|
|
56
|
+
to="hidden"
|
|
57
|
+
dur="1s"
|
|
58
|
+
begin="visibileAnimation-${id}.end+1"
|
|
59
|
+
fill="freeze"
|
|
60
|
+
/>
|
|
61
|
+
</path>
|
|
62
|
+
</svg>
|
|
63
|
+
</button>
|
|
64
|
+
</div>
|
|
45
65
|
</div>
|
|
46
66
|
`;
|
|
47
67
|
};
|
|
@@ -69,7 +89,7 @@ function termReplace(str: string, env: EnvTerm, escape: (str: string) => string)
|
|
|
69
89
|
return termCode || str;
|
|
70
90
|
}
|
|
71
91
|
|
|
72
|
-
function addLineNumbers(code: string): string {
|
|
92
|
+
function addLineNumbers(code: string, {lineWrapping}: {lineWrapping: boolean}): string {
|
|
73
93
|
const lines = code.split('\n');
|
|
74
94
|
const lineCount = lines.length;
|
|
75
95
|
const maxDigits = String(lineCount).length;
|
|
@@ -82,13 +102,26 @@ function addLineNumbers(code: string): string {
|
|
|
82
102
|
linesToProcess
|
|
83
103
|
.map((line, index) => {
|
|
84
104
|
const lineNumber = String(index + 1).padStart(maxDigits, ' ');
|
|
85
|
-
return
|
|
105
|
+
return lineWrapping
|
|
106
|
+
? `<span class="yfm-line-number">${lineNumber}</span><span class="yfm-line">${line}</span>`
|
|
107
|
+
: `<span class="yfm-line-number">${lineNumber}</span>${line}`;
|
|
86
108
|
})
|
|
87
109
|
.join('\n') + (hasTrailingNewline ? '\n' : '')
|
|
88
110
|
);
|
|
89
111
|
}
|
|
90
112
|
|
|
91
|
-
|
|
113
|
+
type CodeOptions = {
|
|
114
|
+
/**
|
|
115
|
+
* Show button to toggle line wrapping of code.
|
|
116
|
+
* @type {boolean}
|
|
117
|
+
* @default false
|
|
118
|
+
*/
|
|
119
|
+
codeLineWrapping?: boolean;
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
const code: MarkdownItPluginCb<CodeOptions> = (md, opts) => {
|
|
123
|
+
const lineWrapping = opts?.codeLineWrapping || false;
|
|
124
|
+
|
|
92
125
|
const superCodeRenderer = md.renderer.rules.fence;
|
|
93
126
|
md.renderer.rules.fence = function (tokens, idx, options, env, self) {
|
|
94
127
|
const token = tokens[idx];
|
|
@@ -101,7 +134,7 @@ const code: MarkdownItPluginCb = (md) => {
|
|
|
101
134
|
const codeMatch = superCode.match(/<pre[^>]*><code[^>]*>([\s\S]*?)<\/code><\/pre>/);
|
|
102
135
|
if (codeMatch) {
|
|
103
136
|
const codeContent = codeMatch[1];
|
|
104
|
-
const codeWithLineNumbers = addLineNumbers(codeContent);
|
|
137
|
+
const codeWithLineNumbers = addLineNumbers(codeContent, {lineWrapping});
|
|
105
138
|
superCode = superCode.replace(codeContent, codeWithLineNumbers);
|
|
106
139
|
}
|
|
107
140
|
}
|
|
@@ -109,7 +142,7 @@ const code: MarkdownItPluginCb = (md) => {
|
|
|
109
142
|
const superCodeWithTerms =
|
|
110
143
|
superCode && env?.terms ? termReplace(superCode, env, md.utils.escapeRE) : superCode;
|
|
111
144
|
|
|
112
|
-
return
|
|
145
|
+
return wrapInFloatingContainer(superCodeWithTerms, idx, {lineWrapping});
|
|
113
146
|
};
|
|
114
147
|
};
|
|
115
148
|
|
|
@@ -49,15 +49,26 @@ interface SVGOpts extends MarkdownItPluginOpts {
|
|
|
49
49
|
|
|
50
50
|
function getSvgContent(file: string, from: string, {rawContent, notFoundCb, log, root = ''}: Opts) {
|
|
51
51
|
try {
|
|
52
|
-
|
|
52
|
+
const content = rawContent(file);
|
|
53
|
+
|
|
54
|
+
if (!content || typeof content !== 'string') {
|
|
55
|
+
return null;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
return content;
|
|
53
59
|
} catch {
|
|
54
60
|
const path = file.replace(root, '');
|
|
55
61
|
// Normalize path separators to forward slashes for cross-platform compatibility
|
|
56
62
|
const normalizedPath = path.replace(/\\/g, '/');
|
|
57
63
|
log.error(`SVG ${normalizedPath} from ${from} not found`);
|
|
58
64
|
|
|
59
|
-
|
|
60
|
-
notFoundCb
|
|
65
|
+
try {
|
|
66
|
+
if (notFoundCb) {
|
|
67
|
+
notFoundCb(normalizedPath);
|
|
68
|
+
}
|
|
69
|
+
} catch {
|
|
70
|
+
// notFoundCb may throw in some backends (e.g. memcache)
|
|
71
|
+
// to signal that the file needs to be fetched
|
|
61
72
|
}
|
|
62
73
|
|
|
63
74
|
return null;
|
package/src/transform/typings.ts
CHANGED
|
@@ -103,6 +103,12 @@ export interface OptionsType {
|
|
|
103
103
|
imgSrc: string,
|
|
104
104
|
opts: unknown,
|
|
105
105
|
) => string;
|
|
106
|
+
/**
|
|
107
|
+
* Show button to toggle line wrapping of code.
|
|
108
|
+
* @type {boolean}
|
|
109
|
+
* @default false
|
|
110
|
+
*/
|
|
111
|
+
codeLineWrapping?: boolean;
|
|
106
112
|
}
|
|
107
113
|
|
|
108
114
|
export interface OutputType {
|