@atlaskit/editor-plugin-table/dist/cjs/nodeviews/toDOM.js

Table plugin for the @atlaskit/editor

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.tableNodeSpecWithFixedToDOM = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classnames = _interopRequireDefault(require("classnames"));
var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
var _tableNodes = require("@atlaskit/adf-schema/tableNodes");
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
var _table = require("@atlaskit/editor-common/table");
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
var _consts = require("../pm-plugins/table-resizing/utils/consts");
var _misc = require("../pm-plugins/table-resizing/utils/misc");
var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
var _types = require("../types");
var _tableContainerStyles = require("./table-container-styles");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
  var tableNode = config.isNestingSupported ? _tableNodes.tableWithNestedTable : _tableNodes.table;
  return _objectSpread(_objectSpread({}, tableNode), {}, {
    toDOM: function toDOM(node) {
      var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
      var isInContentMode = (0, _table.isTableInContentMode)({
        tableNode: node,
        isSupported: (0, _isContentModeSupported.isContentModeSupported)({
          allowColumnResizing: config.allowColumnResizing,
          allowTableResizing: config.tableResizingEnabled,
          isFullPageEditor: isFullPageEditor
        }),
        isTableNested: config.isNested
      });
      var alignmentStyle = Object.entries((0, _tableContainerStyles.getAlignmentStyle)(node.attrs.layout)).map(function (_ref) {
        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
          k = _ref2[0],
          v = _ref2[1];
        return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
      }).join(';');
      var tableMinWidth = (0, _colgroup.getResizerMinWidth)(node);
      var attrs = {
        'data-number-column': node.attrs.isNumberColumnEnabled,
        'data-layout': node.attrs.layout,
        'data-autosize': node.attrs.__autoSize,
        'data-table-local-id': node.attrs.localId,
        'data-table-width': node.attrs.width,
        'data-ssr-placeholder': "table-".concat(node.attrs.localId),
        'data-ssr-placeholder-replace': "table-".concat(node.attrs.localId),
        'data-table-display-mode': node.attrs.displayMode
      };
      if (isInContentMode) {
        attrs['data-initial-width-mode'] = 'content';
      }

      // This would be used for table scaling in colgroup CSS
      // cqw, or px is well supported
      var resizableTableWidth = isFullPageEditor ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, config.isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))";
      var colgroup = '';
      if (config.allowColumnResizing) {
        colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
      }
      var overflowShadows = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_css_overflow_shadow') ? [['div', {
        contenteditable: 'false',
        'aria-hidden': 'true',
        'data-vc-nvs': 'true',
        'data-table-overflow-shadow': 'start'
      }], ['div', {
        contenteditable: 'false',
        'aria-hidden': 'true',
        'data-vc-nvs': 'true',
        'data-table-overflow-shadow': 'end'
      }]] : [];
      var roundedTableCornerMasks = (0, _expValEquals.expValEquals)('platform_editor_table_q4_loveability', 'isEnabled', true) ? [['div', {
        contenteditable: 'false',
        'aria-hidden': 'true',
        class: _types.TableCssClassName.TABLE_CORNER_MASK,
        'data-corner': 'left'
      }], ['div', {
        contenteditable: 'false',
        'aria-hidden': 'true',
        class: _types.TableCssClassName.TABLE_CORNER_MASK,
        'data-corner': 'right'
      }]] : [];
      var tableContainerDiv = ['div', {
        class: 'pm-table-container',
        'data-number-column': node.attrs.isNumberColumnEnabled,
        'data-layout': node.attrs.layout,
        'data-testid': 'table-container'
      }, ['div', {
        class: 'pm-table-sticky-sentinel-top',
        'data-testid': 'sticky-sentinel-top'
      }], ['div', {
        class: 'pm-table-row-controls-wrapper'
      }, ['div']], ['div', {
        class: (0, _classnames.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER, (0, _defineProperty2.default)({}, _types.TableCssClassName.TABLE_SCROLL_INLINE_SHADOW, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_css_overflow_shadow')))
      }].concat(roundedTableCornerMasks, [['table', attrs, colgroup, ['tbody', 0]]])].concat(overflowShadows, [['div', {
        class: 'pm-table-sticky-sentinel-bottom',
        'data-testid': 'sticky-sentinel-bottom'
      }], ['div', {
        contenteditable: 'false',
        class: 'pm-table-left-border',
        'data-with-numbered-table': node.attrs.isNumberColumnEnabled,
        'data-testid': 'table-left-border'
      }], ['div', {
        contenteditable: 'false',
        class: 'pm-table-right-border',
        'data-testid': 'table-right-border'
      }]]);
      if (!config.tableResizingEnabled || config.isNested) {
        return ['div', {
          class: 'tableView-content-wrap',
          'data-prosemirror-initial-toDOM-render': 'true',
          style: (0, _lazyNodeView.convertToInlineCss)({
            '--ak-editor-table-width': resizableTableWidth
          })
        }, tableContainerDiv];
      }
      var tableResizingDiv = ['div', {
        'data-testid': 'table-alignment-container',
        style: alignmentStyle
      }, ['div', {
        class: 'pm-table-resizer-container',
        style: (0, _lazyNodeView.convertToInlineCss)({
          '--ak-editor-table-gutter-padding': config.isTableScalingEnabled ? 'calc(var(--ak-editor--large-gutter-padding) * 2)' : 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
          '--ak-editor-table-width': isInContentMode ? 'max-content' : resizableTableWidth,
          width: "var(--ak-editor-table-width)"
        })
      }, ['div', {
        class: 'resizer-item display-handle',
        style: (0, _lazyNodeView.convertToInlineCss)({
          position: 'relative',
          userSelect: 'auto',
          boxSizing: 'border-box',
          '--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
          '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
          minWidth: 'var(--ak-editor-table-min-width)',
          maxWidth: (0, _misc.getTableResizerContainerMaxWidthInCSS)(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
          width: isInContentMode ? 'auto' : (0, _misc.getTableResizerItemWidthInCSS)(node, config.isCommentEditor, config.isChromelessEditor)
        })
      }, ['span', {
        class: 'resizer-hover-zone'
      }, tableContainerDiv]]]];
      return ['div', {
        class: 'tableView-content-wrap',
        'data-prosemirror-initial-toDOM-render': 'true'
      }, tableResizingDiv];
    }
  });
};