@atlaskit/editor-plugin-code-block
Version:
Code block plugin for @atlaskit/editor-core
188 lines (186 loc) • 10.2 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
import commonMessages, { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
import CopyIcon from '@atlaskit/icon/core/copy';
import DeleteIcon from '@atlaskit/icon/core/delete';
import TextWrapIcon from '@atlaskit/icon/core/text-wrap';
import { changeLanguage, copyContentToClipboardWithAnalytics, removeCodeBlockWithAnalytics, resetCopiedState, toggleWordWrapStateForCodeBlockNode } from '../editor-commands';
import { WrapIcon } from '../ui/icons/WrapIcon';
import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './codeBlockCopySelectionPlugin';
import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
import { pluginKey } from './plugin-key';
export var getToolbarConfig = function getToolbarConfig() {
var allowCopyToClipboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var api = arguments.length > 1 ? arguments[1] : undefined;
var overrideLanguageName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
return function (state, _ref) {
var _api$editorViewMode, _api$decorations$acti, _api$decorations, _api$analytics, _codeBlockState$pos, _node$attrs;
var formatMessage = _ref.formatMessage;
var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
var _ref2 = (_api$decorations$acti = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {},
hoverDecoration = _ref2.hoverDecoration;
var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
var codeBlockState = pluginKey.getState(state);
var pos = (_codeBlockState$pos = codeBlockState === null || codeBlockState === void 0 ? void 0 : codeBlockState.pos) !== null && _codeBlockState$pos !== void 0 ? _codeBlockState$pos : null;
if (!codeBlockState || pos === null) {
return;
}
var node = state.doc.nodeAt(pos);
var nodeType = state.schema.nodes.codeBlock;
if ((node === null || node === void 0 ? void 0 : node.type) !== nodeType) {
return;
}
var isWrapped = isCodeBlockWordWrapEnabled(node);
var language = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
var languageList = createLanguageList(overrideLanguageName ? DEFAULT_LANGUAGES.map(function (language) {
return _objectSpread(_objectSpread({}, language), {}, {
name: overrideLanguageName(language.name)
});
}) : DEFAULT_LANGUAGES);
var options = languageList.map(function (lang) {
return {
label: lang.name,
value: getLanguageIdentifier(lang),
alias: lang.alias
};
});
// If language is not undefined search for it in the value and then search in the aliases
var defaultValue = language ? options.find(function (option) {
return option.value === language;
}) || options.find(function (option) {
return option.alias.includes(language);
}) : null;
var languageSelect = {
id: 'editor.codeBlock.languageOptions',
type: 'select',
selectType: 'list',
onChange: function onChange(option) {
return changeLanguage(editorAnalyticsAPI)(option.value);
},
defaultValue: defaultValue,
placeholder: formatMessage(codeBlockButtonMessages.selectLanguage),
options: options,
filterOption: languageListFilter
};
var separator = {
type: 'separator'
};
var areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
var copyToClipboardItems = !allowCopyToClipboard ? [] : [{
id: 'editor.codeBlock.copy',
type: 'button',
supportsViewMode: true,
appearance: 'subtle',
icon: CopyIcon,
// note: copyContentToClipboardWithAnalytics contains logic that also removes the
// visual feedback for the copy button
onClick: copyContentToClipboardWithAnalytics(editorAnalyticsAPI),
title: formatMessage(codeBlockState.contentCopied ? codeBlockButtonMessages.copiedCodeToClipboard : codeBlockButtonMessages.copyCodeToClipboard),
onMouseEnter: provideVisualFeedbackForCopyButton,
// note: resetCopiedState contains logic that also removes the
// visual feedback for the copy button
onMouseLeave: resetCopiedState,
onFocus: provideVisualFeedbackForCopyButton,
onBlur: removeVisualFeedbackForCopyButton,
hideTooltipOnClick: false,
disabled: codeBlockState.isNodeSelected,
tabIndex: null
}, separator];
var copyAndDeleteButtonMenuItems = [];
if (areAnyNewToolbarFlagsEnabled) {
var overflowMenuOptions = [{
title: formatMessage(commonMessages.delete),
icon: DeleteIcon({
label: ''
}),
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
onClick: removeCodeBlockWithAnalytics(editorAnalyticsAPI)
}];
if (allowCopyToClipboard) {
overflowMenuOptions.unshift({
title: formatMessage(commonMessages.copyToClipboard),
onClick: copyContentToClipboardWithAnalytics(editorAnalyticsAPI),
icon: CopyIcon({
label: ''
}),
onMouseEnter: provideVisualFeedbackForCopyButton,
onMouseLeave: resetCopiedState,
onFocus: provideVisualFeedbackForCopyButton,
onBlur: removeVisualFeedbackForCopyButton,
disabled: codeBlockState.isNodeSelected
});
}
copyAndDeleteButtonMenuItems = isViewMode ? [].concat(copyToClipboardItems) : [{
type: 'separator',
fullHeight: true
}, {
type: 'overflow-dropdown',
testId: 'code-block-overflow-dropdown-trigger',
options: overflowMenuOptions
}];
} else {
var deleteButton = {
id: 'editor.codeBlock.delete',
type: 'button',
appearance: 'danger',
icon: DeleteIcon,
iconFallback: DeleteIcon,
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
onClick: removeCodeBlockWithAnalytics(editorAnalyticsAPI),
title: formatMessage(commonMessages.remove),
tabIndex: null
};
copyAndDeleteButtonMenuItems = [separator].concat(copyToClipboardItems, [deleteButton]);
}
var codeBlockWrapButton = {
id: 'editor.codeBlock.wrap',
type: 'button',
supportsViewMode: true,
icon: TextWrapIcon,
iconFallback: WrapIcon,
onClick: toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI),
title: formatMessage(codeBlockButtonMessages.wrapCode),
tabIndex: null,
selected: isWrapped
};
return {
title: 'CodeBlock floating controls',
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
getDomRef: function getDomRef(view) {
return findDomRefAtPos(pos, view.domAtPos.bind(view));
},
nodeType: nodeType,
items: [languageSelect].concat(_toConsumableArray(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], _toConsumableArray(copyAndDeleteButtonMenuItems)),
scrollable: true
};
};
};
/**
* Filters language list based on both name and alias properties.
* @param option
* @param rawInput
* @example
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export var languageListFilter = function languageListFilter(option, rawInput) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var _ref3 = option,
data = _ref3.data;
var searchString = rawInput.toLowerCase();
return data.label.toLowerCase().includes(searchString) || data.alias.some(function (alias) {
return alias.toLowerCase() === searchString;
});
};