@gravity-ui/markdown-editor 13.25.1 → 14.0.0

package/build/esm/bundle/config/markup.d.ts

@@ -3,7 +3,7 @@ import { ToolbarData } from '../../toolbar/Toolbar';
 import { ToolbarGroupData } from '../../toolbar/ToolbarGroup';
 import { ToolbarListButtonData } from '../../toolbar/ToolbarListButton';
 import { ToolbarButtonPopupData, ToolbarItemData, ToolbarListItemData, ToolbarReactComponentData, ToolbarSingleItemData } from '../../toolbar/types';
-import type { EditorPreset } from '../Editor';
+import type { MarkdownEditorPreset } from '../types';
 export declare type MToolbarData = ToolbarData<CodeEditor>;
 export declare type MToolbarItemData = ToolbarItemData<CodeEditor>;
 export declare type MToolbarSingleItemData = ToolbarSingleItemData<CodeEditor>;
@@ -43,5 +43,5 @@ export declare const mToolbarConfig: MToolbarData;
 export declare const mHruleItemData: MToolbarSingleItemData;
 export declare const mTabsItemData: MToolbarSingleItemData;
 export declare const mHiddenData: MToolbarSingleItemData[];
-export declare const mToolbarConfigByPreset: Record<EditorPreset, MToolbarData>;
-export declare const mHiddenDataByPreset: Record<EditorPreset, MToolbarItemData[]>;
+export declare const mToolbarConfigByPreset: Record<MarkdownEditorPreset, MToolbarData>;
+export declare const mHiddenDataByPreset: Record<MarkdownEditorPreset, MToolbarItemData[]>;

package/build/esm/bundle/config/wysiwyg.d.ts

@@ -4,7 +4,7 @@ import { ToolbarData } from '../../toolbar/Toolbar';
 import { ToolbarGroupData } from '../../toolbar/ToolbarGroup';
 import { ToolbarListButtonData } from '../../toolbar/ToolbarListButton';
 import { ToolbarGroupItemData, ToolbarItemData, ToolbarListButtonItemData, ToolbarListItemData, ToolbarSingleItemData } from '../../toolbar/types';
-import type { EditorPreset } from '../Editor';
+import type { MarkdownEditorPreset } from '../types';
 export declare type WToolbarData = ToolbarData<ActionStorage>;
 export declare type WToolbarItemData = ToolbarItemData<ActionStorage>;
 export declare type WToolbarSingleItemData = ToolbarSingleItemData<ActionStorage>;
@@ -53,7 +53,7 @@ export declare const wToolbarConfig: WToolbarData;
 export declare const wToggleHeadingFoldingItemData: SelectionContextItemData;
 export declare const wSelectionMenuConfig: SelectionContextConfig;
 export declare const wMermaidItemData: WToolbarSingleItemData;
-export declare const wToolbarConfigByPreset: Record<EditorPreset, WToolbarData>;
-export declare const wCommandMenuConfigByPreset: Record<EditorPreset, WToolbarItemData[]>;
-export declare const wHiddenDataByPreset: Record<EditorPreset, WToolbarItemData[]>;
-export declare const wSelectionMenuConfigByPreset: Record<EditorPreset, SelectionContextConfig>;
+export declare const wToolbarConfigByPreset: Record<MarkdownEditorPreset, WToolbarData>;
+export declare const wCommandMenuConfigByPreset: Record<MarkdownEditorPreset, WToolbarItemData[]>;
+export declare const wHiddenDataByPreset: Record<MarkdownEditorPreset, WToolbarItemData[]>;
+export declare const wSelectionMenuConfigByPreset: Record<MarkdownEditorPreset, SelectionContextConfig>;

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

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

package/build/esm/bundle/index.js

@@ -1,3 +1,4 @@
+export * from './types';
 export { MarkdownEditorProvider, useMarkdownEditorContext } from './context';
 export { useMarkdownEditor } from './useMarkdownEditor';
 export { MarkdownEditorView } from './MarkdownEditorView';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ClassNameProps } from '../../classname';
-import type { EditorMode, SplitMode } from '../Editor';
+import type { MarkdownEditorMode, MarkdownEditorSplitMode } from '../types';
 import './index.css';
 export declare type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'> & {
     renderPreviewButton?: boolean;
