@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
90 lines • 3.21 kB
JavaScript
/** @jsx jsx */
import React, { Fragment, useEffect, useState } from 'react';
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 { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
import LinkIcon from '@atlaskit/icon/glyph/editor/link';
import OpenIcon from '@atlaskit/icon/glyph/shortcut';
import { stateKey } from '../pm-plugins/plugin-key';
import { checkMediaType } from '../utils/check-media-type';
import { currentMediaNode } from '../utils/current-media-node';
// need this wrapper, need to have 4px between items.
const wrapper = css`
display: flex;
align-items: center;
margin-right: ${"var(--ds-space-050, 4px)"};
`;
export const LinkToolbarAppearance = ({
editorState,
mediaLinkingState,
intl,
onAddLink,
onEditLink,
onOpenLink
}) => {
const [showLinkingControls, setShowLinkingControls] = useState(true);
useEffect(() => {
var _stateKey$getState;
const mediaNode = 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]);
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, jsx("div", {
css: wrapper
}, jsx(ToolbarButton, {
onClick: onEditLink,
title: title,
tooltipContent: jsx(ToolTipContent, {
description: title,
keymap: addLink
}),
testId: "edit-link-button"
}, title)), jsx("div", {
css: wrapper
}, jsx(Separator, null)), jsx(ToolbarButton, {
target: "_blank",
href: isValidUrl ? mediaLinkingState.link : undefined,
disabled: !isValidUrl,
onClick: onOpenLink,
title: linkTitle,
icon: jsx(OpenIcon, {
label: linkTitle
}),
className: "hyperlink-open-link"
}), jsx(Separator, null));
} else {
const title = intl.formatMessage(linkToolbarMessages.addLink);
return jsx(Fragment, null, jsx(ToolbarButton, {
testId: "add-link-button",
onClick: onAddLink,
title: title,
tooltipContent: jsx(ToolTipContent, {
description: title,
keymap: addLink
}),
icon: jsx(LinkIcon, {
label: title
})
}), jsx(Separator, null));
}
};