@md-plugins/md-plugin-image 0.1.0-alpha.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024-present, Jeff Galbraith
+
+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,72 @@
+# @md-plugins/md-plugin-image
+
+A **Markdown-It** plugin that enhances image rendering by adding customizable CSS classes. This allows for consistent styling and seamless integration into design systems, making it easy to apply specific layouts or effects to images.
+
+## Features
+
+- Adds a customizable CSS class to `<img>` elements.
+- Supports a default class that can be overridden via plugin options.
+- Enhances image styling and layout consistency.
+
+## Installation
+
+Install the plugin via your preferred package manager:
+
+```bash
+# With npm:
+npm install @md-plugins/md-plugin-image
+# Or with Yarn:
+yarn add @md-plugins/md-plugin-image
+# Or with pnpm:
+pnpm add @md-plugins/md-plugin-image
+```
+
+## Usage
+
+### Basic Setup
+
+```js
+import MarkdownIt from 'markdown-it';
+import { imagePlugin } from '@md-plugins/md-plugin-image';
+
+const md = new MarkdownIt();
+md.use(imagePlugin, {
+  imageClass: 'custom-image-class',
+});
+
+const markdownContent = `
+![Alt text](example.jpg)
+`;
+
+const renderedOutput = md.render(markdownContent);
+
+console.log('Rendered Output:', renderedOutput);
+```
+
+### Example Output
+
+The rendered output will include the specified CSS class:
+
+```html
+<img src="example.jpg" alt="Alt text" class="custom-image-class" />
+```
+
+## Options
+
+The `md-plugin-image` plugin supports the following options:
+
+| Option     | Type   | Default          | Description                            |
+| ---------- | ------ | ---------------- | -------------------------------------- |
+| imageClass | string | 'markdown-image' | CSS class to apply to all `<img>` tags |
+
+## Testing
+
+Run the tests to ensure the plugin behaves as expected:
+
+```bash
+pnpm test
+```
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import MarkdownIt from 'markdown-it';
+
+declare const imagePlugin: (md: MarkdownIt, { imageClass }?: {
+    imageClass?: string | undefined;
+}) => void;
+
+interface ImagePluginOptions {
+    /**
+     * The class for the image
+     *
+     * @default 'markdown-image'
+     */
+    imageClass?: string;
+}
+
+export { type ImagePluginOptions, imagePlugin };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import MarkdownIt from 'markdown-it';
+
+declare const imagePlugin: (md: MarkdownIt, { imageClass }?: {
+    imageClass?: string | undefined;
+}) => void;
+
+interface ImagePluginOptions {
+    /**
+     * The class for the image
+     *
+     * @default 'markdown-image'
+     */
+    imageClass?: string;
+}
+
+export { type ImagePluginOptions, imagePlugin };

package/dist/index.mjs

@@ -0,0 +1,26 @@
+const imagePlugin = (md, { imageClass = "markdown-image" } = {}) => {
+  const originalImageRender = md.renderer.rules.image;
+  md.renderer.rules.image = (tokens, idx, options, env, self) => {
+    const token = tokens[idx];
+    if (!token) {
+      return self.renderToken(tokens, idx, options);
+    }
+    const existingClass = token.attrGet("class") || "";
+    const combinedClass = [existingClass, imageClass].filter(Boolean).join(" ");
+    token.attrSet("class", combinedClass);
+    if (token.content) {
+      const altIndex = token.attrIndex("alt");
+      if (altIndex >= 0 && token.attrs) {
+        const altValue = token.attrs[altIndex][1];
+        if (!altValue) {
+          token.attrs[altIndex][1] = token.content;
+        }
+      } else {
+        token.attrPush(["alt", token.content]);
+      }
+    }
+    return originalImageRender ? originalImageRender(tokens, idx, options, env, self) : self.renderToken(tokens, idx, options);
+  };
+};
+
+export { imagePlugin };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@md-plugins/md-plugin-image",
+  "version": "0.1.0-alpha.1",
+  "description": "A markdown-it plugin for handling images.",
+  "keywords": [
+    "markdown-it",
+    "quasarframework",
+    "vue",
+    "types"
+  ],
+  "homepage": "https://github.com/md-plugins",
+  "bugs": {
+    "url": "https://github.com/md-plugins/md-plugins/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/md-plugins/md-plugins.git"
+  },
+  "license": "MIT",
+  "author": "hawkeye64 <galbraith64@gmail.com>",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "./dist"
+  ],
+  "dependencies": {
+    "@types/markdown-it": "^14.1.2",
+    "markdown-it": "^14.1.0",
+    "@md-plugins/shared": "0.1.0-alpha.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "clean": "rm -rf dist",
+    "test": "vitest"
+  }
+}