@md-plugins/md-plugin-containers 0.1.0-alpha.8 → 0.1.0-beta.0

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.
Files changed (5) hide show
  1. package/README.md +108 -54
  2. package/dist/index.d.mts +11 -6
  3. package/dist/index.d.ts +11 -6
  4. package/dist/index.mjs +1 -1
  5. package/package.json +15 -17
package/README.md CHANGED
@@ -14,12 +14,12 @@ A **Markdown-It** plugin that provides custom container support for enhanced Mar
14
14
  Install the plugin via your preferred package manager:
15
15
 
16
16
  ```bash
17
- # With npm:
18
- npm install @md-plugins/md-plugin-containers
19
- # Or with Yarn:
20
- yarn add @md-plugins/md-plugin-containers
21
- # Or with pnpm:
17
+ # with pnpm:
22
18
  pnpm add @md-plugins/md-plugin-containers
19
+ # with Yarn:
20
+ yarn add @md-plugins/md-plugin-containers
21
+ # with npm:
22
+ npm install @md-plugins/md-plugin-containers
23
23
  ```
24
24
 
25
25
  ## Usage
@@ -29,21 +29,69 @@ pnpm add @md-plugins/md-plugin-containers
29
29
  ```js
30
30
  import MarkdownIt from 'markdown-it'
31
31
  import { containersPlugin } from '@md-plugins/md-plugin-containers'
32
+ import container from 'markdown-it-container'
33
+ import type {
34
+ ContainerDetails,
35
+ CreateContainerFn,
36
+ Container,
37
+ ContainerOptions,
38
+ } from '@md-plugins/md-plugin-containers'
32
39
 
33
40
  const md = new MarkdownIt()
34
- md.use(containersPlugin, {
35
- containers: [
36
- { type: 'note', defaultTitle: 'Note' },
37
- { type: 'warning', defaultTitle: 'Warning' },
38
- ],
39
- })
41
+
42
+ const containers: ContainerDetails[] = [
43
+ { type: 'tip', defaultTitle: 'TIP' },
44
+ { type: 'warning', defaultTitle: 'WARNING' },
45
+ { type: 'danger', defaultTitle: 'WARNING' },
46
+ { type: 'details', defaultTitle: 'Details' },
47
+ ]
48
+
49
+ const createContainer: CreateContainerFn = (
50
+ container: Container,
51
+ containerType: string,
52
+ defaultTitle: string,
53
+ md: MarkdownIt,
54
+ ): [Container, string, ContainerOptions] => {
55
+ const containerTypeLen = containerType.length
56
+
57
+ return [
58
+ container,
59
+ containerType,
60
+ {
61
+ render(tokens: Token[], idx: number): string {
62
+ const token = tokens[idx]
63
+ if (!token) {
64
+ return ''
65
+ }
66
+
67
+ // Get the title from token info or use defaultTitle
68
+ const rawTitle = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
69
+
70
+ // Process the title as inline markdown
71
+ const titleHtml = md ? md.renderInline(rawTitle) : rawTitle
72
+
73
+ if (containerType === 'details') {
74
+ return token.nesting === 1
75
+ ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${titleHtml}</summary>\n`
76
+ : '</details>\n'
77
+ }
78
+
79
+ return token.nesting === 1
80
+ ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${titleHtml}</p>\n`
81
+ : '</div>\n'
82
+ },
83
+ },
84
+ ]
85
+ }
86
+
87
+ md.use(containersPlugin, containers, createContainer)
40
88
 
41
89
  const markdownContent = `
42
- :::note
43
- This is a note.
90
+ ::: tip
91
+ This is a tip.
44
92
  :::
45
93
 
46
- :::warning
94
+ ::: warning
47
95
  This is a warning!
48
96
  :::
49
97
  `
@@ -58,12 +106,14 @@ console.log('Rendered Output:', renderedOutput)
58
106
  The rendered output will look like this:
59
107
 
60
108
  ```html
61
- <div class="note">
62
- <p>This is a note.</p>
109
+ <div class="markdown-note markdown-note--tip">
110
+ <p class="markdown-note__title">TIP</p>
111
+ <p>This is a tip container.</p>
63
112
  </div>
