@atlaskit/editor-plugin-table 22.4.14 → 22.4.15

package/dist/es2019/pm-plugins/utils/tableMode.js

@@ -1,158 +0,0 @@
-import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { hasTableBeenResized } from '@atlaskit/editor-common/table';
-import { findTable } from '@atlaskit/editor-tables/utils';
-import { applyTableMeasurement, getTableMeasurement } from '../transforms/content-mode';
-export const isContentModeSupported = ({
-  allowColumnResizing,
-  allowTableResizing,
-  isFullPageEditor
-}) => {
-  return allowColumnResizing && allowTableResizing && isFullPageEditor;
-};
-
-/**
- * Iterates all top-level tables in the document, and for those in content mode,
- * measures rendered column widths and sets colwidth + table width attributes
- * in a single batched transaction.
- */
-export const applyMeasuredWidthToAllTables = (view, pluginInjectionApi) => {
-  const {
-    state: {
-      doc,
-      schema
-    }
-  } = view;
-  let tr = view.state.tr;
-  const {
-    table
-  } = schema.nodes;
-  let modified = false;
-  const measuredTables = [];
-
-  // modify only top-level tables
-  doc.forEach((node, offset) => {
-    if (node.type !== table || hasTableBeenResized(node) && node.attrs.layout !== 'align-start') {
-      return;
-    }
-    const domNode = view.domAtPos(offset + 1).node;
-    const tableWrapper = domNode instanceof HTMLElement ? domNode.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`) : null;
-    const tableRef = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('table');
-    if (!tableRef) {
-      return;
-    }
-    measuredTables.push({
-      node,
-      offset,
-      measurement: getTableMeasurement(tableRef)
-    });
-  });
-  measuredTables.forEach(({
-    node,
-    offset,
-    measurement
-  }) => {
-    tr = applyTableMeasurement(tr, node, measurement, offset);
-    modified = true;
-  });
-  if (modified) {
-    var _pluginInjectionApi$a, _pluginInjectionApi$a2, _pluginInjectionApi$w, _pluginInjectionApi$w2, _pluginInjectionApi$w3;
-    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : (_pluginInjectionApi$a2 = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.attachAnalyticsEvent({
-      action: TABLE_ACTION.FIT_TO_CONTENT_AUTO_CONVERTED,
-      actionSubject: ACTION_SUBJECT.TABLE,
-      actionSubjectId: null,
-      eventType: EVENT_TYPE.TRACK,
-      attributes: {
-        editorContainerWidth: (_pluginInjectionApi$w = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : (_pluginInjectionApi$w3 = _pluginInjectionApi$w2.sharedState.currentState()) === null || _pluginInjectionApi$w3 === void 0 ? void 0 : _pluginInjectionApi$w3.width) !== null && _pluginInjectionApi$w !== void 0 ? _pluginInjectionApi$w : 0,
-        totalTablesResized: measuredTables.length,
-        measurements: measuredTables.map(({
-          measurement
-        }) => ({
-          tableWidth: measurement.tableWidth,
-          totalColumnCount: measurement.colWidths.length
-        }))
-      }
-    })(tr);
-    view.dispatch(tr.setMeta('addToHistory', false));
-  }
-};
-
-/**
- * Temporarily overrides inline styles on the table and its surrounding containers so the browser
- * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
- * **resets every modified style** so no temporary overrides leak into the rendered output.
- */
-export const measureTableWithAutoLayout = tableRef => {
-  const cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
-  const contentWrap = tableRef.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`);
-  const resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(`.${TableSharedCssClassName.TABLE_RESIZER_CONTAINER}`);
-  const resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
-
-  // Capture current inline styles so we can restore them after measurement
-  const prevTableWidth = tableRef.style.width;
-  const prevTableLayout = tableRef.style.tableLayout;
-  const prevColWidths = cols.map(col => col.style.width);
-  const prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
-
-  // Apply temporary styles for content-based measurement
-  tableRef.style.width = '';
-  tableRef.style.tableLayout = 'auto';
-  cols.forEach(col => col.style.width = '');
-  if (resizerContainer) {
-    // favour CSS var to align with the table first render state, which gets reset
-    // once resized by user. By doing this we avoid the need to any 'reset' work after
-    // measurement and ensures it works if the table has been resized or not in the session.
-    resizerContainer.style.width = 'var(--ak-editor-table-width)';
-    resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
-  }
-  if (resizerItem) {
-    resizerItem.style.width = 'max-content';
-  }
-  const measurement = getTableMeasurement(tableRef);
-
-  // Reset all inline styles back to their previous values
-  tableRef.style.width = prevTableWidth;
-  tableRef.style.tableLayout = prevTableLayout;
-  cols.forEach((col, i) => col.style.width = prevColWidths[i]);
-  if (resizerItem) {
-    resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
-  }
-  return measurement;
-};
-
-/**
- * Used to measure a selected table width with it's content being laid out natively by the browser
- */
-export const applyMeasuredWidthToSelectedTable = (view, api) => {
-  var _api$analytics, _api$analytics$action, _api$width$sharedStat, _api$width, _api$width$sharedStat2;
-  const tableObject = findTable(view.state.selection);
-  if (!tableObject) {
-    return;
-  }
-  const {
-    node,
-    pos
-  } = tableObject;
-  const tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
-  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
-    return;
-  }
-
-  // Instead of dispatching a transaction to "strip widths" and then waiting
-  // for a rAF to measure natural column widths, directly update the DOM elements,
-  // take a measurement, and reset styles so no temporary overrides persist.
-  const measurement = measureTableWithAutoLayout(tableState.tableRef);
-  const tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
-  api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
-    action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
-    actionSubject: ACTION_SUBJECT.TABLE,
-    actionSubjectId: null,
-    eventType: EVENT_TYPE.TRACK,
-    attributes: {
-      editorContainerWidth: (_api$width$sharedStat = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : (_api$width$sharedStat2 = _api$width.sharedState.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0,
-      tableWidth: measurement.tableWidth,
-      totalColumnCount: measurement.colWidths.length
-    }
-  })(tr);
-  view.dispatch(tr);
-};

