@gravity-ui/markdown-editor 14.3.0 → 14.4.0

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.js

@@ -1,4 +1,4 @@
-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, } from '@diplodoc/file-extension';
 export const yfmFileNodeName = FILE_TOKEN;
 export const KNOWN_ATTRS = FILE_KNOWN_ATTRS.map((attrName) => {
     if (attrName in FILE_TO_LINK_ATTRS_MAP)

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

@@ -1,11 +1,10 @@
-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';
 export const fileType = nodeTypeFactory(yfmFileNodeName);
 export const YfmFileSpecs = (builder) => {
-    builder.configureMd((md) => md.use(yfmPlugin));
+    builder.configureMd((md) => md.use(fileTransform({ bundle: false })));
     builder.addNode(yfmFileNodeName, () => ({
         spec: {
             group: 'inline',
@@ -39,7 +38,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;
             },
         },
@@ -66,7 +65,7 @@ export const YfmFileSpecs = (builder) => {
                 return arr;
             }, [])
                 .join(' ');
-            state.write(`${PREFIX}${attrsStr} %}`);
+            state.write(`${FILE_MARKUP_PREFIX}${attrsStr} %}`);
         },
     }));
 };

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];
@@ -30,6 +31,7 @@ export declare type CreateCodemirrorParams = {
     receiver?: Receiver<EventMap>;
     yfmLangOptions?: YfmLangOptions;
     autocompletion?: Autocompletion;
+    directiveSyntax: DirectiveSyntaxContext;
 };
 export declare function createCodemirror(params: CreateCodemirrorParams): EditorView;
 export declare function withLogger(action: string, command: StateCommand): StateCommand;

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

@@ -7,6 +7,7 @@ import { DataTransferType } from '../../extensions/behavior/Clipboard/utils';
 import { logger } from '../../logger';
 import { Action as A, formatter as f } from '../../shortcuts';
 import { insertImages, insertLink, toH1, toH2, toH3, toH4, toH5, toH6, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, wrapToCodeBlock, wrapToInlineCode, wrapToYfmCut, wrapToYfmNote, } from '../commands';
+import { DirectiveSyntaxFacet } from './directive-facet';
 import { FileUploadHandlerFacet } from './files-upload-facet';
 import { gravityHighlightStyle, gravityTheme } from './gravity';
 import { PairingCharactersExtension } from './pairing-chars';
