@gravity-ui/markdown-editor 14.3.1 → 14.4.0

package/build/cjs/bundle/Editor.d.ts

@@ -1,6 +1,7 @@
 import type { CommonEditor } from '../common';
 import { ReactRenderStorage } from '../extensions';
 import { type Receiver } from '../utils';
+import type { DirectiveSyntaxContext } from '../utils/directive';
 import type { MarkdownEditorMode as EditorMode, MarkdownEditorPreset as EditorPreset, MarkdownEditorOptions } from './types';
 export declare type ToolbarActionData = {
     editorMode: EditorMode;
@@ -41,5 +42,6 @@ export declare type ChangeEditorModeOptions = {
 export declare type EditorOptions = Pick<MarkdownEditorOptions, 'md' | 'initial' | 'handlers' | 'experimental' | 'markupConfig' | 'wysiwygConfig'> & {
     renderStorage: ReactRenderStorage;
     preset: EditorPreset;
+    directiveSyntax: DirectiveSyntaxContext;
 };
 export {};

package/build/cjs/bundle/Editor.js

@@ -1,5 +1,5 @@
 "use strict";
-var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_mdOptions, _EditorImpl_preset, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_parseInsertedUrlAsImage, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_enableNewImageSizeCalculation, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
+var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_escapeConfig, _EditorImpl_mdOptions, _EditorImpl_preset, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_parseInsertedUrlAsImage, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_enableNewImageSizeCalculation, _EditorImpl_directiveSyntax, _EditorImpl_prepareRawMarkup, _EditorImpl_beforeEditorModeChange;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorImpl = void 0;
 const tslib_1 = require("tslib");
@@ -34,6 +34,7 @@ class EditorImpl extends utils_1.SafeEventEmitter {
         _EditorImpl_parseInsertedUrlAsImage.set(this, void 0);
         _EditorImpl_needToSetDimensionsForUploadedImages.set(this, void 0);
         _EditorImpl_enableNewImageSizeCalculation.set(this, void 0);
+        _EditorImpl_directiveSyntax.set(this, void 0);
         _EditorImpl_prepareRawMarkup.set(this, void 0);
         _EditorImpl_beforeEditorModeChange.set(this, void 0);
         this.getValue = () => this.currentEditor.getValue();
@@ -52,6 +53,7 @@ class EditorImpl extends utils_1.SafeEventEmitter {
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, handlers.uploadFile, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_parseInsertedUrlAsImage, markupConfig.parseInsertedUrlAsImage, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(experimental.needToSetDimensionsForUploadedImages), "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_directiveSyntax, opts.directiveSyntax, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_enableNewImageSizeCalculation, Boolean(experimental.enableNewImageSizeCalculation), "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_prepareRawMarkup, experimental.prepareRawMarkup, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_escapeConfig, wysiwygConfig.escapeConfig, "f");
@@ -120,6 +122,9 @@ class EditorImpl extends utils_1.SafeEventEmitter {
     get mdOptions() {
         return tslib_1.__classPrivateFieldGet(this, _EditorImpl_mdOptions, "f");
     }
+    get directiveSyntax() {
+        return tslib_1.__classPrivateFieldGet(this, _EditorImpl_directiveSyntax, "f");
+    }
     get renderPreview() {
         return tslib_1.__classPrivateFieldGet(this, _EditorImpl_renderPreview, "f");
     }
@@ -172,6 +177,7 @@ class EditorImpl extends utils_1.SafeEventEmitter {
                 keymaps: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").keymaps,
                 yfmLangOptions: { languageData: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").languageData },
                 autocompletion: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").autocompletion,
+                directiveSyntax: this.directiveSyntax,
                 receiver: this,
             })), "f");
         }
@@ -312,7 +318,7 @@ class EditorImpl extends utils_1.SafeEventEmitter {
     }
 }
 exports.EditorImpl = EditorImpl;
