Block level extension not rendering correctly

[arfianadam]

Marked version: 12.0.2

I tried to write an extension that also stores image's width, but despite following the example, I couldn't make it to output what I expected.

To Reproduce

Codesandbox.io

marked.use({
  extensions: [
    {
      name: "customImage",
      level: "block",
      start: (source: string) => {
        return source.match(/!\[/)?.index;
      },
      tokenizer(source, tokens) {
        const rule = /!\[\]\((.+?)\){: width=(\d+?) }/;
        const match = rule.exec(source);
        if (match) {
          const token = {
            type: "customImage",
            raw: match[0],
            src: match[1],
            width: match[2],
          };
          return token;
        }
        return undefined;
      },
      renderer(token) {
        return `<img src="${token.src}" data-width="${token.width}" />`;
      },
    },
  ],
});

const rawText = `aaa

![](imagelink){: width=50 }

ccc`;
const parsedText = marked.parse(rawText);

outputs

<img src="imagelink" data-width="50" /><p>=50 }</p>
<p>ccc</p>

Expected behavior

<p>aaa</p>
<p><img src="imagelink" data-width="50" /></p>
<p>bbb</p>

Thank you in advance.

[UziTech]

It looks like your rule searches for a pattern anywhere in the source. It should only look for tokens at the beginning. Try adding ^ at the beginning of the regexp

[UziTech]

It also looks like you are setting it as a block level token which won't be inside a <p> tag. You can change it to inline to parse it as an inline token.

import { Marked } from "marked";

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello Vanilla!</h1>
<div>
  We use the same configuration as Parcel to bundle this sandbox, you can find more
  info about Parcel 
  <a href="https://parceljs.org" target="_blank" rel="noopener noreferrer">here</a>.
</div>`;
const marked = new Marked();
marked.use({
  extensions: [
    {
      name: "customImage",
      level: "inline",
      start: (source: string) => {
        return source.match(/!\[/)?.index;
      },
      tokenizer(source, tokens) {
        const rule = /^!\[\]\((.+?)\){: width=(\d+?) }/;
        const match = rule.exec(source);
        if (match) {
          const token = {
            type: "customImage",
            raw: match[0],
            src: match[1],
            width: match[2],
          };
          return token;
        }
        return undefined;
      },
      renderer(token) {
        return `<img src="${token.src}" data-width="${token.width}" />`;
      },
    },
  ],
});

const rawText = `aaa

inline ![](imagelink){: width=50 }

ccc`;
const parsedText = marked.parse(rawText);

console.log(parsedText);