@atlaskit/editor-plugin-card/dist/esm/ui/DatasourceAppearanceButton.js

Card plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useCallback } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { cardMessages as messages } from '@atlaskit/editor-common/messages';
import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
import { canRenderDatasource } from '@atlaskit/editor-common/utils';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { buildDatasourceAdf } from '@atlaskit/link-datasource';
import { useSmartLinkContext } from '@atlaskit/link-provider';
import { Flex } from '@atlaskit/primitives/compiled';
import { updateCardViaDatasource } from '../pm-plugins/doc';
import { pluginKey } from '../pm-plugins/plugin-key';
import { DatasourceIcon } from './DatasourceIcon';
import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
var buttonStyles = css({
  pointerEvents: 'auto'
});
var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceButtonWithCardContext(_ref) {
  var cardContext = _ref.cardContext,
    intl = _ref.intl,
    url = _ref.url,
    editorView = _ref.editorView,
    editorState = _ref.editorState,
    selected = _ref.selected,
    inputMethod = _ref.inputMethod,
    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
  var _useFetchDatasourceIn = useFetchDatasourceInfo({
      isRegularCardNode: true,
      url: url,
      cardContext: cardContext
    }),
    datasourceId = _useFetchDatasourceIn.datasourceId,
    parameters = _useFetchDatasourceIn.parameters;
  var onChangeAppearance = useCallback(function () {
    var _state$datasourceStas, _state$datasourceStas2;
    if (!editorView || !datasourceId || !parameters) {
      return;
    }
    var state = pluginKey.getState(editorState);
    var newAdf = buildDatasourceAdf({
      id: datasourceId,
      parameters: parameters,
      views: (_state$datasourceStas = state === null || state === void 0 || (_state$datasourceStas2 = state.datasourceStash[url]) === null || _state$datasourceStas2 === void 0 ? void 0 : _state$datasourceStas2.views) !== null && _state$datasourceStas !== void 0 ? _state$datasourceStas : [{
        type: 'table'
      }]
    }, url);
    var selection = editorState.selection;
    var existingNode;
    // Check if the selection contains a link mark
    var $pos = editorState.doc.resolve(selection.from);
    var isLinkMark = $pos.marks().some(function (mark) {
      return mark.type === editorState.schema.marks.link;
    });

    // When selection is a TextNode and a link Mark is present return that node
    if (selection instanceof NodeSelection) {
      existingNode = selection.node;
    } else if (isLinkMark) {
      var _editorState$doc$node;
      existingNode = (_editorState$doc$node = editorState.doc.nodeAt(selection.from)) !== null && _editorState$doc$node !== void 0 ? _editorState$doc$node : undefined;
    }
    if (existingNode) {
      updateCardViaDatasource({
        state: editorState,
        node: existingNode,
        newAdf: newAdf,
        view: editorView,
        sourceEvent: undefined,
        isDeletingConfig: true,
        inputMethod: inputMethod
      });
    }
  }, [parameters, datasourceId, inputMethod, editorState, editorView, url]);
  if (!parameters || !datasourceId || !canRenderDatasource(datasourceId)) {
    return null;
  }
  if (url) {
    var _cardContext$store, _urlState$error;
    var urlState = cardContext === null || cardContext === void 0 || (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
    if ((urlState === null || urlState === void 0 || (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
      return null;
    }
  }
  var buttonLabel = intl.formatMessage(messages.datasourceAppearanceTitle);
  return jsx(Flex, null, jsx(Button, {
    css: buttonStyles,
    title: buttonLabel,
    icon: jsx(DatasourceIcon, {
      label: buttonLabel
    }),
    selected: selected,
    onClick: onChangeAppearance,
    testId: 'card-datasource-appearance-button',
    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
  }));
};
export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref2) {
  var intl = _ref2.intl,
    editorAnalyticsApi = _ref2.editorAnalyticsApi,
    url = _ref2.url,
    editorView = _ref2.editorView,
    editorState = _ref2.editorState,
    selected = _ref2.selected,
    inputMethod = _ref2.inputMethod,
    areAnyNewToolbarFlagsEnabled = _ref2.areAnyNewToolbarFlagsEnabled;
  var cardContext = useSmartLinkContext();
  return jsx(DatasourceAppearanceButtonWithCardContext, {
    url: url,
    intl: intl,
    editorAnalyticsApi: editorAnalyticsApi,
    editorView: editorView,
    editorState: editorState,
    cardContext: cardContext,
    selected: selected,
    inputMethod: inputMethod,
    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
  });
};