package/dist/esm/pm-plugins/utils/tableMode.js

@@ -1,156 +0,0 @@
-import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
-import { hasTableBeenResized } from '@atlaskit/editor-common/table';
-import { findTable } from '@atlaskit/editor-tables/utils';
-import { applyTableMeasurement, getTableMeasurement } from '../transforms/content-mode';
-export var isContentModeSupported = function isContentModeSupported(_ref) {
-  var allowColumnResizing = _ref.allowColumnResizing,
-    allowTableResizing = _ref.allowTableResizing,
-    isFullPageEditor = _ref.isFullPageEditor;
-  return allowColumnResizing && allowTableResizing && isFullPageEditor;
-};
-
-/**
- * Iterates all top-level tables in the document, and for those in content mode,
- * measures rendered column widths and sets colwidth + table width attributes
- * in a single batched transaction.
- */
-export var applyMeasuredWidthToAllTables = function applyMeasuredWidthToAllTables(view, pluginInjectionApi) {
-  var _view$state = view.state,
-    doc = _view$state.doc,
-    schema = _view$state.schema;
-  var tr = view.state.tr;
-  var table = schema.nodes.table;
-  var modified = false;
-  var measuredTables = [];
-
-  // modify only top-level tables
-  doc.forEach(function (node, offset) {
-    if (node.type !== table || hasTableBeenResized(node) && node.attrs.layout !== 'align-start') {
-      return;
-    }
-    var domNode = view.domAtPos(offset + 1).node;
-    var tableWrapper = domNode instanceof HTMLElement ? domNode.closest(".".concat(TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP)) : null;
-    var tableRef = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('table');
-    if (!tableRef) {
-      return;
-    }
-    measuredTables.push({
-      node: node,
-      offset: offset,
-      measurement: getTableMeasurement(tableRef)
-    });
-  });
-  measuredTables.forEach(function (_ref2) {
-    var node = _ref2.node,
-      offset = _ref2.offset,
-      measurement = _ref2.measurement;
-    tr = applyTableMeasurement(tr, node, measurement, offset);
-    modified = true;
-  });
-  if (modified) {
-    var _pluginInjectionApi$a, _pluginInjectionApi$w, _pluginInjectionApi$w2;
-    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.attachAnalyticsEvent({
-      action: TABLE_ACTION.FIT_TO_CONTENT_AUTO_CONVERTED,
-      actionSubject: ACTION_SUBJECT.TABLE,
-      actionSubjectId: null,
-      eventType: EVENT_TYPE.TRACK,
-      attributes: {
-        editorContainerWidth: (_pluginInjectionApi$w = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 || (_pluginInjectionApi$w2 = _pluginInjectionApi$w2.sharedState.currentState()) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.width) !== null && _pluginInjectionApi$w !== void 0 ? _pluginInjectionApi$w : 0,
-        totalTablesResized: measuredTables.length,
-        measurements: measuredTables.map(function (_ref3) {
-          var measurement = _ref3.measurement;
-          return {
-            tableWidth: measurement.tableWidth,
-            totalColumnCount: measurement.colWidths.length
-          };
-        })
-      }
-    })(tr);
-    view.dispatch(tr.setMeta('addToHistory', false));
-  }
-};
-
-/**
- * Temporarily overrides inline styles on the table and its surrounding containers so the browser
- * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
- * **resets every modified style** so no temporary overrides leak into the rendered output.
- */
-export var measureTableWithAutoLayout = function measureTableWithAutoLayout(tableRef) {
-  var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
-  var contentWrap = tableRef.closest(".".concat(TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP));
-  var resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(".".concat(TableSharedCssClassName.TABLE_RESIZER_CONTAINER));
-  var resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
-
-  // Capture current inline styles so we can restore them after measurement
-  var prevTableWidth = tableRef.style.width;
-  var prevTableLayout = tableRef.style.tableLayout;
-  var prevColWidths = cols.map(function (col) {
-    return col.style.width;
-  });
-  var prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
-
-  // Apply temporary styles for content-based measurement
-  tableRef.style.width = '';
-  tableRef.style.tableLayout = 'auto';
-  cols.forEach(function (col) {
-    return col.style.width = '';
-  });
-  if (resizerContainer) {
-    // favour CSS var to align with the table first render state, which gets reset
-    // once resized by user. By doing this we avoid the need to any 'reset' work after
-    // measurement and ensures it works if the table has been resized or not in the session.
-    resizerContainer.style.width = 'var(--ak-editor-table-width)';
-    resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
-  }
-  if (resizerItem) {
-    resizerItem.style.width = 'max-content';
-  }
-  var measurement = getTableMeasurement(tableRef);
-
-  // Reset all inline styles back to their previous values
-  tableRef.style.width = prevTableWidth;
-  tableRef.style.tableLayout = prevTableLayout;
-  cols.forEach(function (col, i) {
-    return col.style.width = prevColWidths[i];
-  });
-  if (resizerItem) {
-    resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
-  }
-  return measurement;
-};
-
-/**
- * Used to measure a selected table width with it's content being laid out natively by the browser
- */
-export var applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
-  var _api$analytics, _api$width$sharedStat, _api$width;
-  var tableObject = findTable(view.state.selection);
-  if (!tableObject) {
-    return;
-  }
-  var node = tableObject.node,
-    pos = tableObject.pos;
-  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
-  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
-    return;
-  }
-
-  // Instead of dispatching a transaction to "strip widths" and then waiting
-  // for a rAF to measure natural column widths, directly update the DOM elements,
-  // take a measurement, and reset styles so no temporary overrides persist.
-  var measurement = measureTableWithAutoLayout(tableState.tableRef);
-  var tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
-  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
-    action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
-    actionSubject: ACTION_SUBJECT.TABLE,
-    actionSubjectId: null,
-    eventType: EVENT_TYPE.TRACK,
-    attributes: {
-      editorContainerWidth: (_api$width$sharedStat = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 || (_api$width = _api$width.sharedState.currentState()) === null || _api$width === void 0 ? void 0 : _api$width.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0,
-      tableWidth: measurement.tableWidth,
-      totalColumnCount: measurement.colWidths.length
-    }
-  })(tr);
-  view.dispatch(tr);
-};

