@gravity-ui/markdown-editor 14.5.0 → 14.6.0

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

@@ -34,7 +34,6 @@ export declare const wTabsItemData: WToolbarSingleItemData;
 export declare const wMathInlineItemData: WToolbarSingleItemData;
 export declare const wMathBlockItemData: WToolbarSingleItemData;
 export declare const wYfmHtmlBlockItemData: WToolbarSingleItemData;
-export declare const wGptItemData: WToolbarSingleItemData;
 export declare const wMermaidItemData: WToolbarSingleItemData;
 export declare const wCodeBlockItemData: WToolbarItemData;
 export declare const wHruleItemData: WToolbarItemData;

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

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wToolbarConfig = exports.wBiusGroupConfig = exports.wHistoryGroupConfig = exports.wHiddenData = exports.wCommandMenuConfig = exports.wMathListConfig = exports.wCodeListConfig = exports.wListMoveListConfig = exports.wListsListConfig = exports.wHeadingListConfig = exports.wLiftListItemData = exports.wSinkListItemData = exports.wOrderedListItemData = exports.wBulletListItemData = exports.wHeading6ItemData = exports.wHeading5ItemData = exports.wHeading4ItemData = exports.wHeading3ItemData = exports.wHeading2ItemData = exports.wHeading1ItemData = exports.wTextItemData = exports.wMathListItem = exports.textContextItemData = exports.wToggleHeadingFoldingItemData = exports.wEmojiItemData = exports.wHruleItemData = exports.wCodeBlockItemData = exports.wMermaidItemData = exports.wGptItemData = exports.wYfmHtmlBlockItemData = exports.wMathBlockItemData = exports.wMathInlineItemData = exports.wTabsItemData = exports.wFileItemData = exports.wImageItemData = exports.wCodeItemData = exports.wTableItemData = exports.wNoteItemData = exports.wCutItemData = exports.wQuoteItemData = exports.wLinkItemData = exports.wCheckboxItemData = exports.wMarkedItemData = exports.wMonospaceItemData = exports.wStrikethroughItemData = exports.wUnderlineItemData = exports.wItalicItemData = exports.wBoldItemData = exports.wRedoItemData = exports.wUndoItemData = void 0;
-exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = exports.wSelectionMenuConfig = void 0;
+exports.wSelectionMenuConfig = exports.wToolbarConfig = exports.wBiusGroupConfig = exports.wHistoryGroupConfig = exports.wHiddenData = exports.wCommandMenuConfig = exports.wMathListConfig = exports.wCodeListConfig = exports.wListMoveListConfig = exports.wListsListConfig = exports.wHeadingListConfig = exports.wLiftListItemData = exports.wSinkListItemData = exports.wOrderedListItemData = exports.wBulletListItemData = exports.wHeading6ItemData = exports.wHeading5ItemData = exports.wHeading4ItemData = exports.wHeading3ItemData = exports.wHeading2ItemData = exports.wHeading1ItemData = exports.wTextItemData = exports.wMathListItem = exports.textContextItemData = exports.wToggleHeadingFoldingItemData = exports.wEmojiItemData = exports.wHruleItemData = exports.wCodeBlockItemData = exports.wMermaidItemData = exports.wYfmHtmlBlockItemData = exports.wMathBlockItemData = exports.wMathInlineItemData = exports.wTabsItemData = exports.wFileItemData = exports.wImageItemData = exports.wCodeItemData = exports.wTableItemData = exports.wNoteItemData = exports.wCutItemData = exports.wQuoteItemData = exports.wLinkItemData = exports.wCheckboxItemData = exports.wMarkedItemData = exports.wMonospaceItemData = exports.wStrikethroughItemData = exports.wUnderlineItemData = exports.wItalicItemData = exports.wBoldItemData = exports.wRedoItemData = exports.wUndoItemData = void 0;
+exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = void 0;
 const extensions_1 = require("../../extensions");
-const constants_1 = require("../../extensions/additional/GPT/constants");
 const hints_1 = require("../../i18n/hints");
 const menubar_1 = require("../../i18n/menubar");
 const shortcuts_1 = require("../../shortcuts");
@@ -218,16 +217,6 @@ exports.wYfmHtmlBlockItemData = {
     isActive: (e) => e.actions.createYfmHtmlBlock.isActive(),
     isEnable: (e) => e.actions.createYfmHtmlBlock.isEnable(),
 };
-exports.wGptItemData = {
-    id: action_names_1.ActionName.gpt,
-    type: toolbar_1.ToolbarDataType.SingleButton,
-    title: menubar_1.i18n.bind(null, 'gpt'),
-    hotkey: constants_1.gptHotKeys.openGptKeyTooltip,
-    icon: icons_1.icons.gpt,
-    exec: (e) => e.actions.addGptWidget.run({}),
-    isActive: (e) => e.actions.addGptWidget.isActive(),
-    isEnable: (e) => e.actions.addGptWidget.isEnable(),
-};
 exports.wMermaidItemData = {
     id: action_names_1.ActionName.mermaid,
     type: toolbar_1.ToolbarDataType.SingleButton,

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

@@ -14,7 +14,11 @@ export declare type MenuItem = {
 };
 export declare type ToolbarButtonWithPopupMenuProps = Omit<ToolbarBaseProps<ActionStorage> & {
     icon: ToolbarIconData;
+    iconClassName?: string;
+    chevronIconClassName?: string;
     title: string | (() => string);
     menuItems: MenuItem[];
+    /** @default 'classic' */
+    _selectionType?: 'classic' | 'light';
 }, 'editor'>;
 export declare const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps>;

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

@@ -10,10 +10,10 @@ 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 ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
     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 groups = react_1.default.useMemo(() => (0, lodash_1.groupBy)(menuItems.map((i) => (Object.assign(Object.assign({}, i), { group: i.group || '' }))), 'group'), [menuItems]);
     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;
@@ -23,12 +23,18 @@ const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, title, me
             hide();
         }
     }, [hide, shouldForceHide]);
+    const [btnView, btnSelected] = _selectionType === 'light'
+        ? [
+            popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',
+            popupOpen && someActive,
+        ]
+        : [someActive || popupOpen ? 'normal' : 'flat', someActive];
     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.Button, { size: "m", ref: buttonRef, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen },
