@atlaskit/editor-plugin-toolbar-lists-indentation
Version:
Toolbar lists and indentation plugin for @atlaskit/editor-core
182 lines • 8.33 kB
JavaScript
import React from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { toggleBulletList as toggleBulletListKeymap, toggleOrderedList as toggleOrderedListKeymap, toggleTaskList as toggleTaskListKeymap, formatShortcut, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { listMessages, tasksAndDecisionsMessages } from '@atlaskit/editor-common/messages';
import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
import { ListBulletedIcon, ListNumberedIcon, ToolbarButton, ToolbarTooltip } from '@atlaskit/editor-toolbar';
import TaskIcon from '@atlaskit/icon/core/task';
function useListsIndentationHeroButtonInfo({
api,
parents,
defaultListType
}) {
const {
formatMessage
} = useIntl();
const {
bulletListActive,
bulletListDisabled,
orderedListActive,
taskListActive
} = useSharedPluginStateWithSelector(api, ['list', 'taskDecision'], states => {
var _states$listState, _states$listState2, _states$listState3, _states$taskDecisionS;
return {
bulletListActive: (_states$listState = states.listState) === null || _states$listState === void 0 ? void 0 : _states$listState.bulletListActive,
bulletListDisabled: (_states$listState2 = states.listState) === null || _states$listState2 === void 0 ? void 0 : _states$listState2.bulletListDisabled,
orderedListActive: (_states$listState3 = states.listState) === null || _states$listState3 === void 0 ? void 0 : _states$listState3.orderedListActive,
taskListActive: (_states$taskDecisionS = states.taskDecisionState) === null || _states$taskDecisionS === void 0 ? void 0 : _states$taskDecisionS.isInsideTask
};
});
const getListType = taskListActive ? 'taskList' : orderedListActive ? 'orderedList' : defaultListType;
const taskListKeymap = toggleTaskListKeymap;
const getKeymap = getListType === 'taskList' ? taskListKeymap : getListType === 'orderedList' ? toggleOrderedListKeymap : toggleBulletListKeymap;
const shortcut = formatShortcut(getKeymap);
const keymap = getKeymap;
const message = getListType === 'taskList' ? formatMessage(tasksAndDecisionsMessages.taskList) : getListType === 'orderedList' ? formatMessage(listMessages.orderedList) : formatMessage(listMessages.bulletedList);
const onClick = () => {
const inputMethod = getInputMethodFromParentKeys(parents);
if (getListType === 'taskList') {
var _api$taskDecision;
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 ? void 0 : _api$taskDecision.commands.toggleTaskList());
} else if (getListType === 'orderedList') {
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleOrderedList(inputMethod));
} else {
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleBulletList(inputMethod));
}
};
const iconBefore = getListType === 'taskList' ? /*#__PURE__*/React.createElement(TaskIcon, {
label: formatMessage(tasksAndDecisionsMessages.taskList),
size: "small"
}) : getListType === 'orderedList' ? /*#__PURE__*/React.createElement(ListNumberedIcon, {
label: formatMessage(listMessages.orderedList),
size: "small"
}) : /*#__PURE__*/React.createElement(ListBulletedIcon, {
label: formatMessage(listMessages.bulletedList),
size: "small"
});
const isSelected = getListType === 'bulletList' ? bulletListActive : getListType === 'orderedList' ? orderedListActive : taskListActive;
const isDisabled = !orderedListActive && !taskListActive && bulletListDisabled;
return {
shortcut,
keymap,
message,
onClick,
iconBefore,
isSelected,
isDisabled
};
}
export const ListsIndentationHeroButtonCollapsed = ({
api,
parents
}) => {
const {
shortcut,
keymap,
message,
onClick,
iconBefore,
isSelected,
isDisabled
} = useListsIndentationHeroButtonInfo({
api,
parents,
defaultListType: 'bulletList'
});
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: /*#__PURE__*/React.createElement(ToolTipContent, {
description: message,
keymap: keymap
})
}, /*#__PURE__*/React.createElement(ToolbarButton, {
iconBefore: iconBefore,
isSelected: isSelected,
isDisabled: isDisabled,
ariaKeyshortcuts: shortcut,
onClick: onClick
}));
};
export const ListsIndentationHeroButtonNew = ({
api,
parents
}) => {
const {
shortcut,
keymap,
message,
onClick,
iconBefore,
isSelected,
isDisabled
} = useListsIndentationHeroButtonInfo({
api,
parents,
defaultListType: 'orderedList'
});
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: /*#__PURE__*/React.createElement(ToolTipContent, {
description: message,
keymap: keymap
})
}, /*#__PURE__*/React.createElement(ToolbarButton, {
iconBefore: iconBefore,
isSelected: isSelected,
isDisabled: isDisabled,
ariaKeyshortcuts: shortcut,
onClick: onClick
}));
};
export const ListsIndentationHeroButton = ({
api,
parents
}) => {
const {
formatMessage
} = useIntl();
const {
bulletListActive,
bulletListDisabled,
orderedListActive,
taskListActive
} = useSharedPluginStateWithSelector(api, ['list', 'taskDecision'], states => {
var _states$listState4, _states$listState5, _states$listState6, _states$taskDecisionS2;
return {
bulletListActive: (_states$listState4 = states.listState) === null || _states$listState4 === void 0 ? void 0 : _states$listState4.bulletListActive,
bulletListDisabled: (_states$listState5 = states.listState) === null || _states$listState5 === void 0 ? void 0 : _states$listState5.bulletListDisabled,
orderedListActive: (_states$listState6 = states.listState) === null || _states$listState6 === void 0 ? void 0 : _states$listState6.orderedListActive,
taskListActive: (_states$taskDecisionS2 = states.taskDecisionState) === null || _states$taskDecisionS2 === void 0 ? void 0 : _states$taskDecisionS2.isInsideTask
};
});
const taskListKeymap = toggleTaskListKeymap;
const shortcut = taskListActive ? formatShortcut(taskListKeymap) : orderedListActive ? formatShortcut(toggleOrderedListKeymap) : formatShortcut(toggleBulletListKeymap);
const onClick = () => {
const inputMethod = getInputMethodFromParentKeys(parents);
if (taskListActive) {
var _api$taskDecision2;
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$taskDecision2 = api.taskDecision) === null || _api$taskDecision2 === void 0 ? void 0 : _api$taskDecision2.commands.toggleTaskList());
} else if (orderedListActive) {
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleOrderedList(inputMethod));
} else {
api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleBulletList(inputMethod));
}
};
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
content: taskListActive ? formatMessage(tasksAndDecisionsMessages.taskList) : orderedListActive ? formatMessage(listMessages.orderedList) : formatMessage(listMessages.bulletedList)
}, /*#__PURE__*/React.createElement(ToolbarButton, {
iconBefore: taskListActive ? /*#__PURE__*/React.createElement(TaskIcon, {
label: formatMessage(tasksAndDecisionsMessages.taskList),
size: "small"
}) : orderedListActive ? /*#__PURE__*/React.createElement(ListNumberedIcon, {
label: formatMessage(listMessages.orderedList),
size: "small"
}) : /*#__PURE__*/React.createElement(ListBulletedIcon, {
label: formatMessage(listMessages.bulletedList),
size: "small"
}),
isSelected: bulletListActive || orderedListActive || taskListActive,
isDisabled: !orderedListActive && !taskListActive && bulletListDisabled,
ariaKeyshortcuts: shortcut,
onClick: onClick
}));
};