@atlaskit/editor-plugin-table 0.0.9 → 0.1.0

package/src/plugins/table/ui/TableFloatingControls/CornerControls/index.tsx

@@ -63,6 +63,7 @@ class CornerControlComponent extends Component<
               ? `${this.props.stickyTop}px`
               : undefined,
         }}
+        contentEditable={false}
       >
         <button
           aria-label={formatMessage(messages.cornerControl)}

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

@@ -12,7 +12,6 @@ import {
 
 import { EditorView } from 'prosemirror-view';
 
-// import { maphElem } from '@atlaskit/editor-core/src/utils/dom';
 import { maphElem } from '@atlaskit/editor-common/utils';
 
 import { TableCssClassName as ClassName } from '../types';

package/src/plugins/table/utils/decoration.ts

@@ -12,7 +12,6 @@ import { Decoration, DecorationSet } from 'prosemirror-view';
 
 import { CellAttributes } from '@atlaskit/adf-schema';
 
-// import { nonNullable } from '@atlaskit/editor-core/src/utils';
 import { nonNullable } from '@atlaskit/editor-common/utils';
 import {
   Cell,
@@ -61,10 +60,49 @@ export const createCellHoverDecoration = (
 export const createControlsHoverDecoration = (
   cells: Cell[],
   type: 'row' | 'column' | 'table',
+  tr: Transaction | ReadonlyTransaction,
   danger?: boolean,
   selected?: boolean,
-): Decoration[] =>
-  cells.map((cell) => {
+): Decoration[] => {
+  const table = findTable(tr.selection);
+  if (!table) {
+    return [];
+  }
+
+  const map = TableMap.get(table.node);
+  const [min, max] = cells.reduce<[number | null, number | null]>(
+    ([min, max], cell) => {
+      if (min === null || cell.pos < min) {
+        min = cell.pos;
+      }
+      if (max === null || cell.pos > max) {
+        max = cell.pos;
+      }
+
+      return [min, max];
+    },
+    [null, null],
+  );
+
+  if (min === null || max === null) {
+    return [];
+  }
+
+  let updatedCells: number[] = cells.map((x) => x.pos);
+
+  // ED-15246 fixed trello card table overflow issue
+  // If columns / rows have been merged the hovered selection is different to the actual selection
+  // So If the table cells are in danger we want to create a "rectangle" selection
+  // to match the "clicked" selection
+
+  if (danger) {
+    const rect = map.rectBetween(min - table.start, max - table.start);
+    updatedCells = map.cellsInRect(rect).map((x) => x + table.start);
+  }
+
+  return updatedCells.map((pos) => {
+    const cell = tr.doc.nodeAt(pos);
+
     const classes = [ClassName.HOVERED_CELL];
     if (danger) {
       classes.push(ClassName.HOVERED_CELL_IN_DANGER);
@@ -97,14 +135,15 @@ export const createControlsHoverDecoration = (
     }
 
     return Decoration.node(
-      cell.pos,
-      cell.pos + cell.node.nodeSize,
+      pos,
+      pos + cell!.nodeSize,
       {
         class: classes.join(' '),
       },
       { key },
     );
   });
+};
 
 export const createColumnSelectedDecoration = (
   tr: Transaction | ReadonlyTransaction,

package/src/plugins/table/utils/dom.ts

@@ -1,5 +1,3 @@
-// import { containsClassName } from '@atlaskit/editor-core/src/utils';
-// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 import {
   closestElement,
   containsClassName,

package/src/plugins/table/utils/paste.ts

@@ -2,7 +2,6 @@ import { Fragment, Node as PMNode, Schema, Slice } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
 import { flatten } from 'prosemirror-utils';
 
-// import { flatmap, mapSlice } from '@atlaskit/editor-core/src/utils/slice';
 import { flatmap, mapSlice } from '@atlaskit/editor-common/utils';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';

package/src/plugins/table/utils/row-controls.ts

@@ -10,7 +10,6 @@ import {
   isTableSelected,
 } from '@atlaskit/editor-tables/utils';
 
-// import { parsePx } from '@atlaskit/editor-core/src/utils/dom';
 import { parsePx } from '@atlaskit/editor-common/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { tableDeleteButtonSize } from '../ui/consts';

package/types/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@atlaskit/editor-plugin-table/types",
-  "main": "../dist/cjs/types.js",
-  "module": "../dist/esm/types.js",
-  "module:es2019": "../dist/es2019/types.js",
-  "types": "../dist/types/types.d.ts",
+  "main": "../dist/cjs/plugins/table/types.js",
+  "module": "../dist/esm/plugins/table/types.js",
+  "module:es2019": "../dist/es2019/plugins/table/types.js",
+  "types": "../dist/types/plugins/table/types.d.ts",
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "../dist/types-ts4.0/types.d.ts"
+        "../dist/types-ts4.0/plugins/table/types.d.ts"
       ]
     }
   }

package/ui/common-styles/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@atlaskit/editor-plugin-table/ui/common-styles",
+  "main": "../../dist/cjs/plugins/table/ui/common-styles.js",
+  "module": "../../dist/esm/plugins/table/ui/common-styles.js",
+  "module:es2019": "../../dist/es2019/plugins/table/ui/common-styles.js",
+  "types": "../../dist/types/plugins/table/ui/common-styles.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../../dist/types-ts4.0/plugins/table/ui/common-styles.d.ts"
+      ]
+    }
+  }
+}