@@ -14,7 +15,7 @@ import { ReactRendererFacet } from './react-facet';
 import { SearchPanelPlugin } from './search-plugin/plugin';
 import { yfmLang } from './yfm';
 export 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 = [gravityTheme, placeholder(placeholderContent)];
     if (!disabledExtensions.history) {
         extensions.push(history());
@@ -60,7 +61,7 @@ export function createCodemirror(params) {
         ...defaultKeymap,
         ...(disabledExtensions.history ? [] : historyKeymap),
         ...keymaps,
-    ]), autocompletion(autocompletionConfig), yfmLang(yfmLangOptions), ReactRendererFacet.of(reactRenderer), PairingCharactersExtension, EditorView.lineWrapping, EditorView.contentAttributes.of({ spellcheck: 'true' }), EditorView.domEventHandlers({
+    ]), autocompletion(autocompletionConfig), yfmLang(yfmLangOptions), ReactRendererFacet.of(reactRenderer), DirectiveSyntaxFacet.of(directiveSyntax), PairingCharactersExtension, EditorView.lineWrapping, EditorView.contentAttributes.of({ spellcheck: 'true' }), EditorView.domEventHandlers({
         scroll(event) {
             onScroll(event);
         },

package/build/esm/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/esm/markup/codemirror/directive-facet.js

@@ -0,0 +1,5 @@
+import { Facet } from '@codemirror/state';
+export const DirectiveSyntaxFacet = Facet.define({
+    combine: ([context]) => context,
+    static: true,
+});

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

@@ -1,3 +1,4 @@
 export { createCodemirror } from './create';
 export { ReactRendererFacet } from './react-facet';
+export { DirectiveSyntaxFacet } from './directive-facet';
 export { getImageDimensions, IMG_MAX_HEIGHT } from './files-upload-plugin';

package/build/esm/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/esm/markup/codemirror/yfm.js

@@ -2,6 +2,7 @@ import { snippet } from '@codemirror/autocomplete';
 import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
 import { Tag, tags } from '@lezer/highlight';
 import { capitalize } from '../../lodash';
+import { DirectiveSyntaxFacet } from './directive-facet';
 export const customTags = {
     underline: Tag.define(),
     monospace: Tag.define(),
@@ -54,8 +55,11 @@ export const yfmNoteSnippets = {
 };
 export const yfmCutSnippetTemplate = '{% cut "#{title}" %}\n\n#{}\n\n{% endcut %}\n\n';
 export const yfmCutSnippet = snippet(yfmCutSnippetTemplate);
+export const yfmCutDirectiveSnippetTemplate = ':::cut [#{title}]\n#{}\n:::\n\n';
+export const yfmCutDirectiveSnippet = snippet(yfmCutDirectiveSnippetTemplate);
 const mdAutocomplete = {
     autocomplete: (context) => {
+        const directiveContext = context.state.facet(DirectiveSyntaxFacet);
         // TODO: add more actions and re-enable
         // let word = context.matchBefore(/\/.*/);
         // if (word) {
@@ -73,13 +77,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: [
@@ -95,11 +101,27 @@ const mdAutocomplete = {
                         label: '{% cut',
                         displayLabel: 'YFM Cut',
                         type: 'text',
-                        apply: yfmCutSnippet,
+                        apply: directiveContext.shouldInsertDirectiveMarkup('yfmCut')
+                            ? yfmCutDirectiveSnippet
+                            : 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: yfmCutDirectiveSnippet,
+                });
+            }
+            if (options.length) {
+                return { from: word.from, options };
+            }
+        }
         return null;
     },
 };

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

@@ -1,5 +1,13 @@
+import { DirectiveSyntaxFacet } from '../codemirror/directive-facet';
 import { wrapToBlock } from './helpers';
-export const wrapToYfmCut = wrapToBlock(({ lineBreak }) => '{% cut "title" %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endcut %}');
+const wrapToYfmCutCurly = wrapToBlock(({ lineBreak }) => '{% cut "title" %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endcut %}');
+const wrapToYfmCutDirective = wrapToBlock(({ lineBreak }) => ':::cut [title]' + lineBreak, ({ lineBreak }) => lineBreak + ':::');
+export const wrapToYfmCut = (target) => {
+    const cmd = target.state.facet(DirectiveSyntaxFacet).shouldInsertDirectiveMarkup('yfmCut')
+        ? wrapToYfmCutDirective
+        : wrapToYfmCutCurly;
+    return cmd(target);
+};
 export const wrapToYfmNote = wrapToBlock(({ lineBreak }) => '{% note info %}' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endnote %}');
 export const insertYfmTabs = wrapToBlock(({ lineBreak }) => '{% list tabs %}' + lineBreak.repeat(2) + '- Tab name' + lineBreak.repeat(2), ({ lineBreak }) => lineBreak.repeat(2) + '{% endlist %}', { before: '  ', after: '' });
 export const insertYfmTable = wrapToBlock(({ lineBreak }) => ['#|', '||'].join(lineBreak) + lineBreak, ({ lineBreak }) => lineBreak + ['|', '', '||', '||', '', '|', '', '||', '|#', ''].join(lineBreak));

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

@@ -0,0 +1,51 @@
+var _DirectiveSyntaxContext_option;
+import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
+const DIRECTIVE_SYNTAX_DEFAULT = 'disabled';
+export class DirectiveSyntaxContext {
+    constructor(option) {
+        _DirectiveSyntaxContext_option.set(this, void 0);
+        this.option = option;
+        __classPrivateFieldSet(this, _DirectiveSyntaxContext_option, this.option, "f");
+    }
+    set option(value) {
+        __classPrivateFieldSet(this, _DirectiveSyntaxContext_option, value !== null && value !== void 0 ? value : DIRECTIVE_SYNTAX_DEFAULT, "f");
+    }
+    get option() {
+        return __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;
+    }
+}
+_DirectiveSyntaxContext_option = new WeakMap();

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

@@ -1,2 +1,2 @@
 /** During build process, the current version will be injected here */
-export const VERSION = typeof '14.3.0' !== 'undefined' ? '14.3.0' : 'unknown';
+export const VERSION = typeof '14.4.0' !== 'undefined' ? '14.4.0' : 'unknown';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "14.3.0",
+  "version": "14.4.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -166,6 +166,7 @@
     "@codemirror/search": "~6.5.6",
     "@codemirror/state": "~6.4.1",
     "@codemirror/view": "~6.34.1",
+    "@diplodoc/file-extension": "^0.1.0",
     "@gravity-ui/i18n": "^1.1.0",
     "@gravity-ui/icons": "^2.10.0",
     "@lezer/highlight": "~1.2.1",
@@ -200,7 +201,7 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@diplodoc/cut-extension": "^0.3.1",
+    "@diplodoc/cut-extension": "^0.4.0",
     "@diplodoc/folding-headings-extension": "0.1.0",
     "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "1.0.3",
@@ -213,8 +214,10 @@
     "@gravity-ui/stylelint-config": "4.0.1",
     "@gravity-ui/tsconfig": "1.0.0",
     "@gravity-ui/uikit": "6.11.0",
+    "@storybook/addon-docs": "8.4.1",
     "@storybook/addon-essentials": "^8.4.1",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+    "@storybook/blocks": "8.4.1",
     "@storybook/cli": "^8.4.1",
     "@storybook/preset-scss": "1.0.3",
     "@storybook/react": "8.4.1",
@@ -256,6 +259,7 @@
     "sass": "^1.64.1",
     "sass-loader": "^13.3.2",
     "stylelint": "15.11.0",
+    "ts-dedent": "2.2.0",
     "ts-jest": "^27.0.7",
     "typescript": "^4.5.2"
   },
@@ -280,7 +284,7 @@
     }
   },
   "peerDependencies": {
-    "@diplodoc/cut-extension": "^0.3.1",
+    "@diplodoc/cut-extension": "^0.3.1 || ^0.4.0",
     "@diplodoc/folding-headings-extension": "^0.1.0",
     "@diplodoc/html-extension": "2.3.2",
     "@diplodoc/latex-extension": "^1.0.3",