@elastic/eui
Version:
Elastic UI Component Library
213 lines (211 loc) • 6.98 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React, { useContext, forwardRef } from 'react';
import classNames from 'classnames';
import { useEuiMemoizedStyles } from '../../services';
import { EuiButtonEmpty, EuiButtonIcon } from '../button';
import { EuiI18n } from '../i18n';
import { EuiToolTip } from '../tool_tip';
import { MODE_VIEWING } from './markdown_modes';
import { EuiMarkdownContext } from './markdown_context';
import { euiMarkdownEditorToolbarStyles } from './markdown_editor_toolbar.styles';
/**
* A helper type to ensure the `button` property is defined
* on an ` EuiMarkdownEditorUiPlugin ` object.
*/
import { jsx as ___EmotionJSX } from "@emotion/react";
var boldItalicButtons = [{
id: 'mdBold',
label: 'Bold',
name: 'strong',
iconType: 'textBold'
}, {
id: 'mdItalic',
label: 'Italic',
name: 'emphasis',
iconType: 'textItalic'
}];
var listButtons = [{
id: 'mdUl',
label: 'Unordered list',
name: 'ul',
iconType: 'listBullet'
}, {
id: 'mdOl',
label: 'Ordered list',
name: 'ol',
iconType: 'listNumber'
}, {
id: 'mdTl',
label: 'Task list',
name: 'tl',
iconType: 'listCheck'
}];
var quoteCodeLinkButtons = [{
id: 'mdQuote',
label: 'Quote',
name: 'quote',
iconType: 'quote'
}, {
id: 'mdCode',
label: 'Code',
name: 'inlineCode',
iconType: 'code'
}, {
id: 'mdLink',
label: 'Link',
name: 'link',
iconType: 'link'
}];
var EuiMarkdownEditorToolbarButton = function EuiMarkdownEditorToolbarButton(_ref) {
var selectedNode = _ref.selectedNode,
handleMdButtonClick = _ref.handleMdButtonClick,
isEditable = _ref.isEditable,
isDisabled = _ref.isDisabled,
id = _ref.id,
nodeId = _ref.nodeId,
label = _ref.label,
icon = _ref.icon;
var isSelected = selectedNode && selectedNode.type === nodeId;
return ___EmotionJSX(EuiButtonIcon, _extends({
color: "text"
}, isSelected ? {
style: {
background: 'rgba(0, 0, 0, 0.15)'
}
} : null, {
"data-test-subj": "euiMarkdownEditorToolbarButton".concat(isSelected ? ' pressed' : ''),
onClick: function onClick() {
return handleMdButtonClick(id);
},
iconType: icon,
"aria-label": label,
isDisabled: !isEditable || isDisabled
}));
};
export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, ref) {
var className = _ref2.className,
markdownActions = _ref2.markdownActions,
viewMode = _ref2.viewMode,
onClickPreview = _ref2.onClickPreview,
_uiPlugins = _ref2.uiPlugins,
selectedNode = _ref2.selectedNode,
right = _ref2.right;
var _useContext = useContext(EuiMarkdownContext),
openPluginEditor = _useContext.openPluginEditor,
readOnly = _useContext.readOnly;
var classes = classNames('euiMarkdownEditorToolbar', className);
var handleMdButtonClick = function handleMdButtonClick(mdButtonId) {
var actionResult = markdownActions.do(mdButtonId);
if (actionResult !== true) openPluginEditor(actionResult);
};
var isPreviewing = viewMode === MODE_VIEWING;
var isEditable = !isPreviewing && !readOnly;
var styles = useEuiMemoizedStyles(euiMarkdownEditorToolbarStyles);
var uiPlugins = _uiPlugins.filter(function (uiPlugin) {
return !!uiPlugin.button;
});
return ___EmotionJSX("div", {
ref: ref,
css: styles.euiMarkdownEditorToolbar,
className: classes,
"data-test-subj": "euiMarkdownEditorToolbar"
}, ___EmotionJSX("div", {
css: styles.euiMarkdownEditorToolbar__buttons,
className: "euiMarkdownEditorToolbar__buttons"
}, boldItalicButtons.map(function (item) {
return ___EmotionJSX(EuiToolTip, {
key: item.id,
content: item.label
}, ___EmotionJSX(EuiMarkdownEditorToolbarButton, {
selectedNode: selectedNode,
handleMdButtonClick: handleMdButtonClick,
isEditable: isEditable,
id: item.id,
nodeId: item.name,
label: item.label,
icon: item.iconType
}));
}), ___EmotionJSX("span", {
css: styles.euiMarkdownEditorToolbar__divider,
className: "euiMarkdownEditorToolbar__divider"
}), listButtons.map(function (item) {
return ___EmotionJSX(EuiToolTip, {
key: item.id,
content: item.label
}, ___EmotionJSX(EuiMarkdownEditorToolbarButton, {
selectedNode: selectedNode,
handleMdButtonClick: handleMdButtonClick,
isEditable: isEditable,
id: item.id,
nodeId: item.name,
label: item.label,
icon: item.iconType
}));
}), ___EmotionJSX("span", {
css: styles.euiMarkdownEditorToolbar__divider,
className: "euiMarkdownEditorToolbar__divider"
}), quoteCodeLinkButtons.map(function (item) {
return ___EmotionJSX(EuiToolTip, {
key: item.id,
content: item.label
}, ___EmotionJSX(EuiMarkdownEditorToolbarButton, {
selectedNode: selectedNode,
handleMdButtonClick: handleMdButtonClick,
isEditable: isEditable,
id: item.id,
nodeId: item.name,
label: item.label,
icon: item.iconType
}));
}), uiPlugins.length > 0 ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX("span", {
css: styles.euiMarkdownEditorToolbar__divider,
className: "euiMarkdownEditorToolbar__divider"
}), uiPlugins.map(function (_ref3) {
var name = _ref3.name,
button = _ref3.button;
return ___EmotionJSX(EuiToolTip, {
key: name,
content: button.label
}, ___EmotionJSX(EuiMarkdownEditorToolbarButton, {
selectedNode: selectedNode,
handleMdButtonClick: handleMdButtonClick,
isEditable: isEditable,
isDisabled: button.isDisabled,
id: name,
nodeId: name,
label: button.label,
icon: button.iconType
}));
})) : null), right !== null && right !== void 0 ? right : ___EmotionJSX(PreviewEditorSwitch, {
isPreviewing: isPreviewing,
onClickPreview: onClickPreview,
readOnly: readOnly
}));
});
var PreviewEditorSwitch = function PreviewEditorSwitch(_ref4) {
var isPreviewing = _ref4.isPreviewing,
onClickPreview = _ref4.onClickPreview,
readOnly = _ref4.readOnly;
return ___EmotionJSX(EuiButtonEmpty, {
iconType: isPreviewing ? 'code' : 'eye',
color: "text",
size: "s",
onClick: onClickPreview,
isDisabled: readOnly,
"data-test-subj": isPreviewing ? 'markdown_editor_preview_button' : 'markdown_editor_edit_button'
}, isPreviewing ? ___EmotionJSX(EuiI18n, {
token: "euiMarkdownEditorToolbar.editor",
default: "Editor"
}) : ___EmotionJSX(EuiI18n, {
token: "euiMarkdownEditorToolbar.previewMarkdown",
default: "Preview"
}));
};
EuiMarkdownEditorToolbar.displayName = 'EuiMarkdownEditorToolbar';