@atlaskit/editor-plugin-code-block
Version:
Code block plugin for @atlaskit/editor-core
321 lines (318 loc) • 19.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.languageListFilter = exports.getToolbarConfig = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _codeBlock = require("@atlaskit/editor-common/code-block");
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _angleBrackets = _interopRequireDefault(require("@atlaskit/icon/core/angle-brackets"));
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
var _listNumbered = _interopRequireDefault(require("@atlaskit/icon/core/list-numbered"));
var _textWrap = _interopRequireDefault(require("@atlaskit/icon/core/text-wrap"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
var _editorCommands = require("../editor-commands");
var _CodeBlockLanguagePicker = require("../ui/CodeBlockLanguagePicker");
var _WrapIcon = require("../ui/icons/WrapIcon");
var _languagePickerOptions = require("../ui/language-picker-options");
var _formatter = require("../utils/format-code/formatter");
var _autoDetectState = require("./auto-detect-state");
var _codeBlockCopySelectionPlugin = require("./codeBlockCopySelectionPlugin");
var _languageList = require("./language-list");
var _pluginKey = require("./plugin-key");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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; }
var getDetectLanguageOption = function getDetectLanguageOption(formatMessage) {
return {
alias: [],
label: formatMessage(_messages.codeBlockButtonMessages.detectLanguage),
value: _languagePickerOptions.DETECT_LANGUAGE_VALUE
};
};
var getNoneDetectedOption = function getNoneDetectedOption(formatMessage) {
return {
alias: [],
label: formatMessage(_messages.codeBlockButtonMessages.noneDetected),
value: _languagePickerOptions.NONE_LANGUAGE_VALUE
};
};
var getDefaultLanguagePickerValue = function getDefaultLanguagePickerValue(language, languagePickerOptions) {
return language ? languagePickerOptions.find(function (option) {
return language === _languagePickerOptions.NONE_LANGUAGE_VALUE ? option.value === _languagePickerOptions.PLAIN_TEXT_LANGUAGE_VALUE : option.value === language || option.alias.includes(language);
}) : undefined;
};
var getAutoDetectPickerValue = function getAutoDetectPickerValue(_ref) {
var autoDetectEntry = _ref.autoDetectEntry,
formatMessage = _ref.formatMessage,
language = _ref.language,
languagePickerOptions = _ref.languagePickerOptions;
var defaultPickerValue = getDefaultLanguagePickerValue(language, languagePickerOptions);
// A weak re-detection records noneDetected but can leave a previously auto-detected
// language on the node. Keep showing "(detected)" only while that preserved language
// still matches the node language, so manual language changes do not inherit the label.
var shouldShowDetectedLabel = Boolean(defaultPickerValue) && (autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.autoDetectedLanguage) === language && Boolean(autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult);
if (shouldShowDetectedLabel && defaultPickerValue) {
return _objectSpread(_objectSpread({}, defaultPickerValue), {}, {
label: formatMessage(_messages.codeBlockButtonMessages.detectedLanguage, {
language: defaultPickerValue.label
})
});
}
if (language || !autoDetectEntry) {
return defaultPickerValue;
}
if (autoDetectEntry.detectionResult === 'noneDetected') {
return getNoneDetectedOption(formatMessage);
}
if (!autoDetectEntry.detectionResult) {
return getDetectLanguageOption(formatMessage);
}
return undefined;
};
var getToolbarConfig = exports.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;
var formatCodeProvider = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
var languageList = (0, _languageList.createLanguageList)(overrideLanguageName ? _languageList.DEFAULT_LANGUAGES.map(function (languageOption) {
return _objectSpread(_objectSpread({}, languageOption), {}, {
name: overrideLanguageName(languageOption.name)
});
}) : _languageList.DEFAULT_LANGUAGES);
var languagePickerOptions = languageList.map(function (lang) {
return {
label: lang.name,
value: (0, _languageList.getLanguageIdentifier)(lang),
alias: lang.alias
};
});
return function (state, _ref2) {
var _api$editorViewMode, _api$decorations$acti, _api$decorations, _api$analytics, _codeBlockState$pos, _node$attrs, _node$attrs2;
var formatMessage = _ref2.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 _ref3 = (_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 = _ref3.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.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 = (0, _codeBlock.isCodeBlockWordWrapEnabled)(node);
var areLineNumbersVisible = (0, _codeBlock.areCodeBlockLineNumbersVisible)(node);
var language = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
var localId = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId;
var autoDetectState = _autoDetectState.autoDetectPluginKey.getState(state);
var isFormatCodePending = typeof localId === 'string' && Boolean(codeBlockState.pendingFormats[localId]);
// Keep fresh option objects for the legacy toolbar select so reopening it
// continues to start from the top rather than preserving the previously
// focused option by reference.
var languageSelectOptions = languagePickerOptions.map(function (option) {
return _objectSpread({}, option);
});
var defaultValue = language ? languageSelectOptions.find(function (option) {
return option.value === language;
}) || languageSelectOptions.find(function (option) {
return option.alias.includes(language);
}) : null;
var languageSelect = {
id: 'editor.codeBlock.languageOptions',
type: 'select',
selectType: 'list',
onChange: function onChange(option) {
return (0, _editorCommands.changeLanguage)(editorAnalyticsAPI)(option.value);
},
defaultValue: defaultValue,
placeholder: formatMessage(_messages.codeBlockButtonMessages.selectLanguage),
options: languageSelectOptions,
filterOption: languageListFilter
};
var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
var languagePicker;
if ((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_code_block_add_line_number_button')) {
var autoDetectEntry = typeof localId === 'string' && (0, _platformFeatureFlags.fg)('platform_editor_code_block_language_detection_flow') ? autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId] : undefined;
var autoDetectPickerValue = getAutoDetectPickerValue({
autoDetectEntry: autoDetectEntry,
formatMessage: formatMessage,
language: language,
languagePickerOptions: languagePickerOptions
});
languagePicker = {
type: 'custom',
fallback: [],
render: function render(view) {
if (!view) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_CodeBlockLanguagePicker.CodeBlockLanguagePicker, {
api: api,
defaultValue: autoDetectPickerValue,
editorView: view,
filterOption: languageListFilter,
formatMessage: formatMessage,
languagePickerOptions: languagePickerOptions,
triggerSpacing: !areAnyNewToolbarFlagsEnabled && (0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch') ? 'compact' : 'default'
});
}
};
}
var separator = {
type: 'separator'
};
var copyToClipboardItems = !allowCopyToClipboard ? [] : [{
id: 'editor.codeBlock.copy',
type: 'button',
supportsViewMode: true,
appearance: 'subtle',
icon: _copy.default,
// note: copyContentToClipboardWithAnalytics contains logic that also removes the
// visual feedback for the copy button
onClick: (0, _editorCommands.copyContentToClipboardWithAnalytics)(editorAnalyticsAPI),
title: formatMessage(codeBlockState.contentCopied ? _messages.codeBlockButtonMessages.copiedCodeToClipboard : _messages.codeBlockButtonMessages.copyCodeToClipboard),
onMouseEnter: _codeBlockCopySelectionPlugin.provideVisualFeedbackForCopyButton,
// note: resetCopiedState contains logic that also removes the
// visual feedback for the copy button
onMouseLeave: _editorCommands.resetCopiedState,
onFocus: _codeBlockCopySelectionPlugin.provideVisualFeedbackForCopyButton,
onBlur: _codeBlockCopySelectionPlugin.removeVisualFeedbackForCopyButton,
hideTooltipOnClick: false,
disabled: codeBlockState.isNodeSelected,
tabIndex: null
}, separator];
var copyAndDeleteButtonMenuItems = [];
if (areAnyNewToolbarFlagsEnabled) {
var overflowMenuOptions = [{
title: formatMessage(_messages.default.delete),
icon: (0, _delete.default)({
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: (0, _editorCommands.removeCodeBlockWithAnalytics)(editorAnalyticsAPI)
}];
if (allowCopyToClipboard) {
overflowMenuOptions.unshift({
title: formatMessage(_messages.default.copyToClipboard),
onClick: (0, _editorCommands.copyContentToClipboardWithAnalytics)(editorAnalyticsAPI),
icon: (0, _copy.default)({
label: ''
}),
onMouseEnter: _codeBlockCopySelectionPlugin.provideVisualFeedbackForCopyButton,
onMouseLeave: _editorCommands.resetCopiedState,
onFocus: _codeBlockCopySelectionPlugin.provideVisualFeedbackForCopyButton,
onBlur: _codeBlockCopySelectionPlugin.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: _delete.default,
iconFallback: _delete.default,
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: (0, _editorCommands.removeCodeBlockWithAnalytics)(editorAnalyticsAPI),
title: formatMessage(_messages.default.remove),
tabIndex: null
};
copyAndDeleteButtonMenuItems = [separator].concat(copyToClipboardItems, [deleteButton]);
}
var codeBlockWrapButtonTitle = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? formatMessage(isWrapped ? _messages.codeBlockButtonMessages.unwrapCodeLabel : _messages.codeBlockButtonMessages.wrapCodeLabel) : formatMessage(_messages.codeBlockButtonMessages.wrapCode);
var codeBlockWrapButton = {
id: 'editor.codeBlock.wrap',
type: 'button',
// Toggling button now writes to ADF, hence it should be available in view mode
supportsViewMode: !(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_code_block_q4_lovability', 'isEnabled', true),
icon: _textWrap.default,
iconFallback: _WrapIcon.WrapIcon,
onClick: (0, _editorCommands.toggleWordWrapStateForCodeBlockNode)(editorAnalyticsAPI),
title: codeBlockWrapButtonTitle,
tabIndex: null,
selected: isWrapped
};
var codeBlockLineNumbersButton = {
id: 'editor.codeBlock.lineNumbers',
type: 'button',
supportsViewMode: false,
icon: _listNumbered.default,
onClick: (0, _editorCommands.toggleLineNumbersForCodeBlockNode)(editorAnalyticsAPI),
title: formatMessage(areLineNumbersVisible ? _messages.codeBlockButtonMessages.hideLineNumbersLabel : _messages.codeBlockButtonMessages.showLineNumbersLabel),
tabIndex: null,
selected: areLineNumbersVisible
};
var formatLanguage = formatCodeProvider !== null && formatCodeProvider !== void 0 && formatCodeProvider.isSupportedLanguage(language) ? language : undefined;
var canFormatCode = node.textContent.length > 0 && Boolean(formatLanguage);
var formatCodeButton = {
id: 'editor.codeBlock.formatCode',
type: 'button',
supportsViewMode: false,
disabled: !canFormatCode || isFormatCodePending,
icon: _angleBrackets.default,
onClick: (0, _editorCommands.createFormatCodeOnClick)({
api: api,
editorAnalyticsAPI: editorAnalyticsAPI,
formatCodeProvider: formatCodeProvider
}),
onFocus: (0, _formatter.preloadFormatterOnIntent)(formatCodeProvider, formatLanguage),
onMouseEnter: (0, _formatter.preloadFormatterOnIntent)(formatCodeProvider, formatLanguage),
title: formatMessage(canFormatCode ? _messages.codeBlockButtonMessages.formatCode : _messages.codeBlockButtonMessages.formatCodeUnavailable)
};
return {
title: 'CodeBlock floating controls',
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
getDomRef: function getDomRef(view) {
return (0, _utils.findDomRefAtPos)(pos, view.domAtPos.bind(view));
},
nodeType: nodeType,
items: [languagePicker !== null && languagePicker !== void 0 ? languagePicker : languageSelect].concat((0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], (0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton].concat((0, _toConsumableArray2.default)(formatCodeProvider ? [formatCodeButton] : [])) : []), (0, _toConsumableArray2.default)(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
var languageListFilter = exports.languageListFilter = function languageListFilter(option, rawInput) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-explicit-any
var _ref4 = option,
data = _ref4.data;
var searchString = rawInput.toLowerCase();
return data.label.toLowerCase().includes(searchString) || data.alias.some(function (alias) {
return alias.toLowerCase() === searchString;
});
};