@gravity-ui/markdown-editor 14.5.1 → 14.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/build/cjs/bundle/config/wysiwyg.d.ts +0 -1
  2. package/build/cjs/bundle/config/wysiwyg.js +2 -13
  3. package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.d.ts +4 -0
  4. package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.js +11 -5
  5. package/build/cjs/bundle/toolbar/custom/ToolbarColors.css +42 -0
  6. package/build/cjs/bundle/toolbar/custom/ToolbarColors.js +1 -1
  7. package/build/cjs/extensions/additional/GPT/index.d.ts +1 -1
  8. package/build/cjs/extensions/additional/GPT/index.js +1 -1
  9. package/build/cjs/extensions/additional/GPT/{toolbar.d.ts → wGptItemData.d.ts} +1 -1
  10. package/build/cjs/extensions/additional/GPT/{toolbar.js → wGptItemData.js} +2 -2
  11. package/build/cjs/extensions/behavior/Cursor/gapcursor.js +12 -0
  12. package/build/cjs/extensions/behavior/Cursor/index.js +1 -1
  13. package/build/cjs/version.js +1 -1
  14. package/build/esm/bundle/config/wysiwyg.d.ts +0 -1
  15. package/build/esm/bundle/config/wysiwyg.js +0 -11
  16. package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.d.ts +4 -0
  17. package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.js +11 -5
  18. package/build/esm/bundle/toolbar/custom/ToolbarColors.css +42 -0
  19. package/build/esm/bundle/toolbar/custom/ToolbarColors.js +1 -1
  20. package/build/esm/extensions/additional/GPT/index.d.ts +1 -1
  21. package/build/esm/extensions/additional/GPT/index.js +1 -1
  22. package/build/esm/extensions/additional/GPT/{toolbar.d.ts → wGptItemData.d.ts} +1 -1
  23. package/build/esm/extensions/additional/GPT/{toolbar.js → wGptItemData.js} +1 -1
  24. package/build/esm/extensions/behavior/Cursor/gapcursor.js +13 -1
  25. package/build/esm/extensions/behavior/Cursor/index.js +1 -1
  26. package/build/esm/version.js +1 -1
  27. package/build/styles.css +42 -0
  28. package/package.json +2 -2
@@ -34,7 +34,6 @@ export declare const wTabsItemData: WToolbarSingleItemData;
34
34
  export declare const wMathInlineItemData: WToolbarSingleItemData;
35
35
  export declare const wMathBlockItemData: WToolbarSingleItemData;
36
36
  export declare const wYfmHtmlBlockItemData: WToolbarSingleItemData;
37
- export declare const wGptItemData: WToolbarSingleItemData;
38
37
  export declare const wMermaidItemData: WToolbarSingleItemData;
39
38
  export declare const wCodeBlockItemData: WToolbarItemData;
40
39
  export declare const wHruleItemData: WToolbarItemData;
@@ -1,9 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- 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;
4
- exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = exports.wSelectionMenuConfig = void 0;
3
+ 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;
4
+ exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset = void 0;
5
5
  const extensions_1 = require("../../extensions");
6
- const constants_1 = require("../../extensions/additional/GPT/constants");
7
6
  const hints_1 = require("../../i18n/hints");
8
7
  const menubar_1 = require("../../i18n/menubar");
9
8
  const shortcuts_1 = require("../../shortcuts");
@@ -218,16 +217,6 @@ exports.wYfmHtmlBlockItemData = {
218
217
  isActive: (e) => e.actions.createYfmHtmlBlock.isActive(),
219
218
  isEnable: (e) => e.actions.createYfmHtmlBlock.isEnable(),
220
219
  };
