@gravity-ui/markdown-editor 13.0.0

package/build/cjs/bundle/emoji.js

@@ -0,0 +1,269 @@
+"use strict";
+// import emojiDefs from 'markdown-it-emoji/lib/data/full.json';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.emojiDefs = void 0;
+// some emojis from markdown-it-emoji/lib/data/full.json
+exports.emojiDefs = {
+    grinning: '😀',
+    smiley: '😃',
+    smile: '😄',
+    grin: '😁',
+    laughing: '😆',
+    satisfied: '😆',
+    sweat_smile: '😅',
+    rofl: '🤣',
+    joy: '😂',
+    slightly_smiling_face: '🙂',
+    upside_down_face: '🙃',
+    wink: '😉',
+    blush: '😊',
+    innocent: '😇',
+    smiling_face_with_three_hearts: '🥰',
+    heart_eyes: '😍',
+    star_struck: '🤩',
+    kissing_heart: '😘',
+    kissing: '😗',
+    // relaxed: '☺️',
+    kissing_closed_eyes: '😚',
+    kissing_smiling_eyes: '😙',
+    smiling_face_with_tear: '🥲',
+    yum: '😋',
+    stuck_out_tongue: '😛',
+    stuck_out_tongue_winking_eye: '😜',
+    zany_face: '🤪',
+    stuck_out_tongue_closed_eyes: '😝',
+    money_mouth_face: '🤑',
+    hugs: '🤗',
+    hand_over_mouth: '🤭',
+    shushing_face: '🤫',
+    thinking: '🤔',
+    zipper_mouth_face: '🤐',
+    raised_eyebrow: '🤨',
+    neutral_face: '😐',
+    expressionless: '😑',
+    no_mouth: '😶',
+    smirk: '😏',
+    unamused: '😒',
+    roll_eyes: '🙄',
+    grimacing: '😬',
+    lying_face: '🤥',
+    relieved: '😌',
+    pensive: '😔',
+    sleepy: '😪',
+    drooling_face: '🤤',
+    sleeping: '😴',
+    mask: '😷',
+    face_with_thermometer: '🤒',
+    face_with_head_bandage: '🤕',
+    nauseated_face: '🤢',
+    vomiting_face: '🤮',
+    sneezing_face: '🤧',
+    hot_face: '🥵',
+    cold_face: '🥶',
+    woozy_face: '🥴',
+    dizzy_face: '😵',
+    exploding_head: '🤯',
+    cowboy_hat_face: '🤠',
+    partying_face: '🥳',
+    disguised_face: '🥸',
+    sunglasses: '😎',
+    nerd_face: '🤓',
+    monocle_face: '🧐',
+    confused: '😕',
+    worried: '😟',
+    slightly_frowning_face: '🙁',
+    // frowning_face: '☹️',
+    open_mouth: '😮',
+    hushed: '😯',
+    astonished: '😲',
+    flushed: '😳',
+    pleading_face: '🥺',
+    frowning: '😦',
+    anguished: '😧',
+    fearful: '😨',
+    cold_sweat: '😰',
+    disappointed_relieved: '😥',
+    cry: '😢',
+    sob: '😭',
+    scream: '😱',
+    confounded: '😖',
+    persevere: '😣',
+    disappointed: '😞',
+    sweat: '😓',
+    weary: '😩',
+    tired_face: '😫',
+    yawning_face: '🥱',
+    triumph: '😤',
+    rage: '😡',
+    pout: '😡',
+    angry: '😠',
+    cursing_face: '🤬',
+    smiling_imp: '😈',
+    imp: '👿',
+    skull: '💀',
+    skull_and_crossbones: '☠️',
+    shit: '💩',
+    clown_face: '🤡',
+    japanese_ogre: '👹',
+    japanese_goblin: '👺',
+    ghost: '👻',
+    alien: '👽',
+    space_invader: '👾',
+    robot: '🤖',
+    smiley_cat: '😺',
+    smile_cat: '😸',
+    joy_cat: '😹',
+    heart_eyes_cat: '😻',
+    smirk_cat: '😼',
+    kissing_cat: '😽',
+    scream_cat: '🙀',
+    crying_cat_face: '😿',
+    pouting_cat: '😾',
+    see_no_evil: '🙈',
+    hear_no_evil: '🙉',
+    speak_no_evil: '🙊',
+    kiss: '💋',
+    broken_heart: '💔',
+    heart: '❤️',
+    zzz: '💤',
+    wave: '👋',
+    raised_back_of_hand: '🤚',
+    raised_hand_with_fingers_splayed: '🖐️',
+    hand: '✋',
+    raised_hand: '✋',
+    vulcan_salute: '🖖',
+    ok_hand: '👌',
+    pinched_fingers: '🤌',
+    pinching_hand: '🤏',
+    v: '✌️',
+    crossed_fingers: '🤞',
+    love_you_gesture: '🤟',
+    metal: '🤘',
+    call_me_hand: '🤙',
+    point_left: '👈',
+    point_right: '👉',
+    point_up_2: '👆',
+    middle_finger: '🖕',
+    fu: '🖕',
+    point_down: '👇',
+    point_up: '☝️',
+    '+1': '👍',
+    thumbsup: '👍',
+    '-1': '👎',
+    thumbsdown: '👎',
+    fist: '✊',
+    punch: '👊',
+    fist_left: '🤛',
+    fist_right: '🤜',
+    clap: '👏',
+    raised_hands: '🙌',
+    open_hands: '👐',
+    palms_up_together: '🤲',
+    handshake: '🤝',
+    pray: '🙏',
+    writing_hand: '✍️',
+    nail_care: '💅',
+    selfie: '🤳',
+    muscle: '💪',
+    mechanical_arm: '🦾',
+    eyes: '👀',
+    eye: '👁️',
+    footprints: '👣',
+    monkey_face: '🐵',
+    monkey: '🐒',
+    dog: '🐶',
+    wolf: '🐺',
+    fox_face: '🦊',
+    cat: '🐱',
+    horse: '🐴',
+    unicorn: '🦄',
+    cow: '🐮',
+    pig: '🐷',
+    mouse: '🐭',
+    chicken: '🐔',
+    rooster: '🐓',
+    bird: '🐦',
+    four_leaf_clover: '🍀',
+    egg: '🥚',
+    cake: '🍰',
+    coffee: '☕',
+    wine_glass: '🍷',
+    beer: '🍺',
+    beers: '🍻',
+    clinking_glasses: '🥂',
+    house: '🏠',
+    bank: '🏦',
+    sunrise: '🌅',
+    taxi: '🚕',
+    car: '🚗',
+    stop_sign: '🛑',
+    construction: '🚧',
+    anchor: '⚓',
+    rocket: '🚀',
+    hourglass: '⌛',
+    alarm_clock: '⏰',
+    moon: '🌔',
+    zap: '⚡',
+    fire: '🔥',
+    tada: '🎉',
+    gift: '🎁',
+    trophy: '🏆',
+    '8ball': '🎱',
+    video_game: '🎮',
+    spades: '♠️',
+    hearts: '♥️',
+    diamonds: '♦️',
+    clubs: '♣️',
+    chess_pawn: '♟️',
+    art: '🎨',
+    crown: '👑',
+    mega: '📣',
+    bell: '🔔',
+    no_bell: '🔕',
+    mag: '🔍',
+    lock: '🔒',
+    unlock: '🔓',
+    key: '🔑',
+    gun: '🔫',
+    link: '🔗',
+    drop_of_blood: '🩸',
+    pill: '💊',
+    bed: '🛏️',
+    moyai: '🗿',
+    warning: '⚠️',
+    children_crossing: '🚸',
+    no_entry: '⛔',
+    no_entry_sign: '🚫',
+    no_bicycles: '🚳',
+    no_smoking: '🚭',
+    do_not_litter: '🚯',
+    'non-potable_water': '🚱',
+    no_pedestrians: '🚷',
+    no_mobile_phones: '📵',
+    underage: '🔞',
+    radioactive: '☢️',
+    biohazard: '☣️',
+    back: '🔙',
+    end: '🔚',
+    on: '🔛',
+    soon: '🔜',
+    top: '🔝',
+    cinema: '🎦',
+    infinity: '♾️',
+    bangbang: '‼️',
+    interrobang: '⁉️',
+    question: '❓',
+    exclamation: '❗',
+    o: '⭕',
+    x: '❌',
+    copyright: '©️',
+    registered: '®️',
+    tm: '™️',
+    new: '🆕',
+    ok: '🆗',
+    sos: '🆘',
+    up: '🆙',
+    vs: '🆚',
+    radio_button: '🔘',
+    checkered_flag: '🏁',
+};

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