package/ui/consts/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@atlaskit/editor-plugin-table/ui/consts",
+  "main": "../../dist/cjs/plugins/table/ui/consts.js",
+  "module": "../../dist/esm/plugins/table/ui/consts.js",
+  "module:es2019": "../../dist/es2019/plugins/table/ui/consts.js",
+  "types": "../../dist/types/plugins/table/ui/consts.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../../dist/types-ts4.0/plugins/table/ui/consts.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/plugins/plugin-key.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.pluginKey = exports.getPluginState = void 0;
-
-var _prosemirrorState = require("prosemirror-state");
-
-var pluginKey = new _prosemirrorState.PluginKey('nextTablePlugin');
-exports.pluginKey = pluginKey;
-
-var getPluginState = function getPluginState(state) {
-  return state && pluginKey.getState(state);
-};
-
-exports.getPluginState = getPluginState;

package/dist/cjs/plugins/table/todo-stubs.js

@@ -1,10 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sendLogs = void 0;
-
-var sendLogs = function sendLogs(_a) {};
-
-exports.sendLogs = sendLogs;

package/dist/cjs/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/es2019/plugins/plugin-key.js

@@ -1,3 +0,0 @@
-import { PluginKey } from 'prosemirror-state';
-export const pluginKey = new PluginKey('nextTablePlugin');
-export const getPluginState = state => state && pluginKey.getState(state);

package/dist/es2019/plugins/table/todo-stubs.js

@@ -1 +0,0 @@
-export const sendLogs = _a => {};

package/dist/es2019/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/plugins/plugin-key.js

@@ -1,5 +0,0 @@
-import { PluginKey } from 'prosemirror-state';
-export var pluginKey = new PluginKey('nextTablePlugin');
-export var getPluginState = function getPluginState(state) {
-  return state && pluginKey.getState(state);
-};

package/dist/esm/plugins/table/todo-stubs.js

@@ -1 +0,0 @@
-export var sendLogs = function sendLogs(_a) {};

package/dist/esm/types.js

@@ -1 +0,0 @@
-export {};

package/dist/types/plugins/plugin-key.d.ts

@@ -1,4 +0,0 @@
-import { EditorState, PluginKey } from 'prosemirror-state';
-import { TablePluginState } from '../types';
-export declare const pluginKey: PluginKey<TablePluginState, any>;
-export declare const getPluginState: (state: EditorState) => TablePluginState | undefined | null;

package/dist/types/plugins/table/todo-stubs.d.ts

@@ -1 +0,0 @@
-export declare const sendLogs: (_a?: any) => void;

package/dist/types/types.d.ts

@@ -1,3 +0,0 @@
-export interface TablePluginState {
-    scaffold?: boolean;
-}

package/dist/types-ts4.0/plugins/plugin-key.d.ts

@@ -1,4 +0,0 @@
-import { EditorState, PluginKey } from 'prosemirror-state';
-import { TablePluginState } from '../types';
-export declare const pluginKey: PluginKey<TablePluginState, any>;
-export declare const getPluginState: (state: EditorState) => TablePluginState | undefined | null;

package/dist/types-ts4.0/plugins/table/todo-stubs.d.ts

@@ -1 +0,0 @@
-export declare const sendLogs: (_a?: any) => void;

package/dist/types-ts4.0/types.d.ts

@@ -1,3 +0,0 @@
-export interface TablePluginState {
-    scaffold?: boolean;
-}

package/src/plugins/plugin-key.ts

@@ -1,7 +0,0 @@
-import { EditorState, PluginKey } from 'prosemirror-state';
-import { TablePluginState } from '../types';
-
-export const pluginKey = new PluginKey<TablePluginState>('nextTablePlugin');
-export const getPluginState = (
-  state: EditorState,
-): TablePluginState | undefined | null => state && pluginKey.getState(state);

package/src/plugins/table/__tests__/integration/table-controls-selection.ts

