@atlaskit/editor-plugin-table 0.1.0 → 0.1.1

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/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-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/utils/dom.ts

@@ -20,61 +20,60 @@ import { getRowHeights } from '../../../utils/row-controls';
 import { colWidthsForRow } from '../../../utils/column-controls';
 import { getPluginState as getMainPluginState } from '../../plugin-factory';
 
-export const updateControls = (
-  getEditorFeatureFlags: GetEditorFeatureFlags,
-) => (state: EditorState) => {
-  const { tableRef } = getMainPluginState(state);
-  if (!tableRef) {
-    return;
-  }
-  const tr = tableRef.querySelector('tr');
-  if (!tr) {
-    return;
-  }
-  const wrapper = tableRef.parentElement;
-  if (!(wrapper && wrapper.parentElement)) {
-    return;
-  }
+export const updateControls =
+  (getEditorFeatureFlags: GetEditorFeatureFlags) => (state: EditorState) => {
+    const { tableRef } = getMainPluginState(state);
+    if (!tableRef) {
+      return;
+    }
+    const tr = tableRef.querySelector('tr');
+    if (!tr) {
+      return;
+    }
+    const wrapper = tableRef.parentElement;
+    if (!(wrapper && wrapper.parentElement)) {
+      return;
+    }
 
-  const rowControls = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    `.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`,
-  );
-  const numberedRows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    ClassName.NUMBERED_COLUMN_BUTTON,
-  );
+    const rowControls = wrapper.parentElement.querySelectorAll<HTMLElement>(
+      `.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`,
+    );
+    const numberedRows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+      ClassName.NUMBERED_COLUMN_BUTTON,
+    );
 
-  syncStickyRowToTable(tableRef);
+    syncStickyRowToTable(tableRef);
 
-  const rowHeights = getRowHeights(tableRef);
+    const rowHeights = getRowHeights(tableRef);
 
-  // update rows controls height on resize
-  for (let i = 0, count = rowControls.length; i < count; i++) {
-    const height = rowHeights[i];
-    if (height) {
-      rowControls[i].style.height = `${height}px`;
+    // update rows controls height on resize
+    for (let i = 0, count = rowControls.length; i < count; i++) {
+      const height = rowHeights[i];
+      if (height) {
+        rowControls[i].style.height = `${height}px`;
 
-      if (numberedRows.length) {
-        numberedRows[i].style.height = `${height}px`;
+        if (numberedRows.length) {
+          numberedRows[i].style.height = `${height}px`;
+        }
       }
     }
-  }
 
-  const rightShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    `.${ClassName.TABLE_RIGHT_SHADOW}`,
-  );
-
-  const leftShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-    `.${ClassName.TABLE_LEFT_SHADOW}`,
-  );
-
-  updateOverflowShadows(getEditorFeatureFlags)(
-    state,
-    wrapper,
-    tableRef,
-    rightShadows,
-    leftShadows,
-  );
-};
+    const rightShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+      `.${ClassName.TABLE_RIGHT_SHADOW}`,
+    );
+
+    const leftShadows = wrapper.parentElement.querySelectorAll<HTMLElement>(
+      `.${ClassName.TABLE_LEFT_SHADOW}`,
+    );
+
+    updateOverflowShadows(getEditorFeatureFlags)(
+      state,
+      wrapper,
+      tableRef,
+      rightShadows,
+      leftShadows,
+    );
+  };
 
 export const isClickNear = (
   event: MouseEvent,