221
- exports.wGptItemData = {
222
- id: action_names_1.ActionName.gpt,
223
- type: toolbar_1.ToolbarDataType.SingleButton,
224
- title: menubar_1.i18n.bind(null, 'gpt'),
225
- hotkey: constants_1.gptHotKeys.openGptKeyTooltip,
226
- icon: icons_1.icons.gpt,
227
- exec: (e) => e.actions.addGptWidget.run({}),
228
- isActive: (e) => e.actions.addGptWidget.isActive(),
229
- isEnable: (e) => e.actions.addGptWidget.isEnable(),
230
- };
231
220
  exports.wMermaidItemData = {
232
221
  id: action_names_1.ActionName.mermaid,
233
222
  type: toolbar_1.ToolbarDataType.SingleButton,
@@ -14,7 +14,11 @@ export declare type MenuItem = {
14
14
  };
15
15
  export declare type ToolbarButtonWithPopupMenuProps = Omit<ToolbarBaseProps<ActionStorage> & {
16
16
  icon: ToolbarIconData;
17
+ iconClassName?: string;
18
+ chevronIconClassName?: string;
17
19
  title: string | (() => string);
18
20
  menuItems: MenuItem[];
21
+ /** @default 'classic' */
22
+ _selectionType?: 'classic' | 'light';
19
23
  }, 'editor'>;
20
24
  export declare const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps>;
@@ -10,10 +10,10 @@ const lodash_1 = require("../../lodash");
10
10
  const hooks_1 = require("../../react-utils/hooks");
11
11
  const toolbar_1 = require("../../toolbar");
12
12
  const b = (0, classname_1.cn)('toolbar-button-with-popup-menu');
13
- const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, title, menuItems, }) => {
13
+ const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
14
14
  const buttonRef = react_1.default.useRef(null);
15
15
  const [open, , hide, toggleOpen] = (0, hooks_1.useBooleanState)(false);
16
- 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]);
16
+ const groups = react_1.default.useMemo(() => (0, lodash_1.groupBy)(menuItems.map((i) => (Object.assign(Object.assign({}, i), { group: i.group || '' }))), 'group'), [menuItems]);
17
17
  const someActive = menuItems.some((item) => !item.ignoreActive && item.action.isActive() === true);
18
18
  const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);
19
19
  const popupOpen = everyDisabled ? false : open;
@@ -23,12 +23,18 @@ const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, title, me
23
23
  hide();
24
24
  }
25
25
  }, [hide, shouldForceHide]);
