feat(plugin): support directive syntax (#22)

package.json

@@ -46,6 +46,9 @@
     "pre-commit": "lint update && lint-staged",
     "prepare": "husky"
   },
+  "dependencies": {
+    "@diplodoc/directive": "^0.1.0"
+  },
   "devDependencies": {
     "@diplodoc/lint": "^1.2.0",
     "@diplodoc/tsconfig": "^1.0.2",

src/plugin/directive.ts

@@ -0,0 +1,41 @@
+import type MarkdownIt from 'markdown-it';
+
+import {directiveParser, registerContainerDirective} from '@diplodoc/directive';
+
+import {ClassNames, ENV_FLAG_NAME, TokenType} from './const';
+
+export const cutDirective: MarkdownIt.PluginSimple = (md) => {
+    md.use(directiveParser());
+
+    registerContainerDirective(md, {
+        name: 'cut',
+        match(_params, state) {
+            state.env ??= {};
+            state.env[ENV_FLAG_NAME] = true;
+
+            return true;
+        },
+        container: {
+            tag: 'details',
+            token: TokenType.Cut,
+            attrs: {
+                class: ClassNames.Cut,
+            },
+        },
+        inlineContent: {
+            required: false,
+            tag: 'summary',
+            token: TokenType.Title,
+            attrs: {
+                class: ClassNames.Title,
+            },
+        },
+        content: {
+            tag: 'div',
+            token: TokenType.Content,
+            attrs: {
+                class: ClassNames.Content,
+            },
+        },
+    });
+};

src/plugin/plugin.ts

@@ -34,6 +34,7 @@ export const cutPlugin: MarkdownIt.PluginSimple = (md) => {
                 const newOpenToken = new state.Token(TokenType.CutOpen, 'details', 1);
                 newOpenToken.attrSet('class', ClassNames.Cut);
                 newOpenToken.map = tokens[i].map;
+                newOpenToken.markup = '{%';
 
                 attrsParser.apply(newOpenToken);
 

src/plugin/transform.ts

@@ -3,6 +3,7 @@ import type MarkdownIt from 'markdown-it';
 import {cutPlugin} from './plugin';
 import {type Runtime, copyRuntime, dynrequire, hidden} from './utils';
 import {ENV_FLAG_NAME} from './const';
+import {cutDirective} from './directive';
 
 export type TransformOptions = {
     runtime?:
@@ -12,10 +13,21 @@ export type TransformOptions = {
               style: string;
           };
     bundle?: boolean;
+    /**
+     * Enables directive syntax of yfm-cut.
+     *
+     * - 'disabled' – directive syntax is disabled.
+     * - 'enabled' – directive syntax is enabled; old syntax is also enabled.
+     * - 'only' – enabled only directive syntax; old syntax is disabled.
+     *
+     * @default 'disabled'
+     */
+    directiveSyntax?: 'disabled' | 'enabled' | 'only';
 };
 
-type NormalizedPluginOptions = Omit<TransformOptions, 'runtime'> & {
+type NormalizedPluginOptions = Omit<TransformOptions, 'runtime' | 'directiveSyntax'> & {
     runtime: Runtime;
+    directiveSyntax: NonNullable<TransformOptions['directiveSyntax']>;
 };
 
 const registerTransform = (
@@ -24,11 +36,17 @@ const registerTransform = (
         runtime,
         bundle,
         output,
-    }: Pick<NormalizedPluginOptions, 'bundle' | 'runtime'> & {
+        directiveSyntax,
+    }: Pick<NormalizedPluginOptions, 'bundle' | 'runtime' | 'directiveSyntax'> & {
         output: string;
     },
 ) => {
-    md.use(cutPlugin);
+    if (directiveSyntax === 'disabled' || directiveSyntax === 'enabled') {
+        md.use(cutPlugin);
+    }
+    if (directiveSyntax === 'enabled' || directiveSyntax === 'only') {
+        md.use(cutDirective);
+    }
     md.core.ruler.push('yfm_cut_after', ({env}) => {
         hidden(env, 'bundled', new Set<string>());
 
@@ -57,6 +75,7 @@ export function transform(options: Partial<TransformOptions> = {}) {
         throw new TypeError('Option `runtime` should be record when `bundle` is enabled.');
     }
 
+    const directiveSyntax = options.directiveSyntax || 'disabled';
     const runtime: Runtime =
         typeof options.runtime === 'string'
             ? {script: options.runtime, style: options.runtime}
@@ -70,6 +89,7 @@ export function transform(options: Partial<TransformOptions> = {}) {
         {output = '.'} = {},
     ) {
         registerTransform(md, {
+            directiveSyntax,
             runtime,
             bundle,
             output,
@@ -81,6 +101,7 @@ export function transform(options: Partial<TransformOptions> = {}) {
             const MdIt = dynrequire('markdown-it');
             const md = new MdIt().use((md: MarkdownIt) => {
                 registerTransform(md, {
+                    directiveSyntax,
                     runtime,
                     bundle,
                     output: destRoot,

tests/package.json

@@ -2,11 +2,13 @@
   "name": "@diplodoc/tests",
   "private": true,
   "scripts": {
-    "test": "jest"
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "devDependencies": {
     "@diplodoc/transform": "^4.28.2",
     "@types/jest": "^29.5.12",
+    "@types/markdown-it": "^13.0.9",
     "esbuild-jest": "^0.5.0",
     "highlight.js": "^11.10.0",
     "jest": "^29.7.0",