@@ -1,70 +0,0 @@
-//TODO: [ED-15027] remove and relocate this test once the behaviour has been corrected.\
-import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
-import { BrowserObject } from '@atlaskit/webdriver-runner/wd-wrapper';
-import {
-  goToEditorTestingWDExample,
-  mountEditor,
-} from '@atlaskit/editor-test-helpers/testing-example-page';
-import {
-  fullpage,
-  expectToMatchSelection,
-  setProseMirrorTextSelection,
-} from '@atlaskit/editor-test-helpers/integration/helpers';
-import type { WebDriverPage } from '@atlaskit/editor-test-helpers/integration/types';
-import adf from './__fixtures__/table-with-multiline-date.adf.json';
-
-describe('table with multiline date', () => {
-  const initEditor = async ({
-    client,
-    selection,
-    adf,
-  }: {
-    client: BrowserObject;
-    selection: { anchor: number; head: number };
-    adf: string;
-  }): Promise<WebDriverPage> => {
-    const page = await goToEditorTestingWDExample(
-      client,
-      'editor-plugin-table',
-    );
-    const props = {
-      appearance: fullpage.appearance,
-      defaultValue: adf,
-      allowTextAlignment: true,
-      allowTables: {
-        advanced: true,
-        allowColumnResizing: true,
-      },
-      allowDate: true,
-    };
-
-    await mountEditor(page, props, undefined, { clickInEditor: false });
-
-    await page.waitForSelector('.inlineNodeView');
-
-    await setProseMirrorTextSelection(page, selection);
-
-    return page;
-  };
-  BrowserTestCase(
-    'Does not select table corner controls when navigating up from a multiline node inside a table',
-    {
-      skip: ['firefox', 'safari'],
-    },
-    async (client: BrowserObject) => {
-      const page = await initEditor({
-        client,
-        selection: { anchor: 27, head: 27 },
-        adf,
-      });
-
-      await page.keys('ArrowUp');
-
-      await expectToMatchSelection(page, {
-        type: 'text',
-        anchor: 27,
-        head: 27,
-      });
-    },
-  );
-});

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

