feat(plugin): support directive syntax

package.json

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

src/plugin/directive.ts

@@ -0,0 +1,51 @@
+import type MarkdownIt from 'markdown-it';
+
+import {
+    createBlockInlineToken,
+    directive,
+    registerBlockDirective,
+    tokenizeBlockContent,
+} from '@diplodoc/directive';
+
+import {ClassNames, ENV_FLAG_NAME, TokenType} from './const';
+
+export const cutDirective: MarkdownIt.PluginSimple = (md) => {
+    md.use(directive());
+
+    registerBlockDirective(md, 'cut', (state, params) => {
+        if (!params.content) {
+            return false;
+        }
+
+        state.env ??= {};
+        state.env[ENV_FLAG_NAME] = true;
+
+        let token = state.push(TokenType.CutOpen, 'details', 1);
+        token.block = true;
+        token.attrSet('class', ClassNames.Cut);
+        token.map = [params.startLine, params.endLine];
+        token.markup = ':::';
+
+        token = state.push(TokenType.TitleOpen, 'summary', 1);
+        token.attrSet('class', ClassNames.Title);
+
+        if (params.inlineContent) {
+            token = createBlockInlineToken(state, params);
+        }
+
+        token = state.push(TokenType.TitleClose, 'summary', -1);
+
+        token = state.push(TokenType.ContentOpen, 'div', 1);
+        token.attrSet('class', ClassNames.Content);
+        token.map = [params.startLine + 1, params.endLine - 1];
+
+        tokenizeBlockContent(state, params.content, 'yfm-cut');
+
+        token = state.push(TokenType.ContentClose, 'div', -1);
+
+        token = state.push(TokenType.CutClose, 'details', -1);
+        token.block = true;
+
+        return true;
+    });
+};

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,9 @@ 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';
+
+type Syntax = 'both' | 'curly' | 'directive';
 
 export type TransformOptions = {
     runtime?:
@@ -12,23 +15,32 @@ export type TransformOptions = {
               style: string;
           };
     bundle?: boolean;
+    /** @default 'curly' */
+    syntax?: Syntax;
 };
 
-type NormalizedPluginOptions = Omit<TransformOptions, 'runtime'> & {
+type NormalizedPluginOptions = Omit<TransformOptions, 'runtime' | 'syntax'> & {
     runtime: Runtime;
+    syntax: Syntax;
 };
 
 const registerTransform = (
     md: MarkdownIt,
     {
         runtime,
         bundle,
+        syntax,
         output,
-    }: Pick<NormalizedPluginOptions, 'bundle' | 'runtime'> & {
+    }: Pick<NormalizedPluginOptions, 'bundle' | 'runtime' | 'syntax'> & {
         output: string;
     },
 ) => {
-    md.use(cutPlugin);
+    if (syntax === 'curly' || syntax === 'both') {
+        md.use(cutPlugin);
+    }
+    if (syntax === 'directive' || syntax === 'both') {
+        md.use(cutDirective);
+    }
     md.core.ruler.push('yfm_cut_after', ({env}) => {
         hidden(env, 'bundled', new Set<string>());
 
@@ -57,6 +69,8 @@ export function transform(options: Partial<TransformOptions> = {}) {
         throw new TypeError('Option `runtime` should be record when `bundle` is enabled.');
     }
 
+    const syntax: Syntax = options.syntax ?? 'curly';
+
     const runtime: Runtime =
         typeof options.runtime === 'string'
             ? {script: options.runtime, style: options.runtime}
@@ -70,6 +84,7 @@ export function transform(options: Partial<TransformOptions> = {}) {
         {output = '.'} = {},
     ) {
         registerTransform(md, {
+            syntax,
             runtime,
             bundle,
             output,
@@ -81,6 +96,7 @@ export function transform(options: Partial<TransformOptions> = {}) {
             const MdIt = dynrequire('markdown-it');
             const md = new MdIt().use((md: MarkdownIt) => {
                 registerTransform(md, {
+                    syntax,
                     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",