@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
106 lines (105 loc) • 3.97 kB
JavaScript
/**
* @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';
const wrapperStyles = css({
display: 'flex',
alignItems: 'center'
});
export const LinkToolbarAppearance = ({
editorState,
mediaLinkingState,
intl,
onAddLink,
onEditLink,
onOpenLink,
isInlineNode,
isViewOnly,
areAnyNewToolbarFlagsEnabled
}) => {
const [showLinkingControls, setShowLinkingControls] = useState(true);
useEffect(() => {
var _stateKey$getState;
const mediaNode = isInlineNode ? currentMediaInlineNode(editorState) : currentMediaNode(editorState);
if (!mediaNode) {
setShowLinkingControls(false);
return;
}
const 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(mediaType => {
setShowLinkingControls(mediaType === 'external' || mediaType === 'image');
});
}, [editorState, isInlineNode]);
if (!showLinkingControls) {
return null;
}
if (mediaLinkingState && mediaLinkingState.editable) {
const isValidUrl = isSafeUrl(mediaLinkingState.link);
const title = intl.formatMessage(linkToolbarMessages.editLink);
const 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 {
const 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;
}
};