@atlaskit/editor-plugin-loom/dist/esm/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';
var useLoomEnabled = function useLoomEnabled(api) {
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['loom'], function (states) {
      var _states$loomState;
      return {
        loomEnabled: (_states$loomState = states.loomState) === null || _states$loomState === void 0 ? void 0 : _states$loomState.isEnabled
      };
    }),
    loomEnabled = _useSharedPluginState.loomEnabled;
  return loomEnabled;
};
export var LoomMenuItem = function LoomMenuItem(_ref) {
  var api = _ref.api,
    renderButton = _ref.renderButton;
  var loomEnabled = useLoomEnabled(api);
  var _useEditorToolbar = useEditorToolbar(),
    editorViewMode = _useEditorToolbar.editorViewMode;
  if (editorViewMode !== 'edit') {
    return null;
  }
  if (renderButton) {
    return renderButton(CustomisableLoomMenuItem(api));
  } else if (loomEnabled !== undefined) {
    return /*#__PURE__*/React.createElement(DefaultLoomMenuItem, {
      api: api
    });
  }
};
export var CustomisableLoomMenuItem = function CustomisableLoomMenuItem(api) {
  return /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
    var _ref2$isDisabled = _ref2.isDisabled,
      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
      onClickBeforeInit = _ref2.onClickBeforeInit,
      href = _ref2.href,
      target = _ref2.target,
      rel = _ref2.rel;
    var loomEnabled = !!useLoomEnabled(api);
    var handleOnClick = useCallback(function (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
    });
  });
};
var DefaultLoomMenuItem = function DefaultLoomMenuItem(_ref3) {
  var api = _ref3.api;
  var loomEnabled = useLoomEnabled(api);
  var handleOnClick = useCallback(function () {
    return executeRecordVideo(api);
  }, [api]);
  return /*#__PURE__*/React.createElement(MenuItemComponent, {
    disabled: !loomEnabled,
    onClick: handleOnClick
  });
};
var MenuItemComponent = /*#__PURE__*/React.forwardRef(
// eslint-disable-next-line no-unused-vars
function (_ref4, ref) {
  var disabled = _ref4.disabled,
    _onClick = _ref4.onClick,
    href = _ref4.href,
    target = _ref4.target,
    rel = _ref4.rel;
  var _useEditorToolbar2 = useEditorToolbar(),
    editorAppearance = _useEditorToolbar2.editorAppearance;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  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: function onClick(e) {
      return _onClick(e);
    }
  }, formatMessage(editorAppearance === 'comment' ? messages.addLoomVideoComment : messages.addLoomVideo));
});