@gravity-ui/markdown-editor 13.6.1 → 13.8.0

package/README.md

@@ -46,9 +46,16 @@ function Editor({onSubmit}) {
     };
   }, [onSubmit]);
 
-  return <MarkdownEditorView autofocus toaster={toaster} editor={editor} />;
+  return <MarkdownEditorView stickyToolbar autofocus toaster={toaster} editor={editor} />;
 }
 ```
+Read more:
+- [How to connect the editor in the Create React App](docs/how-to-add-editor-with-create-react-app.md)
+- [How to add preview for markup mode](docs/how-to-add-preview.md)
+- [How to add HTML extension](docs/how-to-connect-html-extension.md)
+- [How to add Latex extension](docs/how-to-connect-latex-extension.md)
+- [How to add Mermaid extension](docs/how-to-connect-mermaid-extension.md)
+- [How to write extension](docs/how-to-create-extension.md)
 
 ### i18n
 

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

@@ -3,6 +3,8 @@ import type { Extension as CodemirrorExtension } from '@codemirror/state';
 import { CommonEditor, MarkupString } from '../common';
 import { WysiwygEditorOptions } from '../core';
 import { ReactRenderStorage } from '../extensions';
+import { type CreateCodemirrorParams } from '../markup/codemirror';
+import type { YfmLangOptions } from '../markup/codemirror/yfm';
 import { Receiver } from '../utils/event-emitter';
 import type { FileUploadHandler } from '../utils/upload';
 export declare type EditorMode = 'wysiwyg' | 'markup';
@@ -42,6 +44,16 @@ export interface Editor extends Receiver<EventMap>, CommonEditor {
         line: number;
     }): void;
 }
+export declare type MarkupConfig = {
+    /** Additional extensions for codemirror instance. */
+    extensions?: CreateCodemirrorParams['extensions'];
+    /**
+     * Additional language data for markdown language in codemirror.
+     * Can be used to configure additional autocompletions and others.
+     * See more https://codemirror.net/docs/ref/#state.EditorState.languageDataAt
+     */
+    languageData?: YfmLangOptions['languageData'];
+};
 export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'linkify' | 'linkifyTlds' | 'extensions'> & {
     initialMarkup?: MarkupString;
     /** @default 'wysiwyg' */
@@ -68,5 +80,7 @@ export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'li
     splitMode?: SplitMode;
     renderPreview?: RenderPreview;
     preset: EditorPreset;
+    /** @deprecated Put extra extensions via MarkdownEditorMarkupConfig */
     extraMarkupExtensions?: CodemirrorExtension[];
+    markupConfig?: MarkupConfig;
 };

package/build/cjs/bundle/Editor.js

@@ -1,5 +1,5 @@
 "use strict";
-var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_extraMarkupExtensions, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup;
+var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EditorImpl = void 0;
 const tslib_1 = require("tslib");
@@ -13,7 +13,8 @@ const event_emitter_1 = require("../utils/event-emitter");
 /** @internal */
 class EditorImpl extends event_emitter_1.SafeEventEmitter {
     constructor(opts) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
+        var _g;
         super({ onError: logger_1.logger.error.bind(logger_1.logger) });
         _EditorImpl_markup.set(this, void 0);
         _EditorImpl_editorMode.set(this, void 0);
@@ -23,7 +24,7 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
         _EditorImpl_renderPreview.set(this, void 0);
         _EditorImpl_wysiwygEditor.set(this, void 0);
         _EditorImpl_markupEditor.set(this, void 0);
-        _EditorImpl_extraMarkupExtensions.set(this, void 0);
+        _EditorImpl_markupConfig.set(this, void 0);
         _EditorImpl_preset.set(this, void 0);
         _EditorImpl_allowHTML.set(this, void 0);
         _EditorImpl_linkify.set(this, void 0);
@@ -45,7 +46,8 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_linkifyTlds, opts.linkifyTlds, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_allowHTML, opts.allowHTML, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_extensions, opts.extensions, "f");
-        tslib_1.__classPrivateFieldSet(this, _EditorImpl_extraMarkupExtensions, opts.extraMarkupExtensions, "f");
+        tslib_1.__classPrivateFieldSet(this, _EditorImpl_markupConfig, Object.assign({}, opts.markupConfig), "f");
+        (_f = (_g = tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f")).extensions) !== null && _f !== void 0 ? _f : (_g.extensions = opts.extraMarkupExtensions);
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_renderStorage, opts.renderStorage, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, opts.fileUploadHandler, "f");
         tslib_1.__classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(opts.needToSetDimensionsForUploadedImages), "f");
@@ -154,7 +156,8 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
                 reactRenderer: tslib_1.__classPrivateFieldGet(this, _EditorImpl_renderStorage, "f"),
                 uploadHandler: this.fileUploadHandler,
                 needImgDimms: this.needToSetDimensionsForUploadedImages,
-                extraMarkupExtensions: tslib_1.__classPrivateFieldGet(this, _EditorImpl_extraMarkupExtensions, "f"),
+                extensions: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").extensions,
+                yfmLangOptions: { languageData: tslib_1.__classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").languageData },
                 receiver: this,
             })), "f");
         }
@@ -275,4 +278,4 @@ class EditorImpl extends event_emitter_1.SafeEventEmitter {
     }
 }
 exports.EditorImpl = EditorImpl;
-_EditorImpl_markup = new WeakMap(), _EditorImpl_editorMode = new WeakMap(), _EditorImpl_toolbarVisible = new WeakMap(), _EditorImpl_splitModeEnabled = new WeakMap(), _EditorImpl_splitMode = new WeakMap(), _EditorImpl_renderPreview = new WeakMap(), _EditorImpl_wysiwygEditor = new WeakMap(), _EditorImpl_markupEditor = new WeakMap(), _EditorImpl_extraMarkupExtensions = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = 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_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap();

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

@@ -1,4 +1,4 @@
-export type { Editor as MarkdownEditorInstance, EditorMode as MarkdownEditorMode, EditorPreset as MarkdownEditorPreset, RenderPreview, SplitMode, } from './Editor';
+export type { Editor as MarkdownEditorInstance, EditorMode as MarkdownEditorMode, EditorPreset as MarkdownEditorPreset, MarkupConfig as MarkdownEditorMarkupConfig, RenderPreview, SplitMode, } from './Editor';
 export { MarkdownEditorProvider, useMarkdownEditorContext } from './context';
 export { useMarkdownEditor } from './useMarkdownEditor';
 export type { UseMarkdownEditorProps } from './useMarkdownEditor';

package/build/cjs/extensions/yfm/FoldingHeading/plugins/Folding.js

@@ -106,7 +106,8 @@ function buildDecosSet(doc) {
         while ((child = parent.maybeChild(++idx))) {
             const childPos = $pos.posAtIndex(idx, depth);
             if ((0, utils_1.isHeading)(child)) {
-                if ((0, utils_1.isFoldingHeading)(child)) {
+                const hasFolding = (0, utils_1.isFoldingHeading)(child);
+                if (hasFolding) {
                     nextFoldingHeadingFound = true;
                 }
                 const level = (0, utils_1.parseLevel)(child);
@@ -115,12 +116,14 @@ function buildDecosSet(doc) {
                 if (!hidden) {
                     lastNonHiddenChild = { node: child, pos: childPos, level: hLevel };
                 }
-                if ((0, utils_1.isUnfoldedHeading)(child)) {
-                    hLevel = level;
-                    hidden = false;
-                }
-                else {
-                    hidden = true;
+                if (hasFolding) {
+                    if ((0, utils_1.isUnfoldedHeading)(child)) {
+                        hLevel = level;
+                        hidden = false;
+                    }
+                    else {
+                        hidden = true;
+                    }
                 }
             }
             if (!hidden) {

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

@@ -4,6 +4,8 @@ import { EventMap } from '../../bundle/Editor';
 import { ReactRenderStorage } from '../../extensions';
 import { Receiver } from '../../utils';
 import { FileUploadHandler } from './files-upload-facet';
+import { type YfmLangOptions } from './yfm';
+export type { YfmLangOptions };
 export declare type CreateCodemirrorParams = {
     doc: EditorViewConfig['doc'];
     placeholderText: string;
@@ -15,8 +17,9 @@ export declare type CreateCodemirrorParams = {
     reactRenderer: ReactRenderStorage;
     uploadHandler?: FileUploadHandler;
     needImgDimms?: boolean;
-    extraMarkupExtensions?: Extension[];
+    extensions?: Extension[];
     receiver?: Receiver<EventMap>;
+    yfmLangOptions?: YfmLangOptions;
 };
 export declare function createCodemirror(params: CreateCodemirrorParams): EditorView;
 export declare function withLogger(action: string, command: StateCommand): StateCommand;

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

@@ -16,7 +16,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, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extraMarkupExtensions, receiver, } = params;
+    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extensions: extraExtensions, receiver, yfmLangOptions, } = params;
     const extensions = [
         gravity_1.gravityTheme,
         (0, view_1.placeholder)(placeholderText),
@@ -60,7 +60,7 @@ function createCodemirror(params) {
             ...commands_1.historyKeymap,
         ]),
         (0, autocomplete_1.autocompletion)(),
-        (0, yfm_1.yfmLang)(),
+        (0, yfm_1.yfmLang)(yfmLangOptions),
         react_facet_1.ReactRendererFacet.of(reactRenderer),
         pairing_chars_1.PairingCharactersExtension,
         view_1.EditorView.lineWrapping,
@@ -81,8 +81,8 @@ function createCodemirror(params) {
             imgWithDimms: params.needImgDimms,
         }));
     }
-    if (extraMarkupExtensions) {
-        extensions.push(...extraMarkupExtensions);
+    if (extraExtensions) {
+        extensions.push(...extraExtensions);
     }
     return new view_1.EditorView({
         doc,

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

@@ -1,4 +1,4 @@
-import { Completion, snippet } from '@codemirror/autocomplete';
+import { Completion, CompletionSource, snippet } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
 import { Tag } from '@lezer/highlight';
 export declare const customTags: {
@@ -15,4 +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 function yfmLang(): Extension;
+export interface LanguageData {
+    autocomplete: CompletionSource;
+    [key: string]: any;
+}
+export interface YfmLangOptions {
+    languageData?: LanguageData[];
+}
+export declare function yfmLang({ languageData }?: YfmLangOptions): Extension;

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

@@ -58,7 +58,56 @@ exports.yfmNoteSnippets = {
 };
 exports.yfmCutSnippetTemplate = '{% cut "#{title}" %}\n\n#{}\n\n{% endcut %}\n\n';
 exports.yfmCutSnippet = (0, autocomplete_1.snippet)(exports.yfmCutSnippetTemplate);
-function yfmLang() {
+const mdAutocomplete = {
+    autocomplete: (context) => {
+        // TODO: add more actions and re-enable
+        // let word = context.matchBefore(/\/.*/);
+        // if (word) {
+        //     return {
+        //         from: word.from,
+        //         options: [
+        //             ...yfmNoteTypes.map<Completion>((type, index) => ({
+        //                 label: `/yfm note ${type}`,
+        //                 displayLabel: `YFM Note ${capitalize(type)}`,
+        //                 type: 'text',
+        //                 apply: yfmNoteSnippets[type],
+        //                 boost: -index,
+        //             })),
+        //             {
+        //                 label: '/yfm cut',
+        //                 displayLabel: 'YFM Cut',
+        //                 type: 'text',
+        //                 apply: yfmCutSnippet,
+        //             },
+        //         ],
+        //     };
+        // }
+        const word = context.matchBefore(/^.*/);
+        if (word === null || word === void 0 ? void 0 : word.text.startsWith('{%')) {
+            return {
+                from: word.from,
+                options: [
+                    ...exports.yfmNoteTypes.map((type, index) => ({
+                        label: `{% note ${type}`,
+                        displayLabel: (0, lodash_1.capitalize)(type),
+                        type: 'text',
+                        section: 'YFM Note',
+                        apply: exports.yfmNoteSnippets[type],
+                        boost: -index,
+                    })),
+                    {
+                        label: '{% cut',
+                        displayLabel: 'YFM Cut',
+                        type: 'text',
+                        apply: exports.yfmCutSnippet,
+                    },
+                ],
+            };
+        }
+        return null;
+    },
+};
+function yfmLang({ languageData = [] } = {}) {
     const mdSupport = (0, lang_markdown_1.markdown)({
         // defaultCodeLanguage: markdownLanguage,
         base: lang_markdown_1.markdownLanguage,
@@ -66,55 +115,10 @@ function yfmLang() {
         completeHTMLTags: false,
         extensions: [UnderlineExtension, MonospaceExtension, MarkedExtension],
     });
-    const mdAutocomplete = {
-        autocomplete: (context) => {
-            // TODO: add more actions and re-enable
-            // let word = context.matchBefore(/\/.*/);
-            // if (word) {
-            //     return {
-            //         from: word.from,
-            //         options: [
-            //             ...yfmNoteTypes.map<Completion>((type, index) => ({
-            //                 label: `/yfm note ${type}`,
-            //                 displayLabel: `YFM Note ${capitalize(type)}`,
-            //                 type: 'text',
-            //                 apply: yfmNoteSnippets[type],
-            //                 boost: -index,
-            //             })),
-            //             {
-            //                 label: '/yfm cut',
-            //                 displayLabel: 'YFM Cut',
-            //                 type: 'text',
-            //                 apply: yfmCutSnippet,
-            //             },
-            //         ],
-            //     };
-            // }
-            const word = context.matchBefore(/^.*/);
-            if (word === null || word === void 0 ? void 0 : word.text.startsWith('{%')) {
-                return {
-                    from: word.from,
-                    options: [
-                        ...exports.yfmNoteTypes.map((type, index) => ({
-                            label: `{% note ${type}`,
-                            displayLabel: (0, lodash_1.capitalize)(type),
-                            type: 'text',
-                            section: 'YFM Note',
-                            apply: exports.yfmNoteSnippets[type],
-                            boost: -index,
-                        })),
-                        {
-                            label: '{% cut',
-                            displayLabel: 'YFM Cut',
-                            type: 'text',
-                            apply: exports.yfmCutSnippet,
-                        },
-                    ],
-                };
-            }
-            return null;
-        },
-    };
-    return [mdSupport, mdSupport.language.data.of(mdAutocomplete)];
+    return [
+        mdSupport,
+        mdSupport.language.data.of(mdAutocomplete),
+        languageData.map((item) => mdSupport.language.data.of(item)),
+    ];
 }
 exports.yfmLang = yfmLang;

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 '13.6.1' !== 'undefined' ? '13.6.1' : 'unknown';
+exports.VERSION = typeof '13.8.0' !== 'undefined' ? '13.8.0' : 'unknown';

package/build/cjs/view/hooks/useYfmShowElemWithId/useYfmShowElemWithId.d.ts

@@ -1,2 +1,2 @@
-import { RefObject } from 'react';
+import { type RefObject } from 'react';
 export declare function useYfmShowElemWithId(ref: RefObject<HTMLElement>, id: string): void;

package/build/cjs/view/hooks/useYfmShowElemWithId/useYfmShowElemWithId.js

@@ -13,6 +13,10 @@ const YfmTabsCN = {
     Tab: 'yfm-tab',
     TabPanel: 'yfm-tab-panel',
 };
+const FoldingHeadingsCN = {
+    Open: 'open',
+    Section: 'heading-section',
+};
 function useYfmShowElemWithId(ref, id) {
     (0, react_1.useEffect)(() => {
         const { current: containerDom } = ref;
@@ -23,7 +27,7 @@ function useYfmShowElemWithId(ref, id) {
             return;
         while (elem && elem !== containerDom) {
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-            openYfmCut(elem) || switchYfmTabs(elem);
+            openYfmCut(elem) || openFoldingHeadings(elem, id) || switchYfmTabs(elem);
             elem = elem.parentElement;
         }
     }, [id]);
@@ -66,3 +70,13 @@ function switchYfmTabs(tabPanelElem) {
     }
     return true;
 }
+function openFoldingHeadings(elem, id) {
+    var _a;
+    if (elem.classList.contains(FoldingHeadingsCN.Section) &&
+        !elem.classList.contains(FoldingHeadingsCN.Open) &&
+        id !== ((_a = elem.firstElementChild) === null || _a === void 0 ? void 0 : _a.id)) {
+        elem.classList.add(FoldingHeadingsCN.Open);
+        return true;
+    }
+    return false;
+}

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

@@ -3,6 +3,8 @@ import type { Extension as CodemirrorExtension } from '@codemirror/state';
 import { CommonEditor, MarkupString } from '../common';
 import { WysiwygEditorOptions } from '../core';
 import { ReactRenderStorage } from '../extensions';
+import { type CreateCodemirrorParams } from '../markup/codemirror';
+import type { YfmLangOptions } from '../markup/codemirror/yfm';
 import { Receiver } from '../utils/event-emitter';
 import type { FileUploadHandler } from '../utils/upload';
 export declare type EditorMode = 'wysiwyg' | 'markup';
@@ -42,6 +44,16 @@ export interface Editor extends Receiver<EventMap>, CommonEditor {
         line: number;
     }): void;
 }
+export declare type MarkupConfig = {
+    /** Additional extensions for codemirror instance. */
+    extensions?: CreateCodemirrorParams['extensions'];
+    /**
+     * Additional language data for markdown language in codemirror.
+     * Can be used to configure additional autocompletions and others.
+     * See more https://codemirror.net/docs/ref/#state.EditorState.languageDataAt
+     */
+    languageData?: YfmLangOptions['languageData'];
+};
 export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'linkify' | 'linkifyTlds' | 'extensions'> & {
     initialMarkup?: MarkupString;
     /** @default 'wysiwyg' */
@@ -68,5 +80,7 @@ export declare type EditorOptions = Pick<WysiwygEditorOptions, 'allowHTML' | 'li
     splitMode?: SplitMode;
     renderPreview?: RenderPreview;
     preset: EditorPreset;
+    /** @deprecated Put extra extensions via MarkdownEditorMarkupConfig */
     extraMarkupExtensions?: CodemirrorExtension[];
+    markupConfig?: MarkupConfig;
 };

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_extraMarkupExtensions, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup;
+var _EditorImpl_markup, _EditorImpl_editorMode, _EditorImpl_toolbarVisible, _EditorImpl_splitModeEnabled, _EditorImpl_splitMode, _EditorImpl_renderPreview, _EditorImpl_wysiwygEditor, _EditorImpl_markupEditor, _EditorImpl_markupConfig, _EditorImpl_preset, _EditorImpl_allowHTML, _EditorImpl_linkify, _EditorImpl_linkifyTlds, _EditorImpl_extensions, _EditorImpl_renderStorage, _EditorImpl_fileUploadHandler, _EditorImpl_needToSetDimensionsForUploadedImages, _EditorImpl_prepareRawMarkup;
 import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
 import { TextSelection } from 'prosemirror-state';
 import { WysiwygEditor } from '../core';
@@ -10,7 +10,8 @@ import { SafeEventEmitter } from '../utils/event-emitter';
 /** @internal */
 export class EditorImpl extends SafeEventEmitter {
     constructor(opts) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
+        var _g;
         super({ onError: logger.error.bind(logger) });
         _EditorImpl_markup.set(this, void 0);
         _EditorImpl_editorMode.set(this, void 0);
@@ -20,7 +21,7 @@ export class EditorImpl extends SafeEventEmitter {
         _EditorImpl_renderPreview.set(this, void 0);
         _EditorImpl_wysiwygEditor.set(this, void 0);
         _EditorImpl_markupEditor.set(this, void 0);
-        _EditorImpl_extraMarkupExtensions.set(this, void 0);
+        _EditorImpl_markupConfig.set(this, void 0);
         _EditorImpl_preset.set(this, void 0);
         _EditorImpl_allowHTML.set(this, void 0);
         _EditorImpl_linkify.set(this, void 0);
@@ -42,7 +43,8 @@ export class EditorImpl extends SafeEventEmitter {
         __classPrivateFieldSet(this, _EditorImpl_linkifyTlds, opts.linkifyTlds, "f");
         __classPrivateFieldSet(this, _EditorImpl_allowHTML, opts.allowHTML, "f");
         __classPrivateFieldSet(this, _EditorImpl_extensions, opts.extensions, "f");
-        __classPrivateFieldSet(this, _EditorImpl_extraMarkupExtensions, opts.extraMarkupExtensions, "f");
+        __classPrivateFieldSet(this, _EditorImpl_markupConfig, Object.assign({}, opts.markupConfig), "f");
+        (_f = (_g = __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f")).extensions) !== null && _f !== void 0 ? _f : (_g.extensions = opts.extraMarkupExtensions);
         __classPrivateFieldSet(this, _EditorImpl_renderStorage, opts.renderStorage, "f");
         __classPrivateFieldSet(this, _EditorImpl_fileUploadHandler, opts.fileUploadHandler, "f");
         __classPrivateFieldSet(this, _EditorImpl_needToSetDimensionsForUploadedImages, Boolean(opts.needToSetDimensionsForUploadedImages), "f");
@@ -151,7 +153,8 @@ export class EditorImpl extends SafeEventEmitter {
                 reactRenderer: __classPrivateFieldGet(this, _EditorImpl_renderStorage, "f"),
                 uploadHandler: this.fileUploadHandler,
                 needImgDimms: this.needToSetDimensionsForUploadedImages,
-                extraMarkupExtensions: __classPrivateFieldGet(this, _EditorImpl_extraMarkupExtensions, "f"),
+                extensions: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").extensions,
+                yfmLangOptions: { languageData: __classPrivateFieldGet(this, _EditorImpl_markupConfig, "f").languageData },
                 receiver: this,
             })), "f");
         }
@@ -271,4 +274,4 @@ 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_extraMarkupExtensions = new WeakMap(), _EditorImpl_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = 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_preset = new WeakMap(), _EditorImpl_allowHTML = new WeakMap(), _EditorImpl_linkify = new WeakMap(), _EditorImpl_linkifyTlds = new WeakMap(), _EditorImpl_extensions = new WeakMap(), _EditorImpl_renderStorage = new WeakMap(), _EditorImpl_fileUploadHandler = new WeakMap(), _EditorImpl_needToSetDimensionsForUploadedImages = new WeakMap(), _EditorImpl_prepareRawMarkup = new WeakMap();

package/build/esm/bundle/index.d.ts

@@ -1,4 +1,4 @@
-export type { Editor as MarkdownEditorInstance, EditorMode as MarkdownEditorMode, EditorPreset as MarkdownEditorPreset, RenderPreview, SplitMode, } from './Editor';
+export type { Editor as MarkdownEditorInstance, EditorMode as MarkdownEditorMode, EditorPreset as MarkdownEditorPreset, MarkupConfig as MarkdownEditorMarkupConfig, RenderPreview, SplitMode, } from './Editor';
 export { MarkdownEditorProvider, useMarkdownEditorContext } from './context';
 export { useMarkdownEditor } from './useMarkdownEditor';
 export type { UseMarkdownEditorProps } from './useMarkdownEditor';

package/build/esm/extensions/yfm/FoldingHeading/plugins/Folding.js

@@ -103,7 +103,8 @@ function buildDecosSet(doc) {
         while ((child = parent.maybeChild(++idx))) {
             const childPos = $pos.posAtIndex(idx, depth);
             if (isHeading(child)) {
-                if (isFoldingHeading(child)) {
+                const hasFolding = isFoldingHeading(child);
+                if (hasFolding) {
                     nextFoldingHeadingFound = true;
                 }
                 const level = parseLevel(child);
@@ -112,12 +113,14 @@ function buildDecosSet(doc) {
                 if (!hidden) {
                     lastNonHiddenChild = { node: child, pos: childPos, level: hLevel };
                 }
-                if (isUnfoldedHeading(child)) {
-                    hLevel = level;
-                    hidden = false;
-                }
-                else {
-                    hidden = true;
+                if (hasFolding) {
+                    if (isUnfoldedHeading(child)) {
+                        hLevel = level;
+                        hidden = false;
+                    }
+                    else {
+                        hidden = true;
+                    }
                 }
             }
             if (!hidden) {

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

@@ -4,6 +4,8 @@ import { EventMap } from '../../bundle/Editor';
 import { ReactRenderStorage } from '../../extensions';
 import { Receiver } from '../../utils';
 import { FileUploadHandler } from './files-upload-facet';
+import { type YfmLangOptions } from './yfm';
+export type { YfmLangOptions };
 export declare type CreateCodemirrorParams = {
     doc: EditorViewConfig['doc'];
     placeholderText: string;
@@ -15,8 +17,9 @@ export declare type CreateCodemirrorParams = {
     reactRenderer: ReactRenderStorage;
     uploadHandler?: FileUploadHandler;
     needImgDimms?: boolean;
-    extraMarkupExtensions?: Extension[];
+    extensions?: Extension[];
     receiver?: Receiver<EventMap>;
+    yfmLangOptions?: YfmLangOptions;
 };
 export declare function createCodemirror(params: CreateCodemirrorParams): EditorView;
 export declare function withLogger(action: string, command: StateCommand): StateCommand;

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

@@ -13,7 +13,7 @@ import { ReactRendererFacet } from './react-facet';
 import { SearchPanelPlugin } from './search-plugin/plugin';
 import { yfmLang } from './yfm';
 export function createCodemirror(params) {
-    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extraMarkupExtensions, receiver, } = params;
+    const { doc, placeholderText, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, extensions: extraExtensions, receiver, yfmLangOptions, } = params;
     const extensions = [
         gravityTheme,
         placeholder(placeholderText),
@@ -57,7 +57,7 @@ export function createCodemirror(params) {
             ...historyKeymap,
         ]),
         autocompletion(),
-        yfmLang(),
+        yfmLang(yfmLangOptions),
         ReactRendererFacet.of(reactRenderer),
         PairingCharactersExtension,
         EditorView.lineWrapping,
@@ -78,8 +78,8 @@ export function createCodemirror(params) {
             imgWithDimms: params.needImgDimms,
         }));
     }
-    if (extraMarkupExtensions) {
-        extensions.push(...extraMarkupExtensions);
+    if (extraExtensions) {
+        extensions.push(...extraExtensions);
     }
     return new EditorView({
         doc,

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

@@ -1,4 +1,4 @@
-import { Completion, snippet } from '@codemirror/autocomplete';
+import { Completion, CompletionSource, snippet } from '@codemirror/autocomplete';
 import type { Extension } from '@codemirror/state';
 import { Tag } from '@lezer/highlight';
 export declare const customTags: {
@@ -15,4 +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 function yfmLang(): Extension;
+export interface LanguageData {
+    autocomplete: CompletionSource;
+    [key: string]: any;
+}
+export interface YfmLangOptions {
+    languageData?: LanguageData[];
+}
+export declare function yfmLang({ languageData }?: YfmLangOptions): Extension;

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

@@ -54,7 +54,56 @@ export const yfmNoteSnippets = {
 };
 export const yfmCutSnippetTemplate = '{% cut "#{title}" %}\n\n#{}\n\n{% endcut %}\n\n';
 export const yfmCutSnippet = snippet(yfmCutSnippetTemplate);
-export function yfmLang() {
+const mdAutocomplete = {
+    autocomplete: (context) => {
+        // TODO: add more actions and re-enable
+        // let word = context.matchBefore(/\/.*/);
+        // if (word) {
+        //     return {
+        //         from: word.from,
+        //         options: [
+        //             ...yfmNoteTypes.map<Completion>((type, index) => ({
+        //                 label: `/yfm note ${type}`,
+        //                 displayLabel: `YFM Note ${capitalize(type)}`,
+        //                 type: 'text',
+        //                 apply: yfmNoteSnippets[type],
+        //                 boost: -index,
+        //             })),
+        //             {
+        //                 label: '/yfm cut',
+        //                 displayLabel: 'YFM Cut',
+        //                 type: 'text',
+        //                 apply: yfmCutSnippet,
+        //             },
+        //         ],
+        //     };
+        // }
+        const word = context.matchBefore(/^.*/);
+        if (word === null || word === void 0 ? void 0 : word.text.startsWith('{%')) {
+            return {
+                from: word.from,
+                options: [
+                    ...yfmNoteTypes.map((type, index) => ({
+                        label: `{% note ${type}`,
+                        displayLabel: capitalize(type),
+                        type: 'text',
+                        section: 'YFM Note',
+                        apply: yfmNoteSnippets[type],
+                        boost: -index,
+                    })),
+                    {
+                        label: '{% cut',
+                        displayLabel: 'YFM Cut',
+                        type: 'text',
+                        apply: yfmCutSnippet,
+                    },
+                ],
+            };
+        }
+        return null;
+    },
+};
+export function yfmLang({ languageData = [] } = {}) {
     const mdSupport = markdown({
         // defaultCodeLanguage: markdownLanguage,
         base: markdownLanguage,
@@ -62,54 +111,9 @@ export function yfmLang() {
         completeHTMLTags: false,
         extensions: [UnderlineExtension, MonospaceExtension, MarkedExtension],
     });
-    const mdAutocomplete = {
-        autocomplete: (context) => {
-            // TODO: add more actions and re-enable
-            // let word = context.matchBefore(/\/.*/);
-            // if (word) {
-            //     return {
-            //         from: word.from,
-            //         options: [
-            //             ...yfmNoteTypes.map<Completion>((type, index) => ({
-            //                 label: `/yfm note ${type}`,
-            //                 displayLabel: `YFM Note ${capitalize(type)}`,
-            //                 type: 'text',
-            //                 apply: yfmNoteSnippets[type],
-            //                 boost: -index,
-            //             })),
-            //             {
-            //                 label: '/yfm cut',
-            //                 displayLabel: 'YFM Cut',
-            //                 type: 'text',
-            //                 apply: yfmCutSnippet,
-            //             },
-            //         ],
-            //     };
-            // }
-            const word = context.matchBefore(/^.*/);
-            if (word === null || word === void 0 ? void 0 : word.text.startsWith('{%')) {
-                return {
-                    from: word.from,
-                    options: [
-                        ...yfmNoteTypes.map((type, index) => ({
-                            label: `{% note ${type}`,
-                            displayLabel: capitalize(type),
-                            type: 'text',
-                            section: 'YFM Note',
-                            apply: yfmNoteSnippets[type],
-                            boost: -index,
-                        })),
-                        {
-                            label: '{% cut',
-                            displayLabel: 'YFM Cut',
-                            type: 'text',
-                            apply: yfmCutSnippet,
-                        },
-                    ],
-                };
-            }
-            return null;
-        },
-    };
-    return [mdSupport, mdSupport.language.data.of(mdAutocomplete)];
+    return [
+        mdSupport,
+        mdSupport.language.data.of(mdAutocomplete),
+        languageData.map((item) => mdSupport.language.data.of(item)),
+    ];
 }

package/build/esm/version.js

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

package/build/esm/view/hooks/useYfmShowElemWithId/useYfmShowElemWithId.d.ts

@@ -1,2 +1,2 @@
-import { RefObject } from 'react';
+import { type RefObject } from 'react';
 export declare function useYfmShowElemWithId(ref: RefObject<HTMLElement>, id: string): void;

package/build/esm/view/hooks/useYfmShowElemWithId/useYfmShowElemWithId.js

@@ -10,6 +10,10 @@ const YfmTabsCN = {
     Tab: 'yfm-tab',
     TabPanel: 'yfm-tab-panel',
 };
+const FoldingHeadingsCN = {
+    Open: 'open',
+    Section: 'heading-section',
+};
 export function useYfmShowElemWithId(ref, id) {
     useEffect(() => {
         const { current: containerDom } = ref;
@@ -20,7 +24,7 @@ export function useYfmShowElemWithId(ref, id) {
             return;
         while (elem && elem !== containerDom) {
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-            openYfmCut(elem) || switchYfmTabs(elem);
+            openYfmCut(elem) || openFoldingHeadings(elem, id) || switchYfmTabs(elem);
             elem = elem.parentElement;
         }
     }, [id]);
@@ -62,3 +66,13 @@ function switchYfmTabs(tabPanelElem) {
     }
     return true;
 }
+function openFoldingHeadings(elem, id) {
+    var _a;
+    if (elem.classList.contains(FoldingHeadingsCN.Section) &&
+        !elem.classList.contains(FoldingHeadingsCN.Open) &&
+        id !== ((_a = elem.firstElementChild) === null || _a === void 0 ? void 0 : _a.id)) {
+        elem.classList.add(FoldingHeadingsCN.Open);
+        return true;
+    }
+    return false;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "13.6.1",
+  "version": "13.8.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {