Skip to content

Commit 3d1ab7a

Browse files
St1ggySt1ggy
committed
chore: hide inline size styling behind feature flag
1 parent 113ea9e commit 3d1ab7a

File tree

5 files changed

+129
-32
lines changed

5 files changed

+129
-32
lines changed

‎src/transform/plugins/imsize/index.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import {PluginSimple} from 'markdown-it';
1+
import {PluginWithOptions} from 'markdown-it';
22

3-
import {imageWithSize} from './plugin';
3+
import {ImsizeOptions, imageWithSize} from './plugin';
44

55
/**
66
* Imsize plugin for markdown-it.
77
* This plugin overloads original image renderer.
88
* Forked from https://github.com/tatsy/markdown-it-imsize
99
*/
1010

11-
const imsize: PluginSimple = (md) => {
12-
md.inline.ruler.before('emphasis', 'image', imageWithSize(md));
11+
const imsize: PluginWithOptions<ImsizeOptions> = (md, opts) => {
12+
md.inline.ruler.before('emphasis', 'image', imageWithSize(md, opts));
1313
};
1414

1515
export = imsize;

‎src/transform/plugins/imsize/plugin.ts

+23-17
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import type Token from 'markdown-it/lib/token';
55
import {ImsizeAttr} from './const';
66
import {parseImageSize} from './helpers';
77

8-
export const imageWithSize = (md: MarkdownIt): ParserInline.RuleInline => {
8+
export type ImsizeOptions = {
9+
inlineSizeStyling?: boolean;
10+
};
11+
12+
export const imageWithSize = (md: MarkdownIt, opts?: ImsizeOptions): ParserInline.RuleInline => {
913
// eslint-disable-next-line complexity
1014
return (state, silent) => {
1115
if (state.src.charCodeAt(state.pos) !== 0x21 /* ! */) {
@@ -207,27 +211,29 @@ export const imageWithSize = (md: MarkdownIt): ParserInline.RuleInline => {
207211
token.attrs.push([ImsizeAttr.Height, height]);
208212
}
209213

210-
let style: string | undefined = '';
214+
if (opts?.inlineSizeStyling) {
215+
let style: string | undefined = '';
211216

212-
const widthWithPercent = width.includes('%');
213-
const heightWithPercent = height.includes('%');
217+
const widthWithPercent = width.includes('%');
218+
const heightWithPercent = height.includes('%');
214219

215-
if (width !== '') {
216-
const widthString = widthWithPercent ? width : `${width}px`;
217-
style += `width: ${widthString};`;
218-
}
220+
if (width !== '') {
221+
const widthString = widthWithPercent ? width : `${width}px`;
222+
style += `width: ${widthString};`;
223+
}
219224

220-
if (height !== '') {
221-
if (width !== '' && !heightWithPercent && !widthWithPercent) {
222-
style += `aspect-ratio: ${width} / ${height};height: auto;`;
223-
} else {
224-
const heightString = heightWithPercent ? height : `${height}px`;
225-
style += `height: ${heightString};`;
225+
if (height !== '') {
226+
if (width !== '' && !heightWithPercent && !widthWithPercent) {
227+
style += `aspect-ratio: ${width} / ${height};height: auto;`;
228+
} else {
229+
const heightString = heightWithPercent ? height : `${height}px`;
230+
style += `height: ${heightString};`;
231+
}
226232
}
227-
}
228233

229-
if (style) {
230-
token.attrs.push([ImsizeAttr.Style, style]);
234+
if (style) {
235+
token.attrs.push([ImsizeAttr.Style, style]);
236+
}
231237
}
232238
}
233239

‎test/data/imsize/imsize-fixtures.txt

+11-11
Original file line numberDiff line numberDiff line change
@@ -226,7 +226,7 @@ Coverage. Image
226226
.
227227
![test]( x =100x200)
228228
.
229-
<p><img src="x" alt="test" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
229+
<p><img src="x" alt="test" width="100" height="200"></p>
230230
.
231231
.
232232
![test]( x =x)
@@ -236,17 +236,17 @@ Coverage. Image
236236
.
237237
![test]( x =100x)
238238
.
239-
<p><img src="x" alt="test" width="100" style="width: 100px;"></p>
239+
<p><img src="x" alt="test" width="100"></p>
240240
.
241241
.
242242
![test]( x =x200)
243243
.
244-
<p><img src="x" alt="test" height="200" style="height: 200px;"></p>
244+
<p><img src="x" alt="test" height="200"></p>
245245
.
246246
.
247247
![test]( x "title" =100x200)
248248
.
249-
<p><img src="x" alt="test" title="title" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
249+
<p><img src="x" alt="test" title="title" width="100" height="200"></p>
250250
.
251251
.
252252
![test]( x =WxH )
@@ -266,7 +266,7 @@ Coverage. Image
266266
.
267267
![test](http://this.is.test.jpg =100x200)
268268
.
269-
<p><img src="http://this.is.test.jpg" alt="test" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
269+
<p><img src="http://this.is.test.jpg" alt="test" width="100" height="200"></p>
270270
.
271271
.
272272
![test](<x =100x200)
@@ -276,32 +276,32 @@ Coverage. Image
276276
.
277277
![test](<x> =100x200)
278278
.
279-
<p><img src="x" alt="test" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
279+
<p><img src="x" alt="test" width="100" height="200"></p>
280280
.
281281
.
282282
![test](test =100%x)
283283
.
284-
<p><img src="test" alt="test" width="100%" style="width: 100%;"></p>
284+
<p><img src="test" alt="test" width="100%"></p>
285285
.
286286
.
287287
![test](test =x100%)
288288
.
289-
<p><img src="test" alt="test" height="100%" style="height: 100%;"></p>
289+
<p><img src="test" alt="test" height="100%"></p>
290290
.
291291
.
292292
![test](test =100%x100%)
293293
.
294-
<p><img src="test" alt="test" width="100%" height="100%" style="width: 100%;height: 100%;"></p>
294+
<p><img src="test" alt="test" width="100%" height="100%"></p>
295295
.
296296
.
297297
![test](test =100%x200)
298298
.
299-
<p><img src="test" alt="test" width="100%" height="200" style="width: 100%;height: 200px;"></p>
299+
<p><img src="test" alt="test" width="100%" height="200"></p>
300300
.
301301
.
302302
![test](test =100x100%)
303303
.
304-
<p><img src="test" alt="test" width="100" height="100%" style="width: 100px;height: 100%;"></p>
304+
<p><img src="test" alt="test" width="100" height="100%"></p>
305305
.
306306

307307
Coverage. Link

‎test/data/imsize/imsize-inlineSizeStyling-fixtures.txt

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
Coverage. Image with inlineStyling
2+
.
3+
![test]( x =100x200)
4+
.
5+
<p><img src="x" alt="test" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
6+
.
7+
.
8+
![test]( x =x)
9+
.
10+
<p><img src="x" alt="test"></p>
11+
.
12+
.
13+
![test]( x =100x)
14+
.
15+
<p><img src="x" alt="test" width="100" style="width: 100px;"></p>
16+
.
17+
.
18+
![test]( x =x200)
19+
.
20+
<p><img src="x" alt="test" height="200" style="height: 200px;"></p>
21+
.
22+
.
23+
![test]( x "title" =100x200)
24+
.
25+
<p><img src="x" alt="test" title="title" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
26+
.
27+
.
28+
![test]( x =WxH )
29+
.
30+
<p>![test]( x =WxH )</p>
31+
.
32+
.
33+
![test]( x = 100x200 )
34+
.
35+
<p>![test]( x = 100x200 )</p>
36+
.
37+
.
38+
![test]( x =aaaxbbb )
39+
.
40+
<p>![test]( x =aaaxbbb )</p>
41+
.
42+
.
43+
![test](http://this.is.test.jpg =100x200)
44+
.
45+
<p><img src="http://this.is.test.jpg" alt="test" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
46+
.
47+
.
48+
![test](<x =100x200)
49+
.
50+
<p>![test](&lt;x =100x200)</p>
51+
.
52+
.
53+
![test](<x> =100x200)
54+
.
55+
<p><img src="x" alt="test" width="100" height="200" style="width: 100px;aspect-ratio: 100 / 200;height: auto;"></p>
56+
.
57+
.
58+
![test](test =100%x)
59+
.
60+
<p><img src="test" alt="test" width="100%" style="width: 100%;"></p>
61+
.
62+
.
63+
![test](test =x100%)
64+
.
65+
<p><img src="test" alt="test" height="100%" style="height: 100%;"></p>
66+
.
67+
.
68+
![test](test =100%x100%)
69+
.
70+
<p><img src="test" alt="test" width="100%" height="100%" style="width: 100%;height: 100%;"></p>
71+
.
72+
.
73+
![test](test =100%x200)
74+
.
75+
<p><img src="test" alt="test" width="100%" height="200" style="width: 100%;height: 200px;"></p>
76+
.
77+
.
78+
![test](test =100x100%)
79+
.
80+
<p><img src="test" alt="test" width="100" height="100%" style="width: 100px;height: 100%;"></p>
81+
.

‎test/imsize.test.ts

+10
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,13 @@ describe('imsize', () => {
1414

1515
generate(path.join(__dirname, 'data/imsize/imsize-fixtures.txt'), md);
1616
});
17+
18+
describe('imsize with inlineStyling', () => {
19+
const md = new MarkdownIt({
20+
html: true,
21+
linkify: false,
22+
typographer: false,
23+
}).use(imsize, {inlineSizeStyling: true});
24+
25+
generate(path.join(__dirname, 'data/imsize/imsize-inlineSizeStyling-fixtures.txt'), md);
26+
});

0 commit comments

Comments
 (0)