@@ -0,0 +1,9 @@
+export type { Editor as MarkdownEditorInstance, EditorMode as MarkdownEditorMode, EditorPreset as MarkdownEditorPreset, RenderPreview, SplitMode, } from './Editor';
+export { MarkdownEditorProvider, useMarkdownEditorContext } from './context';
+export { useMarkdownEditor } from './useMarkdownEditor';
+export type { UseMarkdownEditorProps } from './useMarkdownEditor';
+export { MarkdownEditorView } from './MarkdownEditorView';
+export type { MarkdownEditorViewProps } from './MarkdownEditorView';
+import * as markupToolbarConfigs from './config/markup';
+import * as wysiwygToolbarConfigs from './config/wysiwyg';
+export { markupToolbarConfigs, wysiwygToolbarConfigs };

package/build/cjs/bundle/index.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wysiwygToolbarConfigs = exports.markupToolbarConfigs = exports.MarkdownEditorView = exports.useMarkdownEditor = exports.useMarkdownEditorContext = exports.MarkdownEditorProvider = void 0;
+const tslib_1 = require("tslib");
+var context_1 = require("./context");
+Object.defineProperty(exports, "MarkdownEditorProvider", { enumerable: true, get: function () { return context_1.MarkdownEditorProvider; } });
+Object.defineProperty(exports, "useMarkdownEditorContext", { enumerable: true, get: function () { return context_1.useMarkdownEditorContext; } });
+var useMarkdownEditor_1 = require("./useMarkdownEditor");
+Object.defineProperty(exports, "useMarkdownEditor", { enumerable: true, get: function () { return useMarkdownEditor_1.useMarkdownEditor; } });
+var MarkdownEditorView_1 = require("./MarkdownEditorView");
+Object.defineProperty(exports, "MarkdownEditorView", { enumerable: true, get: function () { return MarkdownEditorView_1.MarkdownEditorView; } });
+// For project that do not support star export (export * as something from '...')
+const markupToolbarConfigs = tslib_1.__importStar(require("./config/markup"));
+exports.markupToolbarConfigs = markupToolbarConfigs;
+const wysiwygToolbarConfigs = tslib_1.__importStar(require("./config/wysiwyg"));
+exports.wysiwygToolbarConfigs = wysiwygToolbarConfigs;