26
+ const [btnView, btnSelected] = _selectionType === 'light'
27
+ ? [
28
+ popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',
29
+ popupOpen && someActive,
30
+ ]
31
+ : [someActive || popupOpen ? 'normal' : 'flat', someActive];
26
32
  return (react_1.default.createElement(react_1.default.Fragment, null,
27
33
  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 },
28
- 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 },
29
- react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: icon.size }),
34
+ react_1.default.createElement(uikit_1.Button, { size: "m", ref: buttonRef, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen },
35
+ react_1.default.createElement(uikit_1.Icon, { data: icon.data, size: icon.size, className: iconClassName }),
30
36
  '',
31
- react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown }))),
37
+ react_1.default.createElement(uikit_1.Icon, { data: icons_1.ChevronDown, className: chevronIconClassName }))),
32
38
  react_1.default.createElement(uikit_1.Popup, { anchorRef: buttonRef, open: popupOpen, onClose: hide },
33
39
  react_1.default.createElement(uikit_1.Menu, { size: "l" }, Object.entries(groups).map(([label, items], key) => {
34
40
  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: () => {
@@ -1,21 +1,63 @@
1
+ .g-md-toolbar-colors__menu-icon_color_gray {
2
+ color: var(--yfm-colorify-gray);
3
+ }
4
+ .g-md-toolbar-colors__chevron-icon_color_gray {
5
+ color: var(--yfm-colorify-gray);
6
+ }
1
7
  .g-md-toolbar-colors__item-icon_color_gray {
2
8
  color: var(--yfm-colorify-gray);
3
9
  }
10
+ .g-md-toolbar-colors__menu-icon_color_yellow {
11
+ color: var(--yfm-colorify-yellow);
12
+ }
13
+ .g-md-toolbar-colors__chevron-icon_color_yellow {
14
+ color: var(--yfm-colorify-yellow);
15
+ }
4
16
  .g-md-toolbar-colors__item-icon_color_yellow {
5
17
  color: var(--yfm-colorify-yellow);
6
18
  }
19
+ .g-md-toolbar-colors__menu-icon_color_orange {
20
+ color: var(--yfm-colorify-orange);
21
+ }
22
+ .g-md-toolbar-colors__chevron-icon_color_orange {
23
+ color: var(--yfm-colorify-orange);
24
+ }
7
25
  .g-md-toolbar-colors__item-icon_color_orange {
8
26
  color: var(--yfm-colorify-orange);
9
27
  }
28
+ .g-md-toolbar-colors__menu-icon_color_red {
29
+ color: var(--yfm-colorify-red);
30
+ }
31
+ .g-md-toolbar-colors__chevron-icon_color_red {
32
+ color: var(--yfm-colorify-red);
33
+ }
10
34
  .g-md-toolbar-colors__item-icon_color_red {
11
35
  color: var(--yfm-colorify-red);
12
36
  }
37
+ .g-md-toolbar-colors__menu-icon_color_green {
38
+ color: var(--yfm-colorify-green);
39
+ }
40
+ .g-md-toolbar-colors__chevron-icon_color_green {
41
+ color: var(--yfm-colorify-green);
42
+ }
13
43
  .g-md-toolbar-colors__item-icon_color_green {
14
44
  color: var(--yfm-colorify-green);
15
45
  }
46
+ .g-md-toolbar-colors__menu-icon_color_blue {
47
+ color: var(--yfm-colorify-blue);
48
+ }
49
+ .g-md-toolbar-colors__chevron-icon_color_blue {
50
+ color: var(--yfm-colorify-blue);
51
+ }
16
52
  .g-md-toolbar-colors__item-icon_color_blue {
17
53
  color: var(--yfm-colorify-blue);
18
54
  }
55
+ .g-md-toolbar-colors__menu-icon_color_violet {
56
+ color: var(--yfm-colorify-violet);
57
+ }
58
+ .g-md-toolbar-colors__chevron-icon_color_violet {
59
+ color: var(--yfm-colorify-violet);
60
+ }
19
61
  .g-md-toolbar-colors__item-icon_color_violet {
20
62
  color: var(--yfm-colorify-violet);
21
63
  }
@@ -62,6 +62,6 @@ const ToolbarColors = (props) => {
62
62
  },
63
63
  });
64
64
  }
65
- return (react_1.default.createElement(ToolbarButtonWithPopupMenu_1.ToolbarButtonWithPopupMenu, Object.assign({}, props, { title: (0, menubar_1.i18n)('colorify'), menuItems: items, icon: textColorIcon })));
65
+ 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 }) })));
66
66
  };
67
67
  exports.ToolbarColors = ToolbarColors;
@@ -1,3 +1,3 @@
1
- export * from './toolbar';
1
+ export * from './wGptItemData';
2
2
  export * from './gptExtension/gptExtension';
3
3
  export * from './MarkupGpt';
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
- tslib_1.__exportStar(require("./toolbar"), exports);
4
+ tslib_1.__exportStar(require("./wGptItemData"), exports);
5
5
  tslib_1.__exportStar(require("./gptExtension/gptExtension"), exports);
6
6
  tslib_1.__exportStar(require("./MarkupGpt"), exports);
@@ -1,3 +1,3 @@
1
1
  import { type WToolbarSingleItemData } from '../../../toolbar';
2
2
  export declare const cnGptButton: import("@bem-react/classname").ClassNameFormatter;
3
- export declare const wGptToolbarItem: WToolbarSingleItemData;
3
+ export declare const wGptItemData: WToolbarSingleItemData;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.wGptToolbarItem = exports.cnGptButton = void 0;
3
+ exports.wGptItemData = exports.cnGptButton = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const classname_1 = require("@bem-react/classname");
6
6
  const extension_1 = require("../../../i18n/gpt/extension");
