@atlaskit/editor-plugin-layout/dist/cjs/pm-plugins/resizing.js

Layout plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.pluginKey = exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _isSsr = require("@atlaskit/editor-common/is-ssr");
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _model = require("@atlaskit/editor-prosemirror/model");
var _state = require("@atlaskit/editor-prosemirror/state");
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _nodeviews = require("../nodeviews");
var _layoutSectionView = require("../nodeviews/layoutSectionView");
var pluginKey = exports.pluginKey = new _state.PluginKey('layoutResizingPlugin');

/**
 * Minimal node view for layoutColumn that delegates all DOM serialization to the
 * NodeSpec's own toDOM, but overrides ignoreMutation to suppress style attribute
 * mutations from ProseMirror's MutationObserver.
 *
 * This is necessary so that direct inline style mutations during column drag
 * (e.g. setting flex-basis to give real-time visual feedback without dispatching
 * PM transactions) are not "corrected" back by ProseMirror's DOM reconciliation.
 */
var isLayoutElementLike = function isLayoutElementLike(element) {
  if ((0, _isSsr.isSSR)()) {
    // In SSR environments, `HTMLElement` is undefined globally so a plain
    // `instanceof HTMLElement` check is always `false`. That makes the
    // `DOMSerializer.renderSpec(...)` result get rejected by the guard below and
    // the NodeView falls back to a bare `<div>`, losing every schema-defined
    // attribute (`data-layout-column`, `style="flex-basis:..."`,
    // `data-column-width`, plus the inner `<div data-layout-content="true">`
    // wrapper) and breaking the layout's flex sizing in SSR output.
    //
    // To unblock SSR without changing CSR semantics, we gate the check:
    // - In SSR, use a duck-typed check that mirrors `safe-plugin`'s `isHTMLElement`.
    // - Everywhere else, keep the original `instanceof HTMLElement` check exactly
    //   as it was so we don't accidentally widen acceptance in CSR.
    if (element === null || element === undefined) {
      return false;
    }
    return (0, _typeof2.default)(element) === 'object' && 'innerHTML' in element && 'style' in element && 'classList' in element;
  }
  return element instanceof HTMLElement;
};
var LayoutColumnView = /*#__PURE__*/function () {
  function LayoutColumnView(node, view, getPos) {
    (0, _classCallCheck2.default)(this, LayoutColumnView);
    // Use the NodeSpec's own toDOM to produce the correct DOM structure and attributes.
    var nodeType = view.state.schema.nodes[node.type.name];

    // Fallback: create a plain div so PM always has a valid DOM node to work with.
    // This path should never be reached in practice — layoutColumn always has a toDOM.
    if (!nodeType.spec.toDOM) {
      var fallbackDiv = document.createElement('div');
      this.dom = fallbackDiv;
      this.contentDOM = fallbackDiv;
      return;
    }
    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, nodeType.spec.toDOM(node)),
      dom = _DOMSerializer$render.dom,
      contentDOM = _DOMSerializer$render.contentDOM;
    if (!isLayoutElementLike(dom) || !isLayoutElementLike(contentDOM)) {
      var _fallbackDiv = document.createElement('div');
      this.dom = _fallbackDiv;
      this.contentDOM = _fallbackDiv;
      return;
    }
    this.dom = dom;
    this.contentDOM = contentDOM;

    // Stamp the column's index within its parent section onto the DOM element so that
    // column-resize-divider can query columns by index rather than relying on positional
    // order of [data-layout-column] elements (which could break if the DOM structure changes).
    var pos = getPos();
    if (pos !== undefined) {
      var $pos = view.state.doc.resolve(pos);
      this.dom.setAttribute('data-layout-column-index', String($pos.index()));
    }
  }
  return (0, _createClass2.default)(LayoutColumnView, [{
    key: "ignoreMutation",
    value: function ignoreMutation(mutation) {
      // Ignore style attribute mutations — these are direct DOM writes during column drag
      // (setting flex-basis for real-time resize feedback). Without this, PM's
      // MutationObserver would immediately revert our style changes.
      return mutation.type === 'attributes' && mutation.attributeName === 'style';
    }
  }]);
}();
var _default = exports.default = function _default(options, pluginInjectionApi, portalProviderAPI, eventDispatcher, intl) {
  return new _safePlugin.SafePlugin({
    key: pluginKey,
    props: {
      nodeViews: {
        layoutSection: function layoutSection(node, view, getPos) {
          // The vanilla view renders no React, so it cannot mount the
          // <LayoutBreakoutResizer> that LayoutSectionView.render() used to return.
          // That resizer is redundant now that breakout resizing is handled by the
          // pragmatic resizer in editor-plugin-breakout.
          if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_vanilla_node_views_phase1')) {
            return new _layoutSectionView.LayoutSectionView(node);
          }
          return new _nodeviews.LayoutSectionView({
            node: node,
            view: view,
            getPos: getPos,
            portalProviderAPI: portalProviderAPI,
            eventDispatcher: eventDispatcher,
            pluginInjectionApi: pluginInjectionApi,
            options: options,
            intl: intl
          }).init();
        },
        layoutColumn: function layoutColumn(node, view, getPos) {
          return new LayoutColumnView(node, view, getPos);
        }
      }
    }
  });
};