@atlaskit/editor-plugin-breakout/dist/es2019/pm-plugins/handle-key-down.js

Breakout plugin for @atlaskit/editor-core

import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { getBreakoutResizableNodeTypes, getBreakoutResizableNodeTypesNew } from '@atlaskit/editor-common/utils';
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
import { clampWidthToResizeBounds, getResizeContainerWidth } from './resize-width';
const KEYBOARD_RESIZE_STEP = 10;
const getKeyboardResizeWidth = (currentWidth, step, api) => {
  const containerWidth = getResizeContainerWidth(api);
  const resizeStartWidth = Math.min(currentWidth, containerWidth);
  return clampWidthToResizeBounds(resizeStartWidth + step, containerWidth);
};
const getAncestorResizableNode = (view, breakoutResizableNodes) => {
  const selection = view.state.selection;
  if (selection instanceof NodeSelection) {
    const selectedNode = selection.node;
    if (breakoutResizableNodes.has(selectedNode.type)) {
      return {
        node: selectedNode,
        pos: selection.$from.pos
      };
    }
  } else if (selection instanceof TextSelection) {
    let node = null;
    let nodePos = null;

    // only top level nodes are resizable
    const resolvedPos = view.state.doc.resolve(selection.$from.pos);
    const currentNode = resolvedPos.node(1);
    if (breakoutResizableNodes.has(currentNode.type)) {
      node = currentNode;
      nodePos = resolvedPos.before(1);
      return {
        node: node,
        pos: nodePos
      };
    }
  }
  return null;
};
export const handleKeyDown = api => (view, event) => {
  const browser = getBrowserInfo();
  const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
  const isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
  if (metaKey && event.altKey && isBracketKey) {
    const breakoutResizableNodes = isExperimentEnabled('platform_editor_lovability_resize_extensions') ? getBreakoutResizableNodeTypesNew(view.state.schema) : getBreakoutResizableNodeTypes(view.state.schema, expValEquals('platform_editor_lovability_resize_dividers_panels', 'isEnabled', true));
    const result = getAncestorResizableNode(view, breakoutResizableNodes);
    if (result) {
      const {
        node,
        pos
      } = result;
      const breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(mark => mark.type.name === 'breakout');
      if (breakoutMark) {
        const step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
        const newWidth = getKeyboardResizeWidth(breakoutMark.attrs.width, step, api);
        if (newWidth !== breakoutMark.attrs.width) {
          var _api$editorViewMode, _api$editorViewMode$s;
          const isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
          setBreakoutWidth(newWidth, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
          view.focus();
        }
        return true;
      }
    }
  }
  return false;
};