@gravity-ui/markdown-editor 14.2.2 → 14.3.0

package/build/cjs/bundle/MarkupEditorView.css

@@ -7,12 +7,14 @@
 .g-md-markup-editor__toolbar,
 .g-md-markup-preview__toolbar {
   flex-shrink: 0;
+  padding: var(--g-md-toolbar-padding);
 }
 .g-md-markup-editor__editor,
 .g-md-markup-preview__editor {
   flex-basis: 100%;
   min-height: 36px;
   max-height: 100%;
+  padding: var(--g-md-editor-padding);
   cursor: text;
 }
 .g-md-markup-editor__editor_toolbar-visible,

package/build/cjs/bundle/WysiwygEditorView.css

@@ -4,10 +4,12 @@
 }
 .g-md-wysiwyg-editor__toolbar {
   flex-shrink: 0;
+  padding: var(--g-md-toolbar-padding);
 }
 .g-md-wysiwyg-editor__editor {
   overflow-y: auto;
   flex-grow: 1;
+  padding: var(--g-md-editor-padding);
 }
 .g-root_theme_dark .g-md-wysiwyg-editor__editor .pm-iframe-container {
   background-color: var(--g-color-base-light);

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

@@ -41,6 +41,7 @@ export declare const mFilePopupData: MToolbarButtonPopupData;
 /** prepared markup toolbar config */
 export declare const mToolbarConfig: MToolbarData;
 export declare const mHruleItemData: MToolbarSingleItemData;
+export declare const mEmojiItemData: MToolbarSingleItemData;
 export declare const mTabsItemData: MToolbarSingleItemData;
 export declare const mHiddenData: MToolbarSingleItemData[];
 export declare const mToolbarConfigByPreset: Record<MarkdownEditorPreset, MToolbarData>;

package/build/cjs/bundle/config/markup.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mHiddenDataByPreset = exports.mToolbarConfigByPreset = exports.mHiddenData = exports.mTabsItemData = exports.mHruleItemData = exports.mToolbarConfig = exports.mFilePopupData = exports.mImagePopupData = exports.mYfmHtmlBlockButton = exports.mMermaidButton = exports.mMathListItem = exports.mMathListConfig = exports.mCodeListConfig = exports.mCodeblockItemData = exports.mTableButton = exports.mCutButton = exports.mQuoteButton = exports.mNoteButton = exports.mLinkButton = exports.mListMoveListConfig = exports.mCheckboxButton = exports.mListsListConfig = exports.mHeadingListConfig = exports.mBiusGroupConfig = exports.mMarkedItemData = exports.mMonospaceItemData = exports.mStrikethroughItemData = exports.mUnderlineItemData = exports.mItalicItemData = exports.mBoldItemData = exports.mHistoryGroupConfig = void 0;
+exports.mHiddenDataByPreset = exports.mToolbarConfigByPreset = exports.mHiddenData = exports.mTabsItemData = exports.mEmojiItemData = exports.mHruleItemData = exports.mToolbarConfig = exports.mFilePopupData = exports.mImagePopupData = exports.mYfmHtmlBlockButton = exports.mMermaidButton = exports.mMathListItem = exports.mMathListConfig = exports.mCodeListConfig = exports.mCodeblockItemData = exports.mTableButton = exports.mCutButton = exports.mQuoteButton = exports.mNoteButton = exports.mLinkButton = exports.mListMoveListConfig = exports.mCheckboxButton = exports.mListsListConfig = exports.mHeadingListConfig = exports.mBiusGroupConfig = exports.mMarkedItemData = exports.mMonospaceItemData = exports.mStrikethroughItemData = exports.mUnderlineItemData = exports.mItalicItemData = exports.mBoldItemData = exports.mHistoryGroupConfig = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const menubar_1 = require("../../i18n/menubar");
@@ -13,8 +13,9 @@ const MToolbarImagePopup_1 = require("../toolbar/markup/MToolbarImagePopup");
 const action_names_1 = require("./action-names");
 const icons_1 = require("./icons");
 const noop = () => { };
-const isActiveFn = () => false;
-const isEnableFn = () => true;
+const inactive = () => false;
+const enable = () => true;
+const disable = () => false;
 exports.mHistoryGroupConfig = [
     {
         id: action_names_1.ActionName.undo,
@@ -23,7 +24,7 @@ exports.mHistoryGroupConfig = [
         icon: icons_1.icons.undo,
         hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Undo),
         exec: (e) => (0, commands_1.undo)(e.cm),
-        isActive: isActiveFn,
+        isActive: inactive,
         isEnable: (e) => (0, commands_1.undoDepth)(e.cm.state) > 0,
     },
     {
@@ -33,7 +34,7 @@ exports.mHistoryGroupConfig = [
         icon: icons_1.icons.redo,
         hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Redo),
         exec: (e) => (0, commands_1.redo)(e.cm),
-        isActive: isActiveFn,
+        isActive: inactive,
         isEnable: (e) => (0, commands_1.redoDepth)(e.cm.state) > 0,
     },
 ];
@@ -45,8 +46,8 @@ exports.mBoldItemData = {
     icon: icons_1.icons.bold,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Bold),
     exec: (e) => (0, commands_1.toggleBold)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mItalicItemData = {
     id: action_names_1.ActionName.italic,
@@ -55,8 +56,8 @@ exports.mItalicItemData = {
     icon: icons_1.icons.italic,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Italic),
     exec: (e) => (0, commands_1.toggleItalic)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mUnderlineItemData = {
     id: action_names_1.ActionName.underline,
@@ -65,8 +66,8 @@ exports.mUnderlineItemData = {
     icon: icons_1.icons.underline,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Underline),
     exec: (e) => (0, commands_1.toggleUnderline)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mStrikethroughItemData = {
     id: action_names_1.ActionName.strike,
@@ -75,8 +76,8 @@ exports.mStrikethroughItemData = {
     icon: icons_1.icons.strikethrough,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Strike),
     exec: (e) => (0, commands_1.toggleStrikethrough)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mMonospaceItemData = {
     id: action_names_1.ActionName.mono,
@@ -84,8 +85,8 @@ exports.mMonospaceItemData = {
     title: menubar_1.i18n.bind(null, 'mono'),
     icon: icons_1.icons.mono,
     exec: (e) => (0, commands_1.toggleMonospace)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mMarkedItemData = {
     id: action_names_1.ActionName.mark,
@@ -93,8 +94,8 @@ exports.mMarkedItemData = {
     title: menubar_1.i18n.bind(null, 'mark'),
     icon: icons_1.icons.mark,
     exec: (e) => (0, commands_1.toggleMarked)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mBiusGroupConfig = [
     exports.mBoldItemData,
@@ -106,8 +107,8 @@ exports.mBiusGroupConfig = [
         icon: icons_1.icons.underline,
         hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Underline),
         exec: (e) => (0, commands_1.toggleUnderline)(e.cm),
-        isActive: isActiveFn,
-        isEnable: isEnableFn,
+        isActive: inactive,
+        isEnable: enable,
     },
     {
         id: action_names_1.ActionName.strike,
@@ -116,8 +117,8 @@ exports.mBiusGroupConfig = [
         icon: icons_1.icons.strikethrough,
         hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Strike),
         exec: (e) => (0, commands_1.toggleStrikethrough)(e.cm),
-        isActive: isActiveFn,
-        isEnable: isEnableFn,
+        isActive: inactive,
+        isEnable: enable,
     },
     {
         id: action_names_1.ActionName.mono,
@@ -125,8 +126,8 @@ exports.mBiusGroupConfig = [
         title: menubar_1.i18n.bind(null, 'mono'),
         icon: icons_1.icons.mono,
         exec: (e) => (0, commands_1.toggleMonospace)(e.cm),
-        isActive: isActiveFn,
-        isEnable: isEnableFn,
+        isActive: inactive,
+        isEnable: enable,
     },
     {
         id: action_names_1.ActionName.mark,
@@ -134,8 +135,8 @@ exports.mBiusGroupConfig = [
         title: menubar_1.i18n.bind(null, 'mark'),
         icon: icons_1.icons.mark,
         exec: (e) => (0, commands_1.toggleMarked)(e.cm),
-        isActive: isActiveFn,
-        isEnable: isEnableFn,
+        isActive: inactive,
+        isEnable: enable,
     },
 ];
 exports.mHeadingListConfig = {
@@ -149,8 +150,8 @@ exports.mHeadingListConfig = {
             icon: icons_1.icons.h1,
             hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading1),
             exec: (e) => (0, commands_1.toH1)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: action_names_1.ActionName.heading2,
@@ -158,8 +159,8 @@ exports.mHeadingListConfig = {
             icon: icons_1.icons.h2,
             hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading2),
             exec: (e) => (0, commands_1.toH2)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: action_names_1.ActionName.heading3,
@@ -167,8 +168,8 @@ exports.mHeadingListConfig = {
             icon: icons_1.icons.h3,
             hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading3),
             exec: (e) => (0, commands_1.toH3)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: action_names_1.ActionName.heading4,
@@ -176,8 +177,8 @@ exports.mHeadingListConfig = {
             icon: icons_1.icons.h4,
             hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading4),
             exec: (e) => (0, commands_1.toH4)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: action_names_1.ActionName.heading5,
@@ -185,8 +186,8 @@ exports.mHeadingListConfig = {
             icon: icons_1.icons.h5,
             hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading5),
             exec: (e) => (0, commands_1.toH5)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: action_names_1.ActionName.heading6,
@@ -194,8 +195,8 @@ exports.mHeadingListConfig = {
             icon: icons_1.icons.h6,
             hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Heading6),
             exec: (e) => (0, commands_1.toH6)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
     ],
 };
@@ -209,16 +210,16 @@ exports.mListsListConfig = {
             title: menubar_1.i18n.bind(null, 'ulist'),
             icon: icons_1.icons.bulletList,
             exec: (e) => (0, commands_1.toBulletList)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: action_names_1.ActionName.orderedList,
             title: menubar_1.i18n.bind(null, 'olist'),
             icon: icons_1.icons.orderedList,
             exec: (e) => (0, commands_1.toOrderedList)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
     ],
 };
@@ -228,8 +229,8 @@ exports.mCheckboxButton = {
     title: menubar_1.i18n.bind(null, 'checkbox'),
     icon: icons_1.icons.checklist,
     exec: (e) => (0, commands_1.wrapToCheckbox)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mListMoveListConfig = {
     icon: icons_1.icons.lift,
@@ -241,16 +242,16 @@ exports.mListMoveListConfig = {
             title: menubar_1.i18n.bind(null, 'list__action_sink'),
             icon: icons_1.icons.sink,
             exec: (e) => (0, commands_1.sinkListItem)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: action_names_1.ActionName.liftListItem,
             title: menubar_1.i18n.bind(null, 'list__action_lift'),
             icon: icons_1.icons.lift,
             exec: (e) => (0, commands_1.liftListItem)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
     ],
 };
@@ -260,8 +261,8 @@ exports.mLinkButton = {
     icon: icons_1.icons.link,
     title: (0, menubar_1.i18n)('link'),
     exec: (e) => (0, commands_1.insertLink)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mNoteButton = {
     id: action_names_1.ActionName.yfm_note,
@@ -270,8 +271,8 @@ exports.mNoteButton = {
     icon: icons_1.icons.note,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Note),
     exec: (e) => (0, commands_1.wrapToYfmNote)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mQuoteButton = {
     id: action_names_1.ActionName.quote,
@@ -279,8 +280,8 @@ exports.mQuoteButton = {
     title: menubar_1.i18n.bind(null, 'quote'),
     icon: icons_1.icons.quote,
     exec: (e) => (0, commands_1.wrapToBlockquote)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mCutButton = {
     id: action_names_1.ActionName.yfm_cut,
@@ -289,8 +290,8 @@ exports.mCutButton = {
     icon: icons_1.icons.cut,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Cut),
     exec: (e) => (0, commands_1.wrapToYfmCut)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mTableButton = {
     id: action_names_1.ActionName.table,
@@ -298,8 +299,8 @@ exports.mTableButton = {
     title: menubar_1.i18n.bind(null, 'table'),
     icon: icons_1.icons.table,
     exec: (e) => (0, commands_1.insertYfmTable)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mCodeblockItemData = {
     id: action_names_1.ActionName.code_block,
@@ -307,8 +308,8 @@ exports.mCodeblockItemData = {
     icon: icons_1.icons.codeBlock,
     hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.CodeBlock),
     exec: (e) => (0, commands_1.wrapToCodeBlock)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mCodeListConfig = {
     icon: icons_1.icons.code,
@@ -321,8 +322,8 @@ exports.mCodeListConfig = {
             icon: icons_1.icons.code,
             hotkey: shortcuts_1.formatter.toView(shortcuts_1.Action.Code),
             exec: (e) => (0, commands_1.wrapToInlineCode)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         exports.mCodeblockItemData,
     ],
@@ -337,16 +338,16 @@ exports.mMathListConfig = {
             title: menubar_1.i18n.bind(null, 'math_inline'),
             icon: icons_1.icons.functionInline,
             exec: (e) => (0, commands_1.wrapToMathInline)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: action_names_1.ActionName.math_block,
             title: menubar_1.i18n.bind(null, 'math_block'),
             icon: icons_1.icons.functionBlock,
             exec: (e) => (0, commands_1.wrapToMathBlock)(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
     ],
 };
@@ -357,8 +358,8 @@ exports.mMermaidButton = {
     title: menubar_1.i18n.bind(null, 'mermaid'),
     icon: icons_1.icons.mermaid,
     exec: (e) => (0, commands_1.insertMermaidDiagram)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mYfmHtmlBlockButton = {
     id: action_names_1.ActionName.yfm_html_block,
@@ -366,8 +367,8 @@ exports.mYfmHtmlBlockButton = {
     title: menubar_1.i18n.bind(null, 'html'),
     icon: icons_1.icons.html,
     exec: (e) => (0, commands_1.insertYfmHtmlBlock)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 exports.mImagePopupData = {
     id: 'image',
@@ -375,8 +376,8 @@ exports.mImagePopupData = {
     icon: icons_1.icons.image,
     title: (0, menubar_1.i18n)('image'),
     exec: noop,
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
     renderPopup: (props) => react_1.default.createElement(MToolbarImagePopup_1.MToolbarImagePopup, Object.assign({}, props)),
 };
 exports.mFilePopupData = {
@@ -385,8 +386,8 @@ exports.mFilePopupData = {
     icon: icons_1.icons.file,
     title: (0, menubar_1.i18n)('file'),
     exec: noop,
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
     renderPopup: (props) => react_1.default.createElement(MToolbarFilePopup_1.MToolbarFilePopup, Object.assign({}, props)),
 };
 /** prepared markup toolbar config */
@@ -416,8 +417,8 @@ exports.mToolbarConfig = [
             icon: icons_1.icons.file,
             title: (0, menubar_1.i18n)('file'),
             exec: noop,
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
             renderPopup: (props) => react_1.default.createElement(MToolbarFilePopup_1.MToolbarFilePopup, Object.assign({}, props)),
         },
         exports.mTableButton,
@@ -430,8 +431,18 @@ exports.mHruleItemData = {
     icon: icons_1.icons.horizontalRule,
     type: types_1.ToolbarDataType.SingleButton,
     exec: (e) => (0, commands_1.insertHRule)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
+};
+exports.mEmojiItemData = {
+    id: 'emoji',
+    title: menubar_1.i18n.bind(null, 'emoji'),
+    icon: icons_1.icons.emoji,
+    type: types_1.ToolbarDataType.SingleButton,
+    exec: noop,
+    hintWhenDisabled: menubar_1.i18n.bind(null, 'emoji__hint'),
+    isActive: inactive,
+    isEnable: disable,
 };
 exports.mTabsItemData = {
     id: 'tabs',
@@ -439,10 +450,10 @@ exports.mTabsItemData = {
     icon: icons_1.icons.tabs,
     type: types_1.ToolbarDataType.SingleButton,
     exec: (e) => (0, commands_1.insertYfmTabs)(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
-exports.mHiddenData = [exports.mHruleItemData, exports.mTabsItemData];
+exports.mHiddenData = [exports.mHruleItemData, exports.mEmojiItemData, exports.mTabsItemData];
 exports.mToolbarConfigByPreset = {
     zero: [exports.mHistoryGroupConfig],
     commonmark: [
@@ -534,6 +545,7 @@ exports.mHiddenDataByPreset = {
         exports.mTableButton,
         exports.mImagePopupData,
         exports.mHruleItemData,
+        exports.mEmojiItemData,
         exports.mFilePopupData,
         exports.mTabsItemData,
     ],

package/build/cjs/bundle/config/wysiwyg.js

@@ -459,7 +459,7 @@ exports.wToggleHeadingFoldingItemData = {
     type: types_1.ToolbarDataType.SingleButton,
     icon: icons_1.icons.foldingHeading,
     title: () => (0, menubar_1.i18n)('folding-heading'),
-    hint: () => (0, menubar_1.i18n)('folding-heading_hint'),
+    hint: () => (0, menubar_1.i18n)('folding-heading__hint'),
     isActive: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isActive()) !== null && _b !== void 0 ? _b : false; },
     isEnable: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isEnable()) !== null && _b !== void 0 ? _b : false; },
     exec: (editor) => editor.actions.toggleHeadingFolding.run(),

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

@@ -9,10 +9,11 @@
 }
 .g-md-editor-sticky_sticky-active:not(.g-md-editor-sticky_clear) {
   z-index: 2000;
+  padding: var(--g-md-toolbar-sticky-padding);
 }
 .g-md-editor-sticky_sticky-active:not(.g-md-editor-sticky_clear)::before {
   position: absolute;
-  inset: -4px;
+  inset: var(--g-md-toolbar-sticky-inset, -4px);
   content: "";
   border: 1px solid var(--g-color-line-generic-solid);
   border-radius: 4px;

package/build/cjs/extensions/yfm/Video/VideoSpecs/index.js

@@ -53,6 +53,13 @@ const VideoSpecs = (builder, opts) => {
                 const service = node.attrs[const_1.VideoAttr.Service];
                 const videoId = node.attrs[const_1.VideoAttr.VideoID];
                 if (availableServices.has(service) || !videoId) {
+                    // TODO: remove in next major
+                    // see https://github.com/gravity-ui/markdown-editor/pull/478
+                    let src = '';
+                    if (typeof options.url === 'function')
+                        src = options.url(service, videoId, options);
+                    else if (typeof options.videoUrl === 'function')
+                        src = options.videoUrl(service, videoId, options);
                     return [
                         'div',
                         {
@@ -65,7 +72,7 @@ const VideoSpecs = (builder, opts) => {
                                 type: 'text/html',
                                 width: String(options[service].width),
                                 height: String(options[service].height),
-                                src: options.videoUrl(service, videoId, options),
+                                src: src,
                                 frameborder: '0',
                                 webkitallowfullscreen: '',
                                 mozallowfullscreen: '',

package/build/cjs/i18n/menubar/en.json

@@ -16,9 +16,10 @@
   "colorify__group_text": "Text",
   "cut": "Cut",
   "emoji": "Emoji",
+  "emoji__hint": "Emojis can be added in WYSIWYG or manually with markup",
   "file": "File",
   "folding-heading": "Collapsed section",
-  "folding-heading_hint": "The text under the heading can be collapsed or expanded",
+  "folding-heading__hint": "The text under the heading can be collapsed or expanded",
   "gpt": "GPT widget",
   "heading": "Heading",
   "heading1": "Heading 1",

package/build/cjs/i18n/menubar/index.d.ts

@@ -1,4 +1,4 @@
-export declare const i18n: <G extends "bold" | "code" | "colorify" | "mono" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "list" | "heading" | "note" | "file" | "checkbox" | "emoji" | "undo" | "redo" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "math_inline" | "math_block" | "tabs" | "mermaid" | "gpt" | "codeblock" | "math" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "folding-heading" | "folding-heading_hint" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "bold" | "code" | "colorify" | "mono" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "list" | "heading" | "note" | "file" | "checkbox" | "emoji" | "undo" | "redo" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "math_inline" | "math_block" | "tabs" | "mermaid" | "gpt" | "codeblock" | "math" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "emoji__hint" | "folding-heading" | "folding-heading__hint" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
     bold: string;
@@ -18,9 +18,10 @@ export declare const i18n: <G extends "bold" | "code" | "colorify" | "mono" | "l
     colorify__group_text: string;
     cut: string;
     emoji: string;
+    emoji__hint: string;
     file: string;
     "folding-heading": string;
-    "folding-heading_hint": string;
+    "folding-heading__hint": string;
     gpt: string;
     heading: string;
     heading1: string;

package/build/cjs/i18n/menubar/ru.json

@@ -16,9 +16,10 @@
   "colorify__group_text": "Текст",
   "cut": "Кат",
   "emoji": "Эмодзи",
+  "emoji__hint": "Эмодзи можно добавить в WYSIWYG режиме или вручную с помощью разметки",
   "file": "Файл",
   "folding-heading": "Свёрнутый раздел",
-  "folding-heading_hint": "Текст под заголовком можно свернуть или раскрыть",
+  "folding-heading__hint": "Текст под заголовком можно свернуть или раскрыть",
   "gpt": "GPT-виджет",
   "heading": "Заголовок",
   "heading1": "Заголовок 1",

package/build/cjs/version.js

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

package/build/esm/bundle/MarkupEditorView.css

@@ -7,12 +7,14 @@
 .g-md-markup-editor__toolbar,
 .g-md-markup-preview__toolbar {
   flex-shrink: 0;
+  padding: var(--g-md-toolbar-padding);
 }
 .g-md-markup-editor__editor,
 .g-md-markup-preview__editor {
   flex-basis: 100%;
   min-height: 36px;
   max-height: 100%;
+  padding: var(--g-md-editor-padding);
   cursor: text;
 }
 .g-md-markup-editor__editor_toolbar-visible,

package/build/esm/bundle/WysiwygEditorView.css

@@ -4,10 +4,12 @@
 }
 .g-md-wysiwyg-editor__toolbar {
   flex-shrink: 0;
+  padding: var(--g-md-toolbar-padding);
 }
 .g-md-wysiwyg-editor__editor {
   overflow-y: auto;
   flex-grow: 1;
+  padding: var(--g-md-editor-padding);
 }
 .g-root_theme_dark .g-md-wysiwyg-editor__editor .pm-iframe-container {
   background-color: var(--g-color-base-light);

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

@@ -41,6 +41,7 @@ export declare const mFilePopupData: MToolbarButtonPopupData;
 /** prepared markup toolbar config */
 export declare const mToolbarConfig: MToolbarData;
 export declare const mHruleItemData: MToolbarSingleItemData;
+export declare const mEmojiItemData: MToolbarSingleItemData;
 export declare const mTabsItemData: MToolbarSingleItemData;
 export declare const mHiddenData: MToolbarSingleItemData[];
 export declare const mToolbarConfigByPreset: Record<MarkdownEditorPreset, MToolbarData>;

package/build/esm/bundle/config/markup.js

@@ -9,8 +9,9 @@ import { MToolbarImagePopup } from '../toolbar/markup/MToolbarImagePopup';
 import { ActionName } from './action-names';
 import { icons } from './icons';
 const noop = () => { };
-const isActiveFn = () => false;
-const isEnableFn = () => true;
+const inactive = () => false;
+const enable = () => true;
+const disable = () => false;
 export const mHistoryGroupConfig = [
     {
         id: ActionName.undo,
@@ -19,7 +20,7 @@ export const mHistoryGroupConfig = [
         icon: icons.undo,
         hotkey: f.toView(A.Undo),
         exec: (e) => undo(e.cm),
-        isActive: isActiveFn,
+        isActive: inactive,
         isEnable: (e) => undoDepth(e.cm.state) > 0,
     },
     {
@@ -29,7 +30,7 @@ export const mHistoryGroupConfig = [
         icon: icons.redo,
         hotkey: f.toView(A.Redo),
         exec: (e) => redo(e.cm),
-        isActive: isActiveFn,
+        isActive: inactive,
         isEnable: (e) => redoDepth(e.cm.state) > 0,
     },
 ];
@@ -41,8 +42,8 @@ export const mBoldItemData = {
     icon: icons.bold,
     hotkey: f.toView(A.Bold),
     exec: (e) => toggleBold(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mItalicItemData = {
     id: ActionName.italic,
@@ -51,8 +52,8 @@ export const mItalicItemData = {
     icon: icons.italic,
     hotkey: f.toView(A.Italic),
     exec: (e) => toggleItalic(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mUnderlineItemData = {
     id: ActionName.underline,
@@ -61,8 +62,8 @@ export const mUnderlineItemData = {
     icon: icons.underline,
     hotkey: f.toView(A.Underline),
     exec: (e) => toggleUnderline(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mStrikethroughItemData = {
     id: ActionName.strike,
@@ -71,8 +72,8 @@ export const mStrikethroughItemData = {
     icon: icons.strikethrough,
     hotkey: f.toView(A.Strike),
     exec: (e) => toggleStrikethrough(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mMonospaceItemData = {
     id: ActionName.mono,
@@ -80,8 +81,8 @@ export const mMonospaceItemData = {
     title: i18n.bind(null, 'mono'),
     icon: icons.mono,
     exec: (e) => toggleMonospace(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mMarkedItemData = {
     id: ActionName.mark,
@@ -89,8 +90,8 @@ export const mMarkedItemData = {
     title: i18n.bind(null, 'mark'),
     icon: icons.mark,
     exec: (e) => toggleMarked(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mBiusGroupConfig = [
     mBoldItemData,
@@ -102,8 +103,8 @@ export const mBiusGroupConfig = [
         icon: icons.underline,
         hotkey: f.toView(A.Underline),
         exec: (e) => toggleUnderline(e.cm),
-        isActive: isActiveFn,
-        isEnable: isEnableFn,
+        isActive: inactive,
+        isEnable: enable,
     },
     {
         id: ActionName.strike,
@@ -112,8 +113,8 @@ export const mBiusGroupConfig = [
         icon: icons.strikethrough,
         hotkey: f.toView(A.Strike),
         exec: (e) => toggleStrikethrough(e.cm),
-        isActive: isActiveFn,
-        isEnable: isEnableFn,
+        isActive: inactive,
+        isEnable: enable,
     },
     {
         id: ActionName.mono,
@@ -121,8 +122,8 @@ export const mBiusGroupConfig = [
         title: i18n.bind(null, 'mono'),
         icon: icons.mono,
         exec: (e) => toggleMonospace(e.cm),
-        isActive: isActiveFn,
-        isEnable: isEnableFn,
+        isActive: inactive,
+        isEnable: enable,
     },
     {
         id: ActionName.mark,
@@ -130,8 +131,8 @@ export const mBiusGroupConfig = [
         title: i18n.bind(null, 'mark'),
         icon: icons.mark,
         exec: (e) => toggleMarked(e.cm),
-        isActive: isActiveFn,
-        isEnable: isEnableFn,
+        isActive: inactive,
+        isEnable: enable,
     },
 ];
 export const mHeadingListConfig = {
@@ -145,8 +146,8 @@ export const mHeadingListConfig = {
             icon: icons.h1,
             hotkey: f.toView(A.Heading1),
             exec: (e) => toH1(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: ActionName.heading2,
@@ -154,8 +155,8 @@ export const mHeadingListConfig = {
             icon: icons.h2,
             hotkey: f.toView(A.Heading2),
             exec: (e) => toH2(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: ActionName.heading3,
@@ -163,8 +164,8 @@ export const mHeadingListConfig = {
             icon: icons.h3,
             hotkey: f.toView(A.Heading3),
             exec: (e) => toH3(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: ActionName.heading4,
@@ -172,8 +173,8 @@ export const mHeadingListConfig = {
             icon: icons.h4,
             hotkey: f.toView(A.Heading4),
             exec: (e) => toH4(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: ActionName.heading5,
@@ -181,8 +182,8 @@ export const mHeadingListConfig = {
             icon: icons.h5,
             hotkey: f.toView(A.Heading5),
             exec: (e) => toH5(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: ActionName.heading6,
@@ -190,8 +191,8 @@ export const mHeadingListConfig = {
             icon: icons.h6,
             hotkey: f.toView(A.Heading6),
             exec: (e) => toH6(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
     ],
 };
@@ -205,16 +206,16 @@ export const mListsListConfig = {
             title: i18n.bind(null, 'ulist'),
             icon: icons.bulletList,
             exec: (e) => toBulletList(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: ActionName.orderedList,
             title: i18n.bind(null, 'olist'),
             icon: icons.orderedList,
             exec: (e) => toOrderedList(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
     ],
 };
@@ -224,8 +225,8 @@ export const mCheckboxButton = {
     title: i18n.bind(null, 'checkbox'),
     icon: icons.checklist,
     exec: (e) => wrapToCheckbox(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mListMoveListConfig = {
     icon: icons.lift,
@@ -237,16 +238,16 @@ export const mListMoveListConfig = {
             title: i18n.bind(null, 'list__action_sink'),
             icon: icons.sink,
             exec: (e) => sinkListItem(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: ActionName.liftListItem,
             title: i18n.bind(null, 'list__action_lift'),
             icon: icons.lift,
             exec: (e) => liftListItem(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
     ],
 };
@@ -256,8 +257,8 @@ export const mLinkButton = {
     icon: icons.link,
     title: i18n('link'),
     exec: (e) => insertLink(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mNoteButton = {
     id: ActionName.yfm_note,
@@ -266,8 +267,8 @@ export const mNoteButton = {
     icon: icons.note,
     hotkey: f.toView(A.Note),
     exec: (e) => wrapToYfmNote(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mQuoteButton = {
     id: ActionName.quote,
@@ -275,8 +276,8 @@ export const mQuoteButton = {
     title: i18n.bind(null, 'quote'),
     icon: icons.quote,
     exec: (e) => wrapToBlockquote(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mCutButton = {
     id: ActionName.yfm_cut,
@@ -285,8 +286,8 @@ export const mCutButton = {
     icon: icons.cut,
     hotkey: f.toView(A.Cut),
     exec: (e) => wrapToYfmCut(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mTableButton = {
     id: ActionName.table,
@@ -294,8 +295,8 @@ export const mTableButton = {
     title: i18n.bind(null, 'table'),
     icon: icons.table,
     exec: (e) => insertYfmTable(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mCodeblockItemData = {
     id: ActionName.code_block,
@@ -303,8 +304,8 @@ export const mCodeblockItemData = {
     icon: icons.codeBlock,
     hotkey: f.toView(A.CodeBlock),
     exec: (e) => wrapToCodeBlock(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mCodeListConfig = {
     icon: icons.code,
@@ -317,8 +318,8 @@ export const mCodeListConfig = {
             icon: icons.code,
             hotkey: f.toView(A.Code),
             exec: (e) => wrapToInlineCode(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         mCodeblockItemData,
     ],
@@ -333,16 +334,16 @@ export const mMathListConfig = {
             title: i18n.bind(null, 'math_inline'),
             icon: icons.functionInline,
             exec: (e) => wrapToMathInline(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
         {
             id: ActionName.math_block,
             title: i18n.bind(null, 'math_block'),
             icon: icons.functionBlock,
             exec: (e) => wrapToMathBlock(e.cm),
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
         },
     ],
 };
@@ -353,8 +354,8 @@ export const mMermaidButton = {
     title: i18n.bind(null, 'mermaid'),
     icon: icons.mermaid,
     exec: (e) => insertMermaidDiagram(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mYfmHtmlBlockButton = {
     id: ActionName.yfm_html_block,
@@ -362,8 +363,8 @@ export const mYfmHtmlBlockButton = {
     title: i18n.bind(null, 'html'),
     icon: icons.html,
     exec: (e) => insertYfmHtmlBlock(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
 export const mImagePopupData = {
     id: 'image',
@@ -371,8 +372,8 @@ export const mImagePopupData = {
     icon: icons.image,
     title: i18n('image'),
     exec: noop,
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
     renderPopup: (props) => React.createElement(MToolbarImagePopup, Object.assign({}, props)),
 };
 export const mFilePopupData = {
@@ -381,8 +382,8 @@ export const mFilePopupData = {
     icon: icons.file,
     title: i18n('file'),
     exec: noop,
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
     renderPopup: (props) => React.createElement(MToolbarFilePopup, Object.assign({}, props)),
 };
 /** prepared markup toolbar config */
@@ -412,8 +413,8 @@ export const mToolbarConfig = [
             icon: icons.file,
             title: i18n('file'),
             exec: noop,
-            isActive: isActiveFn,
-            isEnable: isEnableFn,
+            isActive: inactive,
+            isEnable: enable,
             renderPopup: (props) => React.createElement(MToolbarFilePopup, Object.assign({}, props)),
         },
         mTableButton,
@@ -426,8 +427,18 @@ export const mHruleItemData = {
     icon: icons.horizontalRule,
     type: ToolbarDataType.SingleButton,
     exec: (e) => insertHRule(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
+};
+export const mEmojiItemData = {
+    id: 'emoji',
+    title: i18n.bind(null, 'emoji'),
+    icon: icons.emoji,
+    type: ToolbarDataType.SingleButton,
+    exec: noop,
+    hintWhenDisabled: i18n.bind(null, 'emoji__hint'),
+    isActive: inactive,
+    isEnable: disable,
 };
 export const mTabsItemData = {
     id: 'tabs',
@@ -435,10 +446,10 @@ export const mTabsItemData = {
     icon: icons.tabs,
     type: ToolbarDataType.SingleButton,
     exec: (e) => insertYfmTabs(e.cm),
-    isActive: isActiveFn,
-    isEnable: isEnableFn,
+    isActive: inactive,
+    isEnable: enable,
 };
-export const mHiddenData = [mHruleItemData, mTabsItemData];
+export const mHiddenData = [mHruleItemData, mEmojiItemData, mTabsItemData];
 export const mToolbarConfigByPreset = {
     zero: [mHistoryGroupConfig],
     commonmark: [
@@ -530,6 +541,7 @@ export const mHiddenDataByPreset = {
         mTableButton,
         mImagePopupData,
         mHruleItemData,
+        mEmojiItemData,
         mFilePopupData,
         mTabsItemData,
     ],

package/build/esm/bundle/config/wysiwyg.js

@@ -456,7 +456,7 @@ export const wToggleHeadingFoldingItemData = {
     type: ToolbarDataType.SingleButton,
     icon: icons.foldingHeading,
     title: () => i18n('folding-heading'),
-    hint: () => i18n('folding-heading_hint'),
+    hint: () => i18n('folding-heading__hint'),
     isActive: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isActive()) !== null && _b !== void 0 ? _b : false; },
     isEnable: (editor) => { var _a, _b; return (_b = (_a = editor.actions.toggleHeadingFolding) === null || _a === void 0 ? void 0 : _a.isEnable()) !== null && _b !== void 0 ? _b : false; },
     exec: (editor) => editor.actions.toggleHeadingFolding.run(),

package/build/esm/bundle/sticky/sticky.css

@@ -9,10 +9,11 @@
 }
 .g-md-editor-sticky_sticky-active:not(.g-md-editor-sticky_clear) {
   z-index: 2000;
+  padding: var(--g-md-toolbar-sticky-padding);
 }
 .g-md-editor-sticky_sticky-active:not(.g-md-editor-sticky_clear)::before {
   position: absolute;
-  inset: -4px;
+  inset: var(--g-md-toolbar-sticky-inset, -4px);
   content: "";
   border: 1px solid var(--g-color-line-generic-solid);
   border-radius: 4px;

package/build/esm/extensions/yfm/Video/VideoSpecs/index.js

@@ -47,6 +47,13 @@ export const VideoSpecs = (builder, opts) => {
                 const service = node.attrs[VideoAttr.Service];
                 const videoId = node.attrs[VideoAttr.VideoID];
                 if (availableServices.has(service) || !videoId) {
+                    // TODO: remove in next major
+                    // see https://github.com/gravity-ui/markdown-editor/pull/478
+                    let src = '';
+                    if (typeof options.url === 'function')
+                        src = options.url(service, videoId, options);
+                    else if (typeof options.videoUrl === 'function')
+                        src = options.videoUrl(service, videoId, options);
                     return [
                         'div',
                         {
@@ -59,7 +66,7 @@ export const VideoSpecs = (builder, opts) => {
                                 type: 'text/html',
                                 width: String(options[service].width),
                                 height: String(options[service].height),
-                                src: options.videoUrl(service, videoId, options),
+                                src: src,
                                 frameborder: '0',
                                 webkitallowfullscreen: '',
                                 mozallowfullscreen: '',

package/build/esm/i18n/menubar/en.json

@@ -16,9 +16,10 @@
   "colorify__group_text": "Text",
   "cut": "Cut",
   "emoji": "Emoji",
+  "emoji__hint": "Emojis can be added in WYSIWYG or manually with markup",
   "file": "File",
   "folding-heading": "Collapsed section",
-  "folding-heading_hint": "The text under the heading can be collapsed or expanded",
+  "folding-heading__hint": "The text under the heading can be collapsed or expanded",
   "gpt": "GPT widget",
   "heading": "Heading",
   "heading1": "Heading 1",

package/build/esm/i18n/menubar/index.d.ts

@@ -1,4 +1,4 @@
-export declare const i18n: <G extends "bold" | "code" | "colorify" | "mono" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "list" | "heading" | "note" | "file" | "checkbox" | "emoji" | "undo" | "redo" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "math_inline" | "math_block" | "tabs" | "mermaid" | "gpt" | "codeblock" | "math" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "folding-heading" | "folding-heading_hint" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
+export declare const i18n: <G extends "bold" | "code" | "colorify" | "mono" | "link" | "italic" | "strike" | "underline" | "mark" | "quote" | "text" | "html" | "cut" | "table" | "image" | "code_inline" | "list" | "heading" | "note" | "file" | "checkbox" | "emoji" | "undo" | "redo" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "math_inline" | "math_block" | "tabs" | "mermaid" | "gpt" | "codeblock" | "math" | "colorify__color_blue" | "colorify__color_default" | "colorify__color_gray" | "colorify__color_green" | "colorify__color_orange" | "colorify__color_red" | "colorify__color_violet" | "colorify__color_yellow" | "colorify__group_text" | "emoji__hint" | "folding-heading" | "folding-heading__hint" | "hrule" | "list__action_lift" | "list__action_sink" | "list_action_disabled" | "more_action" | "olist" | "ulist", S extends string>(key: G | (string extends S ? S : never), params?: {
     [key: string]: any;
 } | undefined) => S extends G ? {
     bold: string;
@@ -18,9 +18,10 @@ export declare const i18n: <G extends "bold" | "code" | "colorify" | "mono" | "l
     colorify__group_text: string;
     cut: string;
     emoji: string;
+    emoji__hint: string;
     file: string;
     "folding-heading": string;
-    "folding-heading_hint": string;
+    "folding-heading__hint": string;
     gpt: string;
     heading: string;
     heading1: string;

package/build/esm/i18n/menubar/ru.json

@@ -16,9 +16,10 @@
   "colorify__group_text": "Текст",
   "cut": "Кат",
   "emoji": "Эмодзи",
+  "emoji__hint": "Эмодзи можно добавить в WYSIWYG режиме или вручную с помощью разметки",
   "file": "Файл",
   "folding-heading": "Свёрнутый раздел",
-  "folding-heading_hint": "Текст под заголовком можно свернуть или раскрыть",
+  "folding-heading__hint": "Текст под заголовком можно свернуть или раскрыть",
   "gpt": "GPT-виджет",
   "heading": "Заголовок",
   "heading1": "Заголовок 1",

package/build/esm/version.js

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

package/build/styles.css

@@ -58,12 +58,14 @@
 .g-md-markup-editor__toolbar,
 .g-md-markup-preview__toolbar {
   flex-shrink: 0;
+  padding: var(--g-md-toolbar-padding);
 }
 .g-md-markup-editor__editor,
 .g-md-markup-preview__editor {
   flex-basis: 100%;
   min-height: 36px;
   max-height: 100%;
+  padding: var(--g-md-editor-padding);
   cursor: text;
 }
 .g-md-markup-editor__editor_toolbar-visible,
@@ -161,10 +163,12 @@
 }
 .g-md-wysiwyg-editor__toolbar {
   flex-shrink: 0;
+  padding: var(--g-md-toolbar-padding);
 }
 .g-md-wysiwyg-editor__editor {
   overflow-y: auto;
   flex-grow: 1;
+  padding: var(--g-md-editor-padding);
 }
 .g-root_theme_dark .g-md-wysiwyg-editor__editor .pm-iframe-container {
   background-color: var(--g-color-base-light);
@@ -445,10 +449,11 @@
 }
 .g-md-editor-sticky_sticky-active:not(.g-md-editor-sticky_clear) {
   z-index: 2000;
+  padding: var(--g-md-toolbar-sticky-padding);
 }
 .g-md-editor-sticky_sticky-active:not(.g-md-editor-sticky_clear)::before {
   position: absolute;
-  inset: -4px;
+  inset: var(--g-md-toolbar-sticky-inset, -4px);
   content: "";
   border: 1px solid var(--g-color-line-generic-solid);
   border-radius: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "14.2.2",
+  "version": "14.3.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -19,8 +19,8 @@
     "clean": "gulp clean",
     "build": "gulp",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "storybook:start": "TS_NODE_PROJECT=.storybook/tsconfig.json storybook dev -p 8888 -c .storybook",
-    "storybook:build": "TS_NODE_PROJECT=.storybook/tsconfig.json storybook build -c .storybook -o storybook-static",
+    "storybook:start": "storybook dev -p 8888 -c .storybook",
+    "storybook:build": "storybook build -c .storybook -o storybook-static",
     "lint": "run-p -cs lint:*",
     "lint:js": "eslint \"{src,demo}/**/*.{js,jsx,ts,tsx}\"",
     "lint:styles": "stylelint \"{src,demo}/**/*.{css,scss}\"",