diff --git a/src/i18n/menubar/en.json b/src/i18n/menubar/en.json index 53507984..e6f1f522 100644 --- a/src/i18n/menubar/en.json +++ b/src/i18n/menubar/en.json @@ -19,6 +19,7 @@ "olist": "Ordered list", "list__action_sink": "Sink item", "list__action_lift": "Lift item", + "list_action_disabled": "Contradicts the logic of the list", "checkbox": "Checkbox", "quote": "Quote", "cut": "Cut", diff --git a/src/i18n/menubar/ru.json b/src/i18n/menubar/ru.json index 7fcbf3c3..1e087e27 100644 --- a/src/i18n/menubar/ru.json +++ b/src/i18n/menubar/ru.json @@ -19,6 +19,7 @@ "olist": "Нумерованный список", "list__action_sink": "Увеличить отступ", "list__action_lift": "Уменьшить отступ", + "list_action_disabled": "Противоречит логике списка", "checkbox": "Контрольный список", "quote": "Цитата", "cut": "Кат", diff --git a/src/toolbar/ToolbarButton.tsx b/src/toolbar/ToolbarButton.tsx index 48d4bd77..c5f7930e 100644 --- a/src/toolbar/ToolbarButton.tsx +++ b/src/toolbar/ToolbarButton.tsx @@ -23,6 +23,7 @@ export function ToolbarButton({ editor, icon, disabledPopoverVisible = true, + hintWhenDisabled, exec, focus, onClick, @@ -35,11 +36,18 @@ export function ToolbarButton({ const buttonRef = useRef(null); const titleText: string = isFunction(title) ? title() : title; + const hideHintWhenDisabled = hintWhenDisabled === false || !disabledPopoverVisible || !disabled; + const hintWhenDisabledText = + typeof hintWhenDisabled === 'string' + ? hintWhenDisabled + : typeof hintWhenDisabled === 'function' + ? hintWhenDisabled() + : i18n('toolbar_action_disabled'); return ( diff --git a/src/toolbar/ToolbarListButton.tsx b/src/toolbar/ToolbarListButton.tsx index cfad46c4..d193e2f9 100644 --- a/src/toolbar/ToolbarListButton.tsx +++ b/src/toolbar/ToolbarListButton.tsx @@ -93,17 +93,40 @@ export function ToolbarListButton({ {data - .map(({id, title, icon, hotkey, isActive, isEnable, exec, hint}) => { + .map((data) => { + const { + id, + title, + icon, + hotkey, + isActive, + isEnable, + exec, + hint, + hintWhenDisabled, + disabledPopoverVisible = true, + } = data; + const titleText = isFunction(title) ? title() : title; const hintText = isFunction(hint) ? hint() : hint; const disabled = !isEnable(editor); + + const hideHintWhenDisabled = + hintWhenDisabled === false || !disabledPopoverVisible || !disabled; + const hintWhenDisabledText = + typeof hintWhenDisabled === 'string' + ? hintWhenDisabled + : typeof hintWhenDisabled === 'function' + ? hintWhenDisabled() + : i18n('toolbar_action_disabled'); + return ( e.actions.undo.run(), isActive: (e) => e.actions.undo.isActive(), isEnable: (e) => e.actions.undo.isEnable(), @@ -40,7 +40,7 @@ export const wHistoryGroupConfig: WToolbarGroupData = [ title: i18n.bind(null, 'redo'), icon: icons.redo, hotkey: f.toView(A.Redo), - disabledPopoverVisible: true, + hintWhenDisabled: false, exec: (e) => e.actions.redo.run(), isActive: (e) => e.actions.redo.isActive(), isEnable: (e) => e.actions.redo.isEnable(), @@ -204,7 +204,7 @@ export const wListsListConfig: WToolbarListButtonData = { title: i18n.bind(null, 'list__action_sink'), icon: icons.sink, hotkey: f.toView(A.SinkListItem), - disabledPopoverVisible: true, + hintWhenDisabled: () => i18n('list_action_disabled'), exec: (e) => e.actions.sinkListItem.run(), isActive: (e) => e.actions.sinkListItem.isActive(), isEnable: (e) => e.actions.sinkListItem.isEnable(), @@ -214,7 +214,7 @@ export const wListsListConfig: WToolbarListButtonData = { title: i18n.bind(null, 'list__action_lift'), icon: icons.lift, hotkey: f.toView(A.LiftListItem), - disabledPopoverVisible: true, + hintWhenDisabled: () => i18n('list_action_disabled'), exec: (e) => e.actions.liftListItem.run(), isActive: (e) => e.actions.liftListItem.isActive(), isEnable: (e) => e.actions.liftListItem.isEnable(), diff --git a/src/toolbar/types.ts b/src/toolbar/types.ts index c9229d4f..57a94e9d 100644 --- a/src/toolbar/types.ts +++ b/src/toolbar/types.ts @@ -18,7 +18,20 @@ export type ToolbarItemData = { title: string | (() => string); hint?: string | (() => string); hotkey?: HotkeyProps['value']; + /** @deprecated Use _hintWhenDisabled_ setting instead */ disabledPopoverVisible?: boolean; + /** + * Show hint when _isEnable()_ returns false + * + * `false` – don't show hint; + * + * `true` – show default hint; + * + * `string` or `() => string` – show hint with custom message. + * + * @default true + */ + hintWhenDisabled?: boolean | string | (() => string); exec(editor: E): void; isActive(editor: E): boolean; isEnable(editor: E): boolean;