@atlaskit/editor-plugin-table 1.1.0 → 1.1.2

package/dist/es2019/plugins/table/handlers.js

@@ -1,4 +1,5 @@
 // #region Imports
+
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { isTextInput } from '@atlaskit/editor-common/utils';
@@ -8,59 +9,51 @@ import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing
 import { TableSortStep } from '@atlaskit/adf-schema/steps';
 // #endregion
 import { checkIfNumberColumnEnabled, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled } from './utils/nodes';
-
 const nextTableSorting = (tr, table) => {
   const tableSortStep = tr.steps.find(step => step instanceof TableSortStep);
   return tableSortStep && table && table.pos === tableSortStep.pos ? tableSortStep.next : undefined;
 };
-
 const nextResizeHandleColumnIndex = (tr, resizeHandleColumnIndex) => {
   if (tr.getMeta(tableResizingPluginKey)) {
     return undefined;
   }
-
   return resizeHandleColumnIndex;
 };
-
 const updateTargetCellPosition = ({
   tr,
   table
 }) => pluginState => {
   const tableNode = table && table.node;
-
   if (!tableNode) {
-    return { ...pluginState,
+    return {
+      ...pluginState,
       targetCellPosition: undefined
     };
   }
-
   const {
     tableCell,
     tableHeader
   } = tr.doc.type.schema.nodes;
   const cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
   const targetCellPosition = cell ? cell.pos : undefined;
-
   if (pluginState.targetCellPosition === targetCellPosition) {
     return pluginState;
   }
-
-  return { ...pluginState,
+  return {
+    ...pluginState,
     targetCellPosition
   };
 };
-
 const updateTableNodePluginState = ({
   tr,
   table
 }) => pluginState => {
   const tableNode = table && table.node;
-
   if (!tableNode || isTextInput(tr)) {
     return pluginState;
   }
-
-  return { ...pluginState,
+  return {
+    ...pluginState,
     ...defaultTableSelection,
     tableNode,
     ordering: nextTableSorting(tr, table),
@@ -70,7 +63,6 @@ const updateTableNodePluginState = ({
     isHeaderRowEnabled: checkIfHeaderRowEnabled(tr.selection)
   };
 };
-
 const updateCollapseHandler = ({
   tr,
   table
@@ -80,42 +72,40 @@ const updateCollapseHandler = ({
   const allowCollapse = pluginState.pluginConfig.allowCollapse;
   const isExpandInSchema = schema.nodes.expand !== undefined;
   const isCollapseEnabled = allowCollapse && isExpandInSchema;
+
   /**
    * If we don't have focus, or collapse isn't allowed, or a table node doesn't
    * exist, we don't need to waste extra checks below
    */
-
   if (!pluginState.editorHasFocus || !isCollapseEnabled || !tableNode) {
     return pluginState;
   }
-
   const expandNodeType = schema.nodes.expand;
   const isTableCollapsed = expandNodeType && !!findParentNodeOfType(expandNodeType)(tr.selection);
-  const trCanBeCollapsed = isTableCollapsible(tr).tableIsCollapsible; // We're focused on a table + we're not inside an expand
+  const trCanBeCollapsed = isTableCollapsible(tr).tableIsCollapsible;
 
-  const canCollapseTable = !!pluginState.tableNode && // is it already collapsed?
+  // We're focused on a table + we're not inside an expand
+  const canCollapseTable = !!pluginState.tableNode &&
+  // is it already collapsed?
   !isTableCollapsed && !!trCanBeCollapsed;
-
   if (pluginState.isTableCollapsed !== isTableCollapsed || pluginState.canCollapseTable !== canCollapseTable) {
-    return { ...pluginState,
+    return {
+      ...pluginState,
       isTableCollapsed,
       canCollapseTable
     };
   }
-
   return pluginState;
 };
-
 const buildPluginState = builders => props => pluginState => {
   if (!props.table) {
-    return pluginState.targetCellPosition ? { ...pluginState,
+    return pluginState.targetCellPosition ? {
+      ...pluginState,
       targetCellPosition: undefined
     } : pluginState;
   }
-
   return builders.reduce((_pluginState, transform) => transform(props)(_pluginState), pluginState);
 };
-
 export const handleDocOrSelectionChanged = (tr, pluginState) => buildPluginState([updateTargetCellPosition, updateTableNodePluginState, updateCollapseHandler])({
   tr,
   table: findTable(tr.selection)

package/dist/es2019/plugins/table/index.js

@@ -28,37 +28,31 @@ import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-
 const defaultGetEditorFeatureFlags = () => ({});
-
 const tablesPlugin = options => {
   const editorViewRef = {
     current: null
   };
-
   const defaultGetEditorContainerWidth = () => {
     if (!editorViewRef.current) {
       var _document, _document$body;
-
       return {
         width: ((_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) || 500
       };
     }
-
     const {
       current: {
         state
       }
-    } = editorViewRef; // TODO: ED-15663
+    } = editorViewRef;
+
+    // TODO: ED-15663
     // Please, do not copy or use this kind of code below
     // @ts-ignore
-
     return state['widthPlugin$'];
   };
-
   return {
     name: 'table',
-
     nodes() {
       return [{
         name: 'table',
@@ -74,7 +68,6 @@ const tablesPlugin = options => {
         node: tableCell
       }];
     },
-
     pmPlugins() {
       const plugins = [{
         name: 'table',
@@ -115,7 +108,8 @@ const tablesPlugin = options => {
       }, {
         name: 'tableEditing',
         plugin: () => createDecorationsPlugin()
-      }, // Needs to be lower priority than editor-tables.tableEditing
+      },
+      // Needs to be lower priority than editor-tables.tableEditing
       // plugin as it is currently swallowing backspace events inside tables
       {
         name: 'tableKeymap',
@@ -132,7 +126,6 @@ const tablesPlugin = options => {
             reason
           }) => {
             var _options$editorAnalyt;
-
             options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
               action: TABLE_ACTION.FIXED,
               actionSubject: ACTION_SUBJECT.TABLE,
@@ -169,12 +162,14 @@ const tablesPlugin = options => {
             }
           });
         }
-      }]; // workaround for prosemirrors delayed dom selection syncing during pointer drag
+      }];
+
+      // workaround for prosemirrors delayed dom selection syncing during pointer drag
       // causing issues with table selections in Safari
       // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+
       // NOTE: this workaround can be removed when next upgrading prosemirror as the issue will be fixed
       // https://github.com/ProseMirror/prosemirror-view/pull/116
-
       if (browser.safari) {
         plugins.push({
           name: 'tableSafariDelayedDomSelectionSyncingWorkaround',
@@ -182,10 +177,10 @@ const tablesPlugin = options => {
             return createTableSafariDelayedDomSelectionSyncingWorkaroundPlugin();
           }
         });
-      } // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
-      // https://github.com/ProseMirror/prosemirror/issues/934
-
+      }
 
+      // Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
+      // https://github.com/ProseMirror/prosemirror/issues/934
       if (browser.safari) {
         plugins.push({
           name: 'tableSafariDeleteCompositionTextIssueWorkaround',
@@ -194,10 +189,8 @@ const tablesPlugin = options => {
           }
         });
       }
-
       return plugins;
     },
-
     contentComponent({
       editorView,
       popupsMountPoint,
@@ -301,7 +294,6 @@ const tablesPlugin = options => {
         }
       }));
     },
-
     pluginsOptions: {
       // TODO: ED-14676 This is not the final API design
       // For now, we are using this on (insert-api/api.ts) but we may create a proper place for it
@@ -313,7 +305,6 @@ const tablesPlugin = options => {
         if (nodeName !== 'table') {
           return null;
         }
-
         const table = createTable({
           schema
         });
@@ -329,10 +320,8 @@ const tablesPlugin = options => {
         priority: 600,
         keyshortcut: tooltip(toggleTable),
         icon: () => /*#__PURE__*/React.createElement(IconTable, null),
-
         action(insert, state) {
           var _options$editorAnalyt2;
-
           const tr = insert(createTable({
             schema: state.schema
           }));
@@ -347,11 +336,9 @@ const tablesPlugin = options => {
           })(tr);
           return tr;
         }
-
       }],
       floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };
-
 export default tablesPlugin;

package/dist/es2019/plugins/table/nodeviews/OverflowShadowsObserver.js

@@ -6,48 +6,34 @@ export class OverflowShadowsObserver {
   // updateShadowState is a method to update shadow key
   constructor(updateShadowState, _table, wrapper) {
     _defineProperty(this, "firstCell", null);
-
     _defineProperty(this, "lastCell", null);
-
     _defineProperty(this, "getFirstCell", (isSticky, hasHeaderRow) => {
       var _this$table;
-
       return (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td' : 'table tbody tr th');
     });
-
     _defineProperty(this, "getLastCell", (isSticky, hasHeaderRow) => {
       var _this$table2;
-
       return (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.querySelector(isSticky || !hasHeaderRow ? 'table tbody tr td:last-child' : 'table tbody tr th:last-child');
     });
-
     _defineProperty(this, "isSticky", false);
-
     _defineProperty(this, "stickyRowHeight", 0);
-
     _defineProperty(this, "init", () => {
       const table = this.table;
-
       if (!this.wrapper || !table) {
         return;
       }
-
       if (!this.tableIntersectionObserver) {
         const intersectonOnbserverCallback = entry => {
           var _entry$rootBounds, _entry$rootBounds2;
-
           if (!((_entry$rootBounds = entry.rootBounds) !== null && _entry$rootBounds !== void 0 && _entry$rootBounds.height) && !((_entry$rootBounds2 = entry.rootBounds) !== null && _entry$rootBounds2 !== void 0 && _entry$rootBounds2.width)) {
             return;
           }
-
           if (entry.target !== this.firstCell && entry.target !== this.lastCell) {
             return;
           }
-
           this.updateStickyShadowsHeightIfChanged();
           this.checkIntersectionEvent(entry, this.firstCell === entry.target ? ShadowEvent.SHOW_BEFORE_SHADOW : ShadowEvent.SHOW_AFTER_SHADOW);
         };
-
         this.tableIntersectionObserver = new IntersectionObserver((entries, _) => {
           entries.forEach(entry => intersectonOnbserverCallback(entry));
         }, {
@@ -58,102 +44,84 @@ export class OverflowShadowsObserver {
         return;
       }
     });
-
     _defineProperty(this, "checkIntersectionEvent", (entry, shadowKey) => {
-      if ( // If it's in full view, don't show shadow.
+      if (
+      // If it's in full view, don't show shadow.
       entry.isIntersecting && entry.intersectionRatio === 1) {
         this.updateShadowState(shadowKey, false);
-      } else if ( // If it's in partial view, show a shadow
+      } else if (
+      // If it's in partial view, show a shadow
       entry.intersectionRatio < 1) {
         this.updateShadowState(shadowKey, true);
       }
     });
-
     _defineProperty(this, "observeCells", (isSticky, hasHeaderRow) => {
       const stickyChanged = !!isSticky !== this.isSticky;
-      this.isSticky = !!isSticky; // update sticky shadows
+      this.isSticky = !!isSticky;
 
+      // update sticky shadows
       this.updateStickyShadowsHeightIfChanged();
-
       if (!stickyChanged) {
         const firstCell = this.getFirstCell(isSticky, hasHeaderRow);
         const lastCell = this.getLastCell(isSticky, hasHeaderRow);
-
         if (!firstCell || !lastCell || firstCell === this.firstCell && lastCell === this.lastCell) {
           return;
         }
       }
-
       this.firstCell = this.getFirstCell(isSticky, hasHeaderRow);
       this.lastCell = this.getLastCell(isSticky, hasHeaderRow);
-
       if (this.tableIntersectionObserver && this.firstCell && this.lastCell) {
         this.tableIntersectionObserver.disconnect();
         this.tableIntersectionObserver.observe(this.firstCell);
         this.tableIntersectionObserver.observe(this.lastCell);
       }
     });
-
     _defineProperty(this, "updateStickyShadows", stickyRowHeight => {
       var _this$wrapper, _this$wrapper2, _this$wrapper2$parent, _this$wrapper3, _this$wrapper3$parent;
-
       if (!this.isSticky) {
         return;
       }
-
       const stickyCell = this.getStickyCell();
-
       if (!stickyCell || !((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement)) {
         return;
       }
-
-      const heightStyleOrCompute = `${stickyRowHeight || stickyCell.clientHeight + 1}px`; // Use getElementsByClassName here for a live node list to capture
+      const heightStyleOrCompute = `${stickyRowHeight || stickyCell.clientHeight + 1}px`;
+      // Use getElementsByClassName here for a live node list to capture
       // sticky shadows
-
       const liveRightShadows = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : _this$wrapper2$parent.getElementsByClassName(`${ClassName.TABLE_RIGHT_SHADOW}`);
       const liveLeftShadows = (_this$wrapper3 = this.wrapper) === null || _this$wrapper3 === void 0 ? void 0 : (_this$wrapper3$parent = _this$wrapper3.parentElement) === null || _this$wrapper3$parent === void 0 ? void 0 : _this$wrapper3$parent.getElementsByClassName(`${ClassName.TABLE_LEFT_SHADOW}`);
       updateShadowListForStickyStyles(heightStyleOrCompute, liveLeftShadows);
       updateShadowListForStickyStyles(heightStyleOrCompute, liveRightShadows);
     });
-
     this.updateShadowState = updateShadowState;
     this.table = _table;
     this.wrapper = wrapper;
     this.init();
   }
-
   updateStickyShadowsHeightIfChanged() {
     if (!this.isSticky) {
       return;
     }
-
     const stickyCell = this.getStickyCell();
-
     if (!stickyCell) {
       return;
     }
-
     const newStickyRowHeight = stickyCell.clientHeight + 1;
-
     if (newStickyRowHeight === this.stickyRowHeight) {
       this.stickyRowHeight = newStickyRowHeight;
       this.updateStickyShadows(this.stickyRowHeight);
     }
   }
-
   getStickyCell() {
     var _this$wrapper4;
-
     const stickyRow = (_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.querySelector('tr.sticky');
     const stickyCell = stickyRow && stickyRow.firstElementChild;
     return stickyCell;
   }
-
   dispose() {
     if (this.tableIntersectionObserver) {
       this.tableIntersectionObserver.disconnect();
       this.tableIntersectionObserver = undefined;
     }
   }
-
 }