package/build/cjs/bundle/settings/MarkdownHints/MarkdownHints.css

@@ -0,0 +1,24 @@
+.g-md-markdown-hints {
+  min-width: 210px;
+  line-height: var(--g-text-code-1-line-height);
+}
+.g-md-markdown-hints__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+}
+.g-md-markdown-hints__title {
+  font-weight: 500;
+}
+.g-md-markdown-hints__hint {
+  white-space: nowrap;
+  color: var(--g-color-text-complementary);
+}
+.g-md-markdown-hints__title, .g-md-markdown-hints__hint {
+  flex: 1;
+  text-align: left;
+}
+.g-md-markdown-hints__docs-link {
+  display: inline-block;
+  margin-top: 8px;
+}

package/build/cjs/bundle/settings/MarkdownHints/MarkdownHints.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MarkdownHints: React.NamedExoticComponent<object>;

package/build/cjs/bundle/settings/MarkdownHints/MarkdownHints.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownHints = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const md_hints_1 = require(".././../../i18n/md-hints");
+const classname_1 = require("../../../classname");
+const b = (0, classname_1.cn)('markdown-hints');
+const YFM_DOCS_HREF = 'https://ydocs.tech';
+exports.MarkdownHints = react_1.default.memo(function MarkdownHints() {
+    const hints = [
+        { title: (0, md_hints_1.i18n)('header_title'), hint: (0, md_hints_1.i18n)('header_hint') },
+        { title: (0, md_hints_1.i18n)('italic_title'), hint: (0, md_hints_1.i18n)('italic_hint') },
+        { title: (0, md_hints_1.i18n)('bold_title'), hint: (0, md_hints_1.i18n)('bold_hint') },
+        { title: (0, md_hints_1.i18n)('strikethrough_title'), hint: (0, md_hints_1.i18n)('strikethrough_hint') },
+        { title: (0, md_hints_1.i18n)('blockquote_title'), hint: (0, md_hints_1.i18n)('blockquote_hint') },
+        { title: (0, md_hints_1.i18n)('code_title'), hint: (0, md_hints_1.i18n)('code_hint') },
+        { title: (0, md_hints_1.i18n)('link_title'), hint: (0, md_hints_1.i18n)('link_hint') },
+        { title: (0, md_hints_1.i18n)('image_title'), hint: (0, md_hints_1.i18n)('image_hint') },
+        { title: (0, md_hints_1.i18n)('list_title'), hint: (0, md_hints_1.i18n)('list_hint') },
+        { title: (0, md_hints_1.i18n)('numbered-list_title'), hint: (0, md_hints_1.i18n)('numbered-list_hint') },
+    ];
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('grid') }, hints.map((hint, index) => (react_1.default.createElement(react_1.default.Fragment, { key: `md-hint-${index}` },
+            react_1.default.createElement("span", { className: b('title') }, hint.title),
+            react_1.default.createElement("span", { className: b('hint') }, hint.hint))))),
+        react_1.default.createElement(uikit_1.Link, { href: YFM_DOCS_HREF, target: "_blank", className: b('docs-link') }, (0, md_hints_1.i18n)('documentation'))));
+});
+exports.MarkdownHints.displayName = 'MarkdownHints';

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

