@diplodoc/transform 4.76.3 → 4.76.5
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/dist/css/_yfm-only.css.map +1 -1
- package/dist/css/_yfm-only.min.css.map +1 -1
- package/dist/css/base.css.map +3 -3
- package/dist/css/base.min.css.map +3 -3
- package/dist/css/print.css.map +1 -1
- package/dist/css/yfm.css.map +3 -3
- package/dist/css/yfm.min.css.map +3 -3
- package/dist/js/base.js +10 -8
- package/dist/js/base.js.map +2 -2
- package/dist/js/base.min.js +1 -1
- package/dist/js/base.min.js.map +3 -3
- package/dist/js/yfm.js +10 -8
- package/dist/js/yfm.js.map +2 -2
- package/dist/js/yfm.min.js +1 -1
- package/dist/js/yfm.min.js.map +3 -3
- package/dist/scss/_code.scss +2 -0
- package/lib/plugins/code.js +14 -10
- package/lib/plugins/code.js.map +1 -1
- package/package.json +1 -1
- package/src/js/code.ts +11 -7
- package/src/scss/_code.scss +2 -0
- package/src/transform/plugins/code.ts +14 -10
package/lib/plugins/code.js
CHANGED
|
@@ -3,23 +3,25 @@
|
|
|
3
3
|
const utils_1 = require("./utils");
|
|
4
4
|
const wrapInFloatingContainer = (element, id, { lineWrapping }) => {
|
|
5
5
|
const wrappingButton = lineWrapping
|
|
6
|
-
? `<button role="button" class="yfm-code-button yfm-wrapping-button" aria-label="Toggle line wrapping">
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
-
/>
|
|
6
|
+
? `<button role="button" class="g-button g-button_view_flat g-button_size_m g-button_pin_round-round g-md-viewer-code-button yfm-code-button yfm-wrapping-button" tabindex="-1" type="button" aria-label="Toggle line wrapping"aria-pressed="false" data-tabindex="0">
|
|
7
|
+
<span class="g-button__icon">
|
|
8
|
+
<span class="g-button__icon-inner"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" stroke="none" aria-hidden="true">
|
|
9
|
+
<svg class="yfm-code-icon yfm-wrapping-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
|
|
10
|
+
<path fill="currentColor" fill-rule="evenodd" 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" clip-rule="evenodd">
|
|
11
|
+
</path>
|
|
14
12
|
</svg>
|
|
15
|
-
</
|
|
13
|
+
</span>
|
|
14
|
+
</span>
|
|
15
|
+
</button>`
|
|
16
16
|
: '';
|
|
17
17
|
return `
|
|
18
18
|
<div class="yfm-code-floating-container">
|
|
19
19
|
${element}
|
|
20
20
|
<div class="yfm-code-floating">
|
|
21
21
|
${wrappingButton}
|
|
22
|
-
<button role="button" class="yfm-code-button yfm-clipboard-button" aria-label="Copy">
|
|
22
|
+
<button role="button" class="g-button g-button_view_flat g-button_size_m g-button_pin_round-round g-md-viewer-code-button yfm-code-button yfm-clipboard-button" aria-label="Copy">
|
|
23
|
+
<span class="g-button__icon g-clipboard-button__icon">
|
|
24
|
+
<span class="g-button__icon-inner">
|
|
23
25
|
<svg width="16" height="16" viewBox="0 0 24 24" class="yfm-code-icon yfm-clipboard-icon" data-animation="${id}">
|
|
24
26
|
<path
|
|
25
27
|
fill="currentColor"
|
|
@@ -52,6 +54,8 @@ const wrapInFloatingContainer = (element, id, { lineWrapping }) => {
|
|
|
52
54
|
/>
|
|
53
55
|
</path>
|
|
54
56
|
</svg>
|
|
57
|
+
</span>
|
|
58
|
+
</span>
|
|
55
59
|
</button>
|
|
56
60
|
</div>
|
|
57
61
|
</div>
|
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;AAK5B,mCAAuD;AAEvD,MAAM,uBAAuB,GAAG,CAC5B,OAA2B,EAC3B,EAAU,EACV,EAAC,YAAY,EAA0B,EACzC,EAAE;IACA,MAAM,cAAc,GAAG,YAAY;QAC/B,CAAC,CAAC;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"code.js","sourceRoot":"","sources":["../../src/transform/plugins/code.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/src/js/code.ts
CHANGED
|
@@ -2,6 +2,7 @@ import {copyToClipboard, getEventTarget, isCustom} from './utils';
|
|
|
2
2
|
|
|
3
3
|
const COPY_BUTTON_SELECTOR = '.yfm-clipboard-button';
|
|
4
4
|
const WRAP_BUTTON_SELECTOR = '.yfm-wrapping-button';
|
|
5
|
+
const FLOATING_CONTAINER_SELECTOR = '.yfm-code-floating-container';
|
|
5
6
|
|
|
6
7
|
function notifySuccess(svgButton: HTMLElement | null) {
|
|
7
8
|
if (!svgButton) {
|
|
@@ -21,9 +22,11 @@ function notifySuccess(svgButton: HTMLElement | null) {
|
|
|
21
22
|
}
|
|
22
23
|
|
|
23
24
|
function buttonCopyFn(target: HTMLElement) {
|
|
24
|
-
const
|
|
25
|
+
const button = target.closest<HTMLElement>(COPY_BUTTON_SELECTOR);
|
|
26
|
+
const container = button?.closest<HTMLElement>(FLOATING_CONTAINER_SELECTOR);
|
|
25
27
|
const code = container?.querySelector<HTMLElement>('pre code');
|
|
26
|
-
|
|
28
|
+
|
|
29
|
+
if (!button || !container || !code) {
|
|
27
30
|
return;
|
|
28
31
|
}
|
|
29
32
|
|
|
@@ -47,13 +50,14 @@ function buttonCopyFn(target: HTMLElement) {
|
|
|
47
50
|
}
|
|
48
51
|
|
|
49
52
|
function buttonWrapFn(target: HTMLElement) {
|
|
50
|
-
const
|
|
53
|
+
const button = target.closest<HTMLElement>(WRAP_BUTTON_SELECTOR);
|
|
54
|
+
const container = button?.closest<HTMLElement>(FLOATING_CONTAINER_SELECTOR);
|
|
51
55
|
const code = container?.querySelector<HTMLElement>('pre code');
|
|
52
|
-
if (!container || !code) {
|
|
56
|
+
if (!button || !container || !code) {
|
|
53
57
|
return;
|
|
54
58
|
}
|
|
55
|
-
|
|
56
59
|
code.classList.toggle('wrap');
|
|
60
|
+
button.setAttribute('aria-pressed', String(code.classList.contains('wrap')));
|
|
57
61
|
|
|
58
62
|
setTimeout(() => target.blur(), 500);
|
|
59
63
|
}
|
|
@@ -66,9 +70,9 @@ if (typeof document !== 'undefined') {
|
|
|
66
70
|
|
|
67
71
|
const target = getEventTarget(event) as HTMLElement;
|
|
68
72
|
|
|
69
|
-
if (target.
|
|
73
|
+
if (target.closest(COPY_BUTTON_SELECTOR)) {
|
|
70
74
|
buttonCopyFn(target);
|
|
71
|
-
} else if (target.
|
|
75
|
+
} else if (target.closest(WRAP_BUTTON_SELECTOR)) {
|
|
72
76
|
buttonWrapFn(target);
|
|
73
77
|
}
|
|
74
78
|
});
|
package/src/scss/_code.scss
CHANGED
|
@@ -11,16 +11,16 @@ const wrapInFloatingContainer = (
|
|
|
11
11
|
{lineWrapping}: {lineWrapping: boolean},
|
|
12
12
|
) => {
|
|
13
13
|
const wrappingButton = lineWrapping
|
|
14
|
-
? `<button role="button" class="yfm-code-button yfm-wrapping-button" aria-label="Toggle line wrapping">
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
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"
|
|
21
|
-
/>
|
|
14
|
+
? `<button role="button" class="g-button g-button_view_flat g-button_size_m g-button_pin_round-round g-md-viewer-code-button yfm-code-button yfm-wrapping-button" tabindex="-1" type="button" aria-label="Toggle line wrapping"aria-pressed="false" data-tabindex="0">
|
|
15
|
+
<span class="g-button__icon">
|
|
16
|
+
<span class="g-button__icon-inner"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" class="g-icon" fill="currentColor" stroke="none" aria-hidden="true">
|
|
17
|
+
<svg class="yfm-code-icon yfm-wrapping-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
|
|
18
|
+
<path fill="currentColor" fill-rule="evenodd" 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" clip-rule="evenodd">
|
|
19
|
+
</path>
|
|
22
20
|
</svg>
|
|
23
|
-
</
|
|
21
|
+
</span>
|
|
22
|
+
</span>
|
|
23
|
+
</button>`
|
|
24
24
|
: '';
|
|
25
25
|
|
|
26
26
|
return `
|
|
@@ -28,7 +28,9 @@ const wrapInFloatingContainer = (
|
|
|
28
28
|
${element}
|
|
29
29
|
<div class="yfm-code-floating">
|
|
30
30
|
${wrappingButton}
|
|
31
|
-
<button role="button" class="yfm-code-button yfm-clipboard-button" aria-label="Copy">
|
|
31
|
+
<button role="button" class="g-button g-button_view_flat g-button_size_m g-button_pin_round-round g-md-viewer-code-button yfm-code-button yfm-clipboard-button" aria-label="Copy">
|
|
32
|
+
<span class="g-button__icon g-clipboard-button__icon">
|
|
33
|
+
<span class="g-button__icon-inner">
|
|
32
34
|
<svg width="16" height="16" viewBox="0 0 24 24" class="yfm-code-icon yfm-clipboard-icon" data-animation="${id}">
|
|
33
35
|
<path
|
|
34
36
|
fill="currentColor"
|
|
@@ -61,6 +63,8 @@ const wrapInFloatingContainer = (
|
|
|
61
63
|
/>
|
|
62
64
|
</path>
|
|
63
65
|
</svg>
|
|
66
|
+
</span>
|
|
67
|
+
</span>
|
|
64
68
|
</button>
|
|
65
69
|
</div>
|
|
66
70
|
</div>
|