64
113
 
65
- <div class="warning">
66
- <p>This is a warning!</p>
114
+ <div class="markdown-note markdown-note--warning">
115
+ <p class="markdown-note__title">WARNING</p>
116
+ <p>This is a warning container.</p>
67
117
  </div>
68
118
  ```
69
119
 
@@ -71,45 +121,45 @@ The rendered output will look like this:
71
121
 
72
122
  The `md-plugin-containers` plugin supports the following options:
73
123
 
74
- | Option | Type | Default | Description |
75
- | ---------- | --------------------------------------------- | ------- | ------------------------------------------------------- |
76
- | containers | Array<{ type: string; defaultTitle: string }> | [] | List of containers with their types and default titles. |
77
- | render | Function | null | Custom rendering function for containers. |
124
+ | Option | Type | Default | Description |
125
+ | ------------ | --------------------------------------------- | ------- | ------------------------------------------------------- |
126
+ | containers | Array<{ type: string; defaultTitle: string }> | [] | List of containers with their types and default titles. |
127
+ | render | Function | null | Custom rendering function for containers. |
128
+ | defaultTitle | string | null | Default title for containers. |
129
+ | md | MarkdownIt | null | Markdown-It instance for rendering. |
78
130
 
79
131
  ## Defining Custom Containers
80
132
 
81
133
  You can define custom containers with their own styles or components:
82
134
 
83
135
  ```js
84
- md.use(containersPlugin, {
85
- containers: [
86
- { type: 'tip', defaultTitle: 'Tip' },
87
- { type: 'important', defaultTitle: 'Important' },
88
- ],
89
- })
90
- ```
91
-
92
- ## Advanced Usage
93
-
94
- ### Custom Rendering Logic
95
-
96
- Override the default rendering logic for containers:
97
-
98
- ```js
99
- md.use(containersPlugin, {
100
- containers: [{ type: 'note', defaultTitle: 'Note' }],
101
- render(tokens, idx) {
102
- const token = tokens[idx]
103
- if (token.nesting === 1) {
104
- // Opening tag
105
- const title = token.info.trim() || 'Note'
106
- return `<div class="custom-note"><strong>${title}:</strong>\n`
107
- } else {
108
- // Closing tag
109
- return `</div>\n`
110
- }
111
- },
112
- })
136
+ function createContainer(container, containerType, defaultTitle, md) {
137
+ const containerTypeLen = containerType.length
138
+
139
+ return [
140
+ container,
141
+ containerType,
142
+ {
143
+ render(tokens, idx) {
144
+ const token = tokens[idx]
145
+ const rawTitle = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
146
+
147
+ // Process the title as inline markdown
148
+ const titleHtml = md ? md.renderInline(rawTitle) : rawTitle
149
+
150
+ if (containerType === 'details') {
151
+ return token.nesting === 1
152
+ ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${titleHtml}</summary>\n`
153
+ : '</details>\n'
154
+ }
155
+
156
+ return token.nesting === 1
157
+ ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${titleHtml}</p>\n`
158
+ : '</div>\n'
159
+ },
160
+ },
161
+ ]
162
+ }
113
163
  ```
114
164
 
115
165
  ## Adding Titles
@@ -117,7 +167,7 @@ md.use(containersPlugin, {
117
167
  Containers can include titles by default or allow custom titles to be specified:
118
168
 
119
169
  ```markup
120
- :::note Custom Note Title
170
+ ::: note Custom Note Title
121
171
  This is a custom note with a title.
122
172
  :::
123
173
  ```
@@ -136,8 +186,8 @@ Rendered Output:
136
186
  Containers can be nested if your rendering logic supports it:
137
187
 
138
188
  ```markup
139
- :::note Outer Note
140
- :::warning Inner Warning
189
+ ::: note Outer Note
190
+ ::: warning Inner Warning
141
191
  Be cautious!
142
192
  ::::::
143
193
  ```
@@ -161,6 +211,10 @@ To run the tests for this plugin, use the following command:
161
211
  pnpm test
162
212
  ```
163
213
 
214
+ ## Documentation
215
+
216
+ In case this README falls out of date, please refer to the [documentation](https://md-plugins.netlify.app/md-plugins/containers/overview) for the latest information.
217
+
164
218
  ## License
165
219
 
166
220
  This plugin is licensed under the MIT License. See the [LICENSE](LICENSE.md) file for details.
package/dist/index.d.mts CHANGED
@@ -3,7 +3,7 @@ import Token from 'markdown-it/lib/token.mjs';
3
3
  import container from 'markdown-it-container';
4
4
 
5
5
  type Container = typeof container;
6
- type CreateContainerFn = (container: Container, type: string, defaultTitle: string) => [Container, string, any?];
6
+ type CreateContainerFn = (container: Container, type: string, defaultTitle: string, md: MarkdownIt) => [Container, string, any?];
7
7
  interface ContainerDetails {
8
8
  type: string;
9
9
  defaultTitle: string;
@@ -32,6 +32,7 @@ interface ContainerOptions {
32
32
  * container: Container,
33
33
  * containerType: string,
34
34
  * defaultTitle: string
35
+ * md: MarkdownIt,
35
36
  * ): [Container, string, ContainerOptions] {
36
37
  * const containerTypeLen = containerType.length;
37
38
  *
@@ -41,17 +42,20 @@ interface ContainerOptions {
41
42
  * {
42
43
  * render(tokens: Token[], idx: number): string {
43
44
  * const token = tokens[idx];
44
- * const title =
45
- * token.info.trim().slice(containerTypeLen).trim() || defaultTitle;
45
+ * // Get the title from token info or use defaultTitle
46
+ * const rawTitle = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
47
+ *
48
+ * // Process the title as inline markdown
49
+ * const titleHtml = md ? md.renderInline(rawTitle) : rawTitle
46
50
  *
47
51
  * if (containerType === 'details') {
48
52
  * return token.nesting === 1
49
- * ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${title}</summary>\n`
53
+ * ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${titleHtml}</summary>\n`
50
54
  * : '</details>\n';
51
55
  * }
52
56
  *
53
57
  * return token.nesting === 1
54
- * ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${title}</p>\n`
58
+ * ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${titleHtml}</p>\n`
55
59
  * : '</div>\n';
56
60
  * },
57
61
  * },
@@ -61,4 +65,5 @@ interface ContainerOptions {
61
65
  */
62
66
  declare function containersPlugin(md: MarkdownIt, containers: ContainerDetails[], createContainer: CreateContainerFn): void;
63
67
 
64
- export { type Container, type ContainerDetails, type ContainerOptions, type CreateContainerFn, containersPlugin };
68
+ export { containersPlugin };
69
+ export type { Container, ContainerDetails, ContainerOptions, CreateContainerFn };
package/dist/index.d.ts CHANGED
@@ -3,7 +3,7 @@ import Token from 'markdown-it/lib/token.mjs';
3
3
  import container from 'markdown-it-container';
4
4
 
5
5
  type Container = typeof container;
6
- type CreateContainerFn = (container: Container, type: string, defaultTitle: string) => [Container, string, any?];
6
+ type CreateContainerFn = (container: Container, type: string, defaultTitle: string, md: MarkdownIt) => [Container, string, any?];
7
7
  interface ContainerDetails {
8
8
  type: string;
9
9
  defaultTitle: string;
@@ -32,6 +32,7 @@ interface ContainerOptions {
32
32
  * container: Container,
33
33
  * containerType: string,
34
34
  * defaultTitle: string
35
+ * md: MarkdownIt,
35
36
  * ): [Container, string, ContainerOptions] {
36
37
  * const containerTypeLen = containerType.length;
37
38
  *
@@ -41,17 +42,20 @@ interface ContainerOptions {
41
42
  * {
42
43
  * render(tokens: Token[], idx: number): string {
43
44
  * const token = tokens[idx];
44
- * const title =
45
- * token.info.trim().slice(containerTypeLen).trim() || defaultTitle;
45
+ * // Get the title from token info or use defaultTitle
46
+ * const rawTitle = token.info.trim().slice(containerTypeLen).trim() || defaultTitle
47
+ *
48
+ * // Process the title as inline markdown
49
+ * const titleHtml = md ? md.renderInline(rawTitle) : rawTitle
46
50
  *
47
51
  * if (containerType === 'details') {
48
52
  * return token.nesting === 1
49
- * ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${title}</summary>\n`
53
+ * ? `<details class="markdown-note markdown-note--${containerType}"><summary class="markdown-note__title">${titleHtml}</summary>\n`
50
54
  * : '</details>\n';
51
55
  * }
52
56
  *
53
57
  * return token.nesting === 1
54
- * ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${title}</p>\n`
58
+ * ? `<div class="markdown-note markdown-note--${containerType}"><p class="markdown-note__title">${titleHtml}</p>\n`
55
59
  * : '</div>\n';
56
60
  * },
57
61
  * },
@@ -61,4 +65,5 @@ interface ContainerOptions {
61
65
  */
62
66
  declare function containersPlugin(md: MarkdownIt, containers: ContainerDetails[], createContainer: CreateContainerFn): void;
63
67
 
64
- export { type Container, type ContainerDetails, type ContainerOptions, type CreateContainerFn, containersPlugin };
68
+ export { containersPlugin };
69
+ export type { Container, ContainerDetails, ContainerOptions, CreateContainerFn };
package/dist/index.mjs CHANGED
@@ -10,7 +10,7 @@ function containersPlugin(md, containers, createContainer) {
10
10
  }
11
11
  containers.forEach(({ type, defaultTitle }) => {
12
12
  try {
13
- md.use(...createContainer(container, type, defaultTitle));
13
+ md.use(...createContainer(container, type, defaultTitle, md));
14
14
  } catch (error) {
15
15
  console.error(`Failed to create container for type: ${type}`, error);
16
16
  }
package/package.json CHANGED
@@ -1,24 +1,29 @@
1
1
  {
2
2
  "name": "@md-plugins/md-plugin-containers",
3
- "version": "0.1.0-alpha.8",
3
+ "version": "0.1.0-beta.0",
4
4
  "description": "A markdown-it plugin for handling custom containers.",
5
5
  "keywords": [
6
6
  "markdown-it",
7
7
  "quasarframework",
8
- "vue",
9
- "types"
8
+ "types",
9
+ "vue"
10
10
  ],
11
11
  "homepage": "https://github.com/md-plugins",
12
12
  "bugs": {
13
13
  "url": "https://github.com/md-plugins/md-plugins/issues"
14
14
  },
15
+ "license": "MIT",
16
+ "author": "hawkeye64 <galbraith64@gmail.com>",
15
17
  "repository": {
16
18
  "type": "git",
17
19
  "url": "git+https://github.com/md-plugins/md-plugins.git"
18
20
  },
19
- "license": "MIT",
20
- "author": "hawkeye64 <galbraith64@gmail.com>",
21
+ "files": [
22
+ "./dist"
23
+ ],
21
24
  "type": "module",
25
+ "module": "./dist/index.mjs",
26
+ "types": "./dist/index.d.ts",
22
27
  "exports": {
23
28
  ".": {
24
29
  "import": {
@@ -27,22 +32,15 @@
27
32
  }
28
33
  }
29
34
  },
30
- "module": "./dist/index.mjs",
31
- "types": "./dist/index.d.ts",
32
- "files": [
33
- "./dist"
34
- ],
35
- "dependencies": {
36
- "markdown-it": "^14.1.0",
37
- "markdown-it-container": "^4.0.0",
38
- "@md-plugins/shared": "0.1.0-alpha.8"
39
- },
40
35
  "publishConfig": {
41
36
  "access": "public"
42
37
  },
43
38
  "devDependencies": {
44
- "@types/markdown-it-container": "^2.0.10",
45
- "@types/markdown-it": "^14.1.2"
39
+ "@types/markdown-it": "^14.1.2",
40
+ "@types/markdown-it-container": "^4.0.0",
41
+ "markdown-it": "^14.1.1",
42
+ "markdown-it-container": "^4.0.0",
43
+ "@md-plugins/shared": "0.1.0-beta.0"
46
44
  },
47
45
  "peerDependencies": {
48
46
  "markdown-it": "^14.1.0",