rehype-image-caption 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 roboin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# rehype-image-caption
+
+rehype plugin to set captions for images in addition to alt text.
+
+## Installation
+
+```sh
+npm install rehype-image-caption
+```
+
+## Example
+
+```javascript
+import remarkParse from "remark-parse";
+import rehypeStringify from "rehype-stringify";
+import remarkRehype from "remark-rehype";
+import { unified } from "unified";
+import rehypeImageCaption from "rehype-image-caption";
+
+const processor = unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeImageCaption)
+    .use(rehypeStringify);
+
+const markdown = `
+![alt text](image.jpg)
+
+![alt text](image.jpg)*caption text*
+
+![alt text](image.jpg)
+*caption text*
+`;
+
+processor.process(markdown).then((result) => {
+    console.log(result.toString());
+});
+```
+
+The above code will output the following:
+
+```html
+<figure>
+    <img src="image.jpg" alt="alt text">
+</figure>
+<figure>
+    <img src="image.jpg" alt="alt text">
+    <figcaption>caption text</figcaption>
+</figure>
+<figure>
+    <img src="image.jpg" alt="alt text">
+    <figcaption>caption text</figcaption>
+</figure>
+```
+
+## Development
+
+### Build
+
+```sh
+npm run build
+```
+
+### Format
+
+```sh
+npm run format
+```
+
+or
+
+```sh
+npm run format:check
+```
+
+### Lint
+
+```sh
+npm run lint
+```
+
+### Test
+
+```sh
+npm run test
+```

package/dist/index.d.ts

@@ -0,0 +1,36 @@
+import type { Plugin } from "unified";
+import type { Root } from "hast";
+/**
+ * `rehype` plugin to set captions for images in addition to alt text.
+ * @returns Transformer
+ * @example
+ *
+ * Input:
+ *
+ * ```markdown
+ * ![alt text](image.jpg)
+ *
+ * ![alt text](image.jpg)*caption text*
+ *
+ * ![alt text](image.jpg)
+ * *caption text*
+ * ```
+ *
+ * Output:
+ *
+ * ```html
+ * <figure>
+ *     <img src="image.jpg" alt="alt text">
+ * </figure>
+ * <figure>
+ *     <img src="image.jpg" alt="alt text">
+ *     <figcaption>caption text</figcaption>
+ * </figure>
+ * <figure>
+ *     <img src="image.jpg" alt="alt text">
+ *     <figcaption>caption text</figcaption>
+ * </figure>
+ * ```
+ */
+declare const rehypeImageCaption: Plugin<[], Root>;
+export default rehypeImageCaption;

package/dist/index.js

@@ -0,0 +1,87 @@
+import { isElement } from "hast-util-is-element";
+import { visit } from "unist-util-visit";
+/**
+ * `rehype` plugin to set captions for images in addition to alt text.
+ * @returns Transformer
+ * @example
+ *
+ * Input:
+ *
+ * ```markdown
+ * ![alt text](image.jpg)
+ *
+ * ![alt text](image.jpg)*caption text*
+ *
+ * ![alt text](image.jpg)
+ * *caption text*
+ * ```
+ *
+ * Output:
+ *
+ * ```html
+ * <figure>
+ *     <img src="image.jpg" alt="alt text">
+ * </figure>
+ * <figure>
+ *     <img src="image.jpg" alt="alt text">
+ *     <figcaption>caption text</figcaption>
+ * </figure>
+ * <figure>
+ *     <img src="image.jpg" alt="alt text">
+ *     <figcaption>caption text</figcaption>
+ * </figure>
+ * ```
+ */
+// eslint-disable-next-line max-lines-per-function
+const rehypeImageCaption = () => {
+    /**
+     * Transformer
+     * @param tree Root node
+     */
+    const transformer = (tree) => {
+        visit(tree, "element", (node) => {
+            if (!(node.tagName === "p" && isElement(node.children[0], "img")))
+                return;
+            // eslint-disable-next-line no-magic-numbers
+            if (node.children.length === 1) {
+                // Image without caption
+                node.tagName = "figure";
+                node.children = [node.children[0]];
+                // eslint-disable-next-line no-magic-numbers
+            }
+            else if (node.children.length === 2 && isElement(node.children[1], "em")) {
+                // Image with caption without line break
+                node.tagName = "figure";
+                node.children = [
+                    node.children[0],
+                    {
+                        type: "element",
+                        tagName: "figcaption",
+                        properties: {},
+                        children: node.children[1].children
+                    }
+                ];
+            }
+            else if (
+            // eslint-disable-next-line no-magic-numbers
+            node.children.length === 3 &&
+                node.children[1].type === "text" &&
+                node.children[1].value.trim() === "" &&
+                isElement(node.children[2], "em")) {
+                // Image with caption with line break
+                node.tagName = "figure";
+                node.children = [
+                    node.children[0],
+                    {
+                        type: "element",
+                        tagName: "figcaption",
+                        properties: {},
+                        children: node.children[2].children
+                    }
+                ];
+            }
+        });
+    };
+    return transformer;
+};
+export default rehypeImageCaption;

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "rehype-image-caption",
+  "version": "1.0.0",
+  "description": "rehype plugin to set captions for images in addition to alt text.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "./dist/"
+  ],
+  "type": "module",
+  "scripts": {
+    "test": "vitest",
+    "build": "tsc",
+    "prepublishOnly": "npm run build",
+    "format": "prettier ./src/ --write",
+    "format:check": "prettier ./src/ --check",
+    "lint": "npx eslint ./src/**/*.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Robot-Inventor/rehype-image-caption.git"
+  },
+  "keywords": [
+    "rehype",
+    "rehype-plugin"
+  ],
+  "author": "Robot-Inventor",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/Robot-Inventor/rehype-image-caption/issues"
+  },
+  "homepage": "https://github.com/Robot-Inventor/rehype-image-caption#readme",
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-jsdoc": "^48.2.1",
+    "prettier": "^3.2.5",
+    "rehype-stringify": "^10.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.0",
+    "typescript": "^5.4.2",
+    "vitest": "^1.4.0"
+  },
+  "dependencies": {
+    "hast-util-is-element": "^3.0.0",
+    "rehype": "^13.0.1",
+    "unified": "^11.0.4",
+    "unist-util-visit": "^5.0.0"
+  }
+}