@atlaskit/editor-plugin-code-block/dist/es2019/codeBlockPlugin.js

Code block plugin for @atlaskit/editor-core

import React from 'react';
import { codeBlock, codeBlockWithLocalId } from '@atlaskit/adf-schema';
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
import { blockTypeMessages } from '@atlaskit/editor-common/messages';
import { IconCode } from '@atlaskit/editor-common/quick-insert';
import { fg } from '@atlaskit/platform-feature-flags';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { createInsertCodeBlockTransaction, insertCodeBlockWithAnalytics } from './editor-commands';
import { codeBlockAutoFullStopTransformPlugin } from './pm-plugins/codeBlockAutoFullStopTransformPlugin';
import { codeBlockCopySelectionPlugin, copySelectionPluginKey } from './pm-plugins/codeBlockCopySelectionPlugin';
import ideUX from './pm-plugins/ide-ux';
import { createCodeBlockInputRule } from './pm-plugins/input-rule';
import keymap from './pm-plugins/keymaps';
import { createPlugin } from './pm-plugins/main';
import refreshBrowserSelectionOnChange from './pm-plugins/refresh-browser-selection';
import { getToolbarConfig } from './pm-plugins/toolbar';
import { createCodeBlockMenuItem } from './ui/CodeBlockMenuItem';
const CODE_BLOCK_NODE_NAME = 'codeBlock';
const codeBlockPlugin = ({
  config: options,
  api
}) => {
  if (editorExperiment('platform_editor_block_menu', true)) {
    var _api$blockMenu;
    api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents([{
      type: 'block-menu-item',
      key: TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key,
      parent: {
        type: 'block-menu-section',
        key: TRANSFORM_STRUCTURE_MENU_SECTION.key,
        rank: TRANSFORM_STRUCTURE_MENU_SECTION_RANK[TRANSFORM_STRUCTURE_CODE_BLOCK_MENU_ITEM.key]
      },
      component: createCodeBlockMenuItem(api),
      isHidden: () => {
        var _api$blockMenu2;
        return Boolean(api === null || api === void 0 ? void 0 : (_api$blockMenu2 = api.blockMenu) === null || _api$blockMenu2 === void 0 ? void 0 : _api$blockMenu2.actions.isTransformOptionDisabled(CODE_BLOCK_NODE_NAME));
      }
    }]);
  }
  return {
    name: 'codeBlock',
    nodes() {
      return [{
        name: 'codeBlock',
        node: fg('platform_editor_adf_with_localid') ? codeBlockWithLocalId : codeBlock
      }];
    },
    getSharedState(state) {
      if (!state) {
        return undefined;
      }
      return {
        copyButtonHoverNode: copySelectionPluginKey.getState(state).codeBlockNode
      };
    },
    pmPlugins() {
      return [{
        name: 'codeBlock',
        plugin: ({
          getIntl
        }) => createPlugin({
          ...options,
          getIntl,
          api
        })
      }, {
        name: 'codeBlockInputRule',
        plugin: ({
          schema
        }) => {
          var _api$analytics;
          return createCodeBlockInputRule(schema, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
        }
      }, {
        name: 'codeBlockIDEKeyBindings',
        plugin: () => ideUX(api)
      }, {
        name: 'codeBlockKeyMap',
        plugin: ({
          schema
        }) => keymap(schema)
      }, {
        name: 'codeBlockCopySelection',
        plugin: () => codeBlockCopySelectionPlugin()
      }, {
        name: 'codeBlockAutoFullStopTransform',
        plugin: () => codeBlockAutoFullStopTransformPlugin()
      }];
    },
    // Workaround for a firefox issue where dom selection is off sync
    // https://product-fabric.atlassian.net/browse/ED-12442
    onEditorViewStateUpdated(props) {
      refreshBrowserSelectionOnChange(props.originalTransaction, props.newEditorState);
    },
    actions: {
      /*
       * Function will insert code block at current selection if block is empty or below current selection and set focus on it.
       */
      insertCodeBlock: inputMethod => {
        var _api$analytics2;
        return insertCodeBlockWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
      }
    },
    pluginsOptions: {
      quickInsert: ({
        formatMessage
      }) => [{
        id: 'codeblock',
        title: formatMessage(blockTypeMessages.codeblock),
        description: formatMessage(blockTypeMessages.codeblockDescription),
        keywords: ['code block'],
        priority: 700,
        keyshortcut: '```',
        icon: () => /*#__PURE__*/React.createElement(IconCode, null),
        action(_insert, state, source) {
          var _api$analytics3;
          const tr = createInsertCodeBlockTransaction({
            state
          });
          api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({
            action: ACTION.INSERTED,
            actionSubject: ACTION_SUBJECT.DOCUMENT,
            actionSubjectId: ACTION_SUBJECT_ID.CODE_BLOCK,
            attributes: {
              inputMethod: source || INPUT_METHOD.QUICK_INSERT
            },
            eventType: EVENT_TYPE.TRACK
          })(tr);
          return tr;
        }
      }],
      floatingToolbar: getToolbarConfig(options === null || options === void 0 ? void 0 : options.allowCopyToClipboard, api, options === null || options === void 0 ? void 0 : options.overrideLanguageName)
    }
  };
};
export default codeBlockPlugin;