@atlaskit/editor-plugin-card/dist/es2019/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';
const buttonStyles = css({
  pointerEvents: 'auto'
});
const DatasourceAppearanceButtonWithCardContext = ({
  cardContext,
  intl,
  url,
  editorView,
  editorState,
  selected,
  inputMethod,
  areAnyNewToolbarFlagsEnabled
}) => {
  const {
    datasourceId,
    parameters
  } = useFetchDatasourceInfo({
    isRegularCardNode: true,
    url,
    cardContext
  });
  const onChangeAppearance = useCallback(() => {
    var _state$datasourceStas, _state$datasourceStas2;
    if (!editorView || !datasourceId || !parameters) {
      return;
    }
    const state = pluginKey.getState(editorState);
    const newAdf = buildDatasourceAdf({
      id: datasourceId,
      parameters,
      views: (_state$datasourceStas = state === null || state === void 0 ? 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);
    const {
      selection
    } = editorState;
    let existingNode;
    // Check if the selection contains a link mark
    const $pos = editorState.doc.resolve(selection.from);
    const isLinkMark = $pos.marks().some(mark => 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,
        view: editorView,
        sourceEvent: undefined,
        isDeletingConfig: true,
        inputMethod
      });
    }
  }, [parameters, datasourceId, inputMethod, editorState, editorView, url]);
  if (!parameters || !datasourceId || !canRenderDatasource(datasourceId)) {
    return null;
  }
  if (url) {
    var _cardContext$store, _urlState$error;
    const urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
    if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
      return null;
    }
  }
  const 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 const DatasourceAppearanceButton = ({
  intl,
  editorAnalyticsApi,
  url,
  editorView,
  editorState,
  selected,
  inputMethod,
  areAnyNewToolbarFlagsEnabled
}) => {
  const cardContext = useSmartLinkContext();
  return jsx(DatasourceAppearanceButtonWithCardContext, {
    url: url,
    intl: intl,
    editorAnalyticsApi: editorAnalyticsApi,
    editorView: editorView,
    editorState: editorState,
    cardContext: cardContext,
    selected: selected,
    inputMethod: inputMethod,
    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
  });
};