@@ -8,14 +8,14 @@ export declare type EditorSettingsProps = Omit<SettingsContentProps, 'onClose'>
 };
 export declare const EditorSettings: React.NamedExoticComponent<EditorSettingsProps>;
 declare type SettingsContentProps = ClassNameProps & {
-    mode: EditorMode;
+    mode: MarkdownEditorMode;
     onClose: () => void;
-    onModeChange: (mode: EditorMode) => void;
+    onModeChange: (mode: MarkdownEditorMode) => void;
     onShowPreviewChange: (showPreview: boolean) => void;
     showPreview: boolean;
     toolbarVisibility: boolean;
     onToolbarVisibilityChange: (val: boolean) => void;
-    splitMode?: SplitMode;
+    splitMode?: MarkdownEditorSplitMode;
     splitModeEnabled?: boolean;
     onSplitModeChange?: (splitModeEnabled: boolean) => void;
 };

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

@@ -0,0 +1,174 @@
+import type { ReactNode } from 'react';
+import type { MarkupString } from '../common';
+import type { EscapeConfig, Extension } from '../core';
+import type { CreateCodemirrorParams, YfmLangOptions } from '../markup/codemirror';
+import type { FileUploadHandler } from '../utils/upload';
+import type { ChangeEditorModeOptions } from './Editor';
+import type { ExtensionsOptions as WysiwygPresetExtensionsOptions } from './wysiwyg-preset';
+export type { Editor as MarkdownEditorInstance } from './Editor';
+export declare type MarkdownEditorMode = 'wysiwyg' | 'markup';
+export declare type MarkdownEditorPreset = 'zero' | 'commonmark' | 'default' | 'yfm' | 'full';
+export declare type MarkdownEditorSplitMode = false | 'horizontal' | 'vertical';
+export declare type RenderPreviewParams = {
+    getValue: () => MarkupString;
+    mode: 'preview' | 'split';
+    md: Readonly<MarkdownEditorMdOptions>;
+};
+export declare type RenderPreview = (params: RenderPreviewParams) => ReactNode;
+export declare type MarkdownEditorMdOptions = {
+    html?: boolean;
+    breaks?: boolean;
+    linkify?: boolean;
+    linkifyTlds?: string | string[];
+};
+export declare type MarkdownEditorInitialOptions = {
+    markup?: MarkupString;
+    /** Default – wysiwyg */
+    mode?: MarkdownEditorMode;
+    /** Default – true */
+    toolbarVisible?: boolean;
+    /**
+     * Default – false
+     *
+     * Note: has no effect if `MarkdownEditorMarkupConfig.splitMode` is set to false or is not set.
+     */
+    splitModeEnabled?: boolean;
+};
+export declare type MarkdownEditorHandlers = {
+    /** Pass this handler to allow uploading files from device. */
+    uploadFile?: FileUploadHandler;
+};
+export declare type MarkdownEditorExperimentalOptions = {
+    /**
+     * If we need to set dimensions for uploaded images
+     *
+     * @default false
+     */
+    needToSetDimensionsForUploadedImages?: boolean;
+    /**
+     * Called before switching from the markup editor to the wysiwyg editor.
+     * You can use it to pre-process the value from the markup editor before it gets into the wysiwyg editor.
+     */
+    prepareRawMarkup?: (value: MarkupString) => MarkupString;
+    beforeEditorModeChange?: (options: Pick<ChangeEditorModeOptions, 'mode' | 'reason'>) => boolean | undefined;
+};
+export declare type MarkdownEditorMarkupConfig = {
+    /**
+     * Pass the rendering function to preview the markdown content.
+     *
+     * It is also used for split view rendering.
+     *
+     * If false is passed, preview will be disabled.
+     */
+    renderPreview?: RenderPreview;
+    /**
+     * Pass position of split view.
+     *
+     * Note: for enable split view, you need to pass renderPreview function too.
+     *
+     * If false is passed, split view will be disabled.
+     */
+    splitMode?: MarkdownEditorSplitMode;
+    /** Additional extensions for codemirror instance. */
+    extensions?: CreateCodemirrorParams['extensions'];
+    /** Can be used to disable some of the default extensions */
+    disabledExtensions?: CreateCodemirrorParams['disabledExtensions'];
+    /** Additional keymaps for codemirror instance */
+    keymaps?: CreateCodemirrorParams['keymaps'];
+    /** Overrides the default placeholder content. */
+    placeholder?: CreateCodemirrorParams['placeholder'];
+    /**
+     * 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'];
+    /** Config for @codemirror/autocomplete https://codemirror.net/docs/ref/#autocomplete.autocompletion%5Econfig */
+    autocompletion?: CreateCodemirrorParams['autocompletion'];
+};
+declare type ExtensionsOptions<T extends object = {}> = Omit<WysiwygPresetExtensionsOptions, 'reactRenderer'> & T;
+export declare type MarkdownEditorWysiwygConfig = {
+    /** Additional extensions */
+    extensions?: Extension;
+    extensionOptions?: ExtensionsOptions;
+    escapeConfig?: EscapeConfig;
+};
+export declare type MarkdownEditorOptions<T extends object = {}> = {
+    /**
+     * A set of plug-in extensions.
+     *
+     * @default 'full'
+     */
+    preset?: MarkdownEditorPreset;
+    /** Markdown parser options */
+    md?: MarkdownEditorMdOptions;
+    /** Initial values */
+    initial?: MarkdownEditorInitialOptions;
+    handlers?: MarkdownEditorHandlers;
+    experimental?: MarkdownEditorExperimentalOptions;
+    /** Options for markup mode */
+    markupConfig?: MarkdownEditorMarkupConfig;
+    /** Options for wysiwyg mode */
+    wysiwygConfig?: MarkdownEditorWysiwygConfig;
+    /** @deprecated Put allowHTML via MarkdownEditorMdOptions */
+    allowHTML?: boolean;
+    /** @deprecated Put breaks via MarkdownEditorMdOptions */
+    breaks?: boolean;
+    /** @deprecated Put linkify via MarkdownEditorMdOptions */
+    linkify?: boolean;
+    /** @deprecated Put linkifyTlds via MarkdownEditorMdOptions */
+    linkifyTlds?: string | string[];
+    /** @deprecated Put initial markup via MarkdownEditorInitialOptions */
+    initialMarkup?: MarkdownEditorInitialOptions['markup'];
+    /**
+     * @default 'wysiwyg'
+     *
+     * @deprecated Put initial editor mode via MarkdownEditorInitialOptions
+     */
+    initialEditorMode?: MarkdownEditorInitialOptions['mode'];
+    /**
+     * @default true
+     *
+     * @deprecated Put initial toolbar visibility via MarkdownEditorInitialOptions
+     */
+    initialToolbarVisible?: MarkdownEditorInitialOptions['toolbarVisible'];
+    /**
+     * Has no effect if splitMode is false or undefined
+     *
+     * @default false
+     *
+     * @deprecated Put initialSplitModeEnabled via MarkdownEditorInitialOptions
+     */
+    initialSplitModeEnabled?: MarkdownEditorInitialOptions['splitModeEnabled'];
+    /**
+     * If we need to set dimensions for uploaded images
+     *
+     * @default false
+     *
+     * @deprecated Put needToSetDimensionsForUploadedImages via MarkdownEditorExperimentalOptions
+     */
+    needToSetDimensionsForUploadedImages?: MarkdownEditorExperimentalOptions['needToSetDimensionsForUploadedImages'];
+    /**
+     * Called before switching from the markup editor to the wysiwyg editor.
+     * You can use it to pre-process the value from the markup editor before it gets into the wysiwyg editor.
+     *
+     * @deprecated Put prepareRawMarkup via MarkdownEditorExperimentalOptions
+     */
+    prepareRawMarkup?: MarkdownEditorExperimentalOptions['prepareRawMarkup'];
+    /** @deprecated Put beforeEditorModeChange via MarkdownEditorExperimentalOptions */
+    experimental_beforeEditorModeChange?: MarkdownEditorExperimentalOptions['beforeEditorModeChange'];
+    /** @deprecated Put split mode via MarkdownEditorMarkupConfig */
+    splitMode?: MarkdownEditorMarkupConfig['splitMode'];
+    /** @deprecated Put render preview function via MarkdownEditorMarkupConfig */
+    renderPreview?: MarkdownEditorMarkupConfig['renderPreview'];
+    /** @deprecated Put extensions via MarkdownEditorWysiwygConfig */
+    extraExtensions?: MarkdownEditorWysiwygConfig['extensions'];
+    /** @deprecated Put extension options via MarkdownEditorWysiwygConfig */
+    extensionOptions?: ExtensionsOptions<T>;
+    /** @deprecated Put extra extensions via MarkdownEditorMarkupConfig */
+    extraMarkupExtensions?: MarkdownEditorMarkupConfig['extensions'];
+    /** @deprecated Put escapeConfig via MarkdownEditorWysiwygConfig */
+    escapeConfig?: MarkdownEditorWysiwygConfig['escapeConfig'];
+    /** @deprecated Put file upload handler via MarkdownEditorHandlers */
+    fileUploadHandler?: MarkdownEditorHandlers['uploadFile'];
+};

