@nakobase/nakobase-md-html 1.1.0 → 1.2.1

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAmB1C,eAAO,MAAM,QAAQ,GACnB,UAAU,MAAM,EAChB,UAAU,eAAe,KACxB,MA8BF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAkB1C,eAAO,MAAM,QAAQ,GACnB,UAAU,MAAM,EAChB,UAAU,eAAe,KACxB,MA6BF,CAAC"}

package/dist/esm/index.js

@@ -7,7 +7,6 @@ import { mdCustomBlocks } from './utils/md-custom-blocks';
 import { CONTAINER_TYPES } from './constants';
 
 // plugins
-const MdItImSize = require('@steelydylan/markdown-it-imsize').default;
 const MdItInlineComments = require('markdown-it-inline-comments');
 const MdItContainer = require('markdown-it-container');
 const MdItTaskLists = require('markdown-it-task-lists');
@@ -26,7 +25,7 @@ export const mdToHtml = (markdown, options) => {
   md.linkify.set({
     fuzzyEmail: false
   });
-  md.use(MdItInlineComments).use(MdItImSize).use(MdItTaskLists, {
+  md.use(MdItInlineComments).use(MdItTaskLists, {
     enabled: true
   }).use(MdItContainer, CONTAINER_TYPES.DETAILS, detailsOptions).use(MdItContainer, CONTAINER_TYPES.BOX, boxOptions).use(MdItContainer, CONTAINER_TYPES.BUBBLE, bubbleOptions).use(MdItContainer, CONTAINER_TYPES.BUBBLE_IMAGE, bubbleImageOptions).use(mdCustomBlocks);
   if (codeHighlight) {

package/dist/esm/sanitizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sanitizer.d.ts","sourceRoot":"","sources":["../../src/sanitizer.ts"],"names":[],"mappings":"AA4BA,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,KAAG,MA8BpC,CAAC"}
+{"version":3,"file":"sanitizer.d.ts","sourceRoot":"","sources":["../../src/sanitizer.ts"],"names":[],"mappings":"AAgCA,eAAO,MAAM,QAAQ,GAAI,MAAM,MAAM,KAAG,MAuBpC,CAAC"}

package/dist/esm/sanitizer.js

@@ -1,10 +1,12 @@
 // sanitizer.ts
 import sanitizeHtml, { defaults } from 'sanitize-html';
-const extendedTags = ['iframe', 'code', 'details', 'summary', 'circle', 'img', 'input', 'pre', 'span'];
+const extendedTags = ['iframe', 'code', 'details', 'summary', 'circle', 'img', 'input', 'pre', 'span', 'picture', 'source'];
 const extendedAttributes = {
   a: [...(defaults.allowedAttributes.a || []), 'id', 'class', 'data-line'],
   iframe: ['src', 'width', 'height', 'allow', 'sandbox', 'frameborder'],
   input: ['type', 'checked', 'disabled', 'readonly', 'value', 'class'],
+  source: ['srcset', 'type'],
+  img: ['src', 'alt', 'width', 'height'],
   ul: ['class'],
   ol: ['class'],
   li: ['class'],
@@ -31,11 +33,5 @@ export const sanitize = html => sanitizeHtml(html, {
       'text-align': [/^(?:left|right|center|justify)$/]
     }
   },
-  transformTags: {
-    a: sanitizeHtml.simpleTransform('a', {
-      target: '_blank',
-      rel: 'noopener noreferrer'
-    })
-  },
   disallowedTagsMode: 'discard'
 });

package/dist/esm/utils/md-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"md-container.d.ts","sourceRoot":"","sources":["../../../src/utils/md-container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,uBAAuB,CAAC;AAK/C,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AAMF,eAAO,MAAM,aAAa;uBACI,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CA4B/C,CAAC;AAMF,eAAO,MAAM,kBAAkB;uBACD,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAwB/C,CAAC;AAOF,eAAO,MAAM,UAAU;uBACO,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC"}
+{"version":3,"file":"md-container.d.ts","sourceRoot":"","sources":["../../../src/utils/md-container.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,uBAAuB,CAAC;AAK/C,eAAO,MAAM,cAAc;uBACG,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC;AAMF,eAAO,MAAM,aAAa;uBACI,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CA2C/C,CAAC;AAMF,eAAO,MAAM,kBAAkB;uBACD,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CA4C/C,CAAC;AAOF,eAAO,MAAM,UAAU;uBACO,MAAM;qBAGR,KAAK,EAAE,OAAO,MAAM;CAc/C,CAAC"}

package/dist/esm/utils/md-container.js

@@ -19,7 +19,7 @@ export const detailsOptions = {
 };
 
 // Bubble
-// ::: bubble alt="alt" src="src" width="100" height="100" pos="left"
+// ::: bubble alt="alt" src="src" webp="src.webp" width="100" height="100" pos="left"
 // markdown
 // :::
 export const bubbleOptions = {
@@ -41,9 +41,17 @@ export const bubbleOptions = {
         alt = '',
         width = '100',
         height = '100',
-        pos = 'left'
+        pos = 'left',
+        webp = ''
       } = attrs;
-      return `<div class="bubble ${pos}">` + `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" ` + `width="${escapeHtml(width)}" height="${escapeHtml(height)}">` + `<div class="bubble-content">`;
+      const imgHtml = `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" ` + `width="${escapeHtml(width)}" height="${escapeHtml(height)}">`;
+      let imageElement;
+      if (webp) {
+        imageElement = '<picture>' + `<source srcset="${escapeHtml(webp)}" type="image/webp">` + imgHtml + '</picture>';
+      } else {
+        imageElement = imgHtml;
+      }
+      return `<div class="bubble ${pos}">` + imageElement + `<div class="bubble-content">`;
     } else {
       return `</div></div>\n`;
     }
@@ -51,17 +59,17 @@ export const bubbleOptions = {
 };
 
 // BubbleImage
-// ::: bubbleImage alt="alt" src="src" width="100" height="100" pos="left"
+// ::: bubble-image alt="alt" src="src" webp="src.webp" width="640" height="360"
 // markdown
 // :::
 export const bubbleImageOptions = {
   validate: function (params) {
-    return /^bubbleImage(?:\s+\w+="[^"]*")*\s*$/.test(params.trim());
+    return /^bubble-image(?:\s+\w+="[^"]*")*\s*$/.test(params.trim());
   },
   render: function (tokens, idx) {
     const isOpeningTag = tokens[idx].nesting === 1;
     if (isOpeningTag) {
-      const info = tokens[idx].info.trim().replace(/^bubbleImage\s*/, '');
+      const info = tokens[idx].info.trim().replace(/^bubble-image\s*/, '');
       const regex = /(\w+)="([^"]*)"/g;
       const attrs = {};
       let m;
@@ -72,9 +80,17 @@ export const bubbleImageOptions = {
         src = '',
         alt = '',
         width = '640',
-        height = '360'
+        height = '360',
+        webp = ''
       } = attrs;
-      return `<div class="bubble-image">` + `<div class="bubble-image-wrapper">` + `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" ` + `width="${escapeHtml(width)}" height="${escapeHtml(height)}">` + `</div>` + `<div class="bubble-image-content">`;
+      const imgHtml = `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" ` + `width="${escapeHtml(width)}" height="${escapeHtml(height)}">`;
+      let imageElement;
+      if (webp) {
+        imageElement = '<picture>' + `<source srcset="${escapeHtml(webp)}" type="image/webp">` + imgHtml + '</picture>';
+      } else {
+        imageElement = imgHtml;
+      }
+      return `<div class="bubble-image">` + `<div class="bubble-image-wrapper">` + imageElement + `</div>` + `<div class="bubble-image-content">`;
     } else {
       return `</div></div>\n`;
     }

package/dist/esm/utils/md-custom-blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"md-custom-blocks.d.ts","sourceRoot":"","sources":["../../../src/utils/md-custom-blocks.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAKrC,wBAAgB,cAAc,CAAC,EAAE,EAAE,UAAU,QAiC5C"}
+{"version":3,"file":"md-custom-blocks.d.ts","sourceRoot":"","sources":["../../../src/utils/md-custom-blocks.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,aAAa,CAAC;AAsDrC,wBAAgB,cAAc,CAAC,EAAE,EAAE,UAAU,QAkC5C"}

package/dist/esm/utils/md-custom-blocks.js

@@ -1,27 +1,75 @@
 import { escapeHtml } from 'markdown-it/lib/common/utils';
-const SEPARATOR = '|';
-export function mdCustomBlocks(md) {
-  // External Link with Icon
-  // @[link-external](url|text)
-  md.block.ruler.before('paragraph', 'link-external', (state, startLine, endLine, silent) => {
-    const start = state.bMarks[startLine] + state.tShift[startLine];
-    const max = state.eMarks[startLine];
-    const content = state.src.slice(start, max).trim();
-
-    // Check if it's a link-external block
-    const match = content.match(/^@\[link-external\]\((.*?)\)$/);
-    if (!match) return false;
+function escapeRegExp(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+function registerKVBlock(md, block) {
+  const escapedMarker = escapeRegExp(block.marker);
+  const blockRe = new RegExp(`^@\\[${escapedMarker}\\]\\(([^)]*)\\)$`);
+  const attrRe = /([a-zA-Z0-9-_]+)="([^"]*)"/g;
+  md.block.ruler.before('paragraph', block.name, (state, start, _end, silent) => {
+    const line = state.src.slice(state.bMarks[start] + state.tShift[start], state.eMarks[start]).trim();
+    const m = line.match(blockRe);
+    if (!m) return false;
     if (silent) return true;
-    const [url, text] = match[1].split(SEPARATOR);
-    if (!url || !text) return false;
-    const token = state.push('link_external', '', 0);
-    token.content = `${url}${SEPARATOR}${text}`;
-    token.markup = 'link-external';
-    state.line = startLine + 1;
+    const attrs = {};
+    let mat;
+    while (mat = attrRe.exec(m[1])) {
+      attrs[mat[1]] = mat[2];
+    }
+    for (const key of block.requiredKeys) {
+      if (!attrs[key]) {
+        return false;
+      }
+    }
+    const token = state.push(block.name, '', 0);
+    token.meta = attrs;
+    state.line = start + 1;
     return true;
   });
-  md.renderer.rules.link_external = (tokens, idx) => {
-    const [url, text] = tokens[idx].content.split(SEPARATOR);
-    return `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer" class="external-link">${escapeHtml(text)}</a>`;
+  md.renderer.rules[block.name] = (tokens, idx) => {
+    return block.renderer(tokens[idx].meta);
   };
+}
+export function mdCustomBlocks(md) {
+  // @[img](src="", alt="", webp="", width="", height="")
+  registerKVBlock(md, {
+    name: 'image_with_webp',
+    marker: 'img',
+    requiredKeys: ['src'],
+    renderer: ({
+      src,
+      alt,
+      webp,
+      width,
+      height,
+      caption
+    }) => {
+      const webpSource = webp ? `<source srcset="${escapeHtml(webp)}" type="image/webp">` : '';
+      const altText = alt ? `alt="${escapeHtml(alt)}"` : '';
+      const widthAttr = width ? ` width="${escapeHtml(width)}"` : '';
+      const heightAttr = height ? ` height="${escapeHtml(height)}"` : '';
+      const captionText = caption ? `<em>${escapeHtml(caption)}</em>` : '';
+      return `<picture>
+        ${webpSource}
+        <img src="${escapeHtml(src)}" ${altText}${widthAttr}${heightAttr}>
+        ${captionText}
+      </picture>`;
+    }
+  });
+
+  // @[link-external](url="", text="")
+  registerKVBlock(md, {
+    name: 'link_external',
+    marker: 'link-external',
+    requiredKeys: ['url'],
+    renderer: ({
+      url,
+      text
+    }) => {
+      const label = text || url;
+      return `<a href="${escapeHtml(url)}" target="_blank" rel="noopener noreferrer" class="external-link">
+        ${escapeHtml(label)}
+      </a>`;
+    }
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nakobase/nakobase-md-html",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Convert Markdown to **sanitized HTML** and apply consistent styles – simple, secure, and styled.",
   "type": "module",
   "main": "dist/esm/index.js",
@@ -92,7 +92,6 @@
     "typescript": "^5.5.4"
   },
   "dependencies": {
-    "@steelydylan/markdown-it-imsize": "^1.0.2",
     "markdown-it": "^12.3.2",
     "markdown-it-container": "^2.0.0",
     "markdown-it-custom-block": "^1.0.0",