@@ -1,130 +0,0 @@
-import {
-  createProsemirrorEditorFactory,
-  LightEditorPlugin,
-  Preset,
-} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-import {
-  doc,
-  p,
-  table,
-  td,
-  tdCursor,
-  tdEmpty,
-  tr,
-  DocBuilder,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-
-import tablePlugin from '../../../table';
-import { handleMouseOut, handleMouseDown } from '../../event-handlers';
-import { pluginKey } from '../../pm-plugins/plugin-key';
-import { TableCssClassName as ClassName } from '../../types';
-
-describe('table plugin: decorations', () => {
-  const createEditor = createProsemirrorEditorFactory();
-  const editor = (doc: DocBuilder) =>
-    createEditor({
-      doc,
-      preset: new Preset<LightEditorPlugin>().add(tablePlugin),
-      pluginKey,
-    });
-  describe('#handleMouseDown', () => {
-    beforeEach(() => {
-      jest.resetAllMocks();
-    });
-    it('should return true & prevent default behaviour for table wrappers: pm-table-contianer', () => {
-      const { editorView } = editor(
-        doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
-      );
-      const tableContainer = document.createElement('div');
-      tableContainer.className = 'pm-table-container';
-      const event = new MouseEvent('mousedown');
-      Object.defineProperty(event, 'target', { value: tableContainer });
-      const preventDefaultSpy = jest.spyOn(
-        MouseEvent.prototype,
-        'preventDefault',
-      );
-
-      expect(handleMouseDown(editorView, event)).toEqual(true);
-      expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should return true & prevent default behaviour for table wrappers: pm-table-wrapper', () => {
-      const { editorView } = editor(
-        doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
-      );
-      const tableContainer = document.createElement('div');
-      tableContainer.className = 'pm-table-wrapper';
-      const event = new MouseEvent('mousedown');
-      Object.defineProperty(event, 'target', { value: tableContainer });
-      const preventDefaultSpy = jest.spyOn(
-        MouseEvent.prototype,
-        'preventDefault',
-      );
-
-      expect(handleMouseDown(editorView, event)).toEqual(true);
-      expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
-    });
-
-    it('should return false & not prevent default behaviour for editor content area: ak-editor-content-area', () => {
-      const { editorView } = editor(
-        doc(table()(tr(td({})(p())), tr(td({})(p())), tr(td({})(p())))),
-      );
-      const editorContentArea = document.createElement('div');
-      editorContentArea.className = 'ak-editor-content-area';
-      const event = new MouseEvent('mousedown');
-      Object.defineProperty(event, 'target', { value: editorContentArea });
-      const preventDefaultSpy = jest.spyOn(
-        MouseEvent.prototype,
-        'preventDefault',
-      );
-
-      expect(handleMouseDown(editorView, event)).toEqual(false);
-      expect(preventDefaultSpy).toHaveBeenCalledTimes(0);
-    });
-  });
-  describe('#handleMouseOut', () => {
-    describe('when the target is a resize handle column', () => {
-      it('should return true', () => {
-        const { editorView } = editor(
-          doc(table()(tr(tdCursor, tdEmpty), tr(td()(p('{o}')), tdEmpty))),
-        );
-        const firstCell = document.createElement('div');
-        firstCell.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-
-        // event.target = secondCell.node;
-        const spy = jest
-          .spyOn(MouseEvent.prototype, 'target', 'get')
-          .mockReturnValue(firstCell);
-
-        const event = new MouseEvent('opa');
-
-        expect(handleMouseOut(editorView, event)).toEqual(true);
-        spy.mockRestore();
-      });
-    });
-
-    describe('when the relatedTarget is a resize handle column too', () => {
-      it('should return false', () => {
-        const { editorView } = editor(
-          doc(table()(tr(tdCursor, tdEmpty), tr(td()(p('{o}')), tdEmpty))),
-        );
-        const firstCell = document.createElement('div');
-        firstCell.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-        const secondCell = document.createElement('div');
-        secondCell.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-
-        // event.target = secondCell.node;
-        const spy = jest
-          .spyOn(MouseEvent.prototype, 'target', 'get')
-          .mockReturnValue(secondCell);
-
-        const event = new MouseEvent('opa', {
-          relatedTarget: firstCell,
-        });
-
-        expect(handleMouseOut(editorView, event)).toEqual(false);
-        spy.mockRestore();
-      });
-    });
-  });
-});

package/src/plugins/table/todo-stubs.ts

@@ -1 +0,0 @@
-export const sendLogs = (_a?: any) => {};

package/src/types.ts

@@ -1,3 +0,0 @@
-export interface TablePluginState {
-  scaffold?: boolean;
-}

package/tmp/api-report-tmp.d.ts

@@ -1,91 +0,0 @@
-## API Report File for "@atlaskit/editor-plugin-table"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { EditorPlugin } from '@atlaskit/editor-common/types';
-import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
-import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { TableLayout } from '@atlaskit/adf-schema';
-
-// @public (undocumented)
-type PermittedLayoutsDescriptor = 'all' | TableLayout[];
-
-// @public (undocumented)
-interface PluginConfig {
-    // (undocumented)
-    advanced?: boolean;
-    // (undocumented)
-    allowAddColumnWithCustomStep?: boolean;
-    // (undocumented)
-    allowBackgroundColor?: boolean;
-    // (undocumented)
-    allowCellOptionsInFloatingToolbar?: boolean;
-    // (undocumented)
-    allowCollapse?: boolean;
-    // (undocumented)
-    allowColumnResizing?: boolean;
-    // (undocumented)
-    allowColumnSorting?: boolean;
-    // (undocumented)
-    allowControls?: boolean;
-    // (undocumented)
-    allowDistributeColumns?: boolean;
-    // (undocumented)
-    allowHeaderColumn?: boolean;
-    // (undocumented)
-    allowHeaderRow?: boolean;
-    // (undocumented)
-    allowMergeCells?: boolean;
-    // (undocumented)
-    allowNumberColumn?: boolean;
-    // (undocumented)
-    initialRenderOptimization?: boolean;
-    // (undocumented)
-    isHeaderRowRequired?: boolean;
-    // (undocumented)
-    mouseMoveOptimization?: boolean;
-    // (undocumented)
-    permittedLayouts?: PermittedLayoutsDescriptor;
-    // (undocumented)
-    stickToolbarToBottom?: boolean;
-    // (undocumented)
-    stickyHeaders?: boolean;
-    // (undocumented)
-    stickyHeadersOptimization?: boolean;
-    // (undocumented)
-    tableCellOptimization?: boolean;
-    // (undocumented)
-    tableOverflowShadowsOptimization?: boolean;
-    // (undocumented)
-    tableRenderOptimization?: boolean;
-}
-
-// @public (undocumented)
-interface TablePluginOptions {
-    // (undocumented)
-    allowContextualMenu?: boolean;
-    // (undocumented)
-    breakoutEnabled?: boolean;
-    // (undocumented)
-    editorAnalyticsAPI?: EditorAnalyticsAPI;
-    // (undocumented)
-    editorSelectionAPI?: EditorSelectionAPI;
-    // (undocumented)
-    fullWidthEnabled?: boolean;
-    // (undocumented)
-    getEditorFeatureFlags?: GetEditorFeatureFlags;
-    // (undocumented)
-    tableOptions: PluginConfig;
-    // (undocumented)
-    wasFullWidthEnabled?: boolean;
-}
-
-// @public (undocumented)
-export const tablesPlugin: (options?: TablePluginOptions | undefined) => EditorPlugin;
-
-// (No @packageDocumentation comment for this package)
-
-```