@@ -0,0 +1 @@
+export * from './MarkdownHints';

package/build/cjs/bundle/settings/MarkdownHints/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./MarkdownHints"), exports);

package/build/cjs/bundle/settings/index.css

@@ -0,0 +1,44 @@
+.g-md-editor-settings {
+  display: flex;
+  flex-wrap: nowrap;
+}
+.g-md-editor-settings__mode-button {
+  margin-right: 1px;
+}
+.g-md-editor-settings__preview-button {
+  margin: 0 2px;
+}
+.g-md-editor-settings__separator {
+  z-index: 0;
+  margin: 6px 4px;
+  border-left: 1px solid var(--g-color-line-generic);
+}
+
+.g-md-settings-content {
+  width: 300px;
+}
+.g-md-settings-content__mode-help {
+  float: right;
+}
+.g-md-settings-content__separator {
+  border-bottom: 1px solid var(--g-color-line-generic);
+}
+.g-md-settings-content__toolbar, .g-md-settings-content__split-mode {
+  padding: 8px 16px 12px;
+}
+.g-md-settings-content__toolbar-hint {
+  margin-top: 3px;
+  padding-left: 19px;
+  color: var(--g-color-text-secondary);
+}
+.g-md-settings-content__version {
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  opacity: 0.03;
+  transform: translateX(-50%);
+  font-family: var(--g-font-family-monospace);
+  font-size: var(--g-text-code-inline-1-font-size);
+  line-height: var(--g-text-code-inline-1-line-height);
+  font-weight: var(--g-text-code-font-weight);
+}

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

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

