@gravity-ui/markdown-editor 14.3.1 → 14.5.0

package/build/esm/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/esm/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/esm/bundle/useMarkdownEditor.js

@@ -1,6 +1,7 @@
 import { useLayoutEffect, useMemo } from 'react';
 import { ReactRenderStorage } from '../extensions';
 import { logger } from '../logger';
+import { DirectiveSyntaxContext } from '../utils/directive';
 import { EditorImpl } from './Editor';
 import { BundlePreset } from './wysiwyg-preset';
 // [major] TODO: remove generic type
@@ -14,10 +15,12 @@ export 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 DirectiveSyntaxContext(experimental.directiveSyntax);
         const extensions = (builder) => {
             var _a;
             const extensionOptions = (_a = wysiwygConfig.extensionOptions) !== null && _a !== void 0 ? _a : props.extensionOptions;
-            builder.use(BundlePreset, Object.assign(Object.assign({}, extensionOptions), { preset, reactRenderer: renderStorage, onCancel: () => {
+            builder.use(BundlePreset, Object.assign(Object.assign({}, extensionOptions), { directiveSyntax,
+                preset, reactRenderer: renderStorage, onCancel: () => {
                     editor.emit('cancel', null);
                     return true;
                 }, onSubmit: () => {
@@ -33,7 +36,8 @@ export function useMarkdownEditor(props, deps = []) {
             }
         };
         return new 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);
     useLayoutEffect(() => {

package/build/esm/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/esm/bundle/wysiwyg-preset.js

@@ -13,6 +13,7 @@ import { emojiDefs } from './emoji';
 const DEFAULT_IGNORED_KEYS = ['Tab', 'Shift-Tab'];
 export 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/esm/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/esm/extensions/behavior/Clipboard/utils.js

@@ -4,6 +4,7 @@ export 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/esm/extensions/markdown/CodeBlock/handle-paste.js

@@ -1,4 +1,4 @@
-import { DataTransferType } from '../../behavior/Clipboard/utils';
+import { DataTransferType, isVSCode, tryParseVSCodeData } from '../../../utils/clipboard';
 import { cbType, codeBlockLangAttr } from './const';
 export const handlePaste = (view, e) => {
     if (!e.clipboardData || view.state.selection.$from.parent.type.spec.code)
@@ -20,7 +20,7 @@ function getCodeData(data) {
         let mode;
         if (isVSCode(data)) {
             editor = 'vscode';
-            mode = (_a = tryCatch(() => JSON.parse(data.getData(DataTransferType.VSCodeData)))) === null || _a === void 0 ? void 0 : _a.mode;
+            mode = (_a = tryParseVSCodeData(data)) === null || _a === void 0 ? void 0 : _a.mode;
         }
         else
             return null;
@@ -28,15 +28,3 @@ function getCodeData(data) {
     }
     return null;
 }
-function isVSCode(data) {
-    return data.types.includes(DataTransferType.VSCodeData);
-}
-function tryCatch(fn) {
-    try {
-        return fn();
-    }
-    catch (e) {
-        console.error(e);
-    }
-    return undefined;
-}

package/build/esm/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/esm/extensions/yfm/YfmCut/YfmCutSpecs/const.js

@@ -5,6 +5,11 @@ export var CutNode;
     CutNode["CutTitle"] = "yfm_cut_title";
     CutNode["CutContent"] = "yfm_cut_content";
 })(CutNode || (CutNode = {}));
+export var CutAttr;
+(function (CutAttr) {
+    CutAttr["Class"] = "class";
+    CutAttr["Markup"] = "data-markup";
+})(CutAttr || (CutAttr = {}));
 export const cutType = nodeTypeFactory(CutNode.Cut);
 export const cutTitleType = nodeTypeFactory(CutNode.CutTitle);
 export const cutContentType = nodeTypeFactory(CutNode.CutContent);

package/build/esm/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/esm/extensions/yfm/YfmCut/YfmCutSpecs/index.js

@@ -2,12 +2,17 @@ import { transform as yfmCut } from '@diplodoc/cut-extension';
 import { CutNode } from './const';
 import { parserTokens } from './parser';
 import { getSchemaSpecs } from './schema';
-import { serializerTokens } from './serializer';
-export { CutNode, cutType, cutTitleType, cutContentType } from './const';
+import { getSerializerTokens } from './serializer';
+export { CutAttr, CutNode, cutType, cutTitleType, cutContentType } from './const';
 export const YfmCutSpecs = (builder, opts) => {
     const schemaSpecs = getSchemaSpecs(opts, builder.context.get('placeholder'));
+    const directiveSyntax = builder.context.get('directiveSyntax');
+    const serializerTokens = getSerializerTokens({ directiveSyntax });
     builder
-        .configureMd((md) => md.use(yfmCut({ bundle: false })))
+        .configureMd((md) => md.use(yfmCut({
+        bundle: false,
+        directiveSyntax: directiveSyntax === null || directiveSyntax === void 0 ? void 0 : directiveSyntax.mdPluginValueFor('yfmCut'),
+    })))
         .addNode(CutNode.Cut, () => ({
         spec: schemaSpecs[CutNode.Cut],
         toMd: serializerTokens[CutNode.Cut],

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

@@ -1,5 +1,9 @@
-import { CutNode } from './const';
-const getAttrs = (tok) => (tok.attrs ? Object.fromEntries(tok.attrs) : {});
+import { CutAttr, CutNode } from './const';
+const getAttrs = (tok) => {
+    const nodeAttrs = tok.attrs ? Object.fromEntries(tok.attrs) : {};
+    nodeAttrs[CutAttr.Markup] = tok.markup;
+    return nodeAttrs;
+};
 export const parserTokens = {
     [CutNode.Cut]: { name: CutNode.Cut, type: 'block', getAttrs },
     [CutNode.CutTitle]: { name: CutNode.CutTitle, type: 'block' },

package/build/esm/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/esm/extensions/yfm/YfmCut/YfmCutSpecs/schema.js

@@ -1,4 +1,4 @@
-import { CutNode } from '../const';
+import { CutAttr, CutNode } from './const';
 const DEFAULT_PLACEHOLDERS = {
     Title: 'Cut title',
     Content: 'Cut content',
@@ -7,10 +7,15 @@ export const getSchemaSpecs = (opts, placeholder) => {
     var _a, _b, _c, _d;
     return ({
         [CutNode.Cut]: {
-            attrs: { class: { default: 'yfm-cut' } },
+            attrs: { class: { default: 'yfm-cut' }, [CutAttr.Markup]: { default: null } },
             content: `${CutNode.CutTitle} ${CutNode.CutContent}`,
             group: 'block yfm-cut',
-            parseDOM: [{ tag: '.yfm-cut' }],
+            parseDOM: [
+                {
+                    tag: '.yfm-cut',
+                    getAttrs: (node) => ({ [CutAttr.Markup]: node.getAttribute(CutAttr.Markup) }),
+                },
+            ],
             toDOM(node) {
                 return ['div', node.attrs, 0];
             },

package/build/esm/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/esm/extensions/yfm/YfmCut/YfmCutSpecs/serializer.js

@@ -1,26 +1,43 @@
 import { isNodeEmpty } from '../../../../utils/nodes';
 import { getPlaceholderContent } from '../../../../utils/placeholder';
-import { CutNode } from './const';
-export const serializerTokens = {
-    [CutNode.Cut]: (state, node) => {
-        state.renderContent(node);
-        state.write('{% endcut %}');
-        state.closeBlock(node);
-    },
-    [CutNode.CutTitle]: (state, node) => {
-        state.write('{% cut "');
-        if (node.nodeSize > 2)
-            state.renderInline(node);
-        else
-            state.write(getPlaceholderContent(node));
-        state.write('" %}\n');
-        state.write('\n');
-        state.closeBlock();
-    },
-    [CutNode.CutContent]: (state, node) => {
-        if (!isNodeEmpty(node))
-            state.renderInline(node);
-        else
-            state.write(getPlaceholderContent(node) + '\n\n');
-    },
-};
+import { CutAttr, CutNode } from './const';
+export function getSerializerTokens({ directiveSyntax, }) {
+    const isDirectiveCut = (node) => {
+        return directiveSyntax === null || directiveSyntax === void 0 ? void 0 : directiveSyntax.shouldSerializeToDirective('yfmCut', node.attrs[CutAttr.Markup]);
+    };
+    return {
+        [CutNode.Cut]: (state, node) => {
+            state.renderContent(node);
+            state.write(isDirectiveCut(node) ? ':::' : '{% endcut %}');
+            state.closeBlock(node);
+        },
+        [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(getPlaceholderContent(node));
+            state.write('" %}\n');
+            state.write('\n');
+            state.closeBlock();
+        },
+        [CutNode.CutContent]: (state, node, parent) => {
+            if (isDirectiveCut(parent)) {
+                state.renderContent(node);
+                return;
+            }
+            if (!isNodeEmpty(node))
+                state.renderInline(node);
+            else
+                state.write(getPlaceholderContent(node) + '\n\n');
+        },
+    };
+}

package/build/esm/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/esm/extensions/yfm/YfmFile/YfmFileSpecs/const.js

@@ -1,5 +1,22 @@
-import { KNOWN_ATTRS as FILE_KNOWN_ATTRS, REQUIRED_ATTRS as FILE_REQUIRED_ATTRS, FILE_TOKEN, FILE_TO_LINK_ATTRS_MAP, } from '@diplodoc/transform/lib/plugins/file/const';
+import { FILE_KNOWN_ATTRS, FILE_REQUIRED_ATTRS, FILE_TOKEN, FILE_TO_LINK_ATTRS_MAP, FileHtmlAttr, } from '@diplodoc/file-extension';
 export const yfmFileNodeName = FILE_TOKEN;
+export const YfmFileAttr = {
+    Markup: 'data-markup',
+    Name: FileHtmlAttr.Download,
+    Link: FileHtmlAttr.Href,
+    ReferrerPolicy: FileHtmlAttr.ReferrerPolicy,
+    Rel: FileHtmlAttr.Rel,
+    Target: FileHtmlAttr.Target,
+    Type: FileHtmlAttr.Type,
+    Lang: FileHtmlAttr.HrefLang,
+};
+export const YFM_FILE_DIRECTIVE_ATTRS = [
+    YfmFileAttr.ReferrerPolicy,
+    YfmFileAttr.Rel,
+    YfmFileAttr.Target,
+    YfmFileAttr.Type,
+    YfmFileAttr.Lang,
+];
 export const KNOWN_ATTRS = FILE_KNOWN_ATTRS.map((attrName) => {
     if (attrName in FILE_TO_LINK_ATTRS_MAP)
         return FILE_TO_LINK_ATTRS_MAP[attrName];
@@ -10,7 +27,9 @@ export const REQUIRED_ATTRS = FILE_REQUIRED_ATTRS.map((attrName) => {
         return FILE_TO_LINK_ATTRS_MAP[attrName];
     return attrName;
 });
-export const fileNodeAttrsSpec = {};
+export const fileNodeAttrsSpec = {
+    [YfmFileAttr.Markup]: { default: null },
+};
 for (const attrName of KNOWN_ATTRS) {
     const attrSpec = (fileNodeAttrsSpec[attrName] = {});
     if (!REQUIRED_ATTRS.includes(attrName)) {

package/build/esm/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/esm/extensions/yfm/YfmFile/YfmFileSpecs/index.js

@@ -1,11 +1,14 @@
-import yfmPlugin from '@diplodoc/transform/lib/plugins/file';
-import { FileClassName, LinkHtmlAttr, PREFIX } from '@diplodoc/transform/lib/plugins/file/const';
+import { FILE_MARKUP_PREFIX, FileClassName, FileHtmlAttr, transform as fileTransform, } from '@diplodoc/file-extension';
 import { nodeTypeFactory } from '../../../../utils/schema';
-import { KNOWN_ATTRS, LINK_TO_FILE_ATTRS_MAP, fileNodeAttrsSpec, yfmFileNodeName } from './const';
-export { yfmFileNodeName } from './const';
+import { KNOWN_ATTRS, LINK_TO_FILE_ATTRS_MAP, YFM_FILE_DIRECTIVE_ATTRS, YfmFileAttr, fileNodeAttrsSpec, yfmFileNodeName, } from './const';
+export { yfmFileNodeName, YfmFileAttr } from './const';
 export const fileType = nodeTypeFactory(yfmFileNodeName);
 export const YfmFileSpecs = (builder) => {
-    builder.configureMd((md) => md.use(yfmPlugin));
+    const directiveContext = builder.context.get('directiveSyntax');
+    builder.configureMd((md) => md.use(fileTransform({
+        bundle: false,
+        directiveSyntax: directiveContext === null || directiveContext === void 0 ? void 0 : directiveContext.mdPluginValueFor('yfmFile'),
+    })));
     builder.addNode(yfmFileNodeName, () => ({
         spec: {
             group: 'inline',
@@ -39,7 +42,7 @@ export const YfmFileSpecs = (builder) => {
                 const span = document.createElement('span');
                 span.classList.add(FileClassName.Icon);
                 a.appendChild(span);
-                a.append(node.attrs[LinkHtmlAttr.Download]);
+                a.append(node.attrs[FileHtmlAttr.Download]);
                 return a;
             },
         },
@@ -49,15 +52,20 @@ export const YfmFileSpecs = (builder) => {
                 name: 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[YfmFileAttr.Markup] = tok.markup;
+                    return attrs;
                 },
             },
         },
         toMd: (state, node) => {
+            if (directiveContext === null || directiveContext === void 0 ? void 0 : directiveContext.shouldSerializeToDirective('yfmFile', node.attrs[YfmFileAttr.Markup])) {
+                state.write(serializeToDirective(node));
+                return;
+            }
             const attrsStr = Object.entries(node.attrs)
                 .reduce((arr, [key, value]) => {
-                if (value) {
+                if (key !== YfmFileAttr.Markup && value) {
                     if (key in LINK_TO_FILE_ATTRS_MAP) {
                         key = LINK_TO_FILE_ATTRS_MAP[key];
                     }
@@ -66,7 +74,21 @@ export const YfmFileSpecs = (builder) => {
                 return arr;
             }, [])
                 .join(' ');
-            state.write(`${PREFIX}${attrsStr} %}`);
+            state.write(`${FILE_MARKUP_PREFIX}${attrsStr} %}`);
         },
     }));
 };
+function serializeToDirective(node) {
+    const filename = node.attrs[YfmFileAttr.Name] || '';
+    const filelink = node.attrs[YfmFileAttr.Link] || '';
+    let fileMarkup = `:file[${filename}](${filelink})`;
+    const attrs = 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;
+}

package/build/esm/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';
 import './index.css';
 export declare type YfmFileOptions = {
     fileUploadHandler?: FileUploadHandler;

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

@@ -1,7 +1,8 @@
 import { YfmFilePaste } from './YfmFilePaste';
 import { YfmFileSpecs } from './YfmFileSpecs';
 import { YfmFileWidget } from './YfmFileWidget';
-import './index.css';
+import '@diplodoc/file-extension/runtime/styles.css';
+import './index.css'; // eslint-disable-line import/order
 export const YfmFile = (builder, opts = {}) => {
     builder.use(YfmFileSpecs, opts);
     builder.use(YfmFileWidget, opts);

package/build/esm/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/esm/index.js

@@ -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/esm/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];
@@ -19,6 +20,7 @@ export declare type CreateCodemirrorParams = {
     onScroll: (event: Event) => void;
     reactRenderer: ReactRenderStorage;
     uploadHandler?: FileUploadHandler;
+    parseHtmlOnPaste?: boolean;
     parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
     needImageDimensions?: boolean;
     enableNewImageSizeCalculation?: boolean;
@@ -30,6 +32,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;