@gravity-ui/markdown-editor 14.3.1 → 14.5.0

package/build/cjs/bundle/sticky/sticky.css

@@ -15,7 +15,7 @@
   position: absolute;
   inset: var(--g-md-toolbar-sticky-inset, -4px);
   content: "";
-  border: 1px solid var(--g-color-line-generic-solid);
+  border: var(--g-md-toolbar-sticky-border, 1px solid var(--g-color-line-generic-solid));
   border-radius: 4px;
   background-color: var(--g-color-base-background);
 }

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 = {
     /**
@@ -87,6 +109,8 @@ export declare type MarkdownEditorMarkupConfig = {
     keymaps?: CreateCodemirrorParams['keymaps'];
     /** Overrides the default placeholder content. */
     placeholder?: CreateCodemirrorParams['placeholder'];
+    /** Enable HTML parsing when pasting content. */
+    parseHtmlOnPaste?: boolean;
     /**
      * Additional language data for markdown language in codemirror.
      * Can be used to configure additional autocompletions and others.

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/behavior/Clipboard/utils.d.ts

@@ -3,6 +3,7 @@ export declare enum DataTransferType {
     Text = "text/plain",
     Html = "text/html",
     Yfm = "text/yfm",
+    Rtf = "text/rtf",
     UriList = "text/uri-list",
     VSCodeData = "vscode-editor-data",
     Files = "Files"

package/build/cjs/extensions/behavior/Clipboard/utils.js

@@ -7,6 +7,7 @@ var DataTransferType;
     DataTransferType["Text"] = "text/plain";
     DataTransferType["Html"] = "text/html";
     DataTransferType["Yfm"] = "text/yfm";
+    DataTransferType["Rtf"] = "text/rtf";
     DataTransferType["UriList"] = "text/uri-list";
     DataTransferType["VSCodeData"] = "vscode-editor-data";
     DataTransferType["Files"] = "Files";

package/build/cjs/extensions/markdown/CodeBlock/handle-paste.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handlePaste = void 0;
-const utils_1 = require("../../behavior/Clipboard/utils");
+const clipboard_1 = require("../../../utils/clipboard");
 const const_1 = require("./const");
 const handlePaste = (view, e) => {
     if (!e.clipboardData || view.state.selection.$from.parent.type.spec.code)
@@ -19,28 +19,16 @@ const handlePaste = (view, e) => {
 exports.handlePaste = handlePaste;
 function getCodeData(data) {
     var _a;
-    if (data.getData(utils_1.DataTransferType.Text)) {
+    if (data.getData(clipboard_1.DataTransferType.Text)) {
         let editor = 'unknown';
         let mode;
-        if (isVSCode(data)) {
+        if ((0, clipboard_1.isVSCode)(data)) {
             editor = 'vscode';
-            mode = (_a = tryCatch(() => JSON.parse(data.getData(utils_1.DataTransferType.VSCodeData)))) === null || _a === void 0 ? void 0 : _a.mode;
+            mode = (_a = (0, clipboard_1.tryParseVSCodeData)(data)) === null || _a === void 0 ? void 0 : _a.mode;
         }
         else
             return null;
-        return { editor, mode, value: data.getData(utils_1.DataTransferType.Text) };
+        return { editor, mode, value: data.getData(clipboard_1.DataTransferType.Text) };
     }
     return null;
 }
-function isVSCode(data) {
-    return data.types.includes(utils_1.DataTransferType.VSCodeData);
-}
-function tryCatch(fn) {
-    try {
-        return fn();
-    }
-    catch (e) {
-        console.error(e);
-    }
-    return undefined;
-}

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.d.ts

@@ -1,5 +1,17 @@
+import { FileHtmlAttr } from '@diplodoc/file-extension';
 import type { AttributeSpec } from 'prosemirror-model';
 export declare const yfmFileNodeName = "yfm_file";
+export declare const YfmFileAttr: {
+    readonly Markup: "data-markup";
+    readonly Name: FileHtmlAttr.Download;
+    readonly Link: FileHtmlAttr.Href;
+    readonly ReferrerPolicy: FileHtmlAttr.ReferrerPolicy;
+    readonly Rel: FileHtmlAttr.Rel;
+    readonly Target: FileHtmlAttr.Target;
+    readonly Type: FileHtmlAttr.Type;
+    readonly Lang: FileHtmlAttr.HrefLang;
+};
+export declare const YFM_FILE_DIRECTIVE_ATTRS: readonly string[];
 export declare const KNOWN_ATTRS: readonly string[];
 export declare const REQUIRED_ATTRS: string[];
 export declare const fileNodeAttrsSpec: Record<string, AttributeSpec>;

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

@@ -1,19 +1,38 @@
 "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];
+exports.LINK_TO_FILE_ATTRS_MAP = exports.fileNodeAttrsSpec = exports.REQUIRED_ATTRS = exports.KNOWN_ATTRS = exports.YFM_FILE_DIRECTIVE_ATTRS = exports.YfmFileAttr = exports.yfmFileNodeName = void 0;
+const file_extension_1 = require("@diplodoc/file-extension");
+exports.yfmFileNodeName = file_extension_1.FILE_TOKEN;
+exports.YfmFileAttr = {
+    Markup: 'data-markup',
+    Name: file_extension_1.FileHtmlAttr.Download,
+    Link: file_extension_1.FileHtmlAttr.Href,
+    ReferrerPolicy: file_extension_1.FileHtmlAttr.ReferrerPolicy,
+    Rel: file_extension_1.FileHtmlAttr.Rel,
+    Target: file_extension_1.FileHtmlAttr.Target,
+    Type: file_extension_1.FileHtmlAttr.Type,
+    Lang: file_extension_1.FileHtmlAttr.HrefLang,
+};
+exports.YFM_FILE_DIRECTIVE_ATTRS = [
+    exports.YfmFileAttr.ReferrerPolicy,
+    exports.YfmFileAttr.Rel,
+    exports.YfmFileAttr.Target,
+    exports.YfmFileAttr.Type,
+    exports.YfmFileAttr.Lang,
+];
+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 = {};
+exports.fileNodeAttrsSpec = {
+    [exports.YfmFileAttr.Markup]: { default: null },
+};
 for (const attrName of exports.KNOWN_ATTRS) {
     const attrSpec = (exports.fileNodeAttrsSpec[attrName] = {});
     if (!exports.REQUIRED_ATTRS.includes(attrName)) {
@@ -21,6 +40,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.d.ts

@@ -1,4 +1,11 @@
 import type { Extension } from '../../../../core';
-export { yfmFileNodeName } from './const';
+export { yfmFileNodeName, YfmFileAttr } from './const';
 export declare const fileType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
+declare global {
+    namespace MarkdownEditor {
+        interface DirectiveSyntaxAdditionalSupportedExtensions {
+            yfmFile: true;
+        }
+    }
+}
 export declare const YfmFileSpecs: Extension;

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

@@ -1,28 +1,31 @@
 "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");
+exports.YfmFileSpecs = exports.fileType = exports.YfmFileAttr = exports.yfmFileNodeName = void 0;
+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; } });
+Object.defineProperty(exports, "YfmFileAttr", { enumerable: true, get: function () { return const_2.YfmFileAttr; } });
+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, () => ({
+    const directiveContext = builder.context.get('directiveSyntax');
+    builder.configureMd((md) => md.use((0, file_extension_1.transform)({
+        bundle: false,
+        directiveSyntax: directiveContext === null || directiveContext === void 0 ? void 0 : directiveContext.mdPluginValueFor('yfmFile'),
+    })));
+    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,43 +39,62 @@ 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;
-                    return Object.fromEntries((_a = tok.attrs) !== null && _a !== void 0 ? _a : []);
+                    const attrs = Object.fromEntries(tok.attrs || []);
+                    attrs[const_1.YfmFileAttr.Markup] = tok.markup;
+                    return attrs;
                 },
             },
         },
         toMd: (state, node) => {
+            if (directiveContext === null || directiveContext === void 0 ? void 0 : directiveContext.shouldSerializeToDirective('yfmFile', node.attrs[const_1.YfmFileAttr.Markup])) {
+                state.write(serializeToDirective(node));
+                return;
+            }
             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 !== const_1.YfmFileAttr.Markup && value) {
+                    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} %}`);
         },
     }));
 };
 exports.YfmFileSpecs = YfmFileSpecs;
+function serializeToDirective(node) {
+    const filename = node.attrs[const_1.YfmFileAttr.Name] || '';
+    const filelink = node.attrs[const_1.YfmFileAttr.Link] || '';
+    let fileMarkup = `:file[${filename}](${filelink})`;
+    const attrs = const_1.YFM_FILE_DIRECTIVE_ATTRS.reduce((acc, key) => {
+        const value = node.attrs[key];
+        if (value)
+            acc.push(`${key}="${value}"`);
+        return acc;
+    }, []);
+    if (attrs.length)
+        fileMarkup += `{${attrs.join(' ')}}`;
+    return fileMarkup;
+}