@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.
- package/build/cjs/bundle/config/wysiwyg.d.ts +0 -1
- package/build/cjs/bundle/config/wysiwyg.js +2 -13
- package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.d.ts +4 -0
- package/build/cjs/bundle/toolbar/ToolbarButtonWithPopupMenu.js +11 -5
- package/build/cjs/bundle/toolbar/custom/ToolbarColors.css +42 -0
- package/build/cjs/bundle/toolbar/custom/ToolbarColors.js +1 -1
- package/build/cjs/extensions/additional/GPT/index.d.ts +1 -1
- package/build/cjs/extensions/additional/GPT/index.js +1 -1
- package/build/cjs/extensions/additional/GPT/{toolbar.d.ts → wGptItemData.d.ts} +1 -1
- package/build/cjs/extensions/additional/GPT/{toolbar.js → wGptItemData.js} +2 -2
- package/build/cjs/extensions/behavior/Cursor/gapcursor.js +12 -0
- package/build/cjs/extensions/behavior/Cursor/index.js +1 -1
- package/build/cjs/version.js +1 -1
- package/build/esm/bundle/config/wysiwyg.d.ts +0 -1
- package/build/esm/bundle/config/wysiwyg.js +0 -11
- package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.d.ts +4 -0
- package/build/esm/bundle/toolbar/ToolbarButtonWithPopupMenu.js +11 -5
- package/build/esm/bundle/toolbar/custom/ToolbarColors.css +42 -0
- package/build/esm/bundle/toolbar/custom/ToolbarColors.js +1 -1
- package/build/esm/extensions/additional/GPT/index.d.ts +1 -1
- package/build/esm/extensions/additional/GPT/index.js +1 -1
- package/build/esm/extensions/additional/GPT/{toolbar.d.ts → wGptItemData.d.ts} +1 -1
- package/build/esm/extensions/additional/GPT/{toolbar.js → wGptItemData.js} +1 -1
- package/build/esm/extensions/behavior/Cursor/gapcursor.js +13 -1
- package/build/esm/extensions/behavior/Cursor/index.js +1 -1
- package/build/esm/version.js +1 -1
- package/build/styles.css +42 -0
- 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.
|
|
4
|
-
exports.wSelectionMenuConfigByPreset = exports.wHiddenDataByPreset = exports.wCommandMenuConfigByPreset = exports.wToolbarConfigByPreset =
|
|
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
|
|
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:
|
|
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,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("./
|
|
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
|
|
3
|
+
export declare const wGptItemData: WToolbarSingleItemData;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
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.
|
|
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;
|
package/build/cjs/version.js
CHANGED
|
@@ -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
|
+
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
|
|
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:
|
|
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
1
|
import { type WToolbarSingleItemData } from '../../../toolbar';
|
|
2
2
|
export declare const cnGptButton: import("@bem-react/classname").ClassNameFormatter;
|
|
3
|
-
export declare const
|
|
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
|
|
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
|
};
|
package/build/esm/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/** During build process, the current version will be injected here */
|
|
2
|
-
export const VERSION = typeof '14.
|
|
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.
|
|
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.
|
|
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",
|