UNPKG

@atlaskit/editor-plugin-code-block

Version:

Code block plugin for @atlaskit/editor-core

50 lines • 2.36 kB
import React, { useCallback, useMemo } from 'react'; import { useIntl } from 'react-intl'; import { messages as blockTypeMessages } from '@atlaskit/editor-common/messages/block-type'; import { QuickInsertMenuItem } from '@atlaskit/editor-common/quick-insert/menu-item'; import { messages as quickInsertMessages } from '@atlaskit/editor-common/quick-insert/messages'; import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector'; import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets'; import { createInsertCodeBlockTransactionWithAnalytics } from '../../editor-commands'; export var CodeBlockQuickInsertMenuItem = function CodeBlockQuickInsertMenuItem(_ref) { var api = _ref.api, previewImageUrls = _ref.previewImageUrls; var _useIntl = useIntl(), formatMessage = _useIntl.formatMessage; var preview = useMemo(function () { return previewImageUrls ? { image: previewImageUrls, attribution: { name: formatMessage(quickInsertMessages.previewAttributionAtlassian) } } : undefined; }, [formatMessage, previewImageUrls]); var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorDisabled'], function (states) { var _states$editorDisable; return { editorDisabled: (_states$editorDisable = states.editorDisabledState) === null || _states$editorDisable === void 0 ? void 0 : _states$editorDisable.editorDisabled }; }), editorDisabled = _useSharedPluginState.editorDisabled; var onSelect = useCallback(function (_ref2) { var _api$analytics; var editorView = _ref2.editorView, source = _ref2.source; return createInsertCodeBlockTransactionWithAnalytics({ analyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, inputMethod: source, state: editorView.state }); }, [api]); return /*#__PURE__*/React.createElement(QuickInsertMenuItem, { description: formatMessage(blockTypeMessages.codeblockDescription), iconBefore: /*#__PURE__*/React.createElement(AngleBracketsIcon, { label: "" }), isDisabled: editorDisabled, onSelect: onSelect, preview: preview, shortcut: "```", title: formatMessage(blockTypeMessages.codeblock) }); };