@atlaskit/editor-plugin-table 2.0.1 → 2.1.1

package/src/__tests__/unit/sort-column.ts

@@ -7,11 +7,9 @@ import {
   doc,
   p,
   table,
-  h1,
   tr,
   td,
   th,
-  strong,
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import {
@@ -20,8 +18,6 @@ import {
 } from '../../plugins/table/types';
 import { uuid } from '@atlaskit/adf-schema';
 import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
-import textFormattingPlugin from '@atlaskit/editor-core/src/plugins/text-formatting';
-import blockTypePlugin from '@atlaskit/editor-core/src/plugins/block-type';
 import { sortByColumn } from '../../plugins/table/commands';
 import { pluginKey as tablePluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import tablePlugin from '../../plugins/table-plugin';
@@ -56,9 +52,7 @@ describe('table plugin', () => {
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(widthPlugin)
-    .add([tablePlugin, { tableOptions }])
-    .add(textFormattingPlugin)
-    .add(blockTypePlugin);
+    .add([tablePlugin, { tableOptions }]);
 
   const editor = (doc: DocBuilder) => {
     return createEditor<TablePluginState, PluginKey>({
@@ -75,11 +69,11 @@ describe('table plugin', () => {
           doc(
             table({ isNumberColumnEnabled: false, layout: 'default' })(
               tr(
-                th({})(p(strong('1'))),
-                th({})(p(strong('2'))),
-                th({})(p(strong('3'))),
-                th({})(p(strong('4'))),
-                th({})(p(strong('5'))),
+                th({})(p('1')),
+                th({})(p('2')),
+                th({})(p('3')),
+                th({})(p('4')),
+                th({})(p('5')),
               ),
               tr(
                 td({})(p('c')),
@@ -139,11 +133,11 @@ describe('table plugin', () => {
               localId: TABLE_LOCAL_ID,
             })(
               tr(
-                th({})(p(strong('1'))),
-                th({})(p(strong('2'))),
-                th({})(p(strong('3'))),
-                th({})(p(strong('4'))),
-                th({})(p(strong('5'))),
+                th({})(p('1')),
+                th({})(p('2')),
+                th({})(p('3')),
+                th({})(p('4')),
+                th({})(p('5')),
               ),
               tr(
                 td({})(p('1')),
@@ -196,11 +190,11 @@ describe('table plugin', () => {
           doc(
             table({ isNumberColumnEnabled: false, layout: 'default' })(
               tr(
-                th({})(p(strong('1'))),
-                th({})(p(strong('2'))),
-                th({})(p(strong('3'))),
-                th({})(p(strong('4'))),
-                th({})(p(strong('5'))),
+                th({})(p('1')),
+                th({})(p('2')),
+                th({})(p('3')),
+                th({})(p('4')),
+                th({})(p('5')),
               ),
               tr(
                 td({})(p('c')),
@@ -260,11 +254,11 @@ describe('table plugin', () => {
               localId: TABLE_LOCAL_ID,
             })(
               tr(
-                th({})(p(strong('1'))),
-                th({})(p(strong('2'))),
-                th({})(p(strong('3'))),
-                th({})(p(strong('4'))),
-                th({})(p(strong('5'))),
+                th({})(p('1')),
+                th({})(p('2')),
+                th({})(p('3')),
+                th({})(p('4')),
+                th({})(p('5')),
               ),
               tr(
                 td({})(p('c')),
@@ -312,127 +306,6 @@ describe('table plugin', () => {
           ),
         );
       });
-      it('sorts the given column with header text in ascending order', () => {
-        const { editorView } = editor(
-          doc(
-            table({ isNumberColumnEnabled: false, layout: 'default' })(
-              tr(
-                th({})(h1(strong('asdasdasd'))),
-                th({})(p(strong('asdasd'))),
-                th({})(p(strong('sdfsdf'))),
-                th({})(p('sdfsdfsdf')),
-                th({})(p(strong('asdasda'))),
-              ),
-              tr(
-                td({})(h1(strong('c'))),
-                td({})(p('cda')),
-                td({})(p()),
-                td({})(p('cz')),
-                td({})(p()),
-              ),
-              tr(
-                td({})(h1(strong('b'))),
-                td({})(p()),
-                td({})(p('dfsf')),
-                td({})(p()),
-                td({})(p('cvsd')),
-              ),
-              tr(
-                td({})(p(strong('a'))),
-                td({})(p('zc')),
-                td({})(p()),
-                td({})(p()),
-                td({})(p('fsdf')),
-              ),
-              tr(
-                td({})(p(strong('2'))),
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p(strong('1'))),
-                td({})(p()),
-                td({})(p('cxzcz')),
-                td({})(p()),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-                td({})(p('sdfs')),
-                td({})(p()),
-              ),
-            ),
-          ),
-        );
-
-        const sortByColumnCommand = sortByColumn(0, SortOrder.ASC);
-
-        sortByColumnCommand(editorView.state, editorView.dispatch);
-
-        expect(editorView.state.doc).toEqualDocument(
-          doc(
-            table({
-              isNumberColumnEnabled: false,
-              layout: 'default',
-              localId: TABLE_LOCAL_ID,
-            })(
-              tr(
-                th({})(h1(strong('asdasdasd'))),
-                th({})(p(strong('asdasd'))),
-                th({})(p(strong('sdfsdf'))),
-                th({})(p('sdfsdfsdf')),
-                th({})(p(strong('asdasda'))),
-              ),
-              tr(
-                td({})(p(strong('1'))),
-                td({})(p()),
-                td({})(p('cxzcz')),
-                td({})(p()),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p(strong('2'))),
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p(strong('a'))),
-                td({})(p('zc')),
-                td({})(p()),
-                td({})(p()),
-                td({})(p('fsdf')),
-              ),
-              tr(
-                td({})(h1(strong('b'))),
-                td({})(p()),
-                td({})(p('dfsf')),
-                td({})(p()),
-                td({})(p('cvsd')),
-              ),
-              tr(
-                td({})(h1(strong('c'))),
-                td({})(p('cda')),
-                td({})(p()),
-                td({})(p('cz')),
-                td({})(p()),
-              ),
-              tr(
-                td({})(p()),
-                td({})(p()),
-                td({})(p()),
-                td({})(p('sdfs')),
-                td({})(p()),
-              ),
-            ),
-          ),
-        );
-      });
 
       describe('case sensitivity', () => {
         describe('ascending order', () => {

package/src/__tests__/unit/utils/collapse.ts

@@ -12,22 +12,17 @@ import {
 } from '@atlaskit/editor-test-helpers/doc-builder';
 
 import tablePlugin from '../../../plugins/table';
-import expandPlugin from '@atlaskit/editor-core/src/plugins/expand';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
 
-import {
-  isTableCollapsible,
-  collapseSelectedTable,
-} from '../../../plugins/table/utils/collapse';
+import { isTableCollapsible } from '../../../plugins/table/utils/collapse';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 
 describe('collapse', () => {
   const createEditor = createProsemirrorEditorFactory();
 
-  const editor = (doc: DocBuilder, expandInPlugins?: boolean) => {
+  const editor = (doc: DocBuilder) => {
     const preset = new Preset<LightEditorPlugin>()
       .add([featureFlagsPlugin, {}])
       .add([analyticsPlugin, {}])
@@ -35,11 +30,7 @@ describe('collapse', () => {
       .add(widthPlugin)
       .add(tablePlugin);
 
-    const finalPreset = expandInPlugins
-      ? preset.add(decorationsPlugin).add(expandPlugin)
-      : preset;
-
-    return createEditor({ doc, preset: finalPreset });
+    return createEditor({ doc, preset });
   };
 
   describe('isTableCollapsible', () => {
@@ -55,32 +46,5 @@ describe('collapse', () => {
       expect(newTr.steps.length).toEqual(0);
       expect(isTableCollapsibleRes.tableIsCollapsible).toEqual(false);
     });
-
-    it('should allow collapsing a table when expands are in schema', () => {
-      const editorData = editor(doc(table()(tr(tdEmpty, tdEmpty))), true);
-      const editorView = editorData.editorView;
-      const newTr = editorView.state.tr;
-
-      expect(newTr.steps.length).toEqual(0);
-
-      const isTableCollapsibleRes = isTableCollapsible(newTr);
-
-      expect(newTr.steps.length).toEqual(0);
-      expect(isTableCollapsibleRes.tableIsCollapsible).toEqual(true);
-    });
-  });
-
-  describe('collapseSelectedTable', () => {
-    it('should add steps to tr when called', () => {
-      const editorData = editor(doc(table()(tr(tdEmpty, tdEmpty))), true);
-      const editorView = editorData.editorView;
-      const newTr = editorView.state.tr;
-
-      expect(newTr.steps.length).toEqual(0);
-
-      const collapseTr = collapseSelectedTable(newTr);
-      expect(collapseTr).toBeDefined();
-      expect(collapseTr!.steps.length).toEqual(1);
-    });
   });
 });

package/.eslintrc.js

@@ -1,37 +0,0 @@
-module.exports = {
-  rules: {
-    // Ensure the table plugin is not coupled to editor-core and avoid circular dependencies
-    'no-restricted-imports': [
-      'error',
-      {
-        patterns: [
-          {
-            group: ['@atlaskit/editor-core/*', '@atlaskit/editor-core'],
-            message:
-              'Importing editor-core is not allowed in editor-plugin-table. Consider using editor-common instead.',
-          },
-        ],
-      },
-    ],
-    'react/no-danger': 'error',
-  },
-  // Disable restricted import for tests
-  overrides: [
-    {
-      files: ['**/__tests__/**/*.{js,ts,tsx}', 'examples/**/*.{js,ts,tsx}'],
-      rules: {
-        'no-restricted-imports': [
-          'off',
-          {
-            patterns: [
-              {
-                group: ['@atlaskit/editor-core/*', '@atlaskit/editor-core'],
-              },
-            ],
-          },
-        ],
-        'react/no-danger': 'off',
-      },
-    },
-  ],
-};

package/src/__tests__/unit/color-picker.ts

@@ -1,110 +0,0 @@
-import {
-  doc,
-  DocBuilder,
-  p,
-  table,
-  tdCursor,
-  tdEmpty,
-  tr,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-import {
-  createProsemirrorEditorFactory,
-  LightEditorPlugin,
-  Preset,
-} from '@atlaskit/editor-test-helpers/create-prosemirror-editor';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type {
-  FloatingToolbarButton,
-  FloatingToolbarItem,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
-import dataConsumerPlugin from '@atlaskit/editor-core/src/plugins/data-consumer';
-import extensionPlugin from '@atlaskit/editor-core/src/plugins/extension';
-import tablePlugin from '../../plugins/table';
-import { setEditorFocus, setTableRef } from '../../plugins/table/commands';
-import { getToolbarConfig } from '../../plugins/table/toolbar';
-import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
-import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
-import { widthPlugin } from '@atlaskit/editor-plugin-width';
-import { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
-
-const formatMessage: (t: { id: string }) => string = (message) =>
-  `${message.id}`;
-
-describe('color picker', () => {
-  /**
-   * Use `createEditorFactory` here to enable referentiality as
-   * `createProsemirrorEditorFactory` has some issues with correctly mimicking
-   * old state for the unique localId plugin
-   */
-  const createEditorFn = createProsemirrorEditorFactory();
-  const createEditor = (doc: DocBuilder) => {
-    const output = createEditorFn({
-      doc,
-
-      attachTo: document.body,
-      preset: new Preset<LightEditorPlugin>()
-        .add([featureFlagsPlugin, {}])
-        .add([analyticsPlugin, {}])
-        .add(decorationsPlugin)
-        .add(contentInsertionPlugin)
-        .add(widthPlugin)
-        .add(dataConsumerPlugin)
-        .add(extensionPlugin)
-        .add(tablePlugin),
-    });
-
-    // Prep the table plugin state a little
-    const { editorView } = output;
-    const { dispatch } = editorView;
-    const tableRef = document.querySelector(
-      '.ProseMirror table',
-    ) as HTMLTableElement;
-    setEditorFocus(true)(output.editorView.state, dispatch);
-    setTableRef(tableRef)(output.editorView.state, dispatch);
-
-    return output;
-  };
-
-  it('should return a corect color picker option if allowBackgroundColor enabled', async () => {
-    const { editorView } = createEditor(
-      doc(p('text'), table()(tr(tdCursor, tdEmpty))),
-    );
-    const getEditorContainerWidth = () => ({ width: 500 });
-    const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
-      attachAnalyticsEvent: jest.fn().mockReturnValue(() => jest.fn()),
-    };
-
-    // Enable tableCellOptionsInFloatingToolbar
-    const getEditorFeatureFlags: GetEditorFeatureFlags = jest
-      .fn()
-      .mockReturnValue({
-        tableCellOptionsInFloatingToolbar: true,
-      });
-
-    // Enable allowBackgroundColor feature flag
-    const { state } = editorView;
-    (state as any).tablePlugin$.pluginConfig.allowBackgroundColor = true;
-
-    // Create the editor
-    const config = getToolbarConfig(
-      getEditorContainerWidth,
-      editorAnalyticsAPIFake,
-      getEditorFeatureFlags,
-      () => editorView,
-    )({})(state, { formatMessage } as any, {} as any)!;
-
-    // Let's find the colorPicker from the option items list
-    const items =
-      typeof config.items === 'function'
-        ? config.items(state.doc.firstChild!)
-        : config.items;
-
-    const option = items.find(
-      (item: FloatingToolbarItem<any>) =>
-        item.type === 'select' && item.id === 'editor.table.colorPicker',
-    )! as FloatingToolbarButton<any>;
-    expect(option).not.toBeUndefined();
-  });
-});

package/src/__tests__/unit/floating-toolbar.ts

@@ -1,95 +0,0 @@
-// TODO: still broken
-import { PluginConfig } from '../../plugins/table/types';
-import { setTextSelection } from '@atlaskit/editor-common/utils';
-import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-import {
-  doc,
-  p,
-  table,
-  tr,
-  td,
-  th,
-  DocBuilder,
-} from '@atlaskit/editor-test-helpers/doc-builder';
-import {
-  FloatingToolbarPluginState,
-  pluginKey as floatingToolbarPluginKey,
-} from '@atlaskit/editor-core/src/plugins/floating-toolbar';
-import { setEditorFocus } from '../../plugins/table/commands';
-import { EditorState } from 'prosemirror-state';
-import tablePlugin from '../../plugins/table-plugin';
-
-describe('table floating toolbar', () => {
-  const createEditor = createEditorFactory();
-
-  const editor = (doc: DocBuilder) => {
-    const tableOptions = {
-      allowNumberColumn: true,
-      allowHeaderRow: true,
-      allowHeaderColumn: true,
-      permittedLayouts: 'all',
-    } as PluginConfig;
-
-    return createEditor({
-      doc,
-      editorProps: {
-        dangerouslyAppendPlugins: {
-          __plugins: [tablePlugin({ tableOptions })],
-        },
-      },
-    });
-  };
-
-  describe('when selecting a cell', () => {
-    it('should contain the floating toolbar info within the first dispatch', () => {
-      const { editorView, onEditorViewStateUpdatedCallbacks } = editor(
-        doc(
-          p('te{<>}xt'),
-          table()(
-            tr(
-              th({ colwidth: [100, 100] })(p('1')),
-              th({ colwidth: [100, 100] })(p('2')),
-              th({ colwidth: [480] })(p('3')),
-            ),
-            tr(
-              td({ colwidth: [100, 100] })(p('4')),
-              td({ colwidth: [100, 100] })(p('5')),
-              td({ colwidth: [480] })(p('6')),
-            ),
-          ),
-        ),
-      );
-
-      setEditorFocus(true)(editorView.state, editorView.dispatch);
-      setTextSelection(editorView, 5);
-
-      const pluginStates: Array<{ config: any } | null | undefined> = [];
-
-      const mock = jest.fn(
-        ({ newEditorState }: { newEditorState: EditorState }) => {
-          const { getConfigWithNodeInfo } = floatingToolbarPluginKey.getState(
-            newEditorState,
-          ) as FloatingToolbarPluginState;
-          pluginStates.push(getConfigWithNodeInfo(editorView.state));
-        },
-      );
-
-      onEditorViewStateUpdatedCallbacks.push({
-        pluginName: 'listener',
-        callback: mock,
-      });
-      setTextSelection(editorView, 9);
-
-      expect(pluginStates).toHaveLength(2);
-      // Inner dispatch for #findTable
-      const firstCall = pluginStates[0];
-      expect(firstCall).toBeTruthy();
-      expect(firstCall!.config).toBeTruthy();
-
-      // Outer dispatch for selection change
-      const secondCall = pluginStates[1];
-      expect(secondCall).toBeTruthy();
-      expect(secondCall!.config).toBeTruthy();
-    });
-  });
-});