feat: added ability to register directive with code content using config object

README.md

@@ -138,7 +138,10 @@ All of parameters groups – `[]`, `()`, `{}` – are optional, but their order
 
 - `registerContainerDirective()` – register handler for new container block or configure it using config-object.
   ```ts
-  function registerContainerDirective(md: MarkdownIt, config: ContainerDirectiveConfig): void;
+  function registerContainerDirective(
+    md: MarkdownIt,
+    config: ContainerDirectiveConfig | CodeContainerDirectiveConfig,
+  ): void;
   function registerContainerDirective(
     md: MarkdownIt,
     name: string,

src/helpers/registrars.ts

@@ -8,6 +8,7 @@ import type {
     MarkdownItWithDirectives,
 } from 'markdown-it-directive';
 import type {
+    CodeContainerDirectiveConfig,
     ContainerDirectiveConfig,
     ContainerDirectiveHandler,
     ContainerDirectiveParams,
@@ -48,20 +49,28 @@ export function registerLeafBlockDirective(
     (md as MarkdownItWithDirectives).blockDirectives[name] = getBlockDefaultHandler(md, name);
 }
 
-export function registerContainerDirective(md: MarkdownIt, config: ContainerDirectiveConfig): void;
+export function registerContainerDirective(
+    md: MarkdownIt,
+    config: ContainerDirectiveConfig | CodeContainerDirectiveConfig,
+): void;
 export function registerContainerDirective(
     md: MarkdownIt,
     name: string,
     handler: ContainerDirectiveHandler,
 ): void;
 export function registerContainerDirective(
     md: MarkdownIt,
-    nameOrConfig: string | ContainerDirectiveConfig,
+    nameOrConfig: string | ContainerDirectiveConfig | CodeContainerDirectiveConfig,
     maybeHandler?: ContainerDirectiveHandler,
 ): void {
     const [name, handler]: [string, ContainerDirectiveHandler] = isString(nameOrConfig)
         ? [nameOrConfig, maybeHandler!]
-        : [nameOrConfig.name, buildContainerHandler(nameOrConfig)];
+        : [
+              nameOrConfig.name,
+              nameOrConfig.type === 'code_block'
+                  ? buildCodeContainerHandler(nameOrConfig)
+                  : buildContainerHandler(nameOrConfig),
+          ];
 
     (md as MdItWithHandlers)[CONTAINER_KEY] ||= {};
     (md as MdItWithHandlers)[CONTAINER_KEY][name] = handler;
@@ -155,6 +164,37 @@ function buildContainerHandler(config: ContainerDirectiveConfig): ContainerDirec
     };
 }
 
+function buildCodeContainerHandler(
+    config: CodeContainerDirectiveConfig,
+): ContainerDirectiveHandler {
+    return (state, params) => {
+        if (!params.content) {
+            return false;
+        }
+        if (!config.match(params, state)) {
+            return false;
+        }
+
+        const {name, container} = config;
+
+        const token = state.push(container.token, container.tag, 0);
+        // set fields like for fence token
+        token.map = [params.startLine, params.endLine];
+        token.content = params.content.raw;
+        token.markup = ':::';
+        token.info = name;
+
+        if (container.attrs) {
+            const attrs: DirectiveAttrs = isFunction(container.attrs)
+                ? container.attrs(params)
+                : container.attrs;
+            token.attrs = Object.entries(attrs);
+        }
+
+        return true;
+    };
+}
+
 function buildInlineParams(args: DirectiveInlineHandlerArgs): InlineDirectiveParams {
     const params: InlineDirectiveParams = {
         startPos: args.directiveStart,

src/types.ts

@@ -65,7 +65,8 @@ type TokensDesc = {
 
 export type ContainerDirectiveConfig = {
     name: string;
-    match: (params: LeafBlockDirectiveParams, state: StateBlock) => boolean;
+    type?: 'container_block';
+    match: (params: ContainerDirectiveParams, state: StateBlock) => boolean;
     container: TokensDesc;
     inlineContent?: TokensDesc & {
         /** @default true */
@@ -76,10 +77,17 @@ export type ContainerDirectiveConfig = {
     contentTokenizer?: (
         state: StateBlock,
         content: BlockContent,
-        params: LeafBlockDirectiveParams,
+        params: ContainerDirectiveParams,
     ) => void;
 };
 
+export type CodeContainerDirectiveConfig = {
+    name: string;
+    type: 'code_block';
+    match: (params: ContainerDirectiveParams, state: StateBlock) => boolean;
+    container: TokensDesc;
+};
+
 export interface MdItWithHandlers extends MarkdownIt {
     [CONTAINER_KEY]: Record<string, ContainerDirectiveHandler>;
     [LEAF_BLOCK_KEY]: Record<string, LeafBlockDirectiveHandler>;

tests/src/__snapshots__/directive.test.ts.snap

@@ -1,5 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Directive block with content should add code container handler via config 1`] = `
+[
+  Token {
+    "attrs": [
+      [
+        "class",
+        "code-js",
+      ],
+    ],
+    "block": true,
+    "children": null,
+    "content": "(function(window) {
+window.alert('Hello world!');
+})(window);
+",
+    "hidden": false,
+    "info": "js",
+    "level": 0,
+    "map": [
+      2,
+      7,
+    ],
+    "markup": ":::",
+    "meta": null,
+    "nesting": 0,
+    "tag": "code",
+    "type": "code_js",
+  },
+]
+`;
+
 exports[`Directive helpers createBlockInlineToken should parse inline content in block diagram 1`] = `
 [
   Token {

tests/src/directive.test.ts

@@ -388,6 +388,33 @@ describe('Directive', () => {
                 startLine: 0,
             });
         });
+
+        it('should add code container handler via config', () => {
+            const md = new MarkdownIt().use(directiveParser());
+            registerContainerDirective(md, {
+                name: 'js',
+                type: 'code_block',
+                match: () => true,
+                container: {
+                    token: 'code_js',
+                    tag: 'code',
+                    attrs: {class: 'code-js'},
+                },
+            });
+            const tokens = md.parse(
+                dd`
+
+
+                :::js
+                (function(window) {
+                window.alert('Hello world!');
+                })(window);
+                :::
+                `,
+                {},
+            );
+            expect(tokens).toMatchSnapshot();
+        });
     });
 
     describe('helpers', () => {