@atlaskit/editor-plugin-synced-block
Version:
SyncedBlock plugin for @atlaskit/editor-core
155 lines (154 loc) • 8.74 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import commonMessages, { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles/consts';
import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
import CopyIcon from '@atlaskit/icon/core/copy';
import DeleteIcon from '@atlaskit/icon/core/delete';
import EditIcon from '@atlaskit/icon/core/edit';
import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
import { fg } from '@atlaskit/platform-feature-flags';
import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock, unsync } from '../editor-commands';
import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
import { SyncedLocationDropdown } from './SyncedLocationDropdown';
export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBlockStore) {
var _syncBlockInstance$er, _api$decorations, _api$connectivity;
var syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
if (!syncBlockObject) {
return;
}
if (syncBlockStore.sourceManager.isPendingCreation(syncBlockObject.node.attrs.resourceId)) {
return;
}
var syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$er = syncBlockInstance.error) === null || _syncBlockInstance$er === void 0 ? void 0 : _syncBlockInstance$er.type) === SyncBlockError.NotFound;
var isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
var isBodiedSyncBlock = isBodiedSyncBlockNode(syncBlockObject.node, bodiedSyncBlock);
var _syncBlockObject$node = syncBlockObject.node.attrs,
resourceId = _syncBlockObject$node.resourceId,
localId = _syncBlockObject$node.localId;
var formatMessage = intl.formatMessage;
var nodeType = syncBlockObject.node.type;
var hoverDecoration = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
return {
onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
};
};
var items = [];
if (isUnsyncedBlock) {
var deleteButton = _objectSpread({
type: 'button',
title: formatMessage(commonMessages.delete),
onClick: removeSyncedBlock(api),
icon: DeleteIcon,
testId: SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceDelete
}, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName));
items.push(deleteButton);
} else {
if (!isErroredBlock) {
var syncedLocation = {
type: 'custom',
fallback: [],
render: function render() {
return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
syncBlockStore: syncBlockStore,
resourceId: resourceId,
localId: localId,
intl: intl,
isSource: isBodiedSyncBlock,
api: api
});
}
};
var unsyncButton = {
type: 'custom',
fallback: [],
render: function render(view) {
var _syncBlockInstance$da;
return /*#__PURE__*/React.createElement(Button, {
areAnyNewToolbarFlagsEnabled: true,
disabled: fg('platform_synced_block_patch_8') ? (syncBlockInstance === null || syncBlockInstance === void 0 || (_syncBlockInstance$da = syncBlockInstance.data) === null || _syncBlockInstance$da === void 0 ? void 0 : _syncBlockInstance$da.status) === 'unpublished' : false,
icon: /*#__PURE__*/React.createElement(LinkBrokenIcon, {
label: ""
}),
title: formatMessage(messages.unsyncButton)
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
onClick: function onClick() {
return unsync(syncBlockStore, isBodiedSyncBlock, view);
},
testId: isBodiedSyncBlock ? SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSourceUnsync : SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceUnsync
});
}
};
items.push(syncedLocation, unsyncButton);
}
var copyButton = _objectSpread({
id: 'editor.syncedBlock.copy',
type: 'button',
appearance: 'subtle',
icon: CopyIcon,
title: formatMessage(messages.copySyncBlockLabel),
showTitle: false,
tooltipContent: formatMessage(messages.copySyncedBlockTooltip),
onClick: copySyncedBlockReferenceToClipboard(syncBlockStore, INPUT_METHOD.SYNCED_BLOCK_TB, api)
}, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName));
items.push(copyButton);
var disabled = !syncBlockStore.referenceManager.getSyncBlockURL(syncBlockObject.node.attrs.resourceId);
if (!isBodiedSyncBlock) {
var editSourceButton = _objectSpread({
id: 'editor.syncedBlock.editSource',
type: 'button',
disabled: disabled,
appearance: 'subtle',
icon: EditIcon,
title: formatMessage(messages.editSourceLabel),
showTitle: false,
tooltipContent: disabled ? formatMessage(messages.editSourceTooltipDisabled) : formatMessage(messages.editSourceTooltip),
onClick: editSyncedBlockSource(syncBlockStore, api)
}, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName));
items.push(editSourceButton);
}
// testId is required to show focus on trigger button on ESC key press
// see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
var testId = 'synced-block-overflow-dropdown-trigger';
var overflowMenuConfig = [{
type: 'overflow-dropdown',
testId: testId,
options: [_objectSpread({
title: formatMessage(commonMessages.delete),
onClick: removeSyncedBlock(api),
icon: /*#__PURE__*/React.createElement(DeleteIcon, {
label: ""
}),
testId: isBodiedSyncBlock ? SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarSourceDelete : SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceDelete
}, hoverDecorationProps(nodeType))]
}];
items.push.apply(items, overflowMenuConfig);
}
var getDomRef = function getDomRef(editorView) {
var domAtPos = editorView.domAtPos.bind(editorView);
var element = findDomRefAtPos(syncBlockObject.pos, domAtPos);
return element;
};
return {
title: 'Synced Block floating controls',
getDomRef: getDomRef,
nodeType: nodeType,
items: items,
scrollable: true,
groupLabel: formatMessage(messages.syncBlockGroup),
visible: (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) !== 'offline'
};
};