package/build/cjs/bundle/settings/index.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorSettings = void 0;
+const tslib_1 = require("tslib");
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("@gravity-ui/components");
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../classname");
+const bundle_1 = require("../../i18n/bundle");
+const WysiwygMode_1 = tslib_1.__importDefault(require("../../icons/WysiwygMode"));
+const lodash_1 = require("../../lodash");
+const hooks_1 = require("../../react-utils/hooks");
+const toolbar_1 = require("../../toolbar");
+const version_1 = require("../../version");
+const MarkdownHints_1 = require("./MarkdownHints");
+const placement = ['bottom-end', 'top-end'];
+const bSettings = (0, classname_1.cn)('editor-settings');
+const bContent = (0, classname_1.cn)('settings-content');
+exports.EditorSettings = react_1.default.memo(function EditorSettings(props) {
+    const { className, onShowPreviewChange, showPreview, renderPreviewButton } = props;
+    const chevronRef = react_1.default.useRef(null);
+    const [popupShown, , hidePopup, togglePopup] = (0, hooks_1.useBooleanState)(false);
+    return (react_1.default.createElement("div", { className: bSettings(null, [className]) },
+        renderPreviewButton && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(uikit_1.ActionTooltip, { openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, bundle_1.i18n)('preview_hint'), hotkey: "mod+shift+p" },
+                react_1.default.createElement(uikit_1.Button, { size: "m", view: "flat", pin: "round-round", className: bSettings('preview-button'), onClick: () => onShowPreviewChange === null || onShowPreviewChange === void 0 ? void 0 : onShowPreviewChange(!showPreview), selected: showPreview },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.Eye }))),
+            react_1.default.createElement("div", { className: bSettings('separator') }))),
+        react_1.default.createElement(uikit_1.Button, { size: "m", view: "flat", ref: chevronRef, pin: "round-round", onClick: togglePopup, className: bSettings('dropdown-button') },
+            react_1.default.createElement(uikit_1.Icon, { data: icons_1.Gear })),
+        react_1.default.createElement(uikit_1.Popup, { open: popupShown, anchorRef: chevronRef, placement: placement, onClose: hidePopup },
+            react_1.default.createElement(SettingsContent, Object.assign({}, props, { className: bSettings('content') })))));
+});
+const mdHelpPlacement = ['bottom', 'bottom-end', 'right-start', 'right', 'left'];
+const SettingsContent = function SettingsContent({ mode, onModeChange, toolbarVisibility, onToolbarVisibilityChange, onSplitModeChange, splitMode = false, splitModeEnabled, className, showPreview, }) {
+    return (react_1.default.createElement("div", { className: bContent(null, [className]) },
+        react_1.default.createElement(uikit_1.Menu, { size: "l", className: bContent('mode') },
+            react_1.default.createElement(uikit_1.Menu.Item, { active: mode === 'wysiwyg', onClick: () => onModeChange('wysiwyg'), icon: react_1.default.createElement(uikit_1.Icon, { data: WysiwygMode_1.default }) }, (0, bundle_1.i18n)('settings_wysiwyg')),
+            react_1.default.createElement(uikit_1.Menu.Item, { active: mode === 'markup', onClick: () => onModeChange('markup'), icon: react_1.default.createElement(uikit_1.Icon, { data: icons_1.LogoMarkdown }) },
+                (0, bundle_1.i18n)('settings_markup'),
+                react_1.default.createElement(components_1.HelpPopover, { content: react_1.default.createElement("div", { onClick: (e) => {
+                            // stop clicks propagation
+                            // because otherwise click in MarkdownHints handled as click on MenuItem
+                            e.stopPropagation();
+                        } },
+                        react_1.default.createElement(MarkdownHints_1.MarkdownHints, null)), placement: mdHelpPlacement, className: bContent('mode-help') }))),
+        react_1.default.createElement("div", { className: bContent('separator') }),
+        !showPreview && (react_1.default.createElement("div", { className: bContent('toolbar') },
+            react_1.default.createElement(uikit_1.Checkbox, { size: "m", checked: toolbarVisibility, onUpdate: onToolbarVisibilityChange }, (0, bundle_1.i18n)('settings_menubar')),
+            react_1.default.createElement("div", { className: bContent('toolbar-hint') }, (0, bundle_1.i18n)('settings_hint')))),
+        splitMode && (react_1.default.createElement("div", { className: bContent('split-mode') },
+            react_1.default.createElement(uikit_1.Checkbox, { size: "m", disabled: mode !== 'markup', checked: splitModeEnabled, onUpdate: onSplitModeChange !== null && onSplitModeChange !== void 0 ? onSplitModeChange : lodash_1.noop }, (0, bundle_1.i18n)('settings_split-mode')),
+            react_1.default.createElement("div", { className: bContent('toolbar-hint') }, (0, bundle_1.i18n)('settings_split-mode-hint')))),
+        react_1.default.createElement("span", { className: bContent('version') }, version_1.VERSION)));
+};

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

