@atlaskit/editor-plugin-loom/dist/es2019/ui/LoomMenuItem.js

Loom plugin for @atlaskit/editor-core

import React, { useCallback } from 'react';
import { useIntl } from 'react-intl';
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
import { LoomIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
import { executeRecordVideo } from '../pm-plugins/commands';
const useLoomEnabled = api => {
  const {
    loomEnabled
  } = useSharedPluginStateWithSelector(api, ['loom'], states => {
    var _states$loomState;
    return {
      loomEnabled: (_states$loomState = states.loomState) === null || _states$loomState === void 0 ? void 0 : _states$loomState.isEnabled
    };
  });
  return loomEnabled;
};
export const LoomMenuItem = ({
  api,
  renderButton
}) => {
  const loomEnabled = useLoomEnabled(api);
  const {
    editorViewMode
  } = useEditorToolbar();
  if (editorViewMode !== 'edit') {
    return null;
  }
  if (renderButton) {
    return renderButton(CustomisableLoomMenuItem(api));
  } else if (loomEnabled !== undefined) {
    return /*#__PURE__*/React.createElement(DefaultLoomMenuItem, {
      api: api
    });
  }
};
export const CustomisableLoomMenuItem = api => /*#__PURE__*/React.forwardRef(({
  isDisabled = false,
  onClickBeforeInit,
  href,
  target,
  rel
}, ref) => {
  const loomEnabled = !!useLoomEnabled(api);
  const handleOnClick = useCallback(e => {
    if (loomEnabled) {
      executeRecordVideo(api);
    } else if (onClickBeforeInit && e.type === 'click' && e.target instanceof HTMLElement) {
      onClickBeforeInit(e);
    }
  }, [loomEnabled, onClickBeforeInit]);
  return /*#__PURE__*/React.createElement(MenuItemComponent, {
    ref: ref
    // Ignore href if Loom is enabled so that it doesn't interfere with recording
    ,
    href: loomEnabled ? undefined : href,
    disabled: isDisabled,
    onClick: handleOnClick,
    target: target,
    rel: rel
  });
});
const DefaultLoomMenuItem = ({
  api
}) => {
  const loomEnabled = useLoomEnabled(api);
  const handleOnClick = useCallback(() => executeRecordVideo(api), [api]);
  return /*#__PURE__*/React.createElement(MenuItemComponent, {
    disabled: !loomEnabled,
    onClick: handleOnClick
  });
};
const MenuItemComponent = /*#__PURE__*/React.forwardRef(
// eslint-disable-next-line no-unused-vars
({
  disabled,
  onClick,
  href,
  target,
  rel
}, ref) => {
  const {
    editorAppearance
  } = useEditorToolbar();
  const {
    formatMessage
  } = useIntl();
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
    elemBefore: /*#__PURE__*/React.createElement(LoomIcon, {
      size: "small",
      label: ""
    }),
    isDisabled: disabled,
    href: href,
    target: target,
    rel: rel
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    ,
    onClick: e => onClick(e)
  }, formatMessage(editorAppearance === 'comment' ? messages.addLoomVideoComment : messages.addLoomVideo));
});