@atlaskit/editor-plugin-card 2.0.6 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/plugin.js +3 -3
- package/dist/cjs/pm-plugins/doc.js +1 -109
- package/dist/cjs/toolbar.js +92 -6
- package/dist/cjs/ui/EditDatasourceButton.js +50 -25
- package/dist/cjs/ui/EditToolbarButton.js +30 -29
- package/dist/cjs/ui/HyperlinkToolbarAppearance.js +2 -2
- package/dist/cjs/ui/useFetchDatasourceInfo.js +13 -6
- package/dist/cjs/utils.js +11 -1
- package/dist/es2019/plugin.js +2 -2
- package/dist/es2019/pm-plugins/doc.js +2 -106
- package/dist/es2019/toolbar.js +88 -6
- package/dist/es2019/ui/EditDatasourceButton.js +41 -14
- package/dist/es2019/ui/EditToolbarButton.js +24 -22
- package/dist/es2019/ui/HyperlinkToolbarAppearance.js +2 -2
- package/dist/es2019/ui/useFetchDatasourceInfo.js +5 -1
- package/dist/es2019/utils.js +10 -0
- package/dist/esm/plugin.js +2 -2
- package/dist/esm/pm-plugins/doc.js +2 -110
- package/dist/esm/toolbar.js +92 -6
- package/dist/esm/ui/EditDatasourceButton.js +41 -16
- package/dist/esm/ui/EditToolbarButton.js +31 -28
- package/dist/esm/ui/HyperlinkToolbarAppearance.js +2 -2
- package/dist/esm/ui/useFetchDatasourceInfo.js +13 -6
- package/dist/esm/utils.js +10 -0
- package/dist/types/pm-plugins/doc.d.ts +3 -11
- package/dist/types/toolbar.d.ts +7 -0
- package/dist/types/types.d.ts +1 -0
- package/dist/types/ui/EditDatasourceButton.d.ts +6 -5
- package/dist/types/ui/EditLinkToolbar.d.ts +1 -1
- package/dist/types/ui/EditToolbarButton.d.ts +3 -1
- package/dist/types/ui/useFetchDatasourceInfo.d.ts +1 -0
- package/dist/types/utils.d.ts +6 -0
- package/dist/types-ts4.5/pm-plugins/doc.d.ts +3 -11
- package/dist/types-ts4.5/toolbar.d.ts +7 -0
- package/dist/types-ts4.5/types.d.ts +1 -0
- package/dist/types-ts4.5/ui/EditDatasourceButton.d.ts +6 -5
- package/dist/types-ts4.5/ui/EditLinkToolbar.d.ts +1 -1
- package/dist/types-ts4.5/ui/EditToolbarButton.d.ts +3 -1
- package/dist/types-ts4.5/ui/useFetchDatasourceInfo.d.ts +1 -0
- package/dist/types-ts4.5/utils.d.ts +6 -0
- package/package.json +6 -6
package/dist/es2019/plugin.js
CHANGED
|
@@ -5,13 +5,13 @@ import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDataso
|
|
|
5
5
|
import { canRenderDatasource } from '@atlaskit/editor-common/utils';
|
|
6
6
|
import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID } from '@atlaskit/link-datasource';
|
|
7
7
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { queueCardsFromChangedTr } from '../src/pm-plugins/doc';
|
|
8
9
|
import { createEventsQueue } from './analytics/create-events-queue';
|
|
9
10
|
import { hideLinkToolbar, showDatasourceModal } from './pm-plugins/actions';
|
|
10
|
-
import { getEndingToolbarItems, getStartingToolbarItems, queueCardsFromChangedTr } from './pm-plugins/doc';
|
|
11
11
|
import { cardKeymap } from './pm-plugins/keymap';
|
|
12
12
|
import { createPlugin } from './pm-plugins/main';
|
|
13
13
|
import { pluginKey } from './pm-plugins/plugin-key';
|
|
14
|
-
import { floatingToolbar } from './toolbar';
|
|
14
|
+
import { floatingToolbar, getEndingToolbarItems, getStartingToolbarItems } from './toolbar';
|
|
15
15
|
import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
|
|
16
16
|
import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalytics';
|
|
17
17
|
import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
|
|
@@ -1,19 +1,13 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import isEqual from 'lodash/isEqual';
|
|
3
2
|
import { isSafeUrl } from '@atlaskit/adf-schema';
|
|
4
3
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, SMART_LINK_TYPE, unlinkPayload } from '@atlaskit/editor-common/analytics';
|
|
5
4
|
import { addLinkMetadata } from '@atlaskit/editor-common/card';
|
|
6
|
-
import {
|
|
7
|
-
import { getDatasourceType, getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
|
|
5
|
+
import { getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
|
|
8
6
|
import { closeHistory } from '@atlaskit/editor-prosemirror/history';
|
|
9
7
|
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
10
8
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
11
|
-
import { getHyperlinkToolbarSettingsButton } from '../toolbar';
|
|
12
|
-
import { EditToolbarButton } from '../ui/EditToolbarButton';
|
|
13
|
-
import { HyperlinkToolbarAppearance } from '../ui/HyperlinkToolbarAppearance';
|
|
14
|
-
import { ToolbarViewedEvent } from '../ui/ToolbarViewedEvent';
|
|
15
9
|
import { appearanceForNodeType, isDatasourceConfigEditable, isDatasourceNode, selectedCardAppearance } from '../utils';
|
|
16
|
-
import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash
|
|
10
|
+
import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash } from './actions';
|
|
17
11
|
import { pluginKey } from './plugin-key';
|
|
18
12
|
import { shouldReplaceLink } from './shouldReplaceLink';
|
|
19
13
|
|
|
@@ -561,102 +555,4 @@ const updateDatasourceStash = (tr, selectedNode) => {
|
|
|
561
555
|
}
|
|
562
556
|
}
|
|
563
557
|
}
|
|
564
|
-
};
|
|
565
|
-
export const editDatasource = (datasourceId, editorAnalyticsApi) => (state, dispatch) => {
|
|
566
|
-
const datasourceType = getDatasourceType(datasourceId);
|
|
567
|
-
if (dispatch && datasourceType) {
|
|
568
|
-
const {
|
|
569
|
-
tr
|
|
570
|
-
} = state;
|
|
571
|
-
showDatasourceModal(datasourceType)(tr);
|
|
572
|
-
// editorAnalyticsApi?.attachAnalyticsEvent(
|
|
573
|
-
// buildEditLinkPayload(
|
|
574
|
-
// type as
|
|
575
|
-
// | ACTION_SUBJECT_ID.CARD_INLINE
|
|
576
|
-
// | ACTION_SUBJECT_ID.CARD_BLOCK
|
|
577
|
-
// | ACTION_SUBJECT_ID.EMBEDS,
|
|
578
|
-
// ),
|
|
579
|
-
// )(tr);
|
|
580
|
-
dispatch(tr);
|
|
581
|
-
return true;
|
|
582
|
-
}
|
|
583
|
-
return false;
|
|
584
|
-
};
|
|
585
|
-
export const getStartingToolbarItems = (options, api) => {
|
|
586
|
-
return (intl, link, providerFactory, onEditLink, metadata) => {
|
|
587
|
-
const isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && options.platform !== 'mobile' && options.allowDatasource;
|
|
588
|
-
const editLinkItem = isEditDropdownEnabled ? [{
|
|
589
|
-
type: 'custom',
|
|
590
|
-
fallback: [],
|
|
591
|
-
render: editorView => {
|
|
592
|
-
var _api$analytics;
|
|
593
|
-
if (!editorView) {
|
|
594
|
-
return null;
|
|
595
|
-
}
|
|
596
|
-
return /*#__PURE__*/React.createElement(EditToolbarButton, {
|
|
597
|
-
key: "edit-toolbar-button",
|
|
598
|
-
intl: intl,
|
|
599
|
-
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
|
|
600
|
-
url: link,
|
|
601
|
-
editorView: editorView,
|
|
602
|
-
onLinkEditClick: onEditLink
|
|
603
|
-
});
|
|
604
|
-
}
|
|
605
|
-
}] : [{
|
|
606
|
-
id: 'editor.link.edit',
|
|
607
|
-
testId: 'editor.link.edit',
|
|
608
|
-
type: 'button',
|
|
609
|
-
onClick: onEditLink,
|
|
610
|
-
title: intl.formatMessage(linkToolbarMessages.editLink),
|
|
611
|
-
showTitle: true,
|
|
612
|
-
metadata: metadata
|
|
613
|
-
}, {
|
|
614
|
-
type: 'separator'
|
|
615
|
-
}];
|
|
616
|
-
return [{
|
|
617
|
-
type: 'custom',
|
|
618
|
-
fallback: [],
|
|
619
|
-
render: editorView => /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
|
|
620
|
-
key: "edit.link.menu.viewed",
|
|
621
|
-
url: link,
|
|
622
|
-
display: "url",
|
|
623
|
-
editorView: editorView
|
|
624
|
-
})
|
|
625
|
-
}, {
|
|
626
|
-
type: 'custom',
|
|
627
|
-
fallback: [],
|
|
628
|
-
render: editorView => {
|
|
629
|
-
var _api$analytics2;
|
|
630
|
-
if (!editorView) {
|
|
631
|
-
return null;
|
|
632
|
-
}
|
|
633
|
-
return /*#__PURE__*/React.createElement(HyperlinkToolbarAppearance, {
|
|
634
|
-
key: "link-appearance",
|
|
635
|
-
url: link,
|
|
636
|
-
intl: intl,
|
|
637
|
-
editorView: editorView,
|
|
638
|
-
editorState: editorView.state,
|
|
639
|
-
cardOptions: options,
|
|
640
|
-
providerFactory: providerFactory,
|
|
641
|
-
platform: options === null || options === void 0 ? void 0 : options.platform,
|
|
642
|
-
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
|
|
643
|
-
});
|
|
644
|
-
}
|
|
645
|
-
}, ...editLinkItem];
|
|
646
|
-
};
|
|
647
|
-
};
|
|
648
|
-
export const getEndingToolbarItems = (options, api) => (intl, link) => {
|
|
649
|
-
if (getBooleanFF('platform.editor.card.inject-settings-button')) {
|
|
650
|
-
/**
|
|
651
|
-
* Require either provider to be supplied (controls link preferences)
|
|
652
|
-
* Or explicit user preferences config in order to enable button
|
|
653
|
-
*/
|
|
654
|
-
if (options.provider || options.userPreferencesLink) {
|
|
655
|
-
var _api$analytics3;
|
|
656
|
-
return [{
|
|
657
|
-
type: 'separator'
|
|
658
|
-
}, getHyperlinkToolbarSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
|
|
659
|
-
}
|
|
660
|
-
}
|
|
661
|
-
return [];
|
|
662
558
|
};
|
package/dist/es2019/toolbar.js
CHANGED
|
@@ -14,12 +14,13 @@ import CogIcon from '@atlaskit/icon/glyph/editor/settings';
|
|
|
14
14
|
import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
|
|
15
15
|
import OpenIcon from '@atlaskit/icon/glyph/shortcut';
|
|
16
16
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
17
|
-
import { changeSelectedCardToText
|
|
17
|
+
import { changeSelectedCardToText } from '../src/pm-plugins/doc';
|
|
18
18
|
import { pluginKey } from './pm-plugins/main';
|
|
19
19
|
import { DatasourceAppearanceButton } from './ui/DatasourceAppearanceButton';
|
|
20
|
-
import { EditDatasourceButton } from './ui/EditDatasourceButton';
|
|
20
|
+
import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
|
|
21
21
|
import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
|
|
22
22
|
import { EditToolbarButton } from './ui/EditToolbarButton';
|
|
23
|
+
import { HyperlinkToolbarAppearance } from './ui/HyperlinkToolbarAppearance';
|
|
23
24
|
import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
|
|
24
25
|
import { ToolbarViewedEvent } from './ui/ToolbarViewedEvent';
|
|
25
26
|
import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, isDatasourceNode, titleUrlPairFromNode } from './utils';
|
|
@@ -229,7 +230,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
|
|
|
229
230
|
intl: intl,
|
|
230
231
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
231
232
|
editorView: editorView,
|
|
232
|
-
onLinkEditClick: editLink(editorAnalyticsApi, true)
|
|
233
|
+
onLinkEditClick: editLink(editorAnalyticsApi, true),
|
|
234
|
+
currentAppearance: currentAppearance
|
|
233
235
|
})
|
|
234
236
|
}] : [{
|
|
235
237
|
id: 'editor.link.edit',
|
|
@@ -337,7 +339,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
|
|
|
337
339
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
338
340
|
url: url,
|
|
339
341
|
editorView: editorView,
|
|
340
|
-
|
|
342
|
+
currentAppearance: currentAppearance
|
|
341
343
|
})
|
|
342
344
|
});
|
|
343
345
|
}
|
|
@@ -392,7 +394,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
|
|
|
392
394
|
metadata: metadata,
|
|
393
395
|
className: 'datasource-edit',
|
|
394
396
|
title: intl.formatMessage(linkToolbarMessages.editDatasource),
|
|
395
|
-
onClick: editDatasource(datasourceId, editorAnalyticsApi),
|
|
397
|
+
onClick: editDatasource(datasourceId, editorAnalyticsApi, 'datasource'),
|
|
396
398
|
testId: 'datasource-edit-button'
|
|
397
399
|
}, {
|
|
398
400
|
type: 'separator'
|
|
@@ -467,7 +469,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
|
|
|
467
469
|
intl: intl,
|
|
468
470
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
469
471
|
editorView: editorView,
|
|
470
|
-
onLinkEditClick: editLink(editorAnalyticsApi, false)
|
|
472
|
+
onLinkEditClick: editLink(editorAnalyticsApi, false),
|
|
473
|
+
currentAppearance: "datasource"
|
|
471
474
|
})
|
|
472
475
|
});
|
|
473
476
|
}
|
|
@@ -511,4 +514,83 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
|
|
|
511
514
|
};
|
|
512
515
|
export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDiscoverabilityEnabled) => {
|
|
513
516
|
return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
|
|
517
|
+
};
|
|
518
|
+
export const getStartingToolbarItems = (options, api) => {
|
|
519
|
+
return (intl, link, providerFactory, onEditLink, metadata) => {
|
|
520
|
+
const isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && options.platform !== 'mobile' && options.allowDatasource;
|
|
521
|
+
const editLinkItem = isEditDropdownEnabled ? [{
|
|
522
|
+
type: 'custom',
|
|
523
|
+
fallback: [],
|
|
524
|
+
render: editorView => {
|
|
525
|
+
var _api$analytics;
|
|
526
|
+
if (!editorView) {
|
|
527
|
+
return null;
|
|
528
|
+
}
|
|
529
|
+
return /*#__PURE__*/React.createElement(EditToolbarButton, {
|
|
530
|
+
key: "edit-toolbar-button",
|
|
531
|
+
intl: intl,
|
|
532
|
+
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions,
|
|
533
|
+
url: link,
|
|
534
|
+
editorView: editorView,
|
|
535
|
+
onLinkEditClick: onEditLink,
|
|
536
|
+
currentAppearance: "url"
|
|
537
|
+
});
|
|
538
|
+
}
|
|
539
|
+
}] : [{
|
|
540
|
+
id: 'editor.link.edit',
|
|
541
|
+
testId: 'editor.link.edit',
|
|
542
|
+
type: 'button',
|
|
543
|
+
onClick: onEditLink,
|
|
544
|
+
title: intl.formatMessage(linkToolbarMessages.editLink),
|
|
545
|
+
showTitle: true,
|
|
546
|
+
metadata: metadata
|
|
547
|
+
}, {
|
|
548
|
+
type: 'separator'
|
|
549
|
+
}];
|
|
550
|
+
return [{
|
|
551
|
+
type: 'custom',
|
|
552
|
+
fallback: [],
|
|
553
|
+
render: editorView => /*#__PURE__*/React.createElement(ToolbarViewedEvent, {
|
|
554
|
+
key: "edit.link.menu.viewed",
|
|
555
|
+
url: link,
|
|
556
|
+
display: "url",
|
|
557
|
+
editorView: editorView
|
|
558
|
+
})
|
|
559
|
+
}, {
|
|
560
|
+
type: 'custom',
|
|
561
|
+
fallback: [],
|
|
562
|
+
render: editorView => {
|
|
563
|
+
var _api$analytics2;
|
|
564
|
+
if (!editorView) {
|
|
565
|
+
return null;
|
|
566
|
+
}
|
|
567
|
+
return /*#__PURE__*/React.createElement(HyperlinkToolbarAppearance, {
|
|
568
|
+
key: "link-appearance",
|
|
569
|
+
url: link,
|
|
570
|
+
intl: intl,
|
|
571
|
+
editorView: editorView,
|
|
572
|
+
editorState: editorView.state,
|
|
573
|
+
cardOptions: options,
|
|
574
|
+
providerFactory: providerFactory,
|
|
575
|
+
platform: options === null || options === void 0 ? void 0 : options.platform,
|
|
576
|
+
editorAnalyticsApi: api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions
|
|
577
|
+
});
|
|
578
|
+
}
|
|
579
|
+
}, ...editLinkItem];
|
|
580
|
+
};
|
|
581
|
+
};
|
|
582
|
+
export const getEndingToolbarItems = (options, api) => (intl, link) => {
|
|
583
|
+
if (getBooleanFF('platform.editor.card.inject-settings-button')) {
|
|
584
|
+
/**
|
|
585
|
+
* Require either provider to be supplied (controls link preferences)
|
|
586
|
+
* Or explicit user preferences config in order to enable button
|
|
587
|
+
*/
|
|
588
|
+
if (options.provider || options.userPreferencesLink) {
|
|
589
|
+
var _api$analytics3;
|
|
590
|
+
return [{
|
|
591
|
+
type: 'separator'
|
|
592
|
+
}, getHyperlinkToolbarSettingsButton(intl, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink)];
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
return [];
|
|
514
596
|
};
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
+
import { useCallback } from 'react';
|
|
3
|
+
|
|
2
4
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
5
|
import { css, jsx } from '@emotion/react';
|
|
6
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
7
|
import { cardMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
8
|
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
|
|
9
|
+
import { getDatasourceType } from '@atlaskit/editor-common/utils';
|
|
6
10
|
import { Flex } from '@atlaskit/primitives';
|
|
7
|
-
import {
|
|
8
|
-
import { isDatasourceConfigEditable } from '../utils';
|
|
11
|
+
import { showDatasourceModal } from '../pm-plugins/actions';
|
|
12
|
+
import { focusEditorView, isDatasourceConfigEditable } from '../utils';
|
|
9
13
|
import { CardContextProvider } from './CardContextProvider';
|
|
10
14
|
import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
|
|
11
15
|
const buttonStyles = css({
|
|
@@ -20,15 +24,22 @@ const EditDatasourceButtonWithCardContext = ({
|
|
|
20
24
|
editorAnalyticsApi,
|
|
21
25
|
url,
|
|
22
26
|
editorView,
|
|
23
|
-
|
|
27
|
+
currentAppearance
|
|
24
28
|
}) => {
|
|
25
29
|
const {
|
|
26
|
-
datasourceId
|
|
30
|
+
datasourceId,
|
|
31
|
+
extensionKey
|
|
27
32
|
} = useFetchDatasourceInfo({
|
|
28
33
|
isRegularCardNode: true,
|
|
29
34
|
url,
|
|
30
35
|
cardContext
|
|
31
36
|
});
|
|
37
|
+
const onEditDatasource = useCallback(() => {
|
|
38
|
+
if (editorView && datasourceId) {
|
|
39
|
+
editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
|
|
40
|
+
focusEditorView(editorView);
|
|
41
|
+
}
|
|
42
|
+
}, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
|
|
32
43
|
if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
|
|
33
44
|
return null;
|
|
34
45
|
}
|
|
@@ -39,18 +50,12 @@ const EditDatasourceButtonWithCardContext = ({
|
|
|
39
50
|
return null;
|
|
40
51
|
}
|
|
41
52
|
}
|
|
42
|
-
const dispatchCommand = fn => {
|
|
43
|
-
fn && fn(editorState, editorView && editorView.dispatch);
|
|
44
|
-
if (editorView && !editorView.hasFocus()) {
|
|
45
|
-
editorView.focus();
|
|
46
|
-
}
|
|
47
|
-
};
|
|
48
53
|
return jsx(Flex, null, jsx(Button, {
|
|
49
54
|
css: buttonStyles,
|
|
50
55
|
title: intl.formatMessage(messages.datasourceTitle),
|
|
51
56
|
icon: jsx(SmallerEditIcon, null),
|
|
52
57
|
selected: false,
|
|
53
|
-
onClick:
|
|
58
|
+
onClick: onEditDatasource,
|
|
54
59
|
testId: 'card-edit-datasource-button'
|
|
55
60
|
}), jsx(Separator, null));
|
|
56
61
|
};
|
|
@@ -59,7 +64,7 @@ export const EditDatasourceButton = ({
|
|
|
59
64
|
editorAnalyticsApi,
|
|
60
65
|
url,
|
|
61
66
|
editorView,
|
|
62
|
-
|
|
67
|
+
currentAppearance
|
|
63
68
|
}) => {
|
|
64
69
|
return jsx(CardContextProvider, null, ({
|
|
65
70
|
cardContext
|
|
@@ -68,7 +73,29 @@ export const EditDatasourceButton = ({
|
|
|
68
73
|
intl: intl,
|
|
69
74
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
70
75
|
editorView: editorView,
|
|
71
|
-
|
|
72
|
-
|
|
76
|
+
cardContext: cardContext,
|
|
77
|
+
currentAppearance: currentAppearance
|
|
73
78
|
}));
|
|
79
|
+
};
|
|
80
|
+
export const editDatasource = (datasourceId, editorAnalyticsApi, appearance, extensionKey) => (state, dispatch) => {
|
|
81
|
+
const datasourceType = getDatasourceType(datasourceId);
|
|
82
|
+
if (dispatch && datasourceType) {
|
|
83
|
+
const {
|
|
84
|
+
tr
|
|
85
|
+
} = state;
|
|
86
|
+
showDatasourceModal(datasourceType)(tr);
|
|
87
|
+
editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
|
|
88
|
+
action: ACTION.CLICKED,
|
|
89
|
+
actionSubject: ACTION_SUBJECT.BUTTON,
|
|
90
|
+
actionSubjectId: ACTION_SUBJECT_ID.EDIT_DATASOURCE,
|
|
91
|
+
eventType: EVENT_TYPE.UI,
|
|
92
|
+
attributes: {
|
|
93
|
+
extensionKey,
|
|
94
|
+
appearance
|
|
95
|
+
}
|
|
96
|
+
})(tr);
|
|
97
|
+
dispatch(tr);
|
|
98
|
+
return true;
|
|
99
|
+
}
|
|
100
|
+
return false;
|
|
74
101
|
};
|
|
@@ -10,8 +10,8 @@ import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlask
|
|
|
10
10
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
11
11
|
import { ButtonItem } from '@atlaskit/menu';
|
|
12
12
|
import { Flex } from '@atlaskit/primitives';
|
|
13
|
-
import { editDatasource } from '../
|
|
14
|
-
import { isDatasourceConfigEditable } from '../utils';
|
|
13
|
+
import { editDatasource } from '../ui/EditDatasourceButton';
|
|
14
|
+
import { focusEditorView, isDatasourceConfigEditable } from '../utils';
|
|
15
15
|
import { CardContextProvider } from './CardContextProvider';
|
|
16
16
|
import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
|
|
17
17
|
const dropdownExpandContainer = css({
|
|
@@ -20,14 +20,18 @@ const dropdownExpandContainer = css({
|
|
|
20
20
|
const EditToolbarButtonWithCardContext = props => {
|
|
21
21
|
var _response$datasourceI;
|
|
22
22
|
const {
|
|
23
|
-
url,
|
|
24
23
|
cardContext,
|
|
25
|
-
|
|
24
|
+
currentAppearance,
|
|
26
25
|
editorAnalyticsApi,
|
|
27
26
|
editorView,
|
|
28
|
-
|
|
27
|
+
intl,
|
|
28
|
+
onLinkEditClick,
|
|
29
|
+
url
|
|
29
30
|
} = props;
|
|
30
|
-
const
|
|
31
|
+
const {
|
|
32
|
+
extensionKey,
|
|
33
|
+
...response
|
|
34
|
+
} = useFetchDatasourceInfo({
|
|
31
35
|
isRegularCardNode: true,
|
|
32
36
|
url,
|
|
33
37
|
cardContext
|
|
@@ -37,17 +41,12 @@ const EditToolbarButtonWithCardContext = props => {
|
|
|
37
41
|
const containerRef = useRef();
|
|
38
42
|
const toggleOpen = () => setIsOpen(open => !open);
|
|
39
43
|
const onClose = () => setIsOpen(false);
|
|
40
|
-
const
|
|
44
|
+
const onEditLink = useCallback(() => {
|
|
41
45
|
if (editorView) {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
editorView.focus();
|
|
45
|
-
}
|
|
46
|
+
onLinkEditClick(editorView.state, editorView.dispatch);
|
|
47
|
+
focusEditorView(editorView);
|
|
46
48
|
}
|
|
47
|
-
}, [editorView]);
|
|
48
|
-
const onEditLink = useCallback(() => {
|
|
49
|
-
dispatchCommand(onLinkEditClick);
|
|
50
|
-
}, [dispatchCommand, onLinkEditClick]);
|
|
49
|
+
}, [editorView, onLinkEditClick]);
|
|
51
50
|
const editVariant = useMemo(() => {
|
|
52
51
|
const hasUrl = url !== null && url !== undefined;
|
|
53
52
|
if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
|
|
@@ -68,10 +67,11 @@ const EditToolbarButtonWithCardContext = props => {
|
|
|
68
67
|
}
|
|
69
68
|
}, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
|
|
70
69
|
const onEditDatasource = useCallback(() => {
|
|
71
|
-
if (datasourceId) {
|
|
72
|
-
|
|
70
|
+
if (editorView && datasourceId) {
|
|
71
|
+
editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
|
|
72
|
+
focusEditorView(editorView);
|
|
73
73
|
}
|
|
74
|
-
}, [
|
|
74
|
+
}, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
|
|
75
75
|
switch (editVariant) {
|
|
76
76
|
case 'edit-link':
|
|
77
77
|
{
|
|
@@ -137,12 +137,13 @@ const EditToolbarButtonWithCardContext = props => {
|
|
|
137
137
|
};
|
|
138
138
|
export const EditToolbarButton = props => {
|
|
139
139
|
const {
|
|
140
|
+
currentAppearance,
|
|
140
141
|
datasourceId,
|
|
141
|
-
intl,
|
|
142
142
|
editorAnalyticsApi,
|
|
143
|
-
url,
|
|
144
143
|
editorView,
|
|
145
|
-
|
|
144
|
+
intl,
|
|
145
|
+
onLinkEditClick,
|
|
146
|
+
url
|
|
146
147
|
} = props;
|
|
147
148
|
return jsx(CardContextProvider, null, ({
|
|
148
149
|
cardContext
|
|
@@ -153,6 +154,7 @@ export const EditToolbarButton = props => {
|
|
|
153
154
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
154
155
|
editorView: editorView,
|
|
155
156
|
cardContext: cardContext,
|
|
156
|
-
onLinkEditClick: onLinkEditClick
|
|
157
|
+
onLinkEditClick: onLinkEditClick,
|
|
158
|
+
currentAppearance: currentAppearance
|
|
157
159
|
}));
|
|
158
160
|
};
|
|
@@ -79,9 +79,9 @@ export class HyperlinkToolbarAppearance extends Component {
|
|
|
79
79
|
return /*#__PURE__*/React.createElement(Flex, null, !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && /*#__PURE__*/React.createElement(EditDatasourceButton, {
|
|
80
80
|
url: url,
|
|
81
81
|
intl: intl,
|
|
82
|
-
editorState: editorState,
|
|
83
82
|
editorView: editorView,
|
|
84
|
-
editorAnalyticsApi: editorAnalyticsApi
|
|
83
|
+
editorAnalyticsApi: editorAnalyticsApi,
|
|
84
|
+
currentAppearance: "url"
|
|
85
85
|
}), /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
|
|
86
86
|
key: "link-appearance",
|
|
87
87
|
url: url,
|
|
@@ -11,6 +11,7 @@ export const useFetchDatasourceInfo = ({
|
|
|
11
11
|
// Since fetchData() is async, using this ready check to see if we have the parameters before passing it to the modal.
|
|
12
12
|
// Only non-datasource nodes will be not ready initially since we need to fetch data.
|
|
13
13
|
const [ready, setReady] = useState(!isRegularCardNode);
|
|
14
|
+
const [extensionKey, setExtensionKey] = useState(undefined);
|
|
14
15
|
useEffect(() => {
|
|
15
16
|
const fetchDatasource = async () => {
|
|
16
17
|
try {
|
|
@@ -22,12 +23,14 @@ export const useFetchDatasourceInfo = ({
|
|
|
22
23
|
}
|
|
23
24
|
const response = await (cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$connecti = cardContext.connections) === null || _cardContext$connecti === void 0 ? void 0 : (_cardContext$connecti2 = _cardContext$connecti.client) === null || _cardContext$connecti2 === void 0 ? void 0 : _cardContext$connecti2.fetchData(url));
|
|
24
25
|
const datasources = response && response.datasources || [];
|
|
26
|
+
setExtensionKey(response === null || response === void 0 ? void 0 : response.meta.key);
|
|
25
27
|
setDatasourceId((_datasources$ = datasources[0]) === null || _datasources$ === void 0 ? void 0 : _datasources$.id);
|
|
26
28
|
setParameters((_datasources$2 = datasources[0]) === null || _datasources$2 === void 0 ? void 0 : _datasources$2.parameters);
|
|
27
29
|
setReady(true);
|
|
28
30
|
} catch (e) {
|
|
29
31
|
setDatasourceId(undefined);
|
|
30
32
|
setParameters(undefined);
|
|
33
|
+
setExtensionKey(undefined);
|
|
31
34
|
// If fetch somehow errors, still set ready as true so we don't block the rendering of the modal.
|
|
32
35
|
// It will just open with empty params.
|
|
33
36
|
setReady(true);
|
|
@@ -40,6 +43,7 @@ export const useFetchDatasourceInfo = ({
|
|
|
40
43
|
return {
|
|
41
44
|
datasourceId,
|
|
42
45
|
parameters,
|
|
43
|
-
ready
|
|
46
|
+
ready,
|
|
47
|
+
extensionKey
|
|
44
48
|
};
|
|
45
49
|
};
|
package/dist/es2019/utils.js
CHANGED
|
@@ -108,4 +108,14 @@ export const isDatasourceNode = node => {
|
|
|
108
108
|
return false;
|
|
109
109
|
}
|
|
110
110
|
return node.type.name === 'blockCard' && isDatasourceAdfAttributes(node.attrs);
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* Focuses the editorView if it's not already focused.
|
|
115
|
+
* @param editorView The editor view to focus.
|
|
116
|
+
*/
|
|
117
|
+
export const focusEditorView = editorView => {
|
|
118
|
+
if (!editorView.hasFocus()) {
|
|
119
|
+
editorView.focus();
|
|
120
|
+
}
|
|
111
121
|
};
|
package/dist/esm/plugin.js
CHANGED
|
@@ -8,13 +8,13 @@ import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDataso
|
|
|
8
8
|
import { canRenderDatasource } from '@atlaskit/editor-common/utils';
|
|
9
9
|
import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID } from '@atlaskit/link-datasource';
|
|
10
10
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
11
|
+
import { queueCardsFromChangedTr } from '../src/pm-plugins/doc';
|
|
11
12
|
import { createEventsQueue } from './analytics/create-events-queue';
|
|
12
13
|
import { hideLinkToolbar, showDatasourceModal } from './pm-plugins/actions';
|
|
13
|
-
import { getEndingToolbarItems, getStartingToolbarItems, queueCardsFromChangedTr } from './pm-plugins/doc';
|
|
14
14
|
import { cardKeymap } from './pm-plugins/keymap';
|
|
15
15
|
import { createPlugin } from './pm-plugins/main';
|
|
16
16
|
import { pluginKey } from './pm-plugins/plugin-key';
|
|
17
|
-
import { floatingToolbar } from './toolbar';
|
|
17
|
+
import { floatingToolbar, getEndingToolbarItems, getStartingToolbarItems } from './toolbar';
|
|
18
18
|
import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
|
|
19
19
|
import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalytics';
|
|
20
20
|
import { EditorSmartCardEvents } from './ui/EditorSmartCardEvents';
|