@@ -0,0 +1,15 @@
+import type { ClassNameList } from '@bem-react/classname';
+declare type StickyToolbarParams = {
+    withSettings?: boolean;
+    stickyActive?: boolean;
+    isSticky?: boolean;
+};
+declare type StickySettingsParams = {
+    withToolbar?: boolean;
+    stickyActive?: boolean;
+};
+export declare const stickyCn: {
+    toolbar: ({ withSettings, stickyActive, isSticky }: StickyToolbarParams, mix?: ClassNameList) => string;
+    settings: ({ withToolbar, stickyActive }: StickySettingsParams, mix?: ClassNameList) => string;
+};
+export {};

package/build/cjs/bundle/sticky/index.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stickyCn = void 0;
+const classname_1 = require("../../classname");
+const b = (0, classname_1.cn)('editor-sticky');
+exports.stickyCn = {
+    toolbar: ({ withSettings, stickyActive, isSticky }, mix) => {
+        const mods = {
+            part: withSettings ? 'left' : false,
+            'sticky-active': stickyActive,
+            sticky: isSticky,
+        };
+        return b(mods, mix);
+    },
+    settings: ({ withToolbar, stickyActive }, mix) => {
+        const mods = {
+            part: withToolbar ? 'right' : false,
+            'sticky-active': stickyActive,
+            clear: !withToolbar,
+            sticky: true,
+        };
+        return b(mods, mix);
+    },
+};

package/build/cjs/bundle/sticky/sticky.css

