@atlaskit/editor-plugin-table 0.0.10 → 0.1.0

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -13,33 +13,36 @@ import {
   tr,
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import { TableRowNodeView } from '../../../../pm-plugins/sticky-headers';
-import tablePlugin from '../../../../../table';
-import { pluginKey } from '../../../../pm-plugins/plugin-key';
+import { TableRowNodeView } from '../../../../plugins/table/pm-plugins/sticky-headers';
+import tablePlugin from '../../../../plugins/table';
+import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import createStub, { Stub } from 'raf-stub';
 import featureFlagsPlugin from '@atlaskit/editor-core/src/plugins/feature-flags-context';
-jest.mock('../../../../pm-plugins/sticky-headers/commands', () => ({
-  ...jest.requireActual<Object>(
-    '../../../../pm-plugins/sticky-headers/commands',
-  ),
-  updateStickyState: jest.fn(() => jest.fn()),
-}));
+jest.mock(
+  '../../../../plugins/table/pm-plugins/sticky-headers/commands',
+  () => ({
+    ...jest.requireActual<Object>(
+      '../../../../plugins/table/pm-plugins/sticky-headers/commands',
+    ),
+    updateStickyState: jest.fn(() => jest.fn()),
+  }),
+);
 jest.mock('@atlaskit/editor-common/ui', () => ({
   ...jest.requireActual<Object>('@atlaskit/editor-common/ui'),
   findOverflowScrollParent: jest.fn(() => jest.fn()),
 }));
 
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { updateStickyState } from '../../../../pm-plugins/sticky-headers/commands';
-import { TableCssClassName } from '../../../../types';
-import TableComponent from '../../../../nodeviews/TableComponent';
+import { updateStickyState } from '../../../../plugins/table/pm-plugins/sticky-headers/commands';
+import { TableCssClassName } from '../../../../plugins/table/types';
+import TableComponent from '../../../../plugins/table/nodeviews/TableComponent';
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import {
   stickyRowOffsetTop,
   tableScrollbarOffset,
-} from '../../../../ui/consts';
+} from '../../../../plugins/table/ui/consts';
 
 describe('TableRowNodeView', () => {
   let tableRowNodeView: TableRowNodeView;

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/table-local-id.ts

@@ -7,7 +7,7 @@ import dispatchPasteEvent from '@atlaskit/editor-test-helpers/dispatch-paste-eve
 import { insertText } from '@atlaskit/editor-test-helpers/transactions';
 import { replaceRaf } from 'raf-stub';
 
-import { handleCut } from '../../../event-handlers';
+import { handleCut } from '../../../plugins/table/event-handlers';
 
 import {
   doc,
@@ -21,11 +21,8 @@ import {
   th,
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
-import {
-  TablePluginState,
-  PluginConfig,
-} from '../../../../../plugins/table/types';
-import { pluginKey as tablePluginKey } from '../../../../../plugins/table/pm-plugins/plugin-key';
+import { TablePluginState, PluginConfig } from '../../../plugins/table/types';
+import { pluginKey as tablePluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { CellSelection } from '@atlaskit/editor-tables';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/table-resizing/colgroup.ts

@@ -1,6 +1,6 @@
 import { p, table, tr, td } from '@atlaskit/editor-test-helpers/doc-builder';
 import defaultSchema from '@atlaskit/editor-test-helpers/schema';
-import { generateColgroup } from '../../../../pm-plugins/table-resizing/utils';
+import { generateColgroup } from '../../../../plugins/table/pm-plugins/table-resizing/utils';
 
 describe('table-resizing/colgroup', () => {
   describe('#generateColgroup', () => {

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/table-resizing/event-handlers.ts

@@ -3,7 +3,7 @@ import {
   LightEditorPlugin,
   Preset,
 } from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-import { setResizeHandlePos } from '../../../../../../plugins/table/pm-plugins/table-resizing/commands';
+import { setResizeHandlePos } from '../../../../plugins/table/pm-plugins/table-resizing/commands';
 import {
   doc,
   table,
@@ -19,8 +19,8 @@ import {
   TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
 
-import tablePlugin from '../../../../../table';
-import { pluginKey } from '../../../../pm-plugins/plugin-key';
+import tablePlugin from '../../../../plugins/table';
+import { pluginKey } from '../../../../plugins/table/pm-plugins/plugin-key';
 import { TextSelection, NodeSelection } from 'prosemirror-state';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import widthPlugin from '@atlaskit/editor-core/src/plugins/width';

package/src/{plugins/table/__tests__ → __tests__}/unit/pm-plugins/table-selection-keymap.ts

@@ -23,9 +23,9 @@ import { uuid } from '@atlaskit/adf-schema';
 import selectionPlugin from '@atlaskit/editor-core/src/plugins/selection';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import codeBlockPlugin from '@atlaskit/editor-core/src/plugins/code-block';
-import tablePlugin from '../../../index';
-import { TablePluginState } from '../../../types';
-import { pluginKey } from '../../../pm-plugins/plugin-key';
+import tablePlugin from '../../../plugins/table';
+import { TablePluginState } from '../../../plugins/table/types';
+import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import { createEditorSelectionAPI } from '@atlaskit/editor-core/src/selection-api/api';
 import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 

package/src/{plugins/table/__tests__ → __tests__}/unit/toolbar.ts

@@ -1,8 +1,8 @@
 import {
   getToolbarMenuConfig,
   getToolbarCellOptionsConfig,
-} from '../../toolbar';
-import { ToolbarMenuConfig, ToolbarMenuState } from '../../types';
+} from '../../plugins/table/toolbar';
+import { ToolbarMenuConfig, ToolbarMenuState } from '../../plugins/table/types';
 import { createEditorState } from '@atlaskit/editor-test-helpers/create-editor-state';
 import {
   doc,
@@ -17,11 +17,11 @@ import type {
   FloatingToolbarDropdown,
 } from '@atlaskit/editor-common/types';
 import { splitCell } from '@atlaskit/editor-tables/utils';
-import { canMergeCells } from '../../transforms';
+import { canMergeCells } from '../../plugins/table/transforms';
 import { Rect } from '@atlaskit/editor-tables/table-map';
 
 jest.mock('@atlaskit/editor-tables/utils');
-jest.mock('../../transforms');
+jest.mock('../../plugins/table/transforms');
 
 const formatMessage: (t: unknown) => string = (id) => 'Lorem ipsum';
 const ctx = { formatMessage };
@@ -133,7 +133,7 @@ describe('getToolbarMenuConfig', () => {
 describe('getToolbarCellOptionsConfig', () => {
   const state = createEditorState(doc(table()(row(td()(p('1{cursor}'))))));
   const getEditorContainerWidth = () => ({ width: 500 });
-  //
+
   const formatMessage: (t: { id: string }) => string = (message) =>
     `${message.id}`;
   const rect = new Rect(1, 1, 1, 1);
@@ -146,10 +146,6 @@ describe('getToolbarCellOptionsConfig', () => {
     getEditorContainerWidth,
     undefined,
   );
-  //
-  it('is hidden by default', () => {
-    expect(cellOptionsMenu.hidden).toBe(true);
-  });
 
   it('is a dropdown with the following dropdown items with the given order', () => {
     const items = cellOptionsMenu.options as Array<DropdownOptionT<Command>>;

package/src/{plugins/table/__tests__ → __tests__}/unit/utils/collapse.ts

@@ -11,13 +11,13 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
-import tablePlugin from '../../../../table';
+import tablePlugin from '../../../plugins/table';
 import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 
 import {
   isTableCollapsible,
   collapseSelectedTable,
-} from '../../../utils/collapse';
+} from '../../../plugins/table/utils/collapse';
 
 describe('collapse', () => {
   const createEditor = createProsemirrorEditorFactory();

package/src/{plugins/table/__tests__ → __tests__}/unit/utils/column-controls.ts

@@ -1,4 +1,4 @@
-import { colWidthsForRow } from '../../../utils/column-controls';
+import { colWidthsForRow } from '../../../plugins/table/utils/column-controls';
 
 const createRow = (colCount: number, childType = 'td') => {
   const tr = document.createElement('tr');

package/src/{plugins/table/__tests__ → __tests__}/visual-regression/cell-options-menu.ts

@@ -1,3 +1,5 @@
+export {};
+
 // import {
 //   PuppeteerPage,
 //   waitForNoTooltip,

package/src/__tests__/visual-regression/copy-button.ts

@@ -0,0 +1,181 @@
+export {};
+
+it.skip('TODO: restore vr `packages/editor/editor-plugin-table/src/plugins/table/__tests__/visual-regression/copy-button.ts`', () => {});
+
+// import { _getCopyButtonTestSuite } from '../../../copy-button/__tests__/visual-regression/_getCopyButtonTestSuite';
+
+// _getCopyButtonTestSuite({
+//   nodeName: 'Table',
+//   editorOptions: {
+//     allowTables: {
+//       advanced: true,
+//     },
+//     defaultValue: {
+//       version: 1,
+//       type: 'doc',
+//       content: [
+//         {
+//           type: 'table',
+//           attrs: {
+//             isNumberColumnEnabled: false,
+//             layout: 'default',
+//             localId: '15804638-b946-4591-b64c-beffe5122733',
+//           },
+//           content: [
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '1',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '2',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableHeader',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '3',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '4',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '5',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '6',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//             {
+//               type: 'tableRow',
+//               content: [
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '7',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '8',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//                 {
+//                   type: 'tableCell',
+//                   attrs: {},
+//                   content: [
+//                     {
+//                       type: 'paragraph',
+//                       content: [
+//                         {
+//                           type: 'text',
+//                           text: '9',
+//                         },
+//                       ],
+//                     },
+//                   ],
+//                 },
+//               ],
+//             },
+//           ],
+//         },
+//       ],
+//     },
+//   },
+//   nodeSelector: '.pm-table-cell-content-wrap',
+// });

package/src/{plugins/table/__tests__ → __tests__}/visual-regression/index.ts

@@ -1,8 +1,10 @@
+export {};
+
 // import { PuppeteerPage } from '@atlaskit/visual-regression/helper';
+// import { Device } from '@atlaskit/editor-test-helpers/vr-utils/device-viewport';
 // import {
 //   snapshot,
 //   initFullPageEditorWithAdf,
-//   Device,
 // } from '../../../../__tests__/visual-regression/_utils';
 // import tableWith100ListItemsADF from './__fixtures__/table-with-100-numbered-list-items.json';
 // import {

package/src/plugins/table/commands/hover.ts

@@ -59,13 +59,14 @@ export const hoverMergedCells = () =>
 export const hoverColumns = (hoveredColumns: number[], isInDanger?: boolean) =>
   createCommand(
     (state) => {
-      const cells = getCellsInColumn(hoveredColumns)(state.selection);
+      const cells = getCellsInColumn(hoveredColumns)(state.tr.selection);
       if (!cells) {
         return false;
       }
       const decorations = createControlsHoverDecoration(
         cells,
         'column',
+        state.tr,
         isInDanger,
       );
 
@@ -95,6 +96,7 @@ export const hoverRows = (hoveredRows: number[], isInDanger?: boolean) =>
       const decorations = createControlsHoverDecoration(
         cells,
         'row',
+        state.tr,
         isInDanger,
       );
 
@@ -131,6 +133,7 @@ export const hoverTable = (isInDanger?: boolean, isSelected?: boolean) =>
       const decorations = createControlsHoverDecoration(
         cells,
         'table',
+        state.tr,
         isInDanger,
         isSelected,
       );

package/src/plugins/table/commands-with-analytics.ts

@@ -96,7 +96,7 @@ export const emptyMultipleCellsWithAnalytics = (
 
 export const mergeCellsWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined,
-) =>
+) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) =>
   withEditorAnalyticsAPI(({ selection }) => {
     const {
       horizontalCells,
@@ -111,7 +111,7 @@ export const mergeCellsWithAnalytics = (
       actionSubject: ACTION_SUBJECT.TABLE,
       actionSubjectId: null,
       attributes: {
-        inputMethod: INPUT_METHOD.CONTEXT_MENU, // TODO: merge with floating toolbar once command is updated
+        inputMethod,
         horizontalCells,
         verticalCells,
         totalCells,
@@ -129,7 +129,7 @@ export const mergeCellsWithAnalytics = (
 
 export const splitCellWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-) =>
+) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) =>
   withEditorAnalyticsAPI(({ selection }) => {
     const { totalRowCount, totalColumnCount } = getSelectedCellInfo(selection);
     const cell = findCellClosestToPos(selection.$anchor);
@@ -144,7 +144,7 @@ export const splitCellWithAnalytics = (
         actionSubject: ACTION_SUBJECT.TABLE,
         actionSubjectId: null,
         attributes: {
-          inputMethod: INPUT_METHOD.CONTEXT_MENU, // TODO: merge with floating toolbar once command is updated
+          inputMethod,
           horizontalCells,
           verticalCells,
           totalCells: horizontalCells * verticalCells,
@@ -159,7 +159,11 @@ export const splitCellWithAnalytics = (
 
 export const setColorWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-) => (cellColor: string, targetCellPosition?: number) =>
+) => (
+  inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB,
+  cellColor: string,
+  targetCellPosition?: number,
+) =>
   withEditorAnalyticsAPI(({ selection }) => {
     const {
       horizontalCells,
@@ -174,7 +178,7 @@ export const setColorWithAnalytics = (
       actionSubject: ACTION_SUBJECT.TABLE,
       actionSubjectId: null,
       attributes: {
-        inputMethod: INPUT_METHOD.CONTEXT_MENU, // TODO: merge with floating toolbar once command is updated
+        inputMethod,
         cellColor: (
           tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor
         ).toLowerCase(),
@@ -457,7 +461,7 @@ export const toggleTableLayoutWithAnalytics = (
 export const sortColumnWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 ) => (
-  inputMethod: INPUT_METHOD.CONTEXT_MENU,
+  inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB,
   columnIndex: number,
   sortOrder: SortOrder,
 ) =>
@@ -483,7 +487,7 @@ export const sortColumnWithAnalytics = (
 export const distributeColumnsWidthsWithAnalytics = (
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 ) => (
-  inputMethod: INPUT_METHOD.CONTEXT_MENU,
+  inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB,
   { resizeState, table, attributes }: ResizeStateWithAnalytics,
 ) => {
   return withEditorAnalyticsAPI(() => {

package/src/plugins/table/event-handlers.ts

@@ -23,7 +23,6 @@ import {
   isLastItemMediaGroup,
   setNodeSelection,
 } from '@atlaskit/editor-common/utils';
-// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {

package/src/plugins/table/handlers.ts

@@ -3,7 +3,6 @@ import { Transaction, ReadonlyTransaction } from 'prosemirror-state';
 import { ContentNodeWithPos, findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
-// import { isTextInput } from '../../utils/is-text-input';
 import { isTextInput } from '@atlaskit/editor-common/utils';
 import { isTableCollapsible } from './utils/collapse';
 

package/src/plugins/table/index.tsx

@@ -20,6 +20,7 @@ import {
   ACTION_SUBJECT_ID,
   EVENT_TYPE,
   INPUT_METHOD,
+  TABLE_ACTION,
 } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 
@@ -59,6 +60,7 @@ import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
+import { EditorState, Transaction } from 'prosemirror-state';
 
 interface TablePluginOptions {
   tableOptions: PluginConfig;
@@ -177,8 +179,31 @@ const tablesPlugin = (options?: TablePluginOptions): EditorPlugin => {
           name: 'tableSelectionKeymap',
           plugin: () => tableSelectionKeymapPlugin(options?.editorSelectionAPI),
         },
-        { name: 'tableEditing', plugin: () => tableEditing() as SafePlugin },
-
+        {
+          name: 'tableEditing',
+          plugin: () =>
+            tableEditing({
+              reportFixedTable: ({
+                state,
+                tr,
+                reason,
+              }: {
+                state: EditorState;
+                tr: Transaction;
+                reason: string;
+              }) => {
+                options?.editorAnalyticsAPI?.attachAnalyticsEvent({
+                  action: TABLE_ACTION.FIXED,
+                  actionSubject: ACTION_SUBJECT.TABLE,
+                  actionSubjectId: null,
+                  attributes: {
+                    reason,
+                  },
+                  eventType: EVENT_TYPE.TRACK,
+                })(tr);
+              },
+            }) as SafePlugin,
+        },
         {
           name: 'tableStickyHeaders',
           plugin: ({ dispatch, eventDispatcher }) =>
@@ -432,6 +457,7 @@ const tablesPlugin = (options?: TablePluginOptions): EditorPlugin => {
       floatingToolbar: getToolbarConfig(
         defaultGetEditorContainerWidth,
         options?.editorAnalyticsAPI,
+        options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
       )(pluginConfig(options?.tableOptions)),
     },
   };

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/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/index.ts

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