@@ -8,7 +8,7 @@ const GPT_1 = tslib_1.__importDefault(require("../../../icons/GPT"));
8
8
  const toolbar_1 = require("../../../toolbar");
9
9
  const constants_1 = require("./constants");
10
10
  exports.cnGptButton = (0, classname_1.cn)('gpt-button');
11
- exports.wGptToolbarItem = {
11
+ exports.wGptItemData = {
12
12
  type: toolbar_1.ToolbarDataType.SingleButton,
13
13
  id: 'gpt',
14
14
  title: () => `${(0, extension_1.i18n)('help-with-text')}`,
@@ -27,6 +27,18 @@ const gapCursor = () => new prosemirror_state_1.Plugin({
27
27
  };
28
28
  },
29
29
  props: {
30
+ handleKeyPress(view) {
31
+ const { state, state: { selection: sel }, } = view;
32
+ if ((0, GapCursorSelection_1.isGapCursorSelection)(sel)) {
33
+ // Replace GapCursorSelection with empty textblock before run all other handlers.
34
+ // This should be done before all inputRules and other handlers, that handle text input.
35
+ // Thus, entering text into a native textblock and into a "virtual" one – GapCursor – will be the same.
36
+ const tr = state.tr.replaceSelectionWith((0, BaseSchema_1.pType)(state.schema).create());
37
+ tr.setSelection(prosemirror_state_1.TextSelection.create(tr.doc, sel.pos + 1));
38
+ view.dispatch(tr.scrollIntoView());
39
+ }
40
+ return false;
41
+ },
30
42
  decorations: ({ doc, selection }) => {
31
43
  if ((0, GapCursorSelection_1.isGapCursorSelection)(selection)) {
32
44
  const position = selection.head;
@@ -7,7 +7,7 @@ var GapCursorSelection_1 = require("./GapCursorSelection");
7
7
  Object.defineProperty(exports, "GapCursorSelection", { enumerable: true, get: function () { return GapCursorSelection_1.GapCursorSelection; } });
8
8
  Object.defineProperty(exports, "isGapCursorSelection", { enumerable: true, get: function () { return GapCursorSelection_1.isGapCursorSelection; } });
9
9
  const Cursor = (builder, opts) => {
10
- builder.addPlugin(() => (0, gapcursor_1.gapCursor)());
10
+ builder.addPlugin(() => (0, gapcursor_1.gapCursor)(), builder.Priority.Highest);
11
11
  builder.addPlugin(() => (0, prosemirror_dropcursor_1.dropCursor)(opts.dropOptions));
12
12
  };
13
13
  exports.Cursor = Cursor;
@@ -2,4 +2,4 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.VERSION = void 0;
4
4
  /** During build process, the current version will be injected here */
5
- exports.VERSION = typeof '14.5.1' !== 'undefined' ? '14.5.1' : 'unknown';
5
+ exports.VERSION = typeof '14.6.0' !== 'undefined' ? '14.6.0' : 'unknown';
@@ -34,7 +34,6 @@ export declare const wTabsItemData: WToolbarSingleItemData;
34
34
  export declare const wMathInlineItemData: WToolbarSingleItemData;
35
35
  export declare const wMathBlockItemData: WToolbarSingleItemData;
36
36
  export declare const wYfmHtmlBlockItemData: WToolbarSingleItemData;
37
- export declare const wGptItemData: WToolbarSingleItemData;
38
37
  export declare const wMermaidItemData: WToolbarSingleItemData;
39
38
  export declare const wCodeBlockItemData: WToolbarItemData;
40
39
  export declare const wHruleItemData: WToolbarItemData;
@@ -1,5 +1,4 @@
1
1
  import { headingType, pType } from '../../extensions';
2
- import { gptHotKeys } from '../../extensions/additional/GPT/constants';
3
2
  import { i18n as i18nHint } from '../../i18n/hints';
4
3
  import { i18n } from '../../i18n/menubar';
5
4
  import { Action as A, formatter as f } from '../../shortcuts';
@@ -214,16 +213,6 @@ export const wYfmHtmlBlockItemData = {
214
213
  isActive: (e) => e.actions.createYfmHtmlBlock.isActive(),
215
214
  isEnable: (e) => e.actions.createYfmHtmlBlock.isEnable(),
216
215
  };
217
- export const wGptItemData = {
218
- id: ActionName.gpt,
219
- type: ToolbarDataType.SingleButton,
220
- title: i18n.bind(null, 'gpt'),
221
- hotkey: gptHotKeys.openGptKeyTooltip,
222
- icon: icons.gpt,
223
- exec: (e) => e.actions.addGptWidget.run({}),
224
- isActive: (e) => e.actions.addGptWidget.isActive(),
225
- isEnable: (e) => e.actions.addGptWidget.isEnable(),
226
- };
227
216
  export const wMermaidItemData = {
228
217
  id: ActionName.mermaid,
229
218
  type: ToolbarDataType.SingleButton,
@@ -15,7 +15,11 @@ export declare type MenuItem = {
15
15
  };
16
16
  export declare type ToolbarButtonWithPopupMenuProps = Omit<ToolbarBaseProps<ActionStorage> & {
17
17
  icon: ToolbarIconData;
18
+ iconClassName?: string;
19
+ chevronIconClassName?: string;
18
20
  title: string | (() => string);
19
21
  menuItems: MenuItem[];
22
+ /** @default 'classic' */
23
+ _selectionType?: 'classic' | 'light';
20
24
  }, 'editor'>;
21
25
  export declare const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProps>;
@@ -7,10 +7,10 @@ import { useBooleanState } from '../../react-utils/hooks';
7
7
  import { ToolbarTooltipDelay } from '../../toolbar';
8
8
  import './ToolbarButtonWithPopupMenu.css';
9
9
  const b = cn('toolbar-button-with-popup-menu');
10
- export const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, title, menuItems, }) => {
10
+ export const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, iconClassName, chevronIconClassName, title, menuItems, _selectionType, }) => {
11
11
  const buttonRef = React.useRef(null);
12
12
  const [open, , hide, toggleOpen] = useBooleanState(false);
13
- const groups = React.useMemo(() => groupBy(menuItems.map((i) => (Object.assign(Object.assign({}, i), { group: i.group || '' }))), 'group'), [menuItems, groupBy]);
13
+ const groups = React.useMemo(() => groupBy(menuItems.map((i) => (Object.assign(Object.assign({}, i), { group: i.group || '' }))), 'group'), [menuItems]);
14
14
  const someActive = menuItems.some((item) => !item.ignoreActive && item.action.isActive() === true);
15
15
  const everyDisabled = menuItems.every((item) => item.action.isEnable() === false);
16
16
  const popupOpen = everyDisabled ? false : open;
@@ -20,12 +20,18 @@ export const ToolbarButtonWithPopupMenu = ({ className, focus, onClick, icon, ti
20
20
  hide();
21
21
  }
22
22
  }, [hide, shouldForceHide]);
23
+ const [btnView, btnSelected] = _selectionType === 'light'
24
+ ? [
25
+ popupOpen ? 'normal' : someActive ? 'flat-action' : 'flat',
26
+ popupOpen && someActive,
27
+ ]
28
+ : [someActive || popupOpen ? 'normal' : 'flat', someActive];
23
29
  return (React.createElement(React.Fragment, null,
24
30
  React.createElement(ActionTooltip, { disabled: popupOpen, openDelay: ToolbarTooltipDelay.Open, closeDelay: ToolbarTooltipDelay.Close, title: isFunction(title) ? title() : title },
25
- React.createElement(Button, { size: "m", ref: buttonRef, view: someActive || popupOpen ? 'normal' : 'flat', selected: someActive, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen },
26
- React.createElement(Icon, { data: icon.data, size: icon.size }),
31
+ React.createElement(Button, { size: "m", ref: buttonRef, view: btnView, selected: btnSelected, disabled: everyDisabled, className: b(null, [className]), onClick: toggleOpen },
32
+ React.createElement(Icon, { data: icon.data, size: icon.size, className: iconClassName }),
27
33
  '',
28
- React.createElement(Icon, { data: ChevronDown }))),
34
+ React.createElement(Icon, { data: ChevronDown, className: chevronIconClassName }))),
29
35
  React.createElement(Popup, { anchorRef: buttonRef, open: popupOpen, onClose: hide },
30
36
  React.createElement(Menu, { size: "l" }, Object.entries(groups).map(([label, items], key) => {
31
37
  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: () => {
@@ -1,21 +1,63 @@
1
+ .g-md-toolbar-colors__menu-icon_color_gray {
2
+ color: var(--yfm-colorify-gray);
3
+ }
4
+ .g-md-toolbar-colors__chevron-icon_color_gray {
5
+ color: var(--yfm-colorify-gray);
6
+ }
1
7
  .g-md-toolbar-colors__item-icon_color_gray {
2
8
  color: var(--yfm-colorify-gray);
3
9
  }
10
+ .g-md-toolbar-colors__menu-icon_color_yellow {
11
+ color: var(--yfm-colorify-yellow);
12
+ }
13
+ .g-md-toolbar-colors__chevron-icon_color_yellow {
14
+ color: var(--yfm-colorify-yellow);
15
+ }
4
16
  .g-md-toolbar-colors__item-icon_color_yellow {
5
17
  color: var(--yfm-colorify-yellow);
6
18
  }
19
+ .g-md-toolbar-colors__menu-icon_color_orange {
20
+ color: var(--yfm-colorify-orange);
21
+ }
22
+ .g-md-toolbar-colors__chevron-icon_color_orange {
23
+ color: var(--yfm-colorify-orange);
24
+ }
7
25
  .g-md-toolbar-colors__item-icon_color_orange {
8
26
  color: var(--yfm-colorify-orange);
9
27
  }
28
+ .g-md-toolbar-colors__menu-icon_color_red {
29
+ color: var(--yfm-colorify-red);
30
+ }
31
+ .g-md-toolbar-colors__chevron-icon_color_red {
32
+ color: var(--yfm-colorify-red);
33
+ }
10
34
  .g-md-toolbar-colors__item-icon_color_red {
11
35
  color: var(--yfm-colorify-red);
12
36
  }
37
+ .g-md-toolbar-colors__menu-icon_color_green {
38
+ color: var(--yfm-colorify-green);
39
+ }
40
+ .g-md-toolbar-colors__chevron-icon_color_green {
41
+ color: var(--yfm-colorify-green);
42
+ }
13
43
  .g-md-toolbar-colors__item-icon_color_green {
14
44
  color: var(--yfm-colorify-green);
15
45
  }
46
+ .g-md-toolbar-colors__menu-icon_color_blue {
47
+ color: var(--yfm-colorify-blue);
48
+ }
49
+ .g-md-toolbar-colors__chevron-icon_color_blue {
50
+ color: var(--yfm-colorify-blue);
51
+ }
16
52
  .g-md-toolbar-colors__item-icon_color_blue {
17
53
  color: var(--yfm-colorify-blue);
18
54
  }
55
+ .g-md-toolbar-colors__menu-icon_color_violet {
56
+ color: var(--yfm-colorify-violet);
57
+ }
58
+ .g-md-toolbar-colors__chevron-icon_color_violet {
59
+ color: var(--yfm-colorify-violet);
60
+ }
19
61
  .g-md-toolbar-colors__item-icon_color_violet {
20
62
  color: var(--yfm-colorify-violet);
21
63
  }
@@ -59,5 +59,5 @@ export const ToolbarColors = (props) => {
59
59
  },
60
60
  });
61
61
  }
62
- return (React.createElement(ToolbarButtonWithPopupMenu, Object.assign({}, props, { title: i18n('colorify'), menuItems: items, icon: textColorIcon })));
62
+ 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 }) })));
63
63
  };