package/build/esm/bundle/types.js

@@ -0,0 +1,2 @@
+// public types, re-exported in src/bundle/index.ts
+export {};

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

@@ -1,18 +1,4 @@
 /// <reference types="react" />
-import { Extension } from '../core';
-import { Editor, EditorOptions, EditorPreset } from './Editor';
-import { ExtensionsOptions } from './wysiwyg-preset';
-export declare type UseMarkdownEditorProps<T extends object = {}> = Omit<EditorOptions, 'extensions' | 'renderStorage' | 'preset'> & {
-    /**
-     * A set of plug-in extensions.
-     *
-     * @default 'full'
-     */
-    preset?: EditorPreset;
-    breaks?: boolean;
-    /** Used only first value. Сhanging the value will not lead to anything */
-    extensionOptions?: Omit<ExtensionsOptions, 'reactRenderer'> & T;
-    /** Used only first value. Сhanging the value will not lead to anything */
-    extraExtensions?: Extension;
-};
-export declare function useMarkdownEditor<T extends object = {}>(props: UseMarkdownEditorProps<T>, deps?: React.DependencyList): Editor;
+import type { MarkdownEditorInstance, MarkdownEditorOptions } from './types';
+export declare type UseMarkdownEditorProps<T extends object = {}> = MarkdownEditorOptions<T>;
+export declare function useMarkdownEditor<T extends object = {}>(props: UseMarkdownEditorProps<T>, deps?: React.DependencyList): MarkdownEditorInstance;

