@atlaskit/editor-plugin-breakout/dist/es2019/pm-plugins/resizing-plugin.js

Breakout plugin for @atlaskit/editor-core

import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { getBreakoutResizableNodeTypes, stepAddsOneOf } from '@atlaskit/editor-common/utils';
import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { handleKeyDown } from './handle-key-down';
import { ResizingMarkView } from './resizing-mark-view';
import { updateExpandedStateNew } from './utils/single-player-expand';
const addBreakoutToResizableNode = ({
  node,
  pos,
  newState,
  newTr,
  breakoutResizableNodes,
  isFullWidthEnabled
}) => {
  let updatedDocChanged = false;
  let updatedTr = newTr;
  const $pos = newState.doc.resolve(pos);
  const isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.depth) === 0;
  if (breakoutResizableNodes.has(node.type) && isTopLevelNode) {
    const {
      breakout
    } = newState.schema.marks;
    const {
      expand
    } = newState.schema.nodes;
    const breakoutMark = node.marks.find(mark => mark.type === breakout);
    const isExpand = node.type === expand;
    if (!breakoutMark) {
      const width = isFullWidthEnabled ? akEditorFullWidthLayoutWidth : akEditorDefaultLayoutWidth;
      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
        width: width
      })]);
      if (isExpand) {
        updateExpandedStateNew({
          tr: updatedTr,
          node,
          pos,
          isLivePage: true
        });
      }
      updatedDocChanged = true;
    } else if ((breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === null || (breakoutMark === null || breakoutMark === void 0 ? void 0 : breakoutMark.attrs.width) === undefined) {
      const mode = breakoutMark.attrs.mode;

      // if breakout is present on node, but page appearance is 'full width' force width to full width to maintain backwards compatibility
      const newWidth = isFullWidthEnabled || mode === 'full-width' ? akEditorFullWidthLayoutWidth : akEditorCalculatedWideLayoutWidth;
      updatedTr = newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
        width: newWidth,
        mode: mode
      })]);
      if (isExpand) {
        updateExpandedStateNew({
          tr: updatedTr,
          node,
          pos,
          isLivePage: true
        });
      }
      updatedDocChanged = true;
    }
  }
  return {
    updatedTr,
    updatedDocChanged
  };
};
export const resizingPluginKey = new PluginKey('breakout-resizing');
const pluginState = {
  init() {
    return {
      breakoutNode: undefined,
      activeGuidelineLabel: undefined
    };
  },
  apply(tr, pluginState) {
    const meta = tr.getMeta(resizingPluginKey);
    if (meta) {
      switch (meta.type) {
        case 'UPDATE_BREAKOUT_NODE':
          return {
            ...pluginState,
            breakoutNode: meta.data
          };
        case 'UPDATE_ACTIVE_GUIDELINE_KEY':
          return {
            ...pluginState,
            activeGuidelineKey: meta.data.activeGuidelineKey
          };
        case 'CLEAR_ACTIVE_GUIDELINE_KEY':
          return {
            ...pluginState,
            activeGuidelineKey: undefined
          };
        case 'RESET_STATE':
          return {
            activeGuidelineLabel: undefined,
            breakoutNode: undefined
          };
      }
    }
    return pluginState;
  }
};
export const createResizingPlugin = (api, getIntl, nodeViewPortalProviderAPI, options) => {
  return new SafePlugin({
    key: resizingPluginKey,
    state: pluginState,
    props: {
      markViews: {
        breakout: (mark, view) => {
          return new ResizingMarkView(mark, view, api, getIntl, nodeViewPortalProviderAPI);
        }
      },
      handleKeyDown: handleKeyDown(api)
    },
    appendTransaction(transactions, oldState, newState) {
      var _api$editorViewMode, _api$editorViewMode$s;
      if ((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) === 'view') {
        return;
      }
      let newTr = newState.tr;
      let hasDocChanged = false;
      const {
        expand,
        codeBlock,
        layoutSection
      } = newState.schema.nodes;
      const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(newState.schema) : new Set([expand, codeBlock, layoutSection]);
      const isFullWidthEnabled = !((options === null || options === void 0 ? void 0 : options.allowBreakoutButton) === true);
      if (isReplaceDocOperation(transactions, oldState)) {
        newState.doc.forEach((node, pos) => {
          const {
            updatedTr,
            updatedDocChanged
          } = addBreakoutToResizableNode({
            node,
            pos,
            newState,
            newTr,
            breakoutResizableNodes,
            isFullWidthEnabled
          });
          newTr = updatedTr;
          hasDocChanged = hasDocChanged || updatedDocChanged;
        });
      } else {
        transactions.forEach(tr => {
          const isAddingResizableNodes = tr.steps.some(step => stepAddsOneOf(step, breakoutResizableNodes));
          if (isAddingResizableNodes) {
            const changedNodes = getChangedNodes(tr);
            changedNodes.forEach(({
              node,
              pos
            }) => {
              const {
                updatedTr,
                updatedDocChanged
              } = addBreakoutToResizableNode({
                node,
                pos,
                newState,
                newTr,
                breakoutResizableNodes,
                isFullWidthEnabled
              });
              newTr = updatedTr;
              hasDocChanged = hasDocChanged || updatedDocChanged;
            });
          }
        });
      }
      if (hasDocChanged) {
        return newTr;
      }
    }
  });
};