@atlaskit/editor-plugin-card 2.0.6 → 2.0.7

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.
Files changed (42) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/plugin.js +3 -3
  3. package/dist/cjs/pm-plugins/doc.js +1 -109
  4. package/dist/cjs/toolbar.js +92 -6
  5. package/dist/cjs/ui/EditDatasourceButton.js +50 -25
  6. package/dist/cjs/ui/EditToolbarButton.js +30 -29
  7. package/dist/cjs/ui/HyperlinkToolbarAppearance.js +2 -2
  8. package/dist/cjs/ui/useFetchDatasourceInfo.js +13 -6
  9. package/dist/cjs/utils.js +11 -1
  10. package/dist/es2019/plugin.js +2 -2
  11. package/dist/es2019/pm-plugins/doc.js +2 -106
  12. package/dist/es2019/toolbar.js +88 -6
  13. package/dist/es2019/ui/EditDatasourceButton.js +41 -14
  14. package/dist/es2019/ui/EditToolbarButton.js +24 -22
  15. package/dist/es2019/ui/HyperlinkToolbarAppearance.js +2 -2
  16. package/dist/es2019/ui/useFetchDatasourceInfo.js +5 -1
  17. package/dist/es2019/utils.js +10 -0
  18. package/dist/esm/plugin.js +2 -2
  19. package/dist/esm/pm-plugins/doc.js +2 -110
  20. package/dist/esm/toolbar.js +92 -6
  21. package/dist/esm/ui/EditDatasourceButton.js +41 -16
  22. package/dist/esm/ui/EditToolbarButton.js +31 -28
  23. package/dist/esm/ui/HyperlinkToolbarAppearance.js +2 -2
  24. package/dist/esm/ui/useFetchDatasourceInfo.js +13 -6
  25. package/dist/esm/utils.js +10 -0
  26. package/dist/types/pm-plugins/doc.d.ts +3 -11
  27. package/dist/types/toolbar.d.ts +7 -0
  28. package/dist/types/types.d.ts +1 -0
  29. package/dist/types/ui/EditDatasourceButton.d.ts +6 -5
  30. package/dist/types/ui/EditLinkToolbar.d.ts +1 -1
  31. package/dist/types/ui/EditToolbarButton.d.ts +3 -1
  32. package/dist/types/ui/useFetchDatasourceInfo.d.ts +1 -0
  33. package/dist/types/utils.d.ts +6 -0
  34. package/dist/types-ts4.5/pm-plugins/doc.d.ts +3 -11
  35. package/dist/types-ts4.5/toolbar.d.ts +7 -0
  36. package/dist/types-ts4.5/types.d.ts +1 -0
  37. package/dist/types-ts4.5/ui/EditDatasourceButton.d.ts +6 -5
  38. package/dist/types-ts4.5/ui/EditLinkToolbar.d.ts +1 -1
  39. package/dist/types-ts4.5/ui/EditToolbarButton.d.ts +3 -1
  40. package/dist/types-ts4.5/ui/useFetchDatasourceInfo.d.ts +1 -0
  41. package/dist/types-ts4.5/utils.d.ts +6 -0
  42. package/package.json +2 -2
@@ -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 { linkToolbarMessages } from '@atlaskit/editor-common/messages';
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, showDatasourceModal } from './actions';
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
  };
@@ -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, editDatasource } from './pm-plugins/doc';
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
- editorState: state
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 { editDatasource } from '../pm-plugins/doc';
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
- editorState
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: () => dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi)),
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
- editorState
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
- editorState: editorState,
72
- cardContext: cardContext
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 '../pm-plugins/doc';
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
- intl,
24
+ currentAppearance,
26
25
  editorAnalyticsApi,
27
26
  editorView,
28
- onLinkEditClick
27
+ intl,
28
+ onLinkEditClick,
29
+ url
29
30
  } = props;
30
- const response = useFetchDatasourceInfo({
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 dispatchCommand = useCallback(fn => {
44
+ const onEditLink = useCallback(() => {
41
45
  if (editorView) {
42
- fn === null || fn === void 0 ? void 0 : fn(editorView.state, editorView.dispatch);
43
- if (!editorView.hasFocus()) {
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
- dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
70
+ if (editorView && datasourceId) {
71
+ editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
72
+ focusEditorView(editorView);
73
73
  }
74
- }, [dispatchCommand, datasourceId, editorAnalyticsApi]);
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
- onLinkEditClick
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
  };
@@ -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
  };
@@ -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';