@atlaskit/editor-plugin-table 5.0.0 → 5.1.0

package/src/plugins/table/pm-plugins/drag-and-drop/commands.ts

@@ -0,0 +1,32 @@
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+
+import { DragAndDropActionType } from './actions';
+import type { DropTargetType } from './consts';
+import { createCommand } from './plugin-factory';
+
+// TODO: This command is a placeholder example. Please replace this if required.
+export const setDropTarget = (
+  type: DropTargetType,
+  index: number,
+  tr?: Transaction,
+) =>
+  createCommand(
+    {
+      type: DragAndDropActionType.SET_DROP_TARGET,
+      data: {
+        type,
+        index,
+      },
+    },
+    (originalTr: Transaction) =>
+      (tr || originalTr).setMeta('addToHistory', false),
+  );
+
+export const clearDropTarget = (tr?: Transaction) =>
+  createCommand(
+    {
+      type: DragAndDropActionType.CLEAR_DROP_TARGET,
+    },
+    (originalTr: Transaction) =>
+      (tr || originalTr).setMeta('addToHistory', false),
+  );

package/src/plugins/table/pm-plugins/drag-and-drop/consts.ts

@@ -0,0 +1,8 @@
+export const DropTargetType = {
+  NONE: 'none',
+  ROW: 'row',
+  COLUMN: 'column',
+} as const;
+
+export type DropTargetType =
+  (typeof DropTargetType)[keyof typeof DropTargetType];

package/src/plugins/table/pm-plugins/drag-and-drop/index.ts

@@ -0,0 +1,5 @@
+export { createPlugin } from './plugin';
+export { pluginKey } from './plugin-key';
+export type { DragAndDropPluginState } from './types';
+
+export { setDropTarget, clearDropTarget } from './commands';

package/src/plugins/table/pm-plugins/drag-and-drop/plugin-factory.ts

@@ -0,0 +1,8 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+
+import { pluginKey } from './plugin-key';
+import reducer from './reducer';
+
+const { createPluginState, createCommand } = pluginFactory(pluginKey, reducer);
+
+export { createPluginState, createCommand };

package/src/plugins/table/pm-plugins/drag-and-drop/plugin-key.ts

@@ -0,0 +1,7 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+
+import type { DragAndDropPluginState } from './types';
+
+export const pluginKey = new PluginKey<DragAndDropPluginState>(
+  'dragAndDropPlugin',
+);

package/src/plugins/table/pm-plugins/drag-and-drop/plugin.ts

@@ -0,0 +1,32 @@
+import type {
+  Dispatch,
+  EventDispatcher,
+} from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+
+import { DropTargetType } from './consts';
+import { createPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+
+export const createPlugin = (
+  dispatch: Dispatch,
+  eventDispatcher: EventDispatcher,
+) => {
+  return new SafePlugin({
+    state: createPluginState(dispatch, {
+      // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
+      // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
+      dropTargetType: DropTargetType.NONE,
+      dropTargetIndex: 0,
+    }),
+    key: pluginKey,
+    view: (editorView: EditorView) => {
+      // TODO: Add Pragmatic DnD monitor when the view is constructed.
+      return {
+        // TODO: Cleanup monitor instance
+        // destroy: cleanup,
+      };
+    },
+  });
+};

package/src/plugins/table/pm-plugins/drag-and-drop/reducer.ts

@@ -0,0 +1,26 @@
+import type { DragAndDropPluginAction } from './actions';
+import { DragAndDropActionType } from './actions';
+import { DropTargetType } from './consts';
+import type { DragAndDropPluginState } from './types';
+
+export default (
+  pluginState: DragAndDropPluginState,
+  action: DragAndDropPluginAction,
+): DragAndDropPluginState => {
+  switch (action.type) {
+    case DragAndDropActionType.SET_DROP_TARGET:
+      return {
+        ...pluginState,
+        dropTargetType: action.data.type,
+        dropTargetIndex: action.data.index,
+      };
+    case DragAndDropActionType.CLEAR_DROP_TARGET:
+      return {
+        ...pluginState,
+        dropTargetType: DropTargetType.NONE,
+        dropTargetIndex: 0,
+      };
+    default:
+      return pluginState;
+  }
+};

package/src/plugins/table/pm-plugins/drag-and-drop/types.ts

@@ -0,0 +1,6 @@
+import type { DropTargetType } from './consts';
+
+export interface DragAndDropPluginState {
+  dropTargetType: DropTargetType;
+  dropTargetIndex: number;
+}

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

@@ -0,0 +1,100 @@
+## 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 { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { ContentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+
+// @public (undocumented)
+type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
+
+// @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)
+    isHeaderRowRequired?: boolean;
+    // (undocumented)
+    permittedLayouts?: PermittedLayoutsDescriptor;
+    // (undocumented)
+    stickyHeaders?: boolean;
+}
+
+// @public (undocumented)
+export type TablePlugin = NextEditorPlugin<'table', {
+    pluginConfiguration: TablePluginOptions | undefined;
+    actions: {
+        insertTable: InsertTableAction;
+    };
+    dependencies: [
+    AnalyticsPlugin,
+    ContentInsertionPlugin,
+    WidthPlugin,
+    GuidelinePlugin,
+    SelectionPlugin
+    ];
+}>;
+
+// @public (undocumented)
+interface TablePluginOptions {
+    // (undocumented)
+    allowContextualMenu?: boolean;
+    // (undocumented)
+    breakoutEnabled?: boolean;
+    // (undocumented)
+    dragAndDropEnabled?: boolean;
+    // (undocumented)
+    fullWidthEnabled?: boolean;
+    // (undocumented)
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
+    // (undocumented)
+    tableOptions: PluginConfig;
+    // (undocumented)
+    tableResizingEnabled?: boolean;
+    // (undocumented)
+    wasFullWidthEnabled?: boolean;
+}
+
+// @public
+export const tablesPlugin: TablePlugin;
+
+// (No @packageDocumentation comment for this package)
+
+```