+                react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: icon.size, className: iconClassName }),
                 '',
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown }))),
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: chevronIconClassName }))),
         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: () => {

package/build/cjs/bundle/toolbar/custom/ToolbarColors.css

@@ -1,21 +1,63 @@
+.g-md-toolbar-colors__menu-icon_color_gray {
+  color: var(--yfm-colorify-gray);
+}
+.g-md-toolbar-colors__chevron-icon_color_gray {
+  color: var(--yfm-colorify-gray);
+}
 .g-md-toolbar-colors__item-icon_color_gray {
   color: var(--yfm-colorify-gray);
 }
+.g-md-toolbar-colors__menu-icon_color_yellow {
+  color: var(--yfm-colorify-yellow);
+}
+.g-md-toolbar-colors__chevron-icon_color_yellow {
+  color: var(--yfm-colorify-yellow);
+}
 .g-md-toolbar-colors__item-icon_color_yellow {
   color: var(--yfm-colorify-yellow);
 }
+.g-md-toolbar-colors__menu-icon_color_orange {
+  color: var(--yfm-colorify-orange);
+}
+.g-md-toolbar-colors__chevron-icon_color_orange {
+  color: var(--yfm-colorify-orange);
+}
 .g-md-toolbar-colors__item-icon_color_orange {
   color: var(--yfm-colorify-orange);
 }
+.g-md-toolbar-colors__menu-icon_color_red {
+  color: var(--yfm-colorify-red);
+}
+.g-md-toolbar-colors__chevron-icon_color_red {
+  color: var(--yfm-colorify-red);
+}
 .g-md-toolbar-colors__item-icon_color_red {
   color: var(--yfm-colorify-red);
 }
+.g-md-toolbar-colors__menu-icon_color_green {
+  color: var(--yfm-colorify-green);
+}
+.g-md-toolbar-colors__chevron-icon_color_green {
+  color: var(--yfm-colorify-green);
+}
 .g-md-toolbar-colors__item-icon_color_green {
   color: var(--yfm-colorify-green);
 }
+.g-md-toolbar-colors__menu-icon_color_blue {
+  color: var(--yfm-colorify-blue);
+}
+.g-md-toolbar-colors__chevron-icon_color_blue {
+  color: var(--yfm-colorify-blue);
+}
 .g-md-toolbar-colors__item-icon_color_blue {
   color: var(--yfm-colorify-blue);
 }
+.g-md-toolbar-colors__menu-icon_color_violet {
+  color: var(--yfm-colorify-violet);
+}
+.g-md-toolbar-colors__chevron-icon_color_violet {
+  color: var(--yfm-colorify-violet);
+}
 .g-md-toolbar-colors__item-icon_color_violet {
   color: var(--yfm-colorify-violet);
 }

package/build/cjs/bundle/toolbar/custom/ToolbarColors.js

@@ -62,6 +62,6 @@ const ToolbarColors = (props) => {
             },
         });
     }
-    return (react_1.default.createElement(ToolbarButtonWithPopupMenu_1.ToolbarButtonWithPopupMenu, Object.assign({}, props, { title: (0, menubar_1.i18n)('colorify'), menuItems: items, icon: textColorIcon })));
+    return (react_1.default.createElement(ToolbarButtonWithPopupMenu_1.ToolbarButtonWithPopupMenu, Object.assign({}, props, { title: (0, menubar_1.i18n)('colorify'), menuItems: items, icon: textColorIcon, _selectionType: "light", iconClassName: b('menu-icon', { color: currentColor }), chevronIconClassName: b('chevron-icon', { color: currentColor }) })));
 };
 exports.ToolbarColors = ToolbarColors;

package/build/cjs/extensions/additional/GPT/index.d.ts

@@ -1,3 +1,3 @@
-export * from './toolbar';
+export * from './wGptItemData';
 export * from './gptExtension/gptExtension';
 export * from './MarkupGpt';

package/build/cjs/extensions/additional/GPT/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./toolbar"), exports);
+tslib_1.__exportStar(require("./wGptItemData"), exports);
 tslib_1.__exportStar(require("./gptExtension/gptExtension"), exports);
 tslib_1.__exportStar(require("./MarkupGpt"), exports);

package/build/cjs/extensions/additional/GPT/{toolbar.d.ts → wGptItemData.d.ts}

@@ -1,3 +1,3 @@
 import { type WToolbarSingleItemData } from '../../../toolbar';
 export declare const cnGptButton: import("@bem-react/classname").ClassNameFormatter;
-export declare const wGptToolbarItem: WToolbarSingleItemData;
+export declare const wGptItemData: WToolbarSingleItemData;

package/build/cjs/extensions/additional/GPT/{toolbar.js → wGptItemData.js}

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wGptToolbarItem = exports.cnGptButton = void 0;
+exports.wGptItemData = exports.cnGptButton = void 0;
 const tslib_1 = require("tslib");
 const classname_1 = require("@bem-react/classname");
 const extension_1 = require("../../../i18n/gpt/extension");
@@ -8,7 +8,7 @@ const GPT_1 = tslib_1.__importDefault(require("../../../icons/GPT"));
 const toolbar_1 = require("../../../toolbar");
 const constants_1 = require("./constants");
 exports.cnGptButton = (0, classname_1.cn)('gpt-button');
