michael-klein / htmdx Goto Github PK

I just realized that when a code block contains < or > characters, it is parsed as a tag, probably by htm.

A reproducible case:

import { h } from "preact"
import { htmdx } from "htmdx"

const markdown = `
\`\`\` json
{
  ...,
  "authors": [
    "John Doe <[email protected]>"
  ],
  ...
}
\`\`\``

console.dir(htmdx(data, h), { depth: null })

Yields:

[ 'pre',
  { type: 'code',
    props:
     { className: 'language-json',
       children:
        [ '{\n  ...,\n  "authors": [\n    "John Doe ',
          { type: '[email protected]',
            props: { children: '"\n  ],\n  ...\n}' },
            key: null,
            ref: null,
            __k: null,
            __: null,
            __b: 0,
            __e: null,
            __d: null,
            __c: null,
            constructor: undefined } ] },
    key: undefined,
    ref: undefined,
    __k: null,
    __: null,
    __b: 0,
    __e: null,
    __d: null,
    __c: null,
    constructor: undefined } ]

The type of the node is [email protected]. Furthermore, the pre is messed up.

Sorry for opening so many issues and PRs - I'm actively using your library, so I report the errors that I encounter 😜

The following Markdown:

# H1
---
# H2

... should translate to the following HTML:

<h1>H1</h1>
<hr />
<h2>H2</h2>

However, as Marked seems to omit the slash on self-closing tags by default, it get's converted to:

<h1>H1</h1>
<hr>
<h2>H2</h2>

htm takes this input, cuts of everything before the <hr> and returns:

hr<h2>H2</h2>

Setting xhtml: true for Marked via configureMarked solves the problem. Maybe we should add a note on this to the README and provide xhtml: true as a default to Marked?

Currently it is very easy to just inject an iframe through this plugin. I'm fine with allowing some responsibility for the end-user, but I feel like iframes (among other) aren't part of the markdown spec and should thus be blacklisted by default.
Is this out of scope for this plugin?

Regards

index.js

import {htmdx} from "htmdx";

console.log({htmdx});

package.json

{
  "name": "poop",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "htmdx": "^0.3.7"
  }
}

Running node index.js produces the following error.

/Users/briankim/Clones/poop/node_modules/xhtm/index.js:1
import htm from './htm'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/briankim/Clones/poop/node_modules/htmdx/dist/htmdx.cjs.development.js:9:27)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)