@@ -1,3 +1,3 @@
1
- export * from './toolbar';
1
+ export * from './wGptItemData';
2
2
  export * from './gptExtension/gptExtension';
3
3
  export * from './MarkupGpt';
@@ -1,3 +1,3 @@
1
- export * from './toolbar';
1
+ export * from './wGptItemData';
2
2
  export * from './gptExtension/gptExtension';
3
3
  export * from './MarkupGpt';
@@ -1,3 +1,3 @@
1
1
  import { type WToolbarSingleItemData } from '../../../toolbar';
2
2
  export declare const cnGptButton: import("@bem-react/classname").ClassNameFormatter;
3
- export declare const wGptToolbarItem: WToolbarSingleItemData;
3
+ export declare const wGptItemData: WToolbarSingleItemData;
@@ -4,7 +4,7 @@ import gptIcon from '../../../icons/GPT';
4
4
  import { ToolbarDataType } from '../../../toolbar';
5
5
  import { gptHotKeys } from './constants';
6
6
  export const cnGptButton = cn('gpt-button');
7
- export const wGptToolbarItem = {
7
+ export const wGptItemData = {
8
8
  type: ToolbarDataType.SingleButton,
9
9
  id: 'gpt',
10
10
  title: () => `${i18n('help-with-text')}`,
@@ -1,5 +1,5 @@
1
1
  import { DOMSerializer } from 'prosemirror-model';
2
- import { Plugin, PluginKey } from 'prosemirror-state';
2
+ import { Plugin, PluginKey, TextSelection } from 'prosemirror-state';
3
3
  import { Decoration, DecorationSet } from 'prosemirror-view';
4
4
  import { isNodeSelection } from '../../../utils/selection';
5
5
  import { pType } from '../../base/BaseSchema';
@@ -25,6 +25,18 @@ export const gapCursor = () => new Plugin({
25
25
  };
26
26
  },
27
27
  props: {
28
+ handleKeyPress(view) {
29
+ const { state, state: { selection: sel }, } = view;
30
+ if (isGapCursorSelection(sel)) {
31
+ // Replace GapCursorSelection with empty textblock before run all other handlers.
32
+ // This should be done before all inputRules and other handlers, that handle text input.
33
+ // Thus, entering text into a native textblock and into a "virtual" one – GapCursor – will be the same.
34
+ const tr = state.tr.replaceSelectionWith(pType(state.schema).create());
35
+ tr.setSelection(TextSelection.create(tr.doc, sel.pos + 1));
36
+ view.dispatch(tr.scrollIntoView());
37
+ }
38
+ return false;
39
+ },
28
40
  decorations: ({ doc, selection }) => {
29
41
  if (isGapCursorSelection(selection)) {
30
42
  const position = selection.head;
@@ -2,6 +2,6 @@ import { dropCursor } from 'prosemirror-dropcursor';
2
2
  import { gapCursor } from './gapcursor';
3
3
  export { GapCursorSelection, isGapCursorSelection } from './GapCursorSelection';
4
4
  export const Cursor = (builder, opts) => {
5
- builder.addPlugin(() => gapCursor());
5
+ builder.addPlugin(() => gapCursor(), builder.Priority.Highest);
6
6
  builder.addPlugin(() => dropCursor(opts.dropOptions));
7
7
  };
@@ -1,2 +1,2 @@
1
1
  /** During build process, the current version will be injected here */
2
- export const VERSION = typeof '14.5.1' !== 'undefined' ? '14.5.1' : 'unknown';
2
+ export const VERSION = typeof '14.6.0' !== 'undefined' ? '14.6.0' : 'unknown';
package/build/styles.css CHANGED
@@ -607,24 +607,66 @@
607
607
  display: inline-block;
608
608
  margin-top: 8px;
609
609
  }
610
+ .g-md-toolbar-colors__menu-icon_color_gray {
611
+ color: var(--yfm-colorify-gray);
612
+ }
613
+ .g-md-toolbar-colors__chevron-icon_color_gray {
614
+ color: var(--yfm-colorify-gray);
615
+ }
610
616
  .g-md-toolbar-colors__item-icon_color_gray {
611
617
  color: var(--yfm-colorify-gray);
612
618
  }
619
+ .g-md-toolbar-colors__menu-icon_color_yellow {
620
+ color: var(--yfm-colorify-yellow);
621
+ }
622
+ .g-md-toolbar-colors__chevron-icon_color_yellow {
623
+ color: var(--yfm-colorify-yellow);
624
+ }
613
625
  .g-md-toolbar-colors__item-icon_color_yellow {
614
626
  color: var(--yfm-colorify-yellow);
615
627
  }
628
+ .g-md-toolbar-colors__menu-icon_color_orange {
629
+ color: var(--yfm-colorify-orange);
630
+ }
631
+ .g-md-toolbar-colors__chevron-icon_color_orange {
632
+ color: var(--yfm-colorify-orange);
633
+ }
616
634
  .g-md-toolbar-colors__item-icon_color_orange {
617
635
  color: var(--yfm-colorify-orange);
618
636
  }
637
+ .g-md-toolbar-colors__menu-icon_color_red {
638
+ color: var(--yfm-colorify-red);
639
+ }
640
+ .g-md-toolbar-colors__chevron-icon_color_red {
641
+ color: var(--yfm-colorify-red);
642
+ }
619
643
  .g-md-toolbar-colors__item-icon_color_red {
620
644
  color: var(--yfm-colorify-red);
621
645
  }
646
+ .g-md-toolbar-colors__menu-icon_color_green {
647
+ color: var(--yfm-colorify-green);
648
+ }
649
+ .g-md-toolbar-colors__chevron-icon_color_green {
650
+ color: var(--yfm-colorify-green);
651
+ }
622
652
  .g-md-toolbar-colors__item-icon_color_green {
623
653
  color: var(--yfm-colorify-green);
624
654
  }
655
+ .g-md-toolbar-colors__menu-icon_color_blue {
656
+ color: var(--yfm-colorify-blue);
657
+ }
658
+ .g-md-toolbar-colors__chevron-icon_color_blue {
659
+ color: var(--yfm-colorify-blue);
660
+ }
625
661
  .g-md-toolbar-colors__item-icon_color_blue {
626
662
  color: var(--yfm-colorify-blue);
627
663
  }
664
+ .g-md-toolbar-colors__menu-icon_color_violet {
665
+ color: var(--yfm-colorify-violet);
666
+ }
667
+ .g-md-toolbar-colors__chevron-icon_color_violet {
668
+ color: var(--yfm-colorify-violet);
669
+ }
628
670
  .g-md-toolbar-colors__item-icon_color_violet {
629
671
  color: var(--yfm-colorify-violet);
630
672
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/markdown-editor",
3
- "version": "14.5.1",
3
+ "version": "14.6.0",
4
4
  "description": "Markdown wysiwyg and markup editor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -170,7 +170,7 @@
170
170
  "@gravity-ui/i18n": "^1.1.0",
171
171
  "@gravity-ui/icons": "^2.10.0",
172
172
  "@lezer/highlight": "~1.2.1",
173
- "@lezer/markdown": "~1.3.1",
173
+ "@lezer/markdown": "~1.3.2",
174
174
  "@types/is-number": "^7.0.1",
175
175
  "@types/markdown-it": "^12.2.3",
176
176
  "base64-arraybuffer": "1.0.2",