-exports.wGptToolbarItem = {
+exports.wGptItemData = {
     type: toolbar_1.ToolbarDataType.SingleButton,
     id: 'gpt',
     title: () => `${(0, extension_1.i18n)('help-with-text')}`,

package/build/cjs/extensions/behavior/Cursor/gapcursor.js

@@ -27,6 +27,18 @@ const gapCursor = () => new prosemirror_state_1.Plugin({
         };
     },
     props: {
+        handleKeyPress(view) {
+            const { state, state: { selection: sel }, } = view;
+            if ((0, GapCursorSelection_1.isGapCursorSelection)(sel)) {
+                // Replace GapCursorSelection with empty textblock before run all other handlers.
+                // This should be done before all inputRules and other handlers, that handle text input.
+                // Thus, entering text into a native textblock and into a "virtual" one – GapCursor – will be the same.
+                const tr = state.tr.replaceSelectionWith((0, BaseSchema_1.pType)(state.schema).create());
+                tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, sel.pos + 1));
+                view.dispatch(tr.scrollIntoView());
+            }
+            return false;
+        },
         decorations: ({ doc, selection }) => {
             if ((0, GapCursorSelection_1.isGapCursorSelection)(selection)) {
                 const position = selection.head;

package/build/cjs/extensions/behavior/Cursor/index.js

@@ -7,7 +7,7 @@ var GapCursorSelection_1 = require("./GapCursorSelection");
 Object.defineProperty(exports, "GapCursorSelection", { enumerable: true, get: function () { return GapCursorSelection_1.GapCursorSelection; } });
 Object.defineProperty(exports, "isGapCursorSelection", { enumerable: true, get: function () { return GapCursorSelection_1.isGapCursorSelection; } });
 const Cursor = (builder, opts) => {
-    builder.addPlugin(() => (0, gapcursor_1.gapCursor)());
+    builder.addPlugin(() => (0, gapcursor_1.gapCursor)(), builder.Priority.Highest);
     builder.addPlugin(() => (0, prosemirror_dropcursor_1.dropCursor)(opts.dropOptions));
 };
 exports.Cursor = Cursor;

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/const.d.ts

@@ -3,5 +3,12 @@ export declare enum CheckboxNode {
     Input = "checkbox_input",
     Label = "checkbox_label"
 }
+export declare const CheckboxAttr: {
+    readonly Class: "class";
+    readonly Type: "type";
+    readonly Id: "id";
+    readonly Checked: "checked";
+    readonly For: "for";
+};
 export declare const idPrefix = "yfm-editor-checkbox";
 export declare const b: import("@bem-react/classname").ClassNameFormatter;

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/const.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.b = exports.idPrefix = exports.CheckboxNode = void 0;
+exports.b = exports.idPrefix = exports.CheckboxAttr = exports.CheckboxNode = void 0;
 const classname_1 = require("../../../../classname");
 var CheckboxNode;
 (function (CheckboxNode) {
@@ -8,5 +8,12 @@ var CheckboxNode;
     CheckboxNode["Input"] = "checkbox_input";
     CheckboxNode["Label"] = "checkbox_label";
 })(CheckboxNode = exports.CheckboxNode || (exports.CheckboxNode = {}));
+exports.CheckboxAttr = {
+    Class: 'class',
+    Type: 'type',
+    Id: 'id',
+    Checked: 'checked',
+    For: 'for',
+};
 exports.idPrefix = 'yfm-editor-checkbox';
 exports.b = (0, classname_1.cn)('checkbox');

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/index.d.ts

@@ -1,6 +1,6 @@
 import type { NodeSpec } from 'prosemirror-model';
 import type { ExtensionAuto, ExtensionNodeSpec } from '../../../../core';
-export { CheckboxNode } from './const';
+export { CheckboxAttr, CheckboxNode } from './const';
 export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
 export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
 export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CheckboxSpecs = exports.checkboxInputType = exports.checkboxLabelType = exports.checkboxType = exports.CheckboxNode = void 0;
+exports.CheckboxSpecs = exports.checkboxInputType = exports.checkboxLabelType = exports.checkboxType = exports.CheckboxNode = exports.CheckboxAttr = void 0;
 const tslib_1 = require("tslib");
 const checkbox_1 = tslib_1.__importDefault(require("@diplodoc/transform/lib/plugins/checkbox"));
 const schema_1 = require("../../../../utils/schema");
@@ -9,6 +9,7 @@ const parser_1 = require("./parser");
 const schema_2 = require("./schema");
 const serializer_1 = require("./serializer");
 var const_2 = require("./const");
+Object.defineProperty(exports, "CheckboxAttr", { enumerable: true, get: function () { return const_2.CheckboxAttr; } });
 Object.defineProperty(exports, "CheckboxNode", { enumerable: true, get: function () { return const_2.CheckboxNode; } });
 exports.checkboxType = (0, schema_1.nodeTypeFactory)(const_1.CheckboxNode.Checkbox);
 exports.checkboxLabelType = (0, schema_1.nodeTypeFactory)(const_1.CheckboxNode.Label);

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/schema.d.ts

@@ -1,5 +1,5 @@
 import type { NodeSpec } from 'prosemirror-model';
 import { PlaceholderOptions } from '../../../../utils/placeholder';
-import { CheckboxNode } from '../const';
+import { CheckboxNode } from './const';
 import type { CheckboxSpecsOptions } from './index';
 export declare const getSchemaSpecs: (opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>, placeholder?: PlaceholderOptions) => Record<CheckboxNode, NodeSpec>;

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/schema.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSchemaSpecs = void 0;
-const const_1 = require("../const");
+const const_1 = require("./const");
 const DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';
 const getSchemaSpecs = (opts, placeholder) => {
     var _a, _b;
@@ -13,7 +13,7 @@ const getSchemaSpecs = (opts, placeholder) => {
             allowSelection: false,
             parseDOM: [],
             attrs: {
-                class: { default: (0, const_1.b)() },
+                [const_1.CheckboxAttr.Class]: { default: (0, const_1.b)() },
             },
             toDOM(node) {
                 return ['div', node.attrs, 0];
@@ -24,9 +24,9 @@ const getSchemaSpecs = (opts, placeholder) => {
             group: 'block',
             parseDOM: [],
             attrs: {
-                type: { default: 'checkbox' },
-                id: { default: null },
-                checked: { default: null },
+                [const_1.CheckboxAttr.Type]: { default: 'checkbox' },
+                [const_1.CheckboxAttr.Id]: { default: null },
+                [const_1.CheckboxAttr.Checked]: { default: null },
             },
             toDOM(node) {
                 return ['div', node.attrs];
@@ -42,12 +42,12 @@ const getSchemaSpecs = (opts, placeholder) => {
                 {
                     tag: `span[class="${(0, const_1.b)('label')}"]`,
                     getAttrs: (node) => ({
-                        for: node.getAttribute('for') || '',
+                        [const_1.CheckboxAttr.For]: node.getAttribute(const_1.CheckboxAttr.For) || '',
                     }),
                 },
             ],
             attrs: {
-                for: { default: null },
+                [const_1.CheckboxAttr.For]: { default: null },
             },
             escapeText: false,
             placeholder: {

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/serializer.d.ts

@@ -1,3 +1,3 @@
 import { SerializerNodeToken } from '../../../../core';
-import { CheckboxNode } from '../const';
+import { CheckboxNode } from './const';
 export declare const serializerTokens: Record<CheckboxNode, SerializerNodeToken>;

package/build/cjs/extensions/yfm/Checkbox/CheckboxSpecs/serializer.js

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.serializerTokens = void 0;
 const placeholder_1 = require("../../../../utils/placeholder");
-const const_1 = require("../const");
+const const_1 = require("./const");
 exports.serializerTokens = {
     [const_1.CheckboxNode.Checkbox]: (state, node) => {
         state.renderInline(node);
         state.closeBlock(node);
     },
     [const_1.CheckboxNode.Input]: (state, node) => {
-        const checked = node.attrs.checked === 'true';
+        const checked = node.attrs[const_1.CheckboxAttr.Checked] === 'true';
         state.write(`[${checked ? 'X' : ' '}] `);
     },
     [const_1.CheckboxNode.Label]: (state, node, _, idx) => {

package/build/cjs/extensions/yfm/Checkbox/const.d.ts

@@ -1 +1 @@
-export { CheckboxNode, b } from './CheckboxSpecs/const';
+export { CheckboxAttr, CheckboxNode, b } from './CheckboxSpecs/const';

package/build/cjs/extensions/yfm/Checkbox/const.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.b = exports.CheckboxNode = void 0;
+exports.b = exports.CheckboxNode = exports.CheckboxAttr = void 0;
 var const_1 = require("./CheckboxSpecs/const");
+Object.defineProperty(exports, "CheckboxAttr", { enumerable: true, get: function () { return const_1.CheckboxAttr; } });
 Object.defineProperty(exports, "CheckboxNode", { enumerable: true, get: function () { return const_1.CheckboxNode; } });
 Object.defineProperty(exports, "b", { enumerable: true, get: function () { return const_1.b; } });

package/build/cjs/extensions/yfm/Checkbox/index.d.ts

@@ -1,7 +1,7 @@
 import type { Action, ExtensionAuto } from '../../../core';
-import { CheckboxSpecsOptions } from './CheckboxSpecs';
+import { type CheckboxSpecsOptions } from './CheckboxSpecs';
 declare const checkboxAction = "addCheckbox";
-export { CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType } from './CheckboxSpecs';
+export { CheckboxAttr, CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType, } from './CheckboxSpecs';
 export declare type CheckboxOptions = Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'> & {};
 export declare const Checkbox: ExtensionAuto<CheckboxOptions>;
 declare global {

package/build/cjs/extensions/yfm/Checkbox/index.js

@@ -1,55 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = exports.checkboxInputType = exports.checkboxLabelType = exports.checkboxType = exports.CheckboxNode = void 0;
-const prosemirror_utils_1 = require("prosemirror-utils");
+exports.Checkbox = exports.checkboxInputType = exports.checkboxLabelType = exports.checkboxType = exports.CheckboxNode = exports.CheckboxAttr = void 0;
 const inputrules_1 = require("../../../utils/inputrules");
-const BaseSchema_1 = require("../../base/BaseSchema");
 const CheckboxSpecs_1 = require("./CheckboxSpecs");
 const actions_1 = require("./actions");
-const const_1 = require("./const");
+const nodeviews_1 = require("./nodeviews");
 const plugin_1 = require("./plugin");
 const utils_1 = require("./utils");
 const checkboxAction = 'addCheckbox';
 var CheckboxSpecs_2 = require("./CheckboxSpecs");
+Object.defineProperty(exports, "CheckboxAttr", { enumerable: true, get: function () { return CheckboxSpecs_2.CheckboxAttr; } });
 Object.defineProperty(exports, "CheckboxNode", { enumerable: true, get: function () { return CheckboxSpecs_2.CheckboxNode; } });
 Object.defineProperty(exports, "checkboxType", { enumerable: true, get: function () { return CheckboxSpecs_2.checkboxType; } });
 Object.defineProperty(exports, "checkboxLabelType", { enumerable: true, get: function () { return CheckboxSpecs_2.checkboxLabelType; } });
 Object.defineProperty(exports, "checkboxInputType", { enumerable: true, get: function () { return CheckboxSpecs_2.checkboxInputType; } });
 const Checkbox = (builder, opts) => {
-    builder.use(CheckboxSpecs_1.CheckboxSpecs, Object.assign(Object.assign({}, opts), { inputView: () => (node, view, getPos) => {
-            const dom = document.createElement('input');
-            for (const attr in node.attrs) {
-                if (node.attrs[attr])
-                    dom.setAttribute(attr, node.attrs[attr]);
-            }
-            dom.setAttribute('class', (0, const_1.b)('input'));
-            dom.addEventListener('click', (e) => {
-                const elem = e.target;
-                const checkedAttr = elem.getAttribute('checked');
-                const checked = checkedAttr ? '' : 'true';
-                const pos = getPos();
-                if (pos !== undefined) {
-                    view.dispatch(view.state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { checked })));
-                }
-                elem.setAttribute('checked', checked);
-            });
-            return {
-                dom,
-                ignoreMutation: () => true,
-                update: () => true,
-                destroy() {
-                    const pos = getPos();
-                    if (pos !== undefined) {
-                        const resolved = view.state.doc.resolve(pos);
-                        if (resolved.parent.type.name === const_1.CheckboxNode.Checkbox &&
-                            resolved.parent.lastChild) {
-                            view.dispatch((0, prosemirror_utils_1.replaceParentNodeOfType)(resolved.parent.type, (0, BaseSchema_1.pType)(view.state.schema).create(resolved.parent.lastChild.content))(view.state.tr));
-                        }
-                    }
-                    dom.remove();
-                },
-            };
-        } }));
+    builder.use(CheckboxSpecs_1.CheckboxSpecs, Object.assign(Object.assign({}, opts), { inputView: () => nodeviews_1.CheckboxInputView.create }));
     builder
         .addPlugin(plugin_1.keymapPlugin, builder.Priority.High)
         .addAction(checkboxAction, () => (0, actions_1.addCheckbox)())

package/build/cjs/extensions/yfm/Checkbox/nodeviews.d.ts

@@ -0,0 +1,16 @@
+import type { Node } from 'prosemirror-model';
+import type { NodeView, NodeViewConstructor } from 'prosemirror-view';
+export declare class CheckboxInputView implements NodeView {
+    static create: NodeViewConstructor;
+    dom: HTMLInputElement;
+    private _node;
+    private _view;
+    private _getPos;
+    private constructor();
+    ignoreMutation(): boolean;
+    update(node: Node): boolean;
+    destroy(): void;
+    private _createDomElem;
+    private _applyNodeAttrsToDomElem;
+    private _onInputClick;
+}

package/build/cjs/extensions/yfm/Checkbox/nodeviews.js

@@ -0,0 +1,56 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxInputView = void 0;
+const const_1 = require("./const");
+class CheckboxInputView {
+    constructor(node, view, getPos) {
+        this._onInputClick = (event) => {
+            if (event.target instanceof HTMLInputElement) {
+                const { checked } = event.target;
+                const pos = this._getPos();
+                if (pos !== undefined)
+                    this._view.dispatch(this._view.state.tr.setNodeAttribute(pos, const_1.CheckboxAttr.Checked, checked ? 'true' : null));
+            }
+            this._view.focus();
+        };
+        this._node = node;
+        this._view = view;
+        this._getPos = getPos;
+        this.dom = this._createDomElem();
+        this._applyNodeAttrsToDomElem();
+    }
+    ignoreMutation() {
+        return true;
+    }
+    update(node) {
+        if (node.type !== this._node.type)
+            return false;
+        this._node = node;
+        this._applyNodeAttrsToDomElem();
+        return true;
+    }
+    destroy() {
+        this.dom.removeEventListener('click', this._onInputClick);
+    }
+    _createDomElem() {
+        const dom = document.createElement('input');
+        dom.setAttribute('class', (0, const_1.b)('input'));
+        dom.addEventListener('click', this._onInputClick);
+        return dom;
+    }
+    _applyNodeAttrsToDomElem() {
+        const { dom, _node: node } = this;
+        for (const [key, value] of Object.entries(node.attrs)) {
+            if (value)
+                dom.setAttribute(key, value);
+            else
+                dom.removeAttribute(key);
+        }
+        const checked = node.attrs[const_1.CheckboxAttr.Checked] === 'true';
+        this.dom.checked = checked;
+    }
+}
+exports.CheckboxInputView = CheckboxInputView;
+_a = CheckboxInputView;
+CheckboxInputView.create = (node, view, getPos) => new _a(node, view, getPos);

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

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

@@ -34,7 +34,6 @@ export declare const wTabsItemData: WToolbarSingleItemData;
 export declare const wMathInlineItemData: WToolbarSingleItemData;
 export declare const wMathBlockItemData: WToolbarSingleItemData;
 export declare const wYfmHtmlBlockItemData: WToolbarSingleItemData;
-export declare const wGptItemData: WToolbarSingleItemData;
 export declare const wMermaidItemData: WToolbarSingleItemData;
 export declare const wCodeBlockItemData: WToolbarItemData;
 export declare const wHruleItemData: WToolbarItemData;

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

@@ -1,5 +1,4 @@
 import { headingType, pType } from '../../extensions';
-import { gptHotKeys } from '../../extensions/additional/GPT/constants';
 import { i18n as i18nHint } from '../../i18n/hints';
 import { i18n } from '../../i18n/menubar';
 import { Action as A, formatter as f } from '../../shortcuts';
@@ -214,16 +213,6 @@ export const wYfmHtmlBlockItemData = {
     isActive: (e) => e.actions.createYfmHtmlBlock.isActive(),
     isEnable: (e) => e.actions.createYfmHtmlBlock.isEnable(),
 };
-export const wGptItemData = {
-    id: ActionName.gpt,
-    type: ToolbarDataType.SingleButton,
-    title: i18n.bind(null, 'gpt'),
-    hotkey: gptHotKeys.openGptKeyTooltip,
-    icon: icons.gpt,
-    exec: (e) => e.actions.addGptWidget.run({}),
-    isActive: (e) => e.actions.addGptWidget.isActive(),
-    isEnable: (e) => e.actions.addGptWidget.isEnable(),
-};
 export const wMermaidItemData = {
     id: ActionName.mermaid,
     type: ToolbarDataType.SingleButton,

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

@@ -15,7 +15,11 @@ export declare type MenuItem = {
 };
 export declare type ToolbarButtonWithPopupMenuProps = Omit<ToolbarBaseProps<ActionStorage> & {
     icon: ToolbarIconData;
+    iconClassName?: string;
+    chevronIconClassName?: string;
     title: string | (() => string);
     menuItems: MenuItem[];
+    /** @default 'classic' */
+    _selectionType?: 'classic' | 'light';
 }, 'editor'>;
 export declare const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps>;

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

@@ -7,10 +7,10 @@ import { useBooleanState } from '../../react-utils/hooks';
 import { ToolbarTooltipDelay } from '../../toolbar';
 import './ToolbarButtonWithPopupMenu.css';
 const b = cn('toolbar-button-with-popup-menu');
-export const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, title, menuItems, }) => {
+export const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
     const buttonRef = React.useRef(null);
     const [open, , hide, toggleOpen] = useBooleanState(false);
-    const groups = React.useMemo(() => groupBy(menuItems.map((i) => (Object.assign(Object.assign({}, i), { group: i.group || '' }))), 'group'), [menuItems, groupBy]);
+    const groups = React.useMemo(() => groupBy(menuItems.map((i) => (Object.assign(Object.assign({}, i), { group: i.group || '' }))), 'group'), [menuItems]);
     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;
@@ -20,12 +20,18 @@ export const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, ti
             hide();
         }
     }, [hide, shouldForceHide]);
+    const [btnView, btnSelected] = _selectionType === 'light'
+        ? [
+            popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',
+            popupOpen && someActive,
+        ]
+        : [someActive || popupOpen ? 'normal' : 'flat', someActive];
     return (React.createElement(React.Fragment, null,
         React.createElement(ActionTooltip, { disabled: popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: isFunction(title) ? title() : title },
-            React.createElement(Button, { size: "m", ref: buttonRef, view: someActive || popupOpen ? 'normal' : 'flat', selected: someActive, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen },
-                React.createElement(Icon, { data: icon.data, size: icon.size }),
+            React.createElement(Button, { size: "m", ref: buttonRef, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen },
+                React.createElement(Icon, { data: icon.data, size: icon.size, className: iconClassName }),
                 '',
-                React.createElement(Icon, { data: ChevronDown }))),
+                React.createElement(Icon, { data: ChevronDown, className: chevronIconClassName }))),
         React.createElement(Popup, { anchorRef: buttonRef, open: popupOpen, onClose: hide },
             React.createElement(Menu, { size: "l" }, Object.entries(groups).map(([label, items], key) => {
                 return (React.createElement(Menu.Group, { label: label, key: key, className: b('menu-group') }, items.map(({ id, icon, iconSize = 16, action, text, iconClassname }) => (React.createElement(Menu.Item, { key: id, icon: React.createElement(Icon, { data: icon, size: iconSize, className: iconClassname }), active: action.isActive(), disabled: !action.isEnable(), onClick: () => {

package/build/esm/bundle/toolbar/custom/ToolbarColors.css

@@ -1,21 +1,63 @@
+.g-md-toolbar-colors__menu-icon_color_gray {
+  color: var(--yfm-colorify-gray);
+}
+.g-md-toolbar-colors__chevron-icon_color_gray {
+  color: var(--yfm-colorify-gray);
+}
 .g-md-toolbar-colors__item-icon_color_gray {
   color: var(--yfm-colorify-gray);
 }
+.g-md-toolbar-colors__menu-icon_color_yellow {
+  color: var(--yfm-colorify-yellow);
+}
+.g-md-toolbar-colors__chevron-icon_color_yellow {
+  color: var(--yfm-colorify-yellow);
+}
 .g-md-toolbar-colors__item-icon_color_yellow {
   color: var(--yfm-colorify-yellow);
 }
+.g-md-toolbar-colors__menu-icon_color_orange {
+  color: var(--yfm-colorify-orange);
+}
+.g-md-toolbar-colors__chevron-icon_color_orange {
+  color: var(--yfm-colorify-orange);
+}
 .g-md-toolbar-colors__item-icon_color_orange {
   color: var(--yfm-colorify-orange);
 }
+.g-md-toolbar-colors__menu-icon_color_red {
+  color: var(--yfm-colorify-red);
+}
+.g-md-toolbar-colors__chevron-icon_color_red {
+  color: var(--yfm-colorify-red);
+}
 .g-md-toolbar-colors__item-icon_color_red {
   color: var(--yfm-colorify-red);
 }
+.g-md-toolbar-colors__menu-icon_color_green {
+  color: var(--yfm-colorify-green);
+}
+.g-md-toolbar-colors__chevron-icon_color_green {
+  color: var(--yfm-colorify-green);
+}
 .g-md-toolbar-colors__item-icon_color_green {
   color: var(--yfm-colorify-green);
 }
+.g-md-toolbar-colors__menu-icon_color_blue {
+  color: var(--yfm-colorify-blue);
+}
+.g-md-toolbar-colors__chevron-icon_color_blue {
+  color: var(--yfm-colorify-blue);
+}
 .g-md-toolbar-colors__item-icon_color_blue {
   color: var(--yfm-colorify-blue);
 }
+.g-md-toolbar-colors__menu-icon_color_violet {
+  color: var(--yfm-colorify-violet);
+}
+.g-md-toolbar-colors__chevron-icon_color_violet {
+  color: var(--yfm-colorify-violet);
+}
 .g-md-toolbar-colors__item-icon_color_violet {
   color: var(--yfm-colorify-violet);
 }

package/build/esm/bundle/toolbar/custom/ToolbarColors.js

@@ -59,5 +59,5 @@ export const ToolbarColors = (props) => {
             },
         });
     }
-    return (React.createElement(ToolbarButtonWithPopupMenu, Object.assign({}, props, { title: i18n('colorify'), menuItems: items, icon: textColorIcon })));
+    return (React.createElement(ToolbarButtonWithPopupMenu, Object.assign({}, props, { title: i18n('colorify'), menuItems: items, icon: textColorIcon, _selectionType: "light", iconClassName: b('menu-icon', { color: currentColor }), chevronIconClassName: b('chevron-icon', { color: currentColor }) })));
 };

package/build/esm/extensions/additional/GPT/index.d.ts

@@ -1,3 +1,3 @@
-export * from './toolbar';
+export * from './wGptItemData';
 export * from './gptExtension/gptExtension';
 export * from './MarkupGpt';

package/build/esm/extensions/additional/GPT/index.js

@@ -1,3 +1,3 @@
-export * from './toolbar';
+export * from './wGptItemData';
 export * from './gptExtension/gptExtension';
 export * from './MarkupGpt';

package/build/esm/extensions/additional/GPT/{toolbar.d.ts → wGptItemData.d.ts}

@@ -1,3 +1,3 @@
 import { type WToolbarSingleItemData } from '../../../toolbar';
 export declare const cnGptButton: import("@bem-react/classname").ClassNameFormatter;
-export declare const wGptToolbarItem: WToolbarSingleItemData;
+export declare const wGptItemData: WToolbarSingleItemData;

package/build/esm/extensions/additional/GPT/{toolbar.js → wGptItemData.js}

@@ -4,7 +4,7 @@ import gptIcon from '../../../icons/GPT';
 import { ToolbarDataType } from '../../../toolbar';
 import { gptHotKeys } from './constants';
 export const cnGptButton = cn('gpt-button');
-export const wGptToolbarItem = {
+export const wGptItemData = {
     type: ToolbarDataType.SingleButton,
     id: 'gpt',
     title: () => `${i18n('help-with-text')}`,

package/build/esm/extensions/behavior/Cursor/gapcursor.js

@@ -1,5 +1,5 @@
 import { DOMSerializer } from 'prosemirror-model';
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
 import { Decoration, DecorationSet } from 'prosemirror-view';
 import { isNodeSelection } from '../../../utils/selection';
 import { pType } from '../../base/BaseSchema';
@@ -25,6 +25,18 @@ export const gapCursor = () => new Plugin({
         };
     },
     props: {
+        handleKeyPress(view) {
+            const { state, state: { selection: sel }, } = view;
+            if (isGapCursorSelection(sel)) {
+                // Replace GapCursorSelection with empty textblock before run all other handlers.
+                // This should be done before all inputRules and other handlers, that handle text input.
+                // Thus, entering text into a native textblock and into a "virtual" one – GapCursor – will be the same.
+                const tr = state.tr.replaceSelectionWith(pType(state.schema).create());
+                tr.setSelection(TextSelection.create(tr.doc, sel.pos + 1));
+                view.dispatch(tr.scrollIntoView());
+            }
+            return false;
+        },
         decorations: ({ doc, selection }) => {
             if (isGapCursorSelection(selection)) {
                 const position = selection.head;

package/build/esm/extensions/behavior/Cursor/index.js

@@ -2,6 +2,6 @@ import { dropCursor } from 'prosemirror-dropcursor';
 import { gapCursor } from './gapcursor';
 export { GapCursorSelection, isGapCursorSelection } from './GapCursorSelection';
 export const Cursor = (builder, opts) => {
-    builder.addPlugin(() => gapCursor());
+    builder.addPlugin(() => gapCursor(), builder.Priority.Highest);
     builder.addPlugin(() => dropCursor(opts.dropOptions));
 };

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/const.d.ts

@@ -3,5 +3,12 @@ export declare enum CheckboxNode {
     Input = "checkbox_input",
     Label = "checkbox_label"
 }
+export declare const CheckboxAttr: {
+    readonly Class: "class";
+    readonly Type: "type";
+    readonly Id: "id";
+    readonly Checked: "checked";
+    readonly For: "for";
+};
 export declare const idPrefix = "yfm-editor-checkbox";
 export declare const b: import("@bem-react/classname").ClassNameFormatter;

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/const.js

@@ -5,5 +5,12 @@ export var CheckboxNode;
     CheckboxNode["Input"] = "checkbox_input";
     CheckboxNode["Label"] = "checkbox_label";
 })(CheckboxNode || (CheckboxNode = {}));
+export const CheckboxAttr = {
+    Class: 'class',
+    Type: 'type',
+    Id: 'id',
+    Checked: 'checked',
+    For: 'for',
+};
 export const idPrefix = 'yfm-editor-checkbox';
 export const b = cn('checkbox');

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/index.d.ts

@@ -1,6 +1,6 @@
 import type { NodeSpec } from 'prosemirror-model';
 import type { ExtensionAuto, ExtensionNodeSpec } from '../../../../core';
-export { CheckboxNode } from './const';
+export { CheckboxAttr, CheckboxNode } from './const';
 export declare const checkboxType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
 export declare const checkboxLabelType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
 export declare const checkboxInputType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/index.js

@@ -4,7 +4,7 @@ import { CheckboxNode, b, idPrefix } from './const';
 import { parserTokens } from './parser';
 import { getSchemaSpecs } from './schema';
 import { serializerTokens } from './serializer';
-export { CheckboxNode } from './const';
+export { CheckboxAttr, CheckboxNode } from './const';
 export const checkboxType = nodeTypeFactory(CheckboxNode.Checkbox);
 export const checkboxLabelType = nodeTypeFactory(CheckboxNode.Label);
 export const checkboxInputType = nodeTypeFactory(CheckboxNode.Input);

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/schema.d.ts

@@ -1,5 +1,5 @@
 import type { NodeSpec } from 'prosemirror-model';
 import { PlaceholderOptions } from '../../../../utils/placeholder';
-import { CheckboxNode } from '../const';
+import { CheckboxNode } from './const';
 import type { CheckboxSpecsOptions } from './index';
 export declare const getSchemaSpecs: (opts?: Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'>, placeholder?: PlaceholderOptions) => Record<CheckboxNode, NodeSpec>;

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/schema.js

@@ -1,4 +1,4 @@
-import { CheckboxNode, b } from '../const';
+import { CheckboxAttr, CheckboxNode, b } from './const';
 const DEFAULT_LABEL_PLACEHOLDER = 'Checkbox';
 export const getSchemaSpecs = (opts, placeholder) => {
     var _a, _b;
@@ -10,7 +10,7 @@ export const getSchemaSpecs = (opts, placeholder) => {
             allowSelection: false,
             parseDOM: [],
             attrs: {
-                class: { default: b() },
+                [CheckboxAttr.Class]: { default: b() },
             },
             toDOM(node) {
                 return ['div', node.attrs, 0];
@@ -21,9 +21,9 @@ export const getSchemaSpecs = (opts, placeholder) => {
             group: 'block',
             parseDOM: [],
             attrs: {
-                type: { default: 'checkbox' },
-                id: { default: null },
-                checked: { default: null },
+                [CheckboxAttr.Type]: { default: 'checkbox' },
+                [CheckboxAttr.Id]: { default: null },
+                [CheckboxAttr.Checked]: { default: null },
             },
             toDOM(node) {
                 return ['div', node.attrs];
@@ -39,12 +39,12 @@ export const getSchemaSpecs = (opts, placeholder) => {
                 {
                     tag: `span[class="${b('label')}"]`,
                     getAttrs: (node) => ({
-                        for: node.getAttribute('for') || '',
+                        [CheckboxAttr.For]: node.getAttribute(CheckboxAttr.For) || '',
                     }),
                 },
             ],
             attrs: {
-                for: { default: null },
+                [CheckboxAttr.For]: { default: null },
             },
             escapeText: false,
             placeholder: {

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/serializer.d.ts

@@ -1,3 +1,3 @@
 import { SerializerNodeToken } from '../../../../core';
-import { CheckboxNode } from '../const';
+import { CheckboxNode } from './const';
 export declare const serializerTokens: Record<CheckboxNode, SerializerNodeToken>;

package/build/esm/extensions/yfm/Checkbox/CheckboxSpecs/serializer.js

@@ -1,12 +1,12 @@
 import { getPlaceholderContent } from '../../../../utils/placeholder';
-import { CheckboxNode } from '../const';
+import { CheckboxAttr, CheckboxNode } from './const';
 export const serializerTokens = {
     [CheckboxNode.Checkbox]: (state, node) => {
         state.renderInline(node);
         state.closeBlock(node);
     },
     [CheckboxNode.Input]: (state, node) => {
-        const checked = node.attrs.checked === 'true';
+        const checked = node.attrs[CheckboxAttr.Checked] === 'true';
         state.write(`[${checked ? 'X' : ' '}] `);
     },
     [CheckboxNode.Label]: (state, node, _, idx) => {

package/build/esm/extensions/yfm/Checkbox/const.d.ts

@@ -1 +1 @@
-export { CheckboxNode, b } from './CheckboxSpecs/const';
+export { CheckboxAttr, CheckboxNode, b } from './CheckboxSpecs/const';

package/build/esm/extensions/yfm/Checkbox/const.js

@@ -1 +1 @@
-export { CheckboxNode, b } from './CheckboxSpecs/const';
+export { CheckboxAttr, CheckboxNode, b } from './CheckboxSpecs/const';

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

@@ -1,8 +1,8 @@
 import type { Action, ExtensionAuto } from '../../../core';
-import { CheckboxSpecsOptions } from './CheckboxSpecs';
+import { type CheckboxSpecsOptions } from './CheckboxSpecs';
 import './index.css';
 declare const checkboxAction = "addCheckbox";
-export { CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType } from './CheckboxSpecs';
+export { CheckboxAttr, CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType, } from './CheckboxSpecs';
 export declare type CheckboxOptions = Pick<CheckboxSpecsOptions, 'checkboxLabelPlaceholder'> & {};
 export declare const Checkbox: ExtensionAuto<CheckboxOptions>;
 declare global {

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

@@ -1,49 +1,14 @@
-import { replaceParentNodeOfType } from 'prosemirror-utils';
 import { nodeInputRule } from '../../../utils/inputrules';
-import { pType } from '../../base/BaseSchema';
 import { CheckboxSpecs } from './CheckboxSpecs';
 import { addCheckbox } from './actions';
-import { CheckboxNode, b } from './const';
+import { CheckboxInputView } from './nodeviews';
 import { keymapPlugin } from './plugin';
 import { checkboxInputType, checkboxType } from './utils';
 import './index.css';
 const checkboxAction = 'addCheckbox';
-export { CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType } from './CheckboxSpecs';
+export { CheckboxAttr, CheckboxNode, checkboxType, checkboxLabelType, checkboxInputType, } from './CheckboxSpecs';
 export const Checkbox = (builder, opts) => {
-    builder.use(CheckboxSpecs, Object.assign(Object.assign({}, opts), { inputView: () => (node, view, getPos) => {
-            const dom = document.createElement('input');
-            for (const attr in node.attrs) {
-                if (node.attrs[attr])
-                    dom.setAttribute(attr, node.attrs[attr]);
-            }
-            dom.setAttribute('class', b('input'));
-            dom.addEventListener('click', (e) => {
-                const elem = e.target;
-                const checkedAttr = elem.getAttribute('checked');
-                const checked = checkedAttr ? '' : 'true';
-                const pos = getPos();
-                if (pos !== undefined) {
-                    view.dispatch(view.state.tr.setNodeMarkup(pos, undefined, Object.assign(Object.assign({}, node.attrs), { checked })));
-                }
-                elem.setAttribute('checked', checked);
-            });
-            return {
-                dom,
-                ignoreMutation: () => true,
-                update: () => true,
-                destroy() {
-                    const pos = getPos();
-                    if (pos !== undefined) {
-                        const resolved = view.state.doc.resolve(pos);
-                        if (resolved.parent.type.name === CheckboxNode.Checkbox &&
-                            resolved.parent.lastChild) {
-                            view.dispatch(replaceParentNodeOfType(resolved.parent.type, pType(view.state.schema).create(resolved.parent.lastChild.content))(view.state.tr));
-                        }
-                    }
-                    dom.remove();
-                },
-            };
-        } }));
+    builder.use(CheckboxSpecs, Object.assign(Object.assign({}, opts), { inputView: () => CheckboxInputView.create }));
     builder
         .addPlugin(keymapPlugin, builder.Priority.High)
         .addAction(checkboxAction, () => addCheckbox())

package/build/esm/extensions/yfm/Checkbox/nodeviews.d.ts

@@ -0,0 +1,16 @@
+import type { Node } from 'prosemirror-model';
+import type { NodeView, NodeViewConstructor } from 'prosemirror-view';
+export declare class CheckboxInputView implements NodeView {
+    static create: NodeViewConstructor;
+    dom: HTMLInputElement;
+    private _node;
+    private _view;
+    private _getPos;
+    private constructor();
+    ignoreMutation(): boolean;
+    update(node: Node): boolean;
+    destroy(): void;
+    private _createDomElem;
+    private _applyNodeAttrsToDomElem;
+    private _onInputClick;
+}

package/build/esm/extensions/yfm/Checkbox/nodeviews.js

@@ -0,0 +1,52 @@
+var _a;
+import { CheckboxAttr, b } from './const';
+export class CheckboxInputView {
+    constructor(node, view, getPos) {
+        this._onInputClick = (event) => {
+            if (event.target instanceof HTMLInputElement) {
+                const { checked } = event.target;
+                const pos = this._getPos();
+                if (pos !== undefined)
+                    this._view.dispatch(this._view.state.tr.setNodeAttribute(pos, CheckboxAttr.Checked, checked ? 'true' : null));
+            }
+            this._view.focus();
+        };
+        this._node = node;
+        this._view = view;
+        this._getPos = getPos;
+        this.dom = this._createDomElem();
+        this._applyNodeAttrsToDomElem();
+    }
+    ignoreMutation() {
+        return true;
+    }
+    update(node) {
+        if (node.type !== this._node.type)
+            return false;
+        this._node = node;
+        this._applyNodeAttrsToDomElem();
+        return true;
+    }
+    destroy() {
+        this.dom.removeEventListener('click', this._onInputClick);
+    }
+    _createDomElem() {
+        const dom = document.createElement('input');
+        dom.setAttribute('class', b('input'));
+        dom.addEventListener('click', this._onInputClick);
+        return dom;
+    }
+    _applyNodeAttrsToDomElem() {
+        const { dom, _node: node } = this;
+        for (const [key, value] of Object.entries(node.attrs)) {
+            if (value)
+                dom.setAttribute(key, value);
+            else
+                dom.removeAttribute(key);
+        }
+        const checked = node.attrs[CheckboxAttr.Checked] === 'true';
+        this.dom.checked = checked;
+    }
+}
+_a = CheckboxInputView;
+CheckboxInputView.create = (node, view, getPos) => new _a(node, view, getPos);

package/build/esm/version.js

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

package/build/styles.css

@@ -607,24 +607,66 @@
   display: inline-block;
   margin-top: 8px;
 }
+.g-md-toolbar-colors__menu-icon_color_gray {
+  color: var(--yfm-colorify-gray);
+}
+.g-md-toolbar-colors__chevron-icon_color_gray {
+  color: var(--yfm-colorify-gray);
+}
 .g-md-toolbar-colors__item-icon_color_gray {
   color: var(--yfm-colorify-gray);
 }
+.g-md-toolbar-colors__menu-icon_color_yellow {
+  color: var(--yfm-colorify-yellow);
+}
+.g-md-toolbar-colors__chevron-icon_color_yellow {
+  color: var(--yfm-colorify-yellow);
+}
 .g-md-toolbar-colors__item-icon_color_yellow {
   color: var(--yfm-colorify-yellow);
 }
+.g-md-toolbar-colors__menu-icon_color_orange {
+  color: var(--yfm-colorify-orange);
+}
+.g-md-toolbar-colors__chevron-icon_color_orange {
+  color: var(--yfm-colorify-orange);
+}
 .g-md-toolbar-colors__item-icon_color_orange {
   color: var(--yfm-colorify-orange);
 }
+.g-md-toolbar-colors__menu-icon_color_red {
+  color: var(--yfm-colorify-red);
+}
+.g-md-toolbar-colors__chevron-icon_color_red {
+  color: var(--yfm-colorify-red);
+}
 .g-md-toolbar-colors__item-icon_color_red {
   color: var(--yfm-colorify-red);
 }
+.g-md-toolbar-colors__menu-icon_color_green {
+  color: var(--yfm-colorify-green);
+}
+.g-md-toolbar-colors__chevron-icon_color_green {
+  color: var(--yfm-colorify-green);
+}
 .g-md-toolbar-colors__item-icon_color_green {
   color: var(--yfm-colorify-green);
 }
+.g-md-toolbar-colors__menu-icon_color_blue {
+  color: var(--yfm-colorify-blue);
+}
+.g-md-toolbar-colors__chevron-icon_color_blue {
+  color: var(--yfm-colorify-blue);
+}
 .g-md-toolbar-colors__item-icon_color_blue {
   color: var(--yfm-colorify-blue);
 }
+.g-md-toolbar-colors__menu-icon_color_violet {
+  color: var(--yfm-colorify-violet);
+}
+.g-md-toolbar-colors__chevron-icon_color_violet {
+  color: var(--yfm-colorify-violet);
+}
 .g-md-toolbar-colors__item-icon_color_violet {
   color: var(--yfm-colorify-violet);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/markdown-editor",
-  "version": "14.5.0",
+  "version": "14.6.0",
   "description": "Markdown wysiwyg and markup editor",
   "license": "MIT",
   "repository": {
@@ -170,7 +170,7 @@
     "@gravity-ui/i18n": "^1.1.0",
     "@gravity-ui/icons": "^2.10.0",
     "@lezer/highlight": "~1.2.1",
-    "@lezer/markdown": "~1.3.1",
+    "@lezer/markdown": "~1.3.2",
     "@types/is-number": "^7.0.1",
     "@types/markdown-it": "^12.2.3",
     "base64-arraybuffer": "1.0.2",