@gravity-ui/markdown-editor 14.3.1 → 14.4.0

package/build/cjs/markup/codemirror/create.js

@@ -10,6 +10,7 @@ const utils_1 = require("../../extensions/behavior/Clipboard/utils");
 const logger_1 = require("../../logger");
 const shortcuts_1 = require("../../shortcuts");
 const commands_2 = require("../commands");
+const directive_facet_1 = require("./directive-facet");
 const files_upload_facet_1 = require("./files-upload-facet");
 const gravity_1 = require("./gravity");
 const pairing_chars_1 = require("./pairing-chars");
@@ -17,7 +18,7 @@ const react_facet_1 = require("./react-facet");
 const plugin_1 = require("./search-plugin/plugin");
 const yfm_1 = require("./yfm");
 function createCodemirror(params) {
-    const { doc, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, extensions: extraExtensions, placeholder: placeholderContent, autocompletion: autocompletionConfig, parseInsertedUrlAsImage, } = params;
+    const { doc, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, extensions: extraExtensions, placeholder: placeholderContent, autocompletion: autocompletionConfig, parseInsertedUrlAsImage, directiveSyntax, } = params;
     const extensions = [gravity_1.gravityTheme, (0, view_1.placeholder)(placeholderContent)];
     if (!disabledExtensions.history) {
         extensions.push((0, commands_1.history)());
@@ -63,7 +64,7 @@ function createCodemirror(params) {
         ...commands_1.defaultKeymap,
         ...(disabledExtensions.history ? [] : commands_1.historyKeymap),
         ...keymaps,
-    ]), (0, autocomplete_1.autocompletion)(autocompletionConfig), (0, yfm_1.yfmLang)(yfmLangOptions), react_facet_1.ReactRendererFacet.of(reactRenderer), pairing_chars_1.PairingCharactersExtension, view_1.EditorView.lineWrapping, view_1.EditorView.contentAttributes.of({ spellcheck: 'true' }), view_1.EditorView.domEventHandlers({
+    ]), (0, autocomplete_1.autocompletion)(autocompletionConfig), (0, yfm_1.yfmLang)(yfmLangOptions), react_facet_1.ReactRendererFacet.of(reactRenderer), directive_facet_1.DirectiveSyntaxFacet.of(directiveSyntax), pairing_chars_1.PairingCharactersExtension, view_1.EditorView.lineWrapping, view_1.EditorView.contentAttributes.of({ spellcheck: 'true' }), view_1.EditorView.domEventHandlers({
         scroll(event) {
             onScroll(event);
         },

package/build/cjs/markup/codemirror/directive-facet.d.ts

@@ -0,0 +1,3 @@
+import { Facet } from '@codemirror/state';
+import type { DirectiveSyntaxContext } from '../../utils/directive';
+export declare const DirectiveSyntaxFacet: Facet<DirectiveSyntaxContext, Omit<DirectiveSyntaxContext, "shouldSerializeToDirective">>;

package/build/cjs/markup/codemirror/directive-facet.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectiveSyntaxFacet = void 0;
+const state_1 = require("@codemirror/state");
+exports.DirectiveSyntaxFacet = state_1.Facet.define({
+    combine: ([context]) => context,
+    static: true,
+});

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

@@ -1,5 +1,6 @@
 export type { CreateCodemirrorParams } from './create';
 export { createCodemirror } from './create';
 export { ReactRendererFacet } from './react-facet';
+export { DirectiveSyntaxFacet } from './directive-facet';
 export { getImageDimensions, IMG_MAX_HEIGHT } from './files-upload-plugin';
 export type { YfmLangOptions } from './yfm';

package/build/cjs/markup/codemirror/index.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IMG_MAX_HEIGHT = exports.getImageDimensions = exports.ReactRendererFacet = exports.createCodemirror = void 0;
+exports.IMG_MAX_HEIGHT = exports.getImageDimensions = exports.DirectiveSyntaxFacet = exports.ReactRendererFacet = exports.createCodemirror = void 0;
 var create_1 = require("./create");
 Object.defineProperty(exports, "createCodemirror", { enumerable: true, get: function () { return create_1.createCodemirror; } });
 var react_facet_1 = require("./react-facet");
 Object.defineProperty(exports, "ReactRendererFacet", { enumerable: true, get: function () { return react_facet_1.ReactRendererFacet; } });
+var directive_facet_1 = require("./directive-facet");
+Object.defineProperty(exports, "DirectiveSyntaxFacet", { enumerable: true, get: function () { return directive_facet_1.DirectiveSyntaxFacet; } });
 var files_upload_plugin_1 = require("./files-upload-plugin");
 Object.defineProperty(exports, "getImageDimensions", { enumerable: true, get: function () { return files_upload_plugin_1.getImageDimensions; } });
 Object.defineProperty(exports, "IMG_MAX_HEIGHT", { enumerable: true, get: function () { return files_upload_plugin_1.IMG_MAX_HEIGHT; } });

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

@@ -15,6 +15,11 @@ export declare const yfmCutSnippet: (editor: {
     state: import("@codemirror/state").EditorState;
     dispatch: (tr: import("@codemirror/state").Transaction) => void;
 }, completion: Completion | null, from: number, to: number) => void;
+export declare const yfmCutDirectiveSnippetTemplate = ":::cut [#{title}]\n#{}\n:::\n\n";
+export declare const yfmCutDirectiveSnippet: (editor: {
+    state: import("@codemirror/state").EditorState;
+    dispatch: (tr: import("@codemirror/state").Transaction) => void;
+}, completion: Completion | null, from: number, to: number) => void;
 export interface LanguageData {
     autocomplete: CompletionSource;
     [key: string]: any;

package/build/cjs/markup/codemirror/yfm.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.yfmLang = exports.yfmCutSnippet = exports.yfmCutSnippetTemplate = exports.yfmNoteSnippets = exports.yfmNoteSnippetTemplate = exports.yfmNoteTypes = exports.customTags = void 0;
+exports.yfmLang = exports.yfmCutDirectiveSnippet = exports.yfmCutDirectiveSnippetTemplate = exports.yfmCutSnippet = exports.yfmCutSnippetTemplate = exports.yfmNoteSnippets = exports.yfmNoteSnippetTemplate = exports.yfmNoteTypes = exports.customTags = void 0;
 const autocomplete_1 = require("@codemirror/autocomplete");
 const lang_markdown_1 = require("@codemirror/lang-markdown");
 const highlight_1 = require("@lezer/highlight");
 const lodash_1 = require("../../lodash");
+const directive_facet_1 = require("./directive-facet");
 exports.customTags = {
     underline: highlight_1.Tag.define(),
     monospace: highlight_1.Tag.define(),
@@ -58,8 +59,11 @@ exports.yfmNoteSnippets = {
 };
 exports.yfmCutSnippetTemplate = '{% cut "#{title}" %}\n\n#{}\n\n{% endcut %}\n\n';
 exports.yfmCutSnippet = (0, autocomplete_1.snippet)(exports.yfmCutSnippetTemplate);
+exports.yfmCutDirectiveSnippetTemplate = ':::cut [#{title}]\n#{}\n:::\n\n';
+exports.yfmCutDirectiveSnippet = (0, autocomplete_1.snippet)(exports.yfmCutDirectiveSnippetTemplate);
 const mdAutocomplete = {
     autocomplete: (context) => {
+        const directiveContext = context.state.facet(directive_facet_1.DirectiveSyntaxFacet);
         // TODO: add more actions and re-enable
         // let word = context.matchBefore(/\/.*/);
         // if (word) {
@@ -77,13 +81,15 @@ const mdAutocomplete = {
         //                 label: '/yfm cut',
         //                 displayLabel: 'YFM Cut',
         //                 type: 'text',
-        //                 apply: yfmCutSnippet,
+        //                 apply: directiveFacet.shouldInsertDirectiveMarkup('yfmCut')
+        //                      ? yfmCutDirectiveSnippet
+        //                      : yfmCutSnippet,
         //             },
         //         ],
         //     };
         // }
         const word = context.matchBefore(/^.*/);
-        if (word === null || word === void 0 ? void 0 : word.text.startsWith('{%')) {
+        if (directiveContext.option !== 'only' && (word === null || word === void 0 ? void 0 : word.text.startsWith('{%'))) {
             return {
                 from: word.from,
                 options: [
@@ -99,11 +105,27 @@ const mdAutocomplete = {
                         label: '{% cut',
                         displayLabel: 'YFM Cut',
                         type: 'text',
-                        apply: exports.yfmCutSnippet,
+                        apply: directiveContext.shouldInsertDirectiveMarkup('yfmCut')
+                            ? exports.yfmCutDirectiveSnippet
+                            : exports.yfmCutSnippet,
                     },
                 ],
             };
         }
+        if (directiveContext.option !== 'disabled' && (word === null || word === void 0 ? void 0 : word.text.startsWith(':'))) {
+            const options = [];
+            if (directiveContext.valueFor('yfmCut') !== 'disabled') {
+                options.push({
+                    label: ':::cut',
+                    displayLabel: 'YFM Cut',
+                    type: 'text',
+                    apply: exports.yfmCutDirectiveSnippet,
+                });
+            }
+            if (options.length) {
+                return { from: word.from, options };
+            }
+        }
         return null;
     },
 };

package/build/cjs/markup/commands/yfm.js

@@ -1,8 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.insertYfmTable = exports.insertYfmTabs = exports.wrapToYfmNote = exports.wrapToYfmCut = void 0;
+const directive_facet_1 = require("../codemirror/directive-facet");
 const helpers_1 = require("./helpers");
-exports.wrapToYfmCut = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% cut "title" %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endcut %}');
+const wrapToYfmCutCurly = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% cut "title" %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endcut %}');
+const wrapToYfmCutDirective = (0, helpers_1.wrapToBlock)(({ lineBreak }) => ':::cut [title]' + lineBreak, ({ lineBreak }) => lineBreak + ':::');
+const wrapToYfmCut = (target) => {
+    const cmd = target.state.facet(directive_facet_1.DirectiveSyntaxFacet).shouldInsertDirectiveMarkup('yfmCut')
+        ? wrapToYfmCutDirective
+        : wrapToYfmCutCurly;
+    return cmd(target);
+};
+exports.wrapToYfmCut = wrapToYfmCut;
 exports.wrapToYfmNote = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% note info %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endnote %}');
 exports.insertYfmTabs = (0, helpers_1.wrapToBlock)(({ lineBreak }) => '{% list tabs %}' + lineBreak.repeat(2) + '- Tab name' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endlist %}', { before: '  ', after: '' });
 exports.insertYfmTable = (0, helpers_1.wrapToBlock)(({ lineBreak }) => ['#|', '||'].join(lineBreak) + lineBreak, ({ lineBreak }) => lineBreak + ['|', '', '||', '||', '', '|', '', '||', '|#', ''].join(lineBreak));

package/build/cjs/utils/directive.d.ts

@@ -0,0 +1,28 @@
+export declare type DirectiveSyntaxValue = 'disabled' | 'enabled' | 'preserve' | 'overwrite' | 'only';
+declare type DirectiveSyntaxMdPluginValue = 'disabled' | 'enabled' | 'only';
+export declare type DirectiveSyntaxOption = DirectiveSyntaxValue | DirectiveSyntaxOptionObj;
+declare type DirectiveSyntaxOptionObj = {
+    [K in keyof MarkdownEditor.DirectiveSyntaxAdditionalSupportedExtensions]?: DirectiveSyntaxValue;
+};
+declare global {
+    namespace MarkdownEditor {
+        /**
+         * Add more keys for you additional supported extensions
+         */
+        interface DirectiveSyntaxAdditionalSupportedExtensions {
+        }
+    }
+}
+export declare class DirectiveSyntaxContext {
+    #private;
+    protected set option(value: DirectiveSyntaxOption | undefined);
+    get option(): DirectiveSyntaxOption;
+    constructor(option: DirectiveSyntaxOption | undefined);
+    valueFor(key: keyof DirectiveSyntaxOptionObj): DirectiveSyntaxValue;
+    mdPluginValueFor(key: keyof DirectiveSyntaxOptionObj): DirectiveSyntaxMdPluginValue;
+    /** helper for wisywig serializer */
+    shouldSerializeToDirective(key: keyof DirectiveSyntaxOptionObj, tokenMarkup: unknown): boolean;
+    /** helper for markup-mode commands and actions */
+    shouldInsertDirectiveMarkup(key: keyof DirectiveSyntaxOptionObj): boolean;
+}
+export {};

package/build/cjs/utils/directive.js

@@ -0,0 +1,55 @@
+"use strict";
+var _DirectiveSyntaxContext_option;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectiveSyntaxContext = void 0;
+const tslib_1 = require("tslib");
+const DIRECTIVE_SYNTAX_DEFAULT = 'disabled';
+class DirectiveSyntaxContext {
+    constructor(option) {
+        _DirectiveSyntaxContext_option.set(this, void 0);
+        this.option = option;
+        tslib_1.__classPrivateFieldSet(this, _DirectiveSyntaxContext_option, this.option, "f");
+    }
+    set option(value) {
+        tslib_1.__classPrivateFieldSet(this, _DirectiveSyntaxContext_option, value !== null && value !== void 0 ? value : DIRECTIVE_SYNTAX_DEFAULT, "f");
+    }
+    get option() {
+        return tslib_1.__classPrivateFieldGet(this, _DirectiveSyntaxContext_option, "f");
+    }
+    valueFor(key) {
+        let value;
+        if (typeof this.option === 'object')
+            value = this.option[key];
+        if (typeof this.option === 'string')
+            value = this.option;
+        return value !== null && value !== void 0 ? value : DIRECTIVE_SYNTAX_DEFAULT;
+    }
+    mdPluginValueFor(key) {
+        const value = this.valueFor(key);
+        return value === 'preserve' || value === 'overwrite' ? 'enabled' : value;
+    }
+    /** helper for wisywig serializer */
+    shouldSerializeToDirective(key, tokenMarkup) {
+        const option = this.valueFor(key);
+        if (option === 'overwrite' || option === 'only')
+            return true;
+        if (typeof tokenMarkup === 'string') {
+            if (tokenMarkup.startsWith(':'))
+                return true;
+            if (tokenMarkup.startsWith('{'))
+                return false;
+        }
+        if (option === 'preserve')
+            return true;
+        return false;
+    }
+    /** helper for markup-mode commands and actions */
+    shouldInsertDirectiveMarkup(key) {
+        const value = this.valueFor(key);
+        if (value === 'disabled' || value === 'enabled')
+            return false;
+        return true;
+    }
+}
+exports.DirectiveSyntaxContext = DirectiveSyntaxContext;
+_DirectiveSyntaxContext_option = new WeakMap();

package/build/cjs/utils/index.d.ts

@@ -19,3 +19,4 @@ export * from './serialize-for-clipboard';
 export * from './sync-scroll';
 export * from './upload';
 export * from './get-proportional-size';
+export type { DirectiveSyntaxValue, DirectiveSyntaxOption } from './directive';

package/build/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '14.3.1' !== 'undefined' ? '14.3.1' : 'unknown';
+exports.VERSION = typeof '14.4.0' !== 'undefined' ? '14.4.0' : 'unknown';

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

@@ -1,4 +1,4 @@
-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;
 import { __classPrivateFieldGet, __classPrivateFieldSet, __rest } from "tslib";
 import { EditorView as CMEditorView } from '@codemirror/view';
 import { TextSelection } from 'prosemirror-state';
@@ -31,6 +31,7 @@ export class EditorImpl extends 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();
@@ -49,6 +50,7 @@ export class EditorImpl extends SafeEventEmitter {
         __classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, handlers.uploadFile, "f");
         __classPrivateFieldSet(this, _EditorImpl_parseInsertedUrlAsImage, markupConfig.parseInsertedUrlAsImage, "f");
         __classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(experimental.needToSetDimensionsForUploadedImages), "f");
+        __classPrivateFieldSet(this, _EditorImpl_directiveSyntax, opts.directiveSyntax, "f");
         __classPrivateFieldSet(this, _EditorImpl_enableNewImageSizeCalculation, Boolean(experimental.enableNewImageSizeCalculation), "f");
         __classPrivateFieldSet(this, _EditorImpl_prepareRawMarkup, experimental.prepareRawMarkup, "f");
         __classPrivateFieldSet(this, _EditorImpl_escapeConfig, wysiwygConfig.escapeConfig, "f");
@@ -117,6 +119,9 @@ export class EditorImpl extends SafeEventEmitter {
     get mdOptions() {
         return __classPrivateFieldGet(this, _EditorImpl_mdOptions, "f");
     }
+    get directiveSyntax() {
+        return __classPrivateFieldGet(this, _EditorImpl_directiveSyntax, "f");
+    }
     get renderPreview() {
         return __classPrivateFieldGet(this, _EditorImpl_renderPreview, "f");
     }
@@ -169,6 +174,7 @@ export class EditorImpl extends SafeEventEmitter {
                 keymaps: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").keymaps,
                 yfmLangOptions: { languageData: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").languageData },
                 autocompletion: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").autocompletion,
+                directiveSyntax: this.directiveSyntax,
                 receiver: this,
             })), "f");
         }
@@ -308,7 +314,7 @@ export class EditorImpl extends SafeEventEmitter {
         return (serializedEditorMarkup === null || serializedEditorMarkup === void 0 ? void 0 : serializedEditorMarkup.trim()) !== wysiwygValue.trim();
     }
 }
-_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/esm/bundle/MarkdownEditorView.js

@@ -120,6 +120,7 @@ export const MarkdownEditorView = React.forwardRef((props, ref) => {
                         getValue: editor.getValue,
                         mode: 'preview',
                         md: editor.mdOptions,
+                        directiveSyntax: editor.directiveSyntax,
                     })),
                     settings)) : (React.createElement(React.Fragment, null,
                     editorMode === 'wysiwyg' && (React.createElement(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/esm/bundle/SplitModeView.js

@@ -68,6 +68,7 @@ const SplitModeView = React.forwardRef(({ editor }, ref) => {
             getValue: editor.getValue,
             mode: 'split',
             md: editor.mdOptions,
+            directiveSyntax: editor.directiveSyntax,
         })));
 });
 SplitModeView.displayName = 'SplitModeView';

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 = {
     /**

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/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>;