@atlaskit/editor-plugin-expand/dist/es2019/singlePlayerExpand/pm-plugins/main.js

Expand plugin for @atlaskit/editor-core

import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
import { expandClassNames } from '@atlaskit/editor-common/styles';
import { transformSliceExpandToNestedExpand, transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
import { fg } from '@atlaskit/platform-feature-flags';
import { TOGGLE_EXPAND_RANGE_META_KEY } from '../../editor-commands/toggleExpandRange';
// Ignored via go/ees005
// eslint-disable-next-line import/no-named-as-default
import ExpandNodeView from '../node-views';
export const pluginKey = new PluginKey('expandPlugin');
export function containsClass(element, className) {
  var _element$classList;
  return Boolean(element === null || element === void 0 ? void 0 : (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(className));
}
export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLongPressSelection = false, api, nodeViewPortalProviderAPI, allowInteractiveExpand = true, __livePage = false) => {
  const isMobile = false;
  return new SafePlugin({
    key: pluginKey,
    state: {
      init() {
        return DecorationSet.empty;
      },
      apply(tr, decorationSet) {
        if (!fg('platform_editor_show_diff_scroll_navigation')) {
          return DecorationSet.empty;
        }
        const meta = tr.getMeta(TOGGLE_EXPAND_RANGE_META_KEY);
        if (meta && meta.positions.length > 0) {
          // Add node decorations for each expand node that was toggled.
          // ExpandNodeView.update() uses these decorations to detect it needs to
          // visually open or close, even when expandedState was set before the
          // transaction replaced the node objects.
          // We do NOT map or carry forward existing decorations — we start fresh
          // each time the meta is present.
          const decorations = meta.positions.map(pos => {
            var _tr$doc$nodeAt$nodeSi, _tr$doc$nodeAt;
            return Decoration.node(pos, pos + ((_tr$doc$nodeAt$nodeSi = (_tr$doc$nodeAt = tr.doc.nodeAt(pos)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize) !== null && _tr$doc$nodeAt$nodeSi !== void 0 ? _tr$doc$nodeAt$nodeSi : 0), {}, {
              forceExpandOpen: meta.open
            });
          });
          return DecorationSet.create(tr.doc, decorations);
        }

        // Map existing decorations through document changes.
        // They will be naturally cleared when they no longer match any node
        // (e.g. if the expand is deleted), or on the next toggleExpandRange call.
        return decorationSet.map(tr.mapping, tr.doc);
      }
    },
    props: {
      decorations(state) {
        if (!fg('platform_editor_show_diff_scroll_navigation')) {
          return undefined;
        }
        return pluginKey.getState(state);
      },
      nodeViews: {
        expand: ExpandNodeView({
          getIntl,
          isMobile,
          api,
          nodeViewPortalProviderAPI,
          allowInteractiveExpand,
          __livePage
        }),
        nestedExpand: ExpandNodeView({
          getIntl,
          isMobile,
          api,
          nodeViewPortalProviderAPI,
          allowInteractiveExpand,
          __livePage
        })
      },
      handleKeyDown(_view, event) {
        return containsClass(event.target, expandClassNames.titleContainer);
      },
      handleKeyPress(_view, event) {
        return containsClass(event.target, expandClassNames.titleContainer);
      },
      handleScrollToSelection() {
        return containsClass(document.activeElement, expandClassNames.titleInput);
      },
      handleClickOn: createSelectionClickHandler(['expand', 'nestedExpand'], target => target.classList.contains(expandClassNames.prefix), {
        useLongPressSelection
      }),
      handleDrop(view, event, slice, _moved) {
        return handleExpandDrag(view, event, slice);
      }
    },
    // @see ED-8027 to follow up on this work-around
    filterTransaction(tr) {
      if (containsClass(document.activeElement, expandClassNames.titleInput) && tr.selectionSet && (!tr.steps.length || tr.isGeneric)) {
        return false;
      }
      return true;
    }
  });
};

/**
 * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
 */
export function handleExpandDrag(view, event, slice) {
  const {
    state,
    dispatch
  } = view;
  const tr = state.tr;
  const {
    selection
  } = state;
  const {
    from,
    to
  } = selection;
  let sliceContainsExpand = false;
  let sliceContainsNestedExpand = false;
  slice.content.forEach(node => {
    if (node.type === state.schema.nodes.expand) {
      sliceContainsExpand = true;
    } else if (node.type === state.schema.nodes.nestedExpand) {
      sliceContainsNestedExpand = true;
    }
  });

  // Check if the contents of the dragged slice contain a nested expand node or expand node.
  // Also not handling expands with nested expands for now.
  if (!sliceContainsExpand && !sliceContainsNestedExpand || sliceContainsExpand && sliceContainsNestedExpand) {
    return false;
  }
  const dropPos = view.posAtCoords({
    left: event.clientX,
    top: event.clientY
  });
  if (!dropPos) {
    return false;
  }
  const resolvedPos = state.doc.resolve(dropPos.pos);
  const dropLocationNodeType = resolvedPos.node().type;
  const dropLocationParentNodeType = resolvedPos.depth > 0 ? resolvedPos.node(resolvedPos.depth - 1).type : dropLocationNodeType;
  const nodesWithNestedExpandSupport = [state.schema.nodes.expand, state.schema.nodes.tableHeader, state.schema.nodes.tableCell];
  const isNodeAtDropPosInsideNodesWithNestedExpandSupport = nodesWithNestedExpandSupport.includes(dropLocationNodeType) || nodesWithNestedExpandSupport.includes(dropLocationParentNodeType);
  const isNodeBeingDroppedInsideNestedExpand = dropLocationNodeType === state.schema.nodes.nestedExpand || dropLocationParentNodeType === state.schema.nodes.nestedExpand;
  let updatedSlice = slice;
  if (sliceContainsExpand && isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
    updatedSlice = transformSliceExpandToNestedExpand(slice);
  } else if (sliceContainsNestedExpand && !isNodeAtDropPosInsideNodesWithNestedExpandSupport && !isNodeBeingDroppedInsideNestedExpand) {
    updatedSlice = transformSliceNestedExpandToExpand(slice, state.schema);
  }
  if (!updatedSlice || updatedSlice.eq(slice)) {
    return false;
  }

  // The drop position will be affected when the original slice is deleted from the document.
  let updatedDropPos = dropPos.pos > from ? dropPos.pos - updatedSlice.content.size : dropPos.pos;

  // Adjust the drop position to place the slice before the node at the position the cursor is pointing at, except when the drop location is the document node.
  // Otherwise causes weird behaviour with tables & quotes, splits them apart. Only do this for nested expand slice transformed to expand.
  if (dropLocationNodeType !== state.schema.nodes.doc && !sliceContainsExpand) {
    updatedDropPos = updatedDropPos - 1;
  }
  tr.delete(from, to);
  tr.insert(updatedDropPos, updatedSlice.content);
  dispatch(tr);
  return true;
}