@atlaskit/editor-plugin-code-block
Version:
Code block plugin for @atlaskit/editor-core
188 lines • 7.6 kB
JavaScript
/* LanguagePicker.tsx generated by @compiled/babel-plugin v0.39.1 */
import "./LanguagePicker.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
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';
const pickerOptionStyles = null;
const styles = {
divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
trigger: "_1reo15vq _18m915vq _p12fuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
};
const CustomGroup = props => {
const allGroups = props.selectProps.options;
const 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));
};
const 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))
);
};
const popupSelectComponents = {
Group: CustomGroup,
Option: CustomOption
};
const menuPopperProps = {
modifiers: [{
name: 'offset',
options: {
offset: [0, 8]
}
}, {
name: 'preventOverflow',
enabled: false
}]
};
const focusWithoutScrolling = element => {
element.focus({
preventScroll: true
});
};
const getRecentlyUsedLanguages = (recentLanguageValues, optionsByValue) => {
const recentlyUsedLanguages = [];
for (const recentLanguageValue of recentLanguageValues) {
const option = optionsByValue.get(recentLanguageValue);
if (option) {
recentlyUsedLanguages.push(option);
}
}
return recentlyUsedLanguages;
};
export const LanguagePicker = ({
defaultValue,
filterOption,
formatMessage,
languagePickerOptions,
recentLanguageValues = [],
onMenuOpen,
onSelection,
triggerSpacing = 'default'
}) => {
var _defaultValue$label;
const label = (_defaultValue$label = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) !== null && _defaultValue$label !== void 0 ? _defaultValue$label : formatMessage(codeBlockButtonMessages.selectLanguage);
const selectLanguageLabel = formatMessage(codeBlockButtonMessages.selectLanguage);
const [hasSearchQuery, setHasSearchQuery] = useState(false);
const [lockedPopperPlacement, setLockedPopperPlacement] = useState();
const inputValueRef = useRef('');
const optionsByValue = useMemo(() => new Map(languagePickerOptions.map(option => [option.value, option])), [languagePickerOptions]);
const recentlyUsedLanguages = useMemo(() => getRecentlyUsedLanguages(recentLanguageValues, optionsByValue), [recentLanguageValues, optionsByValue]);
const options = useMemo(() => createGroupedLanguageOptions({
formatMessage,
languages: languagePickerOptions,
recentlyUsedLanguages
}), [formatMessage, languagePickerOptions, recentlyUsedLanguages]);
const searchOptions = useMemo(() => options.flatMap(group => group.options), [options]);
const stableMenuPopperProps = useMemo(() => ({
// 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
}, ...(lockedPopperPlacement ? [{
name: 'flip',
enabled: false
}] : [])],
onFirstUpdate: ({
placement
}) => {
setLockedPopperPlacement(placement);
}
}), [lockedPopperPlacement]);
const handleChange = useCallback(option => {
var _option$selectionSour;
if (!option) {
return;
}
const isSearchSelection = inputValueRef.current.trim().length > 0;
const selectionSource = isSearchSelection ? 'search' : (_option$selectionSour = option.selectionSource) !== null && _option$selectionSour !== void 0 ? _option$selectionSour : 'all';
onSelection(option, selectionSource);
}, [onSelection]);
const handleInputChange = useCallback((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.
const 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;
}, []);
const handleMenuOpen = useCallback(() => {
if (fg('platform_editor_code_block_dogfooding_patch')) {
inputValueRef.current = '';
setHasSearchQuery(false);
setLockedPopperPlacement(undefined);
}
onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
}, [onMenuOpen]);
const handleTriggerMouseDown = useCallback(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);
}
}, []);
const renderTarget = useCallback(({
isOpen,
ref,
onKeyDown,
'aria-controls': ariaControls
}) => /*#__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
});
};