rehype-image-caption 2.0.16 → 2.1.1
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 +9 -0
- package/dist/index.d.ts +10 -1
- package/dist/index.js +19 -15
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -53,6 +53,15 @@ The above code will output the following:
|
|
|
53
53
|
</figure>
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
+
## Options
|
|
57
|
+
|
|
58
|
+
### `wrapImagesWithoutCaptions`
|
|
59
|
+
|
|
60
|
+
- Type: `boolean`
|
|
61
|
+
- Default: `true`
|
|
62
|
+
|
|
63
|
+
Wrap images without captions in a `<figure>` tag. If set to `false`, images without captions will not be wrapped in a `<figure>` tag.
|
|
64
|
+
|
|
56
65
|
## Development
|
|
57
66
|
|
|
58
67
|
### Build
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,17 @@
|
|
|
1
1
|
import "mdast-util-mdx-jsx";
|
|
2
2
|
import type { Root } from "hast";
|
|
3
3
|
import type { Plugin } from "unified";
|
|
4
|
+
interface Options {
|
|
5
|
+
/**
|
|
6
|
+
* Wrap images without captions in a `<figure>` tag.
|
|
7
|
+
* If set to `false`, images without captions will not be wrapped in a `<figure>` tag.
|
|
8
|
+
* @default `true`
|
|
9
|
+
*/
|
|
10
|
+
wrapImagesWithoutCaptions?: boolean;
|
|
11
|
+
}
|
|
4
12
|
/**
|
|
5
13
|
* `rehype` plugin to set captions for images in addition to alt text.
|
|
14
|
+
* @param options Options
|
|
6
15
|
* @returns Transformer
|
|
7
16
|
* @example
|
|
8
17
|
*
|
|
@@ -33,5 +42,5 @@ import type { Plugin } from "unified";
|
|
|
33
42
|
* </figure>
|
|
34
43
|
* ```
|
|
35
44
|
*/
|
|
36
|
-
declare const rehypeImageCaption: Plugin<[], Root>;
|
|
45
|
+
declare const rehypeImageCaption: Plugin<[Options?], Root>;
|
|
37
46
|
export default rehypeImageCaption;
|
package/dist/index.js
CHANGED
|
@@ -18,8 +18,15 @@ const isImage = (node) => {
|
|
|
18
18
|
return false;
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
|
+
const ImageChildCounts = {
|
|
22
|
+
SINGLE_IMAGE: 1,
|
|
23
|
+
IMAGE_WITH_CAPTION: 2,
|
|
24
|
+
IMAGE_WITH_LINEBREAK_CAPTION: 3,
|
|
25
|
+
IMAGE_WITH_REMARK_BREAKS_CAPTION: 4
|
|
26
|
+
};
|
|
21
27
|
/**
|
|
22
28
|
* `rehype` plugin to set captions for images in addition to alt text.
|
|
29
|
+
* @param options Options
|
|
23
30
|
* @returns Transformer
|
|
24
31
|
* @example
|
|
25
32
|
*
|
|
@@ -51,7 +58,7 @@ const isImage = (node) => {
|
|
|
51
58
|
* ```
|
|
52
59
|
*/
|
|
53
60
|
// eslint-disable-next-line max-lines-per-function
|
|
54
|
-
const rehypeImageCaption = () => {
|
|
61
|
+
const rehypeImageCaption = (options = { wrapImagesWithoutCaptions: true }) => {
|
|
55
62
|
/**
|
|
56
63
|
* Transformer
|
|
57
64
|
* @param tree Root node
|
|
@@ -65,15 +72,14 @@ const rehypeImageCaption = () => {
|
|
|
65
72
|
return;
|
|
66
73
|
if (!(node.tagName === "p" && isImage(firstChild)))
|
|
67
74
|
return;
|
|
68
|
-
//
|
|
69
|
-
if (node.children.length ===
|
|
70
|
-
// Image without caption
|
|
75
|
+
// Image without caption
|
|
76
|
+
if (node.children.length === ImageChildCounts.SINGLE_IMAGE && options.wrapImagesWithoutCaptions) {
|
|
71
77
|
node.tagName = "figure";
|
|
72
78
|
node.children = [firstChild];
|
|
73
|
-
|
|
79
|
+
return;
|
|
74
80
|
}
|
|
75
|
-
|
|
76
|
-
|
|
81
|
+
// Image with caption without line break
|
|
82
|
+
if (node.children.length === ImageChildCounts.IMAGE_WITH_CAPTION && isElement(node.children[1], "em")) {
|
|
77
83
|
node.tagName = "figure";
|
|
78
84
|
node.children = [
|
|
79
85
|
firstChild,
|
|
@@ -84,15 +90,14 @@ const rehypeImageCaption = () => {
|
|
|
84
90
|
children: node.children[1].children
|
|
85
91
|
}
|
|
86
92
|
];
|
|
93
|
+
return;
|
|
87
94
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
node.children.length === 3 &&
|
|
95
|
+
// Image with caption with line break
|
|
96
|
+
if (node.children.length === ImageChildCounts.IMAGE_WITH_LINEBREAK_CAPTION &&
|
|
91
97
|
node.children[1] &&
|
|
92
98
|
node.children[1].type === "text" &&
|
|
93
99
|
node.children[1].value.trim() === "" &&
|
|
94
100
|
isElement(node.children[2], "em")) {
|
|
95
|
-
// Image with caption with line break
|
|
96
101
|
node.tagName = "figure";
|
|
97
102
|
node.children = [
|
|
98
103
|
firstChild,
|
|
@@ -103,16 +108,15 @@ const rehypeImageCaption = () => {
|
|
|
103
108
|
children: node.children[2].children
|
|
104
109
|
}
|
|
105
110
|
];
|
|
111
|
+
return;
|
|
106
112
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
node.children.length === 4 &&
|
|
113
|
+
// Image with caption with line break (with remark-breaks plugin)
|
|
114
|
+
if (node.children.length === ImageChildCounts.IMAGE_WITH_REMARK_BREAKS_CAPTION &&
|
|
110
115
|
isElement(node.children[1], "br") &&
|
|
111
116
|
node.children[2] &&
|
|
112
117
|
node.children[2].type === "text" &&
|
|
113
118
|
node.children[2].value.trim() === "" &&
|
|
114
119
|
isElement(node.children[3], "em")) {
|
|
115
|
-
// Image with caption with line break (with remark-breaks plugin)
|
|
116
120
|
node.tagName = "figure";
|
|
117
121
|
node.children = [
|
|
118
122
|
firstChild,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rehype-image-caption",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.1",
|
|
4
4
|
"description": "rehype plugin to set captions for images in addition to alt text.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"provenance": true
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"remark-breaks": "^4.0.0",
|
|
47
47
|
"remark-parse": "^11.0.0",
|
|
48
48
|
"remark-rehype": "^11.1.0",
|
|
49
|
-
"typescript": "^5.
|
|
49
|
+
"typescript": "^5.9.2",
|
|
50
50
|
"vitest": "^3.0.0"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|