Doesn't work with long content

[PuruVJ]

I have come across an issue where writing

::: note
Depending on the device, you may not see much difference
:::

works perfectly.

but something longer

::: note
If you're programmatically creating the grid, do not set it to \[0, 0\] ever, that will stop drag at all. Set it to `undefined` to make it continuous once again
:::

doesn't render. If I delete the 2nd second sentence in it, it renders it properly. Breaking it up in spaces doesn't help either.

[koka831]

@PuruVJ thank you for reporting the issue. Yes, current implementation of parser uses just a simple regular expression, so we need to walk through the syntax tree to handle children in the custom container.

[talatkuyuk]

+1

[koka831]

Update: it might require changes with its syntax, empty line between ::: container directive and its inside contents.

current:
::: info title
it doesn't require empty line between custom directives
:::

will be:
::: info title

it will require empty lines between each directives (for convenience in implementation)

:::

I think it'll be released within a week. Thank you for your patience.

[talatkuyuk]

@koka831 You are right to make decision on the line breaks.

Here is an example that I found in the docusaurus tutorial (made by Facebook) https://tutorial.docusaurus.io/docs/tutorial-basics/markdown-features#admonitions

And, I have found the admonitions plugin which docusaurus uses which could be very useful. https://github.com/facebook/docusaurus/blob/3b9b497d13634ad24b313bc15c8e166caf567827/packages/docusaurus-mdx-loader/src/remark/admonitions/index.ts

And, the docusaurus document says that they inspired from the package remark-admonitions https://www.npmjs.com/package/remark-admonitions

But, remark-admonitions is not compatible with micromark which became core machine for the remark-parse nowadays; and it is not usable as a remark plugin. (I tested it and gives error in the remark-parse!). But I think that the Facebook team has adopted this plugin for their usage in the docusaurus.

[koka831]

@talatkuyuk Thank you for the helpful links:) IMHO it makes so convenient to parse custom directive. unist-util-visit treats closing ::: marker as a member of last child inside the directive, when children inside the directive contains HTML or some complex notation.

e.g.)

::: info
first child
<div>second child</div>
:::

will be converted in (with some simplify):

• { type: "paragraph", value: "::: info" }
• { type: "paragraph", value: "first child" }
• { type: "html": value: "<div>second child</div>:::" } ← this makes hard to parse :sweat_smile:

And yes, these plugins are not compatible with micromark but its source looks nice:) I'll dig them and consider some refactoring https://github.com/koka831/remark-custom-container/pull/139, thanks!

[koka831]

@PuruVJ @talatkuyuk multiple contents support released in https://www.npmjs.com/package/remark-custom-container/v/1.2.0 :tada: FWIW here is a working example https://koka831.github.io/archives/2022_11_23_custom-container Thank you for reporting the issue and patience again. If you find something else regarding this release, feel free to report me:)

[talatkuyuk]

I tested it. Works like a charm. Many thanks to you @koka831.