@md-plugins/md-plugin-table 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,158 @@
+# @md-plugins/md-plugin-table
+
+A **Markdown-It** plugin that customizes the rendering of tables in Markdown. This plugin allows developers to style and structure tables with additional attributes, making them more visually appealing and compatible with design systems.
+
+## Features
+
+- Adds customizable CSS classes to `<table>`, `<thead>`, `<tbody>`, `<tr>`, `<th>`, and `<td>` elements.
+- Supports custom attributes for `<table>` elements.
+- Replaces the default `<table>` tag with a configurable custom tag (e.g., `q-markup-table`).
+- Flexible configuration for adapting to different frameworks or design systems like Quasar.
+
+## Installation
+
+Install the plugin via your preferred package manager:
+
+```bash
+# With npm:
+npm install @md-plugins/md-plugin-table
+# Or with Yarn:
+yarn add @md-plugins/md-plugin-table
+# Or with pnpm:
+pnpm add @md-plugins/md-plugin-table
+```
+
+## Usage
+
+### Basic Setup
+
+```js
+import MarkdownIt from 'markdown-it';
+import { tablePlugin } from '@md-plugins/md-plugin-table';
+
+const md = new MarkdownIt();
+md.use(tablePlugin, {
+  tableClass: 'custom-table-class',
+  tableToken: 'custom-table-tag',
+  tableAttributes: [
+    [':wrap-cells', 'true'],
+    [':flat', 'true'],
+  ],
+});
+
+const markdownContent = `
+| Header 1 | Header 2 |
+|----------|----------|
+| Cell 1   | Cell 2   |
+| Cell 3   | Cell 4   |
+`;
+
+const renderedOutput = md.render(markdownContent);
+
+console.log('Rendered Output:', renderedOutput);
+```
+
+### Example Output
+
+For the example above, the plugin produces the following output:
+
+```html
+<custom-table-tag class="custom-table-class" :wrap-cells="true" :flat="true">
+  <thead>
+    <tr>
+      <th>Header 1</th>
+      <th>Header 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Cell 1</td>
+      <td>Cell 2</td>
+    </tr>
+    <tr>
+      <td>Cell 3</td>
+      <td>Cell 4</td>
+    </tr>
+  </tbody>
+</custom-table-tag>
+```
+
+## Options
+
+The `md-plugin-table` plugin supports the following options:
+
+| Option           | Type   | Default               | Description                                        |
+| ---------------- | ------ | --------------------- | -------------------------------------------------- |
+| tableClass       | string | 'markdown-page-table' | CSS class for the `<table>` or custom tag.         |
+| tableToken       | string | 'q-markup-table'      | Tag name to replace the default `<table>` tag.     |
+| tableAttributes  | Array  | []                    | Array of attribute name-value pairs for the table. |
+| tableHeaderClass | string | 'text-left'           | CSS class for `<th>` elements.                     |
+| tableRowClass    | string | ''                    | CSS class for `<tr>` elements.                     |
+| tableCellClass   | string | ''                    | CSS class for `<td>` elements.                     |
+
+## Advanced Usage
+
+### Custom Styling
+
+Apply custom styling to tables by defining your own classes:
+
+```js
+md.use(tablePlugin, {
+  tableClass: 'custom-table',
+  tableHeaderClass: 'custom-header',
+  tableRowClass: 'custom-row',
+  tableCellClass: 'custom-cell',
+});
+```
+
+Renered output:
+
+```html
+<q-markup-table class="custom-table">
+  <thead>
+    <tr class="custom-row">
+      <th class="custom-header">Header 1</th>
+      <th class="custom-header">Header 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr class="custom-row">
+      <td class="custom-cell">Cell 1</td>
+      <td class="custom-cell">Cell 2</td>
+    </tr>
+  </tbody>
+</q-markup-table>
+```
+
+### Custom Attributes
+
+Add attributes for frameworks like Quasar:
+
+```js
+md.use(tablePlugin, {
+  tableAttributes: [
+    [':bordered', 'true'],
+    [':flat', 'true'],
+  ],
+});
+```
+
+Rendered output:
+
+```html
+<q-markup-table class="markdown-page-table" :bordered="true" :flat="true">
+  ...
+</q-markup-table>
+```
+
+## Testing
+
+Run the unit 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,44 @@
+import { PluginWithOptions } from 'markdown-it';
+
+interface TablePluginOptions {
+    /**
+     * The class for the table
+     *
+     * @default 'markdown-page-table'
+     */
+    tableClass?: string;
+    /**
+     * The class for the table header
+     *
+     * @default 'text-left'
+     */
+    tableHeaderClass?: string;
+    /**
+     * The class for the table row
+     *
+     * @default ''
+     */
+    tableRowClass?: string;
+    /**
+     * The class for the table cell
+     *
+     * @default ''
+     */
+    tableCellClass?: string;
+    /**
+     * The token for the table
+     *
+     * @default 'q-markup-table' (replaces 'table')
+     */
+    tableToken?: string;
+    /**
+     * The attributes for the table
+     *
+     * @default [ [':wrap-cells', 'true'],[':flat', 'true'],[':bordered', 'true'] ]
+     */
+    tableAttributes?: [string, any][];
+}
+
+declare const tablePlugin: PluginWithOptions<TablePluginOptions>;
+
+export { type TablePluginOptions, tablePlugin };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import { PluginWithOptions } from 'markdown-it';
+
+interface TablePluginOptions {
+    /**
+     * The class for the table
+     *
+     * @default 'markdown-page-table'
+     */
+    tableClass?: string;
+    /**
+     * The class for the table header
+     *
+     * @default 'text-left'
+     */
+    tableHeaderClass?: string;
+    /**
+     * The class for the table row
+     *
+     * @default ''
+     */
+    tableRowClass?: string;
+    /**
+     * The class for the table cell
+     *
+     * @default ''
+     */
+    tableCellClass?: string;
+    /**
+     * The token for the table
+     *
+     * @default 'q-markup-table' (replaces 'table')
+     */
+    tableToken?: string;
+    /**
+     * The attributes for the table
+     *
+     * @default [ [':wrap-cells', 'true'],[':flat', 'true'],[':bordered', 'true'] ]
+     */
+    tableAttributes?: [string, any][];
+}
+
+declare const tablePlugin: PluginWithOptions<TablePluginOptions>;
+
+export { type TablePluginOptions, tablePlugin };