package/dist/types/pm-plugins/utils/tableMode.d.ts

@@ -1,26 +0,0 @@
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { PluginInjectionAPI } from '../../types';
-import { type TableMeasurement } from '../transforms/content-mode';
-type ContentModePluginOptions = {
-    allowColumnResizing: boolean;
-    allowTableResizing: boolean;
-    isFullPageEditor: boolean;
-};
-export declare const isContentModeSupported: ({ allowColumnResizing, allowTableResizing, isFullPageEditor, }: ContentModePluginOptions) => boolean;
-/**
- * Iterates all top-level tables in the document, and for those in content mode,
- * measures rendered column widths and sets colwidth + table width attributes
- * in a single batched transaction.
- */
-export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
-/**
- * Temporarily overrides inline styles on the table and its surrounding containers so the browser
- * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
- * **resets every modified style** so no temporary overrides leak into the rendered output.
- */
-export declare const measureTableWithAutoLayout: (tableRef: HTMLTableElement) => TableMeasurement;
-/**
- * Used to measure a selected table width with it's content being laid out natively by the browser
- */
-export declare const applyMeasuredWidthToSelectedTable: (view: EditorView, api?: PluginInjectionAPI) => void;
-export {};

package/dist/types-ts4.5/pm-plugins/utils/tableMode.d.ts

@@ -1,26 +0,0 @@
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { PluginInjectionAPI } from '../../types';
-import { type TableMeasurement } from '../transforms/content-mode';
-type ContentModePluginOptions = {
-    allowColumnResizing: boolean;
-    allowTableResizing: boolean;
-    isFullPageEditor: boolean;
-};
-export declare const isContentModeSupported: ({ allowColumnResizing, allowTableResizing, isFullPageEditor, }: ContentModePluginOptions) => boolean;
-/**
- * Iterates all top-level tables in the document, and for those in content mode,
- * measures rendered column widths and sets colwidth + table width attributes
- * in a single batched transaction.
- */
-export declare const applyMeasuredWidthToAllTables: (view: EditorView, pluginInjectionApi?: PluginInjectionAPI) => void;
-/**
- * Temporarily overrides inline styles on the table and its surrounding containers so the browser
- * lays columns out with `table-layout: auto`, takes a content-width measurement, and then
- * **resets every modified style** so no temporary overrides leak into the rendered output.
- */
-export declare const measureTableWithAutoLayout: (tableRef: HTMLTableElement) => TableMeasurement;
-/**
- * Used to measure a selected table width with it's content being laid out natively by the browser
- */
-export declare const applyMeasuredWidthToSelectedTable: (view: EditorView, api?: PluginInjectionAPI) => void;
-export {};