@atlaskit/editor-plugin-text-formatting
Version:
Text-formatting plugin for @atlaskit/editor-core
272 lines (271 loc) • 10.9 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useMemo } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { TOOLBAR_ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
import { getAriaKeyshortcuts, toggleBold, toggleCode, toggleItalic, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleUnderline, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { toolbarMessages } from '@atlaskit/editor-common/messages';
import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
import BoldIcon from '@atlaskit/icon/core/text-bold';
import ItalicIcon from '@atlaskit/icon/core/text-italic';
import TextStrikethroughIcon from '@atlaskit/icon/core/text-strikethrough';
import UnderlineIcon from '@atlaskit/icon/core/text-underline';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../editor-commands/toggle-mark';
import { Subscript, Superscript } from '../icons';
import { getInputMethod } from '../input-method-utils';
import { IconTypes } from '../types';
var withInputMethod = function withInputMethod(toolbarType, func) {
return editorCommandToPMCommand(func(getInputMethod(toolbarType)));
};
var IconButtons = function IconButtons(editorAnalyticsAPI, toolbarType) {
return {
strong: {
buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
command: withInputMethod(toolbarType, toggleStrongWithAnalytics(editorAnalyticsAPI)),
message: toolbarMessages.bold,
tooltipKeymap: toggleBold,
component: function component() {
return jsx(BoldIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
});
}
},
em: {
buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
command: withInputMethod(toolbarType, toggleEmWithAnalytics(editorAnalyticsAPI)),
message: toolbarMessages.italic,
tooltipKeymap: toggleItalic,
component: function component() {
return jsx(ItalicIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
});
}
},
underline: {
buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_UNDERLINE,
command: withInputMethod(toolbarType, toggleUnderlineWithAnalytics(editorAnalyticsAPI)),
message: toolbarMessages.underline,
tooltipKeymap: toggleUnderline,
component: function component() {
return jsx(UnderlineIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
});
}
},
strike: {
command: withInputMethod(toolbarType, toggleStrikeWithAnalytics(editorAnalyticsAPI)),
message: toolbarMessages.strike,
tooltipKeymap: toggleStrikethrough
},
code: {
command: withInputMethod(toolbarType, toggleCodeWithAnalytics(editorAnalyticsAPI)),
message: toolbarMessages.code,
tooltipKeymap: toggleCode
},
subscript: {
command: withInputMethod(toolbarType, toggleSubscriptWithAnalytics(editorAnalyticsAPI)),
message: toolbarMessages.subscript,
tooltipKeymap: toggleSubscript
},
superscript: {
command: withInputMethod(toolbarType, toggleSuperscriptWithAnalytics(editorAnalyticsAPI)),
message: toolbarMessages.superscript,
tooltipKeymap: toggleSuperscript
}
};
};
var IconBefore = {
strong: {
icon: jsx(BoldIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
})
},
em: {
icon: jsx(ItalicIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
})
},
underline: {
icon: jsx(UnderlineIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
})
},
strike: {
icon: jsx(TextStrikethroughIcon, {
label: ""
})
},
code: {
icon: jsx(AngleBracketsIcon, {
color: "currentColor",
spacing: "spacious",
label: ""
})
},
subscript: {
icon: jsx(Subscript, null)
},
superscript: {
icon: jsx(Superscript, null)
}
};
var getIcon = function getIcon(_ref) {
var iconType = _ref.iconType,
isDisabled = _ref.isDisabled,
isActive = _ref.isActive,
intl = _ref.intl,
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
toolbarType = _ref.toolbarType;
var icon = IconButtons(editorAnalyticsAPI, toolbarType)[iconType];
var iconBefore = IconBefore[iconType].icon;
var content = intl.formatMessage(icon.message);
var tooltipKeymap = icon.tooltipKeymap;
return {
content: content,
buttonId: icon.buttonId,
iconMark: iconType,
key: iconType,
command: icon.command,
iconElement: icon.component ? icon.component() : undefined,
tooltipElement: tooltipKeymap ? jsx(ToolTipContent, {
description: content,
keymap: tooltipKeymap
}) : undefined,
elemBefore: editorExperiment('platform_editor_controls', 'variant1') ? iconBefore : undefined,
elemAfter: tooltipKeymap ?
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
jsx("div", {
css: shortcutStyle
}, tooltip(tooltipKeymap)) : undefined,
value: {
name: iconType
},
isActive: isActive,
isDisabled: isDisabled,
'aria-label': tooltipKeymap ? tooltip(tooltipKeymap, String(content)) : String(content),
'aria-keyshortcuts': getAriaKeyshortcuts(tooltipKeymap)
};
};
var IconsMarkSchema = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, IconTypes.strong, 'strong'), IconTypes.em, 'em'), IconTypes.strike, 'strike'), IconTypes.code, 'code'), IconTypes.underline, 'underline'), IconTypes.superscript, 'subsup'), IconTypes.subscript, 'subsup');
var buildMenuIconState = function buildMenuIconState(iconMark) {
return function (_ref2) {
var schema = _ref2.schema,
textFormattingState = _ref2.textFormattingState;
var hasPluginState = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.isInitialised);
var markSchema = IconsMarkSchema[iconMark];
var hasSchemaMark = Boolean(schema.marks[markSchema]);
if (!hasPluginState) {
return {
isActive: false,
isDisabled: true,
isHidden: false,
hasSchemaMark: hasSchemaMark
};
}
var isActive = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
var isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Disabled")];
var isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Hidden")];
return {
isActive: Boolean(isActive),
isDisabled: Boolean(isDisabled),
isHidden: Boolean(isHidden),
hasSchemaMark: hasSchemaMark
};
};
};
var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI, toolbarType) {
var getState = buildMenuIconState(iconMark);
return function (_ref3) {
var schema = _ref3.schema,
textFormattingState = _ref3.textFormattingState,
intl = _ref3.intl,
isToolbarDisabled = _ref3.isToolbarDisabled;
var iconState = getState({
schema: schema,
textFormattingState: textFormattingState
});
var isActive = iconState.isActive,
isDisabled = iconState.isDisabled,
isHidden = iconState.isHidden,
hasSchemaMark = iconState.hasSchemaMark;
var iconComponent = useMemo(function () {
return getIcon({
iconType: IconTypes[iconMark],
isDisabled: isToolbarDisabled || isDisabled,
isActive: isActive,
intl: intl,
editorAnalyticsAPI: editorAnalyticsAPI,
toolbarType: toolbarType
});
}, [isToolbarDisabled, isDisabled, isActive, intl]);
var shouldRenderIcon = hasSchemaMark && !isHidden;
return useMemo(function () {
return shouldRenderIcon ? iconComponent : null;
}, [shouldRenderIcon, iconComponent]);
};
};
export var useFormattingIcons = function useFormattingIcons(_ref4) {
var isToolbarDisabled = _ref4.isToolbarDisabled,
textFormattingState = _ref4.textFormattingState,
schema = _ref4.schema,
intl = _ref4.intl,
editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
toolbarType = _ref4.toolbarType;
var props = {
schema: schema,
textFormattingState: textFormattingState,
intl: intl,
isToolbarDisabled: Boolean(isToolbarDisabled),
toolbarType: toolbarType
};
var buildStrongIcon = buildIcon(IconTypes.strong, editorAnalyticsAPI, toolbarType);
var buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI, toolbarType);
var buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI, toolbarType);
var buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI, toolbarType);
var buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI, toolbarType);
var buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI, toolbarType);
var buildSuperscriptIcon = buildIcon(IconTypes.superscript, editorAnalyticsAPI, toolbarType);
var strongIcon = buildStrongIcon(props);
var emIcon = buildEmIcon(props);
var underlineIcon = buildUnderlineIcon(props);
var strikeIcon = buildStrikeIcon(props);
var codeIcon = buildCodeIcon(props);
var subscriptIcon = buildSubscriptIcon(props);
var superscriptIcon = buildSuperscriptIcon(props);
var result = useMemo(function () {
return [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon];
}, [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon]);
return result;
};
export var useHasFormattingActived = function useHasFormattingActived(_ref5) {
var iconTypeList = _ref5.iconTypeList,
textFormattingState = _ref5.textFormattingState;
var hasActiveFormatting = useMemo(function () {
if (!(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.isInitialised)) {
return false;
}
return iconTypeList.some(function (iconType) {
return textFormattingState["".concat(iconType, "Active")];
});
}, [textFormattingState, iconTypeList]);
return hasActiveFormatting;
};