@@ -0,0 +1,32 @@
+.g-md-editor-sticky {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr;
+}
+.g-md-editor-sticky_sticky {
+  position: sticky;
+  top: calc(var(--g-md-toolbar-sticky-offset, 0px) + 8px);
+}
+.g-md-editor-sticky_sticky-active:not(.g-md-editor-sticky_clear) {
+  z-index: 2000;
+}
+.g-md-editor-sticky_sticky-active:not(.g-md-editor-sticky_clear)::before {
+  position: absolute;
+  inset: -4px;
+  content: "";
+  border: 1px solid var(--g-color-line-generic-solid);
+  border-radius: 4px;
+  background-color: var(--g-color-base-background);
+}
+.g-md-editor-sticky_part_left:not(.g-md-editor-sticky_clear).g-md-editor-sticky_sticky::before {
+  right: 0;
+  border-right: none;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.g-md-editor-sticky_part_right:not(.g-md-editor-sticky_clear).g-md-editor-sticky_sticky::before {
+  left: 0;
+  border-left: none;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.css

@@ -0,0 +1,11 @@
+.g-md-toolbar-button-with-popup-menu {
+  --g-button-icon-offset: 0px;
+  --g-button-padding: 2px;
+  width: 42px;
+}
+.g-md-toolbar-button-with-popup-menu__menu-group .g-menu__group-label {
+  color: var(--g-color-text-hint);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+}

package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IconProps } from '@gravity-ui/uikit';
+import { Action, ActionStorage } from '../../core';
+import { ToolbarBaseProps, ToolbarIconData } from '../../toolbar';
+export declare type MenuItem = {
+    id: string;
+    action: Action;
+    icon: IconProps['data'];
+    text: string;
+    iconSize?: IconProps['size'];
+    iconClassname?: string;
+    group?: string;
+    ignoreActive?: boolean;
+};
+export declare type ToolbarButtonWithPopupMenuProps = Omit<ToolbarBaseProps<ActionStorage> & {
+    icon: ToolbarIconData;
+    title: string | (() => string);
+    menuItems: MenuItem[];
+}, 'editor'>;
+export declare const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps>;

package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarButtonWithPopupMenu = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const icons_1 = require("@gravity-ui/icons");
+const uikit_1 = require("@gravity-ui/uikit");
+const classname_1 = require("../../classname");
+const lodash_1 = require("../../lodash");
+const hooks_1 = require("../../react-utils/hooks");
+const toolbar_1 = require("../../toolbar");
+const b = (0, classname_1.cn)('toolbar-button-with-popup-menu');
+const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, title, menuItems, }) => {
+    const buttonRef = react_1.default.useRef(null);
+    const [open, , hide, toggleOpen] = (0, hooks_1.useBooleanState)(false);
+    const groups = react_1.default.useMemo(() => (0, lodash_1.groupBy)(menuItems.map((i) => (Object.assign(Object.assign({}, i), { group: i.group || '' }))), 'group'), [menuItems, lodash_1.groupBy]);
+    const someActive = menuItems.some((item) => !item.ignoreActive && item.action.isActive() === true);
+    const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);
+    const popupOpen = everyDisabled ? false : open;
+    const shouldForceHide = open && !popupOpen;
+    react_1.default.useEffect(() => {
+        if (shouldForceHide) {
+            hide();
+        }
+    }, [hide, shouldForceHide]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(uikit_1.ActionTooltip, { disabled: popupOpen, openDelay: toolbar_1.ToolbarTooltipDelay.Open, closeDelay: toolbar_1.ToolbarTooltipDelay.Close, title: (0, lodash_1.isFunction)(title) ? title() : title },
+            react_1.default.createElement(uikit_1.Button, { size: "m", ref: buttonRef, view: someActive || popupOpen ? 'normal' : 'flat', selected: someActive, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen },
+                react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: icon.size }),
+                '',
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown }))),
+        react_1.default.createElement(uikit_1.Popup, { anchorRef: buttonRef, open: popupOpen, onClose: hide },
+            react_1.default.createElement(uikit_1.Menu, { size: "l" }, Object.entries(groups).map(([label, items], key) => {
+                return (react_1.default.createElement(uikit_1.Menu.Group, { label: label, key: key, className: b('menu-group') }, items.map(({ id, icon, iconSize = 16, action, text, iconClassname }) => (react_1.default.createElement(uikit_1.Menu.Item, { key: id, icon: react_1.default.createElement(uikit_1.Icon, { data: icon, size: iconSize, className: iconClassname }), active: action.isActive(), disabled: !action.isEnable(), onClick: () => {
+                        hide();
+                        focus();
+                        action.run();
+                        onClick === null || onClick === void 0 ? void 0 : onClick(id);
+                    }, extraProps: { 'aria-label': text } }, text)))));
+            })))));
+};
+exports.ToolbarButtonWithPopupMenu = ToolbarButtonWithPopupMenu;