TypeError when using marked-footnotes with lexer

[Gusis93]

• Extension Name: marked-footnotes
• Extension Version:
• Project Version:
• Device: Desktop
• OS@version (or Browser): macOS@14.5 Firefox@129
• Node And NPM Version: [e.g. 14.17.6 and 6.14.15]

Description

Type Error occurs when trying to tokenize content with this extension:

Context: I copied the approach of marked-react to use marked with react and add extensions which is something that package doesn't allow.

There seems to be a problem that when using footnotes, it doesn't allow me tokenize and it throws an error saying this.rawItems is undefined I have tried this approach with other extensions like marked-katex and it works fine.

To Reproduce (⚠️ read below)

Reproduction link: https://codesandbox.io/p/sandbox/elastic-https-zk66gd

Expected Behavior

Footnotes render correctly

Actual Behavior

Throws an error

Additional Information

[bent10]

It looks like the issue might be in your Parser.tsx implementation. I believe you would encounter a similar issue if your content has KaTeX code.

Why don't you use the following approach instead?

// Your Markdown.jsx file
const instance = new Marked();
instance.use(markedFootnote());

const Markdown = () => {
  const [text, setText] = useState(content);

  const parseContent = () => {
    const html = instance.parse(content);
    setText(html);
  };

  return (
    <div>
      <div dangerouslySetInnerHTML={{ __html: text }} />
      {/* <Markdown2 value={content} /> */}
      <button type="button" onClick={parseContent}>
        Parse content
      </button>
    </div>
  );
};

[Gusis93]

The approach you suggest doesn't allow to extend the renderer with React Component so I copied the approach from marked-react

Testing this approach with KaTeX works fine.

The error is triggered in the lexer so I don't think the Parser is related.

const md = `
# Example

[^1]: This is a footnote content.

Here is a simple footnote[^1]. With some additional text after it[^@#$%] and without disrupting the blocks[^bignote].

[^bignote]: The first paragraph of the definition.

[^@#$%]: A footnote on the label: "@#$%".
`
const mar = new marked.Marked();

mar.use(markedFootnotes();

const tokens = marked.lexer(md, {gfm: true, breaks: true, extensions: mar.defaults.extensions,});

document.getElementById('content').innerHTML = mar.parse(md);

This code for example will also throw the same error

[bent10]

The approach you suggest doesn't allow to extend the renderer with React Component, so I copied the approach from marked-react.

I'm not familiar with marked-react, but it uses an older version of Marked. Since v13, Marked has a new renderer API, which works differently.

Testing this approach with KaTeX works fine.

It might not show an error, but try adding some KaTeX code like:

This is inline KaTeX: $c = \\pm\\sqrt{a^2 + b^2}$

This is block level KaTeX:

$$
c = \\pm\\sqrt{a^2 + b^2}
$$

It doesn't cause an error, but the code won't render correctly and stays the same. I tested this with your reproduction.

[bent10]

I don't think this is an issue specific to marked-footnote ✌🏼

Reopen this issue if there's anything else I can help with 😄

[Gusis93]

Thank you for the replies and suggestions I will try and see if I can find a solution