nevenall / remark-containers

Remark plugin to add custom containers to markdown

Nevenall

Testing out readme profile

remark-containers's Issues

Issue when using nested containers in combination with remark-attr

Steps to reproduce

Using the input below in combination with remark-attrs by @arobase-che:

::: div
::: div
_Buster_{class="icon"}

Keaton
:::
:::

Result

<div>
<div>
<p>
<em>Buster</em>{class="icon"}</p>
<p>Keaton</p>
</div>
</div>

However, removing Keaton produces the expected output: <em class="icon">Buster</em>. Not sure if the issue relates to remark-containers or to remark-attr, any suggestion welcome.

Code to reproduce

https://codesandbox.io/s/remark-containers-rbk9x?file=/src/index.js

TypeError: Cannot read properties of undefined (reading 'prototype')

Reproduction:

package.json:

{
  "dependencies": {
    "remark-containers": "^1.2.0",
    "remark-parse": "^11.0.0",
    "unified": "^11.0.4"
  }
}

test file:

import { unified } from 'unified'
import markdown from 'remark-parse'
import container from 'remark-containers'

unified()
  .use(markdown)
  .use(container)
  .parse(`Hello World!`)

Error log:

remark
TypeError: Cannot read properties of undefined (reading 'prototype')
 - /node_modules/.pnpm/[email protected]/node_modules/remark-containers/src/index.js:73:35
 - /node_modules/.pnpm/[email protected]/node_modules/unified/lib/index.js:636:36
 - /node_modules/.pnpm/[email protected]/node_modules/unified/lib/index.js:664:10

Thanks.

remark@next (13)

Hi!

remark is switching to a new parser (and compiler) internally (remarkjs/remark#536), which will break this plugin.
I will create a generic directives plugin though, time permitting, in this month, which would be a good inspiration for fenced divs.
Keep an eye out that plugin, which will also have micromark and mdast extensions too, and feel free to ask me questions!

Usage of named groups in regex raises an issue with some browsers

The regex used to identify and parse containers (copied below) is using named groups to identify the noparse, type and config values. While named groups improve code readability, it seems they introduce an issue with some browsers including recent ones such as Firefox 77, which have not yet implemented named groups yet (ECMAScript 2018 as far as I understand).

This issue is about discussing the replacement of named groups by numbered groups (as it was before) so as to ease browser support.

• Current regex: /^:::[\t\f ]*(?<noparse>noparse)?[\t\f ]*(?<type>\S+)[\t\f ]*(?<config>.*?)$/m
• New regex proposal: /^:::[\t\f ]*(noparse)?[\t\f ]*(\S+)[\t\f ]*(.*?)$/m

Using HTML elements as types with transformation to custom element raises error

When trying to transform a standard HTML element into a custom element (e.g. transforming table into tableau), an error is raised as if remark was interpreting the original element while one would expect the new one instead, wouldn't we?

Custom configuration example:

.use(containers, {
    default: true,
    custom: [
        {
        type: "table",
        element: "tableau",
        noparse: true,
        transform: function(node, config, tokenize) {
          console.log("table", node);
          node.children[0].type = "code";
        }
      }]

Live example (with copied source code of remark-containers in order to get around #7 in the browser): https://codesandbox.io/s/remark-containers-rbk9x

Would you say it's a misconfiguration or a bug?

Cheers

Option to not parse the content of specific containers?

Hi @Nevenall, all, Would it make sense to add an option for not parsing as Markdown specific containers content (hence leaving the content as is), unless there is such an option already? A typical use case would be the following: a container contains some YAML data to be interpreted later on in the display process, e.g. by a JavaScript application executed by the browser: in that case, it could be more convenient for the user to not surround that content with escaping characters (```), just typing as follows:

::: hero
img: banner.jpg
title: "My title"
buttons: [{id: "id1", label: "label1"}, {id: "id2", label: "label2"}]
:::

What do you think?
Cheers and thumbs up

Recreating Vuepress Containers

I'm trying to copy the custom containers in Vuepress where the following markdown:

::: warning Title
Content
:::

Then gets output as:

<div class="warning custom-block">
  <p class="custom-block-title">Title</p>
  <p>Content</p>
</div>

While the configuration in Vuepress is:

      ['container', {
        type: 'tip',
        defaultTitle: {
          '/': 'TIP'
        }
      }],
      ['container', {
        type: 'warning',
        defaultTitle: {
          '/': 'WARNING'
        }
      }],
      ['container', {
        type: 'danger',
        defaultTitle: {
          '/': 'WARNING'
        }
      }],
      ['container', {
        type: 'details',
        before: info => `<details class="custom-block details">${info ? `<summary>${info}</summary>` : ''}\n`,
        after: () => '</details>\n'
      }]

How can I recreate this with this plugin? Is there an example I can look at?

Ability to process other node attributes than "class"

This issue is about proposing the support of the following transformation natively for any node, using the standard attribute selector syntax:

Input:

::: div class-one class-two [id="id-1"] [name="name-1"]
:::

Output:

<div class="class-one class-two" id="id-1' name="name-1">
</div>

This could be useful in particular for generating forms using, but not only. What do you think? (I have a pull request at hand, just waiting for possible other syntax options)

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'blockTokenizers' of undefined

After adding this plugin I start getting the following error:
UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'blockTokenizers' of undefined

Example:

import { remark }	from 'remark'
import html		from 'remark-html'
import containers	from 'remark-containers'

var result = await remark()
  .use(html)
  .use(containers)
  .process(content);

Ability to configure the containers which should not be parsed

Following up on #4, this issue is about adding the ability to configure the containers whose content should not be parsed, e.g. as follows:

.use(containers, {
  default: true, 
  custom: [{
    element: 'hero',
    parse: false
   }]
})

This would alleviate entering noparse for each target container. What do you think?

Invalid regex group on Firefox

I'm using this package within react-markdown.
Everything works well on Chrome, but on Firefox (60.8.0) I get the following error message in console:

SyntaxError: invalid regexp group

And the incriminated regex is the following:

/^:::[\t\f ]*(?<type>\S+)[\t\f ]*(?<options>.*?)$/m

which is at the beginning of index.js of this repo.

I can try to investigate the reason why Firefox doesn't like this regex, but for the moment all my application crashes due to this regex.