@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
109 lines (108 loc) • 4.36 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Fragment, useEffect, useState } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { isSafeUrl } from '@atlaskit/adf-schema';
import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
import { FloatingToolbarSeparator as Separator, FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
import LinkIcon from '@atlaskit/icon/core/link';
import LinkExternalIcon from '@atlaskit/icon/core/link-external';
import { currentMediaInlineNode, currentMediaNode } from '../../pm-plugins//utils/current-media-node';
import { stateKey } from '../../pm-plugins/plugin-key';
import { checkMediaType } from '../../pm-plugins/utils/check-media-type';
var wrapperStyles = css({
display: 'flex',
alignItems: 'center'
});
export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
var editorState = _ref.editorState,
mediaLinkingState = _ref.mediaLinkingState,
intl = _ref.intl,
onAddLink = _ref.onAddLink,
onEditLink = _ref.onEditLink,
onOpenLink = _ref.onOpenLink,
isInlineNode = _ref.isInlineNode,
isViewOnly = _ref.isViewOnly,
areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
var _useState = useState(true),
_useState2 = _slicedToArray(_useState, 2),
showLinkingControls = _useState2[0],
setShowLinkingControls = _useState2[1];
useEffect(function () {
var _stateKey$getState;
var mediaNode = isInlineNode ? currentMediaInlineNode(editorState) : currentMediaNode(editorState);
if (!mediaNode) {
setShowLinkingControls(false);
return;
}
var mediaClientConfig = (_stateKey$getState = stateKey.getState(editorState)) === null || _stateKey$getState === void 0 ? void 0 : _stateKey$getState.mediaClientConfig;
if (!mediaClientConfig) {
setShowLinkingControls(false);
return;
}
checkMediaType(mediaNode, mediaClientConfig).then(function (mediaType) {
setShowLinkingControls(mediaType === 'external' || mediaType === 'image');
});
}, [editorState, isInlineNode]);
if (!showLinkingControls) {
return null;
}
if (mediaLinkingState && mediaLinkingState.editable) {
var isValidUrl = isSafeUrl(mediaLinkingState.link);
var title = intl.formatMessage(linkToolbarMessages.editLink);
var linkTitle = intl.formatMessage(isValidUrl ? linkMessages.openLink : linkToolbarMessages.unableToOpenLink);
return jsx(Fragment, null, !isViewOnly && jsx("div", {
css: wrapperStyles
}, jsx(ToolbarButton, {
onClick: onEditLink,
title: title,
tooltipContent: jsx(ToolTipContent, {
description: title,
keymap: addLink
}),
testId: "edit-link-button",
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}, title)), jsx(ToolbarButton, {
target: "_blank",
href: isValidUrl ? mediaLinkingState.link : undefined,
disabled: !isValidUrl,
onClick: onOpenLink,
title: linkTitle,
icon: jsx(LinkExternalIcon, {
color: "currentColor",
spacing: "spacious",
label: linkTitle
})
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "hyperlink-open-link",
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}), jsx(Separator, {
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}));
} else {
var _title = intl.formatMessage(linkToolbarMessages.addLink);
return !isViewOnly ? jsx(Fragment, null, jsx(ToolbarButton, {
testId: "add-link-button",
onClick: onAddLink,
title: _title,
tooltipContent: jsx(ToolTipContent, {
description: _title,
keymap: addLink
}),
icon: jsx(LinkIcon, {
color: "currentColor",
label: _title,
spacing: "spacious"
}),
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
}), jsx(Separator, {
areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
})) : null;
}
};