package/build/esm/bundle/useMarkdownEditor.js

@@ -3,25 +3,35 @@ import { ReactRenderStorage } from '../extensions';
 import { logger } from '../logger';
 import { EditorImpl } from './Editor';
 import { BundlePreset } from './wysiwyg-preset';
+// [major] TODO: remove generic type
 export function useMarkdownEditor(props, deps = []) {
     const editor = useMemo(() => {
-        var _a;
-        const preset = (_a = props.preset) !== null && _a !== void 0 ? _a : 'full';
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        const { md = {}, initial = {}, handlers = {}, experimental = {}, markupConfig = {}, wysiwygConfig = {}, } = props;
+        const breaks = (_a = md.breaks) !== null && _a !== void 0 ? _a : props.breaks;
+        const preset = (_b = props.preset) !== null && _b !== void 0 ? _b : 'full';
         const renderStorage = new ReactRenderStorage();
+        const needToSetDimensionsForUploadedImages = (_c = experimental.needToSetDimensionsForUploadedImages) !== null && _c !== void 0 ? _c : props.needToSetDimensionsForUploadedImages;
         const extensions = (builder) => {
-            builder.use(BundlePreset, Object.assign(Object.assign({}, props.extensionOptions), { preset, reactRenderer: renderStorage, onCancel: () => {
+            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: () => {
                     editor.emit('cancel', null);
                     return true;
                 }, onSubmit: () => {
                     editor.emit('submit', null);
                     return true;
-                }, mdBreaks: props.breaks, fileUploadHandler: props.fileUploadHandler, needToSetDimensionsForUploadedImages: props.needToSetDimensionsForUploadedImages }));
-            if (props.extraExtensions) {
-                builder.use(props.extraExtensions, props.extensionOptions);
+                }, mdBreaks: breaks, fileUploadHandler: props.fileUploadHandler, needToSetDimensionsForUploadedImages }));
+            {
+                const extraExtensions = wysiwygConfig.extensions || props.extraExtensions;
+                if (extraExtensions) {
+                    builder.use(extraExtensions, props.extensionOptions);
+                }
             }
         };
-        return new EditorImpl(Object.assign(Object.assign({}, props), { extensions, renderStorage, preset }));
-    }, deps.concat(props.allowHTML, props.linkify, props.linkifyTlds, props.breaks, props.splitMode, props.needToSetDimensionsForUploadedImages));
+        return new EditorImpl(Object.assign(Object.assign({}, props), { preset,
+            renderStorage, md: Object.assign(Object.assign({}, md), { breaks, html: (_d = md.html) !== null && _d !== void 0 ? _d : props.allowHTML, linkify: (_e = md.linkify) !== null && _e !== void 0 ? _e : props.linkify, linkifyTlds: (_f = md.linkifyTlds) !== null && _f !== void 0 ? _f : props.linkifyTlds }), initial: Object.assign(Object.assign({}, initial), { markup: (_g = initial.markup) !== null && _g !== void 0 ? _g : props.initialMarkup, mode: (_h = initial.mode) !== null && _h !== void 0 ? _h : props.initialEditorMode, toolbarVisible: (_j = initial.toolbarVisible) !== null && _j !== void 0 ? _j : props.initialToolbarVisible, splitModeEnabled: (_k = initial.splitModeEnabled) !== null && _k !== void 0 ? _k : props.initialSplitModeEnabled }), handlers: Object.assign(Object.assign({}, handlers), { uploadFile: (_l = handlers.uploadFile) !== null && _l !== void 0 ? _l : props.fileUploadHandler }), experimental: Object.assign(Object.assign({}, experimental), { needToSetDimensionsForUploadedImages, 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(() => {
         function onToolbarAction({ editorMode, id }) {
             logger.action({ mode: editorMode, source: 'toolbar', action: id });

package/build/esm/bundle/wysiwyg-preset.d.ts

@@ -3,10 +3,10 @@ import { BehaviorPresetOptions } from '../extensions/behavior';
 import { EditorModeKeymapOptions } from '../extensions/behavior/EditorModeKeymap';
 import { FullPresetOptions } from '../presets/full';
 import type { FileUploadHandler } from '../utils/upload';
-import { EditorPreset } from './Editor';
+import { MarkdownEditorPreset } from './types';
 export declare type ExtensionsOptions = BehaviorPresetOptions & FullPresetOptions;
 export declare type BundlePresetOptions = ExtensionsOptions & EditorModeKeymapOptions & {
-    preset: EditorPreset;
+    preset: MarkdownEditorPreset;
     mdBreaks?: boolean;
     fileUploadHandler?: FileUploadHandler;
     /**

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

@@ -5,7 +5,7 @@ import type { Extension } from './types/extension';
 import type { Parser } from './types/parser';
 import type { Serializer } from './types/serializer';
 declare type OnChange = (editor: WysiwygEditor) => void;
-declare type EscapeConfig = {
+export declare type EscapeConfig = {
     commonEscape?: RegExp;
     startOfLineEscape?: RegExp;
 };

package/build/{cjs/extensions/yfm → esm/extensions/additional}/FoldingHeading/const.d.ts

@@ -1 +1 @@
-export { YfmHeadingAttr, headingNodeName, type HeadingLevel } from '../YfmHeading/const';
+export { YfmHeadingAttr, headingNodeName, type HeadingLevel } from '../../yfm/YfmHeading/const';

package/build/esm/extensions/additional/FoldingHeading/const.js

@@ -0,0 +1 @@
+export { YfmHeadingAttr, headingNodeName } from '../../yfm/YfmHeading/const';

package/build/esm/extensions/{yfm → additional}/Math/view-and-edit.d.ts

@@ -1,7 +1,7 @@
 import type { Node } from 'prosemirror-model';
 import { Plugin } from 'prosemirror-state';
 import { Decoration, NodeView } from 'prosemirror-view';
-import type { ReactRenderer, RendererItem } from '../../../extensions/behavior/ReactRenderer';
+import type { ReactRenderer, RendererItem } from '../../behavior/ReactRenderer';
 import type { KatexOptions, RunOptions } from './types';
 import './view-and-edit.css';
 export declare type MathNodeViewOptions = Pick<RunOptions, 'sanitize'> & {

package/build/esm/extensions/yfm/YfmConfigs/index.d.ts

@@ -1,7 +1,9 @@
-import '@diplodoc/transform/dist/js/yfm';
+import '@diplodoc/transform/dist/js/base';
+import '@diplodoc/transform/dist/js/_yfm-only';
 import type { ExtensionAuto } from '../../../core';
 import { YfmConfigsSpecsOptions } from './YfmConfigsSpecs';
-import '@diplodoc/transform/dist/css/yfm.css';
+import '@diplodoc/transform/dist/css/base.css';
+import '@diplodoc/transform/dist/css/_yfm-only.css';
 import './yfm.css';
 export declare type YfmConfigsOptions = YfmConfigsSpecsOptions & {};
 export declare const YfmConfigs: ExtensionAuto<YfmConfigsOptions>;

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

@@ -1,7 +1,9 @@
-import '@diplodoc/transform/dist/js/yfm';
+import '@diplodoc/transform/dist/js/base';
+import '@diplodoc/transform/dist/js/_yfm-only'; // eslint-disable-line import/order
 import { Plugin } from 'prosemirror-state';
 import { YfmConfigsSpecs } from './YfmConfigsSpecs';
-import '@diplodoc/transform/dist/css/yfm.css';
+import '@diplodoc/transform/dist/css/base.css';
+import '@diplodoc/transform/dist/css/_yfm-only.css'; // eslint-disable-line import/order
 import './yfm.css'; // eslint-disable-line import/order
 export const YfmConfigs = (builder, opts) => {
     // apply md-it-attrs plugin and ignore yfm lint token

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

@@ -1,5 +1,4 @@
-import log from '@diplodoc/transform/lib/log';
-import yfmPlugin from '@diplodoc/transform/lib/plugins/cut';
+import { transform as yfmCut } from '@diplodoc/cut-extension';
 import { CutNode } from './const';
 import { parserTokens } from './parser';
 import { getSchemaSpecs } from './schema';
@@ -8,7 +7,7 @@ export { CutNode, cutType, cutTitleType, cutContentType } from './const';
 export const YfmCutSpecs = (builder, opts) => {
     const schemaSpecs = getSchemaSpecs(opts, builder.context.get('placeholder'));
     builder
-        .configureMd((md) => md.use(yfmPlugin, { log }))
+        .configureMd((md) => md.use(yfmCut({ bundle: false })))
         .addNode(CutNode.Cut, () => ({
         spec: schemaSpecs[CutNode.Cut],
         toMd: serializerTokens[CutNode.Cut],

package/build/esm/extensions/yfm/YfmCut/index.css

@@ -1,8 +1,6 @@
 .ProseMirror.yfm .yfm-cut {
   border: 1px dashed transparent;
   border-radius: var(--g-border-radius-s);
-  /* TODO: Remove this after updating @diplodoc/transform to version 4.19.0 or higher */
-  /* This ensures backward compatibility with earlier versions of cut-extension */
 }
 .ProseMirror.yfm .yfm-cut:hover {
   border-color: var(--g-color-line-generic);
@@ -12,11 +10,4 @@
 }
 .ProseMirror.yfm .yfm-cut .yfm-cut-title:focus {
   outline: 0;
-}
-.ProseMirror.yfm .yfm-cut .yfm-cut-title {
-  list-style: none;
-}
-.ProseMirror.yfm .yfm-cut .yfm-cut-title::-webkit-details-marker,
-.ProseMirror.yfm .yfm-cut .yfm-cut-title::marker {
-  display: none;
 }

package/build/esm/extensions/yfm/YfmCut/index.d.ts

@@ -1,5 +1,7 @@
+import '@diplodoc/cut-extension/runtime';
 import type { Action, ExtensionAuto } from '../../../core';
 import { YfmCutSpecsOptions } from './YfmCutSpecs';
+import '@diplodoc/cut-extension/runtime/styles.css';
 import './index.css';
 declare const cutAction = "toYfmCut";
 export { CutNode, cutType, cutTitleType, cutContentType } from './YfmCutSpecs';

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

@@ -1,3 +1,4 @@
+import '@diplodoc/cut-extension/runtime';
 import { chainCommands } from 'prosemirror-commands';
 import { nodeInputRule } from '../../../utils/inputrules';
 import { withLogAction } from '../../../utils/keymap';
@@ -8,7 +9,8 @@ import { cutType } from './const';
 import { YfmCutTitleNodeView } from './nodeviews/yfm-cut-title';
 import { cutActivePlugin } from './plugins/active';
 import { cutAutoOpenPlugin } from './plugins/auto-open';
-import './index.css';
+import '@diplodoc/cut-extension/runtime/styles.css';
+import './index.css'; // eslint-disable-line import/order
 const cutAction = 'toYfmCut';
 export { CutNode, cutType, cutTitleType, cutContentType } from './YfmCutSpecs';
 export const YfmCut = (builder, opts) => {

package/build/esm/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.css

@@ -8,7 +8,7 @@
   font-weight: 700;
 }
 .yfm .yfm-note > p {
-  margin: 0 0 10px 0;
+  margin: 0 0 10px;
 }
 .yfm .yfm-note > p:first-child::before {
   box-sizing: content-box;
@@ -29,23 +29,23 @@
 .yfm .yfm-note.yfm-accent-tip > p:first-child::before {
   content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(86,189,103)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
 }
-.yfm .yfm-note.yfm-accent-alert > p:first-child::before {
-  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(255,70,69)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
-}
 .yfm .yfm-note.yfm-accent-warning > p:first-child::before {
   content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(241,149,24)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
 }
+.yfm .yfm-note.yfm-accent-alert > p:first-child::before {
+  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 16 16"%3E%3Ccircle cx="8" cy="8" r="8" fill="rgb(255,70,69)"/%3E%3Crect width="1" height="5" x="7.5" y="6.5" stroke="%23fff" rx=".5"/%3E%3Ccircle cx="8" cy="4" r="1" fill="%23fff"/%3E%3C/svg%3E');
+}
 .yfm .yfm-note.yfm-accent-info {
-  background: rgba(2, 123, 243, 0.08);
+  background: var(--yfm-color-note-info-background);
 }
 .yfm .yfm-note.yfm-accent-tip {
-  background: rgba(63, 201, 46, 0.1);
+  background: var(--yfm-color-note-tip-background);
 }
 .yfm .yfm-note.yfm-accent-alert {
-  background: rgba(235, 50, 38, 0.08);
+  background: var(--yfm-color-note-important-background);
 }
 .yfm .yfm-note.yfm-accent-warning {
-  background: rgba(255, 136, 0, 0.15);
+  background: var(--yfm-color-note-warning-background);
 }
 
 .g-md-yfm-note-toolbar {
@@ -53,14 +53,14 @@
 }
 
 .g-md-toolbar-group__s-button_id_note-type-tip {
-  color: #56bd67;
+  color: var(--yfm-color-note-tip);
 }
 .g-md-toolbar-group__s-button_id_note-type-info {
-  color: #027bf3;
+  color: var(--yfm-color-note-info);
 }
 .g-md-toolbar-group__s-button_id_note-type-alert {
-  color: #ff4645;
+  color: var(--yfm-color-note-important);
 }
 .g-md-toolbar-group__s-button_id_note-type-warning {
-  color: #f19518;
+  color: var(--yfm-color-note-warning);
 }

package/build/esm/extensions/yfm/YfmNote/plugins/YfmNoteTooltipPlugin/index.js

@@ -25,7 +25,10 @@ export const yfmNoteTooltipPlugin = ({ actions, schema }) => new Plugin({
             idPrefix: 'yfm-note-tooltip',
             nodeType: noteType(view.state.schema),
             popupPlacement: ['bottom', 'top'],
-            content: (view, { node, pos }) => (React.createElement(Toolbar, { editor: actions, focus: () => view.focus(), className: "g-md-yfm-note-toolbar", data: [
+            content: (view, { node, pos }) => (React.createElement(Toolbar, { editor: actions, focus: () => view.focus(), 
+                // the yfm class allows to access css variables
+                // https://github.com/diplodoc-platform/transform/blob/master/src/scss/_common.scss#L17
+                className: "yfm g-md-yfm-note-toolbar", data: [
                     [
                         YfmNoteType.info,
                         YfmNoteType.tip,

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/const.d.ts

@@ -10,7 +10,8 @@ export declare enum TabsNode {
 }
 export declare enum TabsAttrs {
     class = "class",
-    dataDiplodocGroup = "data-diplodoc-group"
+    dataDiplodocGroup = "data-diplodoc-group",
+    dataDiplodocVariant = "data-diplodoc-variant"
 }
 export declare enum TabsListAttrs {
     class = "class",

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/const.js

@@ -14,6 +14,7 @@ export var TabsAttrs;
 (function (TabsAttrs) {
     TabsAttrs["class"] = "class";
     TabsAttrs["dataDiplodocGroup"] = "data-diplodoc-group";
+    TabsAttrs["dataDiplodocVariant"] = "data-diplodoc-variant";
 })(TabsAttrs || (TabsAttrs = {}));
 export var TabsListAttrs;
 (function (TabsListAttrs) {

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/index.js

@@ -1,5 +1,4 @@
-import log from '@diplodoc/transform/lib/log';
-import yfmPlugin from '@diplodoc/transform/lib/plugins/tabs';
+import { transform as yfmTabs } from '@diplodoc/tabs-extension';
 import { nodeTypeFactory } from '../../../../utils/schema';
 import { TabsNode } from './const';
 import { tabsPostPlugin } from './md-plugin';
@@ -14,7 +13,19 @@ export const tabsListType = nodeTypeFactory(TabsNode.TabsList);
 export const YfmTabsSpecs = (builder, opts) => {
     const schemaSpecs = getSchemaSpecs(opts);
     builder
-        .configureMd((md) => md.use(yfmPlugin, { log }).use(tabsPostPlugin))
+        .configureMd((md) => md
+        .use(yfmTabs({
+        bundle: false,
+        features: {
+            enabledVariants: {
+                regular: true,
+                radio: true,
+                dropdown: false,
+                accordion: false,
+            },
+        },
+    }))
+        .use(tabsPostPlugin))
         .addNode(TabsNode.Tab, () => ({
         spec: schemaSpecs[TabsNode.Tab],
         toMd: serializerTokens[TabsNode.Tab],

package/build/esm/extensions/yfm/YfmTabs/YfmTabsSpecs/md-plugin.js

@@ -4,7 +4,6 @@ export const tabsPostPlugin = (md) => {
     md.core.ruler.push('me_tabs_after', (state) => {
         var _a;
         const stack = [];
-        const tabCloseIndexes = [];
         for (const token of state.tokens) {
             switch (token.type) {
                 case 'tabs_open': {
@@ -23,11 +22,6 @@ export const tabsPostPlugin = (md) => {
                 case 'tab_open': {
                     const item = stack.at(-1);
                     if (item === null || item === void 0 ? void 0 : item.vertical) {
-                        // --> TODO: remove after updating to tabs-extension v^3.4.0
-                        const isInput = token.tag === 'input';
-                        if (isInput)
-                            token.type = 'tab-input';
-                        // <--
                         token.type = prefix + token.type;
                     }
                     break;
@@ -36,9 +30,6 @@ export const tabsPostPlugin = (md) => {
                     const item = stack.at(-1);
                     if (item === null || item === void 0 ? void 0 : item.vertical) {
                         token.type = prefix + token.type;
-                        // --> TODO: remove after updating to tabs-extension v^3.4.0
-                        tabCloseIndexes.push(state.tokens.indexOf(token));
-                        // <--
                     }
                     break;
                 }
@@ -51,25 +42,7 @@ export const tabsPostPlugin = (md) => {
                     }
                     break;
                 }
-                // --> TODO: remove after updating to tabs-extension v^3.4.0
-                case 'label_open': {
-                    const tokenIndex = state.tokens.indexOf(token);
-                    const prevToken = tokenIndex > 0 && state.tokens.at(tokenIndex - 1);
-                    if (prevToken && prevToken.type === 'r-tab-input') {
-                        token.type = prefix + 'tab-' + token.type;
-                    }
-                    break;
-                }
-                // <--
             }
         }
-        // --> TODO: remove after updating to tabs-extension v^3.4.0
-        for (const index of tabCloseIndexes.reverse()) {
-            if (index === -1)
-                continue;
-            const labelCloseToken = new state.Token(prefix + 'tab-label_close', 'label', -1);
-            state.tokens.splice(index, 0, labelCloseToken);
-        }
-        // <--
     });
 };