-_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_markupConfig = new WeakMap(), _EditorImpl_escapeConfig = new WeakMap(), _EditorImpl_mdOptions = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_parseInsertedUrlAsImage = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_enableNewImageSizeCalculation = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();
+_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_markupConfig = new WeakMap(), _EditorImpl_escapeConfig = new WeakMap(), _EditorImpl_mdOptions = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_parseInsertedUrlAsImage = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_enableNewImageSizeCalculation = new WeakMap(), _EditorImpl_directiveSyntax = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap(), _EditorImpl_beforeEditorModeChange = new WeakMap();
 function getTopOffset(elem) {
     const TOOLBAR_HEIGHT = 36; //px
     const TOOLBAR_BOTTOM_OFFSET = 8; // px

package/build/cjs/bundle/MarkdownEditorView.js

@@ -123,6 +123,7 @@ exports.MarkdownEditorView = react_1.default.forwardRef((props, ref) => {
                         getValue: editor.getValue,
                         mode: 'preview',
                         md: editor.mdOptions,
+                        directiveSyntax: editor.directiveSyntax,
                     })),
                     settings)) : (react_1.default.createElement(react_1.default.Fragment, null,
                     editorMode === 'wysiwyg' && (react_1.default.createElement(WysiwygEditorView_1.WysiwygEditorView, { editor: editor, autofocus: autofocus, settingsVisible: settingsVisible, toolbarConfig: wysiwygToolbarConfig, toolbarVisible: editor.toolbarVisible, hiddenActionsConfig: wysiwygHiddenActionsConfig, className: b('editor', { mode: editorMode }), toolbarClassName: b('toolbar'), stickyToolbar: stickyToolbar }, editor.toolbarVisible && settingsVisible && settings)),

package/build/cjs/bundle/SplitModeView.js

@@ -72,6 +72,7 @@ const SplitModeView = react_1.default.forwardRef(({ editor }, ref) => {
             getValue: editor.getValue,
             mode: 'split',
             md: editor.mdOptions,
+            directiveSyntax: editor.directiveSyntax,
         })));
 });
 exports.SplitModeView = SplitModeView;

package/build/cjs/bundle/types.d.ts

@@ -3,6 +3,7 @@ import type { MarkupString } from '../common';
 import type { EscapeConfig, Extension } from '../core';
 import type { CreateCodemirrorParams, YfmLangOptions } from '../markup';
 import type { FileUploadHandler } from '../utils';
+import type { DirectiveSyntaxContext, DirectiveSyntaxOption } from '../utils/directive';
 import type { ChangeEditorModeOptions } from './Editor';
 import type { ExtensionsOptions as WysiwygPresetExtensionsOptions } from './wysiwyg-preset';
 export type { Editor as MarkdownEditorInstance } from './Editor';
@@ -13,6 +14,7 @@ export declare type RenderPreviewParams = {
     getValue: () => MarkupString;
     mode: 'preview' | 'split';
     md: Readonly<MarkdownEditorMdOptions>;
+    directiveSyntax: Pick<DirectiveSyntaxContext, 'option' | 'valueFor' | 'mdPluginValueFor'>;
 };
 export declare type RenderPreview = (params: RenderPreviewParams) => ReactNode;
 export declare type ParseInsertedUrlAsImage = (text: string) => {
@@ -61,6 +63,26 @@ export declare type MarkdownEditorExperimentalOptions = {
      */
     prepareRawMarkup?: (value: MarkupString) => MarkupString;
     beforeEditorModeChange?: (options: Pick<ChangeEditorModeOptions, 'mode' | 'reason'>) => boolean | undefined;
+    /**
+     * Enables support of directive syntax for diplodoc (YFM) extensions.
+     *
+     * **Note:** This setting affects parsing of markdown markup and serializing to markdown markup.
+     * Be careful with it and use it in consistency with diplodoc/transform and diplodoc-extensions.
+     *
+     * Before enabling this option, make sure that appropriate versions of diplodoc/transform and diplodoc-extensions are installed.
+     *
+     * You can pass an object in `key:value` format to provide different behaviour for each extension individually.
+     *
+     * Values:
+     * - 'disabled' – directive syntax is disabled;
+     * - 'enabled' – directive syntax is enabled. Syntax of existing blocks is preserved. New blocks will be serialized using old syntax;
+     * - 'preserve' – directive syntax is enabled. Syntax of existing blocks is preserved. New blocks will be serialized using directive syntax;
+     * - 'overwrite' – existing blocks will be overwritten using directive syntax through serialization;
+     * - 'only' – old syntax is disabled, only directive syntax available. Blocks in old syntax will not be parsed.
+     *
+     * Default value is 'disabled'.
+     */
+    directiveSyntax?: DirectiveSyntaxOption;
 };
 export declare type MarkdownEditorMarkupConfig = {
     /**

package/build/cjs/bundle/useMarkdownEditor.js

@@ -4,6 +4,7 @@ exports.useMarkdownEditor = void 0;
 const react_1 = require("react");
 const extensions_1 = require("../extensions");
 const logger_1 = require("../logger");
+const directive_1 = require("../utils/directive");
 const Editor_1 = require("./Editor");
 const wysiwyg_preset_1 = require("./wysiwyg-preset");
 // [major] TODO: remove generic type
@@ -17,10 +18,12 @@ function useMarkdownEditor(props, deps = []) {
         const uploadFile = (_c = handlers.uploadFile) !== null && _c !== void 0 ? _c : props.fileUploadHandler;
         const needToSetDimensionsForUploadedImages = (_d = experimental.needToSetDimensionsForUploadedImages) !== null && _d !== void 0 ? _d : props.needToSetDimensionsForUploadedImages;
         const enableNewImageSizeCalculation = experimental.enableNewImageSizeCalculation;
+        const directiveSyntax = new directive_1.DirectiveSyntaxContext(experimental.directiveSyntax);
         const extensions = (builder) => {
             var _a;
             const extensionOptions = (_a = wysiwygConfig.extensionOptions) !== null && _a !== void 0 ? _a : props.extensionOptions;
-            builder.use(wysiwyg_preset_1.BundlePreset, Object.assign(Object.assign({}, extensionOptions), { preset, reactRenderer: renderStorage, onCancel: () => {
+            builder.use(wysiwyg_preset_1.BundlePreset, Object.assign(Object.assign({}, extensionOptions), { directiveSyntax,
+                preset, reactRenderer: renderStorage, onCancel: () => {
                     editor.emit('cancel', null);
                     return true;
                 }, onSubmit: () => {
@@ -36,7 +39,8 @@ function useMarkdownEditor(props, deps = []) {
             }
         };
         return new Editor_1.EditorImpl(Object.assign(Object.assign({}, props), { preset,
-            renderStorage, md: Object.assign(Object.assign({}, md), { breaks, html: (_e = md.html) !== null && _e !== void 0 ? _e : props.allowHTML, linkify: (_f = md.linkify) !== null && _f !== void 0 ? _f : props.linkify, linkifyTlds: (_g = md.linkifyTlds) !== null && _g !== void 0 ? _g : props.linkifyTlds }), initial: Object.assign(Object.assign({}, initial), { markup: (_h = initial.markup) !== null && _h !== void 0 ? _h : props.initialMarkup, mode: (_j = initial.mode) !== null && _j !== void 0 ? _j : props.initialEditorMode, toolbarVisible: (_k = initial.toolbarVisible) !== null && _k !== void 0 ? _k : props.initialToolbarVisible, splitModeEnabled: (_l = initial.splitModeEnabled) !== null && _l !== void 0 ? _l : props.initialSplitModeEnabled }), handlers: Object.assign(Object.assign({}, handlers), { uploadFile }), experimental: Object.assign(Object.assign({}, experimental), { needToSetDimensionsForUploadedImages,
+            renderStorage,
+            directiveSyntax, md: Object.assign(Object.assign({}, md), { breaks, html: (_e = md.html) !== null && _e !== void 0 ? _e : props.allowHTML, linkify: (_f = md.linkify) !== null && _f !== void 0 ? _f : props.linkify, linkifyTlds: (_g = md.linkifyTlds) !== null && _g !== void 0 ? _g : props.linkifyTlds }), initial: Object.assign(Object.assign({}, initial), { markup: (_h = initial.markup) !== null && _h !== void 0 ? _h : props.initialMarkup, mode: (_j = initial.mode) !== null && _j !== void 0 ? _j : props.initialEditorMode, toolbarVisible: (_k = initial.toolbarVisible) !== null && _k !== void 0 ? _k : props.initialToolbarVisible, splitModeEnabled: (_l = initial.splitModeEnabled) !== null && _l !== void 0 ? _l : props.initialSplitModeEnabled }), handlers: Object.assign(Object.assign({}, handlers), { uploadFile }), experimental: Object.assign(Object.assign({}, experimental), { needToSetDimensionsForUploadedImages,
                 enableNewImageSizeCalculation, prepareRawMarkup: (_m = experimental.prepareRawMarkup) !== null && _m !== void 0 ? _m : props.prepareRawMarkup, beforeEditorModeChange: (_o = experimental.beforeEditorModeChange) !== null && _o !== void 0 ? _o : props.experimental_beforeEditorModeChange }), markupConfig: Object.assign(Object.assign({}, markupConfig), { splitMode: (_p = markupConfig.splitMode) !== null && _p !== void 0 ? _p : props.splitMode, renderPreview: (_q = markupConfig.renderPreview) !== null && _q !== void 0 ? _q : props.renderPreview, extensions: (_r = markupConfig.extensions) !== null && _r !== void 0 ? _r : props.extraMarkupExtensions }), wysiwygConfig: Object.assign(Object.assign({}, wysiwygConfig), { extensions, escapeConfig: (_s = wysiwygConfig.escapeConfig) !== null && _s !== void 0 ? _s : props.escapeConfig }) }));
     }, deps);
     (0, react_1.useLayoutEffect)(() => {

package/build/cjs/bundle/wysiwyg-preset.d.ts

@@ -1,9 +1,10 @@
-import { ExtensionAuto } from '../core';
+import type { ExtensionAuto } from '../core';
 import { BehaviorPresetOptions } from '../extensions/behavior';
 import { EditorModeKeymapOptions } from '../extensions/behavior/EditorModeKeymap';
 import { FullPresetOptions } from '../presets/full';
+import type { DirectiveSyntaxContext } from '../utils/directive';
 import type { FileUploadHandler } from '../utils/upload';
-import { MarkdownEditorPreset } from './types';
+import type { MarkdownEditorPreset } from './types';
 export declare type ExtensionsOptions = BehaviorPresetOptions & FullPresetOptions;
 export declare type BundlePresetOptions = ExtensionsOptions & EditorModeKeymapOptions & {
     preset: MarkdownEditorPreset;
@@ -16,5 +17,13 @@ export declare type BundlePresetOptions = ExtensionsOptions & EditorModeKeymapOp
      */
     needToSetDimensionsForUploadedImages?: boolean;
     enableNewImageSizeCalculation?: boolean;
+    directiveSyntax: DirectiveSyntaxContext;
 };
+declare global {
+    namespace WysiwygEditor {
+        interface Context {
+            directiveSyntax: DirectiveSyntaxContext;
+        }
+    }
+}
 export declare const BundlePreset: ExtensionAuto<BundlePresetOptions>;

package/build/cjs/bundle/wysiwyg-preset.js

@@ -16,6 +16,7 @@ const emoji_1 = require("./emoji");
 const DEFAULT_IGNORED_KEYS = ['Tab', 'Shift-Tab'];
 const BundlePreset = (builder, opts) => {
     var _a, _b, _c;
+    builder.context.set('directiveSyntax', opts.directiveSyntax);
     const dropCursor = {
         color: 'var(--g-color-line-brand)',
         width: 2,

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/const.d.ts

@@ -3,6 +3,10 @@ export declare enum CutNode {
     CutTitle = "yfm_cut_title",
     CutContent = "yfm_cut_content"
 }
+export declare enum CutAttr {
+    Class = "class",
+    Markup = "data-markup"
+}
 export declare const cutType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
 export declare const cutTitleType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
 export declare const cutContentType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/const.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cutContentType = exports.cutTitleType = exports.cutType = exports.CutNode = void 0;
+exports.cutContentType = exports.cutTitleType = exports.cutType = exports.CutAttr = exports.CutNode = void 0;
 const schema_1 = require("../../../../utils/schema");
 var CutNode;
 (function (CutNode) {
@@ -8,6 +8,11 @@ var CutNode;
     CutNode["CutTitle"] = "yfm_cut_title";
     CutNode["CutContent"] = "yfm_cut_content";
 })(CutNode = exports.CutNode || (exports.CutNode = {}));
+var CutAttr;
+(function (CutAttr) {
+    CutAttr["Class"] = "class";
+    CutAttr["Markup"] = "data-markup";
+})(CutAttr = exports.CutAttr || (exports.CutAttr = {}));
 exports.cutType = (0, schema_1.nodeTypeFactory)(CutNode.Cut);
 exports.cutTitleType = (0, schema_1.nodeTypeFactory)(CutNode.CutTitle);
 exports.cutContentType = (0, schema_1.nodeTypeFactory)(CutNode.CutContent);

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/index.d.ts

@@ -1,6 +1,13 @@
 import type { NodeSpec } from 'prosemirror-model';
 import type { ExtensionAuto, ExtensionNodeSpec } from '../../../../core';
-export { CutNode, cutType, cutTitleType, cutContentType } from './const';
+export { CutAttr, CutNode, cutType, cutTitleType, cutContentType } from './const';
+declare global {
+    namespace MarkdownEditor {
+        interface DirectiveSyntaxAdditionalSupportedExtensions {
+            yfmCut: true;
+        }
+    }
+}
 export declare type YfmCutSpecsOptions = {
     cutView?: ExtensionNodeSpec['view'];
     cutTitleView?: ExtensionNodeSpec['view'];

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/index.js

@@ -1,23 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.YfmCutSpecs = exports.cutContentType = exports.cutTitleType = exports.cutType = exports.CutNode = void 0;
+exports.YfmCutSpecs = exports.cutContentType = exports.cutTitleType = exports.cutType = exports.CutNode = exports.CutAttr = void 0;
 const cut_extension_1 = require("@diplodoc/cut-extension");
 const const_1 = require("./const");
 const parser_1 = require("./parser");
 const schema_1 = require("./schema");
 const serializer_1 = require("./serializer");
 var const_2 = require("./const");
+Object.defineProperty(exports, "CutAttr", { enumerable: true, get: function () { return const_2.CutAttr; } });
 Object.defineProperty(exports, "CutNode", { enumerable: true, get: function () { return const_2.CutNode; } });
 Object.defineProperty(exports, "cutType", { enumerable: true, get: function () { return const_2.cutType; } });
 Object.defineProperty(exports, "cutTitleType", { enumerable: true, get: function () { return const_2.cutTitleType; } });
 Object.defineProperty(exports, "cutContentType", { enumerable: true, get: function () { return const_2.cutContentType; } });
 const YfmCutSpecs = (builder, opts) => {
     const schemaSpecs = (0, schema_1.getSchemaSpecs)(opts, builder.context.get('placeholder'));
+    const directiveSyntax = builder.context.get('directiveSyntax');
+    const serializerTokens = (0, serializer_1.getSerializerTokens)({ directiveSyntax });
     builder
-        .configureMd((md) => md.use((0, cut_extension_1.transform)({ bundle: false })))
+        .configureMd((md) => md.use((0, cut_extension_1.transform)({
+        bundle: false,
+        directiveSyntax: directiveSyntax === null || directiveSyntax === void 0 ? void 0 : directiveSyntax.mdPluginValueFor('yfmCut'),
+    })))
         .addNode(const_1.CutNode.Cut, () => ({
         spec: schemaSpecs[const_1.CutNode.Cut],
-        toMd: serializer_1.serializerTokens[const_1.CutNode.Cut],
+        toMd: serializerTokens[const_1.CutNode.Cut],
         fromMd: {
             tokenSpec: parser_1.parserTokens[const_1.CutNode.Cut],
         },
@@ -25,7 +31,7 @@ const YfmCutSpecs = (builder, opts) => {
     }))
         .addNode(const_1.CutNode.CutTitle, () => ({
         spec: schemaSpecs[const_1.CutNode.CutTitle],
-        toMd: serializer_1.serializerTokens[const_1.CutNode.CutTitle],
+        toMd: serializerTokens[const_1.CutNode.CutTitle],
         fromMd: {
             tokenSpec: parser_1.parserTokens[const_1.CutNode.CutTitle],
         },
@@ -33,7 +39,7 @@ const YfmCutSpecs = (builder, opts) => {
     }))
         .addNode(const_1.CutNode.CutContent, () => ({
         spec: schemaSpecs[const_1.CutNode.CutContent],
-        toMd: serializer_1.serializerTokens[const_1.CutNode.CutContent],
+        toMd: serializerTokens[const_1.CutNode.CutContent],
         fromMd: {
             tokenSpec: parser_1.parserTokens[const_1.CutNode.CutContent],
         },

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/parser.js

@@ -2,7 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parserTokens = void 0;
 const const_1 = require("./const");
-const getAttrs = (tok) => (tok.attrs ? Object.fromEntries(tok.attrs) : {});
+const getAttrs = (tok) => {
+    const nodeAttrs = tok.attrs ? Object.fromEntries(tok.attrs) : {};
+    nodeAttrs[const_1.CutAttr.Markup] = tok.markup;
+    return nodeAttrs;
+};
 exports.parserTokens = {
     [const_1.CutNode.Cut]: { name: const_1.CutNode.Cut, type: 'block', getAttrs },
     [const_1.CutNode.CutTitle]: { name: const_1.CutNode.CutTitle, type: 'block' },

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/schema.d.ts

@@ -1,5 +1,5 @@
 import type { NodeSpec } from 'prosemirror-model';
 import type { PlaceholderOptions } from '../../../../utils/placeholder';
-import { CutNode } from '../const';
+import { CutNode } from './const';
 import type { YfmCutSpecsOptions } from './index';
 export declare const getSchemaSpecs: (opts?: YfmCutSpecsOptions, placeholder?: PlaceholderOptions) => Record<CutNode, NodeSpec>;

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/schema.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSchemaSpecs = void 0;
-const const_1 = require("../const");
+const const_1 = require("./const");
 const DEFAULT_PLACEHOLDERS = {
     Title: 'Cut title',
     Content: 'Cut content',
@@ -10,10 +10,15 @@ const getSchemaSpecs = (opts, placeholder) => {
     var _a, _b, _c, _d;
     return ({
         [const_1.CutNode.Cut]: {
-            attrs: { class: { default: 'yfm-cut' } },
+            attrs: { class: { default: 'yfm-cut' }, [const_1.CutAttr.Markup]: { default: null } },
             content: `${const_1.CutNode.CutTitle} ${const_1.CutNode.CutContent}`,
             group: 'block yfm-cut',
-            parseDOM: [{ tag: '.yfm-cut' }],
+            parseDOM: [
+                {
+                    tag: '.yfm-cut',
+                    getAttrs: (node) => ({ [const_1.CutAttr.Markup]: node.getAttribute(const_1.CutAttr.Markup) }),
+                },
+            ],
             toDOM(node) {
                 return ['div', node.attrs, 0];
             },

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/serializer.d.ts

@@ -1,3 +1,5 @@
 import type { SerializerNodeToken } from '../../../../core';
 import { CutNode } from './const';
-export declare const serializerTokens: Record<CutNode, SerializerNodeToken>;
+export declare function getSerializerTokens({ directiveSyntax, }: {
+    directiveSyntax?: WysiwygEditor.Context['directiveSyntax'];
+}): Record<CutNode, SerializerNodeToken>;

package/build/cjs/extensions/yfm/YfmCut/YfmCutSpecs/serializer.js

@@ -1,29 +1,47 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializerTokens = void 0;
+exports.getSerializerTokens = void 0;
 const nodes_1 = require("../../../../utils/nodes");
 const placeholder_1 = require("../../../../utils/placeholder");
 const const_1 = require("./const");
-exports.serializerTokens = {
-    [const_1.CutNode.Cut]: (state, node) => {
-        state.renderContent(node);
-        state.write('{% endcut %}');
-        state.closeBlock(node);
-    },
-    [const_1.CutNode.CutTitle]: (state, node) => {
-        state.write('{% cut "');
-        if (node.nodeSize > 2)
-            state.renderInline(node);
-        else
-            state.write((0, placeholder_1.getPlaceholderContent)(node));
-        state.write('" %}\n');
-        state.write('\n');
-        state.closeBlock();
-    },
-    [const_1.CutNode.CutContent]: (state, node) => {
-        if (!(0, nodes_1.isNodeEmpty)(node))
-            state.renderInline(node);
-        else
-            state.write((0, placeholder_1.getPlaceholderContent)(node) + '\n\n');
-    },
-};
+function getSerializerTokens({ directiveSyntax, }) {
+    const isDirectiveCut = (node) => {
+        return directiveSyntax === null || directiveSyntax === void 0 ? void 0 : directiveSyntax.shouldSerializeToDirective('yfmCut', node.attrs[const_1.CutAttr.Markup]);
+    };
+    return {
+        [const_1.CutNode.Cut]: (state, node) => {
+            state.renderContent(node);
+            state.write(isDirectiveCut(node) ? ':::' : '{% endcut %}');
+            state.closeBlock(node);
+        },
+        [const_1.CutNode.CutTitle]: (state, node, parent) => {
+            if (isDirectiveCut(parent)) {
+                state.write(':::cut [');
+                state.renderInline(node);
+                state.write(']');
+                state.ensureNewLine();
+                state.closeBlock();
+                return;
+            }
+            state.write('{% cut "');
+            if (node.nodeSize > 2)
+                state.renderInline(node);
+            else
+                state.write((0, placeholder_1.getPlaceholderContent)(node));
+            state.write('" %}\n');
+            state.write('\n');
+            state.closeBlock();
+        },
+        [const_1.CutNode.CutContent]: (state, node, parent) => {
+            if (isDirectiveCut(parent)) {
+                state.renderContent(node);
+                return;
+            }
+            if (!(0, nodes_1.isNodeEmpty)(node))
+                state.renderInline(node);
+            else
+                state.write((0, placeholder_1.getPlaceholderContent)(node) + '\n\n');
+        },
+    };
+}
+exports.getSerializerTokens = getSerializerTokens;

package/build/cjs/extensions/yfm/YfmFile/YfmFileSpecs/const.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LINK_TO_FILE_ATTRS_MAP = exports.fileNodeAttrsSpec = exports.REQUIRED_ATTRS = exports.KNOWN_ATTRS = exports.yfmFileNodeName = void 0;
-const const_1 = require("@diplodoc/transform/lib/plugins/file/const");
-exports.yfmFileNodeName = const_1.FILE_TOKEN;
-exports.KNOWN_ATTRS = const_1.KNOWN_ATTRS.map((attrName) => {
-    if (attrName in const_1.FILE_TO_LINK_ATTRS_MAP)
-        return const_1.FILE_TO_LINK_ATTRS_MAP[attrName];
+const file_extension_1 = require("@diplodoc/file-extension");
+exports.yfmFileNodeName = file_extension_1.FILE_TOKEN;
+exports.KNOWN_ATTRS = file_extension_1.FILE_KNOWN_ATTRS.map((attrName) => {
+    if (attrName in file_extension_1.FILE_TO_LINK_ATTRS_MAP)
+        return file_extension_1.FILE_TO_LINK_ATTRS_MAP[attrName];
     return attrName;
 });
-exports.REQUIRED_ATTRS = const_1.REQUIRED_ATTRS.map((attrName) => {
-    if (attrName in const_1.FILE_TO_LINK_ATTRS_MAP)
-        return const_1.FILE_TO_LINK_ATTRS_MAP[attrName];
+exports.REQUIRED_ATTRS = file_extension_1.FILE_REQUIRED_ATTRS.map((attrName) => {
+    if (attrName in file_extension_1.FILE_TO_LINK_ATTRS_MAP)
+        return file_extension_1.FILE_TO_LINK_ATTRS_MAP[attrName];
     return attrName;
 });
 exports.fileNodeAttrsSpec = {};
@@ -21,6 +21,6 @@ for (const attrName of exports.KNOWN_ATTRS) {
     }
 }
 exports.LINK_TO_FILE_ATTRS_MAP = {};
-for (const [key, value] of Object.entries(const_1.FILE_TO_LINK_ATTRS_MAP)) {
+for (const [key, value] of Object.entries(file_extension_1.FILE_TO_LINK_ATTRS_MAP)) {
     exports.LINK_TO_FILE_ATTRS_MAP[value] = key;
 }

package/build/cjs/extensions/yfm/YfmFile/YfmFileSpecs/index.js

@@ -1,28 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.YfmFileSpecs = exports.fileType = exports.yfmFileNodeName = void 0;
-const tslib_1 = require("tslib");
-const file_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/plugins/file"));
-const const_1 = require("@diplodoc/transform/lib/plugins/file/const");
+const file_extension_1 = require("@diplodoc/file-extension");
 const schema_1 = require("../../../../utils/schema");
-const const_2 = require("./const");
-var const_3 = require("./const");
-Object.defineProperty(exports, "yfmFileNodeName", { enumerable: true, get: function () { return const_3.yfmFileNodeName; } });
-exports.fileType = (0, schema_1.nodeTypeFactory)(const_2.yfmFileNodeName);
+const const_1 = require("./const");
+var const_2 = require("./const");
+Object.defineProperty(exports, "yfmFileNodeName", { enumerable: true, get: function () { return const_2.yfmFileNodeName; } });
+exports.fileType = (0, schema_1.nodeTypeFactory)(const_1.yfmFileNodeName);
 const YfmFileSpecs = (builder) => {
-    builder.configureMd((md) => md.use(file_1.default));
-    builder.addNode(const_2.yfmFileNodeName, () => ({
+    builder.configureMd((md) => md.use((0, file_extension_1.transform)({ bundle: false })));
+    builder.addNode(const_1.yfmFileNodeName, () => ({
         spec: {
             group: 'inline',
             inline: true,
-            attrs: const_2.fileNodeAttrsSpec,
+            attrs: const_1.fileNodeAttrsSpec,
             parseDOM: [
                 {
-                    tag: `a[class="${const_1.FileClassName.Link}"]`,
+                    tag: `a[class="${file_extension_1.FileClassName.Link}"]`,
                     getAttrs(p) {
                         const elem = p;
                         const attrs = {};
-                        for (const name of const_2.KNOWN_ATTRS) {
+                        for (const name of const_1.KNOWN_ATTRS) {
                             const value = elem.getAttribute(name);
                             if (value) {
                                 attrs[name] = value;
@@ -36,22 +34,22 @@ const YfmFileSpecs = (builder) => {
             toDOM(node) {
                 const a = document.createElement('a');
                 a.contentEditable = 'false';
-                a.classList.add(const_1.FileClassName.Link);
+                a.classList.add(file_extension_1.FileClassName.Link);
                 for (const [key, value] of Object.entries(node.attrs)) {
                     if (value)
                         a.setAttribute(key, value);
                 }
                 const span = document.createElement('span');
-                span.classList.add(const_1.FileClassName.Icon);
+                span.classList.add(file_extension_1.FileClassName.Icon);
                 a.appendChild(span);
-                a.append(node.attrs[const_1.LinkHtmlAttr.Download]);
+                a.append(node.attrs[file_extension_1.FileHtmlAttr.Download]);
                 return a;
             },
         },
         fromMd: {
-            tokenName: const_2.yfmFileNodeName,
+            tokenName: const_1.yfmFileNodeName,
             tokenSpec: {
-                name: const_2.yfmFileNodeName,
+                name: const_1.yfmFileNodeName,
                 type: 'node',
                 getAttrs: (tok) => {
                     var _a;
@@ -63,15 +61,15 @@ const YfmFileSpecs = (builder) => {
             const attrsStr = Object.entries(node.attrs)
                 .reduce((arr, [key, value]) => {
                 if (value) {
-                    if (key in const_2.LINK_TO_FILE_ATTRS_MAP) {
-                        key = const_2.LINK_TO_FILE_ATTRS_MAP[key];
+                    if (key in const_1.LINK_TO_FILE_ATTRS_MAP) {
+                        key = const_1.LINK_TO_FILE_ATTRS_MAP[key];
                     }
                     arr.push(`${key}="${value.replace(/"/g, '')}"`);
                 }
                 return arr;
             }, [])
                 .join(' ');
-            state.write(`${const_1.PREFIX}${attrsStr} %}`);
+            state.write(`${file_extension_1.FILE_MARKUP_PREFIX}${attrsStr} %}`);
         },
     }));
 };

package/build/cjs/extensions/yfm/YfmFile/index.d.ts

@@ -1,5 +1,6 @@
 import { ExtensionAuto } from '../../../core';
 import { FileUploadHandler } from '../../../utils/upload';
+import '@diplodoc/file-extension/runtime/styles.css';
 export declare type YfmFileOptions = {
     fileUploadHandler?: FileUploadHandler;
     needToSetDimensionsForUploadedImages?: boolean;

package/build/cjs/extensions/yfm/YfmFile/index.js

@@ -4,6 +4,7 @@ exports.YfmFile = void 0;
 const YfmFilePaste_1 = require("./YfmFilePaste");
 const YfmFileSpecs_1 = require("./YfmFileSpecs");
 const YfmFileWidget_1 = require("./YfmFileWidget");
+require("@diplodoc/file-extension/runtime/styles.css");
 const YfmFile = (builder, opts = {}) => {
     builder.use(YfmFileSpecs_1.YfmFileSpecs, opts);
     builder.use(YfmFileWidget_1.YfmFileWidget, opts);

package/build/cjs/index.d.ts

@@ -11,7 +11,7 @@ export * from './forms';
 export * from './view';
 export * from './utils';
 export * from './bundle';
-export { ReactRendererFacet, getImageDimensions } from './markup';
+export { DirectiveSyntaxFacet, ReactRendererFacet, getImageDimensions } from './markup';
 export * as MarkupCommands from './markup/commands';
 export * as MarkupHelpers from './markup/commands/helpers';
 export { Lang, configure } from './configure';

package/build/cjs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.serializeForClipboard = exports.getLastChildOfNode = exports.getChildrenOfNode = exports.findSelectedNodeOfType = exports.get$Cursor = exports.isWholeSelection = exports.isNodeSelection = exports.isTextSelection = exports.getPlaceholderContent = exports.isSameNodeType = exports.markTypeFactory = exports.nodeTypeFactory = exports.isSelectableNode = exports.isCodeBlock = exports.isNodeEmpty = exports.findFirstTextblockChild = exports.isMarkActive = exports.findMark = exports.inlineNodeInputRule = exports.nodeInputRule = exports.markInputRule = exports.isMac = exports.configure = exports.Lang = exports.MarkupHelpers = exports.MarkupCommands = exports.getImageDimensions = exports.ReactRendererFacet = void 0;
+exports.serializeForClipboard = exports.getLastChildOfNode = exports.getChildrenOfNode = exports.findSelectedNodeOfType = exports.get$Cursor = exports.isWholeSelection = exports.isNodeSelection = exports.isTextSelection = exports.getPlaceholderContent = exports.isSameNodeType = exports.markTypeFactory = exports.nodeTypeFactory = exports.isSelectableNode = exports.isCodeBlock = exports.isNodeEmpty = exports.findFirstTextblockChild = exports.isMarkActive = exports.findMark = exports.inlineNodeInputRule = exports.nodeInputRule = exports.markInputRule = exports.isMac = exports.configure = exports.Lang = exports.MarkupHelpers = exports.MarkupCommands = exports.getImageDimensions = exports.ReactRendererFacet = exports.DirectiveSyntaxFacet = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./common"), exports);
 tslib_1.__exportStar(require("./core"), exports);
@@ -16,6 +16,7 @@ tslib_1.__exportStar(require("./view"), exports);
 tslib_1.__exportStar(require("./utils"), exports);
 tslib_1.__exportStar(require("./bundle"), exports);
 var markup_1 = require("./markup");
+Object.defineProperty(exports, "DirectiveSyntaxFacet", { enumerable: true, get: function () { return markup_1.DirectiveSyntaxFacet; } });
 Object.defineProperty(exports, "ReactRendererFacet", { enumerable: true, get: function () { return markup_1.ReactRendererFacet; } });
 Object.defineProperty(exports, "getImageDimensions", { enumerable: true, get: function () { return markup_1.getImageDimensions; } });
 exports.MarkupCommands = tslib_1.__importStar(require("./markup/commands"));

package/build/cjs/markup/codemirror/create.d.ts

@@ -1,11 +1,12 @@
 import { autocompletion } from '@codemirror/autocomplete';
 import type { Extension, StateCommand } from '@codemirror/state';
-import { EditorView, EditorViewConfig, KeyBinding, placeholder } from '@codemirror/view';
+import { EditorView, type EditorViewConfig, KeyBinding, placeholder } from '@codemirror/view';
 import type { ParseInsertedUrlAsImage } from '../../bundle';
-import { EventMap } from '../../bundle/Editor';
-import { ReactRenderStorage } from '../../extensions';
-import { Receiver } from '../../utils';
-import { FileUploadHandler } from './files-upload-facet';
+import type { EventMap } from '../../bundle/Editor';
+import type { ReactRenderStorage } from '../../extensions';
+import type { Receiver } from '../../utils';
+import type { DirectiveSyntaxContext } from '../../utils/directive';
+import { type FileUploadHandler } from './files-upload-facet';
 import { type YfmLangOptions } from './yfm';
 export type { YfmLangOptions };
 declare type Autocompletion = Parameters<typeof autocompletion>[0];
@@ -30,6 +31,7 @@ export declare type CreateCodemirrorParams = {
     receiver?: Receiver<EventMap>;
     yfmLangOptions?: YfmLangOptions;
     autocompletion?: Autocompletion;
+    directiveSyntax: DirectiveSyntaxContext;
 };
 export declare function createCodemirror(params: CreateCodemirrorParams): EditorView;
 export declare function withLogger(action: string, command: StateCommand): StateCommand;