package/dist/index.mjs

@@ -0,0 +1,48 @@
+const tablePlugin = (md, {
+  tableClass = "markdown-page-table",
+  tableHeaderClass = "text-left",
+  tableRowClass = "",
+  tableCellClass = "",
+  tableToken = "q-markup-table",
+  tableAttributes = []
+} = {}) => {
+  const render = md.renderer.render.bind(md.renderer);
+  md.renderer.render = (tokens, options, env) => {
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+      if (!token) {
+        continue;
+      }
+      switch (token.type) {
+        case "table_open":
+          token.tag = tableToken;
+          token.attrSet("class", tableClass);
+          for (const [attrName, attrValue] of tableAttributes) {
+            token.attrSet(attrName, String(attrValue));
+          }
+          break;
+        case "table_close":
+          token.tag = tableToken;
+          break;
+        case "th_open":
+          if (tableHeaderClass) {
+            token.attrSet("class", tableHeaderClass);
+          }
+          break;
+        case "tr_open":
+          if (tableRowClass) {
+            token.attrSet("class", tableRowClass);
+          }
+          break;
+        case "td_open":
+          if (tableCellClass) {
+            token.attrSet("class", tableCellClass);
+          }
+          break;
+      }
+    }
+    return render(tokens, options, env);
+  };
+};
+
+export { tablePlugin };

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@md-plugins/md-plugin-table",
+  "version": "0.1.0-alpha.1",
+  "description": "A markdown-it plugin for handling tables with custom tag and styles.",
+  "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"
+  }
+}