@atlaskit/editor-plugin-code-block
Version:
Code block plugin for @atlaskit/editor-core
223 lines • 10.4 kB
JavaScript
/* LanguagePicker.tsx generated by @compiled/babel-plugin v0.39.1 */
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import "./LanguagePicker.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
import Button from '@atlaskit/button/new';
import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
import { fg } from '@atlaskit/platform-feature-flags';
import { Box } from '@atlaskit/primitives/compiled';
import { PopupSelect, components } from '@atlaskit/select';
import { createGroupedLanguageOptions } from './language-picker-options';
var pickerOptionStyles = null;
var styles = {
divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
trigger: "_1reo15vq _18m915vq _p12fuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
};
var CustomGroup = function CustomGroup(props) {
var allGroups = props.selectProps.options;
var isFirstGroup = allGroups.length > 0 && allGroups[0] === props.data;
return /*#__PURE__*/React.createElement(Fragment, null, !isFirstGroup && /*#__PURE__*/React.createElement(Box, {
as: "hr",
xcss: styles.divider,
role: "presentation"
}), /*#__PURE__*/React.createElement(components.Group, props));
};
var CustomOption = function CustomOption(props) {
return (
/*#__PURE__*/
// eslint-disable-next-line react/jsx-props-no-spreading -- react-select custom components must forward all props to the default Option.
React.createElement(components.Option, props, /*#__PURE__*/React.createElement("span", {
className: ax(["_vwz478tn"])
}, props.children))
);
};
var popupSelectComponents = {
Group: CustomGroup,
Option: CustomOption
};
var menuPopperProps = {
modifiers: [{
name: 'offset',
options: {
offset: [0, 8]
}
}, {
name: 'preventOverflow',
enabled: false
}]
};
var focusWithoutScrolling = function focusWithoutScrolling(element) {
element.focus({
preventScroll: true
});
};
var getRecentlyUsedLanguages = function getRecentlyUsedLanguages(recentLanguageValues, optionsByValue) {
var recentlyUsedLanguages = [];
var _iterator = _createForOfIteratorHelper(recentLanguageValues),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var recentLanguageValue = _step.value;
var option = optionsByValue.get(recentLanguageValue);
if (option) {
recentlyUsedLanguages.push(option);
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return recentlyUsedLanguages;
};
export var LanguagePicker = function LanguagePicker(_ref) {
var _defaultValue$label;
var defaultValue = _ref.defaultValue,
filterOption = _ref.filterOption,
formatMessage = _ref.formatMessage,
languagePickerOptions = _ref.languagePickerOptions,
_ref$recentLanguageVa = _ref.recentLanguageValues,
recentLanguageValues = _ref$recentLanguageVa === void 0 ? [] : _ref$recentLanguageVa,
onMenuOpen = _ref.onMenuOpen,
onSelection = _ref.onSelection,
_ref$triggerSpacing = _ref.triggerSpacing,
triggerSpacing = _ref$triggerSpacing === void 0 ? 'default' : _ref$triggerSpacing;
var label = (_defaultValue$label = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) !== null && _defaultValue$label !== void 0 ? _defaultValue$label : formatMessage(codeBlockButtonMessages.selectLanguage);
var selectLanguageLabel = formatMessage(codeBlockButtonMessages.selectLanguage);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
hasSearchQuery = _useState2[0],
setHasSearchQuery = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
lockedPopperPlacement = _useState4[0],
setLockedPopperPlacement = _useState4[1];
var inputValueRef = useRef('');
var optionsByValue = useMemo(function () {
return new Map(languagePickerOptions.map(function (option) {
return [option.value, option];
}));
}, [languagePickerOptions]);
var recentlyUsedLanguages = useMemo(function () {
return getRecentlyUsedLanguages(recentLanguageValues, optionsByValue);
}, [recentLanguageValues, optionsByValue]);
var options = useMemo(function () {
return createGroupedLanguageOptions({
formatMessage: formatMessage,
languages: languagePickerOptions,
recentlyUsedLanguages: recentlyUsedLanguages
});
}, [formatMessage, languagePickerOptions, recentlyUsedLanguages]);
var searchOptions = useMemo(function () {
return options.flatMap(function (group) {
return group.options;
});
}, [options]);
var stableMenuPopperProps = useMemo(function () {
return {
// Allow Popper to choose top on the first open when bottom has no room, then lock the
// chosen placement so later hover/search renders do not move the open picker.
placement: lockedPopperPlacement !== null && lockedPopperPlacement !== void 0 ? lockedPopperPlacement : 'bottom-start',
modifiers: [{
name: 'offset',
options: {
offset: [0, 8]
}
}, {
name: 'preventOverflow',
enabled: false
}].concat(_toConsumableArray(lockedPopperPlacement ? [{
name: 'flip',
enabled: false
}] : [])),
onFirstUpdate: function onFirstUpdate(_ref2) {
var placement = _ref2.placement;
setLockedPopperPlacement(placement);
}
};
}, [lockedPopperPlacement]);
var handleChange = useCallback(function (option) {
var _option$selectionSour;
if (!option) {
return;
}
var isSearchSelection = inputValueRef.current.trim().length > 0;
var selectionSource = isSearchSelection ? 'search' : (_option$selectionSour = option.selectionSource) !== null && _option$selectionSour !== void 0 ? _option$selectionSour : 'all';
onSelection(option, selectionSource);
}, [onSelection]);
var handleInputChange = useCallback(function (newInputValue, actionMeta) {
// React-select clears the input as part of selecting a value before onChange fires.
// Keep the last user-typed query so handleChange can report search selections correctly.
var isInputChange = !actionMeta || actionMeta.action === 'input-change';
if (isInputChange) {
inputValueRef.current = newInputValue;
}
if (isInputChange || !fg('platform_editor_code_block_dogfooding_patch')) {
setHasSearchQuery(newInputValue.trim().length > 0);
return newInputValue;
}
return inputValueRef.current;
}, []);
var handleMenuOpen = useCallback(function () {
if (fg('platform_editor_code_block_dogfooding_patch')) {
inputValueRef.current = '';
setHasSearchQuery(false);
setLockedPopperPlacement(undefined);
}
onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
}, [onMenuOpen]);
var handleTriggerMouseDown = useCallback(function (event) {
if (fg('platform_editor_code_block_dogfooding_patch')) {
// PopupSelect's FocusLock returns focus to the element that was focused before the
// picker opened. If that is the editor/code block, closing the picker can scroll the
// whole code block into view. Focus the trigger first without scrolling so FocusLock
// returns to the trigger; see CodeBlockLanguagePicker's handleSelection for restoring
// editor focus.
focusWithoutScrolling(event.currentTarget);
}
}, []);
var renderTarget = useCallback(function (_ref3) {
var isOpen = _ref3.isOpen,
ref = _ref3.ref,
onKeyDown = _ref3.onKeyDown,
ariaControls = _ref3['aria-controls'];
return /*#__PURE__*/React.createElement("div", {
className: ax([styles.trigger])
}, /*#__PURE__*/React.createElement(Button, {
spacing: triggerSpacing,
shouldFitContainer: true,
onMouseDown: handleTriggerMouseDown,
onKeyDown: onKeyDown,
ref: ref,
iconAfter: ChevronDownIcon,
appearance: "subtle",
isSelected: isOpen,
"aria-controls": ariaControls,
testId: "code-block-language-picker-trigger"
}, label));
}, [label, triggerSpacing, handleTriggerMouseDown]);
return /*#__PURE__*/React.createElement(PopupSelect, {
components: popupSelectComponents,
filterOption: filterOption,
label: selectLanguageLabel,
maxMenuHeight: 300,
minMenuWidth: 200,
menuPlacement: "auto",
onChange: handleChange,
onInputChange: handleInputChange,
onMenuOpen: handleMenuOpen,
options: hasSearchQuery ? searchOptions : options,
popperProps: fg('platform_editor_code_block_dogfooding_patch') ? stableMenuPopperProps : menuPopperProps,
searchThreshold: -1,
target: renderTarget,
testId: "code-block-language-picker",
defaultValue: defaultValue
});
};