@atlaskit/editor-plugin-table 0.0.10 → 0.1.1

package/src/plugins/table/nodeviews/update-overflow-shadows.ts

@@ -22,51 +22,51 @@ export const updateShadowListForStickyStyles = (
  * Update overflow shadows for a given wrapper & table.
  * if `overflowShadowOptimization` is enabled, this will exit early.
  */
-export const updateOverflowShadows = (
-  getEditorFeatureFlags: GetEditorFeatureFlags,
-) => (
-  editorState: EditorState,
-  wrapper?: HTMLElement | null,
-  table?: HTMLElement | null,
-  rightShadows?: NodeListOf<HTMLElement> | null,
-  leftShadows?: NodeListOf<HTMLElement> | null,
-) => {
-  if (getEditorFeatureFlags()?.tableOverflowShadowsOptimization === true) {
-    return false;
-  }
-  // Right shadow
-  if (table && wrapper) {
-    const stickyRow = wrapper.querySelector('tr.sticky');
-    const stickyCell = stickyRow && stickyRow.firstElementChild;
+export const updateOverflowShadows =
+  (getEditorFeatureFlags: GetEditorFeatureFlags) =>
+  (
+    editorState: EditorState,
+    wrapper?: HTMLElement | null,
+    table?: HTMLElement | null,
+    rightShadows?: NodeListOf<HTMLElement> | null,
+    leftShadows?: NodeListOf<HTMLElement> | null,
+  ) => {
+    if (getEditorFeatureFlags()?.tableOverflowShadowsOptimization === true) {
+      return false;
+    }
+    // Right shadow
+    if (table && wrapper) {
+      const stickyRow = wrapper.querySelector('tr.sticky');
+      const stickyCell = stickyRow && stickyRow.firstElementChild;
 
-    if (rightShadows) {
-      const diff = table.offsetWidth - wrapper.offsetWidth;
+      if (rightShadows) {
+        const diff = table.offsetWidth - wrapper.offsetWidth;
 
-      for (let i = 0; i < rightShadows.length; i++) {
-        const rightShadow = rightShadows[i];
-        rightShadow.style.display =
-          diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
+        for (let i = 0; i < rightShadows.length; i++) {
+          const rightShadow = rightShadows[i];
+          rightShadow.style.display =
+            diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
 
-        if (
-          rightShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
-          stickyCell
-        ) {
-          rightShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+          if (
+            rightShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
+            stickyCell
+          ) {
+            rightShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+          }
         }
       }
-    }
-    if (leftShadows) {
-      for (let i = 0; i < leftShadows.length; i++) {
-        const leftShadow = leftShadows[i];
-        leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
+      if (leftShadows) {
+        for (let i = 0; i < leftShadows.length; i++) {
+          const leftShadow = leftShadows[i];
+          leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
 
-        if (
-          leftShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
-          stickyCell
-        ) {
-          leftShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+          if (
+            leftShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) &&
+            stickyCell
+          ) {
+            leftShadow.style.height = `${stickyCell.clientHeight + 1}px`;
+          }
         }
       }
     }
-  }
-};
+  };

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -65,16 +65,14 @@ const removeColumnControlsSelectedDecoration: DecorationTransformer = ({
 const hasColumnSelectedDecorations = (decorationSet: DecorationSet): boolean =>
   !!findColumnControlSelectedDecoration(decorationSet).length;
 
-export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer = ({
-  decorationSet,
-  tr,
-}): DecorationSet => {
-  if (!hasColumnSelectedDecorations(decorationSet)) {
-    return decorationSet;
-  }
+export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer =
+  ({ decorationSet, tr }): DecorationSet => {
+    if (!hasColumnSelectedDecorations(decorationSet)) {
+      return decorationSet;
+    }
 
-  return removeColumnControlsSelectedDecoration({ decorationSet, tr });
-};
+    return removeColumnControlsSelectedDecoration({ decorationSet, tr });
+  };
 
 export const buildColumnControlsDecorations: DecorationTransformer = ({
   decorationSet,

package/src/plugins/table/pm-plugins/decorations/utils/column-resizing.ts

@@ -11,36 +11,36 @@ import { DecorationTransformer } from './types';
 
 const emptyDecorations = [[], []];
 
-const updateColumnResizeHandle = (
-  columnResizesDecorations: Decoration[],
-): DecorationTransformer => ({ decorationSet, tr }) =>
-  updateDecorations(
-    tr.doc,
-    decorationSet,
-    columnResizesDecorations,
-    TableDecorations.COLUMN_RESIZING_HANDLE,
-  );
+const updateColumnResizeHandle =
+  (columnResizesDecorations: Decoration[]): DecorationTransformer =>
+  ({ decorationSet, tr }) =>
+    updateDecorations(
+      tr.doc,
+      decorationSet,
+      columnResizesDecorations,
+      TableDecorations.COLUMN_RESIZING_HANDLE,
+    );
 
-const updateLastCellElement = (
-  lastCellElementsDecorations: Decoration[],
-): DecorationTransformer => ({ decorationSet, tr }) =>
-  updateDecorations(
-    tr.doc,
-    decorationSet,
-    lastCellElementsDecorations,
-    TableDecorations.LAST_CELL_ELEMENT,
-  );
+const updateLastCellElement =
+  (lastCellElementsDecorations: Decoration[]): DecorationTransformer =>
+  ({ decorationSet, tr }) =>
+    updateDecorations(
+      tr.doc,
+      decorationSet,
+      lastCellElementsDecorations,
+      TableDecorations.LAST_CELL_ELEMENT,
+    );
 
-export const buildColumnResizingDecorations = (
-  columnEndIndex: number,
-): DecorationTransformer => ({ tr, decorationSet }): DecorationSet => {
-  const [columnResizesDecorations, lastCellElementsDecorations] =
-    columnEndIndex < 0
-      ? emptyDecorations
-      : createResizeHandleDecoration(tr, { right: columnEndIndex });
+export const buildColumnResizingDecorations =
+  (columnEndIndex: number): DecorationTransformer =>
+  ({ tr, decorationSet }): DecorationSet => {
+    const [columnResizesDecorations, lastCellElementsDecorations] =
+      columnEndIndex < 0
+        ? emptyDecorations
+        : createResizeHandleDecoration(tr, { right: columnEndIndex });
 
-  return composeDecorations([
-    updateColumnResizeHandle(columnResizesDecorations),
-    updateLastCellElement(lastCellElementsDecorations),
-  ])({ decorationSet, tr });
-};
+    return composeDecorations([
+      updateColumnResizeHandle(columnResizesDecorations),
+      updateLastCellElement(lastCellElementsDecorations),
+    ])({ decorationSet, tr });
+  };

package/src/plugins/table/pm-plugins/decorations/utils/compose-decorations.ts

@@ -2,10 +2,10 @@ import { DecorationSet } from 'prosemirror-view';
 
 import { DecorationTransformer } from './types';
 
-export const composeDecorations = (
-  transformers: Array<DecorationTransformer>,
-): DecorationTransformer => ({ decorationSet, tr }): DecorationSet =>
-  transformers.reduce(
-    (decorationSet, transform) => transform({ decorationSet, tr }),
-    decorationSet,
-  );
+export const composeDecorations =
+  (transformers: Array<DecorationTransformer>): DecorationTransformer =>
+  ({ decorationSet, tr }): DecorationSet =>
+    transformers.reduce(
+      (decorationSet, transform) => transform({ decorationSet, tr }),
+      decorationSet,
+    );

package/src/plugins/table/pm-plugins/keymap.ts

@@ -11,10 +11,10 @@ import {
   INPUT_METHOD,
 } from '@atlaskit/editor-common/analytics';
 import {
+  triggerUnlessTableHeader,
   createTable,
   goToNextCell,
   moveCursorBackward,
-  triggerUnlessTableHeader,
 } from '../commands';
 import {
   addRowAroundSelection,

package/src/plugins/table/pm-plugins/plugin-factory.ts

@@ -3,41 +3,41 @@ import { handleDocOrSelectionChanged } from '../handlers';
 import reducer from '../reducer';
 import { pluginKey } from './plugin-key';
 
-export const {
-  createPluginState,
-  createCommand,
-  getPluginState,
-} = pluginFactory(pluginKey, reducer, {
-  mapping: (tr, pluginState) => {
-    if (tr.docChanged) {
-      let updatedTargetCell = {};
-      if (pluginState.targetCellPosition) {
-        const { pos, deleted } = tr.mapping.mapResult(
-          pluginState.targetCellPosition,
-        );
+export const { createPluginState, createCommand, getPluginState } =
+  pluginFactory(pluginKey, reducer, {
+    mapping: (tr, pluginState) => {
+      if (tr.docChanged) {
+        let updatedTargetCell = {};
+        if (pluginState.targetCellPosition) {
+          const { pos, deleted } = tr.mapping.mapResult(
+            pluginState.targetCellPosition,
+          );
 
-        updatedTargetCell = {
-          targetCellPosition: deleted ? undefined : pos,
-        };
-      }
+          updatedTargetCell = {
+            targetCellPosition: deleted ? undefined : pos,
+          };
+        }
 
-      let updatedTablePos = {};
-      if (pluginState.tablePos) {
-        const { pos, deleted } = tr.mapping.mapResult(pluginState.tablePos, -1);
+        let updatedTablePos = {};
+        if (pluginState.tablePos) {
+          const { pos, deleted } = tr.mapping.mapResult(
+            pluginState.tablePos,
+            -1,
+          );
 
-        updatedTablePos = {
-          tablePos: deleted ? undefined : pos,
+          updatedTablePos = {
+            tablePos: deleted ? undefined : pos,
+          };
+        }
+
+        return {
+          ...pluginState,
+          ...updatedTargetCell,
+          ...updatedTablePos,
         };
       }
-
-      return {
-        ...pluginState,
-        ...updatedTargetCell,
-        ...updatedTablePos,
-      };
-    }
-    return pluginState;
-  },
-  onDocChanged: handleDocOrSelectionChanged,
-  onSelectionChanged: handleDocOrSelectionChanged,
-});
+      return pluginState;
+    },
+    onDocChanged: handleDocOrSelectionChanged,
+    onSelectionChanged: handleDocOrSelectionChanged,
+  });

package/src/plugins/table/pm-plugins/safari-delete-composition-text-issue-workaround.ts

@@ -12,9 +12,10 @@ interface SafariDeleteCompositionTextIssueWorkaroundPluginState {
   decorations: DecorationSet;
 }
 
-export const tableSafariDeleteCompositionTextIssueWorkaroundKey = new PluginKey<
-  SafariDeleteCompositionTextIssueWorkaroundPluginState
->('tableSafariDeleteCompositionTextIssueWorkaround');
+export const tableSafariDeleteCompositionTextIssueWorkaroundKey =
+  new PluginKey<SafariDeleteCompositionTextIssueWorkaroundPluginState>(
+    'tableSafariDeleteCompositionTextIssueWorkaround',
+  );
 
 export const createPlugin = () => {
   return new SafePlugin<SafariDeleteCompositionTextIssueWorkaroundPluginState>({
@@ -73,12 +74,8 @@ export const createPlugin = () => {
             return false;
           }
           const range = selection.getRangeAt(0);
-          const {
-            startContainer,
-            endContainer,
-            endOffset,
-            startOffset,
-          } = range;
+          const { startContainer, endContainer, endOffset, startOffset } =
+            range;
           /**
            * On Safari when composition text is deleted, it deletes any empty elements it finds up the dom tree. Prosemirror can sometimes be confused by this
            * and will think that we meant to delete those elements. This fix forces the resulting node to not be empty.

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -526,8 +526,9 @@ export class TableRowNodeView implements NodeView {
   shouldHeaderStick = (tree: TableDOMElements): boolean => {
     const { wrapper } = tree;
     const tableWrapperRect = wrapper.getBoundingClientRect();
-    const editorAreaRect = (this
-      .editorScrollableElement as HTMLElement).getBoundingClientRect();
+    const editorAreaRect = (
+      this.editorScrollableElement as HTMLElement
+    ).getBoundingClientRect();
 
     const stickyHeaderRect = this.contentDOM.getBoundingClientRect();
     const firstHeaderRow = !this.dom.previousElementSibling;

package/src/plugins/table/pm-plugins/table-local-id.ts

@@ -10,7 +10,6 @@
  * TODO: https://product-fabric.atlassian.net/browse/ED-12714
  *
  */
-// import { Dispatch } from '../../../event-dispatcher';
 import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { EditorState, PluginKey, Transaction } from 'prosemirror-state';
@@ -19,7 +18,6 @@ import rafSchedule from 'raf-schd';
 
 import { uuid } from '@atlaskit/adf-schema';
 
-// import { stepAddsOneOf } from '../../../utils/step';
 import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 
 interface TableLocalIdPluginState {

package/src/plugins/table/pm-plugins/table-resizing/commands.ts

@@ -22,106 +22,114 @@ import {
 import { ContentNodeWithPos } from 'prosemirror-utils';
 
 // Scale the table to meet new requirements (col, layout change etc)
-export const scaleTable = (
-  tableRef: HTMLTableElement | null | undefined,
-  options: ScaleOptions,
-  domAtPos: DomAtPos,
-): Command => (state, dispatch) => {
-  if (!tableRef) {
-    return false;
-  }
+export const scaleTable =
+  (
+    tableRef: HTMLTableElement | null | undefined,
+    options: ScaleOptions,
+    domAtPos: DomAtPos,
+  ): Command =>
+  (state, dispatch) => {
+    if (!tableRef) {
+      return false;
+    }
+
+    const { node, start, parentWidth } = options;
+
+    // If a table has not been resized yet, columns should be auto.
+    if (hasTableBeenResized(node) === false) {
+      // If its not a re-sized table, we still want to re-create cols
+      // To force reflow of columns upon delete.
+      recreateResizeColsByNode(tableRef, node);
+      return false;
+    }
 
-  const { node, start, parentWidth } = options;
+    let resizeState;
+    if (parentWidth) {
+      resizeState = scaleWithParent(
+        tableRef,
+        parentWidth,
+        node,
+        start,
+        domAtPos,
+      );
+    } else {
+      resizeState = scale(tableRef, options, domAtPos);
+    }
+
+    if (resizeState) {
+      let { tr } = state;
+      tr = updateColumnWidths(resizeState, node, start)(tr);
+
+      if (tr.docChanged && dispatch) {
+        tr.setMeta('scrollIntoView', false);
+        // TODO: ED-8995
+        // We need to do this check to reduce the number of race conditions when working with tables.
+        // This metadata is been used in the sendTransaction function in the Collab plugin
+        tr.setMeta('scaleTable', true);
+        dispatch(tr);
+        return true;
+      }
+    }
 
-  // If a table has not been resized yet, columns should be auto.
-  if (hasTableBeenResized(node) === false) {
-    // If its not a re-sized table, we still want to re-create cols
-    // To force reflow of columns upon delete.
-    recreateResizeColsByNode(tableRef, node);
     return false;
-  }
-
-  let resizeState;
-  if (parentWidth) {
-    resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos);
-  } else {
-    resizeState = scale(tableRef, options, domAtPos);
-  }
-
-  if (resizeState) {
-    let { tr } = state;
-    tr = updateColumnWidths(resizeState, node, start)(tr);
-
-    if (tr.docChanged && dispatch) {
-      tr.setMeta('scrollIntoView', false);
-      // TODO: ED-8995
-      // We need to do this check to reduce the number of race conditions when working with tables.
-      // This metadata is been used in the sendTransaction function in the Collab plugin
-      tr.setMeta('scaleTable', true);
-      dispatch(tr);
+  };
+
+export const evenColumns =
+  ({
+    resizeState,
+    table,
+    start,
+    event,
+  }: {
+    resizeState: ResizeState;
+    table: PMNode;
+    start: number;
+    event: MouseEvent;
+  }): Command =>
+  (state, dispatch) => {
+    if (!isTableSelected(state.selection)) {
+      return false;
+    }
+
+    // double click detection logic
+    // Note: ProseMirror's handleDoubleClick doesn't quite work with DOM mousedown event handler
+    const { lastClick } = getPluginState(state);
+    const now = Date.now();
+    if (
+      lastClick &&
+      now - lastClick.time < 500 &&
+      isClickNear(event, lastClick)
+    ) {
+      const newState = evenAllColumnsWidths(resizeState);
+      setLastClick(null, (tr) =>
+        updateColumnWidths(newState, table, start)(tr),
+      )(state, dispatch);
+
       return true;
     }
-  }
-
-  return false;
-};
-
-export const evenColumns = ({
-  resizeState,
-  table,
-  start,
-  event,
-}: {
-  resizeState: ResizeState;
-  table: PMNode;
-  start: number;
-  event: MouseEvent;
-}): Command => (state, dispatch) => {
-  if (!isTableSelected(state.selection)) {
-    return false;
-  }
-
-  // double click detection logic
-  // Note: ProseMirror's handleDoubleClick doesn't quite work with DOM mousedown event handler
-  const { lastClick } = getPluginState(state);
-  const now = Date.now();
-  if (
-    lastClick &&
-    now - lastClick.time < 500 &&
-    isClickNear(event, lastClick)
-  ) {
-    const newState = evenAllColumnsWidths(resizeState);
-    setLastClick(null, (tr) => updateColumnWidths(newState, table, start)(tr))(
+
+    setLastClick({ x: event.clientX, y: event.clientY, time: now })(
       state,
       dispatch,
     );
 
-    return true;
-  }
-
-  setLastClick({ x: event.clientX, y: event.clientY, time: now })(
-    state,
-    dispatch,
-  );
+    return false;
+  };
+
+export const distributeColumnsWidths =
+  (newResizeState: ResizeState, table: ContentNodeWithPos): Command =>
+  (state, dispatch) => {
+    if (dispatch) {
+      const tr = updateColumnWidths(
+        newResizeState,
+        table.node,
+        table.start,
+      )(state.tr);
+      stopResizing(tr)(state, dispatch);
+    }
 
-  return false;
-};
-
-export const distributeColumnsWidths = (
-  newResizeState: ResizeState,
-  table: ContentNodeWithPos,
-): Command => (state, dispatch) => {
-  if (dispatch) {
-    const tr = updateColumnWidths(
-      newResizeState,
-      table.node,
-      table.start,
-    )(state.tr);
-    stopResizing(tr)(state, dispatch);
-  }
-
-  return true;
-};
+    return true;
+  };
 
 export const setResizeHandlePos = (resizeHandlePos: number | null) =>
   createCommand({

package/src/plugins/table/pm-plugins/table-resizing/index.ts

@@ -1,3 +1,4 @@
 export { createPlugin } from './plugin';
 export { scaleTable } from './commands';
 export { pluginKey } from './plugin-key';